/* ══════════════════════════════════════════════════════════════════
   CABAÑA Y VIVERO LOS AVELLANOS — v2
   ──────────────────────────────────────────────────────────────────
   Tres decisiones que gobiernan todo el archivo:

   1 · SIN MARCOS. No hay un solo `border: 1px` en la hoja. Los
       bloques se separan por color, peso tipográfico y aire. Lo que
       antes era una línea de 1px ahora es un relleno, un cambio de
       fondo o simplemente espacio.

   2 · UN SOLO AMBIENTE. El sitio tenía dos temas —bosque oscuro y
       hueso claro— alternándose sección por sección, con todo el
       aparato de @property e interpolación para cruzarlos. Ahora hay
       un solo fondo: el verde del bosque, de arriba a abajo. La
       variación de tono la ponen la foto a la deriva y la niebla,
       que ya estaban; no hacía falta cambiar de página a medio
       scroll para conseguirla.

   3 · EL DESENFOQUE NO SE ANIMA. Animar filter:blur() por frame sobre
       una foto a sangre cuesta carísimo. En su lugar hay dos capas de
       la misma imagen —una nítida y una ya desenfocada— y el scroll
       sólo cruza opacidades: trabajo de compositor, no de pintura.
   ══════════════════════════════════════════════════════════════════ */

/* ─── El ambiente: un solo verde ──────────────────────────────────
   Ya no hay tema que cambiar, así que tampoco hace falta registrar
   las variables con @property ni interpolarlas: son propiedades
   personalizadas normales, escritas una vez. Se fueron con esto las
   ~40 líneas de @property, el bloque de transition de :root y el
   observador de secciones que las reescribía en vivo. */
:root{
  --bg:#0E1310;
  --ink:#EFE9DC;
  --ink2:#99A08D;
  --fill:rgba(239,233,220,.07);
  --fill2:rgba(239,233,220,.14);
  --acento:#D8C9AE;
  --borde:rgba(239,233,220,.14);
  --borde-vivo:rgba(239,233,220,.30);
  --sombra:rgba(0,0,0,.55);

  /* Radio de las tarjetas de foto */
  --r-foto:clamp(10px,1.1vw,16px);

  /* El acento no cambia: es la constante del sitio */
  --oxido:#A8503A;
  --oxido-vivo:#C0674A;
  --trigo:#D8C9AE;
  --estrella:#D9A441;
  /* Opacidad de la foto a la deriva del fondo. El promedio de la
     imagen es un oliva (104,97,83): sobre el bosque aclara apenas y
     tolera hasta 0,275 sin bajar de AA. Se usa el 80% de ese techo. */
  --fondo-alfa:0.22;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Karla","Segoe UI",Helvetica,sans-serif;

  --t-display:clamp(2.9rem,8.5vw,7.6rem);
  --t-h2:clamp(2.2rem,5.4vw,4.8rem);
  --t-h3:clamp(1.45rem,2.4vw,2.15rem);
  --t-entrada:clamp(1.12rem,1.7vw,1.55rem);
  --t-body:clamp(1rem,1.1vw,1.09rem);
  --t-mini:clamp(.7rem,.82vw,.78rem);

  --aire:clamp(6rem,14vh,12rem);
  --margen:clamp(1.35rem,5.5vw,7rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-suave:cubic-bezier(.22,.61,.36,1);
  /* La curva de "cae y se acomoda". El rebote no está acá sino en los
     keyframes: una curva sola no puede pasarse y volver, y pasarse un
     par de píxeles es justo lo que hace que se lea como que la pieza
     se asentó en su lugar en vez de deslizarse hasta ahí. */
  --ease-asienta:cubic-bezier(.19,.72,.24,1);

  --grade:saturate(.9) contrast(1.06) brightness(.985) sepia(.09);
}

/* ─── Base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:350;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.bloqueado{overflow:hidden}

/* Scroll suave del navegador. Reemplaza a Lenis: hace lo mismo para lo
   único que se usaba —los saltos de ancla— sin 20 KB ni un rAF propio.
   Se respeta la preferencia del sistema. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

[hidden]{display:none !important}
section[id]{scroll-margin-top:clamp(3.5rem,9vh,6rem)}

img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--oxido);color:#F4F0E6}

:focus-visible{outline:3px solid var(--oxido);outline-offset:3px}

.salto{
  position:fixed;top:.6rem;left:.6rem;z-index:999;transform:translateY(-160%);
  background:var(--oxido);color:#F7F4EE;padding:.7rem 1.1rem;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .4s var(--ease);
}
.salto:focus{transform:none}

.solo-movil{display:none}

/* Grano: unifica fotos de temperaturas distintas y disimula el
   escalado de las capturas originales (~680px de ancho). */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:.17;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Niebla generativa ──────────────────────────────────────────
   Canvas de 200×120 px reales, estirado a pantalla completa y
   desenfocado por CSS. Dibujar 6 manchas en 24 000 píxeles cuesta
   nada; el blur lo aplica la GPU una vez por frame. */
/* ─── Fondo: una foto del campo, muy desenfocada y a la deriva ────
   Va detrás de la niebla y del contenido. Da color y profundidad al
   fondo plano sin competir con nada.

   La imagen NO es una foto de verdad: es el placeholder de 20 px que
   lqip.css ya trae embebido en un data-uri. Ampliado a pantalla
   completa ya es una mancha de color, así que sale gratis —cero bytes
   nuevos, cero peticiones— y encima con los colores reales del lugar.
   Un JPEG de 300 KB desenfocado a 60 px habría dado exactamente el
   mismo resultado visual.

   Se anima sólo `transform`: el desenfoque se rasteriza una vez y de
   ahí en adelante el trabajo es del compositor. `inset` negativo para
   que la deriva nunca descubra un canto. */
.fondo{
  position:fixed;inset:-10%;
  z-index:0;pointer-events:none;
  background-image:var(--lqip);
  background-size:cover;background-position:center;
  filter:blur(26px) saturate(.85);
  /* La opacidad la fija el tema, y no es un gusto: es un límite medido.
     El promedio de la imagen es un oliva (104,97,83). Sobre el bosque
     aclara y casi no molesta —tolera hasta 0,275 sin bajar de AA—, pero
     sobre el hueso oscurece el fondo y el texto secundario se cae a
     3,6:1 con sólo 0,30. Ahí el techo real es 0,075. Se usa el 80% de
     cada techo para dejar margen. */
  opacity:var(--fondo-alfa);
  /* La escala va FIJA y sólo se anima el desplazamiento. Animar scale
     sobre una capa desenfocada obliga a rehacer el blur en cada paso
     —medido: 15 fps de diferencia—, mientras que mover es trabajo puro
     de compositor. El inset:-10% más este scale dan margen de sobra
     para que la deriva nunca descubra un canto. */
  scale:1.22;
  animation:derivar 54s ease-in-out infinite alternate;
  will-change:translate;
}
@keyframes derivar{
  from{translate:-2% -1.5%}
  to  {translate: 2%  1.5%}
}

.niebla{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  filter:blur(52px);
  opacity:.55;
}
main,.pie,.nav,.menu{position:relative;z-index:2}

/* ─── Tipografía ─────────────────────────────────────────────────── */
/* Los títulos van en 400 y con tracking casi neutro. Cormorant tiene
   ojo medio chico y trazo fino: apretarla como se apretaba a la
   anterior la vuelve ilegible en pantalla. */
.titular{
  font-family:var(--serif);font-size:var(--t-h2);font-weight:400;
  line-height:1.02;letter-spacing:-.008em;
}
.titular--sm{font-size:clamp(1.9rem,3.8vw,3.3rem)}
.titular em{font-style:italic;font-weight:300}

.ojo{
  display:flex;align-items:center;gap:.85rem;
  font-size:var(--t-mini);letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--ink2);
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
}
.ojo__num{
  font-family:var(--serif);font-style:italic;font-size:1.05em;
  letter-spacing:0;text-transform:none;color:var(--oxido-vivo);
}
.ojo::after{content:"";flex:1;height:2px;max-width:4rem;background:var(--fill2)}

