/* ══════════════════════════════════════════════════════════════════
   YAKUZA'S GYM · Loncoche
   Demo 179. Identidad: «CONCRETO Y DISCO ROJO».

   ╔════════════════════════════════════════════════════════════════╗
   ║  CONFLICTO DECLARADO — LEER ANTES DE TOCAR NADA                 ║
   ║  The Temple Fitness Club es CLIENTE REAL de Yordy y es          ║
   ║  gimnasio en la MISMA comuna. Esta demo quedo en pausa al       ║
   ║  cerrar la tanda y **se construyo despues, por decision         ║
   ║  expresa del dueño del negocio** (31-08-2026). La regla que     ║
   ║  la acompaña es dura y no se negocia:                           ║
   ║   · CERO parecido con The Temple. Su paleta es negro #080808 +  ║
   ║     oro #C9A227 + terracota, y su trio es Instrument Serif /    ║
   ║     Archivo / JetBrains Mono. **Nada de eso aparece aca**:      ║
   ║     esta paleta es DIURNA, gris concreto y rojo de goma, y el   ║
   ║     trio es Russo One / Hanken Grotesk / Azeret Mono.           ║
   ║   · No hay ni un negro pleno de fondo: el oscuro de esta        ║
   ║     pagina es CARBON #2B2926, no el negro del otro.             ║
   ║   · **Jamas se nombra, se compara ni se alude al otro           ║
   ║     gimnasio**, ni en el texto ni en el registro publico.       ║
   ╚════════════════════════════════════════════════════════════════╝

   NOTA DE NUMERACION: se construyo AL FINAL del lote, asi que le
   toca la cabecera **152ª** y no la 145ª que decia el prompt. El
   contador del oficio es cronologico de construccion: renumerar
   siete demos ya escritas para acomodar una habria sido peor.

   LA PALETA
   --concreto #EDECE9  el fondo
   --panel    #DEDCD7  el bloque secundario
   --carbon   #2B2926  la seccion oscura (NO es negro: es carbon)
   --disco    #C4342B  ROJO DE DISCO BUMPER, para superficie y objetos
   --disco-t  #9A241C  el mismo rojo cuando lleva texto (5,6:1 sobre
                       el panel)
   --gris     #5A5754  secundario (5,1:1 sobre el panel)

   DESLINDE DE ROJOS: el segundero de la 176 es LINEA de instrumento
   (1-3px); el letrero de la 157 es RESPLANDOR con halo; la cruz de la
   78 es SIMBOLO de botiquin. **Este es GOMA MATE EN SUPERFICIE
   GRANDE — el unico rojo de BLOQUE del registro**, porque un disco
   bumper es exactamente eso: una masa de goma de color plano.
   DESLINDE con el caucho de la 133: aquel es NEGRO de neumatico
   (superficie tecnica); este es goma ROJA de disco olimpico.

   EL TRIO
   · display · Russo One — geometrica pesada, de rotulo deportivo.
     Primera vez en el registro.
   · cuerpo  · Hanken Grotesk — neutra.
   · dato    · Azeret Mono — REPETICION CONSCIENTE: el catalogo esta
     agotado; es geometrica y dura, que es lo que pide una ficha de
     equipamiento.

   LA CABECERA (152ª del oficio) — EL DISCO
   El disco bumper de frente: circulo, agujero central y el «25»
   MOLDEADO en la goma (relieve con sombra interna, no impreso).
   DESLINDE con el sticker de la 98ª: alla la cifra es ADHESIVA
   (pegada encima, de kilometraje); aca esta MOLDEADA — sale de la
   misma pieza.

   EL FONDO — EL ECO DEL IMPACTO
   Ondas concentricas graves que nacen del borde inferior de vez en
   cuando: el disco que cae en la plataforma, **sin que se vea el
   disco**. Pocas, espaciadas, 14s.
   DESLINDE: la onda de la 132 la dejaba una GOTA (chica, liquida, en
   la superficie); el calor de la 153 EMANA continuo hacia arriba.
   Estas son ondas de IMPACTO: nacen abajo, son grandes y llegan
   espaciadas.
   Reduced-motion: esconder (una onda quieta no es un impacto).

   LA ESTRUCTURA — J (ficha tecnica)
   ZONA / QUE HAY / PARA QUE SIRVE.
   DESLINDE con los J del registro: la 176 especifica MOVIMIENTOS, la
   181 LOGISTICA. **Esta es la unica J-inventario y la unica con
   TODAS sus celdas de contenido en «falta» honesto**: la forma vende
   y el dueño la llena. Deslinde con la 108 (el inventario extremo de
   sabanas): alla la pagina ERA el inventario numerado, aca es una
   ficha por zonas.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --concreto: #EDECE9;
  --panel:    #DEDCD7;
  --carbon:   #2B2926;
  --disco:    #C4342B;
  --disco-t:  #9A241C;
  --gris:     #5A5754;
  --linea:    #C9C6C0;

  --display: 'Russo One', system-ui, sans-serif;
  --cuerpo:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Azeret 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(--concreto);
  color: var(--carbon);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.62;
  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(--disco-t); outline-offset: 3px; }

/* ── la banda de propuesta ── */
.propuesta {
  background: var(--carbon); color: var(--concreto);
  padding: .9rem clamp(1.2rem, 5vw, 4rem);
}
.propuesta__que { font-size: .8rem; margin: 0 0 .25rem; }
.propuesta__gancho { font-size: .8rem; color: #B2AEA8; 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(--concreto);
  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.2rem; letter-spacing: .01em; }

