/* ══════════════════════════════════════════════════════════════════
   CLINICA ESTACION MASCOTAS · Valdivia
   Demo 165. Identidad: «TABLERO DE ANDEN».

   LA DIRECCION EN UNA FRASE
   El nombre del negocio es Estacion, y la gracia de una estacion es
   que los horarios se cumplen. La pagina entera es un tablero de
   andén: negro, por filas, con la hora como dato principal.

   LA PALETA — CASI-MONOCROMA #2 DEL REGISTRO
   --tablero #0F1113  negro de panel
   --panel   #F2F4F5  blanco de letra de tablero
   --ambar   #F0B93C  MINIMO Y CON REGLA: solo lleva ambar lo que el
                      tablero AVISA — el reloj, un subrayado y las
                      marcas de honestidad (lo de ejemplo y lo que
                      falta). Ni un rotulo ni un titulo mas.

   DESLINDE OBLIGATORIO con la 133 (la monocroma dura, de caucho):
   alli no habia ni una gota de color y la identidad era el MATERIAL.
   Aca hay UNA gota de ambar y la identidad es el OBJETO INFORMATIVO:
   la tipografia es de panel, el layout es de filas de salidas.
   PARENTESCO con la 134 (la boleta, estructura-identidad): las dos
   son «pagina-objeto-informativo». Pero la boleta era papel termico,
   clara y de columna ANGOSTA; el tablero es negro, ancho y por FILAS.

   EL TRIO
   · display · Bakbak One — grotesca pesada, para la letra del
     tablero.
   · cuerpo  · Barlow — neutra.
   · dato    · DM Mono — las horas y las duraciones.

   LA CABECERA (131ª del oficio) — EL RELOJ DE ANDEN
   El reloj colgante de dos caras: el soporte, la circunferencia y las
   dos agujas. Es el unico sitio de la pagina donde el ambar es
   protagonista.

   EL FONDO — LA FICHA QUE VOLTEA
   Una ficha split-flap que cambia de letra a saltos. La tira de
   letras se desplaza con steps(): eso es exactamente lo que hace un
   tablero mecanico.
   DESLINDE DE TODOS LOS steps() DEL REGISTRO (verificado por grep
   sobre los CSS, no de memoria) — cinco usos, tres fisicas:
     · el hilvan de la 130 AVANZA cosiendo (recorrido lineal)
     · la correa de la 134 AVANZA a tirones (arrastre)
     · la 33 y la 54 usan steps(1): no es fisica, es un
       interruptor —color que cambia de golpe, cursor que
       parpadea— y no compite con esto
     · esta ficha VOLTEA (cae sobre su eje horizontal), y es la
       primera del registro que usa steps() para MECANIZAR un
       objeto entero
   Reduced-motion: ficha quieta en una letra.

   LA ESTRUCTURA — C (la tabla es la pagina)
   DESLINDE con todos los C del registro: esta es la UNICA sobre fondo
   NEGRO, con formato de panel de salidas — filas oscuras, texto claro
   y la hora en mono grande. El formato ES la identidad.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --tablero:   #0F1113;
  --tablero-2: #191C1F;
  --tablero-3: #23272B;
  --panel:     #F2F4F5;
  --gris:      #9BA3A9;   /* 7,9:1 sobre tablero */
  --ambar:     #F0B93C;
  --linea:     #2B3034;

  --display: 'Bakbak One', system-ui, sans-serif;
  --cuerpo:  'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'DM 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(--tablero);
  color: var(--panel);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  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(--panel); color: var(--tablero); }
a { color: var(--panel); }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

.visually {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--tablero-2);
  color: var(--gris);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--linea);
}
.propuesta p { margin: 0; }
.propuesta__que { color: var(--panel); }
.propuesta__que b { font-weight: 600; }
.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(--tablero);
  border-bottom: 1px solid var(--linea);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(15, 17, 19, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: var(--panel); margin-right: auto;
}
.cab__nombre {
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: .04em;
  line-height: 1;
}

/* ── EL RELOJ DE ANDEN — soporte, esfera y dos agujas ──
   El unico sitio donde el ambar manda. */
.reloj {
  position: relative;
  width: 21px; height: 26px;
  flex: 0 0 auto;
}
.reloj::before {   /* el soporte del que cuelga */
  content: ''; position: absolute;
  left: 50%; top: 0; width: 2px; height: 6px;
  margin-left: -1px;
  background: var(--gris);
}
.reloj::after {    /* la esfera */
  content: ''; position: absolute;
  left: 0; bottom: 0; width: 21px; height: 21px;
  border: 2px solid var(--ambar);
  border-radius: 50%;
}
.reloj i { position: absolute; left: 50%; bottom: 10.5px; }
.reloj i::before,
.reloj i::after {  /* las dos agujas */
  content: ''; position: absolute;
  bottom: 0; left: 0;
  background: var(--ambar);
  transform-origin: 50% 100%;
}
.reloj i::before { width: 1.6px; height: 7px; margin-left: -.8px; transform: rotate(18deg); }
.reloj i::after  { width: 1.6px; height: 5px; margin-left: -.8px; transform: rotate(105deg); }

