/* ══════════════════════════════════════════════════════════════════
   SUELO NATIVO · Curarrehue — restaurante
   Demo 146. Identidad: «TIERRA HUMEDA Y BROTE».

   LA DIRECCION EN UNA FRASE
   Tierra oscura recien regada con un brote verde encima: transmite
   «esto se sacó de acá hoy», que es literalmente lo que promete el
   nombre del local y lo unico que su competencia no puede copiar.

   LA PALETA
   --tierra #1A1B14  tierra humeda: oscura, casi negra, CON VERDE
   --crudo  #F2EFE6  papel de campo
   --brote  #8FC46A  sobre tierra (8,5:1) / #3F6B29 sobre crudo (5,5:1)

   DESLINDE DE VERDES — la hoja de la 135 es APAGADA Y ADULTA sobre
   lino; el polin de la 122 es madera tratada; el follaje de la 143 es
   sombra de araucaria casi negra. Este es un verde JOVEN: claro, algo
   amarillento, el de una hoja que salio esta semana. Y aparece CHICO
   —puntos, iniciales, las dos hojitas de la cabecera— nunca en
   superficies grandes: un brote es chico por definicion.
   DESLINDE DE LA TIERRA — el cafe pelaje de la 166 y el mimbre de la
   135 son claros y secos; el cafe-negro de la 145 tiene ROJO adentro
   (es barra de noche). Esta tierra tiene VERDE adentro y esta humeda.

   EL TRIO
   · display · Quattrocento — serif renacentista ancha y calida, nueva
     en el registro. Tiene el aire de un libro botanico viejo, que es
     justo el tono de una pagina organizada por estaciones.
   · cuerpo  · Sarabun — humanista clara, se aparta.
   · dato    · Chivo Mono — para rotulos y cifras.

   LA CABECERA (112ª del oficio) — EL BROTE
   Dos hojas cotiledon sobre la linea de tierra. DESLINDE con el boton
   de rosa de la 56: aquello es flor ornamental CERRADA; esto es
   germinacion comestible, y por eso lleva la linea de suelo (sin
   suelo seria una planta cualquiera; con suelo es algo que acaba de
   salir).

   EL FONDO — LA LLUVIA FINA DEL SUR
   PRIMERA LLUVIA DEL REGISTRO. Deslinde: todas las gotas anteriores
   —la 115 (goteo clinico), la 132 (la gota que cae al vacio) y la 145
   (la condensacion del vidrio)— son gotas CONTADAS, con protagonismo
   individual. Esto es lo contrario: una cortina, sin ninguna gota
   distinguible. Y como la llovizna real, aparece un rato y para.
   Reduced-motion: se esconde (una cortina de rayas quieta es un
   tramado, no lluvia).

   LA ESTRUCTURA — F (editorial)
   Cuatro capitulos = cuatro estaciones. El numeral enorme del patron F
   esta reemplazado por la INICIAL de la estacion, medio desvanecida.
   DESLINDE con 91/116/119/140/163/167/174: los de la 140 son momentos
   de una noche; estos son ESTACIONES, y el orden arranca en la
   estacion en que se construyo la pagina (invierno, 31-08-2026), no
   en enero. Si algun dia se rehace en otra epoca, se rota el orden.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --tierra:     #1A1B14;
  --tierra-2:   #24261B;
  --tierra-3:   #333628;
  --crudo:      #F2EFE6;
  --crudo-2:    #E6E2D4;
  --brote:      #8FC46A;   /* 8,5:1 sobre tierra */
  --brote-osc:  #3F6B29;   /* 5,5:1 sobre crudo */
  --tinta:      #1F2118;
  --tinta-2:    #55584A;   /* 7,0:1 sobre crudo */
  --claro-2:    #BEC4B4;   /* 10,4:1 sobre tierra */
  --rojo:       #B33A28;   /* solo para el 503 — es un error, se ve como error */
  --linea:      #D9D4C4;
  --linea-osc:  #313428;

  --display: 'Quattrocento', Georgia, serif;
  --cuerpo:  'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Chivo 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(--crudo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.68;
  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(--brote); color: var(--tierra); }
