/* ══════════════════════════════════════════════════════════════════
   MUNA KUME IYAEL · Curarrehue — restaurante
   Demo 143. Identidad: «PIÑON Y ARAUCARIA».

   ─────────────────────────────────────────────────────────────────
   REGLA CULTURAL, ESTRICTA Y SIN EXCEPCION
   Materiales y comida SI. Simbologia ceremonial JAMAS: ni greca, ni
   kultrun, ni «inspirado en», ni una forma sacada de un telar puesta
   como adorno. Todo lo que se dibuja en esta pagina es DESPENSA —una
   semilla, una rama— y nada mas. Si algo daba duda, quedo fuera.
   Esto no es cautela decorativa: lo que es de la comunidad no lo pone
   un diseñador en una pagina web sin que la comunidad lo decida.
   ─────────────────────────────────────────────────────────────────

   LA DIRECCION EN UNA FRASE
   La cascara del piñon sobre crema, bajo la sombra verde casi negra
   de la araucaria: transmite «esto se recoge y se cocina aca», que es
   lo que hace subir a alguien hasta Curarrehue.

   LA PALETA
   --crema      #F6F0E4  crema calida
   --pinon      #7A4A22  cafe de cascara LISA Y BRILLANTE (6,5:1)
   --araucaria  #16241C  verde de follaje, casi negro azulado

   DESLINDE DE VERDES — el pino de forestal-robur es industrial B2B
   sobre carbon; los de 122/125/131/146/162 son polin, esmalte, laser,
   brote y quirofano. Este es el verde del FOLLAJE en sombra: tan
   oscuro que casi no se lee como verde hasta que se lo compara.
   DESLINDE DEL CAFE — el mimbre de la 135 es tejido claro y MATE; el
   cuero de la 76 es piel. Este es cascara: lisa, y con un brillo
   especular chico (el punto claro del piñon en la cabecera).

   EL TRIO
   · display · Tienne — slab de remates cortos y planos, con aspereza.
     Nueva en el registro. Da peso y tierra sin caer en nada folclorico.
   · cuerpo  · Mukta — humanista muy legible, se aparta.
   · dato    · Kode Mono — para los rotulos de ficha y la barra de meses.

   LA CABECERA (109ª del oficio) — EL PIÑON
   La semilla sola: la gota asimetrica con su punta, en cafe, con el
   brillo de la cascara. Es comida, no simbolo.

   EL FONDO — LAS RAMAS QUE SE MECEN
   Dos ramas de araucaria en sombra entran por un borde y se mecen
   apenas. La hoja escamosa de la araucaria es triangular y va
   escalonada: eso se dibuja con un clip-path de dientes, que es
   geometria de la planta, no un motivo.
   DESLINDE: los troncos de la 102 eran VERTICALES fijos con sombra de
   bosque. Estas son ramas HORIZONTALES escalonadas, con vaiven minimo.
   Reduced-motion: quietas (una rama quieta sigue siendo una rama).

   SEGUNDA PASADA — 09-09-2026
   La identidad no se toco: mismas tres familias, misma paleta, mismo
   piñon dibujado. Lo que se sumo son bloques y remate — banda de
   cifras, frase en el tajo, seccion «el que sube desde Pucon» con
   telon, el año en una tabla, ficha de reserva y boton flotante de
   WhatsApp — mas dos correcciones medidas sobre la pagina viva: el
   aura corrida a la derecha (la entrada del glosario daba 4,02:1) y
   el velo lateral del telon nuevo (los pasos daban 3,5:1).
   SIN VIDEO, y es decision, no olvido: el clip de fondo se reserva
   para los negocios mejor valorados de la tanda.

   TERCERA PASADA — 10-09-2026
   La identidad sigue sin tocarse: mismas tres familias, misma paleta,
   mismo piñon, mismas ramas. Cuatro cosas:
   · Se saco un bloque «REVISION-TEMPORAL» que habia quedado pegado al
     final de este archivo desde una sesion de capturas. Traia un
     `opacity:1 !important; transition:none !important` sobre todos los
     reveals, la portada, el tajo y el mosaico: la pagina publicada
     estaba QUIETA de arriba abajo y la portada media 2 rem de aire en
     vez de 88svh. Era la razon de que se viera plana.
   · La rama se rehizo: era una cinta en zigzag de dientes iguales y
     espina de un pixel. Ahora tiene masa, engrosa hacia el borde por
     donde entra, cada hoja mide distinto y las dos van inclinadas.
   · El velo de la cita paso de plano a elipse: la banda entera estaba
     lavada y ahora la foto se ve a foco completo en los costados.
   · MAPA DE UBICACION en «Reservar y llegar», con los mosaicos de
     OpenStreetMap pegados en un JPEG propio y su atribucion visible.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crema:       #F6F0E4;
  --crema-2:     #EBE3D2;
  --pinon:       #7A4A22;   /* 6,5:1 sobre crema */
  --pinon-claro: #D9A46B;   /* 7,3:1 sobre araucaria */
  --araucaria:   #16241C;
  --araucaria-2: #1E3227;
  --tinta:       #241C12;
  --tinta-2:     #544A3C;   /* 7,6:1 sobre crema */
  --claro-2:     #C3C9BF;   /* 11:1 sobre araucaria */
  --linea:       #DCD3BF;
  --linea-osc:   #2C3B32;

  --display: 'Tienne', Georgia, 'Times New Roman', serif;
  --cuerpo:  'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Kode Mono', ui-monospace, 'Consolas', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.66;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

::selection { background: var(--pinon); color: var(--crema); }
a { color: var(--pinon); }
:focus-visible { outline: 2px solid var(--pinon); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--araucaria);
  color: var(--claro-2);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
}
.propuesta p { margin: 0; }
.propuesta__que { color: var(--crema); }
.propuesta__que b { font-weight: 700; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 64ch; }

/* ─────────── cabecera fantasma ─────────── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(246, 240, 228, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--tinta); margin-right: auto;
  min-width: 0; min-height: 44px;
}
.cab__nombre {
  font-family: var(--display);
  font-size: clamp(.95rem, 2.6vw, 1.25rem);
  line-height: 1.1;
}

/* ── EL PIÑON — la semilla sola ──
   Gota asimetrica con punta arriba. El gradiente le da el volumen de
   la cascara; el ::after es el brillo especular chico que la vuelve
   LISA (y la deslinda del mimbre mate de la 135). */
