/* ══════════════════════════════════════════════════════════
   PÓRTICO DE MARFIL — Editorial Nupcial
   Santiago y Julieta · sábado 20 de marzo de 2027
   Khal Calloway Studio · un solo sistema de diseño, mobile-first
   ══════════════════════════════════════════════════════════ */

@font-face{
    font-family:'Italianno';
    src:url('fuentes/italianno-400-latin.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Bodoni Moda';
    src:url('fuentes/bodoni-moda-400-latin.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Cormorant Garamond';
    src:url('fuentes/cormorant-garamond-400-latin.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Calligraphy';
    src:url('fuentes/calligraphy.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Verandah';
    src:url('fuentes/verandah.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Cormorant Garamond';
    src:url('fuentes/cormorant-garamond-500-latin.woff2') format('woff2');
    font-weight:500;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Cormorant Garamond';
    src:url('fuentes/cormorant-garamond-400-italic-latin.woff2') format('woff2');
    font-weight:400;
    font-style:italic;
    font-display:swap;
}

:root{
    /* ── Superficies ── */
    --marfil:        #F1EAE4;
    --marfil-gris:   #E2DEDA;
    --taupe:         #8D765C;   /* medido en la referencia — solo display grande */
    /* Superficie de los bloques de ubicación. El #8D765C de la referencia
       con texto blanco mide 3.85:1: no cumple AA para texto de cuerpo.
       Este tono da 4.85:1 con --tinta-inv y es indistinguible al ojo. */
    --taupe-profundo:#7D6650;
    --vino:          #4B1C24;
    --oxblood:       #100302;
    --negro-doc:     #16151A;

    /* ── Tinta ── */
    --tinta:      #211E21;
    /* #6B625E daba 4.44:1 sobre --marfil-gris: falla AA en texto chico
       (eyebrow, .reg-marca). Este mide 4.87:1 ahí y 5.47:1 sobre marfil. */
    --tinta-suave:#655C58;
    --tinta-inv:  #F4F2F5;
    /* El rosa apagado anterior sobre marfil-gris da 3.21:1 — NO cumple
       AA para texto pequeño. Este tono da 4.77:1 sobre --marfil-gris y
       5.42:1 sobre --marfil. No aclararlo sin volver a medir. */
    --rosa:       #7A5560;
    --rosa-tinte: #D6BCC1;   /* decorativo — jamás texto pequeño */

    /* ── Semánticos: solo swatches de vestimenta ── */
    --rojo-reservado: #EA1207;
    --rosa-reservado: #833741;

    /* ── Tipografía ── */
    --f-gate:'Calligraphy', cursive;
    --f-nombres:'Verandah', cursive;
    --f-display:'Bodoni Moda', 'Times New Roman', serif;
    --f-cuerpo: 'Cormorant Garamond', Georgia, serif;
    --f-script: 'Italianno', cursive;

    /* El tope de 14vw conserva la composición de nombres en 360px
       sin desbordar la escena. No subirlo sin volver a medir. */
    --t-nombre:  clamp(2.35rem, 14vw, 5.6rem);
    --t-fecha:   clamp(2.65rem, 16vw, 6.2rem);
    --t-display: clamp(1.62rem, 7.1vw, 2.55rem);
    --t-script:  clamp(2.1rem, 9.5vw, 3.4rem);
    --t-cuerpo:  clamp(1.02rem, 4.2vw, 1.2rem);
    --t-sede:    clamp(1.08rem, 4.3vw, 1.22rem);
    --t-meta:    clamp(.75rem, 3.1vw, .86rem);
    --track:     .18em;
    --track-alt: .12em;

    /* ── Espaciado ── */
    --s-1:6px; --s-2:12px; --s-3:20px; --s-4:32px; --s-5:52px; --s-6:84px;
    --s-seccion: clamp(64px, 13vh, 124px);
    --gutter:    clamp(20px, 6vw, 40px);
    --medida:    34ch;

    /* ── Bordes / sombras ── */
    --hair:1px;
    --r-1:2px; --r-2:4px;
    --sombra-foto:   0 18px 48px rgba(33,30,33,.16);
    --sombra-ticket: 0 24px 64px rgba(16,3,2,.44);

    /* ── z-index: escala declarada ── */
    --z-texto:2; --z-audio:40; --z-gate:80; --z-overlay:90;

    /* ── Motion ── */
    --e-salida:cubic-bezier(.22,1,.36,1);
    --e-suave: cubic-bezier(.4,0,.2,1);
    --d-rapido:.28s; --d-medio:.6s; --d-lento:1.1s; --d-gate:1.4s;

    --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ══ RESET Y BASE ══ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.bloqueado,html.bloqueado body{overflow:hidden;height:100%}
body{
    font-family:var(--f-cuerpo);
    font-weight:400;
    font-synthesis:none;
    background:var(--marfil);
    color:var(--tinta);
    overflow-x:hidden;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}

/* ══ TÁCTIL / iOS ══
   Sin esto el navegador pinta su propio flash azul (rgba(51,181,229,.4))
   sobre cada control al tocarlo: eso era el «botón azul» del gate.
   touch-action:manipulation quita el retardo de 300ms y el zoom por
   doble toque. Los inputs quedan fuera de user-select para no romper
   la selección de texto que la invitada sí necesita. */
a,button,summary,label,input,select{-webkit-tap-highlight-color:transparent}
a,button,summary{
    touch-action:manipulation;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;
}
button,summary{-webkit-appearance:none;appearance:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.05}
::selection{background:var(--rosa-tinte);color:var(--tinta)}
:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}

/* Utilidades editoriales */
.seccion{padding:var(--s-seccion) var(--gutter)}
.medida{max-width:var(--medida);margin-inline:auto}
.eyebrow{
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
}
.script{font-family:var(--f-script);font-size:var(--t-script);font-weight:400;line-height:1}
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ══ REVEAL: una sola primitiva ══ */
.reveal{
    opacity:0;
    transform:translateY(10px);
    transition:opacity var(--d-medio) var(--e-salida),
               transform var(--d-medio) var(--e-salida);
    /* 60ms y no más: el stagger acompaña, no hace esperar. */
    transition-delay:calc(min(var(--i, 0), 4) * 60ms);
}
.reveal.visible{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════
   01 · GATE
   ══════════════════════════════════════════════════════════ */
#gate{
    position:fixed;inset:0;
    z-index:var(--z-gate);
    height:100svh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:flex-end;
    padding:var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));
    background:var(--negro-doc);
    overflow:hidden;
    transition:opacity var(--d-gate) var(--e-suave),
               transform var(--d-gate) var(--e-suave),
               visibility var(--d-gate);
}
#gate.abierto{opacity:0;transform:scale(1.02);visibility:hidden;pointer-events:none}
.gate-foto{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:50% 35%;
}
/* Viñeta: existe solo para asegurar el contraste del monograma */
.gate-velo{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 50% 62%, rgba(22,21,26,.52) 0%, rgba(22,21,26,0) 58%),
        linear-gradient(to bottom, rgba(22,21,26,.34) 0%, rgba(22,21,26,0) 32%, rgba(22,21,26,.56) 100%);
}
.gate-grano{
    position:absolute;inset:0;
    background-image:var(--grain);
    opacity:.05;pointer-events:none;
}
.gate-cuerpo{
    position:relative;z-index:var(--z-texto);
    text-align:center;color:var(--tinta-inv);
}
/* El entrelazado vive en la caligrafía, sin separador ni floreo añadido. */
.gate-monograma{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    padding:.18em .28em .28em;
    font-family:var(--f-gate);
    font-size:clamp(5rem, 30vw, 10rem);
    font-weight:400;
    font-style:normal;font-synthesis:none;
    letter-spacing:-.09em;
    line-height:.9;
    margin-bottom:var(--s-3);
    text-shadow:0 2px 30px rgba(22,21,26,.4);
}
.gate-fecha{
    margin-top:var(--s-1);
    font-size:var(--t-meta);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
    opacity:.72;
}
.gate-linea{
    width:52px;height:var(--hair);
    margin:var(--s-4) auto var(--s-3);
    background:var(--tinta-inv);opacity:.5;
}
/* Marco de esquinas: cuatro ángulos de filete, nada de rectángulo cerrado.
   Sin relleno — la foto se lee entera a través del botón. Los ángulos se
   dibujan con dos gradientes por esquina, así que no hacen falta nodos. */
.gate-btn{
    display:inline-flex;align-items:center;justify-content:center;
    position:relative;isolation:isolate;
    min-height:48px;padding:var(--s-3) var(--s-5);
    border:0;border-radius:0;background:none;
    color:var(--tinta-inv);
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
    text-shadow:0 1px 10px rgba(16,3,2,.55);
    transition:transform var(--d-rapido) var(--e-suave);
}
.gate-btn::before,.gate-btn::after{content:'';position:absolute;pointer-events:none}
/* Ángulos: 18px de filete en cada esquina, más densos arriba que abajo. */
.gate-btn::before{
    inset:0;z-index:0;
    --a:rgba(244,242,245,.86);
    --b:rgba(244,242,245,.4);
    background:
        linear-gradient(var(--a),var(--a)) 0 0/1px 18px,
        linear-gradient(var(--a),var(--a)) 0 0/18px 1px,
        linear-gradient(var(--a),var(--a)) 100% 0/1px 18px,
        linear-gradient(var(--a),var(--a)) 100% 0/18px 1px,
        linear-gradient(var(--b),var(--b)) 0 100%/1px 18px,
        linear-gradient(var(--b),var(--b)) 0 100%/18px 1px,
        linear-gradient(var(--b),var(--b)) 100% 100%/1px 18px,
        linear-gradient(var(--b),var(--b)) 100% 100%/18px 1px;
    background-repeat:no-repeat;
    transition:opacity var(--d-rapido) var(--e-suave);
}
/* Hilo horizontal que respira bajo el texto: el único gesto animado. */
.gate-btn::after{
    left:50%;bottom:-6px;z-index:0;
    width:0;height:1px;translate:-50% 0;
    background:linear-gradient(90deg,transparent,rgba(244,242,245,.72),transparent);
}
.gate-btn__word,.gate-btn__space{position:relative;z-index:2}
.gate-btn:hover::before,.gate-btn:focus-visible::before{--a:var(--tinta-inv);--b:rgba(244,242,245,.6)}
.gate-btn:active{transform:scale(.97)}
.gate-btn:focus-visible{outline:2px solid var(--tinta-inv);outline-offset:8px}
.gate-btn__word{display:inline-flex}
.gate-btn__space{width:.58em}
.gate-btn__letter{display:inline-block;opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion: no-preference){
    .gate-btn__letter{animation:gateLetterEntra .8s ease both calc(var(--i) * .03s)}
    .gate-btn.saliendo .gate-btn__letter{animation:gateLetterSale .6s ease forwards calc(var(--i) * .02s)}
    /* Los ángulos se trazan al entrar y se retiran al salir; el hilo
       inferior aparece después de las letras y se cierra primero.
       Todo cabe en los 900ms que abrirInvitacion espera. */
    .gate-btn::before{animation:gateAngulosEntran .7s var(--e-salida) both .35s}
    .gate-btn::after{animation:gateHiloEntra .7s var(--e-salida) both .62s}
    .gate-btn.saliendo::before{animation:gateAngulosSalen .58s var(--e-salida) forwards .18s}
    .gate-btn.saliendo::after{animation:gateHiloSale .34s var(--e-salida) forwards}
}
@keyframes gateAngulosEntran{
    from{opacity:0;transform:scale(1.14)}
    to  {opacity:1;transform:none}
}
@keyframes gateHiloEntra{
    from{width:0;opacity:0}
    to  {width:min(72%,190px);opacity:1}
}
/* Los ángulos se van hacia afuera: el marco se desarma, no se apaga. */
@keyframes gateAngulosSalen{
    0%  {opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1.22)}
}
@keyframes gateHiloSale{
    from{width:min(72%,190px);opacity:1}
    to  {width:0;opacity:0}
}
@keyframes gateLetterEntra{
    0%{opacity:0;transform:translate3d(5px,-20px,0) rotate(-14deg);filter:blur(5px)}
    30%{opacity:1;transform:translate3d(0,4px,0);filter:blur(0)}
    50%{opacity:1;transform:translate3d(0,-3px,0)}
    100%{opacity:1;transform:none;filter:none}
}
@keyframes gateLetterSale{
    from{opacity:1;transform:none;filter:none}
    to{opacity:0;transform:translate3d(5px,20px,0);filter:blur(5px)}
}
/* Entrada ceremonial del gate: negro → fotografía → texto → apertura. */
@keyframes gateFotoEntra{
    from{opacity:0;transform:scale(1.035);filter:blur(8px)}
    to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes gateElementoEntra{
    from{opacity:0;transform:translate3d(0,10px,0);filter:blur(7px)}
    to{opacity:1;transform:none;filter:blur(0)}
}
@media (prefers-reduced-motion:no-preference){
    /* La foto recibe el primer pulso; el fondo del gate permanece negro. */
    .gate-foto{opacity:0;animation:gateFotoEntra 1.25s var(--e-salida) both .1s}
    .gate-monograma,.gate-fecha,.gate-linea,.gate-btn,.gate-chevron{
        opacity:0;animation:gateElementoEntra .78s var(--e-salida) both;
    }
    .gate-monograma{animation-delay:1.12s}
    .gate-fecha{animation-delay:1.4s}
    .gate-linea{animation-delay:1.62s}
    /* El CTA es el último elemento de la secuencia. */
    .gate-btn{animation-delay:1.9s}
    .gate-chevron{animation-delay:2.5s}
    .gate-btn__letter{animation-delay:calc(1.95s + var(--i) * .03s)}
}
@media (prefers-reduced-motion: reduce){
    .gate-foto,.gate-monograma,.gate-fecha,.gate-linea,.gate-btn,.gate-chevron,
    .gate-btn__letter{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}
    .gate-btn,.gate-btn::before,.gate-btn::after{transition:none!important}
}
.gate-chevron{
    position:relative;z-index:var(--z-texto);
    margin-top:var(--s-4);
    color:var(--tinta-inv);opacity:.55;
    animation:gateCue 2.4s var(--e-suave) infinite;
}
.gate-chevron svg{width:18px;height:auto;display:block}
@keyframes gateCue{
    0%,100%{transform:translateY(0);opacity:.4}
    50%    {transform:translateY(6px);opacity:.8}
}

/* ══════════════════════════════════════════════════════════
   02 · HERO
   ══════════════════════════════════════════════════════════ */
/* El hero NO nace oculto: el gate es fixed y lo cubre entero, así que
   su disolución de 1.4s ya es el reveal. Si el JS muriera, el contenido
   sigue existiendo en vez de quedarse en opacity:0 para siempre. */
#hero{
    position:relative;
    background:var(--marfil-gris);
    padding:clamp(48px,8vh,72px) var(--gutter) clamp(42px,6vh,58px);
    isolation:isolate;
}
.hero-petalos{
    position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.hero-petalos span{
    position:absolute;left:var(--x);top:var(--y);
    width:11px;height:18px;
    border:1px solid rgba(122,85,96,.42);
    border-radius:72% 28% 68% 32%;
    background:rgba(214,188,193,.48);
    box-shadow:0 2px 8px rgba(75,28,36,.08);
    transform:rotate(var(--r));
    opacity:.34;
}
@keyframes heroPetaloFlota{
    0%,100%{transform:translate3d(0,0,0) rotate(var(--r));opacity:.18}
    45%{transform:translate3d(12px,18px,0) rotate(calc(var(--r) + 22deg));opacity:.5}
    75%{transform:translate3d(-8px,35px,0) rotate(calc(var(--r) - 16deg));opacity:.28}
}
@media (prefers-reduced-motion:no-preference){
    .hero-petalos span{animation:heroPetaloFlota var(--d) ease-in-out var(--t) infinite}
}
.hero-figura,.hero-texto,.hero-scroll{position:relative;z-index:1}
.hero-foto{
    width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;
    border-radius:var(--r-2);
    box-shadow:var(--sombra-foto);
}
.hero-texto{text-align:center}
.hero-eyebrow{
    display:block;
    width:min(64vw,260px);height:auto;
    margin:var(--s-3) auto var(--s-1);
    color:var(--tinta-suave);
}
.hero-eyebrow text{
    font-family:var(--f-display);
    font-size:16px;
    letter-spacing:var(--track);
}
.hero-nombres{
    position:relative;
    width:100%;
    padding:.08em .14em .25em;
    font-family:var(--f-nombres);
    font-size:clamp(3rem, 14vw, 6.8rem);
    font-weight:400;
    font-style:normal;font-synthesis:none;
    line-height:.82;
    color:var(--tinta);
}
.hero-nombre{display:block;white-space:nowrap}
.hero-primer-nombre{max-inline-size:78%;text-align:left}
.hero-segundo-nombre{margin-top:.02em;text-align:right}
.hero-y{
    position:absolute;z-index:1;
    top:.54em;left:80%;
    font-size:.72em;
    color:var(--vino);
    text-shadow:0 1px 8px rgba(75,28,36,.14);
    transform:translateX(-50%);
}
/* El texto nace como polvo: primero se enfoca, después toma cuerpo. */
@keyframes heroTextoPolvo{
    0%{opacity:0;filter:blur(9px);transform:translate3d(0,12px,0) scale(.97)}
    58%{opacity:.82;filter:blur(1.5px)}
    100%{opacity:1;filter:blur(0);transform:none}
}
@keyframes heroYPolvo{
    0%{opacity:0;filter:blur(9px);transform:translate3d(-50%,12px,0) scale(.97)}
    58%{opacity:.82;filter:blur(1.5px);transform:translate3d(-50%,3px,0) scale(.99)}
    100%{opacity:1;filter:blur(0);transform:translateX(-50%)}
}
.hero-eyebrow,.hero-primer-nombre,.hero-segundo-nombre,.hero-y{
    opacity:1;filter:none;animation:none;
}
.entrado #hero .hero-eyebrow,
.entrado #hero .hero-primer-nombre,
.entrado #hero .hero-segundo-nombre,
.entrado #hero .hero-y{
    animation:heroTextoPolvo 1.25s var(--e-salida) both;
}
.entrado #hero .hero-eyebrow{animation-delay:.04s}
.entrado #hero .hero-primer-nombre{animation-delay:.16s}
.entrado #hero .hero-y{animation-name:heroYPolvo;animation-delay:.36s}
.entrado #hero .hero-segundo-nombre{animation-delay:.52s}
.hero-scroll{
    display:flex;width:max-content;align-items:center;gap:10px;
    min-height:44px;margin:clamp(28px,5vh,48px) auto 0;
    padding:8px 12px;
    color:var(--vino);text-decoration:none;
    font-family:var(--f-display);font-size:var(--t-meta);
    letter-spacing:var(--track);text-transform:uppercase;
    border-bottom:1px solid rgba(75,28,36,.5);
    transition:color var(--d-rapido) var(--e-suave),border-color var(--d-rapido) var(--e-suave),transform var(--d-rapido) var(--e-suave);
}
.hero-scroll svg{width:14px;height:22px;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.hero-scroll:hover,.hero-scroll:focus-visible{color:var(--tinta);border-color:var(--tinta);transform:translateY(3px)}
.hero-scroll:focus-visible{outline:2px solid var(--vino);outline-offset:5px}
@media (prefers-reduced-motion:reduce){
    .hero-eyebrow,.hero-primer-nombre,.hero-segundo-nombre,.hero-y{opacity:1;filter:none;animation:none}
}
.vp-initials .monogram-separator,.kct-initials .monogram-separator,
.kc-letter .monogram-separator{
    width:1px;height:.66em;
    /* El remate derecho de la S ocupa más aire que el inicio de la J. */
    margin-inline:.14em .29em;
    background:currentColor;
    opacity:.72;
}

/* ══════════════════════════════════════════════════════════
   03 · DEDICATORIA
   ══════════════════════════════════════════════════════════ */
#dedicatoria{
    background:var(--marfil);
    text-align:center;
}
.ded-acento{
    display:block;
    color:var(--tinta);
    opacity:.7;
    margin-bottom:var(--s-4);
}
.ded-ornamento{
    display:block;
    width:min(180px,62vw);height:auto;
    margin:calc(-1 * var(--s-3)) auto var(--s-4);
    fill:none;stroke:var(--rosa);stroke-width:1.15;
    stroke-linecap:round;stroke-linejoin:round;
    opacity:.78;
}
.ded-texto{
    font-size:var(--t-cuerpo);
    line-height:1.62;
    color:var(--tinta);
}
.ded-texto + .ded-texto{margin-top:var(--s-4)}

/* ══════════════════════════════════════════════════════════
   04 · COUNTER
   ══════════════════════════════════════════════════════════ */
#counter{
    position:relative;
    min-height:100svh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:calc(var(--s-6) + var(--s-3)) var(--gutter) max(var(--s-2), env(safe-area-inset-bottom));
    overflow:hidden;
    background:var(--negro-doc);
    text-align:center;
}
.counter-foto{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:50% 40%;
}
.counter-velo{
    position:absolute;inset:0;
    background:linear-gradient(to bottom,
        rgba(22,21,26,.46) 0%, rgba(22,21,26,.10) 42%,
        rgba(22,21,26,.14) 68%, rgba(22,21,26,.26) 100%);
}
.counter-cuerpo{
    position:relative;z-index:var(--z-texto);
    color:var(--tinta-inv);
    width:100%;
    min-height:calc(100svh - var(--s-6) - var(--s-3) - max(var(--s-2), env(safe-area-inset-bottom)));
    display:flex;flex-direction:column;justify-content:space-between;
}
.counter-fecha-plate{display:block;line-height:1}
.counter-dia{display:block;opacity:.9}
.counter-num{
    display:block;
    font-family:var(--f-display);
    font-size:clamp(1.8rem,7.2vw,2.7rem);
    margin:var(--s-2) 0 var(--s-1);
}
.counter-mes{
    display:block;
    font-family:var(--f-display);
    font-size:var(--t-fecha);
    line-height:.95;
    letter-spacing:.005em;
    text-transform:uppercase;
}
.counter-anio{
    display:block;
    font-family:var(--f-display);
    font-size:clamp(1.3rem,5.3vw,2rem);
    letter-spacing:var(--track-alt);
    opacity:.78;
    margin-top:var(--s-1);
}
/* El contraste sigue la cuenta, no la foto: el borde se disuelve antes de tocar a la pareja. */
.counter-placa{
    position:relative;isolation:isolate;
    /* La placa se ciñe al grid vivo (el elemento más ancho), no al cuerpo
       de 900px: el velo y la cuenta siempre comparten el mismo ancho real. */
    width:fit-content;max-width:100%;margin:auto auto 0;
    --counter-panel-bleed:20px;
    /* 88px + safe area clears the fixed 46px audio control, its 6px ring,
       and the 20px viewport inset without moving that global control. */
    padding:var(--s-3) 0 calc(88px + env(safe-area-inset-bottom));
}
.counter-placa::before{
    content:'';position:absolute;z-index:-1;
    top:-40px;bottom:-32px;
    left:calc(-1 * var(--counter-panel-bleed));
    right:calc(-1 * var(--counter-panel-bleed));
    background:linear-gradient(to bottom,
        rgba(22,21,26,0) 0%, rgba(22,21,26,.40) 9%,
        rgba(22,21,26,.64) 22%, rgba(22,21,26,.64) 68%,
        rgba(22,21,26,.54) 82%, rgba(22,21,26,.24) 94%,
        rgba(22,21,26,0) 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
    pointer-events:none;
}
/* Cuenta viva como tipografía editorial, no como cards de dashboard */
/* 2x2 deliberado en móvil: a 360px las cuatro unidades con tracking no
   caben en una fila, y una rejilla simétrica lee mejor que un wrap suelto.
   Desde 768px pasa a fila única. */
.counter-vivo{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(100%,343.22px);
    justify-content:center;align-items:baseline;
    gap:var(--s-2) var(--s-3);
    margin-top:0;
    font-family:var(--f-display);
    font-size:clamp(.66rem,2.8vw,.76rem);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
}
.counter-vivo > span:not(.counter-sep){
    display:grid;justify-items:center;gap:7px;
}
.counter-vivo b{
    display:block;min-inline-size:3ch;
    font-family:var(--f-display);
    font-weight:400;
    font-size:clamp(3.15rem,14vw,4.2rem);
    line-height:1.08;
    letter-spacing:0;
    /* tabular-nums es obligatorio: sin él el ancho salta cada segundo */
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
}
.counter-vivo > span.counter-sep{display:none;opacity:.4}
/* El CTA que mandó el CEO: sin fondo, sin borde. Solo la píldora
   circular detrás del texto, que crece al hover. Nada más. */
.counter-cal{
    position:relative;
    display:inline-flex;align-items:center;gap:var(--s-2);
    min-height:48px;margin-top:clamp(120px,17vh,180px);
    padding:12px 18px;
    background:none;border:none;
    color:var(--tinta-inv);
    font-family:var(--f-display);
    font-size:clamp(.75rem,3.1vw,.86rem);
    letter-spacing:.12em;
    text-transform:uppercase;
    transition:transform var(--d-rapido) var(--e-suave);
}
.counter-cal::before{
    content:'';position:absolute;z-index:-1;left:0;top:0;
    width:48px;height:48px;border-radius:999px;
    background:var(--vino);
    transition:width .3s var(--e-suave);
}
.counter-cal-label{position:relative}
.counter-cal:focus-visible{outline:2px solid var(--tinta-inv);outline-offset:4px}
.counter-cal:focus-visible::before{width:100%}
.counter-cal:active{transform:scale(.95)}
.counter-cal svg{
    position:relative;width:17px;height:12px;fill:none;stroke:currentColor;
    stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
    transform:translateX(-5px);transition:transform .3s var(--e-suave);
}
.counter-cal:focus-visible svg{transform:translateX(0)}
@media (hover:hover) and (pointer:fine){
    .counter-cal:hover::before{width:100%}
    .counter-cal:hover svg{transform:translateX(0)}
}

/* ── Interludio familiar: continuación del capítulo Counter ── */
.familia{
    background:var(--marfil);
    padding:var(--s-seccion) var(--gutter);
    text-align:center;
}
.familia-bendicion{
    max-width:22ch;margin:0 auto var(--s-5);
    font-family:var(--f-script);
    font-size:var(--t-script);
    line-height:.98;
}
.familia-lista{
    display:flex;flex-direction:column;
    gap:var(--s-5);
    max-width:30rem;margin-inline:auto;
}
.familia-grupo{display:flex;flex-direction:column;gap:var(--s-1)}
.familia-grupo dt{
    margin-bottom:var(--s-1);
    font-family:var(--f-display);
    font-size:clamp(1.32rem,5.7vw,1.8rem);
    line-height:1.1;
    color:var(--taupe-profundo);
}
.familia-grupo dd{font-size:var(--t-cuerpo);line-height:1.35}
.familia-cruz{
    display:inline-block;
    margin-left:.1em;
    font-family:var(--f-display);
    font-size:1.1em;
    line-height:1;
    vertical-align:.04em;
}

/* ── Nuestra historia: pausa editorial + tres hitos ── */
.secuencia{
    background:var(--marfil);
    padding:0;
    display:flex;flex-direction:column;
    gap:0;
}
.sec-titulo{
    padding:var(--s-2) var(--gutter) 0;
    text-align:center;
    color:var(--taupe-profundo);
    font-size:var(--t-display);
}
.sec-figura{margin:0}
.sec-figura img{width:100%;height:auto}
.sec-figura.inset{padding-inline:var(--gutter)}
.sec-figura.inset img{border-radius:var(--r-2);box-shadow:var(--sombra-foto)}
.sec-respiro{width:100%}
/* Umbral fotográfico: la imagen superior de Nuestra historia se
   disuelve en el marfil para que la escena no termine en un corte duro. */
.sec-umbral img{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
/* overflow:hidden aquí rompía el position:sticky del pin — cualquier
   ancestro con overflow distinto de visible se vuelve su contenedor de
   scroll. clip recorta igual y deja vivir al sticky. */
.historia-pin{background:var(--marfil-gris);overflow-x:clip}
.historia-cabecera{padding:var(--s-6) 0 var(--s-4);text-align:center}
.historia-cabecera .sec-titulo{padding:0 var(--gutter)}
.historia-subtitulo{
    margin:var(--s-2) auto 0;padding-inline:var(--gutter);
    color:var(--tinta-suave);font-family:var(--f-display);font-size:var(--t-meta);
    letter-spacing:var(--track);text-transform:uppercase;
}
.historia-track{display:grid;gap:var(--s-5);padding:0 var(--gutter) var(--s-5)}
.hito{display:grid;gap:var(--s-3);margin:0}
.hito-foto{margin:0;overflow:hidden;border-radius:var(--r-2);box-shadow:var(--sombra-foto)}
.hito-foto img{width:100%;height:auto}
.hito-frase{
    color:var(--taupe-profundo);font-family:var(--f-display);font-size:var(--t-display);
    font-style:normal;line-height:1.08;text-align:center;
}
.historia-progreso{display:none}

/* El carril táctil se activa sólo con JavaScript: sin él queda una lectura vertical. */
.historia-tactil .historia-track{
    display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;
    padding:0 6vw var(--s-4);scroll-snap-type:x mandatory;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.historia-tactil .historia-track::-webkit-scrollbar{display:none}
.historia-tactil .hito{flex:0 0 88vw;gap:var(--s-3);padding-inline:4vw;scroll-snap-align:center}
.historia-tactil .historia-progreso{
    display:block;width:42%;height:2px;margin:0 auto var(--s-4);background:rgba(33,30,33,.18);
}
.historia-tactil .historia-progreso-bar{
    display:block;width:33.333%;height:100%;background:var(--vino);transform-origin:left center;
}

@media (min-width:769px){
    .historia-pin.historia-activa{height:min(172vh,1320px)}
    .historia-activa .historia-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
    .historia-activa .historia-cabecera{
        position:absolute;z-index:1;top:clamp(24px,5vh,64px);left:0;right:0;padding:0;
        pointer-events:none;
    }
    .historia-activa .historia-track{
        display:flex;gap:0;height:100%;padding:clamp(132px,20vh,176px) 0 var(--s-5);
        /* El hito mide lo que mide: sin esto se pega arriba y deja
           medio viewport vacío en escritorio. */
        align-items:center;
        will-change:transform;
    }
    .historia-activa .hito{
        flex:0 0 100vw;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);
        align-items:center;gap:clamp(var(--s-4),7vw,var(--s-6));padding-inline:clamp(8vw,13vw,18vw);
    }
    .historia-activa .hito-foto{height:min(58vh,560px)}
    .historia-activa .hito-foto img{height:100%;object-fit:cover}
    .historia-activa .hito-frase{text-align:left}
    .historia-activa .historia-progreso{
        display:block;position:absolute;z-index:1;bottom:clamp(24px,5vh,52px);left:50%;width:min(220px,22vw);
        height:2px;background:rgba(33,30,33,.2);transform:translateX(-50%);
    }
    .historia-activa .historia-progreso-bar{
        display:block;width:100%;height:100%;background:var(--vino);transform:scaleX(.33333);transform-origin:left center;
    }
}

/* ══════════════════════════════════════════════════════════
   05 · UBICACIONES
   ══════════════════════════════════════════════════════════ */
#ubicaciones{background:var(--marfil)}
.ubi-titulo{
    text-align:center;color:var(--tinta);
    margin-bottom:var(--s-5);
}
.ubi-grid{display:flex;flex-direction:column;gap:var(--s-4)}
.ubi-bloque{
    position:relative;
    isolation:isolate;
    display:grid;
    min-height:clamp(430px,128vw,560px);
    overflow:hidden;
    border-radius:var(--r-2);
    background:var(--taupe-profundo);
}
.ubi-fondo{
    position:absolute;inset:0;z-index:-2;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center top;
}
.ubi-bloque::before,.ubi-bloque::after{content:'';position:absolute;inset:0;pointer-events:none}
/* Tinta vino-taupe fundida, no una tinta que borre la arquitectura. */
.ubi-bloque::before{
    z-index:-1;
    background:linear-gradient(128deg,rgba(75,28,36,.34),rgba(125,102,80,.26));
    mix-blend-mode:multiply;
}
/* La lectura se protege solo en el centro; los extremos devuelven la fotografía. */
.ubi-bloque::after{
    background:linear-gradient(180deg,rgba(32,18,20,.10) 0%,rgba(42,23,27,.62) 20%,rgba(42,23,27,.64) 72%,rgba(32,18,20,.16) 100%);
}
.ubi-contenido{
    position:relative;z-index:1;
    align-self:center;
    padding:var(--s-4) var(--s-3);
    color:var(--tinta-inv);
    text-align:center;
}
.ubi-tipo{
    display:block;
    font-family:var(--f-display);
    font-size:var(--t-display);
    letter-spacing:var(--track);
    text-transform:uppercase;
}
.ubi-sede{
    display:block;
    margin-top:var(--s-3);
    font-size:var(--t-sede);
    font-weight:500;
}
.ubi-dir{
    display:block;
    margin-top:var(--s-2);
    font-size:.92rem;
    line-height:1.55;
}
.ubi-hora{
    display:block;
    margin-top:var(--s-2);
    font-family:var(--f-cuerpo);
    font-size:var(--t-cuerpo);
    font-weight:500;
    letter-spacing:.04em;
}
.ubi-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
    min-height:44px;margin-top:var(--s-4);
    padding:var(--s-2) var(--s-3);
    border:0;border-bottom:var(--hair) solid currentColor;
    border-radius:0;
    background:transparent;
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
    text-decoration:none;
    transition:background var(--d-rapido) var(--e-suave),
               border-color var(--d-rapido) var(--e-suave);
}
.ubi-cta:hover,.ubi-cta:focus-visible{
    background:transparent;border-color:var(--tinta-inv);
    outline-color:var(--marfil);
}
.ubi-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}

