@font-face{
  font-family:'Neue Montreal';
  src: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.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; }
body{
  font-family:var(--font-grotesk);
  background:var(--bone); color:var(--t-on-bone);
  font-size:16px; line-height:1.6; overflow-x:hidden;
}

/* the bottle layer: above section backgrounds, below section content */
#scene{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:2; pointer-events:none; display:block;
  opacity:0;   /* the scene drives this — no flash before load */
}

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

/* ───────── 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;
}
.nav{
  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 img{ display:block; }
.nav-links{ display:flex; gap:32px; list-style:none; }
.nav-links a{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--t-on-ink); text-decoration:none; opacity:.85;
  transition:opacity .25s var(--ease);
}
.nav-links a:hover{ opacity:1; }

/* hamburger toggle — hidden on desktop, shown under 900px */
.nav-toggle{
  display:none; width:34px; height:34px; padding:0;
  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);
}
.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); z-index:5;
}
.hero-cta:hover{ background:rgba(255,255,255,.12); }
.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); }
.reveal{ will-change:transform,opacity; }
/* 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 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:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--t-on-ink);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* ───────── 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 ───────── */
.historia{ padding:20vh 0 0; text-align:center; }
.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; }
.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; }
.contacto::before{
  content:''; position:absolute; inset: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{ color:var(--t-on-ink-soft); transition:transform .35s var(--ease), color .35s var(--ease); }
.contact-link:hover .contact-arrow{ transform:translateX(6px); color:var(--t-on-ink); }

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

/* 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; }
  .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 */
  .bottle-slot{ display:block; height:240svh; }

  .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; flex-direction:column; gap:10px; padding:22px 0; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}