/* ==========================================================================
   FRACTAL — Miel de Origen
   Sistema de diseño derivado del Brand Book (uso de marca).
   Paleta, tipografía y jerarquía tomadas del documento original.
   ========================================================================== */

/* ---------- Fuentes (self-hosted, subset latin) ---------- */
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-300-italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  color-scheme: light;

  /* Tierra */
  --tierra-0:#F7F3EB; --tierra-1:#E9E1D4; --tierra-2:#DCC7AE; --tierra-3:#BDAA8A; --tierra-4:#A08F74;
  /* Miel */
  --miel-0:#F1E7D0;  --miel-1:#F2C17A;  --miel-2:#E8A54A;  --miel-3:#D18B2A;  --miel-4:#C07E1E;
  /* Naturaleza */
  --nat-0:#DCE0D2;   --nat-1:#A7B196;   --nat-2:#6B7F5E;   --nat-3:#3D4D37;   --nat-4:#1E2E1E;
  /* Premium */
  --oro:#B48A2F;     --oro-2:#8C6A30;   --cacao:#3F2E23;   --carbon:#1B1B1B;  --tinta:#0E0E0E;
  /* Variantes de texto: el oro de marca no alcanza contraste AA en tamaños pequeños */
  --oro-text:#7A5E20;      /* etiquetas, eyebrows, enlaces sobre crema  */
  --oro-display:#9B7728;   /* titulares grandes en dorado               */

  /* Roles */
  --bg:            var(--tierra-0);
  --bg-alt:        #FBF8F3;
  --ink:           #23201C;
  --ink-soft:      #5C554C;
  --ink-faint:     #6B6356;
  --rule:          rgba(180,138,47,.22);
  --rule-soft:     rgba(35,32,28,.10);

  /* Tipografía */
  --display:'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --body:'Avenir Next','Avenir','Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --meta:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ritmo */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1480px;
  --section-y: clamp(6rem, 13vh, 11rem);

  /* Curvas */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-weight:400; font-size:clamp(.95rem,.42vw + .84rem,1.06rem);
  line-height:1.72; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:400; text-wrap:balance}
p{margin:0}
::selection{background:var(--miel-1); color:var(--cacao)}
:focus-visible{outline:2px solid var(--oro); outline-offset:3px; border-radius:2px}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:var(--section-y); position:relative }
/* La barra fija mide ~70px: las secciones enlazadas reservan ese espacio al saltar. */
section[id], .origin__scene{ scroll-margin-top:5.6rem }
.grid{ display:grid; gap:clamp(2rem,4vw,4.5rem) }
@media (min-width:900px){ .grid-2{ grid-template-columns:repeat(2,1fr) } }

/* ---------- Tipografía de marca ---------- */
.display{
  font-family:var(--display); font-weight:300; line-height:1.02;
  letter-spacing:.005em; font-size:clamp(2.6rem, 6.4vw, 6.4rem);
}
.display--sm{ font-size:clamp(2rem, 4.2vw, 3.9rem); line-height:1.08 }
.display em{ font-style:italic; color:var(--oro-display) }

/* Copperplate-like: caps muy espaciadas (jerarquía del Brand Book) */
.eyebrow{
  font-family:var(--meta); font-size:.66rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--oro-text);
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::after{ content:''; flex:0 0 3.2rem; height:1px; background:var(--rule) }
.eyebrow--center{ justify-content:center }
.eyebrow--center::before{ content:''; flex:0 0 3.2rem; height:1px; background:var(--rule) }

.caps{
  font-family:var(--meta); text-transform:uppercase;
  letter-spacing:.24em; font-size:.7rem; font-weight:500;
}
.lede{ font-size:clamp(1.02rem,.5vw + .92rem,1.22rem); color:var(--ink-soft); max-width:46ch; line-height:1.78 }
.muted{ color:var(--ink-soft) }
.gold{ color:var(--oro-text) }

/* ---------- Hexágono de marca ---------- */
.hex{ display:block; overflow:visible }
.hex path{ fill:none; stroke:currentColor; stroke-width:6; stroke-linejoin:round }
.hex--draw path{
  stroke-dasharray: var(--len,620); stroke-dashoffset: calc(var(--len,620) * (1 - var(--draw,0)));
}

/* ---------- Botones ---------- */
.btn{
  --bg-btn:var(--cacao); --fg-btn:var(--tierra-0);
  display:inline-flex; align-items:center; gap:.85rem;
  padding:1.05rem 2.1rem; border-radius:999px;
  background:var(--bg-btn); color:var(--fg-btn);
  font-family:var(--meta); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  transition:transform .5s var(--ease-out), background-color .4s var(--ease), color .4s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(63,46,35,.55) }
