/* ══════════════════════════════════════════════════════════════════
   CLINICA VETERINARIA KÜYEN · Loncoche
   Demo 169. Identidad: «NOCHE DE PUEBLO».

   ╔════════════════════════════════════════════════════════════════╗
   ║  REGLA CULTURAL — LA DECISION MAS IMPORTANTE DE ESTA DEMO      ║
   ║  «Küyen» es palabra de origen mapuche y significa luna. El      ║
   ║  prompt proponia una luna en la cabecera y una luna cruzando    ║
   ║  el cielo de fondo, con el argumento de que la luna es motivo   ║
   ║  astronomico universal de cualquier pagina nocturna.            ║
   ║  SE ELIMINO LA LUNA POR COMPLETO. Dibujar una luna en la        ║
   ║  pagina de un negocio que se llama Luna es ilustrar el nombre,  ║
   ║  se argumente lo que se argumente — y la regla de la casa       ║
   ║  (aplicada ya en la 142, la 143 y la 166) dice que un nombre    ║
   ║  de origen mapuche se escribe tal cual, con su dieresis, y no   ║
   ║  se traduce en dibujos. El propio prompt autorizaba a          ║
   ║  eliminarla ante cualquier duda del constructor: hubo duda.     ║
   ║  La identidad se sostiene con la PALETA sola, y en el lugar de  ║
   ║  la luna quedaron dos objetos que son de un pueblo chico de     ║
   ║  noche y no del nombre: el farol de la esquina y los techos.    ║
   ╚════════════════════════════════════════════════════════════════╝

   LA DIRECCION EN UNA FRASE
   La noche limpia y plateada de un pueblo chico: azul profundo sin
   nubes, los techos de zinc devolviendo la luz del alumbrado, y nada
   mas. Es la hora en que alguien decide si sale de la casa o no —que
   es exactamente la pregunta de la pagina.

   LA PALETA
   --noche  #0E1522  azul de noche despejada (fondo)
   --noche2 #172033  la seccion segunda
   --luna   #EEF3F7  blanco frio: el texto (18:1 sobre noche)
   --plata  #A9B6C4  secundario sobre noche (9,0:1)
   --zinc   #4A5257  gris de techo, SOLO para objetos dibujados
   --tinta  #101822  texto sobre el bloque claro

   DESLINDE DEL ZINC: el registro ya tiene tres zincs (56 zinc y
   minio, 121 estriado, 186 polin y zinc) y todos son PLANCHA NUEVA
   —claros, casi blancos, material de taller—. Este es ZINC DE TECHO
   VIEJO A LA INTEMPERIE Y DE NOCHE: oscuro, opaco, y solo se ilumina
   cuando le pasa la luz por encima. Mismo material, otra edad y otra
   luz.

   DESLINDE DE NOCTURNAS de la tanda: la 154 es vapor de agua, la 157
   es urgencia con rojo, la 161 es velador celeste. Esta es noche
   LIMPIA Y PLATEADA: cero calidez, cero rojo, cero difuminado.

   EL TRIO
   · display · Marcellus — romana de una sola caja, con serifas
     finas y aire de placa grabada. Primera vez en el registro.
   · cuerpo  · Geologica (variable) — neutra tecnica, se lee bien en
     blanco sobre oscuro.
   · dato    · Nova Mono — REPETICION CONSCIENTE (tercer uso). El
     catalogo de monos de Google esta agotado a esta altura del
     registro; se elige la que calza: Nova Mono es geometrica y fria,
     de instrumento, y es lo que pide una pagina de noche despejada.

   LA CABECERA (135ª del oficio) — EL FAROL DE LA ESQUINA
   El brazo, la lampara y el cono de luz que cae. DESLINDE con los dos
   postes del registro: el de la 33 es un POSTE DE BARBERO que gira
   (cilindro con franjas) y la empalizada de la 110ª son postes de
   CERCO (madera, punta biselada, sin luz). Este es alumbrado
   publico: lo unico encendido en la calle a esa hora.

   EL FONDO — EL ZINC QUE SE ILUMINA
   Una hilera de techos a dos aguas en la franja baja, y una banda de
   luz plateada que los recorre lentisima de un lado al otro (44s).
   DESLINDE OBLIGATORIO: el sol de la 97 BAJA (un objeto que se
   desplaza), las sombras de la 166 CRUZAN (dos objetos que pasan).
   Aca NO SE MUEVE NINGUN OBJETO: lo que se mueve es un REFLEJO sobre
   una superficie quieta — `background-position` sobre los techos. Es
   la primera vez que el fondo del registro anima una superficie en
   vez de una cosa.
   Reduced-motion: la luz se queda quieta al centro.

   LA ESTRUCTURA — M (comparador paralelo)
   DESLINDE con los M del registro (92/110/120/131/151/166/178/185):
   **es el unico M donde una de las dos columnas es AJENA** — lo que
   se deriva no lo hace esta clinica—, y por eso esa columna va
   tipograficamente mas tenue, sin fondo propio y con el titulo en
   plata en vez de blanco. La jerarquia dice de quien es cada cosa.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --noche:  #0E1522;
  --noche2: #172033;
  --luna:   #EEF3F7;
  --plata:  #A9B6C4;
  --zinc:   #4A5257;
  --tinta:  #101822;
  --linea:  #2A3546;

  --display: 'Marcellus', Georgia, serif;
  --cuerpo:  'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Nova 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(--noche);
  color: var(--luna);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.68;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; }

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

/* ── la banda de propuesta ── */
.propuesta {
  background: #070C14; color: var(--luna);
  padding: .9rem clamp(1.2rem, 5vw, 4rem);
}
.propuesta__que { font-size: .8rem; margin: 0 0 .25rem; }
.propuesta__gancho { font-size: .8rem; color: var(--plata); margin: 0; max-width: 70ch; }

