/* =====================================================================
   MAYAN BLOSSOM MEADERY · JUNGLE BLOSSOM FURY
   Paleta y ornamentos muestreados de la etiqueta real. Ver DESIGN.md.
   ===================================================================== */

:root{
  /* --- Selva ------------------------------------------------------- */
  --jade-900:#050D0C;
  --jade-800:#0A1714;
  --jade-700:#10231F;
  --jade-600:#17332C;
  --jade-400:#2C6155;
  /* --- Turquesa de la etiqueta ------------------------------------- */
  --teal-500:#488A79;
  --teal-400:#5EA68E;
  --teal-300:#7CC3AC;
  --teal-200:#A8DCC7;
  /* --- Oro ---------------------------------------------------------- */
  --gold-600:#A87A32;
  --gold-500:#CE9D52;
  --gold-400:#DAA351;
  --gold-300:#EFCB7F;
  --honey:#D78F49;
  --honey-lit:#F2B45C;
  /* --- Acentos florales -------------------------------------------- */
  --orchid-violet:#7E68A8;
  --orchid-indigo:#4B5486;
  --orchid-magenta:#B46F98;
  --orchid-lime:#8FB877;
  --orchid-cyan:#6FB6B0;
  /* --- Tinta -------------------------------------------------------- */
  --cream:#ECEED7;
  --bone:#F4F1E4;
  --ink:#07100E;

  --f-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-brand:"Zilla Slab",Georgia,serif;
  --f-edit:"Fraunces",Georgia,serif;

  --wrap:min(1240px,90vw);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}

body{
  background:var(--jade-900);
  color:var(--cream);
  font-family:var(--f-edit);
  font-weight:300;
  line-height:1.62;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100vh}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--gold-500);color:var(--ink)}

:focus-visible{
  outline:2px solid var(--gold-300);
  outline-offset:3px;
  border-radius:2px;
}

/* Grano fílmico global -------------------------------------------- */
.grain{
  position:fixed;inset:-8%;
  pointer-events:none;z-index:60;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
}

/* Cursor halo ------------------------------------------------------ */
.cursor{
  position:fixed;top:0;left:0;z-index:70;
  pointer-events:none;mix-blend-mode:screen;
  translate:-50% -50%;
  opacity:0;transition:opacity .5s;
}
.cursor.is-on{opacity:1}
.cursor i{
  display:block;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,203,127,.34),rgba(239,203,127,0) 68%);
  transition:scale .35s var(--ease-out);
}
.cursor.is-big i{scale:2.1}

/* =====================================================================
   Tipografía compartida
   ===================================================================== */
.wrap{width:var(--wrap);margin-inline:auto;position:relative;z-index:3}

.eyebrow{
  font-family:var(--f-display);
  font-weight:600;font-size:clamp(.72rem,1.1vw,.84rem);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-400);
  display:flex;align-items:center;gap:1.1rem;
  margin:0 0 1.6rem;
}
.eyebrow i{
  font-style:normal;font-size:.78em;color:var(--teal-300);
  padding-right:1.1rem;border-right:1px solid rgba(206,157,82,.34);
}
.eyebrow--dark{color:var(--jade-800)}
.eyebrow--dark i{color:var(--jade-700);border-color:rgba(10,23,20,.3)}

.h-giant{
  font-family:var(--f-display);
  font-weight:800;line-height:.82;
  letter-spacing:-.015em;text-transform:uppercase;
  margin:0;
}
.h-edit{
  font-family:var(--f-edit);
  font-weight:300;line-height:1.08;
  letter-spacing:-.02em;margin:0;
}

/* Reveal por línea (JS envuelve en .ln > i) ------------------------ */
/* El clip del reveal recorta los acentos de las mayúsculas (EXÓTICAS,
   YUCATÁN) cuando el interlineado es cerrado. El padding les da aire. */
.ln{display:block;overflow:hidden;padding-top:.18em;margin-top:-.18em}
.ln>i{display:block;font-style:inherit;transform:translateY(115%)}
.is-in .ln>i{transform:translateY(0);transition:transform 1s var(--ease-out)}
.is-in .ln:nth-child(2)>i{transition-delay:.09s}
.is-in .ln:nth-child(3)>i{transition-delay:.18s}
.is-in .ln:nth-child(4)>i{transition-delay:.27s}

.fade-up{opacity:0;transform:translateY(26px)}
.is-in .fade-up,.fade-up.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease-out)}

/* =====================================================================
   Botones
   ===================================================================== */
.btn{
  --bg:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.7rem;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.78rem,1.05vw,.9rem);
  letter-spacing:.24em;text-transform:uppercase;
  padding:1.05em 2.3em;
  border:1px solid rgba(206,157,82,.42);
  color:var(--gold-300);
  text-decoration:none;
  background:var(--bg);
  overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease),
             transform .45s var(--ease-out),box-shadow .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,var(--gold-600),var(--honey-lit) 45%,var(--gold-400));
  transform:translateY(114%) skewY(-3deg);
  transition:transform .55s var(--ease-out);
}
.btn:hover,.btn:focus-visible{
  color:var(--ink);border-color:var(--gold-300);
  transform:translateY(-2px);
  box-shadow:0 10px 34px -14px rgba(239,203,127,.6);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0) skewY(0)}
.btn:active{transform:translateY(0)}

.btn--solid{background:rgba(206,157,82,.09)}
.btn--ghost{border-color:rgba(236,238,215,.24);color:var(--cream)}
.btn--ghost::before{background:linear-gradient(105deg,var(--teal-500),var(--teal-300))}
.btn--dark{
  border-color:rgba(7,16,14,.5);color:var(--ink);
  background:rgba(7,16,14,.06);
}
.btn--dark::before{background:linear-gradient(105deg,var(--jade-800),var(--jade-600))}
.btn--dark:hover,.btn--dark:focus-visible{color:var(--gold-300);border-color:var(--jade-800)}