/* ══════════════════════════════════════════════════════════
   06 · ITINERARIO
   ══════════════════════════════════════════════════════════ */
#itinerario{background:var(--marfil-gris);color:var(--tinta)}
.itin-titulo{
    display:block;
    margin-bottom:var(--s-5);
    text-align:center;
}
.itin-lista{
    list-style:none;
    max-width:420px;margin-inline:auto;
    display:flex;flex-direction:column;
}
.itin-item{
    display:grid;
    grid-template-columns:44px 24px 1fr;
    align-items:start;
    column-gap:var(--s-2);
    padding-bottom:var(--s-5);
}
.itin-item:last-child{padding-bottom:0}
.itin-ico{width:44px;height:44px}
.itin-ico svg{
    width:100%;height:100%;
    stroke:var(--tinta);
}
/* Espina hairline con nodo: la regla la dibuja el propio item */
/* El eje sangra dentro del padding-bottom del item para que la espina
   quede continua de nodo a nodo, como en la referencia. */
.itin-eje{
    position:relative;
    align-self:start;
    justify-self:center;
    width:var(--hair);
    height:calc(100% + var(--s-5));
    background:linear-gradient(var(--tinta),var(--tinta)) 50% 0 / var(--hair) 0% no-repeat;
    transition:background-size .28s var(--e-suave);
}
.itin-item:last-child .itin-eje{background:none}
.itin-eje::before{
    content:'';position:absolute;top:14px;left:50%;
    width:5px;height:5px;margin-left:-2.5px;
    border-radius:50%;background:var(--tinta);
    opacity:0;transform:scale(0);
    transition:opacity .16s var(--e-suave) .24s,transform .16s var(--e-suave) .24s;
}
.itin-texto{padding-top:6px}
.itin-ico,.itin-label,.itin-hora{opacity:0;transform:translateY(5px)}
.itin-ico{transition:opacity .2s var(--e-suave) .36s,transform .2s var(--e-suave) .36s}
.itin-label{
    display:block;
    font-family:var(--f-display);
    font-size:var(--t-sede);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
    transition:opacity .2s var(--e-suave) .5s,transform .2s var(--e-suave) .5s;
}
.itin-hora{
    display:block;
    margin-top:4px;
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
    color:var(--rosa);            /* 4.77:1 sobre marfil-gris — AA */
    transition:opacity .2s var(--e-suave) .6s,transform .2s var(--e-suave) .6s;
}
.itin-item.itin-resolved .itin-eje,.itin-item.visible .itin-eje{background-size:var(--hair) 100%}
.itin-item.itin-resolved .itin-eje::before,.itin-item.visible .itin-eje::before,
.itin-item.itin-resolved .itin-ico,.itin-item.visible .itin-ico,
.itin-item.itin-resolved .itin-label,.itin-item.visible .itin-label,
.itin-item.itin-resolved .itin-hora,.itin-item.visible .itin-hora{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════
   07 · VESTIMENTA
   ══════════════════════════════════════════════════════════ */
#vestimenta{background:var(--marfil);text-align:center;color:var(--tinta)}
.vest-titulo{display:block;margin-bottom:var(--s-2)}
.vest-nivel{
    font-family:var(--f-display);
    font-size:var(--t-display);
    letter-spacing:.03em;   /* --track-alt es para caps, no para minúsculas */
}
.vest-siluetas{
    display:flex;align-items:flex-end;justify-content:center;
    gap:var(--s-4);
    margin:var(--s-5) 0;
}
/* Silueta rellena = lámina de moda. Los iconos del itinerario van
   a trazo = notación de programa. Dos lenguajes, una intención. */
.vest-siluetas svg{
    height:clamp(170px,44vw,250px);width:auto;
    fill:var(--negro-doc);
}
.vest-nota{
    font-size:var(--t-cuerpo);
    font-style:italic;
    line-height:1.55;
    max-width:30ch;margin-inline:auto;
}
.vest-reserva{
    max-width:34rem;
    margin:var(--s-5) auto 0;
    padding:var(--s-3) 0 0;
    border-top:var(--hair) solid rgba(33,30,33,.28);
}
.vest-reserva-frase{
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
}
.vest-reserva-colores{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:clamp(12px,4vw,28px);
    margin-top:var(--s-3);
    list-style:none;
}
.vest-muestra{
    display:grid;
    gap:16px;
    justify-items:center;
    color:var(--tinta);
    font-family:var(--f-display);
    font-size:var(--t-sede);
    line-height:1;
}
.vest-muestra span{
    display:block;
    width:clamp(72px,22vw,118px);
    aspect-ratio:1.05/.88;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.2),
               0 4px 8px rgba(33,30,33,.1);
}
.muestra-rojo span{
    background:var(--rojo-reservado);
    border-radius:46% 54% 43% 57% / 55% 40% 60% 45%;
    transform:rotate(-3deg);
}
.muestra-vino span{
    background:var(--rosa-reservado);
    border-radius:57% 43% 51% 49% / 44% 58% 42% 56%;
    transform:translateY(7px) rotate(2deg);
}
.muestra-vino{row-gap:23px}
.muestra-tinto span{
    background:var(--vino);
    border-radius:42% 58% 55% 45% / 58% 43% 57% 42%;
    transform:rotate(-1deg);
}
.vest-adultos{
    margin-top:var(--s-6);
    padding-top:var(--s-4);
    border-top:var(--hair) solid rgba(33,30,33,.16);
    font-size:var(--t-cuerpo);
    font-style:italic;
    color:var(--tinta-suave);
    max-width:34ch;margin-inline:auto;
}

