/* ===========================================================
   CASA MANGLAR — cianotipo
   Tinta #042E62 muestreada del vector original de la etiqueta.
   El sitio alterna positivo (papel) y negativo (tinta):
   la misma dualidad del dibujo — lo que se ve y lo que estaba escondido.
   =========================================================== */

:root{
  --ink:#042E62;
  --ink-2:#02214A;
  --ink-deep:#01152F;
  --paper:#E7E3D7;
  --paper-hi:#F5F2EA;
  --paper-dim:#B9B2A0;
  --gold:#A9884E;
  --gold-deep:#73592B;  /* el oro no alcanza contraste sobre papel; esta es su version para texto claro */

  --sku-espadin:#2E6FBE;
  --sku-tobala:#E0AE12;
  --sku-madrecuishe:#5E8A5F;
  --sku-ens-tobala:#9FBDD2;
  --sku-ens-madrecuishe:#B04A48;
  --accent:var(--sku-espadin);

  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-ui:'Antonio','Arial Narrow',Helvetica,sans-serif;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --gap:clamp(2rem,5vw,5rem);
  --maxw:1240px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink-deep);color:var(--paper);
  font-family:var(--f-display);font-weight:350;font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72;font-variation-settings:'opsz' 14,'SOFT' 0,'WONK' 0;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-gated{overflow:hidden;height:100vh}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--ink-deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- tono por sección: el sitio se invierte ---------- */
