/* ==========================================================================
   Brayan & Sofía · 14.09.2026 — Hoja de estilos
   Paleta: marfil · salvia · dorado champagne  |  Estilo editorial 2026
   ========================================================================== */

/* ---------- Variables ---------- */
:root{
    --marfil:      #f7f2ea;
    --marfil-2:    #fbf8f2;
    --crema:       #efe7d8;
    --salvia:      #7c8471;
    --salvia-txt:  #5f6857;   /* variante legible de salvia para textos pequeños (AA sobre marfil) */
    --salvia-osc:  #4b5545;
    --salvia-prof: #38402f;
    --dorado:      #c2a25a;
    --dorado-osc:  #a6863f;
    --tinta:       #3a3a34;
    --tinta-suave: #67675c;
    --blanco:      #ffffff;
    --linea:       rgba(124,132,113,.28);

    --serif:  "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
    --sans:   "Jost", "Century Gothic", "Segoe UI", system-ui, sans-serif;
    --script: "Great Vibes", "Segoe Script", cursive;

    --sombra:    0 18px 50px -22px rgba(56,64,47,.45);
    --sombra-sm: 0 10px 30px -18px rgba(56,64,47,.5);
    --radio:     18px;
    --ancho:     1160px;
    --transi:    .5s cubic-bezier(.2,.7,.2,1);
    --transi-rapida: .26s cubic-bezier(.2,.7,.2,1);  /* micro-interacciones: hover, foco, copiar */
    --nav-alto:  78px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Sin movimiento: se acortan animaciones y transiciones en vez de anularlas.
   Anularlas dejaba en opacity:0 todo lo que aparece con `animation ... forwards`
   (nombres del hero, lema, fecha) y el contenido quedaba invisible. */
@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{
        animation-duration:.001ms!important;
        animation-delay:0s!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
        transition-delay:0s!important;
        scroll-behavior:auto!important;
    }
    /* El preloader mantiene su retardo de seguridad. */
    #preloader{ animation-delay:3.5s!important; }
}
/* El encabezado es fijo: los anclajes deben parar por debajo de él. */
section[id],footer[id]{ scroll-margin-top:calc(var(--nav-alto) + .75rem); }
body{
    font-family:var(--sans);
    font-weight:300;
    color:var(--tinta);
    background:var(--marfil);
    line-height:1.75;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    letter-spacing:.2px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
svg{ display:block; }

/* Foco visible para teclado (los campos del RSVP anulan el outline propio). */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
    outline:2px solid var(--dorado-osc);
    outline-offset:3px;
}
.seccion-verde :focus-visible,
.pie :focus-visible,
.hero.con-foto :focus-visible,
.lightbox :focus-visible{ outline-color:#f2cf91; }

/* Saltar al contenido: solo aparece al tabular. */
.salta-al-contenido{
    position:fixed; top:.75rem; left:50%; transform:translate(-50%,-160%);
    z-index:2100; background:var(--salvia-prof); color:#f6f4ec;
    padding:.7rem 1.3rem; border-radius:100px;
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
    transition:transform var(--transi-rapida);
}
.salta-al-contenido:focus-visible{ transform:translate(-50%,0); }

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.12; color:var(--salvia-prof); }
.script{ font-family:var(--script); font-weight:400; color:var(--dorado-osc); }

.seccion-eyebrow{
    font-family:var(--sans); font-weight:400; font-size:.72rem;
    letter-spacing:.42em; text-transform:uppercase; color:var(--salvia-txt);
    display:block; text-align:center; margin-bottom:.6rem;
}
.seccion-titulo{
    font-size:clamp(2rem,5.5vw,3.3rem);
    text-align:center; margin-bottom:.4rem; font-weight:500;
    text-wrap:balance;
}
/* El script lleva descendentes (g, j, y): se reserva algo de aire abajo. */
.seccion-titulo .script{ display:block; font-size:1.5em; line-height:.9; margin-top:-.12em; padding-bottom:.08em; }
.seccion-intro{
    max-width:640px; margin:1.1rem auto 0; text-align:center;
    color:var(--tinta-suave); font-size:1.06rem;
    text-wrap:pretty;
}
h1,h2,h3,h4{ text-wrap:balance; }
p,li,blockquote{ text-wrap:pretty; }