.pinon {
  position: relative;
  width: 13px; height: 19px;
  flex: 0 0 auto;
  border-radius: 52% 48% 44% 56% / 76% 74% 26% 24%;
  background: radial-gradient(circle at 34% 30%,
    #A8703C 0%, #7A4A22 48%, #45260E 100%);
}
.pinon::after {
  content: ''; position: absolute;
  left: 24%; top: 17%;
  width: 3px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 242, 224, .55);
  transform: rotate(-20deg);
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
/* El blanco de toque sube a 44 px con un ::after transparente centrado
   sobre el enlace, no con min-height: si se estira la caja, el
   subrayado —que va en el borde inferior— se despega de la palabra y
   queda flotando a media cabecera. Regla de toque cumplida, dibujo
   intacto. */
.cab__nav a {
  position: relative;
  font-family: var(--dato);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.cab__nav a:hover { color: var(--pinon); border-bottom-color: var(--pinon); }
@media (max-width: 52rem) { .cab__nav { display: none; } }

.cab__res {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px;
  text-align: right; text-decoration: none; line-height: 1.15;
  padding-left: 1.1rem; border-left: 1px solid var(--linea);
  flex: 0 0 auto;
}
.cab__res-rot {
  display: block; font-family: var(--dato);
  font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__res-num {
  display: block; font-family: var(--display);
  font-size: 1.05rem; color: var(--pinon);
}
.cab__res:hover .cab__res-num { text-decoration: underline; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crema);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 44rem); }

.sitio {
  font-family: var(--dato);
  font-size: .76rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1.4rem;
}
.portada h1 {
  font-size: clamp(2.5rem, 7.2vw, 5rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin-bottom: 1.5rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.18rem);
  color: var(--tinta-2);
  max-width: min(92vw, 35rem);
  margin-bottom: 2.2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.7rem; line-height: 1; }

/* ── LAS RAMAS ──
   Un rectangulo largo recortado en dientes: la hoja escamosa de la
   araucaria, que es triangular y va escalonada. Botanica, no motivo. */
.ramas {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  overflow: hidden;
}
.rama {
  position: absolute;
  height: 74px;
  background: var(--araucaria);
  opacity: .1;
  /* La rama TERMINA: se afina hacia la punta libre. Sin esto la
     banda de dientes se repite identica de borde a borde y deja de
     leerse como planta —una repeticion regular e infinita se parece
     a una guarda, y esta pagina no puede tener ninguna. */
  -webkit-mask-image: linear-gradient(270deg, #000 0 52%, rgba(0,0,0,.42) 78%, transparent 100%);
          mask-image: linear-gradient(270deg, #000 0 52%, rgba(0,0,0,.42) 78%, transparent 100%);
}
/* TERCERA PASADA — el dibujo de la rama, rehecho.
   Lo anterior era un zigzag de dientes iguales y de espina de un
   pixel: mirado en la captura no se leia como rama sino como una
   CINTA EN ZIGZAG cruzando el cielo — exactamente la guarda que la
   regla cultural de esta pagina prohibe. Se corrigen las tres cosas
   que lo causaban, sin tocar la idea:
     1 · la ESPINA es ahora una masa (del 44 % al 56 % en la punta y
         del 28 % al 72 % en la base), no una linea: se lee un brazo
         con pinches, no una linea quebrada;
     2 · la rama ENGROSA hacia el borde por donde entra, como una rama
         de verdad — las hojas crecen de 8 % a 48 % de alto;
     3 · cada hoja mide DISTINTO (factores .82 a 1.16 aplicados a la
         profundidad): el borde ya no se puede embaldosar con la vista.
   Las puntas de abajo siguen DESFASADAS media unidad respecto a las
   de arriba: sin ese desfase los dientes coinciden y salen rombos. */
.rama--1 {
  clip-path: polygon(
    0% 44%, 6.25% 39%, 12.5% 42%, 18.75% 37%, 25% 40%,
    31.25% 27%, 37.5% 38%, 43.75% 28%, 50% 36%, 56.25% 15%,
    62.5% 34%, 68.75% 20%, 75% 32%, 81.25% 8%, 87.5% 30%,
    93.75% 8%, 100% 28%,
    100% 72%, 93.75% 71%, 87.5% 94%, 81.25% 69%, 75% 83%,
    68.75% 67%, 62.5% 88%, 56.25% 65%, 50% 76%, 43.75% 63%,
    37.5% 74%, 31.25% 61%, 25% 66%, 18.75% 59%, 12.5% 65%,
    6.25% 57%, 0% 57%
  );
}
.rama--2 {
  clip-path: polygon(
    0% 44%, 6.25% 37%, 12.5% 42%, 18.75% 37%, 25% 40%,
    31.25% 29%, 37.5% 38%, 43.75% 27%, 50% 36%, 56.25% 20%,
    62.5% 34%, 68.75% 21%, 75% 32%, 81.25% 5%, 87.5% 30%,
    93.75% 10%, 100% 28%,
    100% 72%, 93.75% 71%, 87.5% 96%, 81.25% 69%, 75% 83%,
    68.75% 67%, 62.5% 87%, 56.25% 65%, 50% 75%, 43.75% 63%,
    37.5% 74%, 31.25% 61%, 25% 66%, 18.75% 59%, 12.5% 65%,
    6.25% 57%, 0% 58%
  );
}
/* Entran de bordes distintos, con tamanos distintos Y CON INCLINACION:
   una rama perfectamente horizontal se lee como banda decorativa por
   mucho que se le dibujen hojas. La inclinacion base va en la
   propiedad `rotate` y el vaiven en `transform`, que son propiedades
   independientes y se componen solas: asi el bucle no pisa el angulo. */
.rama--1 { right: -8%;  top: 7%;     width: 58%; rotate: -5deg;
           transform-origin: 100% 50%; }
.rama--2 { right: -16%; bottom: 19%; width: 42%; height: 54px; rotate: 4deg;
           transform-origin: 100% 50%; opacity: .075; }

.js .rama--1 { animation: mece 14s ease-in-out infinite; }
.js .rama--2 { animation: mece 19s ease-in-out infinite 3s; }

/* Vaiven MINIMO: menos de un grado. Una rama que se mueve mucho se
   lee como bandera, no como arbol. */
@keyframes mece {
  0%, 100% { transform: rotate(0deg);   }
  35%      { transform: rotate(.75deg); }
  70%      { transform: rotate(-.5deg); }
}

/* ═══════════ LA PIEZA FIRMA — ESTRUCTURA J ═══════════ */
.glosario {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crema-2);
}
.glosario__cabecera { max-width: min(100%, 44rem); margin-bottom: 2.4rem; }

.antetitulo {
  font-family: var(--dato);
  font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: .8rem;
}
.antetitulo--claro { color: var(--pinon-claro); }

.glosario h2, .temporada h2,
.subida h2, .despensa h2, .reserva h2 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.06rem;
  color: var(--tinta-2);
  max-width: min(100%, 38rem);
  margin-bottom: 1.4rem;
}

.marca-ejemplo { margin: 0; }
.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pinon);
  border-left: 2px solid var(--pinon);
  padding-left: .6rem;
}

