/* ---- Fonts ---- */
@font-face{font-family:"Gatwick Jet";src:url("../assets/fonts/PPGatwick-JetExtralight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Gatwick Jet";src:url("../assets/fonts/PPGatwick-JetSemibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Gatwick Jumbo";src:url("../assets/fonts/PPGatwick-JumboExtralight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Gatwick Glider";src:url("../assets/fonts/PPGatwick-GliderExtralight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Pragati Narrow";src:url("../assets/fonts/PragatiNarrow-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Fraunces Local";src:url("../assets/fonts/Fraunces-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --jet:"Gatwick Jet",sans-serif;
  --jumbo:"Gatwick Jumbo",serif;
  --glider:"Gatwick Glider",serif;
  --pragati:"Pragati Narrow",sans-serif;
  --fraunces:"Fraunces Local",serif;
  --gold:#e5c95a; --cream:#d7ceac; --pale:#dcce98; --steel:#9fb0bc;
  --special:#081d20;
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{background:#07111b;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

/* ---- global interaction polish ---- */
a,button,input,[tabindex]{-webkit-tap-highlight-color:rgba(229,201,90,.18)}
a,button,input[type="submit"],[role="button"]{touch-action:manipulation}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.frame{scroll-margin-top:84px}
.origen-headline,.proceso-headline,.botella-headline,.edicion-headline,
.donde-headline,.manifiesto-line,.method-title{text-wrap:balance}

/* ---- skip link (first tab stop) ---- */
.skip-link{position:fixed;left:12px;top:-120px;z-index:100;background:var(--gold);color:#07111b;
  font-family:var(--pragati);font-size:12px;letter-spacing:1px;text-transform:uppercase;
  padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .2s var(--ease)}
.skip-link:focus{top:calc(12px + env(safe-area-inset-top,0))}
.fraunces-wonk{font-variation-settings:"SOFT" 0,"WONK" 1}
/* Accessibility: hide visually, keep for screen readers (h1 + form status). */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Stage : stacked fixed-1440 frames ---- */
/* Tier A/B responsive scaling wrapper.
   The 1440px artboard is locked. ≥1440 renders 1:1 (no scale). 1024–1440 is
   scaled down with transform; JS keeps #stage-scaler height = unscaled height ×
   scale so document scroll-height stays correct (scroll progress + observers). */
#stage-scaler{position:relative;width:100%;overflow:hidden}
#stage{position:relative;width:1440px;margin:0 auto;color:var(--cream);transform-origin:top center;will-change:transform}
@media (max-width:1439.98px) and (min-width:1024px){
  #stage{transform:scale(var(--stage-scale,1))}
}
#top{position:absolute;top:0;left:0}
.frame{position:relative;width:1440px;overflow:hidden}
.frame-hero{height:1524px;background:#07111b}
.frame-dualidad{height:887px;background:linear-gradient(180deg,#0b1a29 0%,#102235 50%,#070f18 100%)}
.frame-formula{height:1940px;background:linear-gradient(180deg,#0b1a29 0%,#102235 50%,#070f18 100%)}

/* ===== FRAME 1 · HERO ===== */
.hero-bg{position:absolute;left:-84px;top:-6px;width:1607px;height:1608px;object-fit:cover}
.gin-desc{opacity:.75;color:var(--pale)}
.i-1{left:0;top:0}.i-2{left:0;top:21px}.i-3{left:286px;top:0}.i-4{left:259px;top:21px}

.scroll-cue{font-family:var(--pragati);font-size:10.5px;letter-spacing:.735px;color:var(--steel)}
.lead{font-family:var(--glider);font-weight:200;font-size:32px;line-height:1.38;color:rgba(215,206,172,.9);filter:blur(2px)}
.hud-lot{font-family:var(--pragati);font-size:10.5px;letter-spacing:2.52px;color:var(--steel)}
.hud-lot span{color:var(--pale)}

/* ===== site header (clear, always-visible nav · transparent over hero) ===== */
.site-header{position:fixed;left:0;right:0;top:0;z-index:60;
  padding-top:env(safe-area-inset-top,0);
  background:rgba(7,17,27,.72);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(215,206,172,.10);
  transition:background .45s var(--ease),border-color .45s var(--ease)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:16px calc(86px + env(safe-area-inset-right,0)) 16px calc(147px + env(safe-area-inset-left,0))}
.header-mark{font-family:var(--jet);font-weight:200;font-size:17px;letter-spacing:8px;
  text-transform:uppercase;color:var(--gold);
  text-decoration:none;transition:opacity .4s var(--ease)}
.header-nav{display:flex;gap:30px}
.header-nav a{font-family:var(--pragati);font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--cream);text-decoration:none;opacity:.66;padding:6px 0;
  border-bottom:1px solid transparent;
  transition:opacity .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.header-nav a:hover{opacity:1;color:var(--gold)}
.header-nav a.is-current{opacity:1;color:var(--gold);border-bottom-color:rgba(229,201,90,.5)}
.header-end{display:flex;align-items:center;gap:22px}
.header-index{font-family:var(--pragati);font-size:11px;letter-spacing:1.6px;color:var(--cream);white-space:nowrap;transition:opacity .4s var(--ease)}
.header-index span{color:var(--gold)}
.header-cta{font-family:var(--pragati);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:#07111b;text-decoration:none;white-space:nowrap;
  background:var(--grad-gold);border:1px solid transparent;border-radius:20px;padding:8px 18px;
  box-shadow:0 2px 12px rgba(229,201,90,.18);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.header-cta:hover{background:var(--gold);color:#07111b;border-color:var(--gold)}
/* transparent treatment while over the hero (no duplicate wordmark) */
.site-header.over-hero{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.site-header.over-hero .header-mark{opacity:0;pointer-events:none}
.site-header.over-hero .header-index{opacity:0}

.rail{position:fixed;left:0;top:0;height:100vh;width:170px;z-index:55;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.rail.is-visible{opacity:1}
.rail .rail-track{position:absolute;left:var(--rail-x,115px);top:0;bottom:0;width:1px;background:rgba(215,206,172,.14)}
.rail .rail-fill{position:absolute;left:var(--rail-x,115px);top:0;width:1px;height:0;background:var(--gold);box-shadow:0 0 14px 1px rgba(229,201,90,.35)}
.rail .rail-dot{position:absolute;left:calc(var(--rail-x,115px) - 3.5px);top:0;width:7px;height:7px;transform:translateY(-50%)}
.rail .rail-label{position:absolute;left:calc(var(--rail-x,115px) - 8px);top:138px;font-family:var(--pragati);font-size:10.5px;letter-spacing:2.52px;color:var(--gold);white-space:nowrap;transform-origin:left top;transform:rotate(90deg)}

.hud-lot-fixed{position:fixed;right:86px;bottom:32px;z-index:60;opacity:0;transition:opacity .6s var(--ease)}
.hud-lot-fixed.is-visible{opacity:1}

/* ===== reveal utility (shared by new sections) ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.reveal.is-visible{opacity:1;transform:none;filter:none}

/* ===== shared placeholder slot (Thomas supplies assets later) ===== */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border:1px dashed rgba(215,206,172,.32);background:rgba(11,26,41,.35);color:var(--steel);font-family:var(--pragati);font-size:10.5px;letter-spacing:2.52px;text-transform:uppercase;padding:24px;line-height:1.7}
.ph span{display:block;color:rgba(159,176,188,.55);font-size:9px;letter-spacing:1.5px}
/* filled placeholder → real image fills the slot (bottle render, special edition) */
.ph.is-filled{border:none;background:none;padding:0;overflow:visible}
/* Feather the photo edges so the studio-navy backdrop of the render melts into the section
   instead of cutting a hard rectangle against the tinted background (§07 teal, etc.). */
.ph.is-filled img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:radial-gradient(78% 72% at 50% 46%, #000 30%, transparent 94%);
  mask-image:radial-gradient(78% 72% at 50% 46%, #000 30%, transparent 94%)}

/* active botanical (scroll scrub) */
.bot.is-active{opacity:1}
.icn{transition:filter .5s var(--ease),transform .5s var(--ease)}
.icn.is-active{filter:saturate(1.25) brightness(1.15)}

/* ===== FRAME 2 · UMBRAL ===== */
.glow{position:absolute;pointer-events:none}
.glow-s2{left:520px;top:-340px;width:1500px;height:1100px}
.label-img{position:absolute;left:142.07px;top:110.77px;width:525.221px;height:767.631px;object-fit:cover}
.sabiduria,.ambicion{position:absolute;font-family:var(--jumbo);font-weight:200;font-size:40.32px;line-height:.86;letter-spacing:-2.016px;text-transform:capitalize}
.sabiduria{left:119.21px;top:386.22px;color:var(--cream)}
.ambicion{left:532.85px;top:601.99px;color:#8b856c}
.cue-2{position:absolute;left:187px;top:866px;font-family:var(--pragati);font-size:10.5px;letter-spacing:.735px;color:var(--steel)}
.lead-ghost{position:absolute;left:187px;top:904px;width:541px;color:rgba(215,206,172,.2)}
.poem{position:absolute;left:873px;top:404px;width:440px;font-family:var(--fraunces);font-weight:400;font-size:19px;line-height:1.6;color:var(--pale);font-variation-settings:"SOFT" 0,"WONK" 1}

/* ===== FRAME 3 · LA FÓRMULA ===== */
.glow-s3{left:520px;top:-340px;width:1500px;height:1100px}
.method-title{position:absolute;left:187px;top:199px;font-family:var(--jumbo);font-weight:200;font-size:52px;line-height:1.04;letter-spacing:24px;text-transform:uppercase;color:#b6b080;white-space:nowrap}
.botanicos{position:absolute;left:193px;top:310px;width:1006px;display:flex;flex-direction:column;gap:15px}
/* Each row: DEFAULT = dim, compact (num + name + role only, copy + image collapsed).
   ACTIVE (revealed on scroll) = full opacity, copy expands, illustration crossfades in
   on the right. align-items:center so the illustration sits centred against the text. */
.bot{display:flex;gap:32px;align-items:center;width:1006px;padding:18px 0;border-bottom:1px solid rgba(215,206,172,.16);opacity:.26;transform:translateY(10px);transition:opacity .9s var(--ease),transform .9s var(--ease),border-color .9s var(--ease)}
.bot.is-active{opacity:1;transform:none;border-color:rgba(215,206,172,.34)}
.bot-num{flex:none;width:34px;align-self:flex-start;padding-top:4px;font-family:var(--pragati);font-size:11.5px;letter-spacing:2.07px;color:var(--gold)}
.bot-name{flex:none;width:240px;align-self:flex-start;padding-top:2px;font-size:24px;line-height:1.05;color:var(--cream)}
/* Unified to one display face across all 9 botanicals — the mixed pragati/jumbo/fraunces
   treatment read as inconsistent. Modifier classes kept as no-ops so HTML need not change. */
.bot-name.pragati,.bot-name.jumbo,.bot-name.fraunces{font-family:var(--jumbo);font-weight:200;font-variation-settings:normal}
.bot-feat{flex:1 1 auto;min-width:0;align-self:flex-start;padding-top:2px;display:flex;flex-direction:column;gap:8px}
.bot-role{font-family:var(--pragati);font-size:10px;letter-spacing:2px;color:var(--gold)}
.bot-copy{font-family:var(--fraunces);font-weight:400;font-size:15.5px;line-height:1.4;color:var(--pale);font-variation-settings:"SOFT" 0,"WONK" 1;opacity:0;max-height:0;overflow:hidden;transform:translateY(-4px);transition:opacity .8s var(--ease),max-height .9s var(--ease),transform .8s var(--ease)}
.bot.is-active .bot-copy{opacity:1;max-height:140px;transform:none}
/* Botanical illustration — dark-on-white line art recoloured to warm cream-gold that
   floats on the deep-navy section: invert flips it light, the warm filter tints it toward
   the brand gold, and screen blend drops the white card away to transparent. */
.bot-img{flex:none;width:152px;margin:0;align-self:center;opacity:0;transform:translateY(14px) scale(.95);transition:opacity 1s var(--ease),transform 1s var(--ease)}
/* Assets pre-procesados a crema cálido sobre transparente (alpha por luminancia), así que
   flotan limpias sobre el navy sin blend ni caja. */
.bot-img img{display:block;width:100%;height:auto}
.bot.is-active .bot-img{opacity:1;transform:none}

/* icon row */
.icn{position:absolute;overflow:hidden;background-image:url("../assets/img/icons.png");background-image:-webkit-image-set(url("../assets/img/icons.webp") 1x,url("../assets/img/icons.png") 1x);background-image:image-set(url("../assets/img/icons.webp") type("image/webp"),url("../assets/img/icons.png") type("image/png"));background-repeat:no-repeat}
.i0{left:118px;top:34px;width:175.736px;height:163.996px;background-size:763.4px 323.9px;background-position:-381.6px -13px;transform:rotate(32.64deg)}
.i1{left:268px;top:48px;width:175.736px;height:136.787px;background-size:763.4px 323.9px;background-position:-5.9px -171.6px;transform:rotate(-39.64deg)}
.i2{left:447px;top:49px;width:175.736px;height:134.737px;background-size:763.4px 323.9px;background-position:-579.5px -11.4px;transform:rotate(-24.72deg)}
.i3{left:627px;top:37px;width:189.619px;height:158.05px;background-size:823.6px 349.5px;background-position:0 0}
.i4{left:814px;top:48px;width:175.736px;height:136.787px;background-size:763.4px 323.9px;background-position:-196.2px -170.2px}

/* ===== reduced motion : everything static, fully visible ===== */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .chrome,.rail,.hud-lot-fixed{transition:none !important}
}

/* ===== ASSEMBLED SECTION CSS (v5.2 new sections) ===== */

/* ---- sec-01 ---- */
/* ─── sec-01 · MANIFIESTO ─── */
.frame-manifiesto {
  height: 900px;
  background: linear-gradient(180deg, #0b1a29 0%, #102235 50%, #070f18 100%);
  position: relative;
  overflow: hidden;
}

.manifiesto-eyebrow {
  position: absolute;
  top: 112px;
  left: 187px;
  font-family: var(--pragati);
  font-size: 10.5px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

.manifiesto-lines {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 187px;
  right: 86px;
}

.manifiesto-line {
  font-family: var(--jumbo);
  font-size: 34px;
  font-weight: 200;
  line-height: 1.55;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin: 0;
}

.manifiesto-punch {
  color: var(--gold);
}

/* ---- sec-03 ---- */
/* ─── sec-03 · ORIGEN ─── */
.frame-origen {
  height: 1000px;
  background: linear-gradient(180deg, #0b1a29 0%, #102235 50%, #070f18 100%);
  position: relative;
  overflow: hidden;
}

.ph-origen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
}

.origen-copy {
  position: absolute;
  bottom: 112px;
  left: 187px;
  right: 86px;
  max-width: 620px;
}

.origen-eyebrow {
  display: block;
  font-family: var(--pragati);
  font-size: 10.5px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.origen-headline {
  font-family: var(--jumbo);
  font-size: 44px;
  font-weight: 200;
  line-height: 1.2;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin: 0 0 28px;
}

.origen-body {
  font-family: var(--fraunces);
  font-size: 18px;
  line-height: 1.55;
  color: var(--pale);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  max-width: 520px;
  margin: 0;
}

/* ---- sec-04 ---- */
/* ─── sec-04 · PROCESO ─── */
.frame-proceso {
  height: 1120px;
  background: linear-gradient(180deg, #0b1a29 0%, #102235 50%, #070f18 100%);
  position: relative;
  overflow: hidden;
}

.proceso-eyebrow {
  position: absolute;
  top: 112px;
  left: 187px;
  font-family: var(--pragati);
  font-size: 10.5px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

.proceso-headline {
  position: absolute;
  top: 148px;
  left: 187px;
  right: 86px;
  font-family: var(--jumbo);
  font-size: 40px;
  font-weight: 200;
  line-height: 1.2;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin: 0;
}

/* gold spine line */
.proceso-spine {
  position: absolute;
  top: 280px;
  bottom: 100px;
  left: 240px;
  width: 1px;
  background: rgba(229, 201, 90, 0.28);
}

.proceso-steps {
  position: absolute;
  top: 268px;
  left: 187px;
  right: 86px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* individual step */
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 36px 0 36px 0;
  border-bottom: 1px solid rgba(215, 206, 172, .16);
  opacity: .4;
  transition: opacity .5s var(--ease);
}

.process-step:first-child {
  border-top: 1px solid rgba(215, 206, 172, .16);
}

.process-step.is-active {
  opacity: 1;
}

.step-num {
  font-family: var(--pragati);
  font-size: 13px;
  letter-spacing: 1.6px;
  color: rgba(229, 201, 90, .45);
  transition: color .4s var(--ease);
  flex-shrink: 0;
  width: 54px; /* puts it just left of the spine at x:240 */
  padding-top: 4px;
}

.process-step.is-active .step-num {
  color: var(--gold);
}

.step-body {
  padding-left: 46px;
  max-width: 620px;
}

.step-title {
  font-family: var(--jumbo);
  font-size: 26px;
  font-weight: 200;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.step-desc {
  font-family: var(--fraunces);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pale);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  margin: 0;
}

/* ---- sec-06 ---- */
/* ─── SEC-06 · LA BOTELLA ─────────────────────────────────────────────────── */

.frame-botella {
  position: relative;
  height: 1120px;
  background: linear-gradient(180deg, #0b1a29 0%, #102235 50%, #070f18 100%);
  overflow: hidden;
}

/* Eyebrow */
.botella-eyebrow {
  position: absolute;
  top: 72px;
  left: 187px;
  font-family: var(--pragati);
  font-size: 10.5px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Headline */
.botella-headline {
  position: absolute;
  top: 104px;
  left: 187px;
  font-family: var(--jumbo);
  font-size: 40px;
  font-weight: 200;
  line-height: 1.15;
  color: var(--cream);
  letter-spacing: -0.5px;
  max-width: 480px;
  margin: 0;
}

/* 3D Bottle Stage */
.bottle-stage {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 820px;
}

.bottle-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  /* pan-y, not none: a vertical swipe still scrolls the page (the bottle fills
     most of the phone viewport — `none` would trap the finger and the visitor
     could not get past §06). Horizontal drag still reaches us and spins it. */
  touch-action: pan-y;
}
.bottle-stage canvas.is-grabbing { cursor: grabbing; }

.ph-bottle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* X-ray toggle */
.xray-toggle {
  position: absolute;
  top: 940px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--pragati);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 7px 20px;
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}

.xray-toggle:hover {
  background: var(--gold);
  color: #07111b;
}

/* Ficha técnica */
.botella-ficha {
  position: absolute;
  top: 200px;
  left: 1064px;
  width: 210px;
}

.ficha-eyebrow {
  font-family: var(--pragati);
  font-size: 10.5px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.ficha-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ficha-list li {
  font-family: var(--pragati);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pale);
  padding: 10px 0;
  border-bottom: 1px solid rgba(215, 206, 172, 0.16);
}

.ficha-list li:first-child {
  border-top: 1px solid rgba(215, 206, 172, 0.16);
}

/* Lot number */
.botella-lot {
  position: absolute;
  top: 484px;
  left: 1064px;
  width: 210px;
  font-family: var(--fraunces);
  font-size: 13px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  line-height: 1.55;
  color: var(--pale);
  opacity: 0.7;
  margin: 0;
}

/* Hairline divider */
.botella-hairline {
  position: absolute;
  top: 988px;
  left: 187px;
  right: 86px;
  height: 1px;
  background: rgba(215, 206, 172, 0.16);
}

/* Micro-section: Cómo se toma */
.como-block {
  position: absolute;
  top: 1016px;
  left: 187px;
  width: 640px;
}

.como-eyebrow {
  font-family: var(--pragati);
  font-size: 10.5px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.como-body {
  font-family: var(--fraunces);
  font-size: 17px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  line-height: 1.55;
  color: var(--pale);
  margin: 0;
}

/* ---- sec-07 ---- */
/* ─── SEC-07 · EDICIÓN ESPECIAL ─────────────────────────────────────────────── */

.frame-edicion {
  position: relative;
  height: 900px;
  background: linear-gradient(180deg, #081d20 0%, #0f2833 55%, #061018 100%);
  overflow: hidden;
}

/* Eyebrow */
.edicion-eyebrow {
  position: absolute;
  top: 72px;
  left: 187px;
  font-family: var(--pragati);
  font-size: 10.5px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Headline */
.edicion-headline {
  position: absolute;
  top: 104px;
  left: 187px;
  font-family: var(--jumbo);
  font-size: 46px;
  font-weight: 200;
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: -0.5px;
  max-width: 520px;
  margin: 0;
}

/* Special edition mockup placeholder */
.ph-special {
  position: absolute;
  top: 90px;
  left: 820px;
  width: 480px;
  height: 720px;
}

/* Body copy */
.edicion-body {
  position: absolute;
  top: 232px;
  left: 187px;
  width: 520px;
  font-family: var(--fraunces);
  font-size: 18px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  line-height: 1.55;
  color: var(--pale);
  margin: 0;
}

/* Status line */
.edicion-status {
  position: absolute;
  top: 498px;
  left: 187px;
  font-family: var(--pragati);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0;
}

/* CTA button */
.cta-button {
  position: absolute;
  top: 558px;
  left: 187px;
  display: inline-block;
  font-family: var(--pragati);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 10px 28px;
  transition: background 0.24s var(--ease), color 0.24s var(--ease);
}

.cta-button:hover {
  background: var(--gold);
  color: #07111b;
}

/* ---- sec-08 ---- */
/* ─── SEC-08 · DÓNDE ENCONTRARLO ────────────────────────────────────────────── */

.frame-donde {
  position: relative;
  height: 1000px;
  background: linear-gradient(180deg, #0b1a29 0%, #102235 50%, #070f18 100%);
  overflow: hidden;
}

/* Eyebrow */
.donde-eyebrow {
  position: absolute;
  top: 72px;
  left: 187px;
  font-family: var(--pragati);
  font-size: 10.5px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Headline */
.donde-headline {
  position: absolute;
  top: 104px;
  left: 187px;
  font-family: var(--jumbo);
  font-size: 44px;
  font-weight: 200;
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: -0.5px;
  margin: 0;
}

/* Map placeholder */
.ph-map {
  position: absolute;
  top: 200px;
  left: 187px;
  width: 620px;
  height: 520px;
  /* Muted cyanotype undertone */
  background: rgba(16, 48, 68, 0.55);
  border: 1px dashed rgba(159, 176, 188, 0.3);
}

/* Right column */
.donde-right {
  position: absolute;
  top: 200px;
  left: 867px;
  width: 487px;
}

/* Note */
.donde-note {
  font-family: var(--fraunces);
  font-size: 17px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  line-height: 1.55;
  color: var(--pale);
  margin: 0 0 32px 0;
  max-width: 400px;
}

/* "Coming soon" treatment for the map slot — intentional, not a dev placeholder */
.ph-soon { gap: 12px; border: 1px solid rgba(229,201,90,.16); background: rgba(11,26,41,.5); }
.ph-soon-kicker { font-family: var(--pragati); font-size: 10.5px; letter-spacing: 2.52px; text-transform: uppercase; color: var(--gold); }
.ph-soon-text { font-family: var(--jumbo); font-weight: 200; font-size: 30px; letter-spacing: .5px; color: var(--cream); text-transform: none; }

/* Email capture form */






/* Distributor list row pattern (for when data arrives) */
.donde-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(215, 206, 172, 0.16);
  font-family: var(--pragati);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pale);
}

.donde-row:first-child {
  border-top: 1px solid rgba(215, 206, 172, 0.16);
}

.donde-name {
  color: var(--cream);
  min-width: 140px;
}

.donde-loc {
  color: var(--steel);
  flex: 1;
}

.donde-type {
  color: var(--steel);
  opacity: 0.7;
}

.donde-link {
  font-family: var(--pragati);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s var(--ease);
}

.donde-link:hover {
  border-bottom-color: var(--gold);
}

/* ---- sec-cierre ---- */
/* ─── sec-cierre · CIERRE ─── */
.frame-cierre {
  height: 560px;
  background: linear-gradient(180deg, #0b1a29 0%, #102235 50%, #070f18 100%);
  position: relative;
  overflow: hidden;
}

.cierre-inner {
  position: absolute;
  top: 0;
  left: 187px;
  right: 86px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 80px 0;
}

.cierre-wordmark {
  font-family: var(--jet);
  font-size: 42px;
  font-weight: 200;
  color: var(--gold);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 10px;
}

.cierre-tagline {
  font-family: var(--fraunces);
  font-size: 17px;
  line-height: 1.55;
  color: var(--pale);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  margin: 0 0 28px;
}

.cierre-divider {
  width: 100%;
  height: 1px;
  background: rgba(215, 206, 172, .16);
  margin: 0;
}

.cierre-divider--top {
  margin-bottom: 24px;
}

.cierre-links {
  display: flex;
  gap: 36px;
  align-items: center;
  margin: 0 0 24px;
}

.cierre-links a {
  font-family: var(--pragati);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--steel);
  text-decoration: none;
  transition: color .25s var(--ease);
}

.cierre-links a:hover {
  color: var(--gold);
}

.cierre-lote {
  font-family: var(--pragati);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 20px;
}

.cierre-lote-num {
  color: var(--gold);
}

.cierre-legal {
  font-family: var(--pragati);
  font-size: 9.5px;
  line-height: 1.8;
  color: var(--steel);
  letter-spacing: 0.8px;
  margin: 20px 0 0;
}

/* =====================================================================
   TIER C — REFLOW  (plan 003)
   Appended at end — desktop layout (≥1024px) is byte-identical to
   post-002 output; these rules only activate below 1024px.
   ===================================================================== */

/* ---- TABLET + PHONE  (< 1024px) ---- */
@media (max-width: 1023.98px) {

  /* Safety net */
  body { overflow-x: hidden; }

  /* --- Neutralise the 1440 artboard coordinate system --- */
  #stage-scaler { height: auto !important; }
  #stage        { width: 100% !important; margin: 0; }
  .frame        { width: 100% !important; }
  :root         { --stage-scale: 1 !important; }

  /* ============================================================
     PERSISTENT CHROME  →  slim top bar
     ============================================================ */

  /* Keep wordmark + CTA; shrink the section index */



  /* Left rail: desktop-only decoration */
  .rail { display: none; }

  /* HUD lot tag: reposition bottom-right */
  .hud-lot-fixed {
    right: 24px;
    bottom: 20px;
    font-size: 9px;
  }

  /* ============================================================
     §00  HERO
     ============================================================ */
  .frame-hero {
    height: auto;
    min-height: 100svh;
    padding: 80px 24px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .hero-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
  }








  .lead {
    font-size: clamp(20px, 6vw, 32px);
  }

  /* inline lot within hero — keep small */

  /* ============================================================
     §01  MANIFIESTO
     ============================================================ */
  .frame-manifiesto {
    height: auto;
    padding: 96px 24px 80px;
  }

  .manifiesto-eyebrow {
    position: static;
    display: block;
    margin-bottom: 32px;
  }

  .manifiesto-lines {
    position: static;
    transform: none;
    left: auto;
    right: auto;
  }

  .manifiesto-line {
    font-size: clamp(20px, 6vw, 34px);
    line-height: 1.45;
  }

  /* ============================================================
     §02  DUALIDAD
     ============================================================ */
  .frame-dualidad {
    height: auto;
    padding: 0 0 72px;
    overflow: hidden;
  }

  /* Illustration band: sized relative container */
  .dualidad-img-band {
    position: relative;
    width: 100%;
    height: 56svh;
    min-height: 280px;
    overflow: hidden;
  }

  /* The three abs-positioned images now live inside the band */

  .dualidad-img-band .glow-s2 {
    position: absolute;
    left: 50%;
    top: -30%;
    transform: translateX(-50%);
    width: 140%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
  }

  .dualidad-img-band .label-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 80%;
    max-height: 340px;
    object-fit: contain;
  }

  /* Text stack beneath the band */
  .sabiduria {
    position: static;
    display: block;
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: -0.02em;
    padding: 32px 24px 0;
  }

  .ambicion {
    position: static;
    display: block;
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: -0.02em;
    padding: 0 24px 24px;
  }

  /* Ghost elements are desktop-only parallax echoes */
  .cue-2, .lead-ghost { display: none; }

  .poem {
    position: static;
    width: auto;
    padding: 0 24px;
    font-size: clamp(16px, 4.5vw, 19px);
  }

  /* ============================================================
     §03  ORIGEN
     ============================================================ */
  .frame-origen {
    height: auto;
    padding: 0 0 96px;
  }

  .ph-origen {
    position: static;
    width: 100%;
    height: 46svh;
    min-height: 220px;
    opacity: 0.5;
  }

  .origen-copy {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    max-width: none;
    padding: 32px 24px 0;
  }

  .origen-headline {
    font-size: clamp(28px, 7vw, 44px);
  }

  /* ============================================================
     §04  PROCESO
     ============================================================ */
  .frame-proceso {
    height: auto;
    padding: 96px 24px 80px;
  }

  .proceso-eyebrow {
    position: static;
    display: block;
    margin-bottom: 12px;
  }

  .proceso-headline {
    position: static;
    font-size: clamp(26px, 6.5vw, 40px);
    margin: 0 0 40px;
  }

  /* spine: keep but re-anchor to left margin */
  .proceso-spine {
    position: static;
    display: block;
    width: 1px;
    height: 0; /* hidden — layout is block flow now */
  }

  .proceso-steps {
    position: static;
  }

  .process-step {
    padding: 28px 0;
  }

  .step-num {
    width: 40px;
    padding-top: 2px;
  }

  .step-body {
    padding-left: 20px;
  }

  .step-title {
    font-size: clamp(20px, 5vw, 26px);
    margin-bottom: 8px;
  }

  .step-desc {
    font-size: clamp(14px, 3.8vw, 16px);
  }

  /* ============================================================
     §05  FÓRMULA
     ============================================================ */
  .frame-formula {
    height: auto;
    padding: 96px 24px 72px;
  }


  .glow-s3 {
    position: absolute;
    left: 50%;
    top: -20%;
    transform: translateX(-50%);
    width: 160%;
    pointer-events: none;
  }

  .method-title {
    position: relative; /* stacking context so glows sit behind text */
    left: auto;
    top: auto;
    font-size: clamp(28px, 8vw, 56px);
    letter-spacing: clamp(6px, 3vw, 31px);
    white-space: normal;
    margin-bottom: 32px;
    z-index: 1;
  }

  .botanicos {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    z-index: 1;
  }

  .bot {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .bot-name {
    width: auto;
    flex: 1 1 auto;
    font-size: clamp(18px, 5.5vw, 24px);
  }

  .bot-feat {
    width: 100%;
    flex-basis: 100%;
  }

  /* Botanical illustration drops below the copy at a modest size on narrow screens. */
  .bot-img { width: 116px; margin-top: 4px; }

  /* Icon row: desktop-only art piece (no longer used; kept hidden if present) */

  /* ============================================================
     §06  BOTELLA
     ============================================================ */
  .frame-botella {
    height: auto;
    padding: 96px 24px 72px;
  }

  .botella-eyebrow {
    position: static;
    display: block;
    margin-bottom: 12px;
  }

  .botella-headline {
    position: static;
    font-size: clamp(26px, 6.5vw, 40px);
    max-width: none;
    margin: 0 0 24px;
  }

  /* Bottle stage: centered, bounded */
  .bottle-stage {
    position: static;
    width: 100%;
    max-width: 360px;
    height: 60svh;
    min-height: 300px;
    margin: 0 auto 16px;
    transform: none;
    left: auto;
    top: auto;
  }

  .xray-toggle {
    position: static;
    transform: none;
    display: block;
    margin: 0 auto 32px;
    min-height: 40px;   /* tap target */
    padding: 9px 24px;
  }

  .botella-ficha {
    position: static;
    width: 100%;
    max-width: 320px;
    margin-bottom: 24px;
  }

  .botella-lot {
    position: static;
    width: auto;
    margin-bottom: 32px;
  }

  .botella-hairline {
    position: static;
    left: auto;
    right: auto;
    margin: 0 0 24px;
  }

  .como-block {
    position: static;
    width: auto;
  }

  /* ============================================================
     §07  EDICIÓN ESPECIAL
     ============================================================ */
  .frame-edicion {
    height: auto;
    padding: 96px 24px 72px;
  }

  .edicion-eyebrow {
    position: static;
    display: block;
    margin-bottom: 12px;
  }

  .edicion-headline {
    position: static;
    font-size: clamp(30px, 8vw, 46px);
    max-width: none;
    margin: 0 0 24px;
  }

  .ph-special {
    position: static;
    width: 100%;
    max-width: 420px;
    height: 60svh;
    min-height: 280px;
    margin: 0 0 24px;
    left: auto;
    top: auto;
  }

  .edicion-body {
    position: static;
    width: auto;
    margin-bottom: 20px;
  }

  .edicion-status {
    position: static;
    margin-bottom: 24px;
  }

  .cta-button {
    position: static;
    display: inline-flex;
    align-items: center;
    min-height: 44px;   /* tap target */
    padding: 12px 28px;
  }

  /* ============================================================
     §08  DÓNDE ENCONTRARLO
     ============================================================ */
  .frame-donde {
    height: auto;
    padding: 96px 24px 72px;
  }

  .donde-eyebrow {
    position: static;
    display: block;
    margin-bottom: 12px;
  }

  .donde-headline {
    position: static;
    font-size: clamp(28px, 7vw, 44px);
    margin: 0 0 24px;
  }

  .ph-map {
    position: static;
    width: 100%;
    height: 48svh;
    min-height: 220px;
    left: auto;
    top: auto;
    margin-bottom: 32px;
  }

  .donde-right {
    position: static;
    left: auto;
    top: auto;
    width: auto;
  }

  .donde-note {
    max-width: none;
  }




  /* ============================================================
     CIERRE
     ============================================================ */
  .frame-cierre {
    height: auto;
    padding: 80px 24px 60px;
  }

  .cierre-inner {
    position: static;
    padding: 0;
  }

  .cierre-links {
    flex-wrap: wrap;
    gap: 18px 24px;
  }

  .cierre-links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

} /* end @media max-width:1023.98px */

/* ---- PHONE PASS (< 600px) ---- */
@media (max-width: 599.98px) {

  /* Tighten padding across all frames */
  .frame-hero      { padding: 72px 18px 40px; }
  .frame-manifiesto{ padding: 80px 18px 64px; }
  .frame-dualidad  { padding: 0 0 56px; }
  .frame-origen    { padding: 0 0 72px; }
  .frame-proceso   { padding: 80px 18px 64px; }
  .frame-formula   { padding: 80px 18px 56px; }
  .frame-botella   { padding: 80px 18px 56px; }
  .frame-edicion   { padding: 80px 18px 56px; }
  .frame-donde     { padding: 80px 18px 56px; }
  .frame-cierre    { padding: 64px 18px 48px; }

  /* Tighter padded elements */
  .origen-copy     { padding: 24px 18px 0; }
  .sabiduria       { padding: 24px 18px 0; }
  .ambicion        { padding: 0 18px 20px; }
  .poem            { padding: 0 18px; }

  /* Chrome: collapse index on very small screens */

  /* Tighter type ramp on phone */
  .manifiesto-line    { font-size: clamp(18px, 5.5vw, 28px); }
  .origen-headline    { font-size: clamp(24px, 6.5vw, 36px); }
  .proceso-headline   { font-size: clamp(22px, 5.5vw, 32px); }
  .step-title         { font-size: clamp(18px, 4.8vw, 22px); }
  .method-title       { font-size: clamp(22px, 7vw, 40px); letter-spacing: clamp(4px, 2.5vw, 18px); }
  .botella-headline   { font-size: clamp(22px, 5.8vw, 34px); }
  .edicion-headline   { font-size: clamp(24px, 6.5vw, 38px); }
  .donde-headline     { font-size: clamp(24px, 6.5vw, 36px); }
  .sabiduria, .ambicion { font-size: clamp(24px, 7vw, 36px); }

  /* HUD lot: hide on tiny phones */
  .hud-lot-fixed { display: none; }

  /* Bot-name even smaller */
  .bot-name { font-size: clamp(16px, 5vw, 20px); }

  /* Illustration band: slightly shorter on phone */
  .dualidad-img-band  { height: 48svh; min-height: 220px; }

  /* Bottle & special: tighter */
  .bottle-stage  { height: 52svh; min-height: 260px; max-width: 300px; }
  .ph-special    { height: 52svh; min-height: 240px; }
  .ph-map        { height: 44svh; min-height: 200px; }

} /* end @media max-width:599.98px */

/* =====================================================================
   DESKTOP RESTORATION — dualidad wrapper (≥ 1024px)
   The .dualidad-img-band added for mobile must be invisible at desktop:
   display:contents makes it a transparent pass-through so children
   resolve their absolute positions against .frame-dualidad as before.
   ===================================================================== */
@media (min-width: 1024px) {
  .dualidad-img-band {
    display: contents;
  }
}

/* =====================================================================
   PREMIUM PASS — gradientes, profundidad y experiencia de scroll
   (apéndice final: ordena por cascada sobre las reglas base)
   ===================================================================== */
:root{
  --grad-gold:linear-gradient(120deg,#f6e7ad 0%,#e5c95a 44%,#c79a3c 100%);
  --hairline:linear-gradient(90deg,transparent,rgba(229,201,90,.45) 16%,rgba(229,201,90,.45) 84%,transparent);
}

/* smooth scrolling para saltos de ancla (la rueda nativa no cambia) */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* utilidad: texto con degradado dorado */
.gold-grad,.method-title,.cierre-wordmark{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---- barra de progreso de scroll (feedback premium) ---- */
.scroll-progress{
  position:fixed;left:0;top:0;z-index:70;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#c79a3c,#f6e7ad 60%,#e5c95a);
  box-shadow:0 0 12px rgba(229,201,90,.55);
  transition:transform .08s linear;
}

/* glows dorados ambientales por sección: fuera. Manchaban las últimas secciones
   y rompían la unidad del lienzo. El fondo queda limpio y uniforme. */
.frame::before{display:none !important}

/* ---- HERO: profundidad + bajada clara ---- */
/* hero sobre el mismo lienzo unificado: sin glow dorado de esquina ni oscurecido
   a sólido (eso lo separaba del resto). Solo una bajada muy sutil para anclar el
   texto, sin pasar el tono del lienzo. */
.frame-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, transparent 62%, rgba(7,17,27,.30) 100%);}
.hero-header,.hero-bajada,.hero-story{z-index:2}
.hero-bajada{position:absolute;left:90px;top:360px;max-width:720px}
.hero-kicker{font-family:var(--pragati);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--steel);margin-bottom:18px}
.hero-tagline{font-family:var(--glider);font-weight:200;font-size:66px;line-height:1.02;letter-spacing:-.015em;margin-bottom:20px;width:fit-content}
.hero-blurb{font-family:var(--fraunces);font-weight:400;font-size:18px;line-height:1.6;color:rgba(215,206,172,.82);max-width:500px;font-variation-settings:"SOFT" 0,"WONK" 1}

/* la bajada inferior ya no va borrosa (era ilegible) */
.lead{filter:none}

/* cue de scroll animado */
.scroll-cue{position:relative;padding-bottom:12px}
.scroll-cue::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent)}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue::after{animation:cuepulse 2.6s var(--ease) infinite}
  @keyframes cuepulse{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:1;transform:translateX(10px)}}
}

/* ---- glows duros (SVG) fuera: causaban la línea vertical ---- */
.glow{display:none !important}
/* glows radiales de §02 y §05 también fuera: el fondo queda limpio y uniforme,
   la obra (árbol/caballo, botánicos) se sostiene sola sobre el lienzo */
.frame-dualidad::after,.frame-formula::after{display:none !important}
.frame-dualidad>:not(.dualidad-img-band):not(.glow),
.frame-formula>:not(.glow){z-index:2}
.frame-dualidad .label-img{z-index:2}

/* ---- divisores con degradado (premium) ---- */
.botella-hairline,.cierre-divider{background:var(--hairline) !important}

/* ---- reveal enriquecido: blur + leve escala ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{filter:blur(7px);transform:translateY(28px) scale(.985)}
  .reveal.is-visible{filter:blur(0);transform:none}
}

/* ---- botones: relleno con degradado + elevación al hover ---- */
.cta-button:hover,.xray-toggle:hover,.header-cta:hover,
.xray-toggle.is-on{background:var(--grad-gold);border-color:transparent;color:#07111b}

/* ---- hero bajada en mobile (flujo normal) ---- */
@media (max-width:1023.98px){
  .hero-bajada{position:static;left:auto;top:auto;max-width:none;margin:28px 0 8px}
  .hero-tagline{font-size:clamp(34px,9vw,56px)}
  .hero-blurb{font-size:clamp(15px,4vw,18px)}
  .frame-hero::after{background:linear-gradient(180deg,rgba(7,17,27,.25),transparent 30%,rgba(7,17,27,.9))}
  .frame::before{display:none}
}

/* =====================================================================
   HERO REDESIGN — logo al header, hero con titular (Opción A)
   ===================================================================== */
/* logo del header siempre visible (también sobre el hero) */
.site-header.over-hero .header-mark{opacity:1;pointer-events:auto}

/* hero como pantalla única, no artboard de 1524 */
.frame-hero{height:920px}
.hero-content{position:absolute;left:90px;top:248px;max-width:880px;z-index:2}
.hero-kicker{font-family:var(--pragati);font-size:12px;letter-spacing:3.4px;text-transform:uppercase;color:var(--steel);margin-bottom:22px}
.hero-tagline{font-family:var(--glider);font-weight:200;font-size:110px;line-height:.96;letter-spacing:-.022em;margin:0 0 30px;width:fit-content;padding-bottom:.06em}
.hero-lead-line{font-family:var(--fraunces);font-weight:400;font-size:23px;line-height:1.5;color:rgba(215,206,172,.86);max-width:560px;font-variation-settings:"SOFT" 0,"WONK" 1;margin:0 0 42px}
.hero-specs{list-style:none;display:flex;flex-wrap:wrap;gap:14px 30px;padding:0;margin:0}
.hero-specs li{font-family:var(--pragati);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--cream);position:relative}
.hero-specs li:not(:last-child)::after{content:"";position:absolute;right:-16px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--gold);transform:translateY(-50%)}
.hero-foot{position:absolute;left:90px;right:86px;bottom:54px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between}
.hero-foot .scroll-cue{font-family:var(--pragati);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--steel)}
.hero-foot .hud-lot{position:static}

/* mobile hero */
@media (max-width:1023.98px){
  .frame-hero{height:auto;min-height:100svh;padding:104px 24px 36px;display:flex;flex-direction:column;justify-content:center}
  .hero-content{position:static;left:auto;top:auto;max-width:none;margin:auto 0}
  .hero-tagline{font-size:clamp(48px,13vw,88px);margin-bottom:24px}
  .hero-lead-line{font-size:clamp(17px,4.6vw,22px);margin-bottom:32px}
  .hero-foot{position:static;left:auto;right:auto;bottom:auto;margin-top:36px}
}
@media (max-width:599.98px){
  .frame-hero{padding:96px 18px 28px}
  .hero-kicker{font-size:11px;letter-spacing:2.4px}
  .hero-specs{gap:10px 20px}
  .hero-specs li{font-size:10px}
}

/* ===== header en mobile (logo + CTA; nav se oculta) ===== */
@media (max-width:1023.98px){
  .header-inner{padding:12px calc(20px + env(safe-area-inset-right,0)) 12px calc(20px + env(safe-area-inset-left,0))}
  .header-nav,.header-index{display:none}
  .site-header{background:rgba(7,17,27,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(215,206,172,.08)}
  .site-header.over-hero{background:rgba(7,17,27,.5);border-bottom-color:transparent}
  .header-mark{font-size:16px}
  .header-cta{min-height:40px;display:inline-flex;align-items:center;padding:8px 16px;font-size:10px}
}

/* =====================================================================
   BRAND FORM — formulario propio de la marca (sin backend)
   ===================================================================== */
.frame-edicion{height:980px}
.edicion-panel{position:absolute;left:187px;top:286px;width:560px;z-index:2}
.edicion-intro{font-family:var(--fraunces);font-weight:400;font-size:17px;line-height:1.55;color:var(--pale);
  font-variation-settings:"SOFT" 0,"WONK" 1;margin:0 0 30px;max-width:520px}

.brand-form{display:flex;flex-direction:column;gap:22px;max-width:540px}
.field{display:flex;flex-direction:column;gap:8px}
.field-row{display:flex;gap:28px}
.field-row .field{flex:1}
.brand-form label{font-family:var(--pragati);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--steel)}
.brand-form label .req{color:var(--gold)}
.brand-form label .opt{color:rgba(159,176,188,.6);letter-spacing:1px}
.brand-form input,.brand-form select,.brand-form textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(159,176,188,.45);
  padding:10px 0;font-family:var(--fraunces);font-size:16px;color:var(--cream);
  font-variation-settings:"SOFT" 0,"WONK" 1;outline:none;border-radius:0;
  transition:border-color .25s var(--ease)}
.brand-form textarea{resize:vertical;min-height:46px;line-height:1.5}
.brand-form input::placeholder,.brand-form textarea::placeholder{color:rgba(159,176,188,.5)}
.brand-form input:focus,.brand-form select:focus,.brand-form textarea:focus{border-bottom-color:var(--gold)}
.brand-form input:focus-visible,.brand-form select:focus-visible,.brand-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* select con flecha propia + colores explícitos (dark mode Windows) */
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:3px;top:46%;width:7px;height:7px;
  border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);
  transform:translateY(-50%) rotate(45deg);pointer-events:none}
.brand-form select{appearance:none;-webkit-appearance:none;background-color:#0b1a29;color:var(--cream);padding-right:22px}
.brand-form select option{background-color:#0b1a29;color:var(--cream)}
/* estados de error */
.brand-form .field.invalid input,.brand-form .field.invalid select{border-bottom-color:#e08a6a}
.field-error{font-family:var(--pragati);font-size:10px;letter-spacing:1px;color:#e6a085;margin:0}
.field-error:empty{display:none}
.form-note{font-family:var(--pragati);font-size:10px;letter-spacing:1.2px;color:rgba(159,176,188,.55);margin:0;line-height:1.5}
.form-status{font-family:var(--fraunces);font-size:15px;line-height:1.5;color:var(--gold);
  font-variation-settings:"SOFT" 0,"WONK" 1;margin:0;max-width:480px}
.form-status:empty{display:none}
/* CTA relleno dentro del form (rompe el position absolute del .cta-button base) */
.cta-button.cta-solid{position:static;left:auto;top:auto;display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;background:transparent;cursor:pointer}
/* hover explícito: si no, .cta-solid{background:transparent} le gana al :hover por orden
   de cascada y el texto navy queda invisible sobre el fondo azul */
.cta-button.cta-solid:hover{background:var(--grad-gold);border-color:transparent;color:#07111b}
/* éxito: colapsa el form, deja la confirmación de marca */
.brand-form.is-done .field,.brand-form.is-done .field-row,
.brand-form.is-done button,.brand-form.is-done .form-note{display:none}
.brand-form.is-done .form-status{font-size:21px;line-height:1.45}

@media (max-width:1023.98px){
  .frame-edicion{height:auto}
  .edicion-panel{position:static;left:auto;top:auto;width:auto;margin-top:6px}
  .field-row{flex-direction:column;gap:22px}
}

/* =====================================================================
   SEAMLESS SECTIONS — un solo lienzo continuo, sin saltos entre secciones
   ===================================================================== */
/* lienzo fijo: textura + profundidad, detrás de todo */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(20,40,60,.55), transparent 60%),
    linear-gradient(180deg, rgba(7,17,27,.74), rgba(7,17,27,.84)),
    url("../assets/img/s3-bg.webp") center top / cover fixed;}

/* secciones transparentes: TODAS muestran el mismo lienzo continuo (body::before).
   Antes cada sección tenía su propio gradiente translúcido encima → se veía como
   un "rectángulo" más claro que el fondo general (sobre todo en §05, muy alta).
   Sin fondo propio, no hay caja: un solo fondo unificado en toda la web. */
.frame-manifiesto,.frame-origen,.frame-proceso,.frame-botella,.frame-donde,
.frame-cierre,.frame-dualidad,.frame-formula,.frame-edicion{
  background:transparent !important;}
.frame-hero{background:transparent !important}

/* La textura de §02 y §05 ya la da el lienzo continuo. Esos paneles opacos
   (formula-bg / overlay-img) eran 1470px recortados a la sección → borde duro
   más claro que la sección siguiente. Los quitamos: queda la obra real
   (árbol/caballo, botánicos) sobre el lienzo, mismo fondo en todas. */
/* El hero también se funde en el lienzo continuo: sin su propia imagen de fondo no hay
   "doble fondo" / costura contra los márgenes a anchos ≥1440. */
.hero-bg{display:none !important}

@media (max-width:1023.98px){
  body::before{background:
    linear-gradient(180deg, rgba(7,17,27,.8), rgba(7,17,27,.88)),
    url("../assets/img/s3-bg.webp") center top / cover;}
}

/* =====================================================================
   §05 LA FÓRMULA — reduced-motion: botánicos y sus ilustraciones siempre
   visibles (el reveal en cascada se define en el bloque FRAME 3 de arriba).
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .bot{opacity:1!important;transform:none!important}
  .bot-copy,.bot-img{opacity:1!important;max-height:none!important;transform:none!important;overflow:visible}
}

/* =====================================================================
   FOTOS DE EJEMPLO — tratamiento on-brand (tinte navy + leve desaturación)
   ===================================================================== */
.ph-photo{overflow:hidden;border:none;border-radius:2px;background:#0b1a29;opacity:1}
.ph-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.03) brightness(.9)}
.ph-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(7,17,27,.12), rgba(7,17,27,.5)),
            radial-gradient(120% 80% at 72% 12%, rgba(229,201,90,.10), transparent 60%)}

/* §03 ORIGEN — Patagonia como banner arriba del texto, más sutil */
.frame-origen{height:820px}
.ph-origen{inset:auto;top:120px;left:187px;right:86px;width:auto;height:330px;opacity:.78}
.ph-origen::after{background:linear-gradient(180deg, rgba(7,17,27,.28), rgba(7,17,27,.62)),
            radial-gradient(120% 80% at 72% 10%, rgba(229,201,90,.1), transparent 60%)}
.origen-copy{top:506px;bottom:auto;left:187px;right:86px;max-width:680px}

@media (max-width:1023.98px){
  .frame-origen{height:auto}
  .ph-origen{position:static;inset:auto;top:auto;left:auto;right:auto;width:100%;height:34svh;min-height:180px;opacity:.8;margin-bottom:8px}
  .origen-copy{position:static;top:auto;left:auto;right:auto;max-width:none}
}

/* =====================================================================
   §07 sin form (queda CTA → #contacto)  ·  §Contacto al final
   ===================================================================== */
.frame-edicion{height:820px}
.edicion-panel .edicion-status{position:static;left:auto;top:auto;margin:16px 0 26px}

.frame-contacto{min-height:760px;display:flex;align-items:center}
.contacto-inner{display:flex;gap:80px;width:100%;padding:130px 187px 110px;align-items:flex-start}
.contacto-lead{flex:1 1 0;max-width:440px}
.contacto-inner .brand-form{flex:1 1 0;max-width:520px}
.contacto-eyebrow{font-family:var(--pragati);font-size:10.5px;letter-spacing:2.52px;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.contacto-headline{font-family:var(--jumbo);font-weight:200;font-size:64px;line-height:1.02;letter-spacing:-.02em;margin:0 0 22px;width:fit-content;padding-bottom:.04em}
.contacto-intro{font-family:var(--fraunces);font-size:18px;line-height:1.55;color:var(--pale);font-variation-settings:"SOFT" 0,"WONK" 1;margin:0 0 36px;max-width:380px}
.contacto-meta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.contacto-meta li{font-family:var(--fraunces);font-size:15px;color:var(--cream);font-variation-settings:"SOFT" 0,"WONK" 1;display:flex;flex-direction:column;gap:2px}
.contacto-meta li span{font-family:var(--pragati);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--steel)}
.contacto-meta a{color:var(--cream);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease);align-self:flex-start}
.contacto-meta a:hover{color:var(--gold);border-bottom-color:rgba(229,201,90,.5)}

@media (max-width:1023.98px){
  .frame-edicion{height:auto}
  .frame-contacto{min-height:0;display:block}
  .contacto-inner{flex-direction:column;gap:40px;padding:96px 24px 80px}
  .contacto-lead,.contacto-inner .brand-form{max-width:none;width:100%}
  .contacto-headline{font-size:clamp(34px,9vw,56px)}
}
@media (max-width:599.98px){ .contacto-inner{padding:80px 18px 64px} }

/* =====================================================================
   §02 — piso para el árbol y el caballo (estaban flotando)
   ===================================================================== */
.dualidad-ground{position:absolute;z-index:1;pointer-events:none;
  left:120px;top:726px;width:600px;height:130px;
  background:
    radial-gradient(62% 82% at 50% 32%, rgba(60,94,140,.34), transparent 70%),
    radial-gradient(34% 52% at 37% 44%, rgba(4,12,24,.62), transparent 72%),
    radial-gradient(30% 48% at 70% 50%, rgba(4,12,24,.54), transparent 72%);
  filter:blur(8px)}
@media (max-width:1023.98px){ .dualidad-ground{display:none} }

/* Fitz Roy: encuadre hacia arriba pero un poco más abajo (que respire) */
.ph-origen img{object-position:50% 22%}

/* ============================================================
   PULIDO MOBILE (review 2026-07-30) — corrige los puntos flojos
   del reflow <1024px sin tocar el artboard desktop.
   ============================================================ */
@media (max-width:1023.98px){

  /* §05 Fórmula — los .bot-img reservaban ~120px de alto aun sin activar,
     dejando huecos negros entre botánicos. Colapsados hasta que la fila
     se activa; expanden con la misma curva que el copy. (El bloque de
     prefers-reduced-motion más arriba ya los fuerza visibles con
     !important, así que esto no rompe ese caso.) */
  .bot-img{
    max-height:0;
    margin-top:0;
    overflow:hidden;
    transition:opacity 1s var(--ease),transform 1s var(--ease),max-height .9s var(--ease),margin-top .9s var(--ease);
  }
  .bot.is-active .bot-img{max-height:220px;margin-top:4px}

  /* Estado dim de la cascada: .26 era casi ilegible en pantalla chica. */
  .bot{opacity:.4}

  /* §02 Dualidad — el arte (árbol + caballo) se perdía en el negro y
     "Ambición." quedaba fantasma. Leve lift, se mantiene el mood. */
  .dualidad-img-band .label-img{filter:brightness(1.28)}
  .ambicion{color:#a89f80}

  /* §07 Edición — la caja fija de 60svh dejaba una banda muerta bajo la
     botella (la foto es 928×1152, object-fit no llena). Alto por ratio. */
  .ph-special{height:auto;aspect-ratio:29/36;max-height:56svh;min-height:0}

  /* §08 Dónde — 48svh de caja vacía para un "Próximamente". Banda compacta. */
  .ph-map{height:auto;min-height:0;padding:36px 24px}
  .ph-soon-text{font-size:24px}

  /* Hero — al wrappear los specs, el bullet separador quedaba pegado al
     ítem siguiente («BOTELLAS •MAR DEL PLATA»). Más aire de columna. */
  .hero-specs{column-gap:30px}

  /* Ancla para el hint del render (arriba el bloque mobile lo hace static;
     relative mantiene el mismo flujo y le da posición al hint). */
  .bottle-stage{position:relative}
}

/* ── Form: honeypot fuera de pantalla (contact.php descarta si viene lleno) ── */
.hp-field{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── §06: hint de interacción del render 3D ──
   Nadie sabía que la botella se podía girar. Aparece cuando el modelo carga
   (is-on la pone app.js) y se desvanece al primer drag. */
.bottle-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:var(--pragati);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);opacity:0;pointer-events:none;transition:opacity .8s var(--ease);white-space:nowrap;margin:0}
.bottle-hint.is-on{opacity:.85}