/* ---------- Layout de secciones ---------- */
.seccion{ padding:clamp(4.5rem,9vw,7.5rem) 1.4rem; position:relative; }
.contenedor{ max-width:var(--ancho); margin-inline:auto; }
.seccion-alt{ background:var(--marfil-2); }
.seccion-verde{ background:linear-gradient(160deg,var(--salvia-osc),var(--salvia-prof)); color:#eef0e6; }
.seccion-verde h2,.seccion-verde h3{ color:#f5f6ee; }
/* Sobre fondo verde la jerarquía se invierte: antes iba resuelto con style="" en cada plantilla. */
.seccion-verde .seccion-eyebrow{ color:var(--dorado); }
.seccion-verde .seccion-intro{ color:#dfe3d4; }
.seccion-cabeza{ margin-bottom:3rem; }

/* ---------- Divisor botánico ---------- */
.divisor{ display:flex; justify-content:center; color:var(--dorado); margin:1.6rem auto; }
.divisor svg{ width:210px; max-width:60vw; height:auto; opacity:.85; }

/* ---------- Botones ---------- */
.btn{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:var(--sans); font-weight:400; font-size:.82rem;
    letter-spacing:.22em; text-transform:uppercase;
    padding:.95rem 2rem; border-radius:100px;
    transition:var(--transi-rapida); position:relative; white-space:nowrap;
}
.btn .ico{ width:1.05rem; height:1.05rem; }
.btn-primario{ background:var(--salvia-osc); color:#f6f4ec; box-shadow:var(--sombra-sm); }
.btn-primario:hover{ background:var(--salvia-prof); transform:translateY(-2px); }
.btn-oro{ background:linear-gradient(135deg,var(--dorado),var(--dorado-osc)); color:#3a2f17; }
.btn-oro:hover{ transform:translateY(-2px); box-shadow:var(--sombra-sm); }
.btn-linea{ border:1px solid var(--salvia); color:var(--salvia-osc); }
.btn-linea:hover{ background:var(--salvia); color:#fff; }
.btn-claro{ border:1px solid rgba(255,255,255,.6); color:#fff; }
.btn-claro:hover{ background:#fff; color:var(--salvia-prof); }

/* ==========================================================================
   Preloader
   ========================================================================== */
#preloader{
    position:fixed; inset:0; z-index:2000;
    background:var(--marfil); display:grid; place-items:center;
    transition:opacity .7s ease, visibility .7s ease;
    /* Red de seguridad: si `load` no llega (imagen o iframe colgado) la cortina
       se retira sola a los 3,5 s en vez de tapar la invitación para siempre. */
    animation:preloaderRescate .5s ease 3.5s forwards;
}
#preloader.oculto{ opacity:0; visibility:hidden; }
@keyframes preloaderRescate{ to{ opacity:0; visibility:hidden; } }
/* Sin JavaScript no hay nada que retirar la cortina: se oculta de entrada. */
.no-js #preloader{ display:none; }
.preloader-monos{
    font-family:var(--serif); font-size:clamp(2.6rem,8vw,4rem); color:var(--salvia-osc);
    letter-spacing:.05em; opacity:0; animation:aparecer 1.1s ease .1s forwards;
}
.preloader-monos span{ font-family:var(--script); color:var(--dorado); margin:0 .12em; }
@keyframes aparecer{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ==========================================================================
   Navegación
   ========================================================================== */
.nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    transition:var(--transi);
}
/* El fondo y el desenfoque viven en un pseudo-elemento, NO en .nav.
   Aplicar backdrop-filter sobre .nav la convierte en bloque contenedor de sus
   descendientes `position:fixed`: el panel móvil dejaba de medirse contra la
   pantalla y colapsaba a la altura de la barra, con los enlaces desbordados. */
.nav::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:transparent; transition:var(--transi);
}
.nav-wrap{
    max-width:var(--ancho); margin-inline:auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.3rem 1.6rem;
}
.nav-logo{
    font-family:var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:.04em;
    color:var(--salvia-prof); transition:color var(--transi);
}
.nav-logo span{ font-family:var(--script); color:var(--dorado); margin:0 .12em; font-weight:400; }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{
    font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta);
    position:relative; padding:.3rem 0; transition:color var(--transi);
}
.nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
    background:var(--dorado); transition:width var(--transi-rapida);
}
.nav-links a:hover::after,
.nav-links a.activo::after{ width:100%; }
.nav-links a:hover{ color:var(--salvia-osc); }
/* Sección en pantalla: el enlace correspondiente queda marcado. */
.nav-links a.activo{ color:var(--salvia-osc); }
body.hero-con-foto .nav:not(.scrolled) .nav-links a.activo{ color:#fff; }
.nav-cta{
    border:1px solid var(--salvia); border-radius:100px;
    padding:.5rem 1.15rem!important; color:var(--salvia-osc)!important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--salvia); color:#fff!important; }

/* nav sólido al hacer scroll */
.nav.scrolled::before{ background:rgba(247,242,234,.9); backdrop-filter:blur(12px); }
.nav.scrolled{ box-shadow:0 8px 30px -20px rgba(56,64,47,.5); }
.nav.scrolled .nav-wrap{ padding-block:.85rem; }

/* Velo detrás del menú móvil: da contraste y ofrece un área para cerrarlo. */
.nav-velo{
    position:fixed; inset:0; z-index:999;
    background:rgba(40,45,36,.5); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; transition:opacity var(--transi-rapida), visibility var(--transi-rapida);
}
.nav-velo.ver{ opacity:1; visibility:visible; }
@media (min-width:721px){ .nav-velo{ display:none; } }

/* burger */
.nav-burger{ display:none; flex-direction:column; gap:5px; padding:.4rem; }
.nav-burger span{ width:26px; height:2px; background:var(--salvia-prof); border-radius:2px; transition:var(--transi); }
.nav-burger.activo span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.activo span:nth-child(2){ opacity:0; }
.nav-burger.activo span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.visible{ opacity:1; transform:none; }
/* Modo estático (?estatico=1) y respaldo sin JavaScript */
body.estatico #preloader{ display:none!important; }
body.estatico .reveal{ opacity:1!important; transform:none!important; }
body.estatico .hero-eyebrow,body.estatico .hero-nombres .n,body.estatico .hero-nombres .amp,
body.estatico .hero-lema,body.estatico .hero-fecha-pill,body.estatico .hero-scroll{ opacity:1!important; animation:none!important; }
.no-js .reveal{ opacity:1; transform:none; }
body.estatico.corto .hero{ min-height:760px; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; }
.reveal.d3{ transition-delay:.3s; } .reveal.d4{ transition-delay:.4s; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
    min-height:100svh; position:relative;
    display:grid; place-items:center; text-align:center;
    padding:7rem 1.4rem 3rem; overflow:hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, #fff9f5 0%, #f4e4dc 48%, #dfc5b7 100%);
}
.hero-foto{ position:absolute; z-index:0; inset:0; display:block; overflow:hidden; background-size:cover; background-position:center; }
.hero-foto img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
/* Veladura rosa nude por capas, no plana: oscurece arriba (para la barra) y abajo
   (para el indicador de scroll), aclara los tercios intermedios y concentra el
   contraste justo detrás del bloque de texto. Así la foto se ve más que antes y
   los nombres siguen legibles. */
.hero-foto::after{
    content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
    background:
        linear-gradient(180deg,
            rgba(74,38,46,.52) 0%,
            rgba(74,38,46,.10) 20%,
            rgba(92,48,54,.14) 46%,
            rgba(78,44,36,.62) 100%),
        radial-gradient(74% 54% at 50% 50%, rgba(58,30,36,.36) 0%, rgba(58,30,36,0) 74%),
        linear-gradient(118deg,rgba(237,202,188,.18),rgba(204,164,94,.13));
}
.hero.con-foto .hero-inner *{ color:#fff8f2!important; }
/* La sombra permite bajar la veladura sin perder legibilidad. */
.hero.con-foto .hero-inner{ text-shadow:0 2px 20px rgba(46,22,28,.5), 0 1px 3px rgba(46,22,28,.3); }
.hero.con-foto .hero-scroll{ text-shadow:0 1px 10px rgba(46,22,28,.6); }
.hero.con-foto .hero-nombres .amp,.hero.con-foto .hero-fecha-pill .ico{ color:#f2cf91!important; }
.hero.con-foto .hero-fecha-pill{ background:rgba(97,51,61,.2); border-color:rgba(255,242,229,.56); }

/* La foto conserva el protagonismo, con una veladura rosa nude y acentos oro. */
body.hero-con-foto .nav:not(.scrolled)::before{
    background:linear-gradient(180deg,rgba(24,29,25,.7),rgba(24,29,25,.16));
    backdrop-filter:blur(5px);
}
body.hero-con-foto .nav:not(.scrolled) .nav-logo,
body.hero-con-foto .nav:not(.scrolled) .nav-links a{ color:#fffdf8; text-shadow:0 1px 8px rgba(0,0,0,.36); }
body.hero-con-foto .nav:not(.scrolled) .nav-logo span{ color:#f2cf91; }
body.hero-con-foto .nav:not(.scrolled) .nav-cta{ border-color:rgba(255,253,248,.8); color:#fffdf8!important; }
body.hero-con-foto .nav:not(.scrolled) .nav-burger span{ background:#fffdf8; }

/* El indicador de scroll queda fuera de .hero-inner: necesita su propio color. */
.hero.con-foto .hero-scroll{ color:#fff8f2; }

/* ornamento botánico de fondo */
.hero-ornamento{ position:absolute; inset:0; pointer-events:none; color:var(--salvia); opacity:.14; }
.hero-ornamento svg{ position:absolute; width:340px; height:auto; }
.hero-ornamento .o1{ top:-40px; left:-60px; transform:rotate(15deg); }
.hero-ornamento .o2{ bottom:-50px; right:-60px; transform:rotate(195deg); }

.hero-inner{ position:relative; z-index:2; max-width:900px; }
.hero-eyebrow{
    font-size:.8rem; letter-spacing:.5em; text-transform:uppercase; color:var(--salvia-txt);
    margin-bottom:1.4rem; opacity:0; animation:aparecer 1s ease .3s forwards;
}
.hero-nombres{
    font-size:clamp(3.4rem,13vw,8.5rem); line-height:.92; font-weight:500;
    color:var(--salvia-prof); letter-spacing:.01em;
    display:flex; flex-direction:column; align-items:center; gap:.1em;
}
.hero-nombres .amp{ font-family:var(--script); font-size:.55em; color:var(--dorado); font-weight:400; line-height:1; }
.hero-nombres .n{ opacity:0; animation:aparecer 1.1s ease forwards; }
.hero-nombres .n1{ animation-delay:.45s; }
.hero-nombres .amp{ opacity:0; animation:aparecer 1.1s ease .6s forwards; }
.hero-nombres .n2{ animation-delay:.75s; }
.hero-lema{
    font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,3.5vw,1.7rem);
    color:var(--tinta-suave); margin-top:1.2rem; opacity:0; animation:aparecer 1.1s ease .95s forwards;
}
.hero-fecha-pill{
    display:inline-flex; align-items:center; gap:.7rem; margin-top:1.8rem;
    padding:.6rem 1.5rem; border:1px solid var(--linea); border-radius:100px;
    background:rgba(255,255,255,.4); backdrop-filter:blur(4px);
    font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; color:var(--salvia-osc);
    opacity:0; animation:aparecer 1.1s ease 1.1s forwards;
}
.hero-fecha-pill .ico{ width:1.1rem; height:1.1rem; color:var(--dorado); }
.hero-scroll{
    position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--salvia-txt);
    opacity:0; animation:aparecer 1s ease 1.4s forwards;
}
.hero-scroll .ico{ width:1.3rem; height:1.3rem; animation:flotar 2s ease-in-out infinite; }
@keyframes flotar{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} }

.hero-nota-foto{
    position:absolute; bottom:1.4rem; right:1.4rem; z-index:2;
    font-size:.66rem; letter-spacing:.12em; color:var(--salvia); opacity:.6;
    border:1px dashed var(--linea); padding:.35rem .7rem; border-radius:8px;
}

/* ==========================================================================
   INVITACIÓN
   ========================================================================== */
.invitacion{
    /* Vuelve al tono de la seccion siguiente para que no se vea el corte. */
    background:linear-gradient(160deg,var(--marfil-2) 0%,#f2eadc 52%,var(--marfil-2) 100%);
}
.invitacion-caja{
    max-width:760px; margin-inline:auto; padding:clamp(2.4rem,6vw,4.4rem) clamp(1.4rem,5vw,4.5rem);
    text-align:center; background:rgba(255,255,255,.42); border:1px solid var(--linea);
    border-radius:var(--radio); box-shadow:var(--sombra-sm);
}
.invitacion-caja .divisor{ margin:0 auto 1.35rem; }
.invitacion-caja .divisor:last-child{ margin:1.35rem auto 0; }
.invitacion-texto{
    font-family:var(--serif); font-size:clamp(1.35rem,3.8vw,2rem); line-height:1.6;
    color:var(--salvia-prof);
}

/* ==========================================================================
   CONTADOR
   ========================================================================== */
.contador{ text-align:center; }
.contador-grid{
    display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(.6rem,2.5vw,1.6rem);
    margin-top:2.6rem;
}
.cuenta{
    min-width:clamp(78px,20vw,130px);
    background:var(--marfil-2); border:1px solid var(--linea); border-radius:var(--radio);
    padding:1.4rem .8rem 1.1rem; box-shadow:var(--sombra-sm); position:relative;
}
.cuenta::before{ content:""; position:absolute; top:0; left:14%; right:14%; height:2px;
    background:linear-gradient(90deg,transparent,var(--dorado),transparent); }
.cuenta-num{
    font-family:var(--serif); font-size:clamp(2.4rem,7vw,3.6rem); font-weight:600;
    color:var(--salvia-prof); line-height:1; font-variant-numeric:tabular-nums;
}
.cuenta-lbl{ font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--salvia-txt); margin-top:.5rem; }
.contador-msg{ margin-top:2rem; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--tinta-suave); }
.contador.finalizado .contador-grid{ display:none; }

/* ==========================================================================
   VERSÍCULO destacado
   ========================================================================== */
.versiculo{ text-align:center; }
.versiculo .comilla{ font-family:var(--serif); font-size:5rem; line-height:0; color:var(--dorado); opacity:.5; display:block; height:2.2rem; }
.versiculo blockquote{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(1.4rem,4vw,2.3rem); line-height:1.5; max-width:820px; margin-inline:auto;
    color:#f2f4ea;
}
.versiculo cite{
    display:block; margin-top:1.6rem; font-family:var(--sans); font-style:normal;
    font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dorado);
}
.versiculo cite small{ display:block; margin-top:.4rem; letter-spacing:.15em; opacity:.7; font-size:.9em; }

/* ==========================================================================
   HISTORIA — timeline
   ========================================================================== */
.timeline{ position:relative; max-width:760px; margin:3rem auto 0; }
.timeline::before{ content:""; position:absolute; left:50%; top:8px; bottom:8px; width:1px;
    background:linear-gradient(var(--dorado),var(--linea)); transform:translateX(-50%); }
.hito{ position:relative; width:50%; padding:0 2.4rem 2.8rem; }
.hito:nth-child(odd){ left:0; text-align:right; }
.hito:nth-child(even){ left:50%; text-align:left; }
.hito-punto{ position:absolute; top:4px; width:14px; height:14px; border-radius:50%;
    background:var(--dorado); border:3px solid var(--marfil-2); box-shadow:0 0 0 1px var(--dorado); }
.hito:nth-child(odd) .hito-punto{ right:-7px; }
.hito:nth-child(even) .hito-punto{ left:-7px; }
.hito-fecha{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dorado-osc); }
.hito-titulo{ font-size:1.5rem; margin:.25rem 0 .5rem; }
.hito-texto{ color:var(--tinta-suave); font-size:.98rem; }

/* ==========================================================================
   PROGRAMA
   ========================================================================== */
.programa-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; margin-top:1rem; }
.evento{
    background:var(--marfil-2); border:1px solid var(--linea); border-radius:var(--radio);
    padding:2.6rem 1.7rem; text-align:center; transition:var(--transi-rapida); position:relative; overflow:hidden;
}
.evento:hover{ transform:translateY(-6px); box-shadow:var(--sombra); }
.evento-ico{
    width:66px; height:66px; margin:0 auto 1.2rem; border-radius:50%;
    display:grid; place-items:center; color:var(--salvia-osc);
    background:radial-gradient(circle at 50% 40%, #fff, var(--crema));
    border:1px solid var(--linea); position:relative;
    box-shadow:inset 0 0 0 4px rgba(255,255,255,.34), 0 5px 14px -12px rgba(56,64,47,.7);
}
.evento-ico::after{ content:""; position:absolute; inset:7px; border:1px solid rgba(194,162,90,.32); border-radius:50%; pointer-events:none; }
.evento-ico svg{ width:31px; height:31px; stroke-width:1.5; position:relative; z-index:1; }
.evento-hora{ font-family:var(--serif); font-size:2rem; color:var(--dorado-osc); font-weight:600; }
.evento-titulo{ font-size:1.35rem; margin:.15rem 0 .7rem; }
.evento-lugar{ font-weight:400; color:var(--salvia-osc); font-size:.95rem; }
.evento-detalle{ color:var(--tinta-suave); font-size:.9rem; margin-top:.7rem; }
.evento-mapa{ margin-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem;
    font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--salvia-txt); }
.evento-mapa svg{ width:1rem; height:1rem; }
.evento-mapa:hover{ color:var(--dorado-osc); }

/* ==========================================================================
   GALERÍA
   ========================================================================== */
.galeria-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:1rem;
    grid-auto-rows:220px;
    /* `dense` rellena los huecos que dejan las piezas de 2 columnas del mosaico. */
    grid-auto-flow:dense;
}
.galeria-item{
    position:relative; overflow:hidden; border-radius:14px; background:var(--crema);
    cursor:pointer; transition:var(--transi);
}
.galeria-item:focus-visible{ outline:2px solid var(--dorado-osc); outline-offset:3px; }
/* Lupa al enfocar o pasar el cursor: indica que la foto se puede ampliar. */
.galeria-lupa{
    position:absolute; z-index:2; right:.7rem; bottom:.7rem;
    width:2.1rem; height:2.1rem; border-radius:50%;
    display:grid; place-items:center; color:#fff;
    background:rgba(40,45,36,.55); backdrop-filter:blur(3px);
    opacity:0; transform:scale(.85); transition:opacity var(--transi-rapida), transform var(--transi-rapida);
}
.galeria-lupa svg{ width:1.05rem; height:1.05rem; }
.galeria-item:hover .galeria-lupa,
.galeria-item:focus-visible .galeria-lupa{ opacity:1; transform:none; }
.galeria-item.grande{ grid-column:span 2; grid-row:span 2; }
.galeria-item.alto{ grid-row:span 2; }
.galeria-item picture{ display:block; width:100%; height:100%; }
.galeria-item img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.galeria-item:hover img{ transform:scale(1.07); }
.galeria-item::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(transparent 55%, rgba(56,64,47,.35)); opacity:0; transition:var(--transi); }
.galeria-item:hover::after{ opacity:1; }
.galeria-nota{ text-align:center; margin-top:2rem; font-size:.85rem; color:var(--tinta-suave); font-style:italic; }

/* ---------- Carrusel de la galería ---------- */
.carrusel{ position:relative; margin-top:1.6rem; }
.carrusel-viewport{
    overflow:hidden; border-radius:var(--radio); background:var(--crema);
    box-shadow:0 26px 64px -34px rgba(56,64,47,.55);
}
.carrusel-track{ display:flex; transition:transform .6s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.carrusel-slide{ flex:0 0 100%; width:100%; aspect-ratio:3/2; border-radius:0; cursor:pointer; }
.carrusel-slide picture{ display:block; width:100%; height:100%; }
.carrusel-slide img{ display:block; width:100%; height:100%; object-fit:cover; }
/* El slide reutiliza .galeria-item pero sin el zoom/máscara del mosaico. */
.carrusel-slide.galeria-item::after{ content:none; }
.carrusel-slide.galeria-item:hover img{ transform:none; }

.carrusel-flecha{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:2.9rem; height:2.9rem; border-radius:50%; border:none; cursor:pointer;
    display:grid; place-items:center; font-size:1.9rem; line-height:1; padding-bottom:.15rem;
    color:var(--salvia-prof); background:rgba(255,255,255,.82); backdrop-filter:blur(4px);
    box-shadow:0 8px 22px -10px rgba(56,64,47,.5); transition:var(--transi-rapida);
}
.carrusel-flecha:hover{ background:#fff; color:var(--salvia-osc); }
.carrusel-flecha:focus-visible{ outline:2px solid var(--dorado-osc); outline-offset:3px; }
.carrusel-prev{ left:.8rem; }
.carrusel-next{ right:.8rem; }

.carrusel-puntos{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1.1rem; }
.carrusel-punto{
    width:.62rem; height:.62rem; border-radius:50%; border:none; padding:0; cursor:pointer;
    background:var(--linea); transition:var(--transi-rapida);
}
.carrusel-punto.activo{ background:var(--dorado); transform:scale(1.25); }
.carrusel-punto:focus-visible{ outline:2px solid var(--dorado-osc); outline-offset:2px; }

.galeria-vacia{ max-width:640px; margin:1.6rem auto 0; }
.galeria-vacia .placeholder{ aspect-ratio:3/2; height:auto; }

@media (prefers-reduced-motion:reduce){ .carrusel-track{ transition:none; } }
@media (max-width:720px){
    .carrusel-slide{ aspect-ratio:4/3; }
    .carrusel-flecha{ width:2.5rem; height:2.5rem; font-size:1.6rem; }
    .carrusel-prev{ left:.45rem; } .carrusel-next{ right:.45rem; }
}

.campo-trampa{ position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:1500; background:rgba(30,34,24,.92);
    display:none; place-items:center; padding:2rem; }
.lightbox.abierto{ display:grid; }
.lightbox img{ max-width:92vw; max-height:86vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox-cerrar,.lightbox-nav{ position:absolute; color:#fff; font-size:2rem; width:3rem; height:3rem;
    display:grid; place-items:center; border-radius:50%; transition:background .3s; }
.lightbox-cerrar{ top:1.2rem; right:1.2rem; }
.lightbox-nav{ top:50%; transform:translateY(-50%); font-size:2.4rem; }
.lb-prev{ left:1rem; } .lb-next{ right:1rem; }
.lightbox-cerrar:hover,.lightbox-nav:hover{ background:rgba(255,255,255,.15); }
.lightbox-conteo{
    position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.72); font-size:.72rem; letter-spacing:.24em;
    font-variant-numeric:tabular-nums;
}
/* En móviles los controles se separan del borde y crecen para el pulgar. */
@media (max-width:720px){
    .lightbox{ padding:1rem; }
    .lightbox-nav{ width:2.6rem; height:2.6rem; background:rgba(255,255,255,.12); }
    .lb-prev{ left:.4rem; } .lb-next{ right:.4rem; }
    .lightbox-cerrar{ top:.6rem; right:.6rem; background:rgba(255,255,255,.12); }
}

/* ==========================================================================
   VIDEO
   ========================================================================== */
.video-marco{ max-width:920px; margin:2.5rem auto 0; border-radius:var(--radio); overflow:hidden;
    box-shadow:var(--sombra); background:#000; aspect-ratio:16/9; position:relative; }
.video-marco iframe,.video-marco video{ width:100%; height:100%; border:0; display:block; object-fit:cover; }

/* ==========================================================================
   UBICACIONES
   ========================================================================== */
.lugares-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1rem; }
.lugar{ background:var(--marfil-2); border:1px solid var(--linea); border-radius:var(--radio);
    overflow:hidden; transition:var(--transi-rapida); display:flex; flex-direction:column; }
.lugar:hover{ transform:translateY(-5px); box-shadow:var(--sombra); }
.lugar-mapa{ aspect-ratio:16/10; background:var(--crema); position:relative; }
.lugar-mapa iframe{ width:100%; height:100%; border:0; filter:grayscale(.15) contrast(1.02); }
.lugar-mapa .placeholder{ position:absolute; inset:0; border-radius:0; }
.lugar-cuerpo{ padding:1.6rem 1.5rem 1.8rem; text-align:center; flex:1; display:flex; flex-direction:column; }
.lugar-tipo{ font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--dorado-osc); }
.lugar-nombre{ font-size:1.3rem; margin:.35rem 0 .2rem; }
.lugar-sub{ font-size:.82rem; color:var(--salvia-txt); letter-spacing:.04em; margin-bottom:.35rem; }
.lugar-dir{ color:var(--tinta-suave); font-size:.92rem; }
.lugar-hora{ margin-top:.5rem; color:var(--salvia-osc); font-size:.85rem; letter-spacing:.05em; }
.lugar .btn{ margin-top:1.2rem; align-self:center; }

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp-caja{ max-width:640px; margin:2.5rem auto 0; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.22); border-radius:var(--radio); padding:2.6rem clamp(1.4rem,4vw,2.6rem); }
/* Saludo personalizado y acuse de respuesta del invitado. */
.rsvp-saludo{ color:#f5f6ee; margin-top:.8rem; }
.rsvp-estado{
    max-width:640px; margin:1.4rem auto 0; padding:1rem 1.25rem;
    border:1px solid rgba(255,255,255,.36); border-left:3px solid var(--dorado);
    border-radius:12px; background:rgba(255,255,255,.12); color:#fff;
}
.rsvp-estado strong{ color:#fff; }
.rsvp-limite{ text-align:center; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dorado); margin-bottom:1.6rem; }
.form-fila{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.campo{ margin-bottom:1.1rem; }
.campo label{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.4rem; color:#dfe3d4; }
.campo input,.campo select,.campo textarea{
    width:100%; font-family:var(--sans); font-size:1rem; color:#fff;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28);
    border-radius:12px; padding:.85rem 1rem; transition:var(--transi);
}
.campo input::placeholder,.campo textarea::placeholder{ color:rgba(255,255,255,.45); }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--dorado); background:rgba(255,255,255,.14); }
.campo select option{ color:#333; }
.rsvp-caja .btn{ width:100%; justify-content:center; margin-top:.5rem; }
.rsvp-o{ text-align:center; margin:1.4rem 0; color:#cfd4c4; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; }

/* ==========================================================================
   VESTIMENTA
   ========================================================================== */
.vest-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; align-items:center; margin-top:1rem; }
.vest-info{ text-align:center; }
.vest-ico{ width:80px; height:80px; margin:0 auto 1.2rem; color:var(--salvia-osc);
    display:grid; place-items:center; border-radius:50%; border:1px solid var(--linea); background:var(--marfil-2); }
.vest-ico svg{ width:40px; height:40px; }
.vest-estilo{ font-size:1.8rem; margin-bottom:.5rem; }
.vest-detalle{ color:var(--tinta-suave); max-width:420px; margin-inline:auto; }
.vest-reservados{ margin-top:1.6rem; padding:1.2rem 1.4rem; background:var(--marfil-2);
    border:1px solid var(--linea); border-radius:14px; }
.vest-reservados h4{ font-family:var(--sans); font-weight:500; font-size:.75rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--dorado-osc); margin-bottom:.4rem; }
.vest-paleta{ display:flex; gap:.6rem; justify-content:center; margin-top:1rem; }
.vest-color{ width:44px; height:44px; border-radius:50%; box-shadow:var(--sombra-sm); border:2px solid #fff; }

/* ==========================================================================
   REGALOS
   ========================================================================== */
.regalos-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; max-width:820px; margin:2.5rem auto 0; }
/* Con tres opciones, cada método queda en la misma fila en pantallas amplias. */
.regalos-grid--tres{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1120px; }
.regalo{ background:var(--marfil-2); border:1px solid var(--linea); border-radius:var(--radio);
    padding:2.4rem 1.8rem; text-align:center; transition:var(--transi-rapida); }
.regalo:hover{ transform:translateY(-5px); box-shadow:var(--sombra); }
.regalo-ico{ width:60px; height:60px; margin:0 auto 1.1rem; color:var(--dorado-osc);
    display:grid; place-items:center; border-radius:50%; background:var(--crema); }
.regalo-ico svg{ width:28px; height:28px; }
.regalo h3{ font-size:1.3rem; margin-bottom:.5rem; }
.regalo p{ color:var(--tinta-suave); font-size:.95rem; }

/* Cuenta bancaria + copiar */
.cuenta-bancaria{ margin-top:1.2rem; text-align:left; background:var(--crema);
    border:1px solid var(--linea); border-radius:14px; padding:1rem 1.1rem; }
.cb-banco{ display:block; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--dorado-osc); margin-bottom:.7rem; text-align:center; }
.cb-fila{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.5rem 0; }
.cb-fila + .cb-fila{ border-top:1px dashed var(--linea); }
.cb-lbl{ display:block; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); }
.cb-num{ font-family:var(--sans); font-weight:500; font-size:1rem; color:var(--salvia-prof);
    letter-spacing:.03em; font-variant-numeric:tabular-nums; word-break:break-all; }
.btn-copiar{ flex-shrink:0; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
    color:var(--salvia-osc); background:#fff; border:1px solid var(--linea); transition:var(--transi-rapida); }
.btn-copiar svg{ width:1.1rem; height:1.1rem; }
.btn-copiar:hover{ background:var(--salvia); color:#fff; border-color:var(--salvia); }
.btn-copiar.ok{ background:var(--salvia-osc); color:#fff; border-color:var(--salvia-osc); }

/* Yape */
.yape-datos{ margin:1.2rem auto 0; padding:1rem 1.1rem; border:1px solid var(--linea); border-radius:14px; background:var(--crema); }
.yape-etiqueta{ display:block; color:var(--dorado-osc); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; }
.yape-numero{ display:block; margin-top:.2rem; color:var(--salvia-prof); font-family:var(--sans); font-size:1.1rem; font-weight:500; letter-spacing:.035em; font-variant-numeric:tabular-nums; }
.yape-titular{ display:block; margin-top:.12rem; color:var(--tinta-suave); font-size:.86rem; }
.regalo-ver-qr{ margin-top:1.15rem; }

/* Modal del código QR */
body.qr-modal-abierto{ overflow:hidden; }
.qr-modal[hidden]{ display:none; }
.qr-modal{ position:fixed; inset:0; z-index:1700; display:grid; place-items:center; padding:1.25rem; }
.qr-modal__velo{ position:absolute; inset:0; background:rgba(30,34,24,.72); backdrop-filter:blur(5px); }
.qr-modal__dialogo{ position:relative; z-index:1; width:min(100%,410px); max-height:calc(100svh - 2.5rem); overflow:auto; padding:2rem; border:1px solid rgba(194,162,90,.48); border-radius:var(--radio); background:var(--marfil-2); box-shadow:0 28px 75px rgba(27,34,24,.38); text-align:center; }
.qr-modal__cerrar{ position:absolute; top:.7rem; right:.7rem; width:2.35rem; height:2.35rem; display:grid; place-items:center; border-radius:50%; color:var(--salvia-prof); font-size:1.7rem; line-height:1; transition:var(--transi-rapida); }
.qr-modal__cerrar:hover{ background:var(--crema); }
.qr-modal__eyebrow{ margin-bottom:.2rem; color:var(--dorado-osc); font-size:.65rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
.qr-modal__dialogo h2{ font-size:1.75rem; }
.qr-modal__imagen{ width:min(100%,320px); max-height:calc(100svh - 13rem); margin:1.15rem auto; border-radius:10px; object-fit:contain; box-shadow:var(--sombra-sm); }
.qr-modal__texto{ color:var(--tinta-suave); font-size:.9rem; line-height:1.55; }

/* Toast de confirmación */
.toast{ position:fixed; left:50%; bottom:1.6rem; transform:translate(-50%,140%);
    background:var(--salvia-prof); color:#f4f6ee; padding:.8rem 1.4rem; border-radius:100px;
    font-size:.82rem; letter-spacing:.05em; box-shadow:var(--sombra); z-index:1600;
    transition:transform .45s cubic-bezier(.2,.7,.2,1); display:flex; align-items:center; gap:.5rem; }
.toast svg{ width:1.1rem; height:1.1rem; color:var(--dorado); }
.toast.ver{ transform:translate(-50%,0); }

/* Botón flotante de música */
.fab-musica{ position:fixed; bottom:1.4rem; left:1.4rem; z-index:900;
    width:56px; height:56px; border-radius:50%; background:var(--salvia-osc); color:#f4f6ee;
    display:grid; place-items:center; box-shadow:var(--sombra-sm); transition:var(--transi); }
.fab-musica:hover{ transform:scale(1.08); }
.fab-musica .fab-ico{ width:26px; height:26px; }
.fab-musica-ondas{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:3px; }
.fab-musica.sonando .fab-musica-ico{ display:none; }
.fab-musica.sonando .fab-musica-ondas{ display:flex; }
.fab-musica-ondas i{ width:3px; height:9px; background:#f4f6ee; border-radius:3px; animation:onda 1s ease-in-out infinite; }
.fab-musica-ondas i:nth-child(2){ animation-delay:.15s; } .fab-musica-ondas i:nth-child(3){ animation-delay:.3s; }
.fab-musica-ondas i:nth-child(4){ animation-delay:.45s; }
@keyframes onda{ 0%,100%{ height:8px; } 50%{ height:20px; } }

/* Reproductor de YouTube oculto (solo audio de fondo) */
#ytBg{ position:fixed; left:0; bottom:0; width:1px; height:1px; opacity:.01;
    pointer-events:none; z-index:-1; overflow:hidden; }
#ytBg iframe{ width:1px; height:1px; }

/* ==========================================================================
   DESEOS
   ========================================================================== */
.deseos-caja{ max-width:600px; margin:2.5rem auto 0; text-align:center; }
.deseos-caja .btn{ margin-top:1rem; }

/* Canciones, fotos e información para los invitados. */
.cancion-form{ max-width:920px; margin:2.4rem auto 0; display:grid; grid-template-columns:1fr 1fr auto; gap:.8rem; align-items:stretch; padding:.75rem; border:1px solid var(--linea); border-radius:calc(var(--radio) + 2px); background:rgba(255,255,255,.45); box-shadow:var(--sombra-sm); }
.cancion-campo{ padding:.62rem 1rem .68rem; border:1px solid transparent; border-radius:13px; background:var(--marfil-2); transition:var(--transi); }
.cancion-campo:focus-within{ border-color:var(--dorado); box-shadow:0 0 0 3px rgba(194,162,90,.16); }
.cancion-campo label{ display:flex; align-items:center; gap:.42rem; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--salvia-osc); margin:0 0 .25rem; }
.cancion-campo label .ico{ width:.95rem; height:.95rem; color:var(--dorado-osc); }
.cancion-campo input{ width:100%; min-height:29px; padding:.1rem 0; border:0; border-radius:0; background:transparent; color:var(--tinta); font:400 1.02rem var(--sans); }
.cancion-campo input::placeholder{ color:#96958c; font-weight:300; }
.cancion-campo input:focus{ outline:0; }
/* `align-self:stretch` ya iguala el alto de los campos en la fila de escritorio.
   Añadir `min-height:100%` hacía que el porcentaje se resolviera contra el área
   de rejilla y el botón crecía sin control al pasar a una sola columna. */
.cancion-form .btn{ justify-content:center; align-self:stretch; }

.fotos{ text-align:center; }
.fotos-contenido{ max-width:680px; }
.fotos-icono,.informacion-icono{ width:68px; height:68px; display:grid; place-items:center; margin:0 auto 1rem; border-radius:50%; color:var(--dorado-osc); background:var(--crema); }
.fotos-icono svg,.informacion-icono svg{ width:31px; height:31px; }
.fotos .seccion-cabeza{ margin-bottom:1.6rem; }
.fotos-nota{ margin:1rem auto 0; color:var(--tinta-suave); font-size:.9rem; }

.informacion{ background:linear-gradient(180deg,var(--marfil-2) 0%,var(--crema) 52%,var(--marfil-2) 100%); }
.informacion-grid{ max-width:800px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); }
.informacion-item{ padding:1.4rem clamp(1.2rem,4vw,3.6rem); text-align:center; }
.informacion-item + .informacion-item{ border-left:1px solid var(--linea); }
.informacion-item p{ max-width:270px; margin-inline:auto; color:var(--tinta-suave); font-size:1.05rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-lista{ max-width:760px; margin:2.5rem auto 0; }
.faq-item{ border-bottom:1px solid var(--linea); }
.faq-preg{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
    padding:1.3rem .3rem; text-align:left; font-family:var(--serif); font-size:1.2rem; color:var(--salvia-prof); }
.faq-preg .mas{ font-family:var(--sans); font-size:1.5rem; color:var(--dorado); transition:transform var(--transi); flex-shrink:0; }
.faq-item.activo .mas{ transform:rotate(45deg); }
.faq-resp{ max-height:0; overflow:hidden; transition:max-height .5s ease; }
.faq-resp p{ padding:0 .3rem 1.3rem; color:var(--tinta-suave); }

/* ==========================================================================
   Placeholder genérico
   ========================================================================== */
.placeholder{ position:relative; width:100%; height:100%; min-height:180px;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(124,132,113,.05) 12px, rgba(124,132,113,.05) 24px),
        var(--crema);
    display:grid; place-items:center; border-radius:14px; overflow:hidden;
}
.ph-inner{ display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--salvia); opacity:.8; text-align:center; padding:1rem; }
.ph-ico{ width:2.4rem; height:2.4rem; opacity:.7; }
.ph-txt{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.ph-corner{ position:absolute; width:16px; height:16px; border:1.5px solid var(--salvia); opacity:.4; }
.ph-tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.ph-tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.ph-bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.ph-br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.ph-retrato{ aspect-ratio:3/4; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.pie{ background:linear-gradient(160deg,var(--salvia-osc),var(--salvia-prof)); color:#e9ece0;
    text-align:center; padding:clamp(4rem,8vw,6rem) 1.4rem 3rem; }
.pie-inner{ max-width:640px; margin-inline:auto; }
.pie-monos{ font-family:var(--serif); font-size:clamp(2.4rem,7vw,3.6rem); color:#f5f6ee; }
.pie-monos .amp{ font-family:var(--script); color:var(--dorado); margin:0 .12em; }
.pie-fecha{ letter-spacing:.28em; text-transform:uppercase; font-size:.82rem; color:var(--dorado); margin-top:.4rem; }
.pie-versiculo{ font-family:var(--serif); font-style:italic; font-size:1.2rem; margin:2rem auto; max-width:520px; color:#eef1e6; }
.pie-versiculo cite{ display:block; margin-top:.9rem; font-family:var(--sans); font-style:normal;
    font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dorado); }
.pie-hashtag{ font-family:var(--serif); font-size:1.4rem; color:#fff; letter-spacing:.02em; }
.pie .divisor{ color:var(--dorado); }
.pie-creditos{ font-size:.72rem; letter-spacing:.14em; color:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; gap:.4rem; }
.ico-mini{ width:.9rem; height:.9rem; color:var(--dorado); }

/* ==========================================================================
   FAB WhatsApp
   ========================================================================== */
.fab-wa{ position:fixed; bottom:1.4rem; right:1.4rem; z-index:900;
    width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff;
    display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
    transition:var(--transi); }
.fab-wa:hover{ transform:scale(1.08); }
.fab-ico{ width:30px; height:30px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
    .programa-grid,.lugares-grid{ grid-template-columns:1fr; }
    .galeria-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
    .vest-grid{ grid-template-columns:1fr; }
    .regalos-grid{ grid-template-columns:1fr; }
    .cancion-form{ grid-template-columns:1fr 1fr; }
    /* Ya no comparte fila con los campos: se ajusta a su contenido. */
    .cancion-form .btn{ grid-column:1 / -1; width:max-content; justify-self:center; align-self:center; margin-top:.4rem; }
}
@media (max-width:420px){
    .qr-modal{ padding:.8rem; }
    .qr-modal__dialogo{ padding:1.65rem 1.2rem 1.3rem; }
    .qr-modal__imagen{ max-height:calc(100svh - 11rem); }
}
@media (max-width:720px){
    .nav-links{
        position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
        flex-direction:column; justify-content:center; align-items:center; gap:1.9rem;
        background:var(--marfil-2); box-shadow:-20px 0 60px -30px rgba(0,0,0,.5);
        transform:translateX(100%); transition:transform var(--transi-rapida);
        /* Deja aire arriba para no chocar con el botón de cierre. */
        padding:5.5rem 1.5rem 2.5rem;
        text-align:center; overflow-y:auto; overscroll-behavior:contain;
    }
    .nav-links.abierto{ transform:translateX(0); }
    .nav-links a{ font-size:.95rem; }
    /* Dentro del cajón los enlaces vuelven al color de marca aunque el hero
       tenga foto: el fondo del panel es claro. */
    body.hero-con-foto .nav:not(.scrolled) .nav-links a{ color:var(--tinta); text-shadow:none; }
    body.hero-con-foto .nav:not(.scrolled) .nav-links a.activo{ color:var(--salvia-osc); }
    body.hero-con-foto .nav:not(.scrolled) .nav-cta{
        border-color:var(--salvia); color:var(--salvia-osc)!important;
    }
    .nav-burger{ display:flex; z-index:1001; }
    .nav.scrolled .nav-burger span{ background:var(--salvia-prof); }
    /* Con el cajón abierto la X queda sobre fondo crema: en blanco no se veía. */
    .nav-burger.activo span,
    body.hero-con-foto .nav:not(.scrolled) .nav-burger.activo span{
        background:var(--salvia-prof);
    }

    .timeline::before{ left:8px; }
    .hito{ width:100%; left:0!important; text-align:left!important; padding:0 0 2.4rem 2.4rem; }
    .hito .hito-punto{ left:1px!important; right:auto!important; }

    .form-fila{ grid-template-columns:1fr; }
    .cancion-form,.informacion-grid{ grid-template-columns:1fr; }
    .informacion-item + .informacion-item{ border-left:0; border-top:1px solid var(--linea); }
    .hero-nota-foto{ display:none; }
}
@media (max-width:420px){
    .galeria-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:132px; gap:.55rem; }
    .galeria-item.grande{ grid-column:span 2; }
}