[data-tone="dark"]{--bg:var(--ink-deep);--fg:var(--paper);--fg-dim:#8FA3BD;--hair:rgba(231,227,215,.22)}
[data-tone="light"]{--bg:var(--paper);--fg:var(--ink);--fg-dim:#4E617E;--hair:rgba(4,46,98,.2)}
[data-tone]{background:var(--bg);color:var(--fg)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- tipografía ---------- */
.display{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-variation-settings:'opsz' 144,'SOFT' 40,'WONK' 1;
  line-height:.98;letter-spacing:-.022em;text-wrap:balance;
}
.display--xl{font-size:clamp(2.9rem,7.2vw,6.2rem);line-height:.92}
.display--l{font-size:clamp(2.1rem,4.4vw,3.7rem)}
.display--m{font-size:clamp(1.65rem,2.9vw,2.5rem)}

.eyebrow{
  font-family:var(--f-ui);font-weight:300;text-transform:uppercase;
  letter-spacing:.3em;font-size:.72rem;line-height:1.5;
  color:var(--fg-dim);margin:0 0 1.1rem;
}
.lead{font-size:clamp(1.08rem,1.02rem + .4vw,1.28rem);line-height:1.62;max-width:56ch;margin:1.4rem 0 0}
.h-sm{font-family:var(--f-ui);font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:.9rem;margin:0 0 .9rem}
.rule-note{
  font-style:italic;font-size:1.02rem;line-height:1.6;color:var(--fg-dim);
  border-left:1px solid var(--hair);padding-left:1.1rem;margin:1.6rem 0 0;max-width:44ch;
}
.tag{
  font-family:var(--f-ui);font-weight:300;text-transform:uppercase;letter-spacing:.16em;
  font-size:.68rem;color:var(--fg-dim);
}

/* ---------- botones ---------- */
.btn{
  display:inline-block;font-family:var(--f-ui);font-weight:400;text-transform:uppercase;
  letter-spacing:.2em;font-size:.78rem;padding:.95em 2em;border-radius:0;cursor:pointer;
  text-decoration:none;border:1px solid transparent;transition:.35s var(--ease);
}
.btn--solid{background:var(--paper);color:var(--ink-deep);border-color:var(--paper)}
.btn--solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-deep)}
[data-tone="light"] .btn--solid{background:var(--ink);color:var(--paper-hi);border-color:var(--ink)}
[data-tone="light"] .btn--solid:hover{background:var(--gold);border-color:var(--gold)}
.btn--ghost{background:none;color:var(--paper);border-color:rgba(231,227,215,.4)}
.btn--ghost:hover{border-color:var(--paper)}
.btn--outline{background:none;color:var(--fg);border-color:var(--hair)}
.btn--outline:hover{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.btn--mini{padding:.6em 1.1em;font-size:.68rem;letter-spacing:.16em;border-color:currentColor;opacity:.9}
.btn--mini:hover{opacity:1}

/* ---------- el borde dentado de la etiqueta ---------- */
.deckle{height:11px;border:0;margin:0;display:block;background-repeat:repeat-x;background-size:16px 11px;background-position:center bottom}
.deckle--to-paper{background-color:var(--ink-deep);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='11'><path d='M0 11 L8 0 L16 11 Z' fill='%23E7E3D7'/></svg>")}
.deckle--to-ink{background-color:var(--paper);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='11'><path d='M0 11 L8 0 L16 11 Z' fill='%2301152F'/></svg>")}
.deckle--light{
  width:132px;height:8px;margin:1.5rem auto;background-size:12px 8px;background-repeat:repeat-x;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'><path d='M0 8 L6 1 L12 8' stroke='%23A9884E' stroke-width='1.2'/></svg>");
}

/* ═══════════════════ UMBRAL ═══════════════════ */
.gate{
  position:fixed;inset:0;z-index:200;background:var(--ink-deep);color:var(--paper);
  display:grid;place-items:center;padding:var(--pad);text-align:center;overflow:hidden;
  transition:opacity .8s var(--ease),visibility .8s;
}
.gate.is-open{opacity:0;visibility:hidden;pointer-events:none}
.gate__plate{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(96vh,118vw);aspect-ratio:2759/2485;opacity:.2;
  animation:ink 2.8s var(--ease) .25s backwards;
}
.gate__tree,.hero__tree,.plate__tree{
  width:100%;height:100%;background:var(--paper);
  -webkit-mask:url(../assets/img/mangrove.webp) center/contain no-repeat;
  mask:url(../assets/img/mangrove.webp) center/contain no-repeat;
}
/* El revelado de tinta sube desde las raíces con clip-path, que es animable de
   forma nativa. La versión anterior animaba una variable CSS dentro de un
   mask-image, lo que exige soporte de @property: donde eso falla, la variable
   se queda en 0% y el árbol NO APARECE NUNCA en vez de sólo perder la animación.
   Con `backwards` el estado final es el del propio elemento — sin clip — así que
   si la animación no corre por lo que sea, el árbol simplemente se ve completo. */
@keyframes ink{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

.gate__inner{position:relative;z-index:1;max-width:36rem;animation:rise 1s var(--ease) .4s backwards}
.gate__inner::before{ /* el manglar detrás no debe pelearse con el texto */
  content:"";position:absolute;inset:-14% -22%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(1,21,47,.88) 0 40%,rgba(1,21,47,0) 74%);
}
.gate__mark{width:74px;margin:0 auto 1.4rem;filter:brightness(0) invert(1);opacity:.9}
.gate__title{
  font-family:var(--f-display);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 40,'WONK' 1;
  font-size:clamp(2.4rem,6vw,3.9rem);line-height:1;margin:0;letter-spacing:-.02em;
}
.gate__q{font-size:1.1rem;line-height:1.6;margin:0 auto 2rem;max-width:30ch}
.gate__btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.gate__lang{margin-top:2rem;display:flex;gap:.5rem;justify-content:center;align-items:center;color:var(--fg-dim,#8FA3BD)}
.gate__note{font-size:.82rem;color:#7D91AC;margin:1.4rem 0 0;line-height:1.6}
.gate .eyebrow{color:#7D91AC}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.lang{
  background:none;border:0;cursor:pointer;font-family:var(--f-ui);font-weight:400;
  letter-spacing:.14em;font-size:.74rem;color:inherit;opacity:.45;padding:.2em .1em;transition:opacity .3s;
}
.lang[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px}
.lang:hover{opacity:.85}

/* ═══════════════════ NAV ═══════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:var(--gap);
  padding:.85rem var(--pad);color:var(--paper);
  transition:color .5s var(--ease),background .5s var(--ease),transform .4s var(--ease);
}
.nav.is-solid{background:rgba(1,21,47,.86);backdrop-filter:blur(9px)}
.nav.is-light{color:var(--ink)}
.nav.is-light.is-solid{background:rgba(231,227,215,.9)}
.nav.is-up{transform:translateY(-110%)}
.nav__mark img{width:30px;transition:filter .5s}
.nav:not(.is-light) .nav__mark img{filter:brightness(0) invert(1)}
.nav__links{display:flex;gap:1.8rem;margin-inline:auto}
.nav__links a{
  font-family:var(--f-ui);font-weight:300;text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;text-decoration:none;opacity:.72;transition:opacity .3s;
}
.nav__links a:hover,.nav__links a.is-here{opacity:1}
.nav__right{display:flex;align-items:center;gap:.45rem}
.nav__right .btn--mini{margin-left:.8rem}

/* ═══════════════════ HERO ═══════════════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:7rem 0 3.5rem}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__video.is-on{opacity:.92}
/* El video ahora es protagonista: el velo casi desaparece y la legibilidad
   del texto se apoya en un scrim angosto detrás del bloque de texto, no en
   oscurecer el video entero. */
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(1,21,47,.5) 0 22%,rgba(1,21,47,.08) 48%,rgba(1,21,47,0) 70%),
             linear-gradient(to top,rgba(1,21,47,.35) 0,rgba(1,21,47,0) 16%);
}
.hero h1,.hero .lead{text-shadow:0 2px 20px rgba(1,21,47,.55)}
/* Colores originales del logo, sin invertir — solo una sombra para que
   se lea bien contra el video de fondo. */
.hero__logo{width:min(240px,42vw);margin:0 0 1.6rem;display:block;
            filter:drop-shadow(0 2px 16px rgba(1,21,47,.8)) drop-shadow(0 0 24px rgba(1,21,47,.5))}
.hero__plate{
  z-index:1;position:absolute;left:50%;top:48%;translate:-50% -50%;
  width:min(104vh,120vw);aspect-ratio:2759/2485;opacity:.19;pointer-events:none;
  animation:ink 3.4s var(--ease) .5s backwards;
}
.hero__grid{
  z-index:2;position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
}
.hero__text{max-width:46rem}
/* el titular ahora son tres frases, no cuatro palabras: baja un escalón */
.hero .display--xl{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.02}
.hero__text .btn{margin-top:2.2rem}
.hero__foot{
  z-index:2;position:relative;width:100%;max-width:var(--maxw);margin:3.2rem auto 0;padding-inline:var(--pad);
  display:flex;gap:1.6rem;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:1.1rem;
}

/* ═══════════════════ LA CASA ═══════════════════ */
.casa{padding:clamp(4.5rem,9vw,8rem) 0 clamp(3.5rem,7vw,6rem)}
.casa__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.casa__body p{margin:0 0 1.35rem;max-width:54ch}
.casa__body p:last-child{margin-bottom:0}

/* ═══════════════════ LA LÁMINA ═══════════════════ */
.plate{padding:clamp(4.5rem,9vw,8rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.plate__head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3.4rem)}
.plate__stage{
  position:relative;width:min(620px,64vw);margin-inline:auto;aspect-ratio:2759/2485;
}
/* El revelado va SOLO en la capa del dibujo, nunca en .plate__stage: recortar
   el stage recortaría también las tarjetas de los pines, que viven en él. */
.plate__art{
  position:absolute;inset:0;
  animation:ink 3s var(--ease) backwards;
}
.plate__glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle 210px at var(--gx,50%) var(--gy,50%),rgba(169,136,78,.34),transparent 70%);
}
.plate__stage:hover .plate__glow{opacity:1}
.plate__pins{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.pin{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%}
.pin__dot{ /* debe leerse tanto sobre el arbol claro como sobre el campo de tinta */
  width:18px;height:18px;border-radius:50%;border:1px solid var(--gold);
  background:rgba(1,21,47,.82);cursor:pointer;padding:0;position:relative;transition:.4s var(--ease);
}
.pin__dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--gold);transition:.4s var(--ease)}
.pin__dot::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--gold);
  opacity:.55;animation:ping 2.6s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.55}70%,100%{transform:scale(1.5);opacity:0}}
