/* ══════════════════════════════════════════════════════════════════
   INDIO PIJE RESTAURANT · Niebla, Valdivia
   Demo 142. Identidad: «DORADO FRITO Y AZUL COSTA».

   LA DIRECCION EN UNA FRASE
   Azul de agua fria y el dorado opaco de una fritura recien sacada:
   transmite «producto del dia, hecho aca», que es lo unico que un
   turista parado en el fuerte necesita saber para elegir donde comer.

   REGLA CULTURAL DE LA CASA — el nombre del local se escribe tal cual
   esta registrado y NO se ilustra. Ninguna iconografia alusiva al
   nombre en ninguna parte del sitio: la identidad sale del PRODUCTO
   —el pescado frito— y de nada mas.

   LA PALETA
   --mar     #0E2A3C  azul de agua fria, PLANO
   --papel   #F5F1E8  papel de estraza claro
   --dorado  #E0A542  dorado crocante sobre azul (6,8:1)
   --dorado-osc #8A5A0E  el mismo sobre papel (5,2:1)

   DESLINDES DE LOS DORADOS DEL REGISTRO — makma es oro METALICO de
   acento (brilla, es joyeria); la 132 es fluido TRANSLUCIDO de aceite
   limpio (se ve a traves); el ambar de la 164 aparece en pares. Este
   es DORADO CROCANTE: opaco, caliente, sin brillo especular, y vive en
   bloques chicos —el numero de la regla, la palabra del poster, el
   boton— nunca de fondo.
   DESLINDE DE LOS AZULES — el pizarra de la 120 es superficie de
   escritura; el mejillon de la 141 TORNASOLA. Este es agua fria y
   plana: un solo tono, sin destello, sin gradiente de color.

   EL TRIO
   · display · League Gothic — condensada extrema, nueva en el
     registro. Es la letra del cartel de mercado, y en la portada tiene
     que hacer una sola cosa: que una palabra comestible ocupe la
     pantalla completa.
   · cuerpo  · Gabarito — redondeada y calida, a proposito: sola contra
     la rigidez de la display, la pagina no queda dura.
   · dato    · Victor Mono — para la fecha y las cifras.

   LA CABECERA (108ª del oficio) — LA RASPA
   El esqueleto del pescado ya comido: espina central, cinco espinas
   por lado y la cola en V. DESLINDE con el pez de la 139: aquel es el
   pez ENTERO de un letrero de neon, encendido. Esta es la raspa del
   plato terminado — el humor sobrio del registro, y ademas la unica
   forma de dibujar «pescado» sin dibujar el pescado.

   EL FONDO — GAVIOTAS QUE CRUZAN
   Tres trazos en V, a distintas alturas y velocidades, cruzan el cielo
   del poster. DESLINDE: la fila de la 126 son PUNTOS que cargan por el
   borde bajo; las nubes de la 122 son manchas de sombra. Estas son
   trazos en V, arriba, y se leen como aves.
   Reduced-motion: se esconden. Una V quieta parece un acento
   tipografico que se cayo de un titular.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --mar:        #0E2A3C;
  --mar-2:      #17394F;
  --mar-3:      #23506C;
  --papel:      #F5F1E8;
  --papel-2:    #E7E1D3;
  --claro-2:    #BFC9D1;   /* 10,1:1 sobre mar */
  --dorado:     #E0A542;   /* 6,8:1 sobre mar */
  --dorado-osc: #8A5A0E;   /* 5,2:1 sobre papel */
  --tinta:      #16202A;
  --tinta-2:    #4A5560;   /* 7,3:1 sobre papel */
  --linea:      #D8D2C2;
  --linea-osc:  #22394A;

  --display: 'League Gothic', 'Arial Narrow', sans-serif;
  --cuerpo:  'Gabarito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Victor 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(--papel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

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

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

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

/* ─────────── 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(--papel);
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(245, 241, 232, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: .01em;
  line-height: 1;
}

/* ── LA RASPA — espina central, cinco espinas por lado, cola en V ──
   Las espinas son dos gradientes repetidos inclinados en sentidos
   opuestos; la <i> es la espina central y su ::after la cola. */