/* ── las fichas ──
   Son CINCO, y con auto-fit la quinta quedaba sola estirada de punta a
   punta: se leia como un error de maquetacion. Con seis columnas y dos
   anchos de span, la fila de arriba lleva tres tercios y la de abajo
   dos mitades. Ninguna queda huerfana a ningun ancho. */
.fichas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-bottom: 1.6rem;
}
.fichas .ficha { grid-column: span 2; }
.fichas .ficha:nth-child(4), .fichas .ficha:nth-child(5) { grid-column: span 3; }
@media (max-width: 68rem) {
  .fichas { grid-template-columns: repeat(2, 1fr); }
  .fichas .ficha, .fichas .ficha:nth-child(4) { grid-column: span 1; }
  .fichas .ficha:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 42rem) {
  .fichas { grid-template-columns: 1fr; }
  .fichas .ficha, .fichas .ficha:nth-child(4), .fichas .ficha:nth-child(5) { grid-column: 1 / -1; }
}
.ficha { background: var(--crema); padding: 1.5rem clamp(1.1rem, 2.5vw, 1.6rem); }
.ficha__n {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--pinon);
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--pinon);
}
.ficha__specs { margin: 0; }
.sp {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: .2rem 1rem;
  padding: .65rem 0;
  border-top: 1px solid var(--linea);
}
.sp:first-child { border-top: 0; padding-top: 0; }
.sp dt {
  font-family: var(--dato);
  font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding-top: .2rem;
}
.sp dd { margin: 0; font-size: .95rem; color: var(--tinta); }
@media (max-width: 26rem) { .sp { grid-template-columns: 1fr; } }

/* ── la barra de meses ──
   Misma tecnica que la 141, otra familia: alli es calendario de MAR
   (con veda), aca de MONTAÑA (sin veda, con brote). Se anota el cruce
   de tanda a proposito para que no se lea como repeticion. */
.cal { display: flex; gap: 2px; margin-bottom: .35rem; }
.m {
  display: flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem;
  font-family: var(--dato);
  font-size: .62rem;
  line-height: 1;
  border-radius: 2px;
}
.m--si  { background: var(--pinon);   color: var(--crema); }
.m--hay { background: var(--crema-2); color: var(--tinta-2);
          box-shadow: inset 0 0 0 1px var(--linea); }
.m--no  { background: transparent;    color: #655D4D;
          box-shadow: inset 0 0 0 1px var(--linea); }
.cal__t {
  display: block;
  font-family: var(--dato);
  font-size: .74rem;
  color: var(--tinta-2);
}

.leyenda {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  font-family: var(--dato);
  font-size: .74rem;
  color: var(--tinta-2);
}
.leyenda li { display: flex; align-items: center; gap: .45rem; }
.leyenda .m { width: 1.1rem; height: 1.1rem; }

.firma {
  font-size: .94rem;
  color: var(--tinta-2);
  max-width: min(100%, 44rem);
  margin: 0;
}
.falta {
  font-family: var(--dato);
  font-size: .88em;
  color: var(--pinon);
  border-bottom: 1px dashed var(--pinon);
}
/* En las bandas oscuras el cafe de cascara se hunde: el .falta pasa al
   pinon claro, que da 7,3:1 sobre el verde araucaria. */
.temporada .falta,
.subida .falta,
.reserva .falta { color: var(--pinon-claro); border-bottom-color: var(--pinon-claro); }

/* ═══════════ LA TEMPORADA MANDA ═══════════ */
.temporada {
  background: var(--araucaria);
  color: var(--crema);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.temporada__cuerpo { max-width: min(100%, 48rem); }
.temporada .entrada,
.subida .entrada,
.reserva .entrada { color: var(--claro-2); margin-bottom: 2.4rem; }

.razones { display: grid; gap: 1.6rem; margin-bottom: 2rem; }
.razon {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: .3rem 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea-osc);
}
.razon__n {
  font-family: var(--dato);
  font-size: .9rem;
  color: var(--pinon-claro);
  margin: 0;
  grid-row: 1 / span 2;
}
.razon h3 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 .35rem; }
.razon p { color: var(--claro-2); font-size: .97rem; margin: 0; }
@media (max-width: 34rem) {
  .razon { grid-template-columns: 1fr; }
  .razon__n { grid-row: auto; }
}

.nota-honesta {
  font-size: .95rem;
  color: var(--claro-2);
  background: var(--araucaria-2);
  border-left: 3px solid var(--pinon-claro);
  padding: 1rem 1.2rem;
  margin-bottom: 0;
}
.nota-honesta b { color: var(--crema); }

.sub {
  font-size: 1.6rem;
  margin: 2.6rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea-osc);
}

.huecos { margin: 0; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: .3rem 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linea-osc);
}
.hueco:last-child { border-bottom: 1px solid var(--linea-osc); }
.huecos dt {
  font-family: var(--dato);
  font-size: .76rem;
  color: var(--claro-2);
  align-self: start;
  padding-top: .2rem;
}
.huecos dd { margin: 0; }
.hueco__pq { display: block; font-size: .92rem; color: var(--claro-2); margin-top: .35rem; }
@media (max-width: 40rem) { .hueco { grid-template-columns: 1fr; } }

/* ── la reserva (T5) ── */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.campo--ancho { grid-column: 1 / -1; }
@media (max-width: 34rem) { .form { grid-template-columns: 1fr; } }

