/* =====================================================================
   FINCA LAS CUEVAS — hoja de estilos
   Vanilla CSS, sin preprocesador ni framework.
   ===================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  /* TRES COLORES. Nada más entra a la paleta: cualquier color nuevo tiene
     que ser una variación (más clara, más oscura o traslúcida) de uno de
     estos tres. Crema para los fondos claros y para el texto sobre oscuro;
     verde y vino para los fondos oscuros y para el texto sobre claro. */
  --cream:#F5F1E9;
  --verde:#183029;
  --bordo:#912F46;

  /* Variaciones de crema */
  --surface:#EBE5D9;                    /* un punto más oscuro: bloque .cream y tarjetas */
  --line:#D8D1C2;                       /* más oscuro todavía: filetes y bordes */
  --cream-soft:rgba(245,241,233,.82);   /* texto secundario sobre fondo oscuro */
  --cream-faint:rgba(245,241,233,.62);  /* notas al pie sobre fondo oscuro */

  /* Variaciones de verde */
  --muted:#4A5F58;                      /* verde desaturado: texto secundario sobre claro */

  /* Variación de vino */
  --bordo-hondo:#5E1E2E;                /* fondo de los bloques .wine */

  /* Alias heredados: apuntan a los tres de arriba, no agregan color. */
  --bg:var(--cream);
  --ink:var(--verde);
  --charcoal:var(--verde);
  --wine:var(--bordo);
  --wine-dark:var(--bordo-hondo);

  /* Scrim para texto sobre foto/video */
  /* 15,31,26 es el verde profundo (#0F1F1A) con el que se arman todos los
     velos sobre foto: única forma de tener alfa sin duplicar tokens. */
  --scrim:rgba(15,31,26,.82);

  /* Tipografía: una didona de alto contraste para el display y una
     grotesca neutra para el resto. */
  --display:'Bodoni Moda',Didot,'Bodoni MT','Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Escala tipográfica */
  --text-xs:.75rem;      /* 12 */
  --text-sm:.8125rem;    /* 13 */
  --text-base:1rem;      /* 16 */
  --text-lg:1.125rem;    /* 18 */
  --text-xl:1.375rem;    /* 22 */
  --text-2xl:clamp(1.5rem,2.4vw,2rem);
  --text-3xl:clamp(2rem,3.4vw,2.75rem);
  --text-4xl:clamp(2rem,6vw,5rem);
  --text-5xl:clamp(3.5rem,10vw,9rem);

  /* Espaciado (base 4/8) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Medidas */
  --wrap:1152px;
  --nav-h:80px;

  /* Curva compartida (la misma que usa la referencia) */
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ============ 2. RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--s5))}
body{
  margin:0;padding-top:var(--nav-h);
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--text-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video,iframe{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{
  margin:0;font-family:var(--display);font-optical-sizing:none;font-variation-settings:'opsz' 18;font-weight:500;font-style:normal;
  line-height:1;text-transform:uppercase;letter-spacing:.005em;text-wrap:balance;
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.dark :focus-visible,.hero :focus-visible,.wine :focus-visible{outline-color:var(--cream)}

/* ============ 3. LAYOUT PRIMITIVES ============ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.section{padding-block:var(--s9)}
.section--tight{padding-block:var(--s8)}
/* Dos secciones seguidas del mismo fondo no necesitan el aire de las dos:
   sin corte de color, esa juntura se leía como un agujero. */
main > .section + .section:not(.dark):not(.wine):not(.cream){padding-top:var(--s7)}
.dark{background:var(--charcoal);color:var(--cream)}
.wine{background:var(--wine-dark);color:var(--cream)}
.cream{background:var(--surface)}
.stack>*+*{margin-top:var(--s4)}
.measure{max-width:62ch}

/* enlace de salto (accesibilidad) */
.skip{
  position:absolute;left:var(--s4);top:-100%;z-index:60;
  background:var(--cream);color:var(--ink);
  padding:var(--s3) var(--s5);font-size:var(--text-sm);font-weight:600;
  transition:top .2s ease;
}
.skip:focus{top:var(--s4)}

/* ============ 4. KICKERS Y TÍTULOS ============ */
.kicker{
  display:inline-block;
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.25em;
  font-weight:600;
  color:var(--bordo);
}
.dark .kicker,.wine .kicker,.hero .kicker,.pagehero .kicker,.banda .kicker{color:var(--cream)}
.title{font-size:var(--text-4xl)}
/* El ritmo del bloque se fija acá una sola vez, no con márgenes inline. */
.kicker + .title,.kicker + .pagehero__title,.kicker + .hero__title{margin-top:var(--s3)}
.title + .lead,.title + .body,.pagehero__title + .pagehero__lead{margin-top:var(--s5)}
.dark .title,.wine .title,.dark h2,.wine h2{color:var(--cream)}
.title--lg{font-size:var(--text-5xl)}
.title--sm{font-size:var(--text-2xl)}
.lead{font-size:var(--text-lg);color:var(--muted);line-height:1.7}
.dark .lead,.wine .lead{color:var(--cream-soft)}
.body{color:var(--muted);line-height:1.75}
.dark .body,.wine .body{color:var(--cream-soft)}
.rule{width:48px;height:1px;background:var(--wine);margin-top:var(--s4)}

/* ============ 5. BOTONES ============ */
.btn{
  display:inline-block;
  padding:1.25rem 2.75rem;
  font-size:var(--text-sm);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.16em;
  text-decoration:none;
  text-align:center;
  border:1px solid transparent;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn--solid{background:var(--cream);color:var(--verde)}
.btn--solid:hover{background:var(--surface)}
.btn--wine{background:var(--bordo);color:var(--cream)}
.btn--wine:hover{background:var(--bordo-hondo)}
.btn--ghost{border-color:rgba(245,241,233,.55);color:var(--cream)}
.btn--ghost:hover{background:var(--cream);color:var(--verde);border-color:var(--cream)}

/* enlace subrayado */
.link-underline{
  display:inline-block;
  font-size:var(--text-sm);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.16em;
  text-decoration:none;
  padding-bottom:var(--s2);
  border-bottom:1px solid currentColor;
  transition:opacity .35s var(--ease);
}
.link-underline:hover{opacity:.6}
.dark .link-underline,.wine .link-underline,
.banda .link-underline,.pagehero .link-underline,.hero .link-underline{color:var(--cream)}
.cream .link-underline,.section .link-underline{color:var(--bordo)}

/* ============ 6. HEADER / NAV ============ */
/* Barra clara siempre visible, como la referencia: el hero ya no
   necesita degradado de apoyo y el contraste deja de depender de la foto. */
.header{
  position:fixed;inset:0 0 auto 0;z-index:40;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  transition:background-color .45s var(--ease),border-color .45s var(--ease);
}
/* Hasta que main.js marca html.listo (primer cuadro pintado) el header no
   transiciona: si la página se recarga scrolleada, aparece ya en su estado. */
html:not(.listo) .header,html:not(.listo) .nav,html:not(.listo) .nav__link,
html:not(.listo) .nav__logo,html:not(.listo) .nav__toggle span,
html:not(.listo) .header::before{transition:none !important}
/* El header arranca transparente sobre el hero y, al bajar, vuelve a la barra
   clara. Vale en TODOS los anchos: en celular cambia el tamaño, no la idea. */
/* El degradé va en un ::before que se funde por opacidad: background-image
   no es animable y aparecía de golpe mientras el crema se fundía. z-index
   -1 lo deja debajo del nav (el header ya es contexto de apilamiento). */
.header::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(15,31,26,.90) 0%,rgba(15,31,26,.60) 52%,rgba(15,31,26,0) 100%);
  opacity:0;transition:opacity .45s var(--ease);
}
.header:not(.is-stuck){background-color:transparent;border-bottom-color:transparent}
.header:not(.is-stuck)::before{opacity:1}
/* El contenido arranca arriba de todo: el video del hero queda detrás del
   header transparente en vez de empezar debajo de una barra sólida. */
body{padding-top:0}
.header .nav{transition:height .45s var(--ease)}
.header:not(.is-stuck) .nav__logo,
.header:not(.is-stuck) .nav__link,
.header:not(.is-stuck) .nav__toggle{color:var(--cream)}
.header:not(.is-stuck) .nav__logo,
.header:not(.is-stuck) .nav__link{text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* La hamburguesa es un filete de 1,5px: sobre foto necesita su propia sombra. */
.header:not(.is-stuck) .nav__toggle span{box-shadow:0 1px 2px rgba(0,0,0,.4)}
/* Con el menú abierto el header ya es crema (lo fuerza main.js), pero la
   transición del color del logo no debe arrastrar la sombra. */
.header.is-stuck .nav__toggle span{box-shadow:none}

/* Celular y tablet: el mismo gesto, con la hamburguesa y medidas más chicas. */
@media (max-width:1024px){
  /* La barra es 12px más baja que en escritorio, así que el degradé se
     comprime y pierde densidad justo donde va el texto: se refuerza. */
  .header::before{background:linear-gradient(to bottom,rgba(15,31,26,.92) 0%,rgba(15,31,26,.64) 55%,rgba(15,31,26,0) 100%)}
  .header:not(.is-stuck) .nav{height:calc(var(--nav-h) + 24px)}
  .header:not(.is-stuck) .nav__logo{font-size:1.5rem}
}

@media (min-width:1025px){
  .header:not(.is-stuck) .nav{height:calc(var(--nav-h) + 36px)}
  .header:not(.is-stuck) .nav__logo{font-size:1.7rem}
  .header:not(.is-stuck) .nav__link{font-size:.9375rem}
  .header:not(.is-stuck) .nav__link:hover{color:var(--cream);border-bottom-color:rgba(245,241,233,.5)}
  .header:not(.is-stuck) .nav__link[aria-current="page"]{color:var(--cream);border-bottom-color:var(--cream)}
}
.header__scrim{display:none}

.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:var(--nav-h);gap:var(--s5);
}
.nav__logo{
  grid-column:2;justify-self:center;
  font-family:var(--display);font-optical-sizing:none;font-variation-settings:'opsz' 18;font-size:var(--text-xl);font-weight:500;font-style:normal;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--verde);text-decoration:none;white-space:nowrap;
  transition:font-size .45s var(--ease),color .35s var(--ease);
}
.nav__list{display:flex;align-items:center;gap:var(--s6)}
.nav__list--izq{grid-column:1;justify-self:start}
.nav__list--der{grid-column:3;justify-self:end}
.nav__link{
  display:inline-block;
  font-size:var(--text-sm);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);text-decoration:none;
  padding-bottom:var(--s1);
  border-bottom:1px solid transparent;
  transition:font-size .45s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.nav__link:hover{color:var(--verde)}
.nav__link[aria-current="page"]{color:var(--verde);border-bottom-color:var(--bordo)}

/* botón hamburguesa */
.nav__toggle{
  display:none;position:relative;
  transition:color .35s var(--ease);
  width:44px;height:44px;margin-right:calc(var(--s2) * -1);
  grid-column:3;justify-self:end;
  color:var(--verde);
}
.nav__toggle span{
  position:absolute;left:50%;top:50%;
  display:block;width:24px;height:1.5px;margin-left:-12px;
  background:currentColor;
  transition:transform .3s ease,opacity .3s ease,box-shadow .35s var(--ease);
}
.nav__toggle span:nth-child(1){transform:translateY(-6px)}
.nav__toggle span:nth-child(3){transform:translateY(6px)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

/* menú móvil */
.nav__mobile{
  display:none;
  background:var(--cream);
  border-top:1px solid var(--line);
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
}
.nav__mobile.is-open{display:block}
.nav__mobile a{
  display:block;
  padding:var(--s5) 0;
  font-family:var(--display);font-optical-sizing:none;font-variation-settings:'opsz' 18;
  font-size:var(--text-xl);
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--verde);text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .35s var(--ease);
}
.nav__mobile li:last-child a{border-bottom:0}
.nav__mobile a:hover{color:var(--bordo)}
.nav__mobile a[aria-current="page"]{color:var(--bordo)}

/* ============ 7. SCRIM DE MEDIA ============ */
/* Gradiente que garantiza legibilidad del texto sobre foto o video. */
.scrim{position:relative;overflow:hidden}
.scrim::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(to top,
    var(--scrim) 0%,
    rgba(15,31,26,.55) 28%,
    rgba(15,31,26,.15) 60%,
    rgba(15,31,26,.05) 100%);
}
/* Cada bloque de contenido declara su propio position/z-index (ver .exp__body,
   .banda__inner, .pagehero__inner, .hero__inner, .galeria figcaption).
   No usar una regla genérica .scrim>* acá: pisaría esos position y el texto
   se saldría de lugar. */