.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: .06em;
  color: var(--gris);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a:hover { color: var(--panel); border-bottom-color: var(--panel); }
@media (max-width: 52rem) { .cab__nav { display: none; } }

/* T1 — el telefono verificado */
.cab__tel {
  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__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gris);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.8rem, 2vw, .98rem);
  color: var(--panel);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-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(--tablero);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 42rem); }

/* ── LA FICHA QUE VOLTEA ──
   Una ventana de una letra de alto con una tira dentro que sube a
   SALTOS. Eso es un split-flap. */
.flap {
  position: absolute;
  right: clamp(2rem, 10vw, 9rem);
  top: 50%;
  width: clamp(56px, 8vw, 92px);
  height: clamp(72px, 10.4vw, 118px);
  margin-top: clamp(-59px, -5.2vw, -36px);
  z-index: 1;
  overflow: hidden;
  background: var(--tablero-2);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--linea);
}
.flap::after {   /* la ranura del medio, que es lo que la hace flap */
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 2px;
  margin-top: -1px;
  background: var(--tablero);
  z-index: 2;
}
.flap__tira {
  display: block;
  font-family: var(--display);
  font-size: clamp(3.4rem, 6.2vw, 5.6rem);
  line-height: clamp(72px, 10.4vw, 118px);
  text-align: center;
  color: var(--gris);
  opacity: .5;
}
.js .flap__tira { animation: voltea 12s steps(5) infinite; }
/* Cinco letras, cinco saltos. El steps() es lo que da el golpe seco
   de la ficha al caer. */
@keyframes voltea {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(clamp(72px, 10.4vw, 118px) * -5)); }
}

.sitio {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gris);
  margin-bottom: 1.2rem;
}
.portada h1 {
  font-size: clamp(2.2rem, 7vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: .01em;
  margin-bottom: 1.4rem;
}
/* La otra gota de ambar de la pagina: un subrayado. Y se acabo. */
.portada h1::after {
  content: ''; display: block;
  width: 5rem; height: 3px;
  background: var(--ambar);
  margin-top: 1.3rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--gris);
  max-width: min(92vw, 35rem);
  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(--gris);
  margin-bottom: .25rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1; }
.dd--tel { font-family: var(--dato) !important; font-size: 1.05rem !important; }
.dd--tel a { text-decoration: none; }
.dd--tel a:hover { text-decoration: underline; }

/* ═══════════ LAS DURACIONES (estructura C) ═══════════ */
.horas, .tablero {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.horas { background: var(--tablero-2); }
.horas__cabecera, .tablero__cabecera { max-width: min(100%, 44rem); margin-bottom: 2rem; }

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

.horas h2, .tablero h2 {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1;
  letter-spacing: .01em;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--gris);
  max-width: min(100%, 37rem);
  margin-bottom: 1.4rem;
}

.marca-ejemplo { margin: 0; }
.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ambar);
  border-left: 2px solid var(--ambar);
  padding-left: .6rem;
}
.marca-ejemplo--fuerte::before {
  background: var(--tablero-3);
  border-left-width: 4px;
  padding: .5rem .8rem;
}

/* ── el panel de salidas ── */
.tabla-envoltura, .panel-envoltura { overflow-x: auto; margin-bottom: 1.6rem; }
.tabla, .panel {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  text-align: left;
}
.tabla thead th, .panel thead th {
  font-family: var(--dato);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  padding: 0 1.2rem .7rem 0;
  border-bottom: 1px solid var(--linea);
}
.tabla tbody th, .tabla tbody td,
.panel tbody td {
  padding: 1.2rem 1.2rem 1.2rem 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: baseline;
  font-weight: 400;
}

.tam {
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--panel);
  width: 14rem;
}
.tam__d {
  display: block;
  font-family: var(--dato);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--gris);
  margin-top: .25rem;
}
/* La duracion es el dato principal: mono, grande, blanca. */
.dura {
  font-family: var(--dato);
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  color: var(--panel);
  width: 8rem;
  letter-spacing: -.01em;
}
.retira { font-family: var(--dato); font-size: 1rem; color: var(--gris); }
.ej {
  font-family: var(--dato);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ambar);
  vertical-align: super;
}