/* ── Pausa fotográfica: la máscara deja respirar los fondos contiguos ── */
.banda-ca4{width:100%;height:clamp(280px,78vw,360px);margin:0}
.banda-ca4 img{
    display:block;width:100%;height:100%;object-fit:cover;object-position:68% 58%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
}

/* ══════════════════════════════════════════════════════════
   08 · MESA DE REGALOS
   ══════════════════════════════════════════════════════════ */
#regalos{background:var(--marfil-gris);text-align:center;color:var(--tinta)}
.reg-titulo{display:block;line-height:1}
.reg-titulo-caps{
    display:block;
    font-family:var(--f-display);
    font-size:var(--t-display);
    letter-spacing:var(--track);
    text-transform:uppercase;
}
.reg-titulo-script{
    display:block;
    font-family:var(--f-script);
    font-size:var(--t-script);
    font-weight:400;
    line-height:1;
    color:var(--taupe);
    /* Italianno cuelga: sin este respiro el script
       se montaba sobre «SUGERENCIA DE». Medido a 360 y 1366. */
    margin-top:-.06em;
}
.reg-texto{
    margin:var(--s-5) auto 0;
    font-size:var(--t-cuerpo);
    line-height:1.6;
}
.reg-bloque{
    margin-top:var(--s-5);
    padding-top:var(--s-5);
    border-top:var(--hair) solid rgba(33,30,33,.16);
}
.reg-marca{
    font-family:var(--f-display);
    font-size:clamp(1.35rem,5.7vw,1.8rem);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
    color:var(--tinta-suave);
}
.reg-evento{
    display:block;
    margin-top:var(--s-2);
    font-size:.92rem;
    color:var(--tinta-suave);
    font-variant-numeric:tabular-nums;
}
.reg-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
    min-height:44px;margin-top:var(--s-3);
    padding:var(--s-2) var(--s-4);
    border:var(--hair) solid rgba(33,30,33,.34);
    border-radius:var(--r-1);
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
    text-decoration:none;
    transition:background var(--d-rapido) var(--e-suave),
               border-color var(--d-rapido) var(--e-suave);
}
.reg-cta:hover,.reg-cta:focus-visible{
    background:rgba(33,30,33,.05);border-color:var(--tinta);
}
.reg-cta svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3}

