/* ============================================================ ESTILOS — Invitación de boda con dos caras (flip 3D) No tocar por boda: todo lo personalizable vive en config.js ============================================================ */ /* ---------- Paletas (se activan con data-paleta en ) ---------- */ :root, html[data-paleta="clasica"] { --fondo: #faf6ef; --fondo-2: #f3ecdd; --tinta: #3d3528; --tinta-suave: #7a6f5c; --acento: #b08d3f; --acento-claro: #d9bf7f; --tarjeta: #fffdf8; --sombra: rgba(61, 53, 40, .18); } html[data-paleta="romantica"] { --fondo: #fdf3f4; --fondo-2: #f9e3e7; --tinta: #4a2e35; --tinta-suave: #8d6b73; --acento: #c4607a; --acento-claro: #e8a8b9; --tarjeta: #fffafb; --sombra: rgba(74, 46, 53, .18); } html[data-paleta="noche"] { --fondo: #10182b; --fondo-2: #1a2540; --tinta: #eef1f8; --tinta-suave: #a8b2cc; --acento: #d4af6a; --acento-claro: #e9d3a4; --tarjeta: #1d2945; --sombra: rgba(0, 0, 0, .45); } html[data-paleta="olivo"] { --fondo: #f6f7f1; --fondo-2: #e9edda; --tinta: #33402a; --tinta-suave: #6e7a60; --acento: #708a4f; --acento-claro: #aabf8a; --tarjeta: #fcfdf9; --sombra: rgba(51, 64, 42, .16); } /* ---------- Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: "Cormorant Garamond", Georgia, serif; background: var(--fondo); color: var(--tinta); overflow: hidden; height: 100dvh; /* móvil: altura real aunque aparezca la barra del navegador */ } .script { font-family: "Great Vibes", cursive; font-weight: 400; } /* ---------- Canvas de pétalos ---------- */ #petalos { position: fixed; inset: 0; pointer-events: none; z-index: 50; } /* ---------- Contenedor flip ---------- */ .escena { width: 100%; height: 100%; perspective: 1800px; } .tarjeta-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.45, 0, .2, 1); } .tarjeta-flip.volteada { transform: rotateY(180deg); } .cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* scroll táctil fluido en iOS */ touch-action: pan-y; /* permite deslizar verticalmente */ background: radial-gradient(ellipse at top, var(--fondo-2) 0%, var(--fondo) 55%); /* Sin barra de scroll visible (se puede seguir haciendo scroll) */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge antiguo */ } .cara::-webkit-scrollbar { display: none; } /* Chrome/Safari */ /* iOS: la cara oculta no debe capturar los toques. Solo la cara visible es interactiva. */ .tarjeta-flip .cara-b { pointer-events: none; } .tarjeta-flip.volteada .cara-b { pointer-events: auto; } .tarjeta-flip.volteada .cara-a { pointer-events: none; } .cara-b { transform: rotateY(180deg); } /* ---------- Botón de voltear (inline, al final de cada cara) ---------- */ .btn-voltear { position: relative; margin-top: 36px; display: inline-flex; align-items: center; align-self: center; /* evita que se estire en contenedores flex (cara B) */ width: fit-content; margin-left: auto; margin-right: auto; gap: 8px; padding: 12px 20px; border: 1px solid var(--acento); border-radius: 999px; background: var(--tarjeta); color: var(--acento); font-family: "Cormorant Garamond", serif; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 24px var(--sombra); transition: transform .25s ease, background .25s ease, color .25s ease; } .btn-voltear:hover { transform: translateY(-2px) scale(1.03); background: var(--acento); color: var(--tarjeta); } .btn-voltear svg { width: 18px; height: 18px; } /* Pulso para que se vea que la tarjeta tiene otra cara */ .btn-voltear::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--acento); animation: pulso 2.2s ease-out infinite; pointer-events: none; } @keyframes pulso { 0% { opacity: .8; transform: scale(1); } 70% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.25); } } /* ============================================================ CARA A — INVITACIÓN ============================================================ */ .invitacion { min-height: 100%; max-width: 720px; margin: 0 auto; padding: 64px 28px 48px; text-align: center; } .marco { position: relative; border: 1px solid var(--acento-claro); outline: 1px solid var(--acento-claro); outline-offset: 6px; border-radius: 4px; padding: 56px 32px; background: var(--tarjeta); box-shadow: 0 18px 60px var(--sombra); } /* Ramitas florales dibujadas en las esquinas */ .flor { position: absolute; width: clamp(52px, 12vw, 76px); height: clamp(52px, 12vw, 76px); color: var(--acento-claro); opacity: .9; pointer-events: none; } .flor.tl { top: 10px; left: 10px; } .flor.tr { top: 10px; right: 10px; transform: scaleX(-1); } .flor.bl { bottom: 10px; left: 10px; transform: scaleY(-1); } .flor.br { bottom: 10px; right: 10px; transform: scale(-1); } .ornamento { font-size: 1.4rem; color: var(--acento); letter-spacing: .5em; margin-bottom: 18px; } .encabezado { font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--acento); margin-bottom: 10px; } .nombres { font-size: clamp(3rem, 10vw, 5rem); line-height: 1.15; margin: 18px 0 6px; } .nombres .y { display: block; font-size: .45em; color: var(--acento); } /* Fecha como pieza gráfica */ .fecha-visual { margin: 26px auto 6px; max-width: 340px; } .f-semana, .f-mes { display: block; font-size: .9rem; letter-spacing: .35em; text-indent: .35em; text-transform: uppercase; color: var(--tinta-suave); } .f-linea { display: flex; align-items: center; gap: 18px; margin: 2px 0; } .f-linea span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--acento)); } .f-linea span:last-child { background: linear-gradient(90deg, var(--acento), transparent); } .f-linea b { font-size: clamp(3.2rem, 10vw, 4.2rem); font-weight: 600; color: var(--acento); line-height: 1.1; } .intro { font-size: 1.15rem; line-height: 1.7; color: var(--tinta-suave); max-width: 480px; margin: 26px auto; font-style: italic; } .separador { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--acento), transparent); margin: 36px auto; } /* ---------- Tarjetas visuales de los eventos ---------- */ .eventos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0 6px; } .tarjeta-evento { border: 1px solid var(--acento-claro); border-radius: 16px; padding: 26px 14px 22px; background: radial-gradient(ellipse at top, var(--fondo-2), transparent 70%), var(--tarjeta); transition: transform .3s ease, box-shadow .3s ease; } .tarjeta-evento:hover { transform: translateY(-4px); box-shadow: 0 14px 36px var(--sombra); } .icono-circulo { width: 62px; height: 62px; margin: 0 auto 12px; border: 1px solid var(--acento); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--acento); background: var(--tarjeta); } .icono-circulo svg { width: 30px; height: 30px; } .tarjeta-evento h3 { font-size: .8rem; letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; color: var(--acento); } .hora-grande { font-size: 2rem; font-weight: 600; color: var(--tinta); margin: 4px 0 2px; } .tarjeta-evento .lugar { font-size: 1.2rem; line-height: 1.25; } .tarjeta-evento .direccion { color: var(--tinta-suave); font-size: .92rem; margin-top: 2px; } .btn-mapa { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 16px; border: 1px solid var(--acento-claro); border-radius: 999px; color: var(--acento); font-size: .88rem; letter-spacing: .04em; text-decoration: none; transition: background .25s, color .25s, border-color .25s; } .btn-mapa svg { width: 15px; height: 15px; } .btn-mapa:hover { background: var(--acento); border-color: var(--acento); color: #fff; } /* ---------- Dress code como etiqueta ---------- */ .chip-dresscode { display: flex; align-items: center; gap: 16px; text-align: left; border: 1px dashed var(--acento-claro); border-radius: 16px; padding: 16px 20px; margin: 20px 0 4px; background: var(--fondo); } .chip-dresscode > svg { flex-shrink: 0; width: 34px; height: 34px; color: var(--acento); } .chip-dresscode h3 { font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--acento); margin-bottom: 2px; } .dresscode { font-size: 1.02rem; color: var(--tinta-suave); font-style: italic; line-height: 1.4; } /* RSVP */ .btn-rsvp { display: inline-block; margin-top: 28px; padding: 16px 44px; background: var(--acento); color: var(--tarjeta); border-radius: 999px; font-size: 1.05rem; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 30px var(--sombra); transition: transform .25s ease, box-shadow .25s ease; } .btn-rsvp:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--sombra); } .fecha-limite { margin-top: 14px; font-size: .9rem; color: var(--tinta-suave); } .cierre { margin-top: 40px; font-size: 1.8rem; color: var(--acento); } /* Animación de entrada en cascada */ .reveal { opacity: 0; transform: translateY(26px); animation: aparecer .9s ease forwards; } @keyframes aparecer { to { opacity: 1; transform: translateY(0); } } /* ============================================================ CARA B — MENSAJE DIARIO + CONTADOR ============================================================ */ .diario { min-height: 100%; max-width: 640px; margin: 0 auto; padding: 56px 24px 48px; text-align: center; display: flex; flex-direction: column; justify-content: center; } .diario-titulo { font-size: clamp(2rem, 6vw, 2.8rem); color: var(--acento); margin-bottom: 6px; } .diario-fecha { letter-spacing: .25em; text-transform: uppercase; font-size: .85rem; color: var(--tinta-suave); margin-bottom: 30px; } /* Polaroid de la foto */ .polaroid { background: var(--tarjeta); padding: 14px 14px 18px; border-radius: 4px; box-shadow: 0 16px 50px var(--sombra); max-width: 380px; margin: 0 auto; transform: rotate(-2deg); transition: transform .4s ease; } .polaroid:hover { transform: rotate(0deg) scale(1.02); } .polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; display: block; } .mensaje-dia { font-size: clamp(1.3rem, 4vw, 1.7rem); line-height: 1.6; font-style: italic; margin: 36px auto 0; max-width: 520px; opacity: 0; animation: aparecer 1.2s .3s ease forwards; } .firma { margin-top: 16px; font-size: 1.6rem; color: var(--acento); } /* Contador */ .contador { display: flex; justify-content: center; gap: clamp(10px, 3vw, 24px); margin-top: 44px; } .contador .unidad { background: var(--tarjeta); border: 1px solid var(--acento-claro); border-radius: 10px; padding: 14px 10px; min-width: clamp(64px, 18vw, 92px); box-shadow: 0 8px 26px var(--sombra); } .contador .num { font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 600; color: var(--acento); font-variant-numeric: tabular-nums; } .contador .etiqueta { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); margin-top: 4px; } .contador-titulo { margin-top: 40px; font-size: .85rem; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-suave); } /* Mensaje del día de la boda / pasado */ .es-hoy .mensaje-dia { font-size: 2rem; font-style: normal; } /* ---------- Footer ---------- */ .pie { margin-top: 56px; padding-top: 28px; text-align: center; position: relative; } .pie::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 1px; background: linear-gradient(90deg, transparent, var(--acento), transparent); } .pie-iniciales { font-family: "Cinzel", "Cormorant Garamond", serif; font-weight: 500; font-size: 1.5rem; letter-spacing: .35em; text-indent: .35em; /* compensa el espaciado para que quede centrado */ color: var(--acento); line-height: 1.3; } .pie-marca { margin-top: 6px; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-suave); } .pie-marca span { color: var(--acento); font-weight: 600; } /* ============================================================ MÓVIL — ajustes finos para que quede perfecto en pantalla ============================================================ */ @media (max-width: 520px) { /* --- Cara A: invitación --- */ .invitacion { padding: 20px 12px calc(28px + env(safe-area-inset-bottom)); } .marco { padding: 34px 18px; outline-offset: 4px; } .ornamento { font-size: 1.1rem; letter-spacing: .35em; margin-bottom: 12px; } .encabezado { font-size: 2.3rem; } .nombres { font-size: 3.1rem; line-height: 1.2; margin: 14px 0 4px; } .fecha-grande { font-size: .95rem; letter-spacing: .18em; margin: 18px 0 6px; } .intro { font-size: 1.05rem; line-height: 1.6; margin: 20px auto; } .separador { margin: 26px auto; } .eventos { grid-template-columns: 1fr; gap: 12px; margin: 24px 0 4px; } .tarjeta-evento { padding: 22px 14px 18px; } .hora-grande { font-size: 1.7rem; } .btn-mapa { padding: 9px 18px; } /* zona táctil generosa */ .chip-dresscode { padding: 14px 14px; gap: 12px; } .f-linea b { font-size: 3rem; } .f-semana, .f-mes { font-size: .78rem; letter-spacing: .26em; } .flor { width: 46px; height: 46px; } .btn-rsvp { display: block; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; padding: 16px 10px; font-size: .95rem; letter-spacing: .12em; } .fecha-limite { font-size: .85rem; } .cierre { margin-top: 30px; font-size: 1.55rem; } .btn-voltear { margin-top: 28px; padding: 14px 24px; font-size: .9rem; width: 100%; max-width: 320px; justify-content: center; } /* --- Cara B: mensaje diario + contador --- */ .diario { padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); justify-content: flex-start; } .diario-titulo { font-size: 2rem; } .diario-fecha { font-size: .75rem; letter-spacing: .18em; margin-bottom: 20px; } .polaroid { max-width: min(300px, 78vw); padding: 10px 10px 14px; } .mensaje-dia { font-size: 1.2rem; line-height: 1.55; margin-top: 26px; } .firma { font-size: 1.4rem; margin-top: 12px; } .contador-titulo { margin-top: 28px; font-size: .75rem; letter-spacing: .22em; } .contador { gap: 8px; margin-top: 14px; } .contador .unidad { min-width: 0; flex: 1; max-width: 84px; padding: 12px 4px; } .contador .num { font-size: 1.6rem; } .contador .etiqueta { font-size: .62rem; letter-spacing: .14em; } /* --- Footer --- */ .pie { margin-top: 36px; padding-top: 22px; } .pie-iniciales { font-size: 1.25rem; } .pie-marca { font-size: .68rem; letter-spacing: .24em; } } /* Pantallas muy pequeñas */ @media (max-width: 350px) { .nombres { font-size: 2.6rem; } .encabezado { font-size: 2rem; } }