a { color: var(--brote-osc); }
:focus-visible { outline: 2px solid var(--brote-osc); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--tierra);
  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(--crudo); }
.propuesta__que b { font-weight: 700; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 66ch; }

/* ─────────── 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(--crudo);
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(242, 239, 230, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: flex-end; gap: .6rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }

/* ── EL BROTE — dos cotiledones sobre la linea de tierra ──
   .brote::before es el tallo, .brote::after la linea de suelo, y la
   <i> lleva las dos hojas en sus pseudo-elementos. */
.brote {
  position: relative;
  width: 21px; height: 19px;
  flex: 0 0 auto;
  color: var(--tinta-2);
}
.brote::before {
  content: ''; position: absolute;
  left: 50%; bottom: 2px; width: 1.5px; height: 11px;
  margin-left: -.75px;
  background: var(--brote-osc);
}
.brote::after {   /* la linea de tierra: sin ella es una planta, con ella
                     es algo que acaba de salir del suelo */
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor;
  opacity: .55;
}
.brote i { position: absolute; left: 0; right: 0; top: 1px; height: 9px; }
.brote i::before,
.brote i::after {
  content: ''; position: absolute; top: 0;
  width: 8.5px; height: 7px;
  background: var(--brote-osc);
}
.brote i::before { left: .5px;  border-radius: 100% 24% 62% 24%; transform: rotate(-9deg); }
.brote i::after  { right: .5px; border-radius: 24% 100% 24% 62%; transform: rotate(9deg);  }

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  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:hover { color: var(--brote-osc); border-bottom-color: var(--brote-osc); }
@media (max-width: 46rem) { .cab__nav { display: none; } }

.cab__res {
  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: .16em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__res-num {
  display: block; font-family: var(--display);
  font-size: 1.05rem; color: var(--brote-osc);
}
.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(--tierra);
  color: var(--crudo);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 42rem); }

.sitio {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brote);
  margin-bottom: 1.3rem;
}
.portada h1 {
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  line-height: 1.04;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--claro-2);
  max-width: min(92vw, 33rem);
  margin-bottom: 2.2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: .25rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.dd--rojo { color: #E2705C; font-family: var(--dato) !important; font-size: 1.2rem !important; }

/* ── LA LLUVIA FINA ──
   Una cortina de rayitas: sin gotas individuales, que es todo el
   deslinde con las tres demos de gotas del registro. */
.lluvia {
  position: absolute; inset: -20% -10%;
  z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(76deg,
    rgba(190, 196, 180, .16) 0 1px,
    transparent 1px 11px);
  opacity: 0;
}
.js .lluvia { animation: llovizna 24s linear infinite; }

/* Cae y PARA: la lluvia del sur no es una cortina constante, son
   ratos. Por eso la opacidad hace el ciclo largo y la posicion del
   fondo hace el movimiento. */
@keyframes llovizna {
  0%   { background-position: 0 0;        opacity: 0;   }
  10%  {                                  opacity: .85; }
  38%  {                                  opacity: 1;   }
  52%  {                                  opacity: .35; }
  64%  {                                  opacity: 0;   }
  86%  { background-position: 0 1400px;   opacity: 0;   }
  94%  {                                  opacity: .5;  }
  100% { background-position: 0 1700px;   opacity: 0;   }
}

/* ═══════════ EL 503 ═══════════ */
.error {
  background: var(--crudo-2);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.error__cuerpo { max-width: min(100%, 46rem); }

.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(--brote); }

.error h2, .huerto h2, .anio h2 {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.06;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--tinta-2);
  max-width: min(100%, 36rem);
  margin-bottom: 1.6rem;
}
.entrada em { font-style: italic; }