.campo label {
  display: block;
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: .4rem;
}
.opcional { text-transform: none; letter-spacing: .02em; }
/* Medido sobre la pagina viva: con .5rem de relleno la caja daba 43,99 px
   de alto, justo por DEBAJO del minimo tactil. Con .72rem queda en 48,
   que es lo que pide la regla para campos y botones principales. */
.campo input {
  width: 100%;
  font-family: var(--cuerpo);
  font-size: 1rem;
  color: var(--crema);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--claro-2);
  border-radius: 0;
  padding: .72rem 0;
  -webkit-appearance: none; appearance: none;
}
.campo input::placeholder { color: #8A9188; }
.campo input:focus { outline: none; border-bottom-color: var(--pinon-claro); border-bottom-width: 2px; }

.resumen {
  grid-column: 1 / -1;
  font-family: var(--dato);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--crema);
  background: var(--araucaria-2);
  border-left: 2px solid var(--pinon-claro);
  padding: .9rem 1rem;
  margin: .6rem 0 0;
}
.boton {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex; align-items: center;
  min-height: 48px;
  font-family: var(--cuerpo);
  font-weight: 700;
  font-size: .95rem;
  color: var(--araucaria);
  background: var(--pinon-claro);
  text-decoration: none;
  padding: .8rem 1.6rem;
  border-radius: 2px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.boton:hover { background: var(--crema); transform: translateY(-2px); }
.reservar__nota { grid-column: 1 / -1; font-size: .86rem; color: var(--claro-2); margin: 0; }

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--crema-2);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 2rem; }
.dueno__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.dueno h3 {
  font-family: var(--dato);
  font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pinon);
  margin-bottom: .5rem;
}
.dueno p { color: var(--tinta-2); font-size: .96rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
/* Mismo truco que el nav: el blanco de toque lo pone un ::after
   transparente de 44 px centrado sobre la palabra, para que el filete
   siga pegado a la letra y no a media caja. */
.flecha {
  position: relative;
  font-weight: 700;
  color: var(--pinon);
  text-decoration: none;
  border-bottom: 1px solid var(--pinon);
  padding-bottom: 2px;
}
.flecha::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.flecha span { display: inline-block; transition: transform .25s ease; }
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.flecha:hover span { transform: translateX(4px); }

.pie {
  background: var(--araucaria);
  color: var(--claro-2);
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .8rem;
}
.pie p { margin: 0; max-width: 66ch; }

/* ═══════════ APARICIONES ═══════════ */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.ok { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (prefers-reduced-motion: reduce) {
  /* Las ramas quedan QUIETAS, no se esconden: una rama detenida sigue
     siendo una rama (a diferencia de la espuma de la 141 o de las
     gaviotas de la 142, que sin movimiento no se entienden). */
  .js .rama--1, .js .rama--2 { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LAS IMÁGENES DE RUBRO — seis tratamientos
   ══════════════════════════════════════════════════════════════════
   La página no puede ser texto sobre fondo plano de arriba abajo. Van
   seis apariciones distintas, para que el ojo no vea siempre lo mismo:
   portada disuelta, aura de color, media pantalla, cita a sangre, tira
   de tres, y la galería con las fotos propias del negocio.

   LA REGLA: la foto no se ensucia para poder leer encima. Lo que
   sostiene el contraste es un gradiente por zona. La ÚNICA excepción es
   el aura, donde el desenfoque no es un parche sino el efecto entero.

   Procedencia de cada archivo: imagenes/FUENTES.txt
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · PORTADA ── */
/* position/isolation acá y no heredadas: hay demos cuya .portada no es
   posicionada, y entonces el .portada__foto absoluto se cuelga del body
   y tapa el titular entero. El z-index del texto va por lo mismo. */
.portada--foto { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { position: relative; z-index: 2; max-width: 40rem; }
.portada__foto { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 46% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--crema) 0%, var(--crema) 30%,
              rgba(246,240,228,.66) 46%, rgba(246,240,228,.22) 68%, rgba(246,240,228,.06) 86%);
}
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: respira 46s ease-in-out infinite alternate; }
}
@keyframes respira {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.8%, -1.2%, 0); }
}
.js .portada--foto .portada__foto { opacity: 0; }
.js .portada--foto.ok .portada__foto { opacity: 1; transition: opacity 1.1s ease; }
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: none; }
/* ── LA PORTADA EN TELEFONO — recompuesta, no rotada ──
   TERCERA PASADA. Antes la foto ocupaba la caja entera y solo se
   rotaban mascara y velo a 180deg. Medido sobre los pixeles de la
   captura a 500 px (no calculado: leidos uno a uno del PNG), el rotulo
   «RESTAURANTE · CURARREHUE» caia justo encima del follaje oscuro de
   la araucaria y daba 1,54:1 — el peor pixel bajo esa linea era
   #68685E. El titular daba 4,09:1, que pasa por ser grande, pero
   tambien estaba sobre foto.

   El arreglo es el de la variante «recomponer entera»: la foto se
   queda en una FRANJA de arriba (46svh) y el texto empieza despues
   (48svh), sobre crema limpio. Nadie escribe encima de nadie, asi que
   el contraste ya no depende de que trozo del bosque toque. La foto no
   se ensucia: la franja se apaga con mascara y velo, y el sujeto —los
   piñones— sigue entero arriba.
   Medido despues del cambio: rotulo 8,7:1, titular 15,8:1. */
@media (max-width: 860px) {
  .portada--foto { padding-top: 48svh; }
  .portada__foto { inset: 0 0 auto 0; height: 46svh; }
  .portada__foto img {
    object-position: 50% 46%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.45) 82%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.45) 82%, transparent 100%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(246,240,228,0) 0%, rgba(246,240,228,.12) 54%,
                rgba(246,240,228,.62) 82%, var(--crema) 100%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#glosario { position: relative; isolation: isolate; overflow: hidden; }