.btn:active{ transform:translateY(0) }
.btn--gold{ --bg-btn:var(--oro); --fg-btn:#fff }
.btn--ghost{ --bg-btn:transparent; --fg-btn:var(--ink); border:1px solid var(--rule) }
.btn--ghost:hover{ background:var(--oro); color:#fff; border-color:var(--oro) }
.btn--light{ --bg-btn:var(--tierra-0); --fg-btn:var(--nat-4) }
.btn svg{ transition:transform .5s var(--ease-out) }
.btn:hover svg{ transform:translateX(4px) }

/* ---------- Reveal (IntersectionObserver) ---------- */
.js [data-reveal]{
  opacity:0; transform:translateY(var(--rev-y, 26px));
  transition:opacity 1.05s var(--ease-out), transform 1.15s var(--ease-out);
  transition-delay:var(--rev-d, 0ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none }
.js [data-reveal="fade"]{ --rev-y:0px }
.js [data-reveal="scale"]{ transform:translateY(20px) scale(.965) }
.js [data-reveal="scale"].is-in{ transform:none }
.js [data-reveal="clip"]{ opacity:1; clip-path:inset(0 0 100% 0); transform:none; transition:clip-path 1.35s var(--ease-out) }
.js [data-reveal="clip"].is-in{ clip-path:inset(0 0 0 0) }

/* Reveal por línea (títulos manifiesto) */
.line-mask{ display:block; overflow:hidden }
.js .line-mask > span{
  display:block; transform:translateY(105%);
  transition:transform 1.1s var(--ease-out); transition-delay:var(--rev-d,0ms);
}
.is-in .line-mask > span, .line-mask.is-in > span{ transform:none }

@media (prefers-reduced-motion: reduce){
  .js [data-reveal],.js [data-reveal].is-in{opacity:1;transform:none;clip-path:none;transition:none}
  .js .line-mask > span{transform:none;transition:none}
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.05rem var(--gutter);
  transition:background-color .6s var(--ease), backdrop-filter .6s var(--ease),
             border-color .6s var(--ease), transform .7s var(--ease-out), color .5s var(--ease);
  border-bottom:1px solid transparent;
  color:var(--tierra-0);
}
.nav.is-solid{
  background:rgba(247,243,235,.86); backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border-bottom-color:var(--rule-soft); color:var(--ink);
}
.nav.is-hidden{ transform:translateY(-102%) }

.nav__brand{ display:flex; align-items:center; gap:.75rem }
.nav__brand > span{ display:block; line-height:1 }
.nav__brand .hex{ width:20px; color:var(--oro); flex:none }
.nav__brand b{
  display:block; font-family:var(--display); font-weight:400; font-size:1.16rem;
  letter-spacing:.3em; line-height:1.05;
}
.nav__brand small{
  display:block; font-family:var(--meta); font-size:.48rem; font-weight:500;
  letter-spacing:.3em; color:var(--oro-text); margin-top:.3rem; line-height:1;
}
.nav__links{ display:none; gap:2.1rem }
@media (min-width:1040px){ .nav__links{ display:flex } }
.nav__links a{
  font-family:var(--meta); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; position:relative; padding-block:.35rem;
  opacity:.82; transition:opacity .35s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease-out);
}
.nav__links a:hover{ opacity:1 }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }
.nav__cta{ display:flex; align-items:center; gap:1rem; flex:none }
.nav__cta .btn{ padding:.75rem 1.4rem; font-size:.63rem }
@media (max-width:719px){
  .nav{ gap:1rem }
  .nav__cta .btn{ display:none }          /* vive en el menú */
  .nav__brand .hex{ width:17px }
  .nav__brand b{ font-size:1rem; letter-spacing:.24em }
  .nav__brand small{ font-size:.42rem; letter-spacing:.24em }
}
.nav.is-solid .btn--light{ --bg-btn:var(--cacao); --fg-btn:var(--tierra-0) }

.nav__burger{ display:grid; gap:5px; padding:.5rem; margin-right:-.5rem }
@media (min-width:1040px){ .nav__burger{ display:none } }
.nav__burger i{ display:block; width:22px; height:1px; background:currentColor; transition:transform .45s var(--ease-out), opacity .3s }
.nav__burger.is-open i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.nav__burger.is-open i:nth-child(2){ opacity:0 }
.nav__burger.is-open i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

.menu{
  position:fixed; inset:0; z-index:79; background:var(--nat-4); color:var(--tierra-0);
  display:grid; place-items:center; gap:1rem;
  clip-path:circle(0% at calc(100% - 3rem) 2.4rem); pointer-events:none;
  transition:clip-path .85s var(--ease-out);
}
.menu.is-open{ clip-path:circle(150% at calc(100% - 3rem) 2.4rem); pointer-events:auto }
.menu ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; text-align:center }
.menu a{ font-family:var(--display); font-size:clamp(1.8rem,7vw,3rem); font-weight:300; line-height:1.5 }
.menu a:hover{ color:var(--miel-1) }

/* ==========================================================================
   01 — HERO
   ========================================================================== */
.hero{ position:relative; height:100svh; min-height:640px; overflow:clip; background:var(--cacao) }
.hero__media{
  position:absolute; inset:0;
  --shift: 0%; --zoom: 1.02;
  transform:scale(calc(var(--zoom) + .10 * (1 - var(--p,0)))) translate(var(--shift), calc(var(--p,0) * -4vh));
  will-change:transform;
}
.hero__media video,.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 56%;
}
@media (max-width:1023px){
  .hero__media video,.hero__media img{ object-position:center 62% }
  .hero__media{ --zoom:1.04 }
}
/* En teléfono el video no puede llenar la pantalla: recortaría el 74% del encuadre.
   Se ancla abajo en una franja y se funde con el fondo de marca. */
@media (max-width:767px){
  .hero{ background:var(--cacao) }
  .hero__media{
    top:auto; bottom:0; height:66svh; --zoom:1.0;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 9%, #000 26%);
    mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 9%, #000 26%);
  }
  .hero__media video,.hero__media img{ object-position:center 54% }
}
/* En pantallas anchas se desplaza el encuadre para que la botella
   quede a la derecha y el lockup respire a la izquierda. */
@media (min-width:1024px){ .hero__media{ --shift: 12%; --zoom: 1.30 } }
@media (min-width:1500px){ .hero__media{ --shift: 14%; --zoom: 1.34 } }