.entrada{font-size:var(--t-entrada);line-height:1.5;font-weight:350}

/* ─── Botones: rellenos, jamás contornos ─────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:1.1rem 2.1rem;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  border:0;cursor:pointer;overflow:hidden;background:transparent;
  transition:color .5s var(--ease);
}
.btn>*{position:relative;z-index:1}
.btn--lleno{background:var(--oxido);color:#F7F4EE}
.btn--lleno::before{
  content:"";position:absolute;inset:0;background:var(--oxido-vivo);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn--lleno:hover::before,.btn--lleno:focus-visible::before{transform:translateY(0)}
.btn--ancho{width:100%;justify-content:center}

/* Secundario: sólo texto con un subrayado que se redibuja */
.btn--texto{padding-inline:0;color:inherit;gap:.55rem}
.btn--texto span{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:.32rem;transition:background-size .55s var(--ease);
}
.btn--texto:hover span{background-size:0 2px;background-position:100% 100%}
.btn--texto svg{transition:transform .5s var(--ease)}
.btn--texto:hover svg{transform:translateY(4px)}

/* ══════════════════════════════════════════════════════════════════
   FOTOS — TARJETAS
   ──────────────────────────────────────────────────────────────────
   Las fotos son tarjetas: esquinas suaves, un borde fino y una sombra
   amplia que las despega del fondo. Nada de desenfoque.

   El detalle que hace que todo esto conviva sin pelearse:
   `translate`, `scale` y `transform` son TRES propiedades distintas y
   se componen en ese orden. Así la flotación usa `translate`, el zoom
   del hover usa `scale`, y GSAP sigue escribiendo `transform` para el
   parallax — ninguna pisa a la otra. Con un solo `transform` para los
   tres efectos habría que elegir uno.
   ══════════════════════════════════════════════════════════════════ */

.media{position:relative;overflow:hidden;margin:0}

.media__capa{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:var(--grade);
}
.media__velo{position:absolute;inset:0;pointer-events:none}

/* ══════════════════════════════════════════════════════════════════
   MARCO ÚNICO — las fotos que son objetos
   ──────────────────────────────────────────────────────────────────
   Antes había dos registros repartidos sin criterio: hero, banda y
   lugar se disolvían contra el fondo con máscaras, y galería y casa
   iban en tarjeta. Al hacer scroll se leía como dos sitios pegados.

   Ahora la regla es una sola y se puede decir en una frase: **si la
   foto es una pieza que se mira, va encapsulada; si la foto ES la
   página, va a sangre**. Y hay exactamente dos fotos a sangre en todo
   el sitio, las dos con texto encima:

     · la banda del campo, que cruza la ventana de lado a lado;
     · el hero bajo 1024 px, donde la foto pasa a ser el fondo del
       titular en vez de una columna al lado.

   Todo lo demás —las nueve restantes— lleva esta cápsula: esquina
   suave, un hilo de borde, una sombra que la despega del verde y una
   flotación de 8 px que la mantiene viva. Cambiar el marco es cambiar
   este bloque, no seis reglas repartidas.

   Marco y máscara son excluyentes: un borde de 1px bajo una máscara de
   degradado se desvanece a la mitad y se ve sucio. Por eso la banda
   conserva su fundido vertical y no lleva canto.
   ══════════════════════════════════════════════════════════════════ */

.media--hero,
.media--lugar,
.casa__foto,
.toma{
  border-radius:var(--r-foto);
  border:1px solid var(--borde);
  /* El canto de arriba recibe la luz. Es lo que evita que el recuadro
     se lea como una caja pegada y lo hace parecer un objeto con
     volumen sobre el fondo. */
  border-top-color:rgba(239,233,220,.26);
  box-shadow:
    0 2px 6px -2px var(--sombra),
    0 22px 48px -18px var(--sombra);
  /* La flotación usa `translate`, el hover usa `scale` y la entrada
     usa `transform`. Son tres propiedades distintas y se componen en
     ese orden, así que ninguna pisa a la otra. Con un solo transform
     para las tres habría que elegir una. */
  scale:1;
  animation:flotar 7s ease-in-out infinite;
  animation-delay:var(--fd,0s);
  transition:scale .55s var(--ease), box-shadow .55s var(--ease),
             border-color .55s var(--ease);
}

.media--hero:hover,
.media--lugar:hover,
.casa__foto:hover,
.toma:hover{
  scale:1.02;
  border-color:var(--borde-vivo);
  box-shadow:
    0 4px 12px -2px var(--sombra),
    0 34px 66px -20px var(--sombra);
}

/* Flotación: 8px en 7 segundos. Tiene que leerse como respiración,
   no como rebote — si se nota, está mal calibrada. */
@keyframes flotar{
  0%,100%{translate:0 0}
  50%    {translate:0 -8px}
}

/* Desfase para que las piezas no suban y bajen en bloque */
.toma:nth-child(3n+2){--fd:-2.3s}
.toma:nth-child(3n+3){--fd:-4.6s}
.casa__foto  {--fd:-1.5s}
.media--lugar{--fd:-3.2s}
.media--hero {--fd:-0.8s}

/* El hero es una pieza grande: una escala del 2% en algo que mide media
   pantalla se lee como un salto, no como un acercamiento. */
.media--hero:hover{scale:1.005}


/* ─── Las dos fotos a sangre ──────────────────────────────────────
   Cruzan la ventana de lado a lado y llevan el texto encima, así que
   no son objetos: son el fondo de su sección. En vez de terminar en un
   canto recto contra el verde, se apagan con un degradado.

   El degradado va escrito ACÁ y no en una variable de :root. El motivo
   costó encontrarlo: una custom property que contiene var(--fy) se
   resuelve en el elemento donde se DECLARA. Si vive en :root, ahí --fy
   no existe, toma el valor de respaldo y hereda ese resultado ya
   cocinado hacia abajo. Declarado en la regla que lo usa, cada figura
   resuelve su propio --fy. */
.media--banda{
  --fy:13%;
  -webkit-mask-image:linear-gradient(to bottom,
      transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
          mask-image:linear-gradient(to bottom,
      transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
}
/* con 380 px de alto útil, un 13% por lado se come demasiada foto */
@media (max-width:640px){
  .media--banda{--fy:8%}
}

/* El placeholder de 20px vive en su propia capa, dentro del recorte
   redondeado del marco. */
/* :not(.fondo) porque el fondo también usa data-lqip para heredar el
   placeholder, pero va fijo a la ventana. Esta regla se declara más
   abajo y con la misma especificidad, así que sin la exclusión le
   ganaba y lo devolvía a position:relative. */
[data-lqip]:not(.fondo){position:relative}
.media[data-lqip]::before,
.toma::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--lqip);
  background-size:cover;background-position:center;
}
.toma img{position:relative;z-index:1}