.pin__dot:hover,.pin__dot:focus-visible{background:var(--gold)}
.pin__dot:hover::after{transform:scale(1.5)}

.pin__card{
  position:absolute;top:50%;width:17rem;translate:0 -50%;
  background:rgba(1,21,47,.94);border:1px solid rgba(231,227,215,.2);padding:1rem 1.15rem;
  opacity:0;visibility:hidden;transition:.45s var(--ease);pointer-events:none;
  backdrop-filter:blur(6px);
}
.pin[data-side="right"] .pin__card{left:calc(100% + 34px)}
.pin[data-side="left"] .pin__card{right:calc(100% + 34px)}
.pin__card::before{ /* la línea guía se extiende */
  content:"";position:absolute;top:50%;width:0;height:1px;background:var(--gold);transition:width .5s var(--ease) .05s;
}
.pin[data-side="right"] .pin__card::before{right:100%}
.pin[data-side="left"] .pin__card::before{left:100%}
.pin.is-on .pin__card{opacity:1;visibility:visible;pointer-events:auto}  /* alcanzable: si no, el cursor la cierra al ir hacia ella */
.pin.is-on .pin__card::before{width:34px}
.pin.is-on .pin__dot::after{transform:scale(1.5)}
.pin__no{font-family:var(--f-ui);font-size:.66rem;letter-spacing:.2em;color:var(--gold);display:block}
.pin__card strong{
  display:block;font-family:var(--f-ui);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:.92rem;margin-top:.25rem;color:var(--paper-hi);
}
.pin__card em{display:block;font-size:.9rem;color:#8FA3BD;margin-bottom:.5rem}
.pin__card p{margin:0;font-size:.9rem;line-height:1.55;color:#C3CEDD}
.plate__hint{
  text-align:center;font-family:var(--f-ui);font-weight:300;text-transform:uppercase;
  letter-spacing:.26em;font-size:.68rem;color:var(--fg-dim);margin:2rem 0 0;transition:opacity .6s;
}
.plate__hint.is-off{opacity:0}

/* ═══════════════════ LA COLECCIÓN ═══════════════════ */
.coll{padding:clamp(4.5rem,9vw,8rem) 0 0}
.coll__head{max-width:40rem;margin-bottom:clamp(2rem,4vw,3rem)}
.coll__tabs{display:flex;gap:.35rem;flex-wrap:wrap;border-bottom:1px solid var(--hair);margin-bottom:clamp(2rem,4vw,3.2rem)}
.coll__tab{
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;color:var(--fg-dim);
  font-family:var(--f-ui);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;
  padding:.7em 1.1em;margin-bottom:-1px;transition:.35s var(--ease);
}
.coll__tab:hover{color:var(--fg)}
.coll__tab.is-on{color:var(--fg);border-bottom-color:var(--accent)}
.coll__stage{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--gap);align-items:center}
.coll__shot{
  display:flex;justify-content:center;align-items:center;padding:1rem;
  background:radial-gradient(ellipse at 50% 62%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%);
}
.coll__shot img{max-height:min(72svh,720px);width:auto;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.coll__shot img.is-swapping{opacity:0;transform:translateY(14px)}
.coll__no{font-family:var(--f-ui);letter-spacing:.24em;font-size:.7rem;color:var(--fg-dim);margin:0 0 .5rem}
.coll__latin{display:block;color:var(--fg-dim);font-size:1.02rem;margin:.35rem 0 1rem}
.coll__nota{margin:0 0 1.8rem;max-width:48ch;line-height:1.6;
            border-left:2px solid var(--accent);padding-left:1rem}

.spec{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 2rem;border-top:1px solid var(--hair)}
.spec > div{padding:.72rem 0;border-bottom:1px solid var(--hair);padding-right:1rem}
.spec dt{
  font-family:var(--f-ui);font-weight:300;text-transform:uppercase;letter-spacing:.18em;
  font-size:.64rem;color:var(--fg-dim);margin-bottom:.15rem;
}
.spec dd{margin:0;font-size:.98rem;line-height:1.4}

.taste{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:2rem}
.taste__label{ /* el color del maguey va en el filete, no en el texto: el amarillo Tobala
                  no alcanza contraste sobre papel */
  display:block;font-family:var(--f-ui);font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  font-size:.7rem;color:var(--fg-dim);margin-bottom:.5rem;
}
.taste__label::before{content:"";display:block;width:26px;height:3px;background:var(--accent);margin-bottom:.55rem}
.taste p{margin:0;font-style:italic;font-size:1rem;line-height:1.6}
.coll__figure{margin:clamp(3.5rem,7vw,6rem) 0 0}
.coll__figure img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover;object-position:center 60%}

/* ═══════════════════ PROCESO ═══════════════════ */
.proc{padding:clamp(4.5rem,9vw,8rem) 0 clamp(4rem,8vw,7rem)}
.proc__head{max-width:38rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.proc__grid{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start;
}
.proc__sticky{position:sticky;top:16vh;aspect-ratio:4/5;border:1px solid var(--hair);overflow:hidden}
.proc__frames{position:absolute;inset:0}
.proc__frame{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease),transform 1.2s var(--ease);transform:scale(1.05);filter:saturate(.55) contrast(1.05);
}
.proc__frame.is-on{opacity:.88;transform:scale(1)}
.proc__still{
  position:absolute;inset:0;width:100%;height:100%;padding:11%;opacity:0;transition:opacity .8s var(--ease);
}
.proc__still.is-on{opacity:1}
.ink{ /* dibujado por defecto: la animacion es adorno, no requisito para que exista.
         Sin --len el dasharray es none, asi que nunca queda punteado por accidente. */
  stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,none);stroke-dashoffset:0;fill:none}
