/* ═══════════════════════════════════════════════════════════
   O'CULT SPIRITS SOCIETY — portal ritual
   Negro absoluto · cobre como pulso · geometría sagrada
   Marca B/N estricta: el cobre NUNCA toca el logotipo.
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}

:root{
  --void:#000;
  --ink:#050505;
  --stone:#0b0a09;

  --copper:#B87333;          /* pulso / glow — nunca texto chico */
  --copper-lit:#D9A05B;      /* 9,1:1 sobre negro — sí para texto */
  --copper-dim:#7A4A22;

  --bone:#EDE7DE;            /* cuerpo — 15,8:1 */
  --ash:#A69B8C;             /* apagado — 7,7:1, sigue sobre AA */

  --d:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,72px);

  --f-disp:"Bodoni Moda",Didot,"Times New Roman",serif;
  --f-ui:"Jost",system-ui,-apple-system,sans-serif;
}

html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--f-ui);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  /* grano de arena / piedra */
  background-image:
    radial-gradient(120vw 90vh at 50% -20%,rgba(184,115,51,.07),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed;
}
body.is-locked{overflow:hidden}

::selection{background:var(--copper-dim);color:#fff}
:focus-visible{outline:2px solid var(--copper-lit);outline-offset:4px}

/* ─────────── átomos ─────────── */
.tag{
  font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ash);font-weight:400;
}
.tag--c{text-align:center}

.rune{
  font-family:var(--f-disp);font-style:italic;
  font-size:clamp(.85rem,1.6vw,1.05rem);
  letter-spacing:.3em;color:var(--copper-lit);
  opacity:.85;
}
.rune--c,.rune--f{text-align:center}

.h2{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(2.1rem,5.2vw,4.1rem);
  line-height:1.08;letter-spacing:-.02em;color:#fff;
}
.h2 em{font-style:italic;color:var(--copper-lit)}
.h2--c{text-align:center}
.h2--xl{font-size:clamp(3rem,9vw,6.5rem);letter-spacing:.04em}

.prose p{color:var(--ash);font-size:clamp(1rem,1.35vw,1.1rem);margin-top:1.4em;max-width:52ch}
.prose .lead{color:var(--bone);font-size:clamp(1.1rem,1.7vw,1.3rem)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 30px;border-radius:999px;cursor:pointer;
  font-family:var(--f-ui);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  transition:background .45s var(--d),color .45s var(--d),border-color .45s var(--d);
}
.btn--rite{background:#fff;color:#000;border:1px solid #fff}
.btn--rite:hover{background:var(--copper-lit);border-color:var(--copper-lit)}
.btn--ghost{background:transparent;color:var(--ash);border:1px solid rgba(237,231,222,.24)}
.btn--ghost:hover{color:#fff;border-color:rgba(237,231,222,.6)}

/* ─────────── el sello (archivo original del cliente) ─────────── */
.sigil{height:auto}
.sigil--sm{width:30px}
/* lockup de marca: la estrella ARRIBA del logotipo, como en el logo real */
.sigil--hero{
  width:clamp(74px,10vw,124px);margin:0 auto clamp(20px,2.8vw,32px);
  opacity:0;transform:scale(.8);
  transition:opacity 1.4s var(--d),transform 1.4s var(--d);
}
.portal-abierto .sigil--hero{opacity:1;transform:none}
.sigil--umbral{width:96px;margin:0 auto 30px}
.sigil--ftr{width:52px;margin:0 auto 26px;opacity:.7}

/* ─────────── header ─────────── */
.hdr{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--pad);
  transition:background .5s var(--d),backdrop-filter .5s var(--d);
}
.hdr.is-stuck{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hdr__mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.hdr__wm{display:flex;flex-direction:column;line-height:1}
.hdr__wm{font-family:var(--f-disp);font-size:1.15rem;letter-spacing:.01em}
.hdr__wm em{font-family:var(--f-ui);font-style:normal;font-size:.5rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ash);margin-top:5px}
.hdr__nav{display:flex;gap:34px}
.hdr__nav a{
  color:var(--ash);text-decoration:none;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;transition:color .4s var(--d);
}
.hdr__nav a:hover{color:var(--copper-lit)}

.snd{
  display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  color:var(--ash);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  padding:8px;transition:color .4s var(--d);
}
.snd:hover,.snd[aria-pressed="true"]{color:var(--copper-lit)}
.snd__bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.snd__bars i{width:2px;height:4px;background:currentColor;transition:height .3s var(--d)}
.snd[aria-pressed="true"] .snd__bars i{animation:wv 1.1s ease-in-out infinite}
.snd[aria-pressed="true"] .snd__bars i:nth-child(2){animation-delay:.18s}
.snd[aria-pressed="true"] .snd__bars i:nth-child(3){animation-delay:.36s}
@keyframes wv{0%,100%{height:4px}50%{height:13px}}

/* ─────────── umbral (age gate) ─────────── */
.umbral{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--void);padding:var(--pad);text-align:center;
}
.umbral[hidden]{display:none}
.umbral.is-out{opacity:0;pointer-events:none;transition:opacity .9s var(--d)}
.umbral__inner{max-width:520px}
.umbral__t{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(1.9rem,5vw,3rem);line-height:1.14;color:#fff;margin:16px 0 14px;
}
.umbral__t em{font-style:italic;color:var(--copper-lit)}
.umbral__p{color:var(--ash);font-size:.95rem}
.umbral__acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:34px 0 26px}
.umbral__deny{color:var(--copper-lit);font-size:.9rem;margin-bottom:22px}
.umbral__legal{color:var(--ash);font-size:.72rem;letter-spacing:.1em;opacity:.75}