/* El blur-up cuelga de .js: la clase .cargada la pone el script. Sin
   script la foto real se muestra de una y el placeholder queda tapado
   debajo. Antes esto no estaba condicionado, así que un site.js que no
   arrancara dejaba visible sólo el placeholder borroso de 20px. */
.js [data-lqip] .media__capa,
.js [data-lqip] > img{opacity:0;transition:opacity .9s var(--ease-suave)}
.js [data-lqip] .media__capa.cargada,
.js [data-lqip] > img.cargada{opacity:1}


/* ══════════════════════════════════════════════════════════════════
   REVELADOS
   ──────────────────────────────────────────────────────────────────
   Dos reglas de oro acá, las dos aprendidas a golpes:

   1 · Todo estado oculto cuelga de .js. Si el script no corre, estas
       reglas no existen y la página se ve entera, sólo que quieta.

   2 · Ya no hay filter:blur() en el estado inicial. Antes el reposo
       era opacity:0 + blur(7px), y como nada lo protegía, cualquier
       revelado que no llegara a dispararse dejaba su foto borrosa
       para siempre. El movimiento ahora es opacidad y desplazamiento,
       que además son las dos únicas propiedades que el compositor
       anima sin repintar.
   ══════════════════════════════════════════════════════════════════ */
[data-rev]{transition:opacity .95s var(--ease-suave), transform 1.15s var(--ease)}
.js [data-rev]{opacity:0;transform:translate3d(0,28px,0)}
.js [data-rev].is-on{opacity:1;transform:none}

/* ─── Las fotos: caen y se acomodan ───────────────────────────────
   Antes esto era un clip-path que descubría la foto desde abajo. Con
   el marco puesto ya no sirve: clip-path recorta la caja ENTERA, y la
   sombra vive fuera de la caja. Incluso quieto en inset(0 0 0 0) —el
   estado final— la sombra queda cortada al ras del canto. Se cambió
   por una animación de transform, que no recorta nada.

   Y de paso resuelve la trampa vieja: un elemento recortado a área
   cero nunca entra en pantalla para IntersectionObserver y se quedaba
   escondido para siempre si se observaba a sí mismo. Con opacity el
   elemento sigue ocupando su lugar, así que se dispara solo y ya no
   hace falta observar la sección padre.

   Por qué @keyframes y no una transición: una transición sólo sabe ir
   de A a B en línea recta. No puede pasarse tres píxeles y volver, que
   es exactamente lo que hace que se lea como que la pieza se asentó en
   su sitio y no como que se deslizó hasta ahí. */
.js [data-entra]{opacity:0}
/* Van las DOS animaciones en la misma lista, y pueden convivir porque
   tocan propiedades distintas: `flotar` mueve `translate` y la entrada
   mueve `transform`. Si la entrada se declarara sola, esta regla le
   ganaría a la del marco por especificidad y la flotación no volvería
   a arrancar nunca. */
.js [data-entra].is-on{
  opacity:1;
  animation:flotar 7s ease-in-out var(--fd,0s) infinite,
            cae 1s var(--ease-asienta) var(--entra-espera,0s) backwards;
}
/* backwards y no forwards, a propósito: al terminar, el elemento
   vuelve a su propia regla (transform:none) en vez de quedar clavado
   en el último fotograma. Si quedara clavado, el hover no podría
   volver a tocar transform nunca más. */
.js [data-entra="izq"].is-on{animation-name:flotar,entra-izq}
.js [data-entra="der"].is-on{animation-name:flotar,entra-der}

@keyframes cae{
  0%  {opacity:0; transform:translate3d(0,-58px,0) rotate(-1.1deg) scale(.975)}
  55% {opacity:1; transform:translate3d(0,8px,0)   rotate(.38deg)  scale(1.006)}
  78% {           transform:translate3d(0,-3px,0)  rotate(-.13deg) scale(.999)}
  100%{opacity:1; transform:none}
}
@keyframes entra-izq{
  0%  {opacity:0; transform:translate3d(-70px,-30px,0) rotate(-1.9deg) scale(.972)}
  55% {opacity:1; transform:translate3d(9px,6px,0)     rotate(.5deg)   scale(1.006)}
  78% {           transform:translate3d(-3px,-2px,0)   rotate(-.16deg) scale(.999)}
  100%{opacity:1; transform:none}
}
@keyframes entra-der{
  0%  {opacity:0; transform:translate3d(70px,-30px,0) rotate(1.9deg)  scale(.972)}
  55% {opacity:1; transform:translate3d(-9px,6px,0)   rotate(-.5deg)  scale(1.006)}
  78% {           transform:translate3d(3px,-2px,0)   rotate(.16deg)  scale(.999)}
  100%{opacity:1; transform:none}
}

/* El carril de la galería entra en abanico: las siete tomas no caen a
   la vez ni todas desde el mismo lado. Un retardo por posición y tres
   direcciones alternadas alcanzan; no hace falta tocarlo desde el JS.

   La clase la recibe el CARRIL, no cada toma: las de más a la derecha
   están fuera del recorte de la pista y nunca se disparan solas. El
   porqué está explicado en site.js, sección 7.d. */
.js .galeria__carril.is-on .toma{
  opacity:1;
  animation:flotar 7s ease-in-out var(--fd,0s) infinite,
            cae 1s var(--ease-asienta) var(--entra-espera,0s) backwards;
}
.js .galeria__carril.is-on .toma[data-entra="izq"]{animation-name:flotar,entra-izq}
.js .galeria__carril.is-on .toma[data-entra="der"]{animation-name:flotar,entra-der}

.toma:nth-child(2){--entra-espera:.07s}
.toma:nth-child(3){--entra-espera:.14s}
.toma:nth-child(4){--entra-espera:.21s}
.toma:nth-child(5){--entra-espera:.28s}
.toma:nth-child(6){--entra-espera:.35s}
.toma:nth-child(7){--entra-espera:.42s}

/* Títulos por líneas y párrafos por palabras. El overflow del padre
   es la máscara: el hijo entra deslizándose desde abajo. */