.proc__still.is-on .ink{animation:draw 1.6s var(--ease) backwards}
.ink--thin{stroke-width:1;opacity:.55}
@keyframes draw{from{stroke-dashoffset:var(--len,600)}to{stroke-dashoffset:0}}

.proc__steps{list-style:none;margin:0;padding:0}
.proc__step{
  padding:clamp(2.5rem,7vw,5rem) 0;border-bottom:1px solid var(--hair);
  opacity:.34;transition:opacity .6s var(--ease);
}
.proc__step.is-on{opacity:1}
.proc__step:last-child{border-bottom:0}
.proc__num{
  font-family:var(--f-ui);font-weight:300;letter-spacing:.1em;font-size:.86rem;color:var(--gold);
  display:block;margin-bottom:.7rem;
}
.proc__step h3{
  font-family:var(--f-display);font-weight:400;font-variation-settings:'opsz' 90,'SOFT' 30,'WONK' 1;
  font-size:clamp(1.5rem,2.4vw,2.1rem);margin:0 0 .8rem;letter-spacing:-.015em;
}
.proc__step p{margin:0;max-width:48ch}

/* ═══════════════════ PALENQUE ═══════════════════ */
.pal{padding:clamp(4.5rem,9vw,8rem) 0 0}
.pal__head{max-width:38rem;margin-bottom:clamp(2rem,4vw,3rem)}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 clamp(2.5rem,5vw,4rem);
  border-block:1px solid var(--hair);
}
.stats > div{padding:1.6rem 1rem 1.6rem 0;border-right:1px solid var(--hair)}
.stats > div:last-child{border-right:0}
.stats dd{
  margin:0;font-family:var(--f-display);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 40,'WONK' 1;
  font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.02em;
}
.stats dt{
  font-family:var(--f-ui);font-weight:300;text-transform:uppercase;letter-spacing:.2em;
  font-size:.64rem;color:var(--fg-dim);margin-top:.5rem;
}
.pal__cols{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap)}
.pal__cols p{margin:0;max-width:52ch}
.ticks{list-style:none;margin:0 0 1.6rem;padding:0}
.ticks li{padding:.55rem 0 .55rem 1.5rem;position:relative;border-bottom:1px solid var(--hair);font-size:.97rem}
.ticks li::before{content:"·";position:absolute;left:.35rem;color:var(--gold);font-size:1.5rem;line-height:1}
.pal__figure{margin:clamp(3.5rem,7vw,6rem) 0 0}
.pal__figure img{width:100%;height:clamp(260px,40vw,480px);object-fit:cover}