/* ─────────── I · hero / umbral ─────────── */
.hero{height:280vh;position:relative}
.hero__stick{
  position:sticky;top:0;height:100vh;height:100dvh;
  display:grid;place-items:center;overflow:hidden;
}
.hero__glow{
  position:absolute;width:min(88vw,780px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(184,115,51,.24),transparent 66%);
  filter:blur(46px);opacity:.75;
}
.hero__copy{position:relative;z-index:3;text-align:center;padding:0 var(--pad)}
.hero__t{
  font-family:var(--f-disp);font-weight:400;color:#fff;
  font-size:clamp(2.6rem,8.6vw,7rem);line-height:1;letter-spacing:-.015em;
  margin:22px 0 18px;
}
.hero__t .ln{display:block;overflow:hidden}
.hero__t .ch{display:inline-block;transform:translateY(110%);
  animation:up 1.1s var(--d) forwards;animation-delay:var(--dly)}
@keyframes up{to{transform:translateY(0)}}
.hero__sub{
  font-family:var(--f-disp);font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.7rem);color:var(--bone);margin-bottom:26px;
}
/* la única línea del hero en idioma llano — se compone como una
   inscripción de etiqueta para no romper el tono del portal */
.hero__desc{
  font-family:var(--f-ui);font-weight:300;
  font-size:clamp(.68rem,1.1vw,.8rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);margin:-14px 0 24px;
}
[data-veil-fade]{opacity:0;animation:fi 1.4s var(--d) .9s forwards}
@keyframes fi{to{opacity:1}}

.hero__cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--ash);font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;
  opacity:0;animation:fi 1.4s var(--d) 1.7s forwards;
}
.hero__cue i{width:1px;height:52px;background:linear-gradient(var(--copper-lit),transparent);
  animation:brt 2.6s ease-in-out infinite}
@keyframes brt{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* el velo que cae */
.veil{position:absolute;inset:0;z-index:5;pointer-events:none;
  transform:translate3d(0,-100%,0);will-change:transform}
.veil__edge{position:absolute;top:100%;left:0;width:100%;height:80px}
.veil__edge path{fill:var(--void)}
.veil__body{position:absolute;inset:0;background:var(--void)}

/* ─────────── secciones ─────────── */
.sec{position:relative;padding:clamp(90px,14vh,180px) var(--pad);z-index:10;background:var(--void)}
.wrap{max-width:1180px;margin:0 auto}
.wrap--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.wrap--rev .prose{order:1}

[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--d),transform 1s var(--d)}
[data-reveal].is-in{opacity:1;transform:none}