.aura { position: absolute; z-index: -1; inset: -12% -8% auto -8%; height: 78%; pointer-events: none; }
.aura img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Acá el desenfoque ES el efecto: la foto deja de leerse y queda la luz. */
  filter: blur(64px) saturate(1.45);
  opacity: .34;
  transform: scale(1.25);
  /* Y se apaga EN LA IMAGEN, no con un velo encima. Un ::after que pinta
     el fondo apaga solo DENTRO del div: en el borde de abajo queda un
     corte recto a media seccion. Con la mascara la imagen misma se
     desvanece y no hay borde que cortar. */
  /* El centro del aura se corrio a la DERECHA (era 50%, ahora 74%). No
     es capricho de composicion: medido sobre la pagina renderizada, la
     entrada de esta seccion daba 4,02:1 con el aura centrada —el color
     caia justo encima de la columna de texto y hundia el fondo de
     0,77 a 0,48 de luminancia. Corrida, el texto queda sobre el
     crema-2 casi limpio y la mancha de color se ve igual de bien en el
     costado libre. */
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 74% 30%,
              #000 0%, #000 22%, rgba(0,0,0,.55) 50%, transparent 80%);
          mask-image: radial-gradient(ellipse 58% 58% at 74% 30%,
              #000 0%, #000 22%, rgba(0,0,0,.55) 50%, transparent 80%);
}
@media (prefers-reduced-motion: no-preference) {
  .aura img { animation: deriva-aura 68s ease-in-out infinite alternate; }
}
@keyframes deriva-aura {
  from { transform: scale(1.25) translate3d(-3%, 0, 0); }
  to   { transform: scale(1.38) translate3d(3%, -2%, 0); }
}

/* ── 3 · MEDIA PANTALLA ── */
.mitades {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--crema-2);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala, ambos se salen unos píxeles y
     aparece scroll horizontal por un segundo. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: 62svh; overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--tinta);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2); margin: 0 0 .9rem;
}
.mitades h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08;
  margin: 0 0 1rem; color: var(--tinta);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--tinta); max-width: 34rem;
}
.js .mitades__texto.rev { opacity: 0; transform: translateX(1.6rem); }
.js .mitades__foto.rev  { opacity: 0; transform: scale(1.04); }
.js .mitades__texto.rev.ok,
.js .mitades__foto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 780px) {
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto { min-height: 44svh; }
}

/* ── 4 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: 70svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--crema); overflow: hidden;
}
.cita__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* TERCERA PASADA — el velo de la cita.
   Era un velo PLANO de .72 a .90 de arriba abajo: como el texto va
   centrado hacia falta fuerza en el centro, pero al aplicarla pareja
   apagaba tambien los bordes y la banda entera quedaba leche —una
   franja crema sin foto, que es justo lo que una plantilla hace.
   Ahora el velo es una elipse: fuerte donde vive el texto y abierto
   en los costados, donde los hongos y el musgo se ven a foco
   completo. La foto no se ensucia en ninguna parte; lo que sostiene
   el contraste es la zona del gradiente, no la calidad del JPEG.

   PEOR CASO MEDIDO A MANO, que es lo que el auditor no sabe hacer:
   si debajo hubiera una foto NEGRA entera, el fondo compuesto bajo el
   texto (alfa .90) es rgb(221,216,205) y da 11,6:1 con la tinta y
   5,2:1 con el cafe del eco. En el borde de la elipse (alfa .58) da
   4,9:1 con la tinta — y ahi no hay texto. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 66% 78% at 50% 48%,
              rgba(246,240,228,.93) 0%, rgba(246,240,228,.90) 46%,
              rgba(246,240,228,.58) 76%, rgba(246,240,228,.24) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--tinta); }
.cita__texto p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.16;
  margin: 0; color: var(--tinta);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pinon);
}
.js .cita__texto.rev { opacity: 0; transform: translateY(16px); }
.js .cita__texto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
  .cita__foto img { animation: respira-cita 58s ease-in-out infinite alternate; }
}
@keyframes respira-cita {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(1.4%, -1%, 0); }
}

/* ── 5 · LA TIRA ── */
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--linea); }
.tira__pieza { margin: 0; overflow: hidden; height: 34svh; min-height: 220px; }
.tira__pieza img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .tira__pieza:hover img { transform: scale(1.05); }
}
.js .tira__pieza.rev { opacity: 0; transform: translateY(1.4rem); }
.js .tira__pieza.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .tira__pieza.rev.ok:nth-child(2) { transition-delay: .1s; }
.js .tira__pieza.rev.ok:nth-child(3) { transition-delay: .2s; }
@media (max-width: 700px) {
  .tira { grid-template-columns: 1fr 1fr; }
  .tira__pieza:last-child { grid-column: 1 / -1; height: 28svh; }
}

@media (prefers-reduced-motion: reduce) {
  .js .portada--foto .portada__foto,
  .js .mitades__texto.rev, .js .mitades__foto.rev,
  .js .cita__texto.rev, .js .tira__pieza.rev { opacity: 1; transform: none; }
}

/* ── TAJO: LA FRANJA A SANGRE ──
   Una franja de foto entre dos secciones, con una frase abajo. El velo
   SUBE desde el borde inferior y arranca en alfa 0: los dos tercios de
   arriba quedan a foco completo. La foto no se ensucia en ninguna
   parte — lo que sostiene el contraste es el gradiente, no la calidad
   del JPEG. */
/* La clase es .tajo y no .banda ni .franja: hay demos que ya usan esos
   dos nombres para secciones propias, y chocaban. */
.tajo {
  margin: 0;
  position: relative; overflow: hidden;
  height: clamp(230px, 36svh, 420px);
  background: var(--crema-2);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .tajo img { animation: deriva-tajo 54s ease-in-out infinite alternate; }
}
@keyframes deriva-tajo {
  from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, -1.4%, 0); }
}
.js .tajo { opacity: 0; }
.js .tajo.ok { opacity: 1; transition: opacity 1s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .tajo { opacity: 1; }
}

/* ── TELON: la foto detras de una seccion entera ──
   No es el aura. El aura va reventada a 64 px y se lee como mancha de
   color; el telon va NITIDO y bajo de opacidad, y se lee como foto.
   El texto encima se sostiene porque la foto esta al .15, no porque
   este sucia — que es la regla de siempre. */
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  opacity: .15;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .telon img { animation: deriva-telon 76s ease-in-out infinite alternate; }
}
@keyframes deriva-telon {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.6%, -1%, 0); }
}

/* ── MOSAICO ──
   Seis piezas en grilla. Es la unica parte de la pagina donde una
   imagen puede repetirse con otro recorte: a este tamano no se lee
   como repeticion sino como serie. */
