/* ══════════════════════════════════════════════════════════════════
   KDT · Kinesiologia Deportiva y Traumatologica · Pucon
   Demo 176. Identidad: «BLANCO, NEGRO Y SEGUNDERO».

   LA DIRECCION EN UNA FRASE
   Instrumental deportivo: blanco tecnico, negro, y un rojo que
   aparece SOLO COMO AGUJA — lineas de 1 a 3px y un punto. Es el rojo
   mas delgado del registro y no toca ni un bloque.

   LA PALETA — CASI-MONOCROMA #4 DEL REGISTRO
   --blanco    #FFFFFF
   --tecnico   #F1F2F3  el fondo
   --negro     #101214
   --segundero #D6202A  la AGUJA. Solo lineas finas y un punto.
   --seg-txt   #B8151E  el rojo oscuro, y SOLO para dos cosas: la
                        marca «falta» y el hover del telefono. Se
                        verifico en el DOM que no hay ni un texto
                        rojo en la pagina en reposo — el antetitulo
                        y los h3 del dueño lo llevaban y se sacaron.
   --gris      #565C61  secundario (5,9:1 sobre tecnico)

   DESLINDE DE LAS CASI-MONOCROMAS: la 133 es caucho (negro MATE
   INDUSTRIAL), la 165 es tablero de anden (panel GEOMETRICO por
   filas), la 170 es Holstein (blanco y negro en BLOBS organicos).
   Esta es DEPORTIVA: blanco de laboratorio, negro pleno y un rojo de
   instrumento — la unica de las cuatro donde el tercer color es una
   LINEA y no una superficie.
   DESLINDE DE ROJOS: el letrero de la 157 es RESPLANDOR de urgencia
   (grande, con halo); la cruz de la 78 es BOTIQUIN (simbolo lleno).
   El segundero es INSTRUMENTAL: 1-3px de grosor y nada mas.

   DESLINDE OBLIGATORIO CON LA 50 (Aktiv, kinesiologia, TAMBIEN EN
   PUCON) — punto por punto:
     · paleta: alli ceniza + grafito + LIMA acida; aca blanco + negro
       + rojo de aguja
     · trio: alli Space Grotesk / Atkinson / Reddit Mono; aca Big
       Shoulders / Figtree / Roboto Mono
     · pieza: alli LA ELONGACION (que hacer antes y despues); aca los
       CRITERIOS DE VUELTA (cuando ya se puede)
     · estructura: alli barra de avance con scroll; aca ficha tecnica
     · fondo: alli el primero que anima escala; aca un segundero real
   Dos kines en la misma ciudad y ni un punto de contacto.

   EL TRIO
   · display · Big Shoulders (variable) — condensada industrial, de
     numeracion deportiva. Primera vez en el registro.
   · cuerpo  · Figtree — neutra, se lee rapido.
   · dato    · Roboto Mono — REPETICION CONSCIENTE: el catalogo esta
     agotado y es la mono mas neutra de instrumento, que es
     exactamente lo que pide una ficha de estandares.

   LA CABECERA (142ª del oficio) — EL CRONOMETRO
   El circulo con la corona arriba, el boton lateral y la aguja en
   rojo. DESLINDE con el reloj de anden de la 131ª (165): aquel es
   reloj COLGANTE de estacion, de dos caras y dos agujas, que marca
   la hora del dia. Este es cronometro DE MANO, con UNA aguja, y no
   marca la hora: mide cuanto duro algo.

   EL FONDO — EL SEGUNDERO REAL
   En un dial tenue, una aguja fina barre a VELOCIDAD REAL: una vuelta
   son 60 segundos exactos, con tic de un segundo (`steps(60)`).
   **Es el unico fondo del registro que marca tiempo verdadero**, y
   esa es la broma seria de la pagina: una demo sobre no apurarse,
   cuyo fondo no se puede apurar.
   DESLINDE DE steps() —sexto uso del registro y sexta fisica—: el
   hilvan de la 130 AVANZA cosiendo, la correa de la 134 ARRASTRA, la
   33 y la 54 usan steps(1) como INTERRUPTOR, la ficha de la 165
   VOLTEA, y esta hace TIC: 60 pasos exactos por vuelta, ni uno mas.
   DESLINDE DE COSAS QUE GIRAN: la aguja del manometro de la 133
   CLAVA con rebote y vuelve; las aspas del molino de la 125 giran en
   60s pero son CUATRO palas anchas gigantes. Esta es UNA aguja fina
   en un dial chico.
   Reduced-motion: aguja quieta en las 12.

   LA ESTRUCTURA — J (ficha tecnica)
   Cada criterio va como spec: PRUEBA en display / EL ESTANDAR en
   mono / POR QUE en cuerpo, con reglas finas de instrumento.
   DESLINDE con los J del registro: **es la unica J cuyo «valor» es
   un MOVIMIENTO** — no un material, ni una medida, ni una capacidad:
   lo que se especifica es algo que el cuerpo hace o no hace.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --blanco:    #FFFFFF;
  --tecnico:   #F1F2F3;
  --negro:     #101214;
  --negro-2:   #1B1E21;
  --segundero: #D6202A;
  --seg-txt:   #B8151E;
  --gris:      #565C61;
  --linea:     #D9DBDD;

  --display: 'Big Shoulders', system-ui, sans-serif;
  --cuerpo:  'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Roboto 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(--tecnico);
  color: var(--negro);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: hidden;
}

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

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

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

/* ── 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(--tecnico);
  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.7rem;
  font-weight: 700; letter-spacing: .04em;
}

/* EL CRONOMETRO — la cabecera 142ª. */
.crono {
  position: relative; display: block; flex: none;
  width: 22px; height: 22px; margin-top: 3px;
  border: 2px solid var(--negro);
  border-radius: 50%;
}
/* la corona de arriba */
.crono::before {
  content: ''; position: absolute; left: 50%; top: -6px;
  width: 8px; height: 4px; margin-left: -4px;
  background: var(--negro);
  border-radius: 2px 2px 0 0;
}
/* el boton lateral */
.crono::after {
  content: ''; position: absolute; right: -4px; top: 1px;
  width: 4px; height: 4px;
  background: var(--negro);
  border-radius: 1px;
  transform: rotate(38deg);
}
/* LA AGUJA: 1,5px de rojo. Todo el color de la marca cabe aca. */
.crono__aguja {
  position: absolute; left: 50%; top: 3px;
  width: 1.5px; height: 8px; margin-left: -.75px;
  background: var(--segundero);
  transform-origin: 50% 100%;
  transform: rotate(42deg);
}

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