/* =====================================================================
   AGE GATE
   ===================================================================== */
.gate{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 80% at 50% 18%,rgba(44,97,85,.5),transparent 62%),
    linear-gradient(180deg,#08130F,#061410 70%,#020605);
  background-color:#04100D;
  padding:6vh 6vw;
  text-align:center;
  transition:opacity .9s var(--ease),visibility .9s;
}
.gate.is-out{opacity:0;visibility:hidden;pointer-events:none}
.gate__dust{position:absolute;inset:0;width:100%;height:100%}
.gate__vignette{
  position:absolute;inset:0;
  background:radial-gradient(75% 60% at 50% 45%,transparent 30%,rgba(2,6,5,.86) 100%);
}
.gate__inner{position:relative;max-width:min(660px,92vw);animation:gateIn 1.4s var(--ease-out) both}
@keyframes gateIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}

.gate__crest{
  width:min(210px,34vw);margin:0 auto 1.9rem;
  opacity:.94;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.7));
  animation:crestFloat 9s ease-in-out infinite;
}
@keyframes crestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.gate__rule{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-bottom:1.5rem}
.gate__rule span{height:1px;width:min(90px,16vw);background:linear-gradient(90deg,transparent,var(--gold-600))}
.gate__rule span:last-child{background:linear-gradient(90deg,var(--gold-600),transparent)}
.gate__rule i{width:5px;height:5px;rotate:45deg;background:var(--gold-400)}

.gate__eyebrow{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.68rem,1.6vw,.8rem);letter-spacing:.42em;text-transform:uppercase;
  color:var(--teal-300);margin:0 0 1.1rem;
}
.gate__brand{margin:0 0 1.2rem;line-height:.9}
.gate__brand-1{
  display:block;font-family:var(--f-brand);font-weight:700;
  font-size:clamp(2.1rem,6.4vw,3.6rem);letter-spacing:.005em;
  color:var(--bone);
  text-shadow:0 2px 0 rgba(168,122,50,.5),0 0 40px rgba(239,203,127,.18);
}
.gate__brand-2{
  display:block;font-family:var(--f-display);font-weight:500;
  font-size:clamp(.9rem,2.6vw,1.15rem);letter-spacing:.68em;text-transform:uppercase;
  color:var(--gold-400);padding-left:.68em;margin-top:.5rem;
}
.gate__lede{
  font-size:clamp(1rem,2.1vw,1.22rem);font-style:italic;
  color:var(--teal-200);margin:0 0 1.6rem;
}
.gate__legal{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(.82rem,1.7vw,.95rem);letter-spacing:.06em;
  color:rgba(236,238,215,.66);max-width:44ch;margin:0 auto 2.4rem;line-height:1.5;
}
.gate__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.gate__warn{
  font-family:var(--f-display);font-weight:400;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(236,238,215,.34);margin:2.6rem 0 0;
}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.5rem clamp(1.2rem,4vw,3.2rem);
  transition:transform .6s var(--ease),background-color .6s var(--ease),
             backdrop-filter .6s,border-color .6s;
  border-bottom:1px solid transparent;
  transform:translateY(0);
}
.nav[data-state="hidden"]{transform:translateY(-104%)}
.nav[data-state="stuck"]{
  background:rgba(5,13,12,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(206,157,82,.16);
  padding-block:1rem;
}
/* Con transform o backdrop-filter, la barra se vuelve el bloque contenedor
   de sus hijos `fixed` y el panel del menú se encoge al alto del nav.
   Mientras el menú está abierto hay que quitar ambos. */
.nav.is-menu{
  transform:none;
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
.nav.is-light{color:var(--jade-900)}
.nav.is-light .nav__links a,.nav.is-light .nav__lang button{color:rgba(7,16,14,.72)}
.nav.is-light .nav__brand-txt{color:var(--jade-900)}

.nav__brand{text-decoration:none;flex:0 0 auto}
.nav__brand-txt{
  font-family:var(--f-brand);font-weight:700;
  font-size:clamp(1rem,1.5vw,1.16rem);letter-spacing:.01em;
  color:var(--bone);
  transition:color .5s var(--ease);
}
.nav__brand:hover .nav__brand-txt{color:var(--gold-300)}

.nav__links{display:flex;gap:clamp(1.2rem,2.6vw,2.5rem)}
.nav__links a{
  position:relative;text-decoration:none;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(.74rem,1vw,.86rem);letter-spacing:.26em;text-transform:uppercase;
  color:rgba(236,238,215,.74);
  transition:color .4s var(--ease);
  padding-block:.3rem;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold-400);
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--gold-300)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);transform-origin:left}

.nav__lang{display:flex;align-items:center;gap:.55rem;flex:0 0 auto}
.nav__lang i{width:1px;height:11px;background:rgba(206,157,82,.42)}
.nav__lang button{
  font-family:var(--f-display);font-weight:600;
  font-size:.78rem;letter-spacing:.18em;
  color:rgba(236,238,215,.5);
  transition:color .35s var(--ease);
}
.nav__lang button.is-active{color:var(--gold-300)}
.nav__lang button:hover{color:var(--gold-300)}

.nav__burger{display:none;width:30px;height:18px;position:relative;flex:0 0 auto}
.nav__burger span{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .45s var(--ease-out),opacity .3s;
}
.nav__burger span:first-child{top:3px}
.nav__burger span:last-child{bottom:3px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(5.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-5.5px) rotate(-45deg)}