/* ============ 7b. MEDIA VERTICAL ============ */
/* Casi todo el material de la finca es de celular o drone en retrato.
   Metido en un contenedor apaisado, object-fit:cover le corta la cabeza
   y los pies. Estas clases le dan al contenedor la proporción de la foto
   para que se vea entera. */
.media-v{aspect-ratio:3/4}
.media-v916{aspect-ratio:9/16}

/* En columnas de escritorio la foto ya tiene alto propio; ahí manda el
   layout y la proporción vuelve a ser automática. */
@media (min-width:1025px){
  .split__media.media-v,
  .split__media.media-v916{aspect-ratio:auto}
}

/* Punto de interés del recorte: por defecto centro, pero varias fotos
   tienen el sujeto arriba (interiores con techo, drone con horizonte). */
.pos-top img{object-position:50% 22%}
.pos-bottom img{object-position:50% 78%}

/* ============ 8. PARALLAX ============ */
/* La imagen lleva sobre-escaneo fijo (118%) y el desplazamiento es de ±4%,
   así el movimiento nunca descubre los bordes del contenedor. */
.parallax{position:relative;overflow:hidden}
/* `img` y no `>img`: varios bloques envuelven la imagen en <picture>
   para servir un recorte distinto en móvil. */
.parallax img{
  position:absolute;inset:-9% 0;
  width:100%;height:118%;
  object-fit:cover;
}
/* La capa de GPU se pide sólo mientras el bloque está cerca de la pantalla
   (clase que pone el JS): con 8-15 fotos Retina en capa permanente la
   memoria de video se iba a cualquier lado. */