.raspa {
  position: relative;
  width: 30px; height: 15px;
  flex: 0 0 auto;
  color: var(--tinta);
}
.raspa::before,
.raspa::after {
  content: ''; position: absolute;
  left: 8px; right: 8px; height: 6px;
}
.raspa::before {   /* espinas de arriba: se abren hacia atras */
  top: 1px;
  background: repeating-linear-gradient(66deg,
    currentColor 0 1px, transparent 1px 4px);
}
.raspa::after {    /* espinas de abajo: el espejo */
  bottom: 1px;
  background: repeating-linear-gradient(114deg,
    currentColor 0 1px, transparent 1px 4px);
}
.raspa i {         /* la espina central */
  position: absolute;
  left: 3px; right: 6px; top: 50%; height: 1px;
  margin-top: -.5px;
  background: currentColor;
}
.raspa i::after {  /* la cola: una V, no un triangulo relleno */
  content: ''; position: absolute;
  right: -7px; top: 50%;
  width: 7px; height: 13px;
  margin-top: -6.5px;
  background: currentColor;
  clip-path: polygon(100% 0, 0 46%, 0 54%, 100% 100%, 100% 78%, 34% 50%, 100% 22%);
}

.cab__nav { display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.cab__nav a:hover { color: var(--dorado-osc); border-bottom-color: var(--dorado-osc); }
@media (max-width: 46rem) { .cab__nav { display: none; } }

.cab__res {
  text-align: right; text-decoration: none; line-height: 1.1;
  padding-left: 1.1rem; border-left: 1px solid var(--linea);
}
.cab__res-rot {
  display: block; font-family: var(--dato);
  font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__res-num {
  display: block; font-family: var(--display);
  font-size: 1.25rem; color: var(--dorado-osc);
}
.cab__res:hover .cab__res-num { text-decoration: underline; }

/* ═══════════ ESTRUCTURA L — EL PÓSTER ═══════════
   Una palabra. Nada mas. El contenido empieza al scrollear. */
.poster {
  position: relative;
  min-height: 88svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 8vh, 6rem) clamp(1.25rem, 5vw, 4rem) clamp(1.5rem, 4vh, 3rem);
  background: var(--mar);
  color: var(--papel);
  overflow: hidden;
}
.poster__marco { position: relative; z-index: 2; margin: auto 0; }

.poster__rot {
  font-family: var(--dato);
  font-size: clamp(.72rem, 1.6vw, .88rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: .5rem;
}

/* LA PALABRA. Es el 90% del diseño de esta pagina: una palabra
   comestible del ancho de la pantalla. */
.poster__palabra {
  font-family: var(--display);
  font-size: clamp(4.5rem, 27vw, 22rem);
  line-height: .82;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--papel);
  margin: 0 0 .6rem;
  word-break: break-word;
}

.poster__pie {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem;
  font-family: var(--dato);
  font-size: clamp(.76rem, 1.5vw, .92rem);
  color: var(--claro-2);
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--linea-osc);
}
.poster__fecha { color: var(--dorado); }
.poster__sep { color: var(--mar-3); }

.poster__baja {
  position: relative; z-index: 2;
  font-family: var(--dato);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--claro-2);
  margin: 0;
}

.marca-ejemplo { display: inline; margin: 0; }
.marca-ejemplo::before {
  content: attr(data-ejemplo);
  font-family: var(--dato);
  font-size: .95em;
  color: var(--claro-2);
}

/* ── EL CIELO Y LAS GAVIOTAS ──
   Cada gaviota son dos trazos que se juntan: una V. Nada mas. */