/* =====================================================================
   Capas y canvas compartidos
   ===================================================================== */
.layer{position:absolute;inset:0;pointer-events:none;z-index:1;will-change:transform}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}

/* El desvanecido de estos recortes va horneado en el alfa del WebP
   (tools/soften.py). Con mask-image en CSS, cada elemento que anima
   transform u opacity obliga a recomponer su máscara en cada cuadro. */

section{position:relative;isolation:isolate}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  min-height:100svh;
  display:grid;place-items:center;
  padding:10vh clamp(1.2rem,4vw,3.2rem) 13vh;
  overflow:clip;
  background:var(--jade-900);
}
/* El resplandor del hero se recorta contra el borde de la sección y deja
   una costura dura. Este degradado lo disuelve antes del límite. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26vh;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,#040A09 92%);
}
/* Selva real detrás de la escena. El desenfoque viene horneado en el WebP
   (tools/build_v2.py): con filter:blur() en CSS costaba ~10 fps. */
.hero__scene{
  position:absolute;inset:0;z-index:0;
  background:url("assets/tex/jungle-blur.webp") center 26%/cover no-repeat;
  opacity:.85;
}
.hero__sky{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(90% 65% at 50% 78%,rgba(44,97,85,.34),transparent 60%),
    radial-gradient(60% 45% at 50% 30%,rgba(23,51,44,.52),transparent 70%),
    linear-gradient(180deg,rgba(4,11,10,.82),rgba(7,20,17,.62) 42%,rgba(4,10,9,.93));
}
.hero__glow{
  position:absolute;left:50%;top:52%;z-index:0;
  width:min(760px,88vw);aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(circle,rgba(94,166,142,.30),rgba(72,138,121,.10) 42%,transparent 68%);
  animation:breathe 11s ease-in-out infinite;
  will-change:opacity;
}
@keyframes breathe{0%,100%{opacity:.72}50%{opacity:1}}

/* Sin filter: el desenfoque y el apagado van horneados en el WebP. */
.hero__leaf{position:absolute;width:clamp(180px,22vw,330px);opacity:.85}
.hero__leaf--bl{left:-5%;bottom:-6%;rotate:-8deg}
.hero__leaf--br{right:-5%;bottom:-9%;rotate:12deg;scale:-1 1}

.hero__fl{position:absolute;width:clamp(80px,10vw,150px);opacity:.55;filter:saturate(.85) brightness(.8)}
.hero__fl--1{left:6%;top:22%;rotate:-14deg}
.hero__fl--2{right:8%;top:30%;rotate:16deg}
.hero__fl--3{left:14%;bottom:14%;rotate:8deg}

.hero__stage{
  position:relative;z-index:3;
  display:grid;justify-items:center;
  width:var(--wrap);
}
.hero__arc{
  width:clamp(140px,16vw,215px);
  opacity:.85;margin-bottom:clamp(.4rem,1.4vh,1rem);
  filter:drop-shadow(0 0 18px rgba(206,157,82,.35));
}

/* La botella se para delante del logotipo: el producto domina la escena. */
.hero__composite{
  position:relative;
  display:grid;place-items:center;
  width:100%;
  margin-block:clamp(.2rem,1vh,.9rem);
}
.hero__composite>*{grid-area:1/1}
.hero__bottle-wrap{position:relative;z-index:2;display:grid;place-items:center;will-change:transform}
.hero__halo{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(560px,80vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(239,203,127,.20),rgba(94,166,142,.09) 40%,transparent 66%);
}
.hero__bottle{
  position:relative;
  height:min(47vh,455px);width:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.75));
  will-change:transform;
  /* El desenfoque de entrada va en CSS y conserva la sombra en ambos
     extremos: si lo animara GSAP chocaría con la salida por scroll. */
  animation:bottleFocus 1.7s var(--ease-out) both .2s;
}
@keyframes bottleFocus{
  from{filter:blur(13px) drop-shadow(0 26px 40px rgba(0,0,0,.75))}
  to{filter:blur(0) drop-shadow(0 26px 40px rgba(0,0,0,.75))}
}
.hero__shadow{
  position:absolute;bottom:-3%;left:50%;translate:-50%;
  width:min(300px,52vw);height:34px;
  background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);
}

.hero__copy{text-align:center;margin-top:clamp(.6rem,1.8vh,1.4rem);max-width:min(760px,92vw)}
.hero__eyebrow{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.66rem,1.4vw,.78rem);letter-spacing:.44em;text-transform:uppercase;
  color:var(--teal-300);margin:0;
}
.hero__brand{
  font-family:var(--f-brand);font-weight:700;
  font-size:clamp(1.4rem,3.4vw,2.2rem);line-height:1;
  color:var(--bone);margin:.5rem 0 0;
  text-shadow:0 2px 0 rgba(168,122,50,.42),0 0 46px rgba(239,203,127,.2);
}
.hero__product{
  z-index:1;margin:0;width:100%;pointer-events:none;text-align:center;
  /* Sube para cruzar el cuello: la etiqueta queda íntegra. */
  transform:translateY(-16%);
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.6rem,10.4vw,8.2rem);line-height:.84;
  letter-spacing:-.018em;text-transform:uppercase;
  background:linear-gradient(178deg,var(--bone) 6%,var(--gold-300) 46%,var(--gold-600) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(239,203,127,.16));
}
.hero__tag{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(.74rem,1.5vw,.9rem);letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-400);margin:0;
}
.hero__sub{
  font-size:clamp(.94rem,1.5vw,1.08rem);font-style:italic;
  color:rgba(236,238,215,.7);max-width:40ch;margin:.6rem auto 0;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:clamp(1.1rem,2.4vh,1.9rem)}