/* sigilo de NAKARU — extraído del arte original de la etiqueta.
   No se redibuja en vector: la erosión de piedra ES parte de la marca. */
.seal{position:relative}
.seal::before{                       /* pulso telúrico detrás del sigilo */
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(184,115,51,.26),transparent 66%);
  filter:blur(46px);animation:pulso 7s ease-in-out infinite;
}
@keyframes pulso{0%,100%{opacity:.4;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.seal__img{
  position:relative;width:100%;max-width:380px;height:auto;margin:0 auto;
  opacity:0;transform:scale(.94);
  transition:opacity 1.8s var(--d),transform 1.8s var(--d);
  filter:drop-shadow(0 0 26px rgba(184,115,51,.34));
}
.seal.is-in .seal__img{opacity:1;transform:none}

/* ─────────── canon ─────────── */
.sec--canon{background:var(--ink)}
.manus{
  max-width:900px;margin:44px auto 0;padding:clamp(38px,6vw,88px) clamp(26px,5vw,72px);
  border:1px solid rgba(184,115,51,.22);position:relative;
  background:
    radial-gradient(80% 60% at 50% 0%,rgba(184,115,51,.06),transparent 70%),
    var(--stone);
}
.manus::before,.manus::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid var(--copper-dim);
}
.manus::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.manus::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.manus__glyphs{
  display:flex;justify-content:center;gap:clamp(18px,4vw,44px);flex-wrap:wrap;
  margin-bottom:clamp(30px,5vw,56px);
}
.manus__glyphs svg{width:clamp(24px,3.4vw,36px);opacity:.5}
.manus__glyphs svg *{stroke:var(--copper-lit);fill:none;stroke-width:1.1}

.canon p{
  font-family:var(--f-disp);font-weight:400;text-align:center;color:#fff;
  font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.34;letter-spacing:-.01em;
}
.canon .wd{display:inline-block;opacity:.13;transition:opacity .7s var(--d);transition-delay:var(--dly)}
.canon.is-in .wd{opacity:1}
.rune--c{margin-top:clamp(28px,4vw,48px)}

/* ─────────── NAKARU ─────────── */
.notes{margin-top:2.4em;border-top:1px solid rgba(237,231,222,.12)}
.notes li{padding:20px 0;border-bottom:1px solid rgba(237,231,222,.12)}
.notes span{display:block;font-family:var(--f-disp);font-size:1.15rem;color:var(--copper-lit)}
.notes em{display:block;font-style:normal;color:var(--ash);font-size:.92rem;margin-top:4px}
.hint{font-size:.7rem!important;letter-spacing:.2em;text-transform:uppercase;opacity:.5}

/* el aura mide 120% a propósito (el resplandor tiene que exceder la foto),
   así que la sección la recorta. `clip` y no `hidden`: no crea contenedor de
   scroll y por tanto no rompe ningún position:sticky. */
.sec--nakaru{overflow-x:clip}
.bottle{position:relative;display:grid;place-items:center;margin:0;padding:24px 0}
.bottle__aura{
  position:absolute;width:120%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(184,115,51,.34),transparent 62%);
  filter:blur(58px);opacity:.5;transition:opacity 1.2s var(--d),transform 1.2s var(--d);
}
.bottle:hover .bottle__aura{opacity:1;transform:scale(1.1)}
.bottle__img{
  position:relative;z-index:2;width:100%;height:auto;
  border:1px solid rgba(184,115,51,.26);
  box-shadow:0 40px 90px rgba(0,0,0,.9);
  transition:transform 1.4s var(--d);
}
.bottle:hover .bottle__img{transform:scale(1.015)}
.bottle__cap{
  position:relative;z-index:2;margin-top:16px;text-align:center;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);
}