.parallax.en-vista img{will-change:transform}

/* ============ 9. HERO ============ */
.hero{
  position:relative;
  min-height:560px;height:calc(100dvh - var(--nav-h));
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--charcoal);
}
/* El video llena la pantalla en cualquier proporción (16:10, 16:9, iPad):
   object-fit:cover recorta por los costados, nunca arriba/abajo, porque el
   video es más ancho que cualquier pantalla de escritorio. */
.hero__video{object-position:50% 50%}
/* En escritorio el header flota encima (transparente), así que el hero
   ocupa la pantalla entera; en móvil/tablet la barra es sólida y el hero
   toma lo que queda debajo. */
@media (min-width:1025px){.hero{height:100dvh}}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.hero__scrim{
  position:absolute;inset:0;
  /* Corto y sutil, como el de las subpáginas, apenas más alto porque el
     bloque de texto del hero (etiqueta + título de dos líneas + párrafo +
     botones) es más alto. El tercio superior del video queda limpio. */
  /* Dos capas: la franja de abajo (donde van párrafo y botones) y una
     viñeta desde la izquierda que acompaña la columna del texto. Arriba a
     la derecha el video queda limpio. */
  background:
    linear-gradient(to right,rgba(15,31,26,.50) 0%,rgba(15,31,26,.34) 28%,rgba(15,31,26,.12) 50%,rgba(15,31,26,0) 66%),
    linear-gradient(to top,rgba(15,31,26,.84) 0%,rgba(15,31,26,.62) 26%,rgba(15,31,26,.34) 48%,rgba(15,31,26,0) 72%);
}
.hero__inner{position:relative;z-index:1;width:100%;padding-bottom:var(--s9)}
/* Texto chico sobre video: un halo oscuro pegado a la letra (como los
   subtítulos) sostiene la lectura en cualquier cuadro sin oscurecer el video. */
.hero .kicker{text-shadow:0 0 1px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8),0 1px 5px rgba(0,0,0,.6)}
.hero__lead{text-shadow:0 0 2px rgba(0,0,0,.85),0 1px 6px rgba(0,0,0,.55)}
.hero__title{text-shadow:0 0 3px rgba(0,0,0,.5),0 2px 18px rgba(0,0,0,.4)}
.hero__title{font-size:var(--text-5xl);color:var(--cream);margin-top:var(--s4)}
.hero__lead{
  font-size:var(--text-lg);color:var(--cream-soft);
  margin-top:var(--s5);max-width:34ch;line-height:1.7;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}

/* hero de páginas interiores */
.pagehero{
  position:relative;
  min-height:420px;height:calc(72vh - var(--nav-h) / 2);
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--charcoal);
}
/* Scrim propio, más denso que el general: estas fotos tienen zonas muy
   claras (pasto al sol, cielo) justo donde va la etiqueta y el título. */
/* Sólo la franja donde va el texto; el resto de la foto queda limpia. */
.pagehero::after{
  background:linear-gradient(to top,
    rgba(15,31,26,.82) 0%,
    rgba(15,31,26,.60) 26%,
    rgba(15,31,26,.30) 46%,
    rgba(15,31,26,0) 64%);
}
/* La etiqueta y el párrafo son chicos: una sombra mínima los sostiene
   sobre las zonas claras (cielo, pasto al sol) sin oscurecer más la foto. */
.pagehero .kicker{text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pagehero__lead{text-shadow:0 1px 3px rgba(0,0,0,.45)}
.pagehero__inner{position:relative;z-index:1;width:100%;padding-bottom:var(--s8)}
.pagehero__title{font-size:var(--text-4xl);color:var(--cream);margin-top:var(--s3)}
.pagehero__lead{
  font-size:var(--text-lg);color:var(--cream-soft);
  margin-top:var(--s4);max-width:38ch;line-height:1.7;
}

/* ============ 10. GRID DE EXPERIENCIAS ============ */
/* auto-rows fijo: sin él la tarjeta angosta queda más baja que la ancha
   y deja un hueco visible en la fila. */
.experiencias{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--s4);grid-auto-rows:384px;margin-top:var(--s7);
}
.exp{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  /* En escritorio la altura la fija grid-auto-rows. Si acá se colara el
     aspect-ratio de .media-v, la tarjeta crecería más que su fila y se
     montaría sobre la de abajo. La proporción vertical solo se aplica en
     móvil, donde las filas son automáticas (ver sección 24). */
  aspect-ratio:auto;
}
.exp--wide{grid-column:span 7}
.exp--narrow{grid-column:span 5}
.exp--medio{grid-column:span 6}
.exp>img{transition:transform .7s ease}
.exp:hover>img{transform:scale(1.04)}
/* Estas tarjetas llevan el texto sobre fotos muy dispares (galpón blanco a
   pleno sol, cielo del atardecer). El scrim general no alcanza: acá va uno
   más denso para que el título se lea sobre cualquier foto. */