.scrollcue{
  position:absolute;left:50%;bottom:2.4vh;translate:-50%;z-index:5;
  display:grid;justify-items:center;gap:.7rem;
}
.scrollcue span{
  font-family:var(--f-display);font-weight:500;
  font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(236,238,215,.45);
}
.scrollcue i{
  width:1px;height:46px;
  background:linear-gradient(180deg,var(--gold-400),transparent);
  transform-origin:top;animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(46px);opacity:0}}

/* =====================================================================
   01 · ALMA / YUCATÁN
   ===================================================================== */
.alma{
  padding:clamp(7rem,15vh,11rem) 0;
  overflow:clip;
  background:linear-gradient(180deg,#040A09,#08150F 40%,#061110);
}
.alma__tex{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background:url("assets/tex/stone-blur.webp") center/cover;
  /* Sin máscara la textura corta en seco contra el hero. */
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.alma__marquee{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:1;overflow:hidden}
.alma__track{
  display:flex;gap:.28em;white-space:nowrap;
  will-change:transform;
}
.alma__track span{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(9rem,26vw,24rem);line-height:.78;
  text-transform:uppercase;letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(206,157,82,.24);
  opacity:.9;
}
.alma__track span:nth-child(2){
  -webkit-text-stroke:0;
  background:linear-gradient(180deg,rgba(94,166,142,.30),rgba(72,138,121,.06));
  -webkit-background-clip:text;background-clip:text;
}
.alma__flora img{position:absolute;opacity:.4;filter:saturate(.8) brightness(.75)}
.alma__flora img:first-child{width:clamp(90px,11vw,160px);right:9%;top:16%;rotate:18deg}
.alma__flora img:last-child{width:clamp(130px,16vw,230px);left:-3%;bottom:6%;rotate:-10deg}

.alma__wrap{max-width:min(720px,88vw);margin-inline:auto;text-align:center}
.alma__h{
  font-family:var(--f-edit);font-weight:300;
  font-size:clamp(2rem,5.2vw,3.9rem);line-height:1.04;letter-spacing:-.025em;
  color:var(--bone);margin:0 0 1.8rem;
}
.alma__p{
  font-size:clamp(1.02rem,1.8vw,1.22rem);
  color:rgba(236,238,215,.74);margin:0 auto;max-width:52ch;
}
.alma__hex{width:min(320px,60vw);margin:2.6rem auto 0;opacity:.6}

/* =====================================================================
   02 · LA FLOR
   ===================================================================== */
.flor{
  min-height:112svh;
  display:grid;place-items:center;
  padding:clamp(5rem,10vh,8rem) 0;
  overflow:clip;
  background:radial-gradient(70% 55% at 50% 42%,#0D2620,#050D0C 72%);
}
.flor__glow{
  position:absolute;left:50%;top:42%;translate:-50% -50%;z-index:0;
  width:min(880px,96vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(239,203,127,.18),rgba(126,104,168,.10) 38%,transparent 66%);
  opacity:var(--bloom,0);
  transition:opacity .5s linear;
}
.flor__stage{
  position:relative;z-index:2;display:grid;place-items:center;
  margin-bottom:clamp(2rem,6vh,4.5rem);
}
.flor__orchid{
  width:min(520px,80vw);height:auto;
  /* --bloom: 0 = silueta · 1 = floración plena (lo mueve GSAP) */
  filter:brightness(calc(.05 + var(--bloom,0) * .95)) saturate(calc(.1 + var(--bloom,0) * .98));
  transform:scale(calc(.7 + var(--bloom,0) * .3)) rotate(calc((1 - var(--bloom,0)) * -7deg));
  clip-path:circle(calc(18% + var(--bloom,0) * 62%) at 50% 52%);
  will-change:transform,filter,clip-path;
}
.flor__rays{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(620px,86vw);aspect-ratio:1;z-index:-1;
  background:conic-gradient(from 0deg,
    transparent 0deg,rgba(239,203,127,.16) 6deg,transparent 12deg,
    transparent 30deg,rgba(239,203,127,.13) 36deg,transparent 42deg,
    transparent 60deg,rgba(239,203,127,.16) 66deg,transparent 72deg,
    transparent 90deg,rgba(239,203,127,.13) 96deg,transparent 102deg,
    transparent 120deg,rgba(239,203,127,.16) 126deg,transparent 132deg,
    transparent 150deg,rgba(239,203,127,.13) 156deg,transparent 162deg,
    transparent 180deg,rgba(239,203,127,.16) 186deg,transparent 192deg,
    transparent 210deg,rgba(239,203,127,.13) 216deg,transparent 222deg,
    transparent 240deg,rgba(239,203,127,.16) 246deg,transparent 252deg,
    transparent 270deg,rgba(239,203,127,.13) 276deg,transparent 282deg,
    transparent 300deg,rgba(239,203,127,.16) 306deg,transparent 312deg,
    transparent 330deg,rgba(239,203,127,.13) 336deg,transparent 342deg,transparent 360deg);
  mask-image:radial-gradient(circle,transparent 26%,#000 46%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle,transparent 26%,#000 46%,transparent 74%);
  opacity:calc(var(--bloom,0) * .9);
  rotate:calc(var(--bloom,0) * 26deg);
}
.flor__wrap{max-width:min(660px,88vw);margin-inline:auto;text-align:center}
.flor__h{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.4rem,7vw,5rem);line-height:.9;text-transform:uppercase;letter-spacing:-.015em;
  color:var(--bone);margin:0 0 1.4rem;
}
.flor__p{font-size:clamp(1rem,1.7vw,1.16rem);color:rgba(236,238,215,.7);margin:0 auto;max-width:46ch}

/* =====================================================================
   03 · LA ABEJA
   ===================================================================== */
.abeja{
  min-height:104svh;
  display:grid;align-items:center;
  padding:clamp(5rem,10vh,8rem) 0;
  overflow:clip;
  background:linear-gradient(180deg,#050D0C,#0A1A14 50%,#050D0C);
}
.abeja__path{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.abeja__path path{fill:none;stroke:rgba(239,203,127,.20);stroke-width:1;stroke-dasharray:5 9}
.abeja__bee{
  position:absolute;top:0;left:0;z-index:3;
  width:clamp(46px,5.5vw,76px);
  filter:drop-shadow(0 0 16px rgba(239,203,127,.55));
  offset-path:path("M -80 470 C 200 520, 300 210, 520 300 S 830 470, 1000 240 S 1180 90, 1320 150");
  offset-rotate:auto;
  offset-distance:0%;
  will-change:offset-distance;
}
/* Un respiro fotográfico entre tanta ilustración: producto en contexto. */
.abeja__wrap{
  display:grid;grid-template-columns:1fr minmax(280px,38%);
  align-items:center;gap:clamp(2rem,5vw,4.5rem);
}
.abeja__txt{position:relative;max-width:52ch}
.abeja__h{
  font-family:var(--f-edit);font-weight:300;font-style:italic;
  font-size:clamp(1.75rem,3.5vw,2.7rem);line-height:1.06;letter-spacing:-.022em;
  color:var(--bone);margin:0 0 1.4rem;text-wrap:balance;
}
.abeja__p{font-size:clamp(1rem,1.7vw,1.16rem);color:rgba(236,238,215,.72);margin:0;max-width:46ch}
.abeja__comb{
  position:absolute;right:-14%;top:-38%;
  width:clamp(80px,9vw,130px);opacity:.34;
}

.abeja__shot{margin:0;position:relative}
.abeja__shot img{
  width:100%;height:auto;
  border:1px solid rgba(206,157,82,.3);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.9);
}
.abeja__shot::after{
  content:"";position:absolute;inset:10px;pointer-events:none;
  border:1px solid rgba(239,203,127,.22);
}
.abeja__shot figcaption{
  margin-top:.9rem;
  font-family:var(--f-display);font-weight:500;
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(206,157,82,.72);
}

/* =====================================================================
   04 · JAGUAR
   ===================================================================== */
.jaguar{
  min-height:118svh;
  display:grid;align-items:center;
  padding:clamp(5rem,10vh,8rem) 0;
  overflow:clip;
  background:#030908;
}
.jaguar__dark{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(54% 42% at 50% 34%,transparent 10%,rgba(3,9,8,.92) 72%),
    linear-gradient(180deg,rgba(3,9,8,.55),transparent 26%,rgba(3,9,8,.86) 62%,#030908 88%);
}
.jaguar__stage{
  position:absolute;left:50%;top:33%;translate:-50% -50%;z-index:1;
  width:min(880px,94vw);
}
.jaguar__img{
  width:100%;
  /* --reveal: 0 = pura sombra · 1 = presencia plena */
  filter:brightness(calc(.03 + var(--reveal,0) * .92)) contrast(calc(1.5 - var(--reveal,0) * .35)) saturate(calc(.2 + var(--reveal,0) * .8));
  transform:scale(calc(1.22 - var(--reveal,0) * .22));
  will-change:transform,filter;
}
.jaguar__eye{
  position:absolute;z-index:2;
  width:clamp(56px,7vw,104px);aspect-ratio:1;
  translate:-50% -50%;pointer-events:none;
  background:radial-gradient(circle,rgba(239,203,127,.9),rgba(215,143,73,.34) 30%,transparent 62%);
  mix-blend-mode:screen;
  opacity:var(--eye,0);
  filter:blur(1px);
}
.jaguar__eye--a{left:63%;top:36.5%;animation:eyePulse 3.4s ease-in-out infinite}
.jaguar__eye--b{left:45.5%;top:34%;width:clamp(38px,4.8vw,70px);animation:eyePulse 3.4s ease-in-out .45s infinite}
@keyframes eyePulse{0%,100%{scale:1}50%{scale:1.16}}

.jaguar__wrap{
  position:relative;z-index:3;text-align:center;
  max-width:min(660px,88vw);margin-inline:auto;
  padding-top:38vh;   /* el rostro arriba, la palabra sobre la sombra */
}
.jaguar__h{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(4rem,17vw,12rem);line-height:.8;text-transform:uppercase;letter-spacing:.03em;
  margin:0 0 1.2rem;
  background:linear-gradient(180deg,var(--gold-300) 4%,var(--gold-500) 44%,rgba(168,122,50,.35) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 44px rgba(3,9,8,.95)) drop-shadow(0 0 90px rgba(239,203,127,.18));
}
.jaguar__p{font-size:clamp(1rem,1.7vw,1.16rem);color:rgba(236,238,215,.62);margin:0 auto;max-width:44ch}

/* =====================================================================
   05 · RITUAL · MOMENTO WOW
   ===================================================================== */
.ritual{height:640svh;position:relative}
.ritual__pin{
  position:sticky;top:0;
  height:100svh;width:100%;
  overflow:hidden;
  display:grid;place-items:center;
  background:#030908;
}
.ritual__bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(70% 55% at 50% 52%,rgba(44,97,85,calc(.10 + var(--light,0) * .5)),transparent 66%),
    linear-gradient(180deg,#030908,#061512 55%,#030908);
}
.ritual__teal{
  position:absolute;inset:0;z-index:6;opacity:var(--tealin,0);
  background:
    radial-gradient(62% 52% at 50% 46%,#7CC3AC,#488A79 46%,#2C6155 78%,#153B33);
}
.ritual__teal::after{
  content:"";position:absolute;inset:0;
  background:url("assets/tex/teal.webp") center/cover;
  mix-blend-mode:soft-light;opacity:.5;
}

.ritual__jaguar{
  position:absolute;z-index:1;
  left:50%;top:36%;translate:-50% -50%;
  width:min(1080px,120vw);
  opacity:var(--jag,0);
  /* Filtro FIJO: animarlo junto con la máscara obliga a re-rasterizar una
     capa de 1080px en cada cuadro. Solo se anima opacity + transform. */
  filter:brightness(.6) saturate(.78);
  transform:scale(calc(1.3 - var(--jag,0) * .18));
}

.ritual__flora{position:absolute;inset:0;z-index:2;pointer-events:none}
.rf{position:absolute;opacity:0;will-change:transform,opacity;filter:saturate(.9) brightness(.85)}
.rf--1{left:8%;top:22%;width:clamp(90px,11vw,170px)}
.rf--2{right:11%;top:18%;width:clamp(78px,9vw,140px)}
.rf--3{left:14%;bottom:16%;width:clamp(78px,9vw,140px)}
.rf--4{left:-4%;bottom:-6%;width:clamp(150px,19vw,300px)}
.rf--5{right:-4%;bottom:-8%;width:clamp(150px,19vw,300px)}
.rf--6{right:6%;top:44%;width:clamp(140px,17vw,270px)}

/* La botella va POR ENCIMA del lavado turquesa y del lockup:
   en el reveal final tiene que quedar iluminada al frente. */
.ritual__bottle{
  position:relative;z-index:8;
  display:grid;place-items:center;
  will-change:transform;
}
.ritual__halo{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(640px,86vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(239,203,127,calc(.10 + var(--light,0) * .3)),rgba(94,166,142,calc(.05 + var(--light,0) * .14)) 40%,transparent 68%);
}
.rb{
  grid-area:1/1;
  height:min(64vh,620px);width:auto;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.72));
}
.rb--angle{opacity:0}

.ritual__bee{
  position:absolute;z-index:6;
  width:clamp(44px,5vw,72px);
  left:0;top:0;opacity:0;
  filter:drop-shadow(0 0 14px rgba(239,203,127,.6));
  will-change:transform,opacity;
}
.fx--ritual{z-index:4}
.honey{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}

/* El lockup queda detrás de la botella: mismo recurso editorial que el hero. */
.ritual__reveal{
  position:absolute;inset:0;z-index:7;
  display:grid;place-items:center;
  text-align:center;
  opacity:0;
  padding-inline:1.5rem;
  pointer-events:none;
}
.ritual__reveal-in{width:100%;max-width:min(1100px,94vw)}
.ritual__arc{width:clamp(110px,13vw,180px);margin:0 auto .7rem;opacity:.85}
.rv{margin:0}
.rv--brand{
  font-family:var(--f-brand);font-weight:700;
  font-size:clamp(1.3rem,3.6vw,2.3rem);line-height:1;
  color:var(--ink);
}
.rv--prod{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.4rem,10vw,7.6rem);line-height:.86;
  text-transform:uppercase;letter-spacing:-.018em;
  color:var(--jade-900);margin-top:.04em;
}
.rv--kind{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(.74rem,1.5vw,.9rem);letter-spacing:.6em;text-transform:uppercase;
  color:rgba(7,16,14,.72);margin-top:.7rem;padding-left:.6em;
}
.rv--tag{
  font-family:var(--f-edit);font-style:italic;font-weight:400;
  font-size:clamp(.92rem,1.8vw,1.2rem);
  color:rgba(7,16,14,.84);margin-top:.7rem;
}

/* =====================================================================
   06 · PRODUCTO
   ===================================================================== */
.prod{
  min-height:108svh;
  display:grid;place-items:center;
  padding:clamp(6rem,13vh,10rem) clamp(1.2rem,4vw,3.2rem);
  overflow:clip;
  background:radial-gradient(64% 52% at 50% 44%,#0C211C,#040A09 76%);
}
/* El ritual termina en turquesa pleno: sin este relevo, el corte
   contra la sección oscura rompe la continuidad cinematográfica. */
/* El pin del ritual libera con su borde inferior en #164538 (medido).
   Si esta banda no arranca EXACTAMENTE en ese color se ve el corte. */
.prod::before{
  content:"";position:absolute;left:0;right:0;top:0;height:66vh;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    #164538 0%,
    #143E33 18%,
    #11332B 38%,
    rgba(11,28,24,.78) 62%,
    rgba(9,22,19,.34) 82%,
    transparent 100%);
}
.prod::after{
  content:"";position:absolute;left:0;right:0;top:0;height:66vh;z-index:1;
  pointer-events:none;opacity:.42;
  background:url("assets/tex/teal.webp") center/cover;
  mix-blend-mode:soft-light;
  mask-image:linear-gradient(180deg,#000,transparent 66%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 66%);
}
.prod__glow{
  position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:0;
  width:min(720px,92vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(94,166,142,.2),transparent 64%);
}
.prod__comb{position:absolute;left:5%;top:12%;width:clamp(90px,11vw,150px);opacity:.32}

.prod__stage{position:relative;z-index:3;display:grid;place-items:center}
.prod__bottle{
  grid-area:1/1;
  height:min(50vh,480px);width:auto;
  opacity:0;transform:scale(.96);
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.72));
  transition:opacity .8s var(--ease),transform .8s var(--ease-out);
}
.prod__bottle.is-on{opacity:1;transform:none}

.prod__side{
  position:absolute;z-index:2;margin:0;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(.7rem,1.1vw,.82rem);letter-spacing:.5em;text-transform:uppercase;
  color:rgba(206,157,82,.42);
  white-space:nowrap;
}
.prod__side--l{left:3.5%;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center}
.prod__side--r{right:3.5%;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center}

.prod__meta{position:relative;z-index:3;text-align:center;margin-top:clamp(2rem,5vh,3.6rem);max-width:min(820px,92vw)}
.prod__meta .eyebrow{justify-content:center}
.prod__h{margin:0 0 .8rem}
.prod__h span{
  display:block;font-family:var(--f-brand);font-weight:700;
  font-size:clamp(1.3rem,3.2vw,2rem);color:var(--bone);
}
.prod__h em{
  display:block;font-style:normal;
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.1rem,7vw,4.4rem);line-height:.9;text-transform:uppercase;letter-spacing:-.01em;
  background:linear-gradient(178deg,var(--bone) 10%,var(--gold-300) 52%,var(--gold-600));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-top:.1em;
}
.prod__note{
  font-family:var(--f-edit);font-style:italic;
  font-size:clamp(1rem,1.8vw,1.2rem);color:var(--teal-300);margin:0 0 2.4rem;
}

.specs{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(206,157,82,.2);
  border:1px solid rgba(206,157,82,.2);
  margin:0 0 2.4rem;
}
.specs>div{background:rgba(5,13,12,.72);padding:1.4rem .9rem;display:grid;gap:.5rem}
.specs dt{
  font-family:var(--f-display);font-weight:500;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(236,238,215,.44);
}
.specs dd{
  margin:0;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1rem,1.9vw,1.25rem);letter-spacing:.04em;text-transform:uppercase;
  color:var(--gold-300);
}