/* ══════════════════════════════════════════════════════════
   09 · KC-RSVP — clímax vino/oxblood
   ══════════════════════════════════════════════════════════ */
/* Transición marfil → vino: gradiente, 0 bytes.
   La referencia paga una foto de terciopelo por el mismo efecto. */
.rsvp-transicion{
    height:var(--s-6);
    background:linear-gradient(to bottom, var(--marfil-gris), var(--vino));
}
#rsvp{
    position:relative;
    background:var(--oxblood);
    color:var(--tinta-inv);
    padding:var(--s-6) var(--gutter) var(--s-5);
    text-align:center;
    overflow:hidden;
}
#rsvp::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(75,28,36,.85) 0%, rgba(16,3,2,0) 62%),
        radial-gradient(ellipse at 20% 78%, rgba(36,9,12,.9) 0%, rgba(16,3,2,0) 55%);
    pointer-events:none;
}
#rsvp::after{
    content:'';position:absolute;inset:0;
    background-image:var(--grain);
    opacity:.045;pointer-events:none;
}
.rsvp-cuerpo{position:relative;z-index:var(--z-texto)}
.rsvp-titulo{
    font-family:var(--f-display);
    font-size:var(--t-display);
    letter-spacing:.03em;   /* sentence case: el tracking de caps lo partía */
}
.rsvp-deadline{
    margin-top:var(--s-3);
    font-size:var(--t-cuerpo);
    line-height:1.55;
    opacity:.88;
}
.rsvp-deadline strong{color:var(--rosa-tinte);font-weight:500}
.rsvp-form{
    max-width:420px;
    margin:var(--s-5) auto 0;
    text-align:left;
}
/* Saludo VIP — display lo maneja initRsvp (congelado) */
.rsvp-vip-saludo{
    margin-bottom:var(--s-4);
    padding-bottom:var(--s-4);
    border-bottom:var(--hair) solid rgba(244,242,245,.2);
    text-align:center;
}
.vs-tag{
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
    color:var(--rosa-tinte);
}
.vs-nombre{
    margin-top:var(--s-2);
    font-family:var(--f-display);
    font-size:clamp(1.25rem,5.2vw,1.55rem);
}
.vs-pases{margin-top:var(--s-1);font-size:.95rem;opacity:.82}
#vs-num-pases{font-weight:500;color:var(--rosa-tinte)}