.exp::after{
  background:linear-gradient(to top,
    rgba(15,31,26,.92) 0%,
    rgba(15,31,26,.74) 38%,
    rgba(15,31,26,.34) 68%,
    rgba(15,31,26,.10) 100%);
}
.exp__body{position:absolute;inset:auto 0 0 0;padding:var(--s6);z-index:1}
.exp--medio .exp__body{padding-bottom:calc(var(--s6) + 1.6em + var(--s3))}
/* Señal de que la tarjeta se abre: abajo a la derecha, opuesta al texto. */
.exp__mas{
  position:absolute;right:var(--s6);bottom:var(--s6);z-index:2;
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);
  padding-bottom:2px;border-bottom:1px solid var(--cream-faint);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.exp__mas::after{content:'→';font-size:1.1em;transition:transform .4s var(--ease)}
.exp:hover .exp__mas::after{transform:translateX(4px)}
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  .exp__mas{opacity:0;transform:translateY(6px)}
  .experiencias > .exp:hover .exp__mas{opacity:1;transform:none}
}
.exp__kicker{
  display:block;font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--cream);
}
.exp__title{font-size:var(--text-2xl);color:var(--cream);margin-top:var(--s1)}
.exp__desc{
  margin-top:var(--s2);max-width:42ch;
  font-size:var(--text-sm);line-height:1.6;color:var(--cream-soft);
}

/* ============ 11. FRANJA PANORÁMICA ============ */
.banda{position:relative;min-height:340px;height:52vh;overflow:hidden;display:flex;align-items:flex-end}
.banda__inner{position:relative;z-index:1;width:100%;padding-bottom:var(--s7)}
.banda__frase{
  font-family:var(--display);font-optical-sizing:none;font-variation-settings:'opsz' 18;font-style:normal;font-weight:500;
  text-transform:uppercase;line-height:1;
  font-size:var(--text-4xl);color:var(--cream);max-width:22ch;line-height:1.15;
}

/* ============ 12. SPLIT (imagen + texto) ============ */
/* La imagen sangra hasta el borde de la pantalla; el texto respeta el ancho
   de lectura con su propio padding. */
/* minmax(0,1fr) y no 1fr: 1fr equivale a minmax(auto,1fr) y la columna del
   texto crecía más de la mitad cuando su contenido mínimo (padding de
   alineación + palabra más larga) lo pedía; la foto quedaba en 47-48%. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split__media{position:relative;min-height:600px;overflow:hidden}
/* Video que reemplaza a la foto: llena la caja como lo hacía la imagen. */
.split__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.split__body{display:flex;align-items:center;padding:var(--s9) var(--s8)}
.split__body>div{max-width:36rem}
.split--rev .split__media{order:2}
.split--rev .split__body{order:1;justify-content:flex-end}

/* El texto de los bloques a sangre se alinea con la misma columna que el
   contenido dentro de .wrap. Sin esto arranca a 64px del borde mientras el
   resto de la página arranca a ~168px, y el ojo lo ve saltar al scrollear. */
@media (min-width:1025px){
  .split--rev .split__body,
  .actividad:nth-child(even) .actividad__body{
    padding-left:max(var(--s8), calc((100vw - var(--wrap)) / 2 + var(--s5)));
  }
  .split:not(.split--rev) .split__body,
  .actividad:not(:nth-child(even)) .actividad__body{
    padding-right:max(var(--s8), calc((100vw - var(--wrap)) / 2 + var(--s5)));
  }
}

/* ============ 13. MÉTRICAS ============ */
.metricas{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s7)}
.metrica dd{letter-spacing:.02em;
  margin:0;font-family:var(--display);font-optical-sizing:none;font-variation-settings:'opsz' 18;
  font-size:var(--text-3xl);color:var(--cream);
}
.metrica dt{
  margin-top:var(--s1);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.1em;color:var(--cream-faint);
}

/* ============ 14. COMODIDADES ============ */
.comodidades{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s3);margin-top:var(--s7);
}
.comodidades li{
  padding:var(--s5);background:var(--surface);border:1px solid var(--line);
  font-size:var(--text-sm);font-weight:500;
}
/* Un destacado con un tinte al 7% no se distingue de la celda normal
   (contraste entre fondos 1,00): va vino sólido. La especificidad tiene que
   ganarle a .comodidades li, que fija peso 500. */
.comodidades li.comodidades__destacado{
  grid-column:1/-1;
  padding:var(--s5);
  background:var(--bordo);
  border:1px solid var(--bordo);
  color:var(--cream);
  font-size:var(--text-sm);font-weight:600;
}