.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(--gris);
}
.cab__tel-num { display: block; font-family: var(--dato); font-size: .95rem; }

@media (max-width: 880px) {
  .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: 46rem; }

/* EL SEGUNDERO REAL */
.dial {
  position: absolute; right: 6%; top: 50%;
  width: min(32vw, 300px); height: min(32vw, 300px);
  margin-top: min(-16vw, -150px);
  z-index: 1; pointer-events: none;
  border: 1px solid var(--linea);
  border-radius: 50%;
}
/* los tics del dial: una corona de rayitas finas */
.dial__marca {
  position: absolute; inset: 6px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      var(--linea) 0 .5deg, transparent .5deg 6deg);
  -webkit-mask-image: radial-gradient(circle, transparent 88%, #000 89%);
          mask-image: radial-gradient(circle, transparent 88%, #000 89%);
}
.dial__aguja {
  position: absolute; left: 50%; top: 10%;
  width: 2px; height: 40%; margin-left: -1px;
  background: var(--segundero);
  transform-origin: 50% 100%;
  border-radius: 1px;
}
/* un punto rojo en el centro y nada mas de color en toda la portada */
.dial__aguja::after {
  content: ''; position: absolute; left: 50%; bottom: -4px;
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--segundero); border-radius: 50%;
}
/* 60 segundos exactos, con tic de un segundo. */
.js .dial__aguja { animation: segundero 60s steps(60) infinite; }
@keyframes segundero {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .js .dial__aguja { animation: none; transform: rotate(0deg); }
}

.sitio {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.8rem, 10vw, 7rem);
  line-height: .94; letter-spacing: -.005em;
  margin-bottom: 1.4rem;
}
.bajada { max-width: 44ch; margin-bottom: 2rem; }

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