/* ── cabecera fantasma ── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1.2rem, 5vw, 4rem);
  background: var(--noche);
  border-bottom: 1px solid var(--linea);
}
.js .cab { transition: background-color .3s, border-color .3s; }
.js .cab:not(.cab--flota) { background: transparent; border-bottom-color: transparent; }

.cab__marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.cab__nombre { font-family: var(--display); font-size: 1.35rem; letter-spacing: .04em; }

/* EL FAROL DE LA ESQUINA — la cabecera 135ª. */
.farol { position: relative; display: block; width: 22px; height: 26px; flex: none; }
/* el brazo */
.farol::before {
  content: ''; position: absolute; left: 3px; top: 2px;
  width: 12px; height: 2px; background: var(--plata);
  border-radius: 1px;
}
/* la lampara */
.farol::after {
  content: ''; position: absolute; left: 12px; top: 3px;
  width: 9px; height: 6px;
  background: var(--luna);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
/* el cono de luz que cae */
.farol__luz {
  position: absolute; left: 8px; top: 9px;
  width: 17px; height: 17px;
  background: linear-gradient(to bottom, rgba(238,243,247,.42), rgba(238,243,247,0));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--plata);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.cab__nav a:hover { color: var(--luna); border-bottom-color: var(--luna); }

.cab__tel { text-decoration: none; text-align: right; line-height: 1.15; }
.cab__tel-rot {
  display: block; font-family: var(--dato); font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--plata);
}
.cab__tel-num { display: block; font-family: var(--dato); font-size: .92rem; }

@media (max-width: 860px) {
  .cab__nav { display: none; }
  .cab__tel { margin-left: auto; }
}

/* ══════ PORTADA ══════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.2rem, 5vw, 4rem) 0;
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: 44rem; }

/* EL PUEBLO: los techos y la luz que los recorre. */
.pueblo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34vh;
  z-index: 1; pointer-events: none; overflow: hidden;
}
/* los techos a dos aguas: un zigzag hecho con dos gradientes conicos
   repetidos, sin una sola imagen. */
.pueblo__techos {
  position: absolute; left: -2%; right: -2%; bottom: 0; height: 9rem;
  background:
    repeating-linear-gradient(115deg, var(--zinc) 0 3px, transparent 3px 26px),
    repeating-conic-gradient(from 135deg at 50% 0,
      var(--zinc) 0 25%, transparent 0 50%);
  background-size: auto, 132px 132px;
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 96%);
          mask-image: linear-gradient(to top, #000 42%, transparent 96%);
  opacity: .85;
}
/* la banda de luz que los recorre: lo que se mueve es el REFLEJO,
   no un objeto. */
.pueblo__luz {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9rem;
  background: linear-gradient(100deg,
    transparent 0 34%,
    rgba(238,243,247,.16) 44%,
    rgba(238,243,247,.30) 50%,
    rgba(238,243,247,.16) 56%,
    transparent 66% 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 96%);
          mask-image: linear-gradient(to top, #000 42%, transparent 96%);
}
.js .pueblo__luz { animation: recorrer 44s ease-in-out infinite alternate; }
@keyframes recorrer {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pueblo__luz { animation: none; background-position: 50% 0; }
}

.sitio {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--plata); margin-bottom: 1.1rem;
}
h1 {
  font-size: clamp(2.4rem, 7.5vw, 5.4rem);
  line-height: 1.06; letter-spacing: .005em;
  margin-bottom: 1.5rem;
}
.bajada { max-width: 46ch; color: var(--luna); margin-bottom: 2rem; }

.specs { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin: 0; }
.spec dt {
  font-family: var(--dato); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--plata);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.45rem; }
.dd--tel a { text-decoration: none; border-bottom: 2px solid var(--plata); }

/* ══════ LA PIEZA FIRMA — EL COMPARADOR ══════ */
.alcance {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.alcance__cabecera, .derivar__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

.antetitulo {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--plata);
  margin-bottom: .8rem;
}
.alcance h2, .derivar h2 {
  font-size: clamp(2.1rem, 6vw, 4.2rem); line-height: 1.05;
  margin-bottom: 1rem;
}
.entrada { max-width: 54ch; color: var(--luna); }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .68rem;
  color: var(--plata); border-left: 2px solid var(--plata); padding-left: .6rem;
}