.linea{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.linea>span{display:block;transition:transform 1.25s var(--ease)}
.js .linea>span{transform:translate3d(0,110%,0)}
.js .is-on .linea>span,
.js .linea.is-on>span{transform:none}

.pal{display:inline-block;overflow:hidden;vertical-align:top}
.pal>span{display:inline-block;transition:transform 1s var(--ease)}
.js .pal>span{transform:translate3d(0,105%,0)}
.js .is-on .pal>span{transform:none}

/* El escalonado. Cada hijo espera un pelo más que el anterior: es lo
   que convierte tres líneas apareciendo juntas en una frase que se
   escribe sola. Se hace con una variable y nth-child para no tener
   que escribir un delay por elemento en el JS. */
.linea:nth-child(1)>span,.pal:nth-child(1)>span{transition-delay:0s}
.linea:nth-child(2)>span,.pal:nth-child(2)>span{transition-delay:.09s}
.linea:nth-child(3)>span,.pal:nth-child(3)>span{transition-delay:.18s}
.linea:nth-child(4)>span,.pal:nth-child(4)>span{transition-delay:.27s}
.pal:nth-child(n+5)>span{transition-delay:calc(.045s * 5)}
.pal:nth-child(n+9)>span{transition-delay:calc(.045s * 9)}
.pal:nth-child(n+13)>span{transition-delay:calc(.045s * 13)}
.pal:nth-child(n+17)>span{transition-delay:calc(.045s * 17)}

/* El bloque de prefers-reduced-motion vive al final de la hoja, junto
   al de print, para tener la última palabra sin recurrir a !important */

/* ══════════ PRELOADER ══════════ */
/* Sólo existe si hay JS que lo pueda sacar. Es un telón opaco a
   pantalla completa con z-index 500: si el script no llega a
   retirarlo, el sitio entero queda detrás de él. */
.preloader{display:none}
.js .preloader{
  position:fixed;inset:0;z-index:500;background:#0B0F0A;
  display:grid;place-items:center;
  transition:opacity .8s var(--ease-suave);
}
.js .preloader.fuera{opacity:0;pointer-events:none}
.preloader__caja{text-align:center;color:#EFE9DC}
.preloader__palabra{
  display:block;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.6rem,4vw,2.6rem);opacity:0;animation:pAparece .9s var(--ease) forwards;
}
.preloader__linea{
  display:block;width:min(46vw,260px);height:2px;margin:1.1rem auto;
  background:rgba(239,233,220,.16);overflow:hidden;
}
.preloader__linea i{
  display:block;height:100%;width:100%;background:var(--oxido);
  transform:scaleX(0);transform-origin:0 50%;
  animation:pTraza 1.1s var(--ease-suave) .15s forwards;
}
.preloader__sitio{
  display:block;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:#9AA08F;opacity:0;animation:pAparece .9s var(--ease) .25s forwards;
}
@keyframes pAparece{to{opacity:1}}
@keyframes pTraza{to{transform:scaleX(1)}}

/* ══════════ NAV ══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:2rem;
  padding:clamp(1rem,2vw,1.6rem) var(--margen);
  color:#EFE9DC;
  transition:transform .6s var(--ease),padding .6s var(--ease),color .8s var(--ease-suave);
}
/* Velo superior: el nav vive sobre fotos claras y oscuras */
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:230%;z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,15,10,.8),rgba(11,15,10,.36) 45%,rgba(11,15,10,0));
  transition:opacity .6s var(--ease-suave);
}
.nav.fijo{
  background:rgba(11,15,10,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  padding-top:.85rem;padding-bottom:.85rem;
}
.nav.fijo::before{opacity:0}
.nav.oculto{transform:translateY(-104%)}

.nav__marca{display:flex;align-items:baseline;gap:.7rem;margin-right:auto}
.nav__sigla{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--oxido-vivo)}
.nav__nombre{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500}

.nav__links{display:flex;gap:clamp(1.2rem,2.4vw,2.4rem)}
.nav__links a{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.82;position:relative;padding-block:.35rem;
  transition:opacity .4s var(--ease-suave);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}

.nav__cta{
  background:var(--oxido);color:#F7F4EE;
  padding:.72rem 1.3rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:background-color .45s var(--ease);
}
.nav__cta:hover{background:var(--oxido-vivo)}

.nav__burger{display:none;width:38px;height:38px;background:none;border:0;cursor:pointer;position:relative}
.nav__burger span{
  position:absolute;left:8px;width:22px;height:2px;background:currentColor;
  transition:transform .5s var(--ease);
}
.nav__burger span:nth-child(1){top:16px}
.nav__burger span:nth-child(2){top:22px}
.nav__burger.abierto span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__burger.abierto span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:90;background:#0B0F0A;color:#EFE9DC;
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--margen) 3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
}
.menu.abierto{clip-path:inset(0 0 0 0)}
.menu__links{display:flex;flex-direction:column;gap:.2rem}
.menu__links a{
  font-family:var(--serif);font-weight:300;font-size:clamp(2rem,9vw,3rem);
  line-height:1.25;display:flex;align-items:baseline;gap:1rem;
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease-suave),transform .7s var(--ease);
}
.menu.abierto .menu__links a{opacity:1;transform:none}
.menu__links a em{
  font-size:.7rem;font-style:normal;letter-spacing:.2em;color:var(--oxido-vivo);
  font-family:var(--sans);
}
.menu__pie{
  margin-top:auto;padding-top:2.5rem;display:flex;flex-direction:column;gap:.35rem;
  font-size:.78rem;letter-spacing:.1em;color:#9AA08F;
}

/* ══════════ 1 · HERO ══════════ */
.hero{
  position:relative;min-height:100svh;
  display:grid;grid-template-columns:1fr minmax(0,54%);
  align-items:end;overflow:hidden;isolation:isolate;
}
.hero__canto{
  position:absolute;left:calc(var(--margen)*.34);top:50%;z-index:3;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(239,233,220,.6);
}
.hero__type{
  position:relative;z-index:3;
  padding:calc(var(--margen)*.8) clamp(1.5rem,3vw,4rem) clamp(4rem,9vh,7rem) var(--margen);
  max-width:46rem;color:#EFE9DC;
}
.hero__ojo{
  display:flex;align-items:center;gap:1rem;
  font-size:var(--t-mini);letter-spacing:.26em;text-transform:uppercase;
  color:var(--trigo);margin-bottom:clamp(1.5rem,3.5vh,2.6rem);
  transition:opacity .9s var(--ease-suave), transform .9s var(--ease);
}
.hero__ojo-linea{
  width:clamp(2rem,4vw,3.5rem);height:2px;background:var(--oxido);
  transform-origin:0 50%;
  transition:transform 1s var(--ease);
}
/* Cormorant Garamond es una romana de contraste alto: se sostiene sola
   en tamaño grande y no necesita tracking negativo fuerte como la
   anterior. El peso 400 en vez de 300 es por el fondo oscuro — la 300
   se adelgaza tanto sobre negro que se lee gris. */
.hero__titulo{
  font-family:var(--serif);font-size:var(--t-display);font-weight:400;
  line-height:.95;letter-spacing:-.012em;
  margin-bottom:clamp(1.6rem,3.5vh,2.6rem);
}
.hero__titulo em{font-style:italic;font-weight:300;color:var(--trigo)}
.hero__bajada{
  max-width:34rem;font-size:var(--t-entrada);line-height:1.55;
  color:rgba(239,233,220,.82);margin-bottom:clamp(2rem,4.5vh,3.2rem);
  transition:opacity 1s var(--ease-suave), transform 1s var(--ease);
}
.hero__acciones{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.2rem,3vw,2.5rem);
  transition:opacity 1s var(--ease-suave), transform 1s var(--ease);
}

/* Estados de reposo de la entrada. Todos bajo .js, por lo mismo de
   siempre: sin script el hero se ve completo y quieto. */
.js .hero__ojo,
.js .hero__bajada,
.js .hero__acciones,
.js .hero__baja{opacity:0;transform:translate3d(0,18px,0)}
.js .hero__ojo-linea{transform:scaleX(0)}

.js .hero.entrado .hero__ojo,
.js .hero.entrado .hero__bajada,
.js .hero.entrado .hero__acciones,
.js .hero.entrado .hero__baja{opacity:1;transform:none}
.js .hero.entrado .hero__ojo-linea{transform:scaleX(1)}

/* El título del hero trae sus .linea escritas a mano en el HTML y no
   lleva data-lineas, así que nunca pasa por el observador ni recibe
   .is-on: lo destapa la entrada. Sin esta regla el h1 se queda
   desplazado 110% dentro de su máscara, o sea invisible, y el hero
   entero aparece sin titular. */
.js .hero.entrado .hero__titulo .linea>span{transform:none}

