@font-face{
  font-family:'Neue Montreal';
  src:url('../assets/NeueMontreal-Regular.woff2') format('woff2'),
      url('../assets/NeueMontreal-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Neue Montreal';
  src:url('../assets/NeueMontreal-Medium.woff2') format('woff2'),
      url('../assets/NeueMontreal-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bone:#F2EEE6;
  --ink:#141310;
  --stone:#B8B0A2;
  --t-on-bone:#1B1812;
  --t-on-bone-soft:#544D40;
  --t-on-ink:#EFEEEC;
  --t-on-ink-soft:#A19A8D;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --font-grotesk:'Neue Montreal','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-serif:'Playfair Display',serif;
  --font-hand:'adobe-handwriting-ernie','Playfair Display',cursive;
  --nav-h:82px;
  /* the pico scales with the viewport WIDTH (the svg keeps its 1512:293
     ratio), so the band that holds it has to track width too — a vh-based
     height would clip the peak on wide, short windows. */
  --notch-h:clamp(90px,11vw,300px);
}

html{ -webkit-font-smoothing:antialiased; }
::selection{ background:var(--ink); color:var(--bone); }
:focus-visible{ outline:1px solid currentColor; outline-offset:6px; border-radius:2px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
body{
  font-family:var(--font-grotesk);
  background:var(--bone); color:var(--t-on-bone);
  font-size:16px; line-height:1.6; overflow-x:hidden;
}
/* belt and braces: nothing may widen the mobile layout viewport */
html, body{ overflow-x:clip; }

/* the bottle layer: above section backgrounds, below section content.
   It never fades — main.js clips it to the edge of the layer uncovering
   it, and the layers that cover it on the way out sit at z-index 3+.   */
.scene-layer{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  visibility:hidden;   /* main.js shows it only while it's in the story */
}
.scene-layer.is-shown{ visibility:visible; }
#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* the still is trimmed to the rendered bottle: 88% of the viewport tall
   at scale 1 (the model is 3.2 of the camera's 3.75 units, plus perspective) */
.bottle-still{
  position:absolute; left:50%; top:50%;
  height:88vh; width:auto;
  transform:translate(-50%,-50%);   /* main.js adds the pose */
  transition:opacity .5s var(--ease);
}
.scene-layer.is-3d .bottle-still{ opacity:0; }

main{ position:relative; }
section{ position:relative; }

/* in-page link curtain: in 250ms, out 350ms (main.js waits on these) */
.curtain{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  background:var(--ink); opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.curtain.is-on{
  opacity:1; visibility:visible;
  transition:opacity .25s cubic-bezier(0.4,0,1,1), visibility 0s;
}
/* sections take focus after a jump; the ring belongs on controls only */
section[tabindex="-1"]:focus{ outline:none; }

/* ───────── NAV ───────── */
/* soft scrim behind the fixed nav so it stays legible over ANY
   background — photo, bottle, light or dark chapter — no more
   relying on mix-blend-mode guesswork. */
.nav-scrim{
  position:fixed; top:0; left:0; right:0; z-index:9;
  height:var(--nav-h);
  background:linear-gradient(to bottom, rgba(10,9,7,.5) 0%, rgba(10,9,7,.22) 55%, rgba(10,9,7,0) 100%);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  pointer-events:none;
  transition:background .45s var(--ease);
}
.nav-scrim.on-bone{
  background:linear-gradient(to bottom, rgba(242,238,230,.88) 0%, rgba(242,238,230,.5) 55%, rgba(242,238,230,0) 100%);
}
/* the bar itself lets clicks through — it spans the full width over the
   hero, and used to swallow every click on the "Quiero una botella" CTA */
.nav{
  pointer-events:none;
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 48px;
  height:var(--nav-h);
}
.nav-emblem, .nav-toggle, .nav-links{ pointer-events:auto; }
.nav-emblem{ display:block; padding:5px; margin:-5px; }
.nav-emblem img{ display:block; transition:filter .45s var(--ease); }
.nav-links{ display:flex; gap:32px; list-style:none; }
.nav-links a{
  display:block; padding:10px 0;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--t-on-ink); text-decoration:none;
  transition:color .45s var(--ease);
}
.nav-links a:hover{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
/* over the bone chapters the nav turns ink (the mobile overlay stays dark) */
body:not(.nav-open) .nav.on-bone .nav-links a{ color:var(--t-on-bone); }
body:not(.nav-open) .nav.on-bone .nav-emblem img{ filter:brightness(.11); }
body:not(.nav-open) .nav.on-bone .nav-toggle span{ background:var(--t-on-bone); }

/* hamburger toggle — hidden on desktop, shown under 900px */
.nav-toggle{
  display:none; width:44px; height:44px; padding:0; margin-right:-10px;
  color:var(--t-on-ink);
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.nav-toggle span{
  display:block; width:22px; height:1px; background:var(--t-on-ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease), background .45s var(--ease);
}
.nav-toggle.active span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle.active span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ───────── 00 HERO (approved — untouched language) ───────── */
.hero{
  height:72vh; background:var(--ink); color:var(--t-on-ink);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  position:relative;
}
.hero-cta{
  position:absolute; top:30px; left:50%; transform:translateX(-50%);
  font-size:14px; color:var(--t-on-ink); text-decoration:none;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:10px 20px; border-radius:100px; backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease);
  /* above the nav scrim (z 9) — under it, the CTA read blurred and dimmed */
  z-index:11;
}
.hero-cta:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }
.hero-cta:focus-visible{ outline-offset:4px; border-radius:100px; }
.hero-center{ text-align:center; position:relative; z-index:5; }
.hero-wordmark{ display:block; width:min(62vw,820px); height:auto; margin:0 auto; }
.hero-bajada{
  font-family:var(--font-hand);
  font-size:clamp(18px,1.8vw,26px); line-height:1.35;
  margin-top:32px;
}
.hero-transition{
  position:relative; height:26vh; background:var(--ink);
}
.hero-transition .notch{
  position:absolute; top:-1px; left:0; width:100%; height:calc(100% + 1px);
  display:block; z-index:1;
}
.hero-transition .notch path{ fill:var(--bone); }

/* ───────── shared ───────── */
.cap{
  display:block;
  font-family:var(--font-grotesk); font-weight:400;
  font-size:12px; line-height:1; letter-spacing:.28em;
  color:var(--t-on-bone-soft);
}
.cap.light{ color:var(--t-on-ink-soft); }
/* bleed so masked lines never clip descenders (Q, g, ¿, commas) */
.line{
  display:block; overflow:hidden;
  padding:0 .1em .14em; margin:0 -.1em -.14em;
}
.notch{ display:block; width:100%; }
/* A dark chapter that opens straight after a full-bleed photo can't use the
   filled band — its flat fill would read as an empty stripe over the image.
   This paints the pico alone, in ink, so it rises out of the photo. */
.notch-pico{
  position:absolute; left:0; width:100%; z-index:1;
  height:var(--notch-h);
  top:calc(var(--notch-h) * -1 + 2px);
}
.notch-pico path{ fill:var(--ink); }

/* ───────── 01 MANIFIESTO — full-screen statement ───────── */
.manifiesto{
  min-height:130vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:16vh 24px 18vh;
}
.manifiesto .cap{ margin-bottom:5vh; }
.manifiesto-text{
  font-family:var(--font-serif);
  font-size:clamp(44px,8.2vw,132px); line-height:1.02; letter-spacing:-.015em;
  position:relative; z-index:5;
}
.manifiesto-text em{ font-style:italic; }
.vino-text{
  margin-top:12vh; max-width:54ch;
  font-family:var(--font-grotesk);
  font-size:clamp(16px,1.35vw,19px); line-height:1.75;
  color:var(--t-on-bone);
  text-align:left;
  position:relative; z-index:5;
}
.vino-text em{ font-style:normal; color:var(--t-on-bone-soft); }

/* ───────── 01.5 EL LUGAR — full-bleed vineyard moment ───────── */
.lugar{
  position:relative; width:100%; height:72vh; overflow:hidden;
  background:var(--ink);
}
.lugar picture{ display:contents; }
.lugar img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center 40%;
}
.lugar figcaption{
  position:absolute; left:24px; bottom:24px; z-index:2;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--t-on-ink);
}
/* a low shade under the caption so it holds on bright vines */
.lugar::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1;
  background:linear-gradient(to top, rgba(10,9,7,.55), rgba(10,9,7,0));
  pointer-events:none;
}

/* ───────── 02 LA ETIQUETA — dark ritual, scalloped edges ───────── */
.etiqueta{
  min-height:160vh;
  display:flex; align-items:center;
  padding:24vh 48px;
}
.etiqueta::before{
  content:''; position:absolute; inset:0; background:var(--ink); z-index:0;
}
/* bottom edge: the ink hangs into the cream — same shape as the hero */
.etiqueta .notch-bottom{
  position:absolute; bottom:-1px; left:0; height:var(--notch-h); width:100%; z-index:1;
}
.etiqueta .notch-bottom path{ fill:var(--bone); }

.etiqueta-content{
  position:relative; z-index:5;
  max-width:1280px; margin:0 auto; width:100%;
}
.etiqueta .cap{ margin-bottom:4vh; }
.etiqueta-title{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(48px,6.5vw,108px); line-height:1.04; letter-spacing:-.01em;
  color:var(--t-on-ink); max-width:12ch;
}
.etiqueta-title em{ font-style:italic; }
.etiqueta-body{
  margin-top:5vh; max-width:46ch;
  font-size:clamp(15px,1.3vw,18px); line-height:1.75;
  color:var(--t-on-ink-soft);
}

/* ───────── 03 AÑADAS — vintages flank the centered bottle ───────── */
.anadas{ padding:16vh 48px 6vh; max-width:1440px; margin:0 auto; }
.anadas .cap{ margin-bottom:2vh; }
.anada{
  min-height:100vh;
  display:flex; align-items:center;
}
.anada.a-left{ justify-content:flex-start; }
.anada.a-right{ justify-content:flex-end; }
.anada-content{ max-width:400px; position:relative; z-index:5; }
.anada-year{
  font-family:var(--font-grotesk); font-weight:500;
  font-size:clamp(72px,9.5vw,150px); line-height:1; letter-spacing:-.03em;
  margin-bottom:28px;
}
.anada-subtitle{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--t-on-bone-soft); margin-bottom:18px;
}
.anada-desc{
  font-family:var(--font-grotesk);
  font-size:clamp(15px,1.3vw,18px); line-height:1.7;
  max-width:44ch; color:var(--t-on-bone);
}
.anada-meta{
  margin-top:20px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t-on-bone-soft);
}