.comp {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 820px) { .comp { grid-template-columns: 1fr; } }

.col { padding: clamp(1.4rem, 3vw, 2.2rem); }
/* la columna propia: bloque claro, es de la casa */
.col--aca { background: var(--luna); color: var(--tinta); }
/* la columna ajena: sin fondo, mas tenue. La jerarquia dice de quien
   es cada cosa. */
.col--alla { border: 1px solid var(--linea); }

.col__rot {
  font-family: var(--dato); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .3rem;
}
.col--aca .col__rot { color: #4B5A6B; }
.col--alla .col__rot { color: var(--plata); }

.col__tit { font-family: var(--display); line-height: 1; margin-bottom: .2rem; }
.col--aca .col__tit { font-size: clamp(2.6rem, 6vw, 4rem); color: var(--tinta); }
.col--alla .col__tit { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--plata); }

.col__sub { font-size: .9rem; margin-bottom: 1.4rem; }
.col--aca .col__sub { color: #47566A; }
.col--alla .col__sub { color: var(--plata); }

.lista { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.lista li { padding: .7rem 0; border-top: 1px solid; }
.col--aca .lista li { border-top-color: #CBD6E0; }
.col--alla .lista li { border-top-color: var(--linea); color: var(--plata); font-size: .96rem; }

/* «falta»: EL FONDO DECIDE EL TONO. Esta pagina es casi toda OSCURA,
   asi que el tono claro va por defecto y la version oscura es la
   excepcion, declarada para el unico bloque claro que hay. */
.falta {
  display: inline-block; margin-top: .4rem;
  font-family: var(--dato); font-size: .72rem;
  color: var(--plata); border-bottom: 1px dashed var(--plata);
}
.col--aca .falta { color: #5A6472; border-bottom-color: #5A6472; }

.firma {
  max-width: 54ch; margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: .95rem; color: var(--plata);
  border-left: 3px solid var(--zinc); padding-left: 1rem;
}

/* ══════ LA DERIVACION ══════ */
.derivar {
  background: var(--noche2);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.antetitulo--claro { color: var(--plata); }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.p {
  padding: 1.5rem 0 1.5rem 2.4rem;
  border-left: 2px solid var(--linea);
  position: relative;
}
.p::before {
  content: ''; position: absolute; left: -6px; top: 2rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--luna);
}
.p:last-child { border-left-color: transparent; }
.p__rot {
  font-family: var(--dato); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--plata); margin-bottom: .2rem;
}
.p h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.p p { max-width: 58ch; color: var(--luna); margin-bottom: 0; }

.descargo {
  max-width: 62ch; margin: 2rem 0 0;
  font-size: .85rem; color: var(--plata);
}

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--plata);
}
.cierre__tel { font-size: clamp(2rem, 8vw, 5rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--luna);
  border-bottom: 4px solid var(--linea);
}
.cierre__tel a:hover { border-bottom-color: var(--luna); }
.cierre__pie { font-size: .88rem; color: var(--plata); margin: 0; }

/* ══════ PARA LA CLINICA ══════ */
.dueno {
  background: #070C14;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); 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: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--luna); margin-bottom: .5rem;
}
.dueno p { color: var(--plata); font-size: .95rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 500; text-decoration: none;
  border-bottom: 2px solid var(--linea); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--luna); }

/* ══════ PIE ══════ */
.pie {
  background: #05080E; color: #8593A4;
  padding: 2rem clamp(1.2rem, 5vw, 4rem);
  font-size: .8rem;
}
.pie p { max-width: 72ch; margin: 0; }

/* ── apariciones ── */
.js .rev { opacity: 0; transform: translateY(14px); }
.js .rev.ok {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js .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;
  /* --luna y no --tinta: esta pagina es de fondo noche y la tinta, que es
     casi negra, daba 1,02:1 sobre el. Invisible. */
  color: var(--luna);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--gris); 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(--noche2); 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(--plata);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--gris); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--gris);
  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; }
}

/* ══════════════════════════════════════════════════════════════════
   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 ── */
.portada--foto { padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { 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: 62% 46%;
  -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(--noche) 0%, var(--noche) 30%,
              rgba(14,21,34,.66) 46%, rgba(14,21,34,.22) 68%, rgba(14,21,34,.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; }
@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(14,21,34,0) 0%, rgba(14,21,34,.30) 42%, var(--noche) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#alcance { 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(--noche2);
  /* 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(--luna);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--plata); 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(--luna);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--luna); 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(--noche); 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(14,21,34,.62) 0%,
              rgba(14,21,34,.80) 45%, rgba(14,21,34,.88) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--luna); }
.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(--luna);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--plata);
}
.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; }
}