.prod__switch{display:inline-flex;border:1px solid rgba(206,157,82,.28)}
.prod__switch button{
  font-family:var(--f-display);font-weight:600;
  font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.8em 1.8em;color:rgba(236,238,215,.55);
  transition:color .4s var(--ease),background-color .4s var(--ease);
}
.prod__switch button.is-active{background:rgba(206,157,82,.16);color:var(--gold-300)}
.prod__switch button:hover{color:var(--gold-300)}

/* =====================================================================
   07 · CTA
   ===================================================================== */
.cta{
  position:relative;
  padding:clamp(9rem,20vh,15rem) clamp(1.2rem,4vw,3.2rem);
  overflow:clip;
  background:radial-gradient(76% 62% at 50% 40%,#7CC3AC,#488A79 52%,#2C6155);
  color:var(--jade-900);
  text-align:center;
}
.cta__tex{
  position:absolute;inset:0;z-index:0;opacity:.42;
  background:url("assets/tex/teal.webp") center/cover;
  mix-blend-mode:soft-light;
}
/* Entrada y salida del bloque turquesa: sin esto se ven dos cortes secos
   contra la sección de producto y contra el footer. */
.cta::before,
.cta::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.cta::before{
  top:0;height:24vh;
  background:linear-gradient(180deg,#040A09,rgba(4,10,9,.62) 34%,transparent);
}
.cta::after{
  bottom:0;height:11vh;
  background:linear-gradient(0deg,#030908,rgba(3,9,8,.34) 52%,transparent);
}
.cta__crest{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:0;
  width:min(620px,86vw);opacity:.16;
  mix-blend-mode:multiply;
}
.cta__wrap{max-width:min(760px,90vw);margin-inline:auto}
.cta__wrap .eyebrow{justify-content:center}
.cta__h{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.4rem,8vw,5.4rem);line-height:.88;text-transform:uppercase;letter-spacing:-.015em;
  color:var(--jade-900);margin:0 0 1.3rem;
}
.cta__p{
  font-size:clamp(1rem,1.8vw,1.2rem);font-style:italic;
  color:rgba(7,16,14,.76);margin:0 auto 2.6rem;max-width:44ch;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{
  position:relative;
  padding:clamp(4rem,9vh,7rem) clamp(1.2rem,4vw,3.2rem) 2.4rem;
  background:#030908;
  background-color:#030908;
  border-top:1px solid rgba(206,157,82,.18);
  overflow:hidden;
}
.foot__corner{position:absolute;top:1.4rem;width:clamp(48px,6vw,72px);opacity:.4}
.foot__corner--tl{left:1.4rem}
.foot__corner--tr{right:1.4rem;scale:-1 1}
.foot__hex{
  position:absolute;left:50%;top:2.2rem;translate:-50%;
  width:min(420px,60vw);opacity:.4;
}

.foot__grid{
  position:relative;z-index:2;
  width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;
  gap:clamp(1.8rem,4vw,3.4rem);
  padding-top:clamp(1.5rem,4vh,3rem);
}
.foot__b1{
  font-family:var(--f-brand);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--bone);margin:0;
}
.foot__b2{
  font-family:var(--f-display);font-weight:500;
  font-size:.8rem;letter-spacing:.56em;text-transform:uppercase;
  color:var(--gold-400);margin:.25rem 0 1.1rem;
}
.foot__b3{font-size:.95rem;color:rgba(236,238,215,.66);margin:0 0 .3rem}
.foot__b4{
  font-family:var(--f-display);font-weight:600;
  font-size:.85rem;letter-spacing:.2em;color:var(--teal-300);margin:0;
}

.foot__col{display:grid;align-content:start;gap:.65rem}
.foot__col h3{
  font-family:var(--f-display);font-weight:600;
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-400);margin:0 0 .5rem;
}
.foot__col a,.foot__col p{
  font-size:.92rem;color:rgba(236,238,215,.6);
  text-decoration:none;margin:0;transition:color .35s var(--ease);
}
.foot__col a:hover{color:var(--gold-300)}
.foot__col--legal p{font-size:.84rem;line-height:1.55;color:rgba(236,238,215,.46)}
.foot__wa{display:inline-flex;align-items:center;gap:.5rem}
.foot__wa svg{flex:0 0 auto;color:var(--teal-300);transition:color .35s var(--ease)}
.foot__wa:hover svg{color:var(--gold-300)}
.foot__social{display:flex;gap:1rem;margin-top:.5rem}
.foot__social a{
  font-family:var(--f-display);font-weight:600;
  font-size:.78rem;letter-spacing:.16em;color:var(--teal-300);
}

.foot__warn{
  position:relative;z-index:2;
  width:var(--wrap);margin:clamp(2.4rem,6vh,4rem) auto 0;
  display:flex;align-items:center;gap:1.2rem;
  padding:1.2rem 1.4rem;
  border:1px solid rgba(206,157,82,.22);
  background:rgba(206,157,82,.04);
}
.foot__18{color:var(--gold-400);flex:0 0 auto;display:grid;place-items:center}
.foot__warn p{
  margin:0;font-family:var(--f-display);font-weight:400;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.6;
  color:rgba(236,238,215,.56);
}

.foot__base{
  position:relative;z-index:2;
  width:var(--wrap);margin:2.4rem auto 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.6rem;border-top:1px solid rgba(236,238,215,.1);
}
.foot__amx{width:clamp(104px,12vw,128px);opacity:.85}
.foot__base p{
  margin:0;font-family:var(--f-display);font-weight:400;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(236,238,215,.4);
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1040px){
  .foot__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .nav__links{
    position:fixed;inset:0;z-index:-1;
    flex-direction:column;align-items:center;justify-content:center;gap:2rem;
    background:rgba(4,11,10,.96);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;
    transition:opacity .5s var(--ease),visibility .5s;
  }
  .nav__links.is-open{opacity:1;visibility:visible}
  .nav__links a{font-size:1.15rem;letter-spacing:.3em}
  .nav__burger{display:block;order:3}
  .nav__lang{order:2}

  /* En móvil el logotipo NO puede ir detrás de la botella: parte en dos
     líneas y "FURY" quedaría completamente tapado. Pasa arriba. */
  .hero{padding:6vh 1.2rem 8vh}
  .hero__composite{display:block;margin-block:0}
  .hero__product{transform:none;margin-bottom:.5rem;font-size:clamp(2.3rem,12.4vw,3.6rem)}
  .hero__arc{display:none}
  .hero__sub{display:none}
  .hero__brand{font-size:1.35rem;margin-top:.35rem}
  .hero__eyebrow{font-size:.62rem;letter-spacing:.34em}
  .hero__bottle{height:min(56vh,470px)}
  .hero__cta{margin-top:1rem;gap:.6rem}
  .hero__cta .btn{padding:.85em 1.5em;font-size:.7rem;letter-spacing:.18em}
  .hero__cta .btn--ghost{display:none}
  .hero__tag{font-size:.68rem;letter-spacing:.3em}
  .scrollcue{display:none}
  .hero__fl--2{display:none}

  .specs{grid-template-columns:1fr 1fr}
  .prod__side{display:none}

  .ritual{height:520svh}
  .rb{height:min(56vh,470px)}
  .rf--6,.rf--2{display:none}
  /* El lockup final se coloca arriba; la botella baja para no taparlo. */
  .ritual__reveal{place-items:start center;padding-top:8vh}
  .rv--brand{font-size:1.2rem}
  .rv--prod{font-size:clamp(1.9rem,10.6vw,3rem);line-height:.92}
  .rv--kind{font-size:.66rem;letter-spacing:.44em}
  .rv--tag{font-size:.88rem}
  .ritual__arc{width:96px;margin-bottom:.4rem}

  .jaguar__stage{width:130vw}
  .abeja__comb{display:none}
  .abeja__wrap{grid-template-columns:1fr;text-align:center;gap:2.4rem}
  .abeja__txt{margin-inline:auto}
  .abeja__p{margin-inline:auto}
  .abeja__shot{max-width:86vw;margin-inline:auto}
}

@media (max-width:560px){
  .foot__grid{grid-template-columns:1fr;gap:2rem}
  .foot__warn{flex-direction:column;align-items:flex-start;text-align:left}
  .foot__base{justify-content:center;text-align:center}
  .specs{grid-template-columns:1fr}
  .hero__bottle{height:min(58vh,460px)}
  .alma__track span{-webkit-text-stroke-width:.6px}
}

/* Punteros gruesos: sin cursor propio ni hovers ficticios ----------- */
@media (hover:none){
  .cursor{display:none}
}

/* =====================================================================
   Movimiento reducido: se resuelve todo en su estado final legible
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .grain,.cursor,.fx,.honey,.abeja__path{display:none}
  .ln>i{transform:none}
  .fade-up{opacity:1;transform:none}
  .flor__orchid{--bloom:1;clip-path:none;transform:none;filter:none}
  .flor__glow{opacity:.5}
  .jaguar__img{--reveal:1;transform:none}
  .jaguar__eye{opacity:.7}
  .ritual{height:auto}
  .ritual__pin{position:relative;height:auto;min-height:100svh;padding:14vh 1.5rem}
  .ritual__teal{opacity:1}
  .ritual__jaguar{opacity:.28}
  .rf{opacity:.7}
  .ritual__reveal{opacity:1;position:relative;inset:auto;margin-top:3rem}
  .ritual__bee{opacity:1;left:12%;top:24%}
  .prod__bottle.is-on{opacity:1}
  .abeja__bee{offset-distance:62%}
}