.cielo {
  position: absolute;
  left: 0; right: 0; top: 0; height: 42%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.gaviota {
  position: absolute;
  width: 22px; height: 9px;
  opacity: .55;
}
.gaviota::before,
.gaviota::after {
  content: ''; position: absolute;
  top: 0; width: 12px; height: 6px;
  border-top: 1.5px solid var(--claro-2);
}
.gaviota::before { left: 0;  border-radius: 60% 40% 0 0 / 100% 100% 0 0; transform: rotate(-6deg); }
.gaviota::after  { right: 0; border-radius: 40% 60% 0 0 / 100% 100% 0 0; transform: rotate(6deg); }

/* Alturas, tamanos y velocidades distintas: tres aves, no tres copias. */
.g1 { top: 22%; transform: scale(1);   }
.g2 { top: 48%; transform: scale(.68); }
.g3 { top: 12%; transform: scale(.82); }

.js .g1 { animation: cruza 26s linear infinite; }
.js .g2 { animation: cruza 38s linear infinite 6s; }
.js .g3 { animation: cruza 31s linear infinite 14s; }

/* Cruzan, y de paso suben y bajan un poco: una gaviota no vuela en
   linea recta. El translate del eje Y va aparte del scale, por eso
   cada una lleva su propio scale dentro del keyframe. */
@keyframes cruza {
  0%   { left: -8%;  margin-top: 0;     opacity: 0;   }
  8%   {             margin-top: -10px; opacity: .55; }
  46%  {             margin-top: 14px;  opacity: .55; }
  78%  {             margin-top: -6px;  opacity: .55; }
  92%  {             opacity: 0; }
  100% { left: 104%; margin-top: 0;     opacity: 0;   }
}

/* ═══════════ LA PIEZA FIRMA ═══════════ */
.pescado {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--papel);
}
.pescado__cabecera { max-width: min(100%, 44rem); margin-bottom: 2.6rem; }

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

.pescado h2, .fuerte h2 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: .94;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.06rem;
  color: var(--tinta-2);
  max-width: min(100%, 38rem);
  margin-bottom: 0;
}

/* ── las especies ── */
.especies {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.esp { background: var(--papel); padding: 1.3rem 1.4rem; }
.esp__n {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--mar);
  margin-bottom: .55rem;
}
.esp__d { font-size: .96rem; color: var(--tinta-2); margin: 0; }

.firma {
  font-size: .94rem;
  color: var(--tinta-2);
  max-width: min(100%, 42rem);
  margin-bottom: 2.8rem;
}
.falta {
  font-family: var(--dato);
  font-size: .9em;
  color: var(--dorado-osc);
  border-bottom: 1px dashed var(--dorado-osc);
}
.fuerte .falta { color: var(--dorado); border-bottom-color: var(--dorado); }

/* ── de donde llega ── */
.origen {
  background: var(--papel-2);
  border-left: 4px solid var(--mar);
  padding: 1.6rem clamp(1.1rem, 3vw, 2rem);
  max-width: min(100%, 46rem);
  margin-bottom: 2.8rem;
}
.origen h3, .fritura h3 {
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--mar);
  margin-bottom: .7rem;
}
.origen p { color: var(--tinta-2); font-size: .98rem; }
.origen__datos { margin: 1.2rem 0 0; }
.origen__datos > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 9rem);
  gap: .3rem 1.5rem;
  padding: .6rem 0;
  border-top: 1px solid var(--linea);
}
.origen__datos dt { font-family: var(--dato); font-size: .8rem; color: var(--tinta-2); }
.origen__datos dd { margin: 0; text-align: right; }
@media (max-width: 34rem) {
  .origen__datos > div { grid-template-columns: 1fr; }
  .origen__datos dd { text-align: left; }
}

/* ── la fritura: las cuatro reglas del oficio ── */
.fritura { max-width: min(100%, 52rem); }
.fritura__intro { color: var(--tinta-2); font-size: .98rem; margin-bottom: 1.4rem; }

.reglas {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  counter-reset: r;
}
.reglas li {
  counter-increment: r;
  position: relative;
  padding: 1.1rem 0 1.1rem 3.4rem;
  border-top: 1px solid var(--linea);
}
.reglas li:last-child { border-bottom: 1px solid var(--linea); }
/* El numero es el unico dorado grande de la pagina: bloque chico,
   opaco, caliente. */
.reglas li::before {
  content: counter(r);
  position: absolute; left: 0; top: .85rem;
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--dorado-osc);
}
.regla__t {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--mar);
  margin-bottom: .3rem;
}
.regla__d { font-size: .96rem; color: var(--tinta-2); margin: 0; }