/* ============ 15. GALERÍA ============ */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7)}
.galeria--cuadrada{grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.galeria figure{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3}
.galeria--cuadrada figure{aspect-ratio:1/1}
/* Para fotos de celular en retrato: el contenedor acompaña la proporción. */
.galeria--vertical{grid-template-columns:repeat(4,1fr)}
.galeria--vertical figure{aspect-ratio:3/4}
/* El parallax escribe transform inline en la img, así que un transform:scale
   en CSS nunca gana. La propiedad `scale` es independiente y se compone con
   el transform del parallax. Sólo donde hay mouse. */
.galeria img{transition:scale .7s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .galeria figure:hover img{scale:1.10}
}
.galeria figcaption{line-height:1.2;text-wrap:balance;
  position:absolute;inset:auto 0 0 0;padding:var(--s5);z-index:1;
  font-family:var(--display);font-optical-sizing:none;font-variation-settings:'opsz' 18;font-weight:600;
  font-size:var(--text-lg);color:var(--cream);
}

/* ============ 16. PASOS (día de campo) ============ */
.pasos{margin-top:var(--s8)}
.paso{display:flex;gap:var(--s6)}
.paso__num{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.paso__num span{
  width:40px;text-align:center;
  font-family:var(--display);font-optical-sizing:none;font-variation-settings:'opsz' 18;font-size:var(--text-xl);color:var(--wine);
}
.paso__linea{width:1px;flex:1;background:var(--line);margin-top:var(--s3)}
.paso__body{padding-bottom:var(--s7)}
.paso:last-child .paso__body{padding-bottom:0}
.paso__body h3{font-size:var(--text-xl)}
.paso__body p{margin-top:var(--s2);color:var(--muted);line-height:1.75}

/* ============ 17. ACTIVIDADES (filas alternadas) ============ */
.actividad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.actividad:nth-child(even){background:var(--surface)}
.actividad__media{position:relative;min-height:440px;overflow:hidden}
.actividad:nth-child(even) .actividad__media{order:2}
.actividad__body{display:flex;align-items:center;padding:var(--s8)}
.actividad__body>div{max-width:34rem}

/* ============ 18. SENDERISMO ============ */
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s9);align-items:start}
.puntos{margin-top:var(--s7)}
.punto{border-left:2px solid var(--bordo);padding-left:var(--s5)}
.punto+.punto{margin-top:var(--s5)}
.punto h3{font-size:var(--text-lg)}
.punto p{margin-top:var(--s1);font-size:var(--text-sm);color:var(--muted);line-height:1.7}
.fichas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}
.ficha{padding:var(--s5);background:var(--surface);border:1px solid var(--line);text-align:center}
.ficha b{text-transform:uppercase;letter-spacing:.03em;display:block;font-family:var(--display);font-optical-sizing:none;font-variation-settings:'opsz' 18;font-weight:600;font-size:var(--text-xl);color:var(--wine)}
.ficha.ficha--ancha{
  grid-column:1/-1;
  background:var(--bordo);
  border-color:var(--bordo);
  color:var(--cream);
  font-size:var(--text-sm);font-weight:600;
}

.ficha span{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.lista-check{margin-top:var(--s6)}
.lista-check li{display:flex;gap:var(--s3);font-size:var(--text-sm);color:var(--cream-soft)}
.lista-check li+li{margin-top:var(--s3)}
.lista-check li::before{
  content:'';flex-shrink:0;width:6px;height:6px;margin-top:9px;
  border-radius:50%;background:var(--cream);
}

/* ============ 19. CONTACTO ============ */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:start}
.tarjeta{display:block;padding:var(--s7);text-decoration:none;transition:background-color .3s ease,border-color .3s ease}
.tarjeta--wine{background:var(--wine);color:var(--cream)}
.tarjeta--wine:hover{background:var(--wine-dark)}
.tarjeta--wine h2{font-size:var(--text-2xl)}
.tarjeta--wine .dato{margin-top:var(--s2);font-size:var(--text-lg);font-weight:500}
.tarjeta--wine .nota{margin-top:var(--s2);font-size:var(--text-sm);color:var(--cream-soft)}
.tarjeta--linea{background:var(--surface);border:1px solid var(--line)}
a.tarjeta--linea:hover{border-color:var(--wine)}
.tarjeta--linea h2{font-size:var(--text-xl)}
.tarjeta--linea p{margin-top:var(--s2);color:var(--muted)}
.tarjeta--acento{background:rgba(145,47,70,.07);border:1px solid rgba(145,47,70,.28)}
.tarjeta--acento h2{font-size:var(--text-xl)}
.tarjeta--acento p{margin-top:var(--s2);font-size:var(--text-sm);color:var(--muted)}
.tarjeta ul{margin-top:var(--s4)}
.tarjeta ul li{font-size:var(--text-sm);color:var(--muted)}
.tarjeta ul li+li{margin-top:var(--s1)}
.mapa{position:sticky;top:calc(var(--nav-h) + var(--s5))}
/* El embed de Google es el único bloque con paleta ajena (menta, celeste,
   blanco puro): se desatura y entibia lo justo para que entre en la casa
   sin dejar de leerse. */
.mapa__caja{
  filter:saturate(.55) sepia(.10) contrast(.96);
  width:100%;
  height:clamp(420px, calc(100dvh - 11rem), 780px);
  border:1px solid var(--line);
  background:var(--surface);
}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.mapa p{margin-top:var(--s3);font-size:var(--text-xs);color:var(--muted)}

/* ============ 20. CTA FINAL ============ */
.cta{text-align:center}
.cta__inner{max-width:46rem;margin-inline:auto}
.cta p{margin-top:var(--s5)}
.cta .btn{margin-top:var(--s7)}
.nota-cta{margin-top:var(--s5);font-size:var(--text-sm);color:var(--muted)}

/* ============ 21. FOOTER ============ */
.footer{background:var(--verde);color:var(--cream-soft)}
.footer__grid{
  display:grid;grid-template-columns:5fr 3fr 4fr;
  gap:var(--s7);padding-block:var(--s9) 0;
}
.footer h2{font-size:var(--text-3xl);color:var(--cream)}
.footer h3{
  font-family:var(--sans);font-style:normal;
  font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--cream);margin-bottom:var(--s5);
}
.footer p,.footer li{color:var(--cream-soft)}
/* Sin esto, en la columna Contacto conviven dos enlaces y una dirección
   exactamente iguales: el subrayado tenue es lo único que los separa. */
.footer a{
  text-decoration:underline;text-decoration-color:rgba(245,241,233,.28);
  text-underline-offset:3px;transition:color .3s ease,text-decoration-color .3s ease;
}
.footer a:hover{text-decoration-color:currentColor}
.footer a:hover{color:var(--cream)}
.footer__links li+li{margin-top:var(--s3)}
.footer p.footer__nota,.footer li.footer__nota{color:var(--cream-faint)}
.footer__base{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s8);padding-block:var(--s6) var(--s7);
  border-top:1px solid rgba(245,241,233,.18);
  font-size:var(--text-sm);color:var(--cream-soft);
}
/* La firma del estudio sí se subraya: sin eso no se lee como enlace. */
.footer__base a{
  color:var(--cream);
  text-decoration:underline;
  text-decoration-color:rgba(245,241,233,.45);
  text-underline-offset:3px;
}
.footer__base a:hover{color:var(--cream);text-decoration-color:currentColor}
/* En celular el botón flotante de WhatsApp queda justo encima de la
   esquina inferior derecha: apilamos la firma y dejamos aire para que
   el enlace no quede debajo del botón (era intocable). */
@media (max-width:640px){
  .footer__base{
    flex-direction:column;align-items:flex-start;gap:var(--s2);
    padding-bottom:calc(var(--s8) + 56px);
  }
}