/* La pantalla de error: se ve como lo que es. */
.pantalla {
  background: var(--tierra);
  color: var(--claro-2);
  border-left: 4px solid var(--rojo);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.6rem;
  font-family: var(--dato);
  max-width: min(100%, 30rem);
}
.pantalla p { margin: 0; }
.pantalla__url { font-size: .74rem; color: #9AA290; margin-bottom: .9rem !important; }
.pantalla__cod {
  font-size: clamp(2.6rem, 9vw, 4rem);
  line-height: 1;
  color: #E2705C;
}
.pantalla__msg { font-size: 1rem; margin-top: .3rem !important; }
.pantalla__fecha { font-size: .72rem; color: #9AA290; margin-top: 1rem !important; }

.nota-honesta {
  font-size: .95rem;
  color: var(--tinta-2);
  border-left: 3px solid var(--tinta-2);
  padding: .2rem 0 .2rem 1.1rem;
  margin: 0;
  max-width: min(100%, 42rem);
}
.nota-honesta b { color: var(--tinta); }

/* ═══════════ LA PIEZA FIRMA — DEL HUERTO A LA MESA ═══════════ */
.huerto {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crudo);
}
.huerto__cabecera { max-width: min(100%, 42rem); margin-bottom: 2.4rem; }

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

.grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-bottom: 1.6rem;
}
.grupo { background: var(--crudo); padding: 1.5rem clamp(1.1rem, 2.5vw, 1.6rem); }
.grupo__n {
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--brote-osc);
  margin-bottom: .7rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--brote-osc);
}
.grupo__d { font-size: .96rem; color: var(--tinta); }
.grupo__a { margin-bottom: .5rem; }
.grupo__pq { font-size: .92rem; color: var(--tinta-2); margin: 0; }

.falta {
  font-family: var(--dato);
  font-size: .88em;
  color: var(--brote-osc);
  border-bottom: 1px dashed var(--brote-osc);
}
/* El fondo decide el tono: las dos secciones oscuras usan el brote
   claro. Se declara explicito para no repetir el error de la 145. */
.portada .falta,
.anio .falta { color: var(--brote); border-bottom-color: var(--brote); }

.firma {
  font-size: .94rem;
  color: var(--tinta-2);
  max-width: min(100%, 44rem);
  margin: 0;
}
.firma--claro { color: var(--claro-2); }
.firma em { font-style: italic; }

/* ═══════════ ESTRUCTURA F — EL AÑO DEL HUERTO ═══════════ */
.anio {
  background: var(--tierra);
  color: var(--crudo);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.anio__cabecera { max-width: min(100%, 42rem); margin-bottom: 2.4rem; }
.anio .entrada { color: var(--claro-2); }

.estaciones { list-style: none; margin: 0 0 2rem; padding: 0; }
.est {
  display: grid;
  grid-template-columns: clamp(3.5rem, 9vw, 7rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding: 1.8rem 0;
  border-top: 1px solid var(--linea-osc);
}
.est:last-child { border-bottom: 1px solid var(--linea-osc); }

/* La inicial de la estacion, medio desvanecida: es el numeral del
   patron F, pero de una estacion no se dice «01», se dice «I». */
.est__i {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: .78;
  color: var(--brote);
  opacity: .28;
  margin: 0;
}
.est__cuerpo { max-width: min(100%, 40rem); }
.est__cuerpo h3 { font-size: 1.7rem; line-height: 1.1; margin-bottom: .6rem; }
.est__cuerpo p { color: var(--claro-2); font-size: .98rem; }
.est__hoy {
  font-family: var(--dato);
  font-size: .72rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brote) !important;
  margin-bottom: .6rem !important;
}
.est__falta { margin: 0 !important; }

/* ── la reserva (T5) ── */
.sub {
  font-size: 1.6rem;
  margin: 2.6rem 0 .8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea-osc);
}
.reservar { max-width: min(100%, 34rem); }
.reservar__intro { color: var(--claro-2); font-size: .96rem; }
.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; }
.campo input {
  width: 100%;
  font-family: var(--cuerpo);
  font-size: 1rem;
  color: var(--crudo);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--claro-2);
  border-radius: 0;
  padding: .5rem 0;
  -webkit-appearance: none; appearance: none;
}
.campo input::placeholder { color: #868D7C; }
.campo input:focus { outline: none; border-bottom-color: var(--brote); border-bottom-width: 2px; }

.resumen {
  grid-column: 1 / -1;
  font-family: var(--dato);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--crudo);
  background: var(--tierra-2);
  border-left: 2px solid var(--brote);
  padding: .9rem 1rem;
  margin: .6rem 0 0;
}
.boton {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-block;
  font-family: var(--cuerpo);
  font-weight: 600;
  font-size: .95rem;
  color: var(--tierra);
  background: var(--brote);
  text-decoration: none;
  padding: .8rem 1.6rem;
  border-radius: 2px;
}
.boton:hover { background: var(--crudo); }
.reservar__nota { grid-column: 1 / -1; font-size: .86rem; color: var(--claro-2); margin: 0; }

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--crudo-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(--brote-osc);
  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; }