.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,16,12,.40) 0%, rgba(20,16,12,.06) 22%, rgba(20,16,12,0) 44%,
                            rgba(20,16,12,.18) 72%, rgba(20,16,12,.62) 100%),
    radial-gradient(130% 90% at 12% 52%, rgba(20,16,12,.52) 0%, rgba(20,16,12,.18) 44%, rgba(20,16,12,0) 72%);
}
@media (max-width:1023px){
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(20,16,12,.46) 0%, rgba(20,16,12,.14) 24%, rgba(20,16,12,.1) 48%,
                              rgba(20,16,12,.34) 74%, rgba(20,16,12,.68) 100%),
      radial-gradient(110% 70% at 50% 46%, rgba(20,16,12,.34) 0%, rgba(20,16,12,.1) 55%, rgba(20,16,12,.3) 100%);
  }
}
.hero__inner{
  position:relative; z-index:2; height:100%;
  display:grid; place-items:center; text-align:center; color:var(--tierra-0);
  padding-inline:var(--gutter);
  opacity:calc(1 - var(--p,0) * 1.55);
  transform:translateY(calc(var(--p,0) * -7vh));
  will-change:transform,opacity;
}
@media (max-width:1023px){
  .hero__inner{ place-items:start center; padding-top:calc(13svh + 3.4rem) }
}
@media (min-width:1024px){
  .hero__inner{
    place-items:center start; text-align:left;
    padding-inline:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  }
}
.hero__lockup{ display:grid; justify-items:center; gap:clamp(1.1rem,2.4vw,1.8rem) }
@media (min-width:1024px){ .hero__lockup{ justify-items:start; gap:clamp(1rem,1.8vw,1.5rem) } }
.hero__lockup .hex{ width:clamp(46px,5.2vw,68px); color:var(--miel-1);
  filter:drop-shadow(0 3px 14px rgba(20,16,12,.55)) }
.hero__word{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.9rem,10.5vw,8.2rem); line-height:.94;
  letter-spacing:.17em; text-indent:.17em;
  text-shadow:0 2px 40px rgba(20,16,12,.38);
}
.hero__sub{
  font-family:var(--meta); font-weight:400; text-transform:uppercase;
  letter-spacing:.44em; text-indent:.44em; font-size:clamp(.6rem,1.15vw,.82rem);
  color:var(--miel-1);
}
/* Con el lockup alineado a la izquierda, el text-indent que compensa el tracking
   al centrar empuja la primera letra hacia dentro. Se anula para que el wordmark
   arranque en el mismo margen que el hexágono y el subtítulo. */
@media (min-width:1024px){
  /* -.035em compensa el espacio lateral propio de la «F» (5.5px a este cuerpo),
     para que su trazo caiga en la misma vertical que el hexágono y la «M». */
  .hero__word{ text-indent:0; margin-left:-.035em }
  .hero__sub{ text-indent:0 }
}
.hero__cue{
  position:absolute; left:50%; bottom:clamp(4.2rem,9vh,6rem); translate:-50% 0; z-index:3;
  display:grid; justify-items:center; gap:.85rem; color:rgba(247,243,235,.7);
  opacity:calc(1 - var(--p,0) * 2.6);
}
.hero__cue span{ font-family:var(--meta); font-size:.56rem; letter-spacing:.3em; text-transform:uppercase }
.hero__cue i{ display:block; width:1px; height:46px; background:currentColor; transform-origin:top; animation:cue 2.6s var(--ease) infinite }
@keyframes cue{ 0%{transform:scaleY(0);opacity:0} 22%{opacity:1} 60%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1) translateY(46px);opacity:0} }
@media (prefers-reduced-motion: reduce){ .hero__cue i{animation:none} }

.hero__marquee{
  position:absolute; left:0; right:0; bottom:0; z-index:2; overflow:hidden;
  border-top:1px solid rgba(247,243,235,.16); padding-block:.85rem;
  background:linear-gradient(180deg,rgba(20,16,12,0),rgba(20,16,12,.34));
  opacity:calc(1 - var(--p,0) * 2.2);
}
.marquee__track{ display:flex; gap:3.4rem; width:max-content; animation:slide 38s linear infinite }
@media (max-width:767px){
  .hero__marquee{ padding-block:.65rem }
  .marquee__track{ gap:2.2rem; animation-duration:26s }
  .marquee__track span{ font-size:.52rem; letter-spacing:.24em; gap:2.2rem }
}
.marquee__track span{
  font-family:var(--meta); font-size:.6rem; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(247,243,235,.66); white-space:nowrap;
  display:flex; align-items:center; gap:3.4rem;
}
.marquee__track span::after{ content:'◆'; font-size:.4rem; color:var(--miel-2) }
@keyframes slide{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .marquee__track{animation:none} }

/* ==========================================================================
   02 — MANIFIESTO
   ========================================================================== */
.manifesto{ background:var(--bg); position:relative; overflow:clip;
  padding-bottom:var(--gutter) }

/* Fondo: el panal del sistema gráfico, al límite de lo visible, para que dé
   materia sin competir con el texto. */
.manifesto__bg{ position:absolute; inset:0; pointer-events:none }
.manifesto__bg::before{
  content:''; position:absolute; inset:-10% -4%;
  background:url('../brand/hex-pattern.svg') center top / 92px auto repeat;
  opacity:.07;
  transform:translateY(calc((var(--p,.5) - .5) * -26px));
}
.manifesto > .wrap{ position:relative }

.manifesto__head{ display:grid; gap:clamp(1.8rem,4vw,4.2rem); align-items:start }
@media (min-width:980px){ .manifesto__head{ grid-template-columns:1.02fr .98fr } }

.manifesto__title{
  font-family:var(--display); font-weight:300; line-height:1.0;
  font-size:clamp(2.9rem,7.6vw,6.6rem); letter-spacing:.01em;
  margin-block:1.6rem 0;
}
.manifesto__title .line-mask:nth-child(2) > span{ color:var(--oro-display) }

.manifesto__copy{ display:grid; gap:1.4rem; max-width:46ch }
/* El texto arranca a la altura del titular: el padding salva el eyebrow y
   compensa la diferencia de altura de mayúsculas entre 105px y 19px de cuerpo,
   para que ambas columnas se vean parejas arriba. */
@media (min-width:980px){ .manifesto__copy{ padding-top:clamp(1.5rem,2.9vw,2.9rem) } }
.manifesto__copy strong{ font-weight:500; color:var(--oro-text) }