/* ============ 22. FAB WHATSAPP ============ */
.fab{
  position:fixed;right:var(--s5);bottom:var(--s5);z-index:50;
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--verde);color:var(--cream);
  box-shadow:0 2px 12px rgba(15,31,26,.28);
  transition:transform .3s ease,box-shadow .3s ease;
}
.fab:hover{transform:scale(1.05);box-shadow:0 4px 18px rgba(15,31,26,.34)}
.fab svg{width:26px;height:26px;fill:currentColor}

/* ============ 23. MOVIMIENTO ============ */
/* Los estados iniciales solo se aplican si hay JS (clase .js en <html>),
   así sin JS el contenido se ve completo. */
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 1.8s cubic-bezier(.16,1,.3,1),transform 1.8s cubic-bezier(.16,1,.3,1);
}
/* escalonado de hijos */
.js .reveal-stagger>*{opacity:0;transform:translateY(20px)}
.js .reveal-stagger.is-in>*{
  opacity:1;transform:none;
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1);
}
.js .reveal-stagger.is-in>*:nth-child(2){transition-delay:.16s}
.js .reveal-stagger.is-in>*:nth-child(3){transition-delay:.32s}
.js .reveal-stagger.is-in>*:nth-child(4){transition-delay:.48s}
.js .reveal-stagger.is-in>*:nth-child(5){transition-delay:.64s}
.js .reveal-stagger.is-in>*:nth-child(6){transition-delay:.8s}
.js .reveal-stagger.is-in>*:nth-child(7){transition-delay:.96s}
.js .reveal-stagger.is-in>*:nth-child(8){transition-delay:1.12s}