/* EL DISCO — la cabecera 152ª. Bumper de frente, con el 25 MOLDEADO. */
.disco {
  position: relative; display: flex; flex: none;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--disco);
  border-radius: 50%;
}
/* el agujero central */
.disco::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--concreto);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
}
/* la cifra moldeada: relieve, no impresion */
.disco__cifra {
  position: absolute; top: 1px; left: 0; right: 0;
  font-family: var(--dato); font-size: 7px; font-style: normal;
  text-align: center; color: rgba(0,0,0,.32);
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
  letter-spacing: .02em;
}

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

.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: .08em; text-transform: uppercase; color: var(--gris);
}
.cab__tel-num { display: block; font-family: var(--dato); font-size: .9rem; }

@media (max-width: 900px) {
  .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 ECO DEL IMPACTO */
.eco {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45vh;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.onda {
  position: absolute; left: 50%; bottom: -220px;
  width: 440px; height: 440px; margin-left: -220px;
  border: 2px solid rgba(196,52,43,.30);
  border-radius: 50%;
  opacity: 0;
}
/* nacen abajo, grandes y espaciadas: es un impacto, no un goteo */
.js .onda { animation: impacto 14s ease-out infinite; }
.js .o2 { animation-delay: .55s; }
.js .o3 { animation-delay: 1.1s; }
@keyframes impacto {
  0%       { transform: scale(.18); opacity: 0; }
  4%       { opacity: .85; }
  26%      { transform: scale(1);   opacity: 0; }
  100%     { transform: scale(1);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eco { display: none; }
}

.sitio {
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.4rem, 8.5vw, 5.8rem);
  line-height: 1.02; margin-bottom: 1.4rem;
}
.bajada { max-width: 46ch; 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: .1em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.3rem; }
.dd--tel a { text-decoration: none; color: var(--disco-t); border-bottom: 3px solid var(--disco); }

/* ══════ EL INVENTARIO — ESTRUCTURA J ══════ */
.maquinas {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.maquinas__cabecera, .horario__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

.antetitulo {
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .7rem;
}
.antetitulo--claro { color: #B2AEA8; }

.maquinas h2, .horario h2 {
  font-size: clamp(2.2rem, 6.5vw, 4.4rem); line-height: 1.02;
  margin-bottom: 1rem;
}
.horario h2 { color: var(--concreto); }
.entrada { max-width: 56ch; }
.horario .entrada { color: #DAD6D0; }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .68rem;
  color: var(--gris); border-left: 4px solid var(--disco); padding-left: .6rem;
}
.marca-ejemplo--fuerte::before {
  text-transform: uppercase; letter-spacing: .04em; color: var(--disco-t);
}
.marca-ejemplo--claro::before { color: #DAD6D0; border-left-color: var(--disco); }

.zonas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.zo {
  background: var(--panel);
  border-top: 8px solid var(--disco);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.zo__rot {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .3rem;
}
.zo h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.zo__para { font-size: .96rem; }

.porque {
  background: var(--panel);
  border-left: 8px solid var(--disco);
  padding: clamp(1.3rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 62rem;
}
.porque h3 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: .7rem; }
.porque p { max-width: 62ch; color: var(--gris); }
.porque p:last-child { margin-bottom: 0; }

/* «falta»: pagina mayormente CLARA — tono oscuro por defecto. */
.pend {
  display: inline-block; margin: .3rem 0 0;
  font-family: var(--dato); font-size: .78rem;
  color: var(--disco-t); border-bottom: 1px dashed var(--disco);
}
.horario .pend { color: #F0938B; border-bottom-color: #F0938B; }

/* ══════ EL HORARIO ══════ */
.horario {
  background: var(--carbon); color: var(--concreto);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.ho-fichas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.hf { border-top: 4px solid var(--disco); padding-top: 1rem; }
.hf__rot {
  font-family: var(--dato); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: #B2AEA8; margin-bottom: .3rem;
}
.hf h3 { font-size: 1.35rem; color: var(--concreto); margin-bottom: .7rem; }
.hf p { font-size: .96rem; color: #DAD6D0; }
.hf__datos { margin: 0; }
.hf__datos > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-top: 1px solid #45423E;
}
.hf__datos > div:first-child { border-top: none; }
.hf__datos dt { font-family: var(--dato); font-size: .8rem; color: #DAD6D0; }
.hf__datos dd { margin: 0; }

.descargo {
  max-width: 64ch; margin: 2rem 0 0;
  font-size: .86rem; color: #DAD6D0;
}

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .12em; 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(--disco-t);
  border-bottom: 6px solid var(--disco);
}
.cierre__tel a:hover { border-bottom-color: var(--carbon); }
.cierre__pie { font-size: .88rem; color: var(--gris); margin: 0; }

/* ══════ PARA EL GIMNASIO ══════ */
.dueno {
  background: var(--panel);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.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: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--disco-t); margin-bottom: .5rem;
}
.dueno p { color: var(--carbon); 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: 3px solid var(--disco); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--carbon); }

/* ══════ PIE ══════ */
.pie {
  background: #211F1D; color: #A29E98;
  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 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% 52%;
  -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(--concreto) 0%, var(--concreto) 30%,
              rgba(237,236,233,.66) 46%, rgba(237,236,233,.22) 68%, rgba(237,236,233,.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(237,236,233,0) 0%, rgba(237,236,233,.30) 42%, var(--concreto) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#maquinas { 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(--panel);
  /* 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(--carbon);
}
.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(--carbon);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--carbon); 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(--concreto); 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(237,236,233,.72) 0%,
              rgba(237,236,233,.84) 45%, rgba(237,236,233,.90) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--carbon); }
.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(--carbon);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--disco-t);
}
.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; }
}