/* El video del origen es 16:9: va a todo el ancho para que la toma aérea se lea
   completa, en vez de recortarla dentro de una columna. */
.manifesto__video{
  position:relative; margin:clamp(3rem,6.5vw,5.4rem) 0 0; overflow:hidden;
  border-radius:3px; aspect-ratio:16/9; background:var(--nat-4);
  box-shadow:0 44px 90px -56px rgba(63,46,35,.55);
}
.manifesto__video video{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(calc(1.01 + (1 - var(--p,.5)) * .05));
  will-change:transform;
}
.manifesto__video figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(2.4rem,5vw,3.6rem) clamp(1.2rem,3vw,2.2rem) clamp(1rem,2vw,1.4rem);
  font-family:var(--meta); font-size:.62rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(247,243,235,.88);
  background:linear-gradient(180deg, rgba(20,24,18,0), rgba(20,24,18,.62));
}
@media (max-width:620px){
  .manifesto__video{ aspect-ratio:4/3 }
  .manifesto__video figcaption{ font-size:.54rem; letter-spacing:.16em }
}


/* ==========================================================================
   03 — ORIGEN / TRAZABILIDAD (escena sticky)
   ========================================================================== */
.origin{ background:var(--nat-4); color:var(--tierra-0); position:relative }
.origin__scene{ position:relative }
.origin__sticky{
  position:sticky; top:0; height:100svh; display:grid; align-items:center;
  overflow:clip; padding-top:clamp(4.6rem,9vh,6.4rem);
}
@media (max-width:860px){
  .origin__sticky{ align-items:end; padding-bottom:clamp(2rem,6vh,4rem) }
  .origin__head{ margin-bottom:clamp(1.2rem,3vh,2rem) }
  .step p{ font-size:.86rem }
  .origin__bar{ margin-top:1.4rem }
}
.origin__stage{ position:absolute; inset:0 }
.origin__shot{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1s var(--ease), transform 1.6s var(--ease-out);
  transform:scale(1.08);
}
.origin__shot.is-on{ opacity:1; transform:scale(1) }
.origin__shot img{ width:100%; height:100%; object-fit:cover }
.origin__shot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(30,46,30,.94) 0%, rgba(30,46,30,.86) 30%, rgba(30,46,30,.72) 52%, rgba(30,46,30,.2) 78%, rgba(30,46,30,.42) 100%);
}
@media (max-width:860px){ .origin__shot::after{ background:linear-gradient(180deg, rgba(30,46,30,.8) 0%, rgba(30,46,30,.62) 40%, rgba(30,46,30,.92) 100%) } }
.origin__content{ position:relative; z-index:2; width:100%; }
.origin__head{ max-width:min(100%, 43rem); margin-bottom:clamp(1.5rem,5vh,3.4rem) }
.origin__head .eyebrow{ color:var(--miel-1) }
.origin__head .eyebrow::after{ background:rgba(242,193,122,.4) }
.origin__head h2{
  font-family:var(--display); font-weight:300; line-height:1.04; margin-top:1.1rem;
  /* La escena es sticky y de alto fijo: el titular cede tamaño cuando la ventana
     es baja, para que los pasos no se corten por abajo. */
  font-size:clamp(1.95rem, min(5.2vw, 9.6svh), 4.6rem);
}

.origin__steps{ display:grid; gap:0; max-width:min(100%, 43rem) }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start;
  padding-block:clamp(.8rem, 2.1svh, 1.15rem); border-top:1px solid rgba(247,243,235,.16);
  opacity:.34; transition:opacity .7s var(--ease);
}
.step:last-child{ border-bottom:1px solid rgba(247,243,235,.16) }
.step.is-on{ opacity:1 }
.step__n{
  font-family:var(--meta); font-size:.66rem; letter-spacing:.18em; color:var(--miel-1);
  padding-top:.42rem; min-width:2.4rem;
}
.step h3{ font-family:var(--display); font-weight:400; line-height:1.22;
  font-size:clamp(1.22rem, min(2.5vw, 3.3svh), 1.95rem) }
.step p{
  color:rgba(247,243,235,.8); font-size:clamp(.9rem, 2.1svh, 1.04rem); line-height:1.62; margin-top:.45rem;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .8s var(--ease-out), opacity .6s var(--ease), margin-top .6s var(--ease);
}
.step.is-on p{ max-height:clamp(5rem, 16svh, 9.5rem); opacity:1 }
.origin__bar{ margin-top:clamp(1.1rem,2.6svh,2.4rem); height:1px; background:rgba(247,243,235,.16); position:relative; max-width:min(100%, 43rem) }
.origin__bar i{ position:absolute; inset:0 auto 0 0; background:var(--miel-1); width:calc(var(--sp,0) * 100%) }

/* ==========================================================================
   04 — PRODUCTO (video vertical sticky)
   ========================================================================== */
.product{ background:var(--bg); position:relative; overflow:clip }
.product__scene{ position:relative }
.product__layout{ display:grid; gap:clamp(2rem,5vw,5rem) }
@media (min-width:980px){ .product__layout{ grid-template-columns:.92fr 1.08fr; align-items:start } }

.product__stickycol{ position:relative; isolation:isolate }
@media (min-width:980px){
  .product__stickycol{ position:sticky; top:0; height:100svh; display:grid; place-items:center }
}
/* Avance de la secuencia: cinco marcas que se encienden conforme pasan las fichas. */
.product__pasos{
  display:none; list-style:none; margin:0; padding:0;
  position:absolute; left:0; top:50%; translate:0 -50%;
  grid-auto-flow:row; gap:.7rem;
}
@media (min-width:1180px){ .product__pasos{ display:grid } }
.product__pasos li{
  width:2px; height:34px; border-radius:2px; background:var(--rule-soft);
  position:relative; overflow:hidden;
}
.product__pasos li::after{
  content:''; position:absolute; inset:0; background:var(--oro);
  transform:scaleY(0); transform-origin:top;
  transition:transform .6s var(--ease-out);
}
.product__pasos li.is-on::after{ transform:scaleY(1) }