.campo{margin-bottom:var(--s-4)}
.campo label{
    display:block;
    margin-bottom:var(--s-2);
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
    opacity:.86;
}
/* Rechazo explícito de la referencia: sus inputs blancos tipo pastilla
   son su punto más débil. Aquí: campo tintado + subrayado hairline. */
.campo input,.campo select{
    width:100%;
    min-height:48px;
    padding:var(--s-2) 0;
    background:rgba(241,234,228,.06);
    color:var(--tinta-inv);
    border:0;
    border-bottom:var(--hair) solid rgba(244,242,245,.34);
    border-radius:0;
    font-family:var(--f-cuerpo);
    /* 16px obligatorio: por debajo, iOS hace zoom al enfocar */
    font-size:16px;
    transition:border-color var(--d-rapido) var(--e-suave);
    -webkit-appearance:none;appearance:none;
}
.campo input::placeholder{color:rgba(244,242,245,.52)}
.campo input:focus,.campo select:focus{
    outline:none;border-bottom-color:var(--rosa-tinte);
}
.campo input:focus-visible,.campo select:focus-visible{
    outline:2px solid var(--rosa-tinte);outline-offset:4px;
}
.campo select{
    padding-right:24px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F4F2F5' stroke-width='1.2'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 2px center;
    background-size:11px;
}
.campo select option{background:var(--vino);color:var(--tinta-inv)}
.campo-opcional{
    letter-spacing:0;text-transform:none;
    font-family:var(--f-cuerpo);font-style:italic;opacity:.6;
}
.btn-enviar{
    width:100%;
    min-height:52px;
    margin-top:var(--s-2);
    background:var(--vino);
    color:var(--tinta-inv);
    border:var(--hair) solid rgba(244,242,245,.4);
    border-radius:var(--r-1);
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
    transition:background var(--d-rapido) var(--e-suave),
               border-color var(--d-rapido) var(--e-suave);
}
.btn-enviar:hover:not(:disabled),.btn-enviar:focus-visible:not(:disabled){
    background:#5C2530;border-color:var(--rosa-tinte);
}
.btn-enviar:disabled{opacity:.72;cursor:progress}