/* El orden de entrada. Se escalona con delays en vez de una línea de
   tiempo en JS: el navegador lo resuelve solo y no hay que sincronizar
   nada a mano. */
.js .hero.entrado .hero__ojo    {transition-delay:.45s}
.js .hero.entrado .hero__ojo-linea{transition-delay:.45s}
.js .hero.entrado .hero__titulo .linea>span{transition-delay:.55s}
.js .hero.entrado .hero__titulo .linea:nth-child(2)>span{transition-delay:.65s}
.js .hero.entrado .hero__titulo .linea:nth-child(3)>span{transition-delay:.75s}
.js .hero.entrado .hero__bajada {transition-delay:.95s}
.js .hero.entrado .hero__acciones{transition-delay:1.05s}
.js .hero.entrado .hero__baja   {transition-delay:1.25s}

/* La foto ya no llega al canto de la sección: se separa de arriba, de
   abajo y del borde derecho para que se lea como una pieza apoyada
   sobre el verde y no como el fondo del hero. Lo que antes hacía la
   máscara de degradado —que la foto no terminara en un corte recto—
   ahora lo hace el aire alrededor. */
.media--hero{
  grid-column:2;grid-row:1;align-self:stretch;
  margin:clamp(4.5rem,11vh,8rem) var(--margen) clamp(2.5rem,7vh,5rem) 0;
}
/* Ken Burns: el zoom lento va en `scale` como propiedad propia, no
   dentro de transform, para no chocar con nada más que toque la foto. */
.media--hero .media__capa{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{
  from{scale:1.04}
  to  {scale:1.15}
}
@media (prefers-reduced-motion:reduce){
  .media--hero .media__capa{animation:none;scale:1.04}
}
.media--hero .media__capa{object-position:52% 60%}
/* El velo era una mancha oscura fuerte en el costado izquierdo: existía
   para que el titular se leyera encima de la foto cuando la foto se
   disolvía hacia el texto. Con el marco puesto, el titular está en su
   propia columna y no la pisa nunca, así que esa mancha sólo ensuciaba
   la foto. Queda una viñeta suave abajo, que es la que le da cuerpo.
   La versión fuerte sigue existiendo bajo 1024 px, donde el texto SÍ va
   encima. */
.media--hero .media__velo{
  background:linear-gradient(to top,rgba(11,15,10,.5) 0%,rgba(11,15,10,0) 46%);
}
.hero__baja{
  position:absolute;right:var(--margen);bottom:clamp(1.6rem,4vh,2.6rem);z-index:4;
  display:flex;align-items:center;gap:.8rem;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(239,233,220,.72);
  transition:opacity .9s var(--ease-suave), transform .9s var(--ease);
}
.hero__baja-linea{display:block;width:52px;height:2px;background:rgba(239,233,220,.22);overflow:hidden}
.hero__baja-linea i{
  display:block;height:100%;width:100%;background:var(--trigo);
  transform-origin:0 50%;animation:pulso 2.6s var(--ease-suave) infinite;
}
@keyframes pulso{
  0%{transform:scaleX(0);transform-origin:0 50%}
  45%{transform:scaleX(1);transform-origin:0 50%}
  55%{transform:scaleX(1);transform-origin:100% 50%}
  100%{transform:scaleX(0);transform-origin:100% 50%}
}

/* ══════════ 2 · EL LUGAR ══════════ */
.lugar{
  padding:var(--aire) var(--margen);
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;
}
.lugar__cabeza{grid-column:1 / span 6}
.lugar__texto{
  grid-column:1 / span 5;margin-top:clamp(2rem,5vw,4rem);
  display:flex;flex-direction:column;gap:1.35rem;color:var(--ink2);
}
.lugar__texto .entrada{color:var(--ink)}
.lugar__texto p{max-width:34rem}
.media--lugar{
  grid-column:8 / span 5;grid-row:1 / span 2;
  margin-top:clamp(1rem,6vw,5rem);aspect-ratio:678/598;
}
/* El pie se apoya en la esquina de la tarjeta, así que sigue su curva:
   sin esto asoma un ángulo recto por debajo del redondeo del marco. */
.media--lugar figcaption{
  position:absolute;left:0;bottom:0;z-index:2;max-width:17rem;
  background:var(--bg);color:var(--ink2);
  padding:1rem 1.3rem 1rem 1.1rem;
  font-size:.84rem;line-height:1.45;font-style:italic;font-family:var(--serif);
  border-top-right-radius:var(--r-foto);
  border-bottom-left-radius:var(--r-foto);
}

/* ══════════ 3 · BANDA ══════════ */
/* La banda va a sangre: es la única sección donde la foto cruza la
   ventana entera y el texto va encima. Sin relleno lateral y con
   `overflow:hidden`, porque acá no hay sombra que recortar. */
.banda{
  position:relative;min-height:clamp(30rem,88vh,50rem);
  display:grid;align-items:end;overflow:hidden;isolation:isolate;color:#EFE9DC;
}
.media--banda{grid-area:1/1;height:100%}
.media--banda .media__capa{object-position:center 42%;filter:var(--grade) brightness(.72) contrast(1.1)}
.media__velo--banda{
  background:linear-gradient(to top,rgba(11,15,10,.94) 0%,rgba(11,15,10,.3) 45%,rgba(11,15,10,.5) 100%);
}
.banda__type{
  grid-area:1/1;position:relative;z-index:2;
  padding:var(--aire) var(--margen) clamp(3rem,7vh,5rem);max-width:54rem;
}
.banda__cita{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.8rem,4.8vw,4rem);line-height:1.12;letter-spacing:-.005em;
}
.banda__nota{margin-top:1.6rem;max-width:30rem;color:rgba(239,233,220,.78);font-size:.97rem}

/* ══════════ 4 · GALERÍA ══════════ */
.galeria{padding:var(--aire) 0 clamp(3rem,6vh,5rem);overflow:hidden}
.galeria__cabeza{padding-inline:var(--margen);max-width:46rem;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.galeria__pista-nota{
  margin-top:1.5rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);
}
.galeria__pista-nota .solo-desktop::before{content:"↔  "}

.galeria__pista{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.galeria__pista::-webkit-scrollbar{display:none}
.galeria__pista.arrastrando{cursor:grabbing;scroll-behavior:auto}
.galeria__pista.arrastrando .toma{pointer-events:none}

.galeria__carril{
  display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.8rem);
  padding-inline:var(--margen);width:max-content;
  /* Aire arriba y abajo: la pista recorta en vertical (overflow-y:hidden
     para que no aparezca una barra), así que sin este colchón la
     flotación de −8px y la sombra de 48px se verían cortadas. */
  padding-block:clamp(2rem,3.5vw,3.2rem);
}
/* Sin background-color: un relleno sólido volvería a dibujar el
   rectángulo justo donde la máscara apaga la foto. */
.toma{position:relative;flex:0 0 auto;overflow:hidden}
.toma img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .8s var(--ease-suave)}
.toma--alta  {width:clamp(15rem,26vw,23rem);aspect-ratio:512/618;align-self:flex-start}
.toma--cuadro{width:clamp(14rem,24vw,21rem);aspect-ratio:1/1;align-self:flex-end;margin-bottom:clamp(1rem,4vw,3.5rem)}
.toma--ancha {width:clamp(18rem,36vw,32rem);aspect-ratio:16/11}
.toma::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,15,10,.78),rgba(11,15,10,0) 55%);
  opacity:.8;transition:opacity .7s var(--ease-suave);
}
.toma:hover img{transform:scale(1.06)}
.toma:hover::after{opacity:.45}
/* Al pasar el cursor por una foto, las demás se apagan un poco */
.galeria__carril:hover .toma:not(:hover) img{filter:var(--grade) brightness(.72) blur(1.5px)}