/* ───────── 04 NOSOTROS ───────── */
/* Nosotros is the sheet the bottle slides under on desktop: it sits
   above the bottle layer, opaque bone, with the pico cut into its top
   edge and a soft shadow so the edge reads as a layer, not a line. */
.historia{
  padding:20vh 0 0; text-align:center;
  z-index:3; background:var(--bone);
}
.historia-cap{
  position:absolute; left:0; width:100%; z-index:1;
  height:var(--notch-h);
  top:calc(var(--notch-h) * -1 + 1px);
  filter:drop-shadow(0 -10px 18px rgba(20,19,16,.055));
}
.historia-cap path{ fill:var(--bone); }
/* hides the shadow's spill where the cap meets the sheet */
.historia::before{
  content:''; position:absolute; left:0; right:0; top:0; height:40px;
  background:var(--bone); z-index:2;
}
.historia .cap{ margin-bottom:6vh; }
.historia-quote{
  font-family:var(--font-grotesk); font-weight:400;
  font-size:clamp(20px,2.4vw,36px); line-height:1.45;
  color:var(--t-on-bone);
  margin:0 auto; max-width:38ch;
  position:relative; z-index:5;
  padding:0 24px;
}
.historia-quote em{ font-style:normal; color:var(--t-on-bone-soft); }
.nombre-block{
  display:grid; grid-template-columns:minmax(160px,auto) minmax(0,520px);
  gap:24px 80px; margin:16vh auto 0; max-width:900px;
  text-align:left; padding:0 48px;
  position:relative; z-index:5;
}
.nombre-titulo{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(30px,3.2vw,46px); line-height:1.1;
}
.nombre-texto{ font-size:clamp(15px,1.3vw,18px); line-height:1.75; color:var(--t-on-bone-soft); max-width:52ch; }