/* ═══════════════════ CÓMO LEERLO ═══════════════════ */
.guide{padding:clamp(4.5rem,9vw,8rem) 0}
.guide__head{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,4rem)}

.checks{
  list-style:none;margin:0 0 clamp(4rem,8vw,6.5rem);padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--hair);
}
.checks li{padding:1.6rem 1.4rem 0 0;border-right:1px solid var(--hair)}
.checks li:last-child{border-right:0;padding-right:0}
.checks__n{
  font-family:var(--f-ui);font-weight:300;letter-spacing:.22em;font-size:.66rem;
  color:var(--gold-deep);display:block;margin-bottom:1rem;
}
.checks h3{
  font-family:var(--f-ui);font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  font-size:.86rem;line-height:1.3;margin:0 0 .6rem;color:var(--fg);
}
.checks p{margin:0;font-size:.94rem;line-height:1.55;color:var(--fg-dim)}

.ritual{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:start;
        border-top:1px solid var(--hair);padding-top:clamp(2.5rem,5vw,4rem)}
.ritual__intro p:last-child{margin:1.2rem 0 0;max-width:36ch;color:var(--fg-dim)}
.ritual__steps{list-style:none;margin:0;padding:0}
.ritual__steps li{padding:0 0 1.5rem 3.4rem;position:relative;margin-bottom:1.5rem;border-bottom:1px solid var(--hair)}
.ritual__steps li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.ritual__n{
  position:absolute;left:0;top:.15rem;font-family:var(--f-ui);font-weight:300;
  letter-spacing:.1em;font-size:.9rem;color:var(--gold-deep);
}
.ritual__steps strong{
  display:block;font-family:var(--f-ui);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:.82rem;margin-bottom:.45rem;
}
.ritual__steps p{margin:0;max-width:52ch}