/* ─────────── ritual del velo ─────────── */
.sec--rito{background:var(--ink);height:200vh;padding:0}
.rito__stick{
  position:sticky;top:0;height:100vh;height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding:0 var(--pad);text-align:center;
}
.rito__cord{width:min(100%,820px);margin:12px 0}
.rito__cord svg{width:100%;height:120px}
.rito__cord path{
  fill:none;stroke:url(#cu);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:0;
  filter:drop-shadow(0 0 6px rgba(184,115,51,.6));
}
.rito__p{color:var(--ash);max-width:58ch;font-size:clamp(1rem,1.5vw,1.15rem)}

/* ─────────── productos ─────────── */
.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:1px;background:rgba(237,231,222,.1);margin-top:clamp(44px,6vw,80px);
  border:1px solid rgba(237,231,222,.1);
}
.card{
  background:var(--void);padding:clamp(30px,4vw,48px);position:relative;overflow:hidden;
  transition:background .7s var(--d);
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),
             rgba(184,115,51,.16),transparent 70%);
  transition:opacity .6s var(--d);
}
.card:hover{background:var(--stone)}
.card:hover::after{opacity:1}
.card__sig{width:44px;height:44px;margin-bottom:26px}
.card__sig *{stroke:var(--copper-lit);fill:none;stroke-width:1.2}
.card h3{font-family:var(--f-disp);font-weight:400;font-size:1.5rem;color:#fff;letter-spacing:.02em}
.card p{color:var(--ash);font-size:.92rem;margin-top:10px;max-width:34ch}
.card__ix{
  position:absolute;top:clamp(30px,4vw,48px);right:clamp(30px,4vw,48px);
  font-family:var(--f-disp);font-size:.85rem;color:var(--copper-dim);letter-spacing:.1em;
}

/* ─────────── footer ─────────── */
.ftr{
  position:relative;z-index:10;background:var(--void);text-align:center;
  padding:clamp(80px,12vh,150px) var(--pad) 50px;
  border-top:1px solid rgba(237,231,222,.1);
}
.ftr__t{font-family:var(--f-disp);font-style:italic;
  font-size:clamp(1.8rem,5vw,3.2rem);color:#fff}
.rune--f{margin-top:18px}
.ftr__nav{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:44px 0 30px}
.ftr__nav a{color:var(--ash);text-decoration:none;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;transition:color .4s var(--d)}
.ftr__nav a:hover{color:var(--copper-lit)}
.ftr__legal{color:var(--ash);font-size:.7rem;letter-spacing:.06em;opacity:.7;line-height:2}

/* ─────────── el territorio ─────────── */
.sec--terr .h2--c{margin-top:18px}
.terr{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:rgba(184,115,51,.18);margin:clamp(44px,6vw,76px) 0 0;
  border:1px solid rgba(184,115,51,.18);
}
.terr li{background:var(--void);padding:clamp(26px,3.4vw,40px);text-align:center}
.terr span{display:block;font-family:var(--f-disp);font-size:1.22rem;color:#fff;line-height:1.25}
.terr em{display:block;font-style:italic;font-family:var(--f-disp);
  color:var(--copper-lit);font-size:.98rem;margin-top:10px;opacity:.9}
.terr__end{
  max-width:70ch;margin:clamp(36px,5vw,58px) auto 0;text-align:center;
  color:var(--ash);font-size:clamp(1rem,1.5vw,1.16rem);
}
.terr__end strong{color:#fff;font-weight:400;font-family:var(--f-disp);letter-spacing:.06em}

/* ─────────── canon: la coda ─────────── */
.canon__sub{
  text-align:center;color:var(--ash);font-style:italic;font-family:var(--f-disp);
  font-size:clamp(1rem,1.7vw,1.2rem);margin-top:clamp(24px,3.4vw,38px);
}

/* ─────────── NAKARU: bajada y ficha ─────────── */
.nk__tag{
  font-family:var(--f-ui);font-size:clamp(.8rem,1.5vw,.95rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--copper-lit);
  margin-top:6px;
}
.spec{margin-top:2.6em;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(237,231,222,.12);border:1px solid rgba(237,231,222,.12)}
.spec div{background:var(--void);padding:18px 20px}
.spec dt{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash)}
.spec dd{margin:6px 0 0;font-family:var(--f-disp);font-size:1.05rem;color:#fff}

/* ─────────── advertencia MINSAL ─────────── */
.minsal{
  max-width:560px;margin:52px auto 40px;padding:22px 26px;
  border:1px solid rgba(237,231,222,.3);text-align:center;
}
.minsal__t{font-size:.68rem;letter-spacing:.36em;text-transform:uppercase;color:#fff;font-weight:500}
.minsal__h{font-family:var(--f-disp);font-size:clamp(.98rem,2vw,1.18rem);color:#fff;margin-top:8px}
.minsal__l{display:flex;gap:8px 26px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.minsal__l li{font-size:.74rem;letter-spacing:.1em;color:var(--bone);
  padding-left:16px;position:relative}
.minsal__l li::before{content:"⊘";position:absolute;left:0;color:var(--ash)}
.minsal__f{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ash);margin-top:16px}

.ftr__addr{
  font-style:normal;color:var(--ash);font-size:.78rem;letter-spacing:.06em;
  line-height:1.9;margin-top:38px;
}

/* ─────────── responsive ─────────── */
@media (max-width:900px){
  .wrap--split{grid-template-columns:1fr;gap:56px}
  .wrap--rev .prose{order:0}
  .hdr__nav{display:none}
  .sigil--hero{width:clamp(64px,16vw,96px)}
  .hero{height:230vh}
  .sec--rito{height:170vh}
}
@media (max-width:560px){
  .hdr{padding:14px var(--pad)}
  .snd__lbl{display:none}
  .umbral__acts .btn{width:100%}
  .prose p{max-width:none}
}

/* ─────────── respeto por quien no quiere movimiento ─────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .hero{height:100vh}
  .sec--rito{height:auto;padding:clamp(90px,14vh,180px) var(--pad)}
  .rito__stick{height:auto;position:static}
  .veil{display:none}
  [data-reveal],.canon .wd,.hero__t .ch,[data-veil-fade],.hero__cue{opacity:1;transform:none}
  .sl__tri,.sl__v,.sl__str{stroke-dashoffset:0}
  .sl__ring{opacity:.92}
  .sigil--hero{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════
   CAPA DE MOVIMIENTO
   Todo lo de abajo se apaga entero en prefers-reduced-motion
   (el bloque del final ya lo cubre).
   ═══════════════════════════════════════════════════════════ */

/* ── barra de descenso ── */
.prog{position:fixed;inset:0 0 auto;height:2px;z-index:120;pointer-events:none}
.prog i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--copper-dim),var(--copper-lit));
  box-shadow:0 0 12px rgba(184,115,51,.7);
}

/* ── hero: video que avanza con el scroll ── */
.hero__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;opacity:.55;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 45%,transparent 0%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.9) 100%),
    linear-gradient(180deg,rgba(0,0,0,.7),transparent 28%,transparent 62%,rgba(0,0,0,.92));
}
.hero__glow{z-index:1}