.historia-photo{ margin-top:16vh; overflow:hidden; }
.historia-photo picture{ display:contents; }
.historia-photo img{
  display:block; width:100%; height:auto; max-height:88vh;
  object-fit:cover; object-position:center 60%;
}

/* ───────── 05 CONTACTO (dark, scalloped top) ───────── */
.contacto{ padding:26vh 48px 0; z-index:4; }
.contacto::before{
  /* rises 2px over the photo above (like the pico does): when the seam
     lands between device pixels, Nosotros' bone showed through as a hairline */
  content:''; position:absolute; inset:-2px 0 0; background:var(--ink); z-index:0;
}

.contacto-content{
  position:relative; z-index:5;
  max-width:1280px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.contacto-emblema{
  width:clamp(64px,6vw,96px); height:auto; margin-bottom:9vh;
  opacity:.9;
}
.contacto-title{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(52px,7.2vw,124px); line-height:1.05; letter-spacing:-.015em;
  color:var(--t-on-ink);
}
.contacto-title em{ font-style:italic; }

.contacto-links{
  margin-top:10vh; width:min(560px,100%);
}
.contact-link{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 0; text-decoration:none;
  font-size:clamp(17px,1.6vw,22px); color:var(--t-on-ink);
  border-bottom:1px solid rgba(239,238,236,.14);
}
.contact-link:first-child{ border-top:1px solid rgba(239,238,236,.14); }
/* slide the label on a composited transform — animating padding would
   force a layout pass on every frame */
.contact-link > span:first-child{ transition:transform .35s var(--ease); }
.contact-link:hover > span:first-child{ transform:translateX(12px); }
.contact-arrow{
  flex:none; width:22px; height:22px;
  fill:none; stroke:var(--t-on-ink-soft); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--ease), stroke .35s var(--ease);
}
.contact-link:hover .contact-arrow{ transform:translateX(6px); stroke:var(--t-on-ink); }