.toma figcaption{
  position:absolute;left:1.2rem;bottom:1.1rem;z-index:2;
  display:flex;align-items:baseline;gap:.7rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#EFE9DC;
  transform:translateY(8px);opacity:0;
  transition:transform .7s var(--ease),opacity .6s var(--ease-suave);
}
.toma figcaption span{
  font-family:var(--serif);font-style:italic;font-size:.95rem;
  letter-spacing:0;text-transform:none;color:var(--trigo);
}
.toma:hover figcaption,.toma:focus-within figcaption{transform:none;opacity:1}

.galeria__avance{margin:clamp(2rem,5vw,3.5rem) var(--margen) 0;height:3px;background:var(--fill);position:relative}
.galeria__avance i{position:absolute;inset:0 auto 0 0;width:12%;background:var(--oxido);transform-origin:0 50%}

/* ══════════ 5 · LA CASA ══════════ */
.casa{
  padding:var(--aire) var(--margen);
  display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);
  gap:clamp(2.5rem,7vw,7rem);align-items:start;
}
.casa__fijo{position:sticky;top:clamp(5rem,14vh,9rem)}
.casa__foto{position:relative;aspect-ratio:4/5;overflow:hidden}
.casa__foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:var(--grade);opacity:0;transform:scale(1.07);
  transition:opacity 1s var(--ease-suave),transform 1.7s var(--ease);
}
.casa__foto img.is-on{opacity:1;transform:scale(1)}
.casa__foto figcaption{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--oxido);color:#F7F4EE;
  padding:.7rem 1.2rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  border-top-right-radius:var(--r-foto);
  border-bottom-left-radius:var(--r-foto);
}

.detalles{margin-top:clamp(1.5rem,4vw,3rem)}
.detalle{
  padding:clamp(1.2rem,2.4vw,1.9rem) clamp(1rem,2vw,1.6rem);
  position:relative;transition:background-color .6s var(--ease-suave);
}
/* Separación por relleno alterno, no por líneas */
.detalle:nth-child(odd){background:var(--fill)}
.detalle:hover{background:var(--fill2)}
/* Barra sólida de acento — elemento gráfico, no marco */
.detalle::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--oxido);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .6s var(--ease);
}
.detalle:hover::before,.detalle.activo::before{transform:scaleY(1)}
.detalle dt{
  font-family:var(--serif);font-weight:400;font-size:var(--t-h3);
  line-height:1.2;letter-spacing:0;margin-bottom:.35rem;
}
.detalle dd{color:var(--ink2);max-width:34rem;font-size:.98rem;line-height:1.6}

/* ══════════ 6 · UBICACIÓN ══════════ */
.ubicacion{
  padding:var(--aire) var(--margen);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem);
}
.ubicacion__cabeza{grid-column:1 / span 6}
.ubicacion__texto{
  grid-column:1 / span 5;display:flex;flex-direction:column;align-items:flex-start;
  gap:1.3rem;color:var(--ink2);margin-top:clamp(1rem,3vw,2rem);
}
.ubicacion__texto .entrada{color:var(--ink)}
.ubicacion__dir{
  font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.55;
  color:var(--ink);background:var(--fill);padding:1.1rem 1.4rem;
}
.ubicacion__mapa{
  grid-column:7 / span 6;grid-row:1 / span 2;
  aspect-ratio:4/3.4;background:#1B2417;position:relative;overflow:hidden;
}
.ubicacion__mapa iframe{
  width:100%;height:100%;border:0;display:block;
  filter:grayscale(.6) sepia(.28) saturate(.85) contrast(1.04);
  transition:filter .9s var(--ease-suave);
}
.ubicacion__mapa:hover iframe,.ubicacion__mapa:focus-within iframe{filter:none}

.cerca{grid-column:1 / -1;margin-top:clamp(3rem,8vw,6rem)}
.cerca__titulo{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.6vw,2.1rem);
  letter-spacing:-.02em;margin-bottom:clamp(1.2rem,3vw,2rem);
}
.cerca__fila{
  display:grid;grid-template-columns:3.5rem minmax(9rem,15rem) 1fr auto;
  align-items:baseline;gap:clamp(.8rem,2vw,2rem);
  padding:clamp(1.2rem,2.6vw,1.9rem) clamp(.8rem,1.6vw,1.4rem);
  position:relative;transition:background-color .6s var(--ease-suave);
}
.cerca__fila:nth-child(even){background:var(--fill)}
.cerca__fila:hover{background:var(--fill2)}
.cerca__idx{font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--oxido-vivo)}
.cerca__nombre{
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.6rem);font-weight:400;
  line-height:1.2;letter-spacing:-.015em;
}
.cerca__desc{color:var(--ink2);font-size:.93rem}
.cerca__km{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.cerca__km em{
  font-family:var(--serif);font-style:normal;font-size:clamp(1.4rem,2.4vw,2rem);
  color:var(--ink);letter-spacing:-.02em;margin-right:.15rem;
}
.cerca__pie{margin-top:1.2rem;font-size:.76rem;letter-spacing:.08em;color:var(--ink2)}

/* ══════════ 7 · RESERVA ══════════ */
.reserva{
  padding:var(--aire) var(--margen);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.reserva__intro{position:sticky;top:clamp(5rem,14vh,9rem)}
.reserva__intro .entrada{color:var(--ink2);margin-top:1.8rem;max-width:28rem}
.reserva__directo{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:clamp(2rem,5vw,3.2rem)}
.directo{display:flex;flex-direction:column;gap:.3rem;position:relative;padding-bottom:.6rem}
.directo__rotulo{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}
.directo__valor{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.5rem);color:var(--acento)}
.directo::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--oxido);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease);
}
.directo:hover::after{transform:scaleX(1)}

.form{display:grid;gap:clamp(2rem,4vw,3rem)}
.form__rotulo{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2);margin-bottom:1.2rem}

.cal__barra{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem}
.cal__titulo{font-family:var(--serif);font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:400;text-transform:capitalize}
.cal__nav{
  width:40px;height:40px;display:grid;place-items:center;
  background:var(--fill);border:0;cursor:pointer;color:var(--ink);
  transition:background-color .4s var(--ease-suave);
}
.cal__nav:hover:not(:disabled){background:var(--oxido);color:#F7F4EE}
.cal__nav:disabled{opacity:.28;cursor:not-allowed}

.cal__meses{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
.cal__mes h4{font-family:var(--serif);font-weight:400;font-size:1rem;text-transform:capitalize;margin-bottom:.9rem;color:var(--acento)}
.cal__dows,.cal__dias{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__dows{margin-bottom:.5rem}
.cal__dows span{
  text-align:center;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);padding-bottom:.3rem;
}
.cal__dia{
  aspect-ratio:1;display:grid;place-items:center;background:var(--fill);border:0;cursor:pointer;
  font-size:.85rem;color:var(--ink);position:relative;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.cal__dia:disabled{background:transparent;color:var(--ink2);opacity:.4;cursor:not-allowed}
.cal__dia--vacio{visibility:hidden}
.cal__dia:not(:disabled):hover{background:var(--fill2)}
.cal__dia.rango{background:rgba(168,80,58,.3)}
.cal__dia.extremo{background:var(--oxido);color:#F7F4EE;font-weight:500}
.cal__dia.hoy::after{content:"";position:absolute;bottom:12%;width:4px;height:4px;border-radius:50%;background:var(--trigo)}
.cal__ayuda{margin-top:1rem;font-size:.78rem;color:var(--ink2)}

.form__resumen{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.4rem);margin-top:1.6rem;background:var(--fill);padding:1.2rem 1.4rem}
.form__resumen div{display:flex;flex-direction:column;gap:.15rem}
.form__resumen span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.form__resumen b{font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--acento)}

.form__campos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,2.5vw,2rem);align-content:start}
.campo{display:flex;flex-direction:column;gap:.5rem;position:relative}
.campo--ancho{grid-column:1 / -1}
.campo label,.campo__rotulo{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
/* Campos rellenos, sin contorno */
.campo input[type=text],.campo textarea{
  background:var(--fill);border:0;padding:.95rem 1.1rem;color:var(--ink);
  font-size:1rem;resize:vertical;
  transition:background-color .45s var(--ease-suave),box-shadow .45s var(--ease-suave);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--ink2);opacity:.85}