/* ── el tablero de hoy ── */
.tablero { background: var(--tablero); }
.p-hora { font-family: var(--dato); font-size: 1.2rem; color: var(--panel); width: 7rem; }
.p-nom  { font-family: var(--display); font-size: 1.2rem; color: var(--panel); width: 10rem; }
.p-serv { font-size: .95rem; color: var(--gris); }
.p-est {
  font-family: var(--dato);
  font-size: .86rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  width: 10rem;
}
/* El unico estado que destaca es LISTO, y destaca por peso y blanco,
   no por color: es un tablero, no un semaforo. */
.p-est--listo { color: var(--panel); font-weight: 500; }

.falta {
  font-family: var(--dato);
  font-size: .88em;
  color: var(--ambar);
  border-bottom: 1px dashed var(--ambar);
}

.ojo {
  background: var(--tablero-3);
  border-left: 3px solid var(--gris);
  padding: 1.2rem 1.4rem;
  max-width: min(100%, 46rem);
  margin-bottom: 1.4rem;
}
.ojo--claro { background: var(--tablero-2); }
.ojo p { margin: 0; font-size: .96rem; color: var(--gris); }
.ojo b { color: var(--panel); }

.firma {
  font-size: .96rem;
  color: var(--gris);
  margin: 0;
  max-width: min(100%, 44rem);
}

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--tablero-2);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
  border-top: 1px solid var(--linea);
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gris);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.5rem, 6.4vw, 3.4rem);
  line-height: 1.1;
  color: var(--panel);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { color: var(--ambar); }
.cierre__pie { font-size: .95rem; color: var(--gris); margin: 0; }

/* ═══════════ PARA LA CLÍNICA ═══════════ */
.dueno {
  background: var(--tablero);
  color: var(--panel);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.dueno h2 { font-size: clamp(1.9rem, 4.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(--panel);
  margin-bottom: .5rem;
}
.dueno p { color: var(--gris); 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(--panel);
  text-decoration: none;
  border-bottom: 1px solid var(--panel);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--ambar); border-bottom-color: var(--ambar); }

.pie {
  background: var(--tablero-2);
  color: var(--gris);
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .82rem;
  border-top: 1px solid var(--linea);
}
.pie p { margin: 0; max-width: 72ch; }

/* ═══════════ 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 ficha queda quieta en una letra: sigue siendo una ficha de
     tablero, solo deja de voltear. */
  .js .flap__tira { animation: 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(--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(--tablero-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(--ambar);
}
.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 negro plano de arriba abajo. Van
   seis apariciones distintas, para que el ojo no vea siempre lo mismo:

     1 · portada    la foto se disuelve hacia el titular
     2 · aura       la misma foto reventada a desenfoque: color, no imagen
     3 · mitades    media pantalla de foto nítida, media de texto
     4 · cita       foto a sangre con una frase encima
     5 · tira       tres fotos angostas en fila
     6 · galería    las fotos propias del negocio, nítidas y con pie

   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
   —ahí la imagen deja de ser imagen y pasa a ser una mancha de color.

   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: 64% 42%;
  -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(--tablero) 0%, var(--tablero) 30%,
              rgba(15,17,19,.66) 46%, rgba(15,17,19,.22) 68%, rgba(15,17,19,.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; }

/* ── 2 · AURA DE COLOR ── */
.horas { 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. Sobre fondo oscuro, screen suma color en vez de taparlo. */
  filter: blur(64px) saturate(1.5);
  opacity: .42;
  mix-blend-mode: screen;
  transform: scale(1.25);
}
/* Y se apaga hacia los bordes para que no se vea el corte del div. */
.aura::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 70% at 50% 40%,
              transparent 0%, transparent 42%, var(--tablero) 88%);
}
@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(--tablero-2);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala 1.04, ambos se salen unos pixeles
     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%;
}
/* Un filete de sombra en el encuentro, para que la foto no parezca
   pegada al texto sino apoyada contra él. */
.mitades__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 76%, rgba(25,28,31,.55) 100%);
}
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--panel);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gris); 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(--panel);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--panel);
  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; }
  .mitades__foto::after {
    background: linear-gradient(180deg, transparent 70%, rgba(25,28,31,.6) 100%);
  }
}

/* ── 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(--tablero); 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% 46%;
}
/* Velo parejo y fuerte: acá el texto va centrado y grande, encima de la
   foto entera. Con imagen blanca detrás y el velo en .80 sobre tablero,
   el peor caso da 6,9:1 — pasa AA con holgura. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,17,19,.62) 0%,
              rgba(15,17,19,.80) 45%, rgba(15,17,19,.88) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--panel); }
.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(--panel);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ambar);
}
.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; }
}