.footer{
  position:relative; z-index:5;
  margin-top:14vh; padding:26px 0;
  color:var(--t-on-ink-soft);
  border-top:1px solid rgba(239,238,236,.1);
}
.footer-about{
  max-width:68ch; margin-bottom:22px;
  font-size:13px; line-height:1.65;
}
.footer-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}

/* the bottle's dedicated mobile moment lives inside the dark chapter */
.bottle-slot{ display:none; }

/* keep the flanking vintages clear of the centered bottle on desktop */
@media (min-width:901px){
  .anada-content{ max-width:min(400px,30vw); }
}

/* ───────── responsive ───────── */
@media (max-width:900px){
  :root{ --nav-h:64px; }
  body{ font-size:15px; }
  .nav{ padding:0 20px; }
  .nav-scrim{ height:calc(var(--nav-h) + 14px); }

  /* hamburger replaces the inline link row */
  .nav-toggle{ display:flex; z-index:11; position:relative; }
  .nav-links{
    position:fixed; inset:0; z-index:9;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:36px; margin:0; height:100svh;
    background:var(--ink);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .4s var(--ease);
  }
  .nav-links.open{ opacity:1; visibility:visible; pointer-events:auto; }
  .nav-links a{ font-size:22px; letter-spacing:.1em; opacity:1; }
  body.nav-open{ overflow:hidden; }

  .hero{ height:78svh; }
  .hero-wordmark{ width:86vw; }
  .hero-cta{ top:auto; bottom:7svh; z-index:5; } /* clear of the scrim; below the menu overlay */
  .hero-transition{ height:22svh; }

  .manifiesto{ min-height:100svh; padding:18svh 20px 14svh; }
  .manifiesto .cap{ margin-bottom:4svh; }
  .vino-text{ margin-top:10svh; padding:0 4px; }

  .lugar{ height:46svh; }

  .etiqueta{ min-height:0; padding:22svh 20px 16svh; display:block; }
  .etiqueta-title{ max-width:none; }
  .etiqueta-body{ max-width:none; }
  /* tall enough that the fixed bottle is held on screen while it completes a
     turn AND still has room to fade out before Añadas arrives */
  .has-bottle .bottle-slot{ display:block; height:240svh; }
  /* mobile: the cream notch that closes Etiqueta, and Añadas behind it,
     are the layers the bottle slides under */
  .etiqueta .notch-bottom{ z-index:3; }
  .anadas{ z-index:3; background:var(--bone); }
  /* Nosotros never meets the bottle here — no sheet edge needed */
  .historia-cap{ display:none; }
  .historia::before{ display:none; }
  .bottle-still{ height:88svh; }

  .anadas{ padding:calc(var(--nav-h) + 6svh) 20px 4svh; }
  .anada{ min-height:0; padding:10svh 0; display:block; }
  .anada.a-left,.anada.a-right{ justify-content:flex-start; }
  .anada-content{ max-width:100%; }

  .historia{ padding:16svh 0 0; }
  .historia-quote{ padding:0 20px; }
  .nombre-block{ grid-template-columns:1fr; gap:16px; margin-top:10svh; padding:0 20px; }
  .historia-photo{ margin-top:10svh; }

  .contacto{ padding:20svh 20px 0; }
  .contacto-emblema{ margin-bottom:6svh; }
  .contacto-links{ margin-top:8svh; }
  .footer{ margin-top:10svh; padding:22px 0; text-align:center; }
  .footer-about{ margin:0 auto 18px; }
  .footer-meta{ flex-direction:column; gap:10px; }
}
/* reduced motion: keep colour/opacity feedback, drop the movement */
@media (prefers-reduced-motion:reduce){
  .contact-link:hover > span:first-child,
  .contact-link:hover .contact-arrow{ transform:none; }
  .nav-toggle span{ transition:background .2s linear; }
}

/* print: show every revealed block (GSAP writes inline styles, hence
   !important) and leave out the fixed bottle, curtain and scrim */
@media print{
  .reveal, .cap, .anada-year, .line > span,
  .hero-cta, .hero-wordmark, .hero-bajada, .nav{
    opacity:1 !important; transform:none !important; visibility:visible !important;
  }
  .historia-photo img{ clip-path:none !important; transform:none !important; }
  .scene-layer, .curtain, .nav-scrim, .nav-toggle{ display:none !important; }
  .nav{ position:absolute; }
}