.campo input:focus,.campo textarea:focus{
  outline:0;background:var(--fill2);
  /* El foco se marca con una barra sólida interior, no con un borde */
  box-shadow:inset 4px 0 0 var(--oxido);
}
.campo.error input{box-shadow:inset 4px 0 0 var(--oxido-vivo)}

.pasos{display:flex;align-items:center;gap:1.1rem;padding-top:.2rem}
.pasos button{
  width:38px;height:38px;display:grid;place-items:center;background:var(--fill);
  border:0;cursor:pointer;color:var(--ink);font-size:1.05rem;line-height:1;
  transition:background-color .4s var(--ease-suave);
}
.pasos button:hover:not(:disabled){background:var(--oxido);color:#F7F4EE}
.pasos button:disabled{opacity:.35;cursor:not-allowed}
.pasos output{font-family:var(--serif);font-size:1.5rem;min-width:1.6ch;text-align:center;color:var(--acento)}

.campo--check{flex-direction:row;align-items:center;gap:.7rem;align-self:end;padding-bottom:.6rem}
.campo--check input{
  appearance:none;width:20px;height:20px;background:var(--fill);border:0;
  cursor:pointer;position:relative;flex:0 0 auto;
  transition:background-color .35s var(--ease-suave);
}
.campo--check input:checked{background:var(--oxido)}
.campo--check input:checked::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #F7F4EE;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.campo--check label{letter-spacing:.06em;text-transform:none;font-size:.9rem;color:var(--ink);cursor:pointer}

.form__aviso{grid-column:1 / -1;font-size:.8rem;color:var(--ink2);display:flex;align-items:center;gap:.6rem}
.form__aviso::before{content:"";width:1.4rem;height:2px;background:var(--oxido);flex:0 0 auto}
.form__aviso.alerta{color:var(--oxido-vivo)}
.form__aviso.ok{color:var(--acento)}

/* ══════════ 8 · RESEÑAS ══════════ */
.resenas{padding:var(--aire) var(--margen);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.4rem,2.6vw,2.2rem)}
.resenas .ojo{grid-column:1 / -1;margin-bottom:0}

/* — Estrellas — */
.estrellas{display:inline-flex;gap:3px;line-height:1}
.estrellas svg{
  width:16px;height:16px;fill:var(--estrella);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));
}
.estrellas--lg svg{width:22px;height:22px}

/* — Cabecera con el puntaje — */
.puntaje{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,3vw,2.6rem);
  padding:clamp(1.2rem,2.6vw,1.8rem) clamp(1.2rem,2.6vw,2rem);
  border-radius:var(--r-foto);
  border:1px solid var(--borde);
  background:var(--fill);
  margin-bottom:clamp(.6rem,2vw,1.4rem);
}
.puntaje__cifra{display:flex;align-items:baseline;gap:.5rem}
.puntaje__num{
  font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:.9;letter-spacing:-.03em;color:var(--ink);
}
.puntaje__de{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.puntaje__meta{margin-top:.5rem;font-size:.8rem;color:var(--ink2)}
.puntaje__meta b{color:var(--ink);font-weight:500}

/* — Tarjeta de reseña — */
.resena{
  grid-column:span 4;
  display:flex;flex-direction:column;gap:1rem;
  padding:clamp(1.4rem,2.6vw,1.9rem);
  border-radius:var(--r-foto);
  border:1px solid var(--borde);
  background:var(--fill);
  position:relative;overflow:hidden;
  scale:1;
  transition:scale .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.resena:hover{
  scale:1.015;
  border-color:var(--borde-vivo);
  box-shadow:0 3px 10px -3px var(--sombra), 0 26px 52px -20px var(--sombra);
}
/* La comilla grande de fondo, como marca de agua */
.resena__comilla{
  position:absolute;top:-.15em;right:.35rem;
  font-family:var(--serif);font-weight:700;font-size:6rem;line-height:1;
  color:var(--oxido);opacity:.12;pointer-events:none;user-select:none;
}
.resena blockquote p{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.55;letter-spacing:0;
  color:var(--ink);
  position:relative;
}
.resena__quien{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.resena__inicial{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--serif);font-size:1rem;color:#F7F4EE;
  background:var(--oxido);
}
.resena__id{display:flex;flex-direction:column;min-width:0}
.resena__nombre{font-size:.9rem;letter-spacing:.02em;color:var(--ink)}
.resena__meta{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-top:.15rem}
.resenas__nota{
  grid-column:1 / -1;margin-top:.4rem;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);
}

/* ══════════ PIE ══════════ */
.pie{
  padding:clamp(3.5rem,9vw,6rem) var(--margen) clamp(1.6rem,3vw,2.4rem);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,3rem);
}
.pie__marca{grid-column:1 / span 4}
.pie__nombre{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.15;letter-spacing:-.02em}
.pie__nombre em{font-style:italic;color:var(--acento)}
.pie__col{grid-column:span 2;font-size:.86rem;line-height:1.75;color:var(--ink2)}
.pie__col:nth-of-type(2){grid-column:7 / span 2}
.pie__col h4{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--ink);margin-bottom:.9rem}
.pie__col a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease),color .4s var(--ease-suave);
}
.pie__col a:hover{color:var(--trigo);background-size:100% 1px}
.pie__base{
  grid-column:1 / -1;margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:1.6rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
}