/* ── revelado escalonado: los hijos entran en cascada ── */
.stagger > *{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--d),transform .9s var(--d);
  transition-delay:calc(var(--i,0) * .085s);
}
.stagger.is-in > *{opacity:1;transform:none}

/* ── parallax suave (lo mueve el rAF, no el scroll directo) ── */
.par{will-change:transform}

/* ── titulares que suben desde detrás de una línea ── */
.rev{display:block;overflow:hidden}
.rev > span{
  display:block;transform:translateY(105%);
  transition:transform 1.1s var(--d);transition-delay:calc(var(--i,0) * .09s);
}
.is-in .rev > span{transform:none}

/* ── letanía: las runas cruzan sin fin ── */
.litania{
  overflow:hidden;padding:clamp(26px,4vw,44px) 0;
  border-block:1px solid rgba(184,115,51,.2);background:var(--void);
  position:relative;z-index:10;
}
.litania::before,.litania::after{
  content:"";position:absolute;top:0;bottom:0;width:18%;z-index:2;pointer-events:none;
}
.litania::before{left:0;background:linear-gradient(90deg,var(--void),transparent)}
.litania::after{right:0;background:linear-gradient(270deg,var(--void),transparent)}
.litania__pista{display:flex;width:max-content;animation:desfile 46s linear infinite}
.litania__pista span{
  font-family:var(--f-disp);font-style:italic;
  font-size:clamp(1.1rem,2.6vw,1.9rem);letter-spacing:.24em;
  color:var(--copper-lit);opacity:.5;padding:0 clamp(24px,4vw,52px);white-space:nowrap;
}
.litania__pista b{color:var(--copper-dim);font-weight:400}
@keyframes desfile{to{transform:translateX(-50%)}}