/* entrada del hero */
.js .hero-in{opacity:0;transform:translateY(20px);animation:heroIn 1.8s cubic-bezier(.16,1,.3,1) forwards}
.js .hero-in--1{animation-delay:.3s}
.js .hero-in--2{animation-delay:.6s}
.js .hero-in--3{animation-delay:.9s}
.js .hero-in--4{animation-delay:1.2s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* ============ 24. RESPONSIVE ============ */
@media (max-width:1024px){
  :root{--s9:72px}
  .nav__list{display:none}
  .nav__toggle{display:block}
  .split,.actividad,.dos-col,.contacto{grid-template-columns:1fr}
  /* Ninguna imagen puede ocupar la pantalla entera: si no, se scrollea una
     foto completa sin haber leído todavía de qué habla. El tope va con
     max-height porque varias traen su aspect-ratio (algunas inline) y ésa
     es la única forma de ganarles sin pelear la cascada. */
  .split__media,.actividad__media{min-height:0;aspect-ratio:4/3;max-height:52dvh}
  .exp,.banda,.galeria figure,
  main .parallax[style*="aspect-ratio"]{max-height:62dvh}
  /* Las fotos verticales conservan su proporción: si acá quedara 4/3,
     object-fit:cover les cortaría la mitad del alto. Va después de la
     regla de arriba a propósito, para ganarle en la cascada. */
  .split__media.media-v,.actividad__media.media-v{aspect-ratio:1/1}
  .split__media.media-v916,.actividad__media.media-v916{aspect-ratio:4/3}
  /* En una sola columna la foto arriba llega antes que su contexto: se lee
     el texto y recién después se ve la imagen. */
  .split__body,.actividad__body{order:1}
  .split__media,.actividad__media{order:2}
  .split__body,.actividad__body{padding:var(--s8) var(--s5)}
  .split--rev .split__body{justify-content:flex-start}
  .dos-col{gap:var(--s8)}
  .mapa{position:static}
  .mapa__caja{height:420px}
  .comodidades{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:768px){
  :root{--s9:64px;--s8:48px}

  /* Heroes: en lugar de una altura en vh (que da una caja muy angosta y
     alta, y obliga a recortar la foto a la mitad), la caja toma 3:4 —
     la misma proporción del recorte que se sirve en móvil. Así entra
     entera y no se pierde nada. */
  /* El hero ocupa la pantalla entera: con el header transparente encima, al
     entrar no se ve otra cosa que el video. El recorte lo hace object-fit
     por los costados, nunca arriba y abajo. */
  .hero{width:100%;height:100dvh;aspect-ratio:auto;min-height:0;max-height:none}
  /* width explícito: con max-height, aspect-ratio transfería la limitación
     al ancho y quedaba una franja crema a la derecha (768x1024). */
  .pagehero{width:100%;height:auto;aspect-ratio:3/4;min-height:0;max-height:88dvh}
  .hero__inner{padding-bottom:var(--s7)}
  /* El <br> del HTML da el único salto; nowrap impide que "LAS CUEVAS" se
     parta en dos. El tamaño se calcula para que entre desde 320px. */
  .hero__title{white-space:nowrap;font-size:clamp(2.25rem,12.5vw,4.5rem)}
  /* En el celu el texto ocupa más de la mitad de la caja 3:4 y el video
     vertical tiene cuadros muy claros: el título arranca casi arriba de todo,
     así que el velo es parejo (como en la versión publicada, .35 arriba). */
  .hero__scrim{background:linear-gradient(to top,rgba(15,31,26,.88) 0%,rgba(15,31,26,.72) 30%,rgba(15,31,26,.56) 60%,rgba(15,31,26,.42) 100%)}
  .pagehero__inner{padding-bottom:var(--s6)}

  .experiencias{grid-auto-rows:auto;gap:var(--s3)}
  .exp--wide,.exp--narrow,.exp--medio{grid-column:span 12;aspect-ratio:4/3}
  /* Tarjetas con foto vertical: proporción propia. */
  .exp.media-v{aspect-ratio:3/4}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria--vertical{grid-template-columns:repeat(2,1fr)}
  .comodidades{grid-template-columns:repeat(2,1fr)}
  .metricas{gap:var(--s6)}
  .footer__grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero__actions{flex-direction:column;align-items:stretch;max-width:22rem}
  .banda__frase{font-size:var(--text-2xl)}
  .paso{gap:var(--s4)}

  /* Zona táctil cómoda (mínimo 44px): el texto no cambia de tamaño,
     lo que se agranda es el área tocable. */
  .footer__links a,.nav__mobile a{display:block;padding-block:var(--s3)}
  .link-underline{padding-block:var(--s3) var(--s2);min-height:44px}
  .nav__logo{display:flex;align-items:center;min-height:44px}
  .kicker{font-size:var(--text-sm)}

  /* La franja panorámica usa su recorte vertical en móvil. */
  .banda{height:auto;aspect-ratio:3/4;max-height:62dvh}
}

/* Móvil apaisado: la pantalla es baja, un hero 3:4 no entra. */
@media (max-width:900px) and (orientation:landscape){
  .hero{aspect-ratio:auto;height:100dvh;min-height:0}
  .pagehero{aspect-ratio:auto;height:calc(100dvh - var(--nav-h));min-height:0}
}

@media (max-width:420px){
  .galeria--cuadrada{grid-template-columns:repeat(2,1fr)}
  .fichas{grid-template-columns:1fr}
}

/* ============ 25. REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal,.js .reveal-stagger>*,.js .hero-in{opacity:1 !important;transform:none !important}
  .parallax img{transform:none !important}
}

/* ============ 26. ACORDEÓN Y REVELADOS ============ */
/* Acordeón horizontal: al pasar el mouse por una tarjeta, esa crece y las
   hermanas se comprimen. Sólo en escritorio y sólo si hay puntero fino;
   en táctil no hay hover y las tarjetas quedan iguales. */
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  .experiencias{
    display:flex;gap:2px;grid-auto-rows:auto;
    height:min(74vh,680px);
    /* a sangre: se sale del ancho de lectura para ocupar toda la pantalla */
    width:100vw;margin-left:calc(50% - 50vw);
  }
  .experiencias > .exp{flex:1 1 0;min-width:0;aspect-ratio:auto}
  /* Sólo la transición, con especificidad alta: el stagger la anulaba.
     El flex-grow NO va acá o le gana al :hover y el acordeón no abre. */
  .experiencias > .exp,
  .js .experiencias.reveal-stagger.is-in > .exp{
    transition:flex-grow .8s var(--ease-out),opacity .7s var(--ease-out),transform .7s var(--ease-out);
  }
  .experiencias:hover > .exp{flex-grow:.72}
  .experiencias > .exp:hover{flex-grow:2.1}
  /* el cuerpo aparece recién cuando la tarjeta se abre */
  .experiencias > .exp .exp__desc{
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .7s var(--ease-out),opacity .45s var(--ease),margin-top .7s var(--ease-out);
    margin-top:0;
  }
  .experiencias > .exp:hover .exp__desc{max-height:7em;opacity:1;margin-top:var(--s2)}
  /* comprimida, la tarjeta tiene ~240px: el título se achica y puede
     partirse para no desbordar el panel. */
  .experiencias > .exp .exp__body{overflow:hidden}
  .experiencias > .exp .exp__title{
    font-size:var(--text-xl);overflow-wrap:anywhere;
    transition:font-size .7s var(--ease-out);
  }
  .experiencias > .exp:hover .exp__title{font-size:var(--text-2xl)}
  .experiencias > .exp img{transition:transform 1s var(--ease-out),filter .6s var(--ease)}
  .experiencias:hover > .exp:not(:hover) img{filter:saturate(.55) brightness(.78)}
  .experiencias > .exp:hover img{transform:scale(1.05)}
}

/* En las galerías, la foto apuntada gana y las demás ceden. */
@media (hover:hover) and (pointer:fine){
  .galeria figure img{transition:transform .9s var(--ease-out),filter .5s var(--ease)}
  .galeria:hover figure:not(:hover) img{filter:saturate(.5) brightness(.8)}
  .galeria figure:hover img{scale:1.12}
}

/* Revelado de títulos: el texto sube desde detrás de una máscara.
   Ojo: NO se puede recortar el propio título con clip-path a área cero,
   porque IntersectionObserver deja de verlo y nunca dispara el revelado
   (se esconde a sí mismo y queda invisible para siempre). Por eso la
   máscara va en el h y el movimiento en un span interno que agrega el JS. */
.js h1.reveal,
.js h2.reveal,
.js h3.reveal{
  opacity:1;transform:none;
  overflow:hidden;
  /* aire para que la máscara no corte tildes ni la cola de la Q;
     el margen negativo lo compensa y el layout no se mueve */
  padding-block:.16em;margin-block:-.16em;
}
/* La máscara pisaba el aire de .kicker + .title (misma cascada, más
   especificidad): se repone descontando el padding de la máscara. */
.js .kicker + h2.reveal{margin-top:calc(var(--s3) - .16em)}
.js .reveal .linea{
  display:block;
  transform:translateY(125%);
}
.js .reveal.is-in .linea{
  transform:none;
  transition:transform 2s var(--ease-out);
}

/* Las fotos entran con un barrido de arriba hacia abajo. Se hace con una
   cortina del color del fondo que se recoge con transform (compuesto, sin
   repintar la foto): animar clip-path sobre la imagen repintaba la capa
   entera a Retina en cada cuadro, 4-6 a la vez en las galerías. */
:root{--tapa:var(--bg)}
.cream,.cream .reveal-media{--tapa:var(--surface)}
.dark,.dark .reveal-media{--tapa:var(--verde)}
.wine,.wine .reveal-media{--tapa:var(--wine-dark)}
.reveal-media{position:relative}
.js .reveal-media::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--tapa);
  transform-origin:50% 100%;
  transform:scaleY(1);
}
.js .reveal-media.is-in::before{
  transform:scaleY(0);
  transition:transform 2.2s var(--ease-out);
}
/* En las grillas, cada foto entra un poco después que la anterior. */
.js .galeria .reveal-media.is-in:nth-child(2)::before,
.js .experiencias .reveal-media.is-in:nth-child(2)::before{transition-delay:.24s}
.js .galeria .reveal-media.is-in:nth-child(3)::before,
.js .experiencias .reveal-media.is-in:nth-child(3)::before{transition-delay:.48s}
.js .galeria .reveal-media.is-in:nth-child(4)::before,
.js .experiencias .reveal-media.is-in:nth-child(4)::before{transition-delay:.72s}
.js .galeria .reveal-media.is-in:nth-child(5)::before{transition-delay:.96s}
.js .galeria .reveal-media.is-in:nth-child(6)::before{transition-delay:1.2s}