/* ══════════ LIGHTBOX ══════════ */
.lb{
  position:fixed;inset:0;z-index:400;background:rgba(8,11,7,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;opacity:0;transition:opacity .5s var(--ease-suave);
}
.lb.abierto{opacity:1}
.lb__fig{max-width:min(92vw,1080px);max-height:86vh;display:flex;flex-direction:column;gap:1rem;align-items:center}
.lb__fig img{
  max-width:100%;max-height:76vh;object-fit:contain;filter:var(--grade);
  transform:scale(.97);opacity:0;
  transition:transform .7s var(--ease),opacity .5s var(--ease-suave);
}
.lb.abierto .lb__fig img{transform:none;opacity:1}
.lb__fig figcaption{font-family:var(--serif);font-style:italic;font-size:.95rem;color:#9AA08F;text-align:center;max-width:34rem}
.lb__cerrar,.lb__nav{
  position:absolute;background:rgba(239,233,220,.1);border:0;color:#EFE9DC;cursor:pointer;
  display:grid;place-items:center;width:48px;height:48px;
  transition:background-color .4s var(--ease-suave);
}
.lb__cerrar:hover,.lb__nav:hover{background:var(--oxido)}
.lb__cerrar{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb__nav--prev{left:clamp(.8rem,3vw,2.5rem);top:50%;transform:translateY(-50%)}
.lb__nav--next{right:clamp(.8rem,3vw,2.5rem);top:50%;transform:translateY(-50%)}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1100px){
  .lugar__cabeza,.ubicacion__cabeza{grid-column:1 / span 7}
  .lugar__texto,.ubicacion__texto{grid-column:1 / span 6}
  .media--lugar,.ubicacion__mapa{grid-column:8 / span 5}
  .cerca__fila{grid-template-columns:2.5rem 1fr auto}
  .cerca__desc{grid-column:2;grid-row:2;margin-top:.3rem}
  /* De tres reseñas por fila a dos */
  .resena{grid-column:span 6}
}

@media (max-width:1024px){
  .hero{grid-template-columns:1fr;align-items:end}
  .hero__type{grid-area:1/1;padding-bottom:clamp(5rem,14vh,8rem);max-width:none;z-index:3}
  /* Acá la foto del hero deja de ser una pieza sobre la página y pasa
     a ser el fondo del titular: ocupa la sección entera y el texto va
     encima. Encapsularla no tendría sentido —sería un marco alrededor
     de toda la pantalla— así que se le saca todo: marco, sombra,
     margen y flotación. Es la única excepción del sistema, y es por
     el rol que cumple, no por el tamaño. */
  .media--hero{
    grid-area:1/1;grid-column:1;height:100%;
    margin:0;border:0;border-radius:0;box-shadow:none;
    animation:none;translate:none;
    transition:opacity .9s var(--ease-suave);
  }
  .media--hero:hover{scale:1;box-shadow:none}
  /* Sin caída: un fondo a pantalla completa que se descuelga de arriba
     se lee como un error de carga. Entra con un fundido y nada más. */
  .js [data-entra].media--hero.is-on{animation:none}
  .media--hero .media__velo{
    background:
      linear-gradient(to top,rgba(11,15,10,.96) 8%,rgba(11,15,10,.55) 45%,rgba(11,15,10,.35) 100%),
      radial-gradient(90% 60% at 50% 100%,rgba(11,15,10,.85),rgba(11,15,10,0) 70%);
  }
  .hero__canto{display:none}
  .hero__baja{right:auto;left:var(--margen)}
}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .solo-desktop{display:none}
  .solo-movil{display:inline}

  .lugar,.ubicacion,.resenas{grid-template-columns:1fr}
  .lugar__cabeza,.lugar__texto,.media--lugar,
  .ubicacion__cabeza,.ubicacion__texto,.ubicacion__mapa,.resena{grid-column:1 / -1}
  .media--lugar{grid-row:auto;margin-top:2.5rem}
  .ubicacion__mapa{grid-row:auto;aspect-ratio:4/3}

  /* La galería deja de ser carril y pasa a pila editorial */
  .galeria__pista{overflow:visible;cursor:auto}
  .galeria__carril{
    width:auto;flex-direction:column;align-items:stretch;
    gap:clamp(1.5rem,5vw,2.5rem);padding-block:1rem;
  }
  .toma,.toma--alta,.toma--cuadro,.toma--ancha{width:auto;align-self:auto;margin-bottom:0}
  .toma--alta{aspect-ratio:4/5}
  .toma--cuadro{aspect-ratio:1/1}
  .toma--ancha{aspect-ratio:16/11}
  .toma figcaption{opacity:1;transform:none}
  .galeria__avance{display:none}
  .galeria__carril:hover .toma:not(:hover) img{filter:var(--grade)}

  .casa{grid-template-columns:1fr}
  .casa__fijo{position:static;margin-bottom:2rem}
  .casa__foto{aspect-ratio:3/2}

  .reserva{grid-template-columns:1fr}
  .reserva__intro{position:static}
  .cal__meses{grid-template-columns:1fr}
  .cal__mes h4{display:none}

  .pie{grid-template-columns:1fr 1fr}
  .pie__marca{grid-column:1 / -1;margin-bottom:1rem}
  .pie__col,.pie__col:nth-of-type(2){grid-column:span 1}
}

@media (max-width:560px){
  .form__campos{grid-template-columns:1fr}
  .campo--check{align-self:auto;padding-bottom:0}
  .cerca__fila{grid-template-columns:1fr auto;gap:.4rem 1rem}
  .cerca__idx{display:none}
  .cerca__desc{grid-column:1 / -1;grid-row:2}
  .pie{grid-template-columns:1fr}
  .pie__base{flex-direction:column}
  .lb__nav{width:42px;height:42px}
  .lb__nav--prev{left:.5rem}
  .lb__nav--next{right:.5rem}
}

/* ══════════ MOVIMIENTO REDUCIDO ══════════
   Se apaga el movimiento, nunca el contenido. */
/* ══════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   ──────────────────────────────────────────────────────────────────
   Acá NO va el clásico `*{transition-duration:.01ms}`. En Windows esta
   preferencia viene activada de fábrica en muchas máquinas, así que esa
   regla no atiende a una minoría: le entrega un sitio muerto —sin
   hovers, sin fundidos, sin nada— a una parte grande de las visitas.

   El criterio es otro: se apaga lo que se mueve solo o desplaza cosas
   (bucles, zoom, flotación, partículas, deslizamientos), y se conservan
   los cambios de opacidad y color, que no producen mareo y son los que
   hacen que la página se sienta viva.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){

  /* Lo que se mueve solo, fuera */
  .niebla{display:none}
  /* El fondo se queda quieto pero NO se va: es color y profundidad,
     no movimiento. Se congela a media deriva para que no salte. */
  .fondo{animation:none;translate:none}
  .media--hero .media__capa{animation:none;scale:1.04}
  .media--hero,.media--lugar,.casa__foto,.toma{
    animation:none;translate:none;
  }
  .media--hero:hover,.media--lugar:hover,
  .casa__foto:hover,.toma:hover{scale:1}
  .hero__baja-linea i{animation:none;transform:scaleX(1)}

  /* Los revelados dejan de desplazarse, pero siguen apareciendo con un
     fundido: el contenido no aparece de golpe y tampoco se arrastra. */
  .js [data-rev]{transform:none}
  .js .linea>span,.js .pal>span{transform:none}
  /* Las fotos no caen ni entran de lado: aparecen con un fundido. La
     opacidad la sigue manejando .is-on, así que basta con apagar la
     animación y darle una transición para que no sea un corte seco. */
  .js [data-entra]{transition:opacity .9s var(--ease-suave)}
  .js [data-entra].is-on{animation:none}
  /* misma especificidad que la regla del carril, que es más alta que la
     de arriba porque la clase la lleva el contenedor y no la toma */
  .js .galeria__carril.is-on .toma{animation:none}
  .js .hero__ojo,
  .js .hero__bajada,
  .js .hero__acciones,
  .js .hero__baja{transform:none}
  .js .hero__ojo-linea{transform:scaleX(1)}
}

@media print{
  .nav,.menu,.preloader,.niebla,.hero__baja,.galeria__avance,.lb,body::after{display:none !important}
  body{background:#fff;color:#000}
}