/* ═══════════════════ UMBRAL: logotipo ═══════════════════ */
/* Colores originales, sin filtro: navy + dorado del logo real, no el blanco invertido. */
.gate__logo{width:min(300px,64vw);margin:.4rem auto 1.3rem;display:block}

/* ═══════════════════ BANDA DE FOTO A SANGRE ═══════════════════ */
.band{margin:0;position:relative;background:var(--ink-deep)}
.band img{width:100%;height:clamp(240px,34vw,440px);object-fit:cover;display:block}
.band figcaption{
  position:absolute;left:var(--pad);bottom:1rem;color:var(--paper);
  font-family:var(--f-ui);font-weight:300;text-transform:uppercase;letter-spacing:.22em;
  font-size:.66rem;text-shadow:0 1px 12px rgba(0,0,0,.8);
}

/* ═══════════════════ GALERÍA ═══════════════════ */
.gal{padding:clamp(4.5rem,9vw,8rem) 0 clamp(3rem,6vw,5rem)}
.gal__head{max-width:38rem;margin-bottom:clamp(2rem,4vw,3rem)}
.gal__grid{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.4vw,1.1rem);
}
.gal__item{margin:0;overflow:hidden;background:var(--ink-deep)}
.gal__item img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block;
               transition:transform .9s var(--ease)}
.gal__item:hover img{transform:scale(1.03)}

/* ═══════════════════ RITUAL: foto ═══════════════════ */
.ritual__shot{margin:0 0 1.6rem;grid-column:1/-1}
.ritual__shot img{width:100%;height:clamp(200px,26vw,340px);object-fit:cover}

/* ═══════════════════ EL ORIGEN · MAPA ═══════════════════ */
.origin{padding:clamp(4.5rem,9vw,8rem) 0 0}
.origin__head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}

.map{
  position:relative;margin:0 auto clamp(3rem,6vw,5rem);
  width:min(1060px,100% - var(--pad)*2);
}
.map__svg{width:100%;height:auto;overflow:visible}
.map__mx{stroke-width:2;opacity:.85}
.map__svg.is-drawn .map__mx{animation:draw 2.6s var(--ease) backwards}
.map__do circle{fill:var(--gold);opacity:.8}
.map__here circle{fill:var(--paper-hi)}
.map__halo{fill:none;stroke:var(--paper);stroke-width:1;opacity:.35;animation:ping 3s ease-out infinite}
.map__lead{stroke:var(--gold);stroke-width:1}

.map__cap{
  position:absolute;left:81.5%;top:85.8%;transform:translateY(-50%);
  display:grid;gap:.15rem;
}
.map__town{
  font-family:var(--f-display);font-weight:400;font-variation-settings:'opsz' 60,'SOFT' 30,'WONK' 1;
  font-size:clamp(1.1rem,1.8vw,1.6rem);line-height:1.1;
}
.map__state,.map__coord{
  font-family:var(--f-ui);font-weight:300;text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;
  color:var(--fg-dim);
}
.map__legend{
  list-style:none;margin:1.5rem 0 0;padding:0;display:flex;gap:2rem;flex-wrap:wrap;
  font-family:var(--f-ui);font-weight:300;text-transform:uppercase;letter-spacing:.16em;
  font-size:.64rem;color:var(--fg-dim);
}
.map__legend li{display:flex;align-items:center;gap:.6rem}
.key{width:9px;height:9px;border-radius:50%;display:block}
.key--do{background:var(--gold);opacity:.8}
.key--here{background:var(--paper-hi)}