/* ── el botón se acerca al cursor ── */
.btn{will-change:transform}

/* ── la foto respira al entrar ── */
.bottle__img{transform:scale(1.06);transition:transform 1.8s var(--d)}
.bottle.is-in .bottle__img{transform:none}
.bottle.is-in:hover .bottle__img{transform:scale(1.015)}

/* ── quien no quiere movimiento, no lo tiene (va AL FINAL para pisar todo) ── */
@media (prefers-reduced-motion:reduce){
  .litania__pista{animation:none;transform:none}
  .stagger > *,.rev > span{opacity:1;transform:none;transition:none}
  .bottle__img{transform:none}
  .hero__vid{display:none}
  .prog{display:none}
}

/* ─────────── V bis · el servicio ─────────── */
.sec--serv{background:var(--ink);overflow-x:clip}
.serv__p{
  max-width:62ch;margin:clamp(28px,4vw,44px) auto 0;text-align:center;
  color:var(--ash);font-size:clamp(1rem,1.5vw,1.14rem);
}
.notes__t{
  margin-top:2.6em;font-size:.66rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--copper-lit);
}
.galeria{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,2vw,24px);margin-top:clamp(44px,6vw,72px);
}
.galeria figure{margin:0;position:relative;overflow:hidden;background:var(--void)}
.galeria img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:1;
  transition:transform 1.6s var(--d),filter 1.6s var(--d);
  filter:saturate(.92);
}
.galeria figure:hover img{transform:scale(1.05);filter:saturate(1.08)}
.galeria figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:38px 18px 14px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(transparent,rgba(0,0,0,.86));
  opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--d),transform .7s var(--d);
}
.galeria figure:hover figcaption{opacity:1;transform:none}
/* en táctil no hay hover: el pie va siempre visible */
@media (hover:none){
  .galeria figcaption{opacity:1;transform:none}
}

/* ─────────── VIII · el Registro de la Orden ─────────── */
.sec--reg{background:var(--ink);overflow-x:clip}
.reg{max-width:680px;text-align:center}
.reg__p{
  max-width:56ch;margin:clamp(24px,3.5vw,38px) auto 0;
  color:var(--ash);font-size:clamp(1rem,1.5vw,1.12rem);
}

.reg__form{
  margin:clamp(36px,5vw,56px) auto 0;text-align:left;
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(22px,3.5vw,34px);
  background:rgba(0,0,0,.42);
  border:1px solid rgba(184,115,51,.26);
}

/* 🔴 La trampa para robots NO va con display:none: hay bots que saltan lo
   que está oculto así. Se saca de la pantalla y del orden de tabulación,
   de modo que una persona nunca la encuentra y un bot que llena "todos los
   campos" cae solo. */
.reg__miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.reg__fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reg__campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.reg__campo span{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);
}
.reg__campo i{font-style:normal;color:var(--copper-lit)}
.reg__campo input{
  width:100%;min-height:46px;padding:11px 14px;
  background:rgba(0,0,0,.55);border:1px solid rgba(237,231,222,.2);
  color:var(--bone);font:inherit;font-size:.95rem;
  transition:border-color .35s var(--d);
}
.reg__campo input::placeholder{color:rgba(166,155,140,.55)}
.reg__campo input:focus{outline:none;border-color:var(--copper-lit)}