/* ── Pase inline (mostrarVipPass le pone display:flex) ── */
#kc-vip-pass{
    display:none;
    flex-direction:column;align-items:center;
    width:100%;
    animation:pasoEntra var(--d-lento) var(--e-salida) both;
}
@keyframes pasoEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vip-pass-card,.kct-card{
    position:relative;
    width:100%;max-width:360px;
    background:linear-gradient(165deg, #571F29 0%, var(--vino) 46%, #2E1016 100%);
    border:var(--hair) solid rgba(214,188,193,.26);
    border-radius:var(--r-2);
    box-shadow:var(--sombra-ticket);
    padding:var(--s-5) var(--s-4);
    text-align:center;
    overflow:hidden;
}
.vip-pass-card::after,.kct-card::after{
    content:'';position:absolute;inset:0;
    background-image:var(--grain);opacity:.05;pointer-events:none;
}
/* Perforaciones de ticket: círculos del color del fondo de sección */
.vp-perf,.kct-perf{
    position:absolute;width:18px;height:18px;border-radius:50%;
    background:var(--oxblood);top:50%;margin-top:-9px;
}
.vp-perf.l,.kct-perf.l{left:-9px}
.vp-perf.r,.kct-perf.r{right:-9px}
.vp-linea,.kct-sep{
    height:var(--hair);
    margin:var(--s-4) 0;
    background:repeating-linear-gradient(to right,
        rgba(214,188,193,.42) 0 5px, transparent 5px 10px);
}
.vp-badge,.kct-badge{
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
    color:var(--rosa-tinte);
}
.vp-initials,.kct-initials{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--f-display);
    font-size:clamp(2.4rem,12vw,3.2rem);
    font-weight:400;
    letter-spacing:0;
    line-height:.9;
    margin:var(--s-2) 0;
    color:var(--tinta-inv);
}
.vp-subtitle,.kct-sub{
    font-size:.9rem;line-height:1.5;opacity:.82;
}
.vp-stub{margin-top:var(--s-4)}
/* El QR mantiene fondo blanco: es requisito de escaneo y el único
   blanco puro de toda la sección. */
.vp-qr-wrap{
    display:inline-flex;
    padding:9px;
    background:#fff;
    border-radius:var(--r-1);
    line-height:0;
}
.vp-qr-wrap img,.vp-qr-wrap canvas{display:block}
.vp-stub-info{margin-top:var(--s-3)}
.vp-stub-nombre,.kct-nombre{
    font-family:var(--f-display);
    font-size:clamp(1.2rem,5.2vw,1.5rem);
    color:var(--tinta-inv);
}
.vp-stub-pases,.kct-pases{
    margin-top:var(--s-1);
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
    color:var(--rosa-tinte);
}
.vp-stub-brand,.kct-brand{
    margin-top:var(--s-3);
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
    opacity:.5;
}
.vp-save-hint{
    margin-top:var(--s-3);
    font-size:.82rem;font-style:italic;opacity:.6;
}
.kct-nombre-label{
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
    opacity:.7;
}
.kct-msg{
    margin-top:var(--s-3);
    font-size:.95rem;font-style:italic;line-height:1.6;opacity:.86;
}
.kct-sign{
    margin-top:var(--s-3);
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
    color:var(--rosa-tinte);
}
.kct-datos{
    display:flex;justify-content:center;
    gap:var(--s-4);
    margin-top:var(--s-4);
    padding-top:var(--s-4);
    border-top:var(--hair) solid rgba(214,188,193,.2);
}
.kct-dato h4{
    font-size:var(--t-meta);
    letter-spacing:var(--track-alt);
    text-transform:uppercase;
    opacity:.6;
    font-weight:400;
}
.kct-dato p{margin-top:4px;font-size:.9rem}
.kct-maps{
    display:inline-flex;align-items:center;gap:var(--s-2);
    min-height:44px;margin-top:var(--s-4);
    padding:var(--s-2) var(--s-4);
    border:var(--hair) solid rgba(214,188,193,.4);
    border-radius:var(--r-1);
    color:var(--tinta-inv);
    font-family:var(--f-display);
    font-size:var(--t-meta);
    letter-spacing:var(--track);
    text-transform:uppercase;
    text-decoration:none;
}
.kct-maps:hover,.kct-maps:focus-visible{border-color:var(--rosa-tinte)}
.kct-maps svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}