.product__tube{
  position:relative; width:min(100%,370px); aspect-ratio:9/16; border-radius:3px; overflow:hidden;
  background:var(--tierra-1);
  box-shadow:0 40px 90px -46px rgba(63,46,35,.55), 0 2px 0 rgba(255,255,255,.5) inset;
  transform:translateY(calc((var(--sp,.5) - .5) * -28px)) scale(calc(.98 + var(--sp,.5) * .04));
  will-change:transform;
}
.product__tube video,.product__tube img.poster{ width:100%; height:100%; object-fit:cover }
.product__tube::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:0 0 90px 20px rgba(247,243,235,.28) inset;
}
.product__hexframe{
  position:absolute; left:50%; top:50%; width:min(168%,660px); aspect-ratio:100/112;
  translate:-50% -50%; color:var(--oro); opacity:.14; pointer-events:none; z-index:0;
  transform:rotate(calc(var(--sp,0) * 22deg));
}
.product__hexframe path{ stroke-width:.7 }
.product__fill{
  position:absolute; left:0; right:0; bottom:0; pointer-events:none;
  height:calc(var(--sp,0) * 62%);
  background:linear-gradient(180deg, rgba(232,165,74,.0), rgba(209,139,42,.30) 30%, rgba(192,126,30,.42));
  mix-blend-mode:multiply; transition:height .1s linear;
}

.product__specs{ display:grid; gap:clamp(2.4rem,5vh,4rem); padding-block:clamp(2rem,10vh,8rem) }
.spec{ position:relative; display:grid; gap:.9rem; max-width:44ch; align-content:center }
@media (min-width:980px){
  .product__specs{ gap:0; padding-block:0 }
  .spec{ min-height:88svh; padding-block:6vh; max-width:46ch }
}

/* Número de ficha: marca de agua que ordena la secuencia y da escala al vacío. */
.spec__num{
  position:absolute; top:0; right:0; z-index:0; pointer-events:none;
  font-family:var(--display); font-weight:300; line-height:1;
  font-size:clamp(5rem,13vw,11rem); color:var(--oro);
  opacity:.09; letter-spacing:-.02em;
  transform:translate(18%, -24%);
}
@media (max-width:979px){ .spec__num{ font-size:clamp(3.4rem,16vw,6rem); transform:translate(8%,-30%) } }
.spec > *:not(.spec__num){ position:relative; z-index:1 }

/* Dato suelto por ficha: una cifra que se lee de un vistazo. */
.spec__dato{
  display:grid; gap:.35rem; margin-top:.6rem; padding-left:1.1rem;
  border-left:1px solid var(--rule);
}
.spec__dato b{
  font-family:var(--display); font-weight:300; line-height:1;
  font-size:clamp(2rem,3.4vw,2.9rem); color:var(--oro-display);
}
.spec__dato span{
  font-family:var(--meta); font-size:.62rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}

/* Fotografía de apoyo: entra desplazada y se endereza al avanzar el scroll. */
.spec__foto{
  margin:clamp(1.4rem,3vw,2.2rem) 0 0; overflow:hidden; border-radius:2px;
  background:var(--tierra-1); aspect-ratio:4/3; width:min(100%, 24rem);
  box-shadow:0 28px 60px -44px rgba(63,46,35,.6);
}
.spec__foto--der{ justify-self:end }
.spec__foto img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08) translateY(calc((var(--sp,.5) - .5) * -18px));
  will-change:transform;
}

.spec__meta{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.4rem }
.spec__k{ font-family:var(--meta); font-size:.62rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--oro-text) }
.spec h3{ font-family:var(--display); font-weight:300; font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.1 }
.spec h3 em{ font-style:italic; color:var(--oro-display) }
.spec p{ color:var(--ink-soft); line-height:1.76 }
.chip{
  font-family:var(--meta); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.5rem .9rem; border:1px solid var(--rule); border-radius:999px; color:var(--ink-soft);
}

/* Packshot + hotspots */
.packshot{ background:var(--bg-alt); position:relative; overflow:clip }
.packshot__grid{ display:grid; gap:clamp(2.5rem,5vw,5rem); align-items:center }
@media (min-width:900px){ .packshot__grid{ grid-template-columns:1fr 1fr } }
.packshot__stage{ position:relative; display:grid; place-items:center; padding-block:2rem }
.packshot__stage::before{
  content:''; position:absolute; width:min(74%,400px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(242,193,122,.58), rgba(232,165,74,.14) 46%, rgba(242,193,122,0) 70%);
  transform:translateY(6%) scale(calc(.9 + var(--p,.5) * .22));
}
.packshot__bottle{
  position:relative; aspect-ratio:565/1400;
  height:min(68svh, 640px); width:auto; max-width:min(86%,300px);
  filter:drop-shadow(0 46px 60px rgba(63,46,35,.3));
  transform:translateY(calc((var(--p,.5) - .5) * -40px));
  will-change:transform;
}
.packshot__bottle img{ width:100%; height:100% ; object-fit:contain }
.hotspot{
  position:absolute; display:grid; place-items:center; width:26px; height:26px; z-index:3;
}
.hotspot i{
  width:9px; height:9px; border-radius:50%; background:var(--oro); position:relative;
}
.hotspot i::after{
  content:''; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--oro);
  opacity:.5; animation:ping 3s var(--ease) infinite;
}
@keyframes ping{ 0%{transform:scale(.6);opacity:.65} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce){ .hotspot i::after{animation:none} }
.hotspot b{
  position:absolute; left:140%; top:50%; translate:0 -50%; white-space:nowrap;
  font-family:var(--meta); font-size:.6rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  background:var(--cacao); color:var(--tierra-0); padding:.5rem .8rem; border-radius:3px;
  opacity:0; transform:translateX(-6px); transition:opacity .45s var(--ease), transform .45s var(--ease-out);
  pointer-events:none;
}
.hotspot:hover b, .hotspot:focus-visible b{ opacity:1; transform:translateX(0) }
.hotspot--left b{ left:auto; right:140%; transform:translateX(6px) }
.hotspot--left:hover b{ transform:translateX(0) }