/* El mosaico trae su propio fondo: sus colores salen del bloque de
   .mitades y hay demos donde ese fondo es el contrario al del body —
   el titulo quedaba a 1,00:1, invisible. Con fondo propio el contraste
   esta garantizado en todas. */
.mos {
  background: var(--crema-2);
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.mos__titulo {
  max-width: 82rem; margin-left: auto; margin-right: auto;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.08;
  margin: 0 0 .5rem; color: var(--tinta);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--tinta-2); font-size: .94rem; line-height: 1.6;
}
.mos__grilla {
  display: grid; gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 82rem; margin: 0 auto;
}
.mos__p { margin: 0; overflow: hidden; height: clamp(140px, 20svh, 220px); background: var(--crema-2); }
.mos__p img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
/* Con seis piezas y solo las celdas 1 y 6 a doble ancho quedaban 8 celdas
   en una grilla de 3: la ultima fila se cerraba con un hueco. Con la 3
   tambien a doble, son 9 y la retícula cierra exacta. */
.mos__p:nth-child(1), .mos__p:nth-child(3), .mos__p:nth-child(6) { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) {
  .mos__p:hover img { transform: scale(1.06); }
}
.js .mos__p { opacity: 0; transform: translateY(1.2rem); }
.js .mos__p.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .mos__p.ok:nth-child(2) { transition-delay: .06s; }
.js .mos__p.ok:nth-child(3) { transition-delay: .12s; }
.js .mos__p.ok:nth-child(4) { transition-delay: .18s; }
.js .mos__p.ok:nth-child(5) { transition-delay: .24s; }
.js .mos__p.ok:nth-child(6) { transition-delay: .30s; }
@media (max-width: 760px) {
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: 1 / -1; }
  /* A dos columnas la 3 vuelve a ancho simple: si no, la 2 se queda
     sola en su fila y reaparece el hueco por el otro lado. */
  .mos__p:nth-child(3) { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SEGUNDA PASADA — 09-09-2026
   La pagina tenia nueve bloques y se acababa antes que el argumento.
   Se suman cinco: la banda de cifras, la frase del tajo, la seccion
   del que sube desde Pucon (telon), el ano en una tabla y la ficha de
   reserva con su formulario. Identidad intacta: mismas tres familias,
   misma paleta, mismo criterio de que la foto no se ensucia.
   Sin video: es decision tomada, este negocio no esta en ese grupo.
   ══════════════════════════════════════════════════════════════════ */

/* ── Texto que se lee solo con lector de pantalla ── */
.oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Los dos botones de la portada ──
   El lleno va en cafe de cascara sobre crema: 6,5:1 con la letra crema
   encima. El de linea es el mismo cafe en filete, para que el ojo
   elija el primero sin que el segundo desaparezca. */
.portada__ir { display: flex; flex-wrap: wrap; gap: .7rem .9rem; margin: 0 0 2.2rem; }
.boton--claro { background: var(--pinon); color: var(--crema); }
.boton--claro:hover { background: var(--tinta); color: var(--crema); }
.boton--linea {
  background: transparent; color: var(--pinon);
  box-shadow: inset 0 0 0 1px var(--pinon);
}
.boton--linea:hover { background: var(--pinon); color: var(--crema); }

/* ── LAS CIFRAS ──
   Cuatro numeros y la herida adentro de la misma fila. Pinon claro
   sobre araucaria: 7,3:1. El rotulo va en mono y en claro-2: 11:1. */
.cifras {
  background: var(--araucaria);
  color: var(--crema);
  border-top: 3px solid var(--pinon);
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.25rem, 5vw, 4rem);
}
.cifras__lista {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 72rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.cifras__lista li { text-align: center; }
.cifras__lista b {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 3.3rem); line-height: 1;
  color: var(--pinon-claro);
  font-variant-numeric: tabular-nums;
}
.cifras__lista span {
  display: block; margin-top: .5rem;
  font-family: var(--dato); font-size: .72rem; line-height: 1.5;
  color: var(--claro-2);
}
@media (max-width: 44rem) {
  .cifras__lista { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
}

/* ── LA FRASE DEL TAJO ──
   Peor caso calculado a mano, que es lo que el auditor no sabe hacer:
   si bajo el velo hubiera una foto BLANCA entera, el fondo compuesto
   en la linea del titular es rgba(22,36,28,.82) sobre blanco =
   #404B45, y el blanco de la letra da 9,0:1. En el pie, con .94, da
   12,7:1.

   Y ademas MEDIDO sobre los pixeles de la captura, leidos uno a uno
   del PNG con esta foto puesta: el pixel mas claro que aparece bajo la
   franja del titular es #808981 y da 3,61:1 con el blanco — el
   titular mide 36,8 px, es texto grande y el minimo es 3:1, asi que
   pasa. El pie da 4,94:1 sobre 4,5. La diferencia con el calculo no
   es un error: el calculo mira la fila donde el velo ya va en .82 y la
   medicion mira tambien el borde de arriba, donde va en .70.
   Si alguien cambia la foto del tajo, esos dos numeros hay que
   volverlos a medir; no se heredan. */
.tajo__txt {
  position: absolute; inset: auto 0 0 0;
  margin: 0;
  padding: clamp(3rem, 9vw, 5rem) clamp(1.25rem, 5vw, 4rem) 1.4rem;
  background: linear-gradient(180deg,
      rgba(22,36,28,0) 0%, rgba(22,36,28,.45) 30%,
      rgba(22,36,28,.82) 62%, rgba(22,36,28,.94) 100%);
}
.tajo__txt p {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  color: #FFFFFF;
  max-width: 22ch;
}
.tajo__pie {
  display: block;
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pinon-claro);
}

/* ── EL QUE SUBE DESDE PUCON — seccion con telon ──
   Banda oscura con la foto NITIDA por detras. El telon de esta seccion
   va mas alto de opacidad que el del glosario (.30 contra .15) porque
   la foto es una silueta contra el crepusculo: casi todo es cielo, y
   al .15 no se veia nada. Se calibra mirando, no copiando el numero. */