.flecha {
  font-weight: 600;
  color: var(--brote-osc);
  text-decoration: none;
  border-bottom: 1px solid var(--brote-osc);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--tierra);
  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) {
  /* La lluvia SE ESCONDE: una cortina de rayas detenida no es lluvia,
     es un tramado diagonal sobre el titular. */
  .lluvia { display: 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: 54% 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%);
}
/* El velo va con --tierra y no con --crudo: la portada de esta demo es
   la unica seccion de fondo oscuro de la pagina, y el velo claro del
   resto la dejaba en un degradado gris con el titular ilegible. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--tierra) 0%, var(--tierra) 28%,
              rgba(26,27,20,.72) 44%, rgba(26,27,20,.30) 64%, rgba(26,27,20,.08) 84%, rgba(26,27,20,0) 96%);
}
@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); }
}
/* La foto de portada NO se esconde detras de una clase de JS. Antes iba
   con `.js .portada--foto .portada__foto { opacity: 0 }` esperando un
   `.ok` que el observador tenia que poner, y la portada se veia como un
   rectangulo negro: la foto es contenido, no adorno, y tiene que estar
   pintada aunque main.js no llegue nunca. Lo que entra escalonado es el
   TEXTO (ver .portada__texto mas abajo). */
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: none; }
@media (max-width: 860px) {
  .portada--foto { padding-top: 36svh; }
  .portada__foto img {
    object-position: 50% 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(242,239,230,0) 0%, rgba(242,239,230,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#huerto { 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: .38;
  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. */
  -webkit-mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
          mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
}
@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(--crudo-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(--crudo); 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%; }
/* Velo parejo y fuerte: el texto va centrado y grande, encima de la foto
   entera. Calculado sobre el peor caso —imagen del color contrario
   detrás— para que el ratio aguante sin ensuciar la imagen. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(242,239,230,.72) 0%,
              rgba(242,239,230,.84) 45%, rgba(242,239,230,.90) 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(--brote-osc);
}
.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. No lleva texto encima, asi
   que no lleva velo: se ve la foto y punto. Es la aparicion que mas
   llena la pagina por el peso que cuesta. */
/* La clase es .tajo y no .banda ni .franja: hay demos que ya usan esos
   dos nombres para secciones propias, y chocaban. */
.tajo {
  position: relative; overflow: hidden;
  height: clamp(180px, 30svh, 340px);
  background: var(--crudo-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(--crudo-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(--crudo-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;
}
.mos__p:nth-child(1), .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; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

/* ── MAPA DE UBICACION ──────────────────────────────────────────────
   Imagen propia con mosaicos de OpenStreetMap pegados: la CSP prohibe
   pedir nada a un tercero, asi que un iframe de Google Maps quedaria en
   blanco SIN dar un solo error. El "Como llegar" si es un enlace, y un
   enlace no lo bloquea nada.
   Los colores salen de currentColor a proposito: asi el bloque se adapta
   a la paleta de cada demo sin conocerla y sin chocar con ella.
   La atribucion a OpenStreetMap la exige su licencia (ODbL). */
.mapa-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.mapa { margin: 1.4rem 0 0; border: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; overflow: hidden; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa { border-color: rgba(128, 128, 128, .35); } }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .75rem .9rem;
  font-size: .86em; line-height: 1.45;
  border-top: 1px solid; border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa__pie { border-top-color: rgba(128, 128, 128, .35); } }
.mapa__pie b { font-weight: 700; }
.mapa__ir { color: inherit; font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__cred { width: 100%; font-size: .84em; opacity: .8; }
.mapa__cred a { color: inherit; }