.facts{ display:grid; gap:0; margin-top:2rem; border-top:1px solid var(--rule-soft) }
.fact{ display:grid; grid-template-columns:1fr auto; gap:1rem; padding-block:.95rem; border-bottom:1px solid var(--rule-soft) }
.fact dt{ font-family:var(--meta); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint) }
.fact dd{ margin:0; font-family:var(--display); font-size:1.12rem; text-align:right }

/* ==========================================================================
   05 — NOTAS DE CATA
   ========================================================================== */
.tasting{ background:var(--cacao); color:var(--tierra-1); position:relative; overflow:clip }
.tasting__bg{ position:absolute; inset:0; opacity:.46 }
.tasting__bg img{ width:100%; height:112%; object-fit:cover; transform:translateY(calc(var(--p,.5) * -8%)) }
.tasting__bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--cacao) 26%, rgba(63,46,35,.86) 52%, rgba(63,46,35,.52) 100%),
             linear-gradient(180deg, var(--cacao), rgba(63,46,35,0) 22%, rgba(63,46,35,0) 74%, var(--cacao)) }
.tasting > .wrap{ position:relative; z-index:2 }
.tasting__grid{ display:grid; gap:clamp(2.6rem,6vw,5rem) }
@media (min-width:900px){ .tasting__grid{ grid-template-columns:.9fr 1.1fr; align-items:center } }
.tasting h2{ font-family:var(--display); font-weight:300; font-size:clamp(2.3rem,5vw,4.2rem); line-height:1.04; margin-top:1.1rem }
.tasting .eyebrow{ color:var(--miel-1) }
.tasting .eyebrow::after{ background:rgba(242,193,122,.4) }
.tasting__note{ color:rgba(233,225,212,.74); margin-top:1.4rem; max-width:40ch }
.scales{ display:grid; gap:1.5rem }
.scale{ display:grid; gap:.6rem }
.scale__row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem }
.scale__row b{ font-family:var(--meta); font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase }
.scale__row span{ font-family:var(--display); font-style:italic; font-size:1rem; color:var(--miel-1) }
.scale__bar{ height:2px; background:rgba(233,225,212,.18); position:relative; overflow:hidden }
.scale__bar i{
  position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--miel-2),var(--miel-1));
  width:0; transition:width 1.5s var(--ease-out); transition-delay:var(--rev-d,0ms);
}
.is-in .scale__bar i{ width:calc(var(--v,50) * 1%) }
.tasting__pair{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2.4rem }
.tasting__pair .chip{ border-color:rgba(233,225,212,.22); color:rgba(233,225,212,.82) }

/* ==========================================================================
   06 — CERTIFICACIONES
   ========================================================================== */
.certs{ background:var(--bg); padding-block:clamp(3.4rem,7vw,5.4rem); border-block:1px solid var(--rule-soft) }
.certs__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(1.6rem,3vw,2.6rem) }
.cert{ display:grid; justify-items:center; text-align:center; gap:.85rem }
.cert svg{ width:34px; height:34px; color:var(--oro) }
.cert span{ font-family:var(--meta); font-size:.58rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); line-height:1.7 }

/* ==========================================================================
   07 — SAVE THE BEES
   ========================================================================== */
.bees{ background:var(--nat-4); color:var(--tierra-0); position:relative; overflow:clip }
.bees__bg{ position:absolute; inset:0; opacity:.2 }
.bees__bg img{ width:100%; height:116%; object-fit:cover; transform:translateY(calc(var(--p,.5) * -10%)) }
.bees__bg::after{ content:''; position:absolute; inset:0; background:radial-gradient(90% 70% at 30% 50%, rgba(30,46,30,.62), var(--nat-4) 78%) }
.bees > .wrap{ position:relative; z-index:2 }
.bees__grid{ display:grid; gap:clamp(3rem,6vw,5.5rem); align-items:center }
@media (min-width:900px){ .bees__grid{ grid-template-columns:.85fr 1.15fr } }
.bees__seal{ justify-self:center; width:min(100%,330px); position:relative }
.bees__seal::before{
  content:''; position:absolute; inset:-9%; border-radius:50%;
  background:radial-gradient(circle, rgba(242,193,122,.16), rgba(242,193,122,0) 66%);
}
.bees__seal img{
  position:relative; width:100%; height:auto;
  animation:sealspin 72s linear infinite;
}
@keyframes sealspin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .bees__seal img{animation:none} }
.bees h2{
  font-family:var(--display); font-weight:300; font-size:clamp(2.1rem,4.6vw,3.8rem);
  line-height:1.1; letter-spacing:.02em; text-transform:uppercase; color:var(--miel-1);
}
.bees__copy{ display:grid; gap:1.3rem; margin-top:1.8rem; max-width:52ch; color:rgba(247,243,235,.78) }
.bees__copy strong{ color:var(--tierra-0); font-weight:500 }
.bees__pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.6rem; margin-top:2.8rem; padding-top:2.2rem; border-top:1px solid rgba(247,243,235,.16) }
.bees__pillars div b{ display:block; font-family:var(--meta); font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--miel-1); margin-bottom:.5rem }
.bees__pillars div p{ font-size:.88rem; line-height:1.62; color:rgba(247,243,235,.66) }

/* ==========================================================================
   08 — FAQ
   ========================================================================== */