.subida {
  background: var(--araucaria);
  color: var(--crema);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.subida__cuerpo { max-width: min(100%, 48rem); }
.telon--b img { opacity: .30; object-position: 50% 62%; }
/* Velo lateral del color DE la seccion, en rgba literal y terminando en
   alfa 0: el borde derecho de la foto queda a foco completo y bajo el
   texto casi no queda foto. Peor caso calculado a mano —si el cielo del
   crepusculo fuera BLANCO puro— el fondo compuesto bajo los pasos es
   rgb(33,46,38) y el gris claro de la letra da 8,4:1. Sin este velo la
   misma medida daba 3,5:1: el cielo rosado del atardecer es lo mas
   claro de la foto y cae justo en la columna del texto. */
.telon--b::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
      rgba(22,36,28,.88) 0%, rgba(22,36,28,.82) 34%,
      rgba(22,36,28,.5) 58%, rgba(22,36,28,.12) 84%,
      rgba(22,36,28,0) 100%);
}
.pasos {
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  display: grid; gap: 1rem;
}
/* El bullet es la gota del pinon vista de punta, no un disco: la misma
   forma de la cabecera, dibujada con clip-path. Despensa, no adorno. */
.pasos li {
  position: relative; padding-left: 1.7rem;
  color: var(--claro-2); font-size: 1rem; line-height: 1.6;
}
.pasos li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 10px; height: 12px;
  background: var(--pinon-claro);
  clip-path: polygon(50% 0%, 100% 58%, 78% 100%, 22% 100%, 0% 58%);
}
.pasos b { color: var(--crema); font-weight: 600; }
.subida__cierre {
  margin: 0; max-width: 44rem;
  color: var(--claro-2); font-size: .97rem;
  border-left: 3px solid var(--pinon-claro);
  padding-left: 1.1rem;
}

/* ── EL ANO EN UNA TABLA ──
   La caja lleva overflow-x propio: a 375 px la tabla no empuja el body
   ni un pixel. Regla de la casa medida con scrollWidth, no a ojo. */
.despensa {
  background: var(--crema);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.despensa__cuerpo { max-width: min(100%, 62rem); }
.tabla__caja { overflow-x: auto; margin-bottom: 1.4rem; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla__cap {
  caption-side: bottom; text-align: left;
  font-family: var(--dato); font-size: .74rem; line-height: 1.6;
  color: var(--tinta-2); padding-top: .9rem;
}
.tabla thead th {
  font-family: var(--dato); font-weight: 400;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2); text-align: center;
  padding: .5rem .15rem; border-bottom: 1px solid var(--linea);
}
.tabla thead th:first-child { text-align: left; padding-left: 0; }
.tabla thead th abbr { text-decoration: none; border: 0; }
.tabla tbody tr { border-bottom: 1px solid var(--linea); }
.tabla tbody th {
  text-align: left; white-space: nowrap;
  font-family: var(--display); font-weight: 400; font-size: 1.1rem;
  color: var(--pinon);
  padding: .8rem 1rem .8rem 0;
}
.tabla td.c { position: relative; padding: .8rem .12rem; width: 3.4%; }
.tabla td.c::before {
  content: ""; display: block; height: 1.3rem; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--linea);
}
.tabla td.c--si::before  { background: var(--pinon); box-shadow: none; }
.tabla td.c--hay::before { background: var(--crema-2); }
.tabla td.tabla__nota {
  font-size: .86rem; line-height: 1.5; color: var(--tinta-2);
  padding: .8rem 0 .8rem 1.2rem;
}
.despensa__nota {
  font-size: .95rem; color: var(--tinta-2);
  background: var(--crema-2);
  border-left: 3px solid var(--pinon);
  padding: 1rem 1.2rem; margin: 0; max-width: 48rem;
}
.despensa__nota b { color: var(--tinta); }
/* En telefono la tabla deja de ser tabla: cada fila es un bloque con
   el nombre arriba y los doce meses en una tira. El <thead> se esconde
   con clip-path pero NO sale del DOM, para que el lector de pantalla
   siga leyendo el mes de cada celda.
   OJO: ese <thead> tiene area cero — no observarlo nunca con el
   IntersectionObserver, porque no dispara jamas. */
@media (max-width: 46rem) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla tbody tr { display: flex; flex-wrap: wrap; padding: 1rem 0; }
  .tabla tbody th { flex: 0 0 100%; padding: 0 0 .6rem; }
  .tabla td.c { flex: 1 1 0; width: auto; padding: 0 .1rem; }
  .tabla td.tabla__nota { flex: 0 0 100%; padding: .7rem 0 0; }
  /* Escondido el <thead>, la tira de doce casillas se quedaba muda: se
     veia cual esta marcada pero no de que mes. La inicial vuelve DENTRO
     de la celda, sacada del atributo data-m. Va por CSS y no en un
     style en linea, que la CSP bloquearia. */
  .tabla td.c::after {
    content: attr(data-m);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--dato); font-size: .6rem; line-height: 1;
    color: var(--tinta-2);
  }
  .tabla td.c--si::after { color: var(--crema); }
}

/* ── RESERVAR Y LLEGAR ── */
.reserva {
  background: var(--araucaria);
  color: var(--crema);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.reserva__cuerpo { max-width: min(100%, 62rem); }
/* El cuerpo de esta seccion subio de 48 a 62 rem para que el mapa
   tenga presencia; lo que ya estaba se queda en su ancho de antes. */
.reserva .huecos { max-width: min(100%, 48rem); }
.reserva__intro { color: var(--claro-2); font-size: .98rem; max-width: min(100%, 48rem); }
.reserva .sub { margin-top: 3rem; }
.reserva .form { max-width: 34rem; }

/* ── DONDE QUEDA: EL MAPA ───────────────────────────────────────────
   El mapa es una IMAGEN nuestra, no un iframe: la CSP de esta pagina
   dice default-src 'none' y bloquea Google Maps y cualquier Leaflet
   desde CDN sin dejar un solo error visible. Los mosaicos de
   OpenStreetMap se bajaron una vez con demos/mapa-negocio.ps1 y se
   pegaron en imagenes/mapa-01.jpg. El «Como llegar» es un enlace, y
   un enlace si pasa.
   El JPEG se baja apenas la saturacion (.86) para que el naranja de
   la ruta no pelee con el cafe de cascara de la pagina. No se tiñe ni
   se oscurece: un mapa que no se lee no sirve de nada. */
.llegar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.6rem 2.4rem;
  align-items: start;
}
@media (max-width: 48rem) { .llegar { grid-template-columns: 1fr; } }