@media (prefers-reduced-motion:reduce){
  .js .reveal .linea{transform:none !important}
  .js .reveal-media::before{display:none !important}
  .experiencias > .exp .exp__desc{max-height:none !important;opacity:1 !important}
}

/* ============ 27. APERTURA DEL HERO ============ */
/* La referencia abre con la imagen encuadrada que se expande hasta ocupar
   toda la pantalla. Acá lo hacemos con clip-path sobre el video: no mueve
   layout, no pesa y arranca apenas carga la página. */
.js .hero__video,
.js .hero__scrim{
  animation:heroAbre 3s var(--ease-out) both;
}
@keyframes heroAbre{
  from{clip-path:inset(9% 14% 9% 14%)}
  to{clip-path:inset(0 0 0 0)}
}
/* El mismo gesto, más corto, para los heroes de las páginas interiores. */
.js .pagehero img{
  animation:heroAbre 2.4s var(--ease-out) both;
}
@media (prefers-reduced-motion:reduce){
  .js .hero__video,.js .hero__scrim,.js .pagehero img{animation:none}
}

/* ============ 28. AJUSTES FINOS DE NAV Y PIE ============ */
/* A 320px el logo empujaba la hamburguesa fuera de la pantalla. */
@media (max-width:400px){
  .nav{gap:var(--s2)}
  .nav__logo{font-size:1rem;letter-spacing:.06em}
  /* Acá no hay lugar para agrandar el logo sin pisar la hamburguesa (a 320px
     el de 24px llegaba a x=287 y el botón arranca en 260): arriba crece sólo
     la barra, que es lo que se percibe igual. */
  .header:not(.is-stuck) .nav__logo{font-size:1rem}
}
/* Con las listas ocultas, el logo se centra respecto de la pantalla.
   OJO: un hijo absoluto de una grilla con grid-column asignado toma como
   caja contenedora su ÁREA de grilla, no la grilla entera; con la columna
   2 de 0px el logo caía a la derecha, debajo de la hamburguesa. */
@media (max-width:1024px){
  .nav{position:relative}
  .nav__logo{grid-column:auto;position:absolute;left:50%;transform:translateX(-50%)}
}
/* El menú abierto tapa la página: antes se podía tocar lo de atrás. */
body.menu-open .header__scrim{
  display:block;position:fixed;inset:var(--nav-h) 0 0 0;
  background:rgba(15,31,26,.5);z-index:-1;
}
/* La firma del pie era un blanco táctil de 14px. */
@media (max-width:768px){
  .footer__base a{display:inline-block;padding-block:var(--s3)}
}
/* Red de seguridad: en pantallas muy angostas, que una palabra larga
   pueda partirse antes que desbordar. */
@media (max-width:420px){
  h1,h2,h3,.title{overflow-wrap:break-word}
}

/* ============ 29. MODO LIVIANO ============ */
/* El JS lo activa si, mientras el usuario scrollea, la mediana de cuadro
   supera 40 ms (menos de 25 fps): sin parallax, fotos y títulos sin
   transición. El contenido es idéntico; sólo deja de animarse. */
.lite .parallax img{transform:none !important;will-change:auto !important}
.lite .reveal-media::before{display:none !important}
.lite .reveal .linea,.lite .reveal-stagger>*,.lite .reveal{transition:none !important}
.lite .reveal-stagger>*{opacity:1 !important;transform:none !important}
.lite .experiencias > .exp,.lite .experiencias > .exp img{transition:none !important}

/* ============ 30. CTA SOBRE VINO ============ */
.wine.cta .btn--wine{background:var(--cream);color:var(--verde)}
.wine.cta .btn--wine:hover{background:var(--surface)}

/* ============ 32. SELECCIÓN DE TEXTO ============ */
/* Sin esto el navegador pinta la selección de celeste. */
::selection{background:var(--bordo);color:var(--cream)}
.dark ::selection,.wine ::selection,.hero ::selection,.pagehero ::selection{background:var(--cream);color:var(--verde)}

/* ============ 33. RAMAS QUE CRECEN (prueba) ============ */
/* Video con transparencia que nace de una esquina del bloque y crece
   cuando el bloque entra en pantalla. Va detrás del contenido: el bloque
   se vuelve contexto de apilamiento y su .wrap sube a z-index 1. */
.con-rama{position:relative;overflow:hidden}
.con-rama > .wrap{position:relative;z-index:1}
.rama{
  position:absolute;display:none;pointer-events:none;z-index:0;
  width:auto;height:auto;object-fit:contain;
}
/* Corridas un poco hacia afuera del bloque: el follaje asoma sin pisar la
   columna de texto centrada. */
.rama--der{right:-6vw;top:0;width:min(42vw,820px)}
.rama--izq{left:-3vw;bottom:0;width:min(38vw,660px)}
@media (min-width:1025px){.rama{display:block}}
.lite .rama{display:none}
@media (prefers-reduced-motion:reduce){.rama{display:none}}

/* ============ 31. TARJETAS CLARAS SOBRE VERDE ============ */
/* Las tarjetas conservan su fondo claro; el texto no puede heredar el
   crema del bloque .dark o desaparece. */
.dark .comodidades li{color:var(--ink)}
/* …salvo el destacado, que es vino sólido: empata en especificidad con la
   regla de arriba y, al estar después, ésta gana. */
.dark .comodidades li.comodidades__destacado{color:var(--cream)}
.dark .aviso{color:var(--cream);background:var(--bordo);border-color:var(--bordo)}
.dark .tarjeta--linea h2{color:var(--ink)}
.dark .tarjeta--linea p,.dark .tarjeta--acento p,.dark .tarjeta ul li{color:var(--muted)}
/* Dentro de un bloque .dark las tarjetas claras son todas iguales; el
   acento se distingue por un filete vino y su título en vino. */
.dark .tarjeta--acento{background:var(--surface);border-color:var(--line);border-left:3px solid var(--bordo)}
.dark .tarjeta--acento h2{color:var(--bordo)}
.dark .mapa p{color:var(--cream-soft)}
.wine .nota-cta,.dark .nota-cta{color:var(--cream-soft)}
.dark .galeria figcaption{color:var(--cream)}
/* .js .reveal.is-in{opacity:1} (0,3,0) mataba a .link-underline:hover (0,2,0):
   los 5 enlaces del sitio llevan las dos clases. */
.js .link-underline.reveal.is-in:hover{opacity:.62}