/* ═══════════════════ DISTRIBUCIÓN ═══════════════════ */
.dist{margin:2rem 0 0;padding:1.2rem 0 1.3rem;border-block:1px solid var(--hair)}
.dist__label{
  font-family:var(--f-ui);font-weight:400;text-transform:uppercase;letter-spacing:.22em;
  font-size:.64rem;color:var(--gold);margin:0 0 .6rem;
}
.dist__body{margin:0;max-width:46ch;line-height:1.6}

/* ═══════════════════ CONTACTO ═══════════════════ */
.cta{padding:clamp(4.5rem,9vw,8rem) 0}
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.cta__mail{margin:2rem 0 0;font-size:1.05rem}
.cta__mail a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:.3s}
.cta__mail a:hover{border-bottom-color:var(--gold)}
.form{display:grid;gap:1.1rem}
.form label{display:grid;gap:.4rem}
.form label span{
  font-family:var(--f-ui);font-weight:300;text-transform:uppercase;letter-spacing:.2em;
  font-size:.66rem;color:var(--fg-dim);
}
.form input,.form textarea{
  font-family:var(--f-display);font-size:1rem;color:var(--fg);background:rgba(231,227,215,.05);
  border:1px solid var(--hair);padding:.8rem .9rem;border-radius:0;width:100%;transition:.3s;
}
.form input:focus,.form textarea:focus{border-color:var(--gold);outline:none;background:rgba(231,227,215,.09)}
.form textarea{resize:vertical}
.form .btn{justify-self:start;margin-top:.4rem}
.form__msg{margin:0;font-size:.9rem;min-height:1.3em;color:var(--gold)}

/* ═══════════════════ FOOTER ═══════════════════ */
.foot{background:var(--ink-deep);color:var(--paper);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;border-top:1px solid rgba(231,227,215,.14)}
.foot__grid{display:grid;gap:1.2rem;justify-items:center;text-align:center}
.foot__logo{width:200px}  /* colores originales, sin invertir */
.foot__legal{margin:0;font-family:var(--f-ui);font-weight:300;text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:#8FA3BD;line-height:2;max-width:60ch}
.foot__warn{margin:0;font-size:.82rem;color:#7D91AC;max-width:56ch;line-height:1.6}
.foot__meta{margin:.6rem 0 0;font-size:.8rem;color:#66799A}
.foot__meta a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(231,227,215,.2)}

/* ═══════════════════ REVEAL AL SCROLL ═══════════════════ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:1000px){
  .nav__links{display:none}
  .nav__right{margin-left:auto}
  .checks{grid-template-columns:1fr 1fr}
  .checks li{border-bottom:1px solid var(--hair);padding-bottom:1.4rem}
  .checks li:nth-child(2n){border-right:0}
  .ritual{grid-template-columns:1fr}
  /* la ficha del mapa ya no cabe al lado: se baja y se centra */
  .map__lead{display:none}
  .map__cap{position:static;transform:none;text-align:center;justify-items:center;margin-top:1.4rem}
  .map__legend{justify-content:center}
  .hero__grid,.casa__grid,.coll__stage,.proc__grid,.pal__cols,.cta__grid{grid-template-columns:1fr}
  .hero{padding-top:6rem}
  .hero__text{max-width:none}
  .proc__sticky{position:relative;top:0;aspect-ratio:16/10;margin-bottom:1rem}
  .stats{grid-template-columns:1fr 1fr}
  .stats > div:nth-child(2n){border-right:0}
  .stats > div{padding-left:0}
  .stats > div:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media (max-width:900px){
  .pin__card{position:fixed;left:50%!important;right:auto!important;top:auto;bottom:1.2rem;
             translate:-50% 0;width:min(22rem,90vw);z-index:20}
  .pin__card::before{display:none}
  .plate__stage{width:min(560px,86vw)}
}
@media (max-width:640px){
  .gal__grid{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .checks li{border-right:0;padding-right:0}
  .hero{padding:5rem 0 2.5rem}
  .hero__plate{opacity:.11}
  .display--xl{font-size:clamp(2.5rem,10vw,3.4rem)}
  .hero .lead{font-size:1.02rem}
  .spec,.taste{grid-template-columns:1fr;gap:0}
  .taste{gap:1.4rem;margin-bottom:1.8rem}
  .plate__stage{width:92vw}
  .foot__logo{width:150px}
}

/* ═══════════════════ MOVIMIENTO REDUCIDO ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .gate__plate,.hero__plate,.plate__art{animation:none;clip-path:none}
  .rv{opacity:1;transform:none}
  .proc__step{opacity:1}
}