/* ═══════════ ANTES O DESPUÉS DEL FUERTE ═══════════ */
.fuerte {
  background: var(--mar);
  color: var(--papel);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.fuerte__cuerpo { max-width: min(100%, 48rem); }
.fuerte .entrada { color: var(--claro-2); margin-bottom: 2.2rem; }

.momentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.4rem;
  margin-bottom: 1.8rem;
}
.momento {
  border-top: 3px solid var(--dorado);
  padding-top: .9rem;
}
.momento__n {
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: .4rem;
}
.momento p:last-child { color: var(--claro-2); font-size: .97rem; margin: 0; }

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

.sub {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
  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, 15rem) 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: .78rem;
  color: var(--claro-2);
  align-self: start;
  padding-top: .15rem;
}
.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) ── */
.reservar { margin-top: 1rem; max-width: min(100%, 34rem); }
.reservar__intro { color: var(--claro-2); font-size: .98rem; }
.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: .7rem; 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(--papel);
  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: #8494A0; }
.campo input:focus { outline: none; border-bottom-color: var(--dorado); border-bottom-width: 2px; }

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

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--papel-2);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.dueno h2 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  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: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dorado-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: 700;
  color: var(--dorado-osc);
  text-decoration: none;
  border-bottom: 1px solid var(--dorado-osc);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--mar); border-bottom-color: var(--mar); }

.pie {
  background: var(--mar);
  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 gaviotas SE ESCONDEN. Una V detenida en el aire no parece un
     ave: parece un acento que se cayo de un titular. */
  .cielo { 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; }
/* Esta portada es un POSTER: el titular ocupa el ancho entero, asi que
   no hay un lado libre donde disolver la foto. En vez del gradiente
   lateral va la foto completa con un velo PAREJO —mas fuerte abajo,
   donde estan la fecha y la bajada— calibrado sobre el peor caso, que
   es la espuma blanca de la ola justo detras de la Z y la A: con velo
   .60 sobre blanco puro el titular da 3,5:1, que es el minimo de texto
   grande. Medido, no estimado. */
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 52% 52%;
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,42,60,.54) 0%,
              rgba(14,42,60,.60) 34%, rgba(14,42,60,.62) 70%, rgba(14,42,60,.76) 100%);
}
@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; }
@media (max-width: 860px) {
  .poster.portada--foto { padding-top: clamp(2.5rem, 8vh, 6rem); }
  .portada__foto img { object-position: 50% 46%; }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(14,42,60,.56) 0%,
                rgba(14,42,60,.62) 40%, rgba(14,42,60,.78) 100%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#pescado { 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(--papel-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(--papel); 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(245,241,232,.72) 0%,
              rgba(245,241,232,.84) 45%, rgba(245,241,232,.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(--dorado-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; }
}

/* ══════ LAS FOTOS ══════
   Grilla dura, igual que el resto de la pagina: dos arriba y una ancha
   abajo. Cada figura llega desde un lado distinto — izquierda, derecha,
   abajo — con un retardo escalonado, para que se lean como tres cosas
   puestas sobre la mesa y no como un bloque que se enciende. */
.galeria {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 78rem; margin: 0 auto;
}
.galeria__titulo {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.05;
  margin: 0 0 .6rem; color: var(--tinta);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--tinta-2); font-size: .96rem; line-height: 1.6;
}
.galeria__grilla { display: grid; gap: clamp(.9rem, 2vw, 1.6rem); grid-template-columns: 1fr 1fr; }
.gal { margin: 0; background: var(--papel-2); border: 1px solid var(--linea); padding: .6rem; }
.gal--abajo { grid-column: 1 / -1; }
.gal img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 3px solid var(--dorado-osc);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--tinta-2); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--tinta-2);
  margin: 1.4rem 0 0; padding-left: 1.1rem; position: relative;
}
.galeria__falta::before { content: '·'; position: absolute; left: .3rem; }

.js .gal.rev { opacity: 0; }
.js .gal--izq.rev   { transform: translateX(-2.4rem); }
.js .gal--der.rev   { transform: translateX(2.4rem); }
.js .gal--abajo.rev { transform: translateY(2.4rem) scale(.98); }
.js .gal.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.js .gal--der.rev.ok   { transition-delay: .12s; }
.js .gal--abajo.rev.ok { transition-delay: .22s; }

@media (max-width: 700px) {
  .galeria__grilla { grid-template-columns: 1fr; }
  .gal--abajo img { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .js .gal.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(--papel-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(--papel-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(--papel-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; }