/* ══════ LA FICHA TECNICA (J) ══════ */
.volver {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.volver__cabecera, .visita__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

/* El antetitulo iba en rojo y el auditor lo pillo: la regla escrita
   arriba dice que el rojo es SOLO aguja —lineas de 1 a 3px y un
   punto— y cuatro textos rojos la rompian. Vuelve al gris. */
.antetitulo {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .7rem;
}
.antetitulo--claro { color: #FF7A80; }

.volver h2, .visita h2 {
  font-size: clamp(2.4rem, 7vw, 5rem); line-height: .96;
  margin-bottom: 1rem;
}
.visita h2 { color: var(--blanco); }
.entrada { max-width: 54ch; }
.visita .entrada { color: #C9CDD1; }

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

.specs-tabla { border-top: 1px solid var(--negro); }
.sp {
  display: grid;
  grid-template-columns: 3rem minmax(0, 14rem) minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--linea);
}
@media (max-width: 900px) {
  .sp { grid-template-columns: 3rem minmax(0, 1fr); }
  .sp__porque { grid-column: 2; }
}
.sp__n {
  font-family: var(--dato); font-size: .82rem;
  color: var(--gris); margin: 0;
}
.sp__prueba {
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1;
  margin: 0;
}
/* EL ESTANDAR: mono, y con la reglita roja de instrumento delante. */
.sp__estandar {
  font-family: var(--dato); font-size: .92rem;
  color: var(--negro); margin: 0;
  border-left: 3px solid var(--segundero);
  padding-left: .7rem;
}
.sp__porque { font-size: .96rem; color: var(--gris); margin: 0; }

.dura {
  background: var(--negro); color: var(--blanco);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 62rem;
  border-left: 4px solid var(--segundero);
}
.dura h3 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--blanco); margin-bottom: .6rem; }
.dura p { color: #D2D6D9; max-width: 62ch; }
.dura p:last-child { margin-bottom: 0; }

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

/* «falta»: la pagina es mayormente CLARA — tono oscuro por defecto,
   claro como excepcion en la seccion negra. */
.falta {
  display: inline-block; margin-top: .3rem;
  font-family: var(--dato); font-size: .76rem;
  color: var(--seg-txt); border-bottom: 1px dashed var(--segundero);
}
.visita .falta { color: #FF7A80; border-bottom-color: #FF7A80; }

/* ══════ LA LESION DEL VISITANTE ══════ */
.visita {
  background: var(--negro); color: var(--blanco);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.dos-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}
.cl { border-top: 2px solid var(--segundero); padding-top: 1rem; }
.cl--no { border-top-color: #3A4046; }
.cl__rot {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #9AA1A7; margin-bottom: .3rem;
}
.cl h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--blanco); margin-bottom: .8rem; }
.cl ul { margin: 0; padding-left: 1.2rem; }
.cl li { margin-bottom: .7rem; color: #C9CDD1; }
.cl li:last-child { margin-bottom: 0; }
.cl__cierre {
  margin: 1rem 0 0; font-family: var(--dato);
  font-size: .88rem; color: var(--blanco);
}

.informe {
  background: var(--negro-2);
  border-left: 4px solid var(--segundero);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  max-width: 62rem;
}
.informe h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--blanco); margin-bottom: .6rem; }
.informe p { color: #C9CDD1; max-width: 62ch; }
.informe p:last-child { margin-bottom: 0; }

/* ══════ 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(--gris);
}
.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(--negro);
  border-bottom: 4px solid var(--segundero);
}
.cierre__tel a:hover { color: var(--seg-txt); }
.cierre__pie { font-size: .88rem; color: var(--gris); margin: 0; }

/* ══════ PARA KDT ══════ */
.dueno {
  background: var(--blanco);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.dueno h2 { font-size: clamp(2rem, 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: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--negro); margin-bottom: .5rem;
}
.dueno p { color: var(--negro); font-size: .95rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--segundero); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--negro); }

/* ══════ PIE ══════ */
.pie {
  background: var(--negro); color: #969CA1;
  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; 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(--blanco); 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(--segundero);
}
.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: 56% 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(--tecnico) 0%, var(--tecnico) 30%,
              rgba(241,242,243,.66) 46%, rgba(241,242,243,.22) 68%, rgba(241,242,243,.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(241,242,243,0) 0%, rgba(241,242,243,.30) 42%, var(--tecnico) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#volver { 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(--blanco);
  /* 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(--negro);
}
.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(--negro);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--negro); 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(--tecnico); 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(241,242,243,.72) 0%,
              rgba(241,242,243,.84) 45%, rgba(241,242,243,.90) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--negro); }
.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(--negro);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--seg-txt);
}
.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; }
}