/* ── Postal standalone (?ticket=) — initTicketMode le pone .active ── */
#kc-ticket-overlay{
    display:none;
    position:fixed;inset:0;
    z-index:var(--z-overlay);
    background:var(--oxblood);
    /* safe-area en los cuatro lados: en iPhone con notch la postal se
       metía bajo la muesca y bajo el indicador de inicio. */
    padding:calc(var(--s-4) + env(safe-area-inset-top)) calc(var(--gutter) + env(safe-area-inset-right))
            calc(var(--s-4) + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
    /* overflow-y es obligatorio: sin él la postal se recorta sin
       poder scrollear en pantallas bajas (iPhone SE, 1366x768). */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
/* justify-content:center recorta el borde superior y lo deja fuera del
   rango de scroll. El centrado se hace con margin:auto, que sí respeta
   el overflow en ambos extremos. */
#kc-ticket-overlay.active{
    display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;
}
#kc-ticket-overlay.active .kct-wrap{margin-block:auto}
#kc-ticket-overlay::before{
    content:'';position:fixed;inset:0;
    background:radial-gradient(ellipse at 50% 20%, rgba(75,28,36,.7) 0%, rgba(16,3,2,0) 60%);
    pointer-events:none;
}
.kct-wrap{
    position:relative;
    width:100%;
    display:flex;flex-direction:column;align-items:center;
    padding-block:var(--s-4);
}

/* ══════════════════════════════════════════════════════════
   10 · ÁLBUM COMPARTIDO — el vino cae hacia la noche
   ══════════════════════════════════════════════════════════ */
#album{
    position:relative;z-index:1;overflow:hidden;
    padding:clamp(72px,12vw,132px) var(--gutter);
    background:linear-gradient(to bottom, #190607 0%, #190607 46%, #090506 100%);
    color:var(--tinta-inv);text-align:center;
}
#album::after{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.045;
    background-image:var(--grain);
}
.album-cuerpo{position:relative;z-index:var(--z-texto);max-width:540px;margin-inline:auto}
.album-eyebrow,.album-nota{
    font-family:var(--f-display);font-size:var(--t-meta);letter-spacing:var(--track-alt);
    text-transform:uppercase;
}
.album-eyebrow{color:rgba(244,242,245,.7)}
.album-titulo{
    margin-top:var(--s-2);font-family:var(--f-display);font-size:var(--t-display);
    font-weight:400;line-height:1.05;color:var(--tinta-inv);
}
.album-texto{max-width:44ch;margin:var(--s-3) auto 0;font-size:var(--t-cuerpo);line-height:1.65;color:rgba(244,242,245,.86)}
.album-separador{display:block;width:min(160px,48vw);height:auto;margin:var(--s-4) auto;color:var(--taupe)}
.album-aviso{font-size:var(--t-cuerpo);line-height:1.5;color:rgba(244,242,245,.78)}
.album-cta{
    min-width:172px;min-height:52px;margin-top:var(--s-3);padding:var(--s-2) var(--s-4);
    border:var(--hair) solid rgba(244,242,245,.4);border-radius:var(--r-1);
    background:rgba(244,242,245,.1);color:rgba(244,242,245,.72);
    font-family:var(--f-display);font-size:var(--t-meta);letter-spacing:var(--track);
    text-transform:uppercase;cursor:not-allowed;
}
.album-cta:disabled{opacity:1}
.album-nota{margin-top:var(--s-3);color:var(--rosa-tinte)}

/* Puntos cálidos, escasos y siempre detrás de la lectura. */
.luciernagas{position:absolute;inset:0;z-index:1;pointer-events:none}
.luciernagas span{
    position:absolute;width:4px;height:4px;border-radius:50%;
    background:#E8C98A;opacity:.36;will-change:transform,opacity;
    animation:luciernagaDeriva var(--duracion) ease-in-out var(--retraso) infinite alternate;
}
.luciernagas-album span:nth-child(1){top:49%;left:12%;--duracion:8.6s;--retraso:-3.1s}
.luciernagas-album span:nth-child(2){top:62%;left:83%;width:3px;height:3px;--duracion:11.2s;--retraso:-6.8s}
.luciernagas-album span:nth-child(3){top:75%;left:27%;width:5px;height:5px;--duracion:9.4s;--retraso:-1.7s}
.luciernagas-album span:nth-child(4){top:83%;left:70%;--duracion:12.7s;--retraso:-8.2s}
.luciernagas-album span:nth-child(5){top:56%;left:92%;width:3px;height:3px;--duracion:10.1s;--retraso:-4.3s}
.luciernagas-album span:nth-child(6){top:91%;left:8%;--duracion:13.4s;--retraso:-9.6s}
.luciernagas-secreto span:nth-child(1){top:16%;left:19%;width:3px;height:3px;--duracion:10.8s;--retraso:-5.5s}
.luciernagas-secreto span:nth-child(2){top:38%;left:85%;--duracion:12.1s;--retraso:-7.4s}
.luciernagas-secreto span:nth-child(3){top:72%;left:14%;width:5px;height:5px;--duracion:9.8s;--retraso:-2.4s}
.luciernagas-secreto span:nth-child(4){top:84%;left:75%;width:3px;height:3px;--duracion:11.6s;--retraso:-6.1s}
@keyframes luciernagaDeriva{
    from{transform:translate3d(0,0,0);opacity:.22}
    to{transform:translate3d(12px,-18px,0);opacity:.62}
}

/* ══════════════════════════════════════════════════════════
   11 · MENSAJE SECRETO — sello nativo, sin JavaScript
   ══════════════════════════════════════════════════════════ */
#secreto{
    position:relative;z-index:1;overflow:hidden;
    padding:clamp(64px,10vw,104px) var(--gutter);
    background:linear-gradient(to bottom, #090506 0%, #050505 100%);
    color:var(--tinta-inv);text-align:center;
}
/* El grano vive en #rsvp y #album: si se corta aquí, el borde entre
   secciones se ve aunque el color sea continuo. La costura era textura,
   no color. */