.faq{ background:var(--bg) }
.faq__grid{ display:grid; gap:clamp(2.4rem,5vw,4.5rem) }
@media (min-width:900px){ .faq__grid{ grid-template-columns:.7fr 1.3fr; align-items:start } }
.faq__list{ border-top:1px solid var(--rule-soft) }
.qa{ border-bottom:1px solid var(--rule-soft) }
.qa__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.5rem; text-align:left;
  font-family:var(--display); font-size:clamp(1.08rem,1.9vw,1.4rem); font-weight:400; line-height:1.35;
  transition:color .4s var(--ease);
}
.qa__q:hover{ color:var(--oro) }
.qa__q i{ position:relative; flex:none; width:15px; height:15px }
.qa__q i::before,.qa__q i::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1px; background:var(--oro);
  transition:transform .5s var(--ease-out);
}
.qa__q i::after{ transform:rotate(90deg) }
.qa.is-open .qa__q i::after{ transform:rotate(0deg) }
.qa__a{ overflow:hidden; height:0; transition:height .6s var(--ease-out) }
.qa__a > div{ padding-bottom:1.6rem; color:var(--ink-soft); max-width:62ch; line-height:1.78 }

/* ==========================================================================
   09 — CONTACTO / MAYOREO
   ========================================================================== */
.trade{ background:var(--tierra-1); position:relative; overflow:clip }
.trade__grid{ display:grid; gap:clamp(2.6rem,6vw,5rem) }
@media (min-width:980px){ .trade__grid{ grid-template-columns:1fr 1fr; align-items:center } }
.trade h2{ font-family:var(--display); font-weight:300; font-size:clamp(2.2rem,4.8vw,3.9rem); line-height:1.06; margin-top:1.1rem }
.trade__points{ display:grid; gap:1.05rem; margin-top:2rem; list-style:none; padding:0 }
.trade__points li{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; color:var(--ink-soft); font-size:.95rem }
.trade__points svg{ width:15px; color:var(--oro); margin-top:.42rem; flex:none }

.form{ display:grid; gap:1.05rem; background:var(--bg-alt); padding:clamp(1.6rem,3.5vw,2.6rem); border-radius:3px; box-shadow:0 30px 70px -48px rgba(63,46,35,.5) }
.form__row{ display:grid; gap:1.05rem }
@media (min-width:560px){ .form__row--2{ grid-template-columns:1fr 1fr } }
.field{ display:grid; gap:.5rem }
.field label{ font-family:var(--meta); font-size:.6rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint) }
.field input,.field select,.field textarea{
  font:inherit; font-size:.95rem; color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--rule-soft); padding:.6rem 0; border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:84px }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--oro) }
/* Cierre del formulario: centrado bajo el botón, a un cuerpo que se lea de verdad. */
.form__note{
  font-family:var(--meta); font-size:.86rem; color:var(--ink-soft);
  line-height:1.6; text-align:center; margin-top:.2rem;
}
.form__note a{ font-weight:500; border-bottom:1px solid var(--rule); transition:border-color .35s var(--ease) }
.form__note a:hover{ border-bottom-color:var(--oro-text) }
.form__status{ font-family:var(--meta); font-size:.74rem; color:var(--oro-text); min-height:1.2em; text-align:center }

/* ==========================================================================
   10 — NEWSLETTER + FOOTER
   ========================================================================== */
.cta-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.4rem }
.news{ background:var(--bg); text-align:center; border-top:1px solid var(--rule-soft) }
.news__inner{ display:grid; justify-items:center; gap:1.5rem; max-width:52ch; margin-inline:auto }
.news__bee{ width:74px }
.news h2{ font-family:var(--display); font-weight:300; font-size:clamp(1.9rem,4vw,3rem); line-height:1.1 }
.news form{ display:flex; gap:.6rem; width:min(100%,460px); flex-wrap:wrap; justify-content:center }
.news input{
  flex:1 1 220px; font:inherit; font-size:.92rem; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid var(--rule); padding:.8rem .2rem; text-align:center;
}
.news input:focus{ outline:none; border-bottom-color:var(--oro) }

.foot{ background:var(--tinta); color:rgba(247,243,235,.62); padding-block:clamp(3.4rem,7vw,5rem) }
.foot__top{ display:grid; gap:clamp(2.4rem,5vw,4rem) }
@media (min-width:880px){ .foot__top{ grid-template-columns:1.3fr 1fr 1fr 1fr } }
.foot__brand .hex{ width:34px; color:var(--oro) }
.foot__brand b{ display:block; font-family:var(--display); font-size:1.5rem; letter-spacing:.3em; color:var(--tierra-0); margin-top:1rem }
.foot__brand small{ display:block; font-family:var(--meta); font-size:.54rem; letter-spacing:.3em; color:var(--miel-2); margin-top:.4rem }
.foot__brand p{ margin-top:1.4rem; font-size:.88rem; line-height:1.7; max-width:32ch }
.foot h5{ font-family:var(--meta); font-size:.6rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--tierra-0); margin-bottom:1.1rem }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem }
.foot a{ font-size:.88rem; transition:color .35s var(--ease) }
.foot a:hover{ color:var(--miel-1) }
.foot__bottom{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.8rem; border-top:1px solid rgba(247,243,235,.12);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;
  font-family:var(--meta); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
}
.foot__bottom nav{ display:flex; gap:1.6rem; flex-wrap:wrap }
.foot .gold{ color:var(--oro) }
.nav:not(.is-solid) .nav__brand small{ color:var(--miel-1) }

/* Barra de progreso global */
.progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:90; background:transparent; pointer-events:none }
.progress i{ display:block; height:100%; width:calc(var(--page,0) * 100%); background:linear-gradient(90deg,var(--oro),var(--miel-1)) }

/* Preloader */
.intro{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:var(--bg); transition:opacity .9s var(--ease), visibility .9s;
}
.intro.is-done{ opacity:0; visibility:hidden }
.intro .hex{ width:52px; color:var(--oro) }
.intro .hex path{ stroke-dasharray:620; stroke-dashoffset:620; animation:draw 1.5s var(--ease-out) forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }


/* ==========================================================================
   AJUSTES PARA MÓVIL
   Van al final del archivo, después de todas las definiciones base, para que
   ganen por orden de cascada. Nada de aquí toca el escritorio: cada regla vive
   dentro de una consulta de ancho máximo.
   ========================================================================== */

/* El producto — en una columna estrecha el video pegado se comía media pantalla
   y las fichas pasaban por detrás. Aquí el video va en el flujo, una sola vez. */
@media (max-width:979px){
  .product__stickycol{ position:static; padding:0 0 clamp(1.6rem,5vw,2.4rem); background:none }
  .product__tube{ width:min(74%,300px); margin-inline:auto }
  .product__hexframe{ width:min(132%,430px); opacity:.16 }
  .product__specs{ padding-block:0; gap:clamp(3rem,9vw,4.4rem) }
  .spec{ min-height:0; padding-block:0; max-width:none }
  .spec__foto{ width:100% }
  .spec__foto--der{ justify-self:stretch }
}

/* Packshot — las etiquetas que abrían hacia la izquierda se salían de pantalla.
   En móvil todas abren a la derecha, donde sí hay sitio. */
@media (max-width:700px){
  .hotspot--left b{ left:140%; right:auto; transform:translateX(-6px) }
  .hotspot--left:hover b, .hotspot--left:focus-visible b{ transform:translateX(0) }
  .hotspot b{ font-size:.55rem; padding:.42rem .62rem; letter-spacing:.12em }
}

/* Hero en teléfono — el lockup caía demasiado bajo y dejaba un hueco café
   entre el nav y el hexágono. Sube ~51px para ocupar esa franja. La pista
   «Desliza» se retira: en vertical su línea cruzaba la etiqueta de la botella.
   (Las dos declaraciones que vivían en el bloque de 767px más arriba estaban
   anuladas por reglas posteriores; se movieron aquí, donde sí ganan.) */
@media (max-width:767px){
  /* Techo del hexágono a 70px: es donde cae la línea pedida, justo bajo el nav.
     Valor fijo, sin componente svh, precisamente porque el nav mide 63.6px en
     cualquier teléfono: si el relleno dependiera del alto de pantalla, en una
     iPhone SE (4svh = 27px) el hexágono se metería dentro del nav. Fijo, la
     holgura es la misma en todas: 6.4px de la caja del nav y 24px de su
     contenido visible, que termina en y=45.8. */
  .hero__inner{ padding-top:70px }
  .hero__cue{ display:none }
}

/* Huérfanos de la rejilla en teléfono — «auto-fit» da dos columnas y el último
   elemento (3º de los pilares, 5º de los sellos) se quedaba solo pegado a la
   izquierda. Al ocupar la fila completa su centro cae en el eje del bloque.
   Los sellos ya centran su contenido, así que basta con que abarquen la fila. */
@media (max-width:767px){
  .certs__row > .cert:last-child{ grid-column:1 / -1 }
}
/* Los pilares llevan el texto alineado a la izquierda, así que además hay que
   centrarlo. Por debajo de 366px la rejilla cae a una columna y todos los
   pilares se apilan: ahí no se centra, para no descuadrar el único huérfano. */
@media (min-width:366px) and (max-width:767px){
  .bees__pillars > div:last-child{ grid-column:1 / -1; text-align:center }
  /* A todo el ancho la frase rompía en una línea de borde a borde y un resto
     corto. Se le acorta la medida para que las dos líneas queden parejas. */
  .bees__pillars > div:last-child p{ max-width:17rem; margin-inline:auto; text-wrap:balance }
}

/* Borde del fondo café en teléfono — el video arrancaba en 259px y su velo se
   estiraba 159px más, lavando la parte alta de la botella. Se sube el borde a
   la mitad del wordmark y se acorta el velo de 159px a ~94px.
   El degradado no son tres paradas sino once, que trazan una smootherstep
   (6t⁵−15t⁴+10t³) sobre el 17% superior del video. Con tres paradas la
   pendiente se multiplicaba por 4.7 al llegar al 8% y moría en seco en el 14%:
   esos dos quiebres se veían como pliegues en el café. La smootherstep arranca
   y termina con pendiente nula, así que no hay borde que delate dónde empieza
   ni dónde acaba la mezcla.
   El alto se dejó en 89.5svh − 144px, que pone el borde en 0.0603·alto + 151.2:
   202px en una 390x844. Se fijó cuando el wordmark estaba 16px más abajo, así
   que ahora el borde cae ~16px por debajo de su centro, no sobre él. Se mantiene
   a propósito: la posición del borde ya estaba aprobada y el wordmark se movió
   después. La distancia entre ambos es constante en cualquier teléfono. */
@media (max-width:767px){
  .hero__media{
    height:calc(89.5svh - 144px);
    -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.009) 1.7%,
      rgba(0,0,0,.058) 3.4%,
      rgba(0,0,0,.163) 5.1%,
      rgba(0,0,0,.317) 6.8%,
      rgba(0,0,0,.5) 8.5%,
      rgba(0,0,0,.683) 10.2%,
      rgba(0,0,0,.837) 11.9%,
      rgba(0,0,0,.942) 13.6%,
      rgba(0,0,0,.991) 15.3%,
      #000 17%);
            mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.009) 1.7%,
      rgba(0,0,0,.058) 3.4%,
      rgba(0,0,0,.163) 5.1%,
      rgba(0,0,0,.317) 6.8%,
      rgba(0,0,0,.5) 8.5%,
      rgba(0,0,0,.683) 10.2%,
      rgba(0,0,0,.837) 11.9%,
      rgba(0,0,0,.942) 13.6%,
      rgba(0,0,0,.991) 15.3%,
      #000 17%);
  }
}