.mapa {
  margin: 0;
  border-radius: 10px; overflow: hidden;
  background: var(--araucaria-2);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
}
.mapa img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  filter: saturate(.86);
}
.mapa__pie {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: .2rem 1rem;
  padding: .35rem .9rem .5rem;
  font-family: var(--dato); font-size: .66rem; line-height: 1.4;
  color: var(--claro-2);
}
/* La atribucion a OpenStreetMap va VISIBLE y con enlace al copyright:
   es ODbL y lo exige. Los tres trozos van en linea con gap para que el
   enlace pueda medir sus 44 px de toque sin romper la frase. */
.mapa__cred { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .5ch; }
.mapa__pie a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--claro-2);
}
.mapa__pie .mapa__ir {
  color: var(--pinon-claro);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; gap: .4rem;
}
.mapa__pie .mapa__ir span { display: inline-block; transition: transform .25s ease; }
.mapa__pie .mapa__ir:hover { color: var(--crema); }
.mapa__pie .mapa__ir:hover span { transform: translateX(4px); }

.llegar__datos > p:first-child { color: var(--crema); font-size: 1rem; margin-bottom: 1rem; }
.llegar__datos b { font-weight: 600; }
.ruta { margin: 0 0 1.1rem; }
.ruta > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: .2rem 1.2rem;
  padding: .8rem 0;
  border-top: 1px solid var(--linea-osc);
}
.ruta > div:last-child { border-bottom: 1px solid var(--linea-osc); }
.ruta dt {
  font-family: var(--dato); font-size: .72rem;
  color: var(--claro-2); padding-top: .2rem;
}
.ruta dd { margin: 0; color: var(--claro-2); font-size: .95rem; }
@media (max-width: 34rem) { .ruta > div { grid-template-columns: 1fr; } }
.llegar__nota { margin: 0; font-size: .88rem; color: var(--claro-2); }

/* ── APARICIONES EN CASCADA ──
   El contenedor se neutraliza y animan los hijos. Si no se neutraliza,
   contenedor e hijos bajan a la vez y el grupo entero se desplaza el
   doble. El indice va por nth-child en el CSS y NUNCA en un
   style="--i:3": la CSP sin unsafe-inline lo bloquea sin avisar. */
.js .cascada.rev { opacity: 1; transform: none; transition: none; }
.js .cascada.rev > * { opacity: 0; transform: translateY(20px); }
.js .cascada.rev.ok > * {
  opacity: 1; transform: none;
  transition: opacity .35s ease-out, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.cascada > :nth-child(1) { --i: 0; }
.cascada > :nth-child(2) { --i: 1; }
.cascada > :nth-child(3) { --i: 2; }
.cascada > :nth-child(4) { --i: 3; }
.cascada > :nth-child(5) { --i: 4; }
.cascada > :nth-child(6) { --i: 5; }

/* ── EL DIFUMINADO AL SCROLL ────────────────────────────────────────
   La foto de portada se disuelve al salir y la de la cita entra
   enfocandose. Son doce lineas que corren en el compositor y hacen lo
   que una demo corriente consigue con GSAP + ScrollTrigger, 70 KB de
   libreria y una peticion a un CDN que esta CSP bloquearia. Donde
   `animation-timeline` no existe, sencillamente no pasa nada.

   Tres cosas que no se pueden cambiar:
   1 · el filtro va en el CONTENEDOR (.portada__foto, .cita__foto), no
       en el <img>, que ya lleva su propio vaiven de escala;
   2 · el `scale` acompaña al blur, porque sin el el desenfoque deja
       ver el filo transparente de la caja;
   3 · la OPACIDAD no se toca aca. Es la que main.js usa para la
       aparicion de la portada, y una animacion pisa a una transicion:
       si el script llegara tarde, la foto se quedaria a medio camino.

   Como la pagina es CLARA, la portada se disuelve HACIA EL CREMA y con
   7 px de blur basta. La cita entra desde 9 px y llega a foco. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .portada__foto {
      animation: portada-se-va linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 92vh;
    }
    .cita__foto {
      animation: cita-enfoca linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 95%;
    }
  }
}
@keyframes portada-se-va { to { filter: blur(7px); transform: scale(1.05); } }
@keyframes cita-enfoca   { from { filter: blur(9px); } to { filter: blur(0); } }

/* ── WHATSAPP FLOTANTE ──────────────────────────────────────────────
   Boton fijo abajo a la derecha. 56 px de alto: por encima de los 44
   del minimo tactil. Verde de WhatsApp a proposito — se reconoce sin
   leerlo, y eso es lo que hace que se toque. #07310F sobre #25D366 da
   9,1:1.

   La direccion del truco importa: el boton se ve SIEMPRE por defecto y
   el JS solo lo esconde mientras el visitante esta en la portada, para
   no tapar el titular. Si el script no arranca, o si rescate.js quita
   la clase .js, el boton queda visible, que es el estado que vende. */
.wapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 56px;
  padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: #25D366;
  color: #07310F;
  text-decoration: none;
  font-family: var(--cuerpo);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .2);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.wapp__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wapp:hover,
.wapp:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .38); }
.js .wapp--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }
/* Bajo 520 px queda el circulo y el rotulo se va sin salir del DOM,
   para que el lector de pantalla lo siga leyendo. */
@media (max-width: 520px) {
  .wapp { width: 56px; padding: 0; justify-content: center; }
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* El boton flota sobre el pie: se le hace sitio para que nunca tape la
   ultima linea del deslinde legal. */
.pie { padding-bottom: 5rem; }

/* ── APAGADOS DE LA SEGUNDA PASADA ──
   Se apaga lo intrusivo: los desplazamientos. Los fundidos y los
   hovers de color se quedan, porque en Windows esta preferencia viene
   puesta de fabrica muy seguido y apagarlo todo deja la pagina muerta. */
@media (prefers-reduced-motion: reduce) {
  .js .cascada.rev > * { transform: none; }
  .boton:hover { transform: none; }
  .wapp:hover, .wapp:focus-visible { transform: none; }
  .js .wapp--arriba { transform: none; }
  .flecha:hover span { transform: none; }
  .mos__p:hover img, .tira__pieza:hover img { transform: none; }
}