#secreto::after{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.045;
    background-image:var(--grain);
}
.secreto-detalle{position:relative;z-index:var(--z-texto);max-width:560px;margin-inline:auto}
.secreto-trigger{
    display:inline-flex;flex-direction:column;align-items:center;gap:var(--s-2);
    min-height:72px;color:var(--rosa-tinte);cursor:pointer;
    font-family:var(--f-display);font-size:var(--t-meta);letter-spacing:var(--track-alt);text-transform:uppercase;
    list-style:none;
}
.secreto-trigger::-webkit-details-marker{display:none}
.secreto-sello{width:44px;height:44px;transition:transform var(--d-medio) var(--e-salida),color var(--d-rapido) var(--e-suave)}
.secreto-detalle[open] .secreto-sello{color:#F0D9DE;transform:rotate(45deg)}
.secreto-trigger:focus-visible{outline:2px solid var(--rosa-tinte);outline-offset:8px}
.mensaje-secreto{
    margin-top:var(--s-4);padding:var(--s-5) var(--s-4);
    border-block:var(--hair) solid rgba(214,188,193,.52);
    animation:secretoAbre var(--d-medio) var(--e-salida) both;
}
.mensaje-secreto h2{font-family:var(--f-display);font-size:clamp(1.7rem,7vw,2.35rem);font-weight:400;color:#F0D9DE}
.mensaje-secreto blockquote{margin-top:var(--s-3);font-size:var(--t-cuerpo);font-style:italic;line-height:1.72;color:rgba(244,242,245,.9)}
.mensaje-secreto p{margin-top:var(--s-3);font-family:var(--f-display);font-size:var(--t-meta);letter-spacing:var(--track-alt);text-transform:uppercase;color:var(--rosa-tinte)}
@keyframes secretoAbre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════
   COLOFÓN — firma única del estudio
   ══════════════════════════════════════════════════════════ */
footer.pie{
    position:relative;z-index:1;overflow:hidden;
    padding:var(--s-6) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
    background:#050505;color:var(--tinta-inv);text-align:center;
}
footer.pie::after{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.045;
    background-image:var(--grain);
}
.pie-divisor{display:block;width:min(220px,68vw);height:auto;margin:0 auto var(--s-4);color:var(--taupe)}
.pie-dedicatoria{font-family:var(--f-display);font-size:var(--t-meta);letter-spacing:var(--track-alt);text-transform:uppercase}
.pie-fecha{margin-top:var(--s-2);font-size:.86rem;line-height:1.5;color:rgba(244,242,245,.68)}
.pie-estudio{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;
    margin-top:var(--s-4);color:rgba(244,242,245,.72);text-decoration:none;
    font-family:var(--f-display);font-size:var(--t-meta);letter-spacing:var(--track);text-transform:uppercase;
    transition:color var(--d-rapido) var(--e-suave);
}
.pie-estudio svg{width:15px;height:15px;flex:none}
.pie-estudio:hover,.pie-estudio:focus-visible{color:var(--tinta-inv)}
.pie-estudio:focus-visible{outline:2px solid var(--taupe);outline-offset:5px}

/* ══ CONTROL DE AUDIO ══ */
#kc-audio{
    position:fixed;
    right:var(--s-3);
    bottom:calc(var(--s-3) + env(safe-area-inset-bottom));
    z-index:var(--z-audio);
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    border:0;background:transparent;
    color:var(--tinta-inv);
    opacity:0;visibility:hidden;
    padding:0;overflow:visible;
    transform:translateY(20px);
    transition:opacity var(--d-medio) var(--e-salida),transform var(--d-medio) var(--e-salida),visibility var(--d-medio);
}
#kc-audio.visible{opacity:1;visibility:visible;transform:none}
.kc-float-bg{
    position:absolute;inset:0;z-index:1;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,var(--vino) 0%,var(--oxblood) 58%,#050101 100%);
    border:var(--hair) solid rgba(214,188,193,.52);
    box-shadow:0 4px 20px rgba(16,3,2,.58),0 1px 6px rgba(16,3,2,.35),inset 0 1px 0 rgba(244,242,245,.1);
    transition:border-color var(--d-rapido) var(--e-suave),box-shadow var(--d-rapido) var(--e-suave),transform .15s var(--e-suave);
}
.kc-float-glow{
    position:absolute;inset:-12px;z-index:0;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(214,188,193,.26) 0%,rgba(141,118,92,.15) 40%,transparent 70%);
    animation:kcBreath 3s var(--e-suave) infinite alternate;
}
.kc-ring{
    position:absolute;z-index:2;border-radius:50%;pointer-events:none;
    transition:border-color var(--d-rapido) var(--e-suave),box-shadow var(--d-rapido) var(--e-suave),opacity var(--d-rapido) var(--e-suave);
}
.kc-ring--boda{
    inset:-10px;border:1.5px dashed rgba(214,188,193,.88);
    animation:rotate-ring 14s linear infinite;
    box-shadow:0 0 12px rgba(141,118,92,.28);
}
.kc-ring--boda::before{
    content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);
    width:7px;height:7px;border-radius:50%;background:var(--tinta-inv);
    box-shadow:0 0 0 2px rgba(141,118,92,.92),0 0 10px 3px rgba(214,188,193,.72),0 0 22px 6px rgba(141,118,92,.38);
}
.kc-letter{
    position:relative;z-index:3;
    font-family:var(--f-display);font-size:.88rem;font-style:normal;font-weight:400;
    letter-spacing:.06em;line-height:1;color:var(--tinta-inv);
    text-shadow:0 0 10px rgba(214,188,193,.3);
    transition:color var(--d-rapido) var(--e-suave),text-shadow var(--d-rapido) var(--e-suave),transform var(--d-rapido) var(--e-salida);
}
.kc-bars{position:absolute;z-index:4;bottom:5px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:1.5px}
.kc-bar{
    width:3px;border-radius:2px;background:linear-gradient(to top,var(--taupe),var(--vino));
    animation:kcBar var(--d,.4s) var(--e-suave) infinite alternate;
    box-shadow:0 0 4px rgba(214,188,193,.36);transition:opacity var(--d-rapido) var(--e-suave);
}
.kc-bar:nth-child(1){height:5px;--d:.35s}
.kc-bar:nth-child(2){height:8px;--d:.25s;animation-delay:.1s}
.kc-bar:nth-child(3){height:4px;--d:.4s;animation-delay:.2s}
#kc-audio.paused .kc-ring,#kc-audio.paused .kc-float-glow,#kc-audio.paused .kc-bar{animation-play-state:paused}
#kc-audio.paused .kc-ring--boda{border-color:rgba(214,188,193,.18);box-shadow:none;opacity:.68}
#kc-audio.paused .kc-ring--boda::before{box-shadow:none;opacity:.2}
#kc-audio.paused .kc-float-glow{opacity:.08}
#kc-audio.paused .kc-float-bg{background:radial-gradient(circle at 35% 30%,var(--vino),var(--oxblood));border-color:rgba(141,118,92,.72)}
#kc-audio.paused .kc-letter{color:rgba(244,242,245,.38);text-shadow:none}
#kc-audio.paused .kc-bar{height:3px!important;opacity:.18}
@keyframes kcBar{from{height:3px;opacity:.5}to{opacity:1;box-shadow:0 0 6px rgba(214,188,193,.64)}}
@keyframes rotate-ring{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes kcBreath{from{opacity:.32;transform:scale(.9)}to{opacity:.8;transform:scale(1.14)}}
@media (hover:hover) and (pointer:fine){
    #kc-audio:hover .kc-float-bg{border-color:rgba(214,188,193,.86);box-shadow:0 6px 28px rgba(16,3,2,.72),0 0 20px rgba(141,118,92,.22),inset 0 1px 0 rgba(244,242,245,.14)}
    #kc-audio:hover .kc-ring--boda{border-color:var(--tinta-inv);box-shadow:0 0 20px rgba(214,188,193,.46)}
    #kc-audio:hover .kc-letter{color:var(--taupe);text-shadow:0 0 16px rgba(214,188,193,.72);transform:scale(1.1)}
}
#kc-audio:focus-visible .kc-float-bg{outline:2px solid var(--tinta-inv);outline-offset:4px;border-color:var(--tinta-inv)}
#kc-audio:active .kc-float-bg{transform:scale(.92)}
#kc-audio:active .kc-letter{transform:scale(.9)}

/* ══════════════════════════════════════════════════════════
   EXPANSIÓN: tablet 768px+
   ══════════════════════════════════════════════════════════ */
@media (min-width:768px){
    :root{--medida:42ch}
    .counter-vivo{grid-template-columns:repeat(7,auto);width:auto;gap:var(--s-3)}
    .counter-vivo > span.counter-sep{display:inline}
    /* El feather conserva sus stops relativos; al crecer la placa, también
       crece su disolución. El sangrado garantiza que empieza fuera del grid. */
    .counter-placa{--counter-panel-bleed:clamp(20px,5vw,64px)}
    .itin-lista{max-width:480px}
    .itin-item{grid-template-columns:52px 28px 1fr}
    .sec-figura.inset{padding-inline:calc(var(--gutter) * 2)}
    .historia-tactil .hito{flex-basis:78vw}
    .banda-ca4{height:clamp(420px,47vw,640px)}
}

/* ══════════════════════════════════════════════════════════
   EXPANSIÓN: laptop 1100px+  (altura escasa en 1366x768)
   ══════════════════════════════════════════════════════════ */
@media (min-width:1100px){
    /* El monograma se acota por altura: en 1366x768 un valor solo
       basado en vw desborda el gate. */
    .gate-monograma{font-size:min(10rem, 23vh)}
    #hero{
        display:block;
        max-width:760px;margin-inline:auto;
    }
    .hero-figura{grid-column:auto}
    .hero-texto{grid-column:auto}
    .counter-cuerpo{max-width:900px}
    .ubi-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:1280px;
        margin-inline:auto;
    }
    #vestimenta,#regalos,#dedicatoria{max-width:900px;margin-inline:auto}
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION — el único !important autorizado
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
    .reveal{opacity:1!important;transform:none!important}
    .itin-eje{background-size:var(--hair) 100%!important}
    .itin-eje::before,.itin-ico,.itin-label,.itin-hora{opacity:1!important;transform:none!important}
    .gate-chevron{animation:none!important}
    .luciernagas span{animation:none!important;opacity:.42;transform:none!important}
    #kc-audio .kc-ring,#kc-audio .kc-float-glow,#kc-audio .kc-bar{animation:none!important}
    .historia-pin,.historia-sticky{height:auto!important;overflow:visible!important}
    .historia-track{display:grid!important;transform:none!important}
}