/* 🔴 La casilla va en su propio grid, NUNCA como hijo de un flex column
   con align-items:stretch: ahí el input:checkbox se estira y queda un
   rectángulo deforme en vez de un cuadrito. */
.reg__ok{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:.84rem;line-height:1.6;color:var(--ash);cursor:pointer;
}
.reg__ok input{
  width:17px;height:17px;flex:none;margin:3px 0 0;
  accent-color:var(--copper);cursor:pointer;
}
.reg__ok b{color:var(--bone);font-weight:400}
.reg__ok a{color:var(--copper-lit);text-underline-offset:3px}

.reg__btn{
  margin-top:4px;padding:15px 26px;min-height:50px;cursor:pointer;
  background:var(--copper-lit);border:1px solid var(--copper-lit);color:#0a0908;
  font-family:var(--f-ui);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  transition:background .4s var(--d),border-color .4s var(--d),color .4s var(--d);
}
.reg__btn:hover:not(:disabled){background:#fff;border-color:#fff;color:#000}
.reg__btn:disabled{opacity:.55;cursor:default}
/* ♿ El estado de ÉXITO no se deja como "botón deshabilitado": atenuado, el
   texto oscuro sobre cobre baja a 3:1 y lo primero que la persona busca para
   confirmar que quedó inscrita es justo lo que peor se lee. Se le da su
   propio estilo, legible, en vez de apoyarse en la excepción que WCAG hace
   con los controles inhabilitados. */
.reg__form.is-listo .reg__btn:disabled{
  opacity:1;background:transparent;border-color:var(--copper-lit);color:var(--copper-lit);
}

.reg__estado{margin:0;font-size:.85rem;line-height:1.6;min-height:1.6em}
.reg__estado.is-mal{color:#E8A0A0}
.reg__estado.is-bien{color:var(--copper-lit)}
.reg__form.is-listo .reg__campo,
.reg__form.is-listo .reg__ok{opacity:.6}

.reg__nota{
  margin:clamp(18px,2.5vw,26px) auto 0;max-width:52ch;
  font-size:.74rem;line-height:1.7;color:var(--ash);opacity:.8;
}

@media (max-width:560px){
  .reg__fila{grid-template-columns:1fr}
}

/* ─────────── VIII · dónde encontrarla ─────────── */
.sec--donde{background:var(--void);overflow-x:clip}
.donde{max-width:900px;text-align:center}
.donde__p{
  max-width:54ch;margin:clamp(24px,3.5vw,38px) auto 0;
  color:var(--ash);font-size:clamp(1rem,1.5vw,1.14rem);
}
.donde__cta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:clamp(30px,4vw,44px);
}
.donde__vias{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,2.5vw,30px);margin-top:clamp(46px,6vw,74px);text-align:left;
}
.donde__vias li{
  padding:clamp(20px,2.5vw,26px);
  background:rgba(0,0,0,.4);border:1px solid rgba(184,115,51,.2);
}
.donde__vias b{
  display:block;font-family:var(--f-ui);font-weight:400;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--copper-lit);margin-bottom:.9em;
}
.donde__vias span{color:var(--ash);font-size:.94rem;line-height:1.7}

/* ─────────── IX · preguntas frecuentes ─────────── */
.sec--faq{background:var(--ink);overflow-x:clip}
.faq{max-width:940px;text-align:center}
.faq__lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(22px,3vw,38px) clamp(30px,4vw,56px);
  margin-top:clamp(44px,6vw,72px);text-align:left;
}
.faq__i{
  padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid rgba(184,115,51,.22);
}
.faq__i h3{
  margin:0 0 .7em;font-family:var(--f-disp);font-weight:400;
  font-size:clamp(1.06rem,1.7vw,1.24rem);line-height:1.35;color:var(--bone);
}
.faq__i p{color:var(--ash);font-size:.95rem;line-height:1.75}
.faq__i em{color:var(--copper-lit);font-style:italic}