/* ══════════════════════════════════════════════════════════════════
   VETERINARIA CENTRAL · Loncoche
   Demo 170. Identidad: «HOLSTEIN».

   LA DIRECCION EN UNA FRASE
   Blanco leche y negro en manchas. Es la unica vaca que todo el
   mundo reconoce de un vistazo, y esta pagina va dirigida a quien
   tiene animales: el codigo se lee antes que el titular.

   LA PALETA — TERCERA CASI-MONOCROMA DEL REGISTRO Y LA PRIMERA
   ORGANICA
   --leche  #FAF8F4  fondo
   --negro  #1A1A18  las manchas y el texto
   --correa #6B4A2E  cafe de correa: el UNICO color, y va en hilos
                     finos (bordes, subrayados, el numero de bloque)
   --gris   #5E5C57  secundario sobre leche (6,3:1)

   DESLINDE OBLIGATORIO DE LAS CASI-MONOCROMAS:
     · la 133 es caucho: negro MATE INDUSTRIAL, superficie tecnica
     · la 165 es tablero de anden: panel GEOMETRICO por filas
     · esta es HOLSTEIN: blanco y negro en BLOBS de `border-radius`
       irregular — lo contrario de la geometria. Ninguna mancha es
       igual a otra y ninguna tiene un lado recto.
   REGLA DURA DE LA PAGINA: **las manchas nunca van debajo de un
   texto**. El texto vive en las zonas lisas; la mancha es marca,
   viñeta y fondo de seccion, jamas superficie de lectura. Una
   mancha organica bajo un parrafo da contraste distinto en cada
   letra y es imposible de auditar.

   EL TRIO
   · display · Bowlby One — gorda, redondeada, con serifa blanda:
     letra de letrero rural. Primera vez en el registro.
   · cuerpo  · Asap — redondeada y legible, no pelea con la display.
   · dato    · Cutive Mono — REPETICION CONSCIENTE (segundo uso). Es
     mono de MAQUINA DE ESCRIBIR, y esta pagina es un aviso clavado
     en el poste del cruce: ninguna otra del catalogo calza mejor.
     El catalogo de monos de Google esta agotado a esta altura del
     registro; se elige la repeticion que suma.

   LA CABECERA (136ª del oficio) — LA MANCHA
   Un blob Holstein con un circulito de leche adentro. **Ningun
   logotipo del registro es una mancha**: los 135 anteriores son
   objetos con contorno reconocible; este no tiene contorno
   reconocible y por eso funciona — se lee «vaca» sin dibujar una.

   EL FONDO — LAS MANCHAS QUE PASTAN
   Dos blobs oscuros a ras de una linea de horizonte baja, que se
   desplazan APENAS: medio viewport por minuto.
   DESLINDE: las nubes de la 122 cruzaban el cielo en diagonal; las
   sombras de la 166 cruzan JUNTAS a paso de paseo. Estas casi no se
   mueven, y esa es toda la idea: la calma del potrero. Si se movieran
   a velocidad visible dejarian de ser vacas y pareceria un error.
   Reduced-motion: quietas.

   LA ESTRUCTURA — H (el telefono es el heroe)
   La salida al campo SE PIDE POR TELEFONO: el numero es el <h1> de
   la portada, no un boton. TERCERA H DEL REGISTRO, tres tonos:
     · la 113 es H de URGENCIA NOCTURNA (linterna, fondo oscuro)
     · la 171 sera H DENTAL con pasos
     · esta es H RURAL DE DIA: numero negro sobre blanco leche, con
       la palabra CAMPO arriba y nada mas en la pantalla.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --leche:   #FAF8F4;
  --leche-2: #F0EDE6;
  --negro:   #1A1A18;
  --correa:  #6B4A2E;
  --gris:    #5E5C57;
  --linea:   #DDD8CE;

  --display: 'Bowlby One', system-ui, sans-serif;
  --cuerpo:  'Asap', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Cutive 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(--leche);
  color: var(--negro);
  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; }
a { color: inherit; }

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

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

/* ── 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(--leche);
  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; }

/* LA MANCHA — la cabecera 136ª. Sin un solo lado recto. */
.mancha {
  position: relative; display: block; flex: none;
  width: 26px; height: 22px;
  background: var(--negro);
  border-radius: 62% 38% 44% 56% / 54% 62% 38% 46%;
}
.mancha::after {
  content: ''; position: absolute; left: 55%; top: 30%;
  width: 7px; height: 6px;
  background: var(--leche);
  border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%;
}

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .78rem;
  letter-spacing: .04em; 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(--correa); }

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

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

/* ══════ PORTADA — ESTRUCTURA H ══════ */
.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: 52rem; width: 100%; }

/* EL POTRERO: la linea de horizonte y las dos manchas que pastan. */
.potrero {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24vh;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.horizonte {
  position: absolute; left: 0; right: 0; bottom: 32%;
  height: 1px; background: var(--linea);
}
.pasta {
  position: absolute; bottom: 32%;
  background: var(--negro);
  opacity: .13;
}
.pasta--1 {
  left: 12%; width: 84px; height: 44px;
  border-radius: 58% 42% 46% 54% / 62% 58% 42% 38%;
}
.pasta--2 {
  left: 58%; width: 62px; height: 34px;
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
}
/* medio viewport por minuto: a esta velocidad no se ve moverse, se
   ve que cambio de lugar. Eso es pastar. */
.js .pasta--1 { animation: pastar 118s linear infinite; }
.js .pasta--2 { animation: pastar 118s linear infinite 24s; }
@keyframes pastar {
  from { transform: translateX(-8vw); }
  to   { transform: translateX(52vw); }
}
@media (prefers-reduced-motion: reduce) {
  .js .pasta--1, .js .pasta--2 { animation: none; }
}

/* EL NUMERO ES LA PAGINA */
.rotulo {
  font-family: var(--display);
  font-size: clamp(1.6rem, 5vw, 3rem);
  line-height: 1; color: var(--correa);
  letter-spacing: .02em; margin-bottom: .4rem;
}
h1 { margin-bottom: 1.6rem; }
.tel-heroe {
  display: inline-block;
  font-family: var(--dato);
  font-size: clamp(2.4rem, 11vw, 8rem);
  line-height: 1; letter-spacing: -.02em;
  color: var(--negro);
  text-decoration: none;
  border-bottom: .12em solid var(--correa);
  padding-bottom: .04em;
}
.tel-heroe:hover { color: var(--correa); }

.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: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.4rem; }
.dd--no { font-size: 1rem !important; color: var(--gris); padding-top: .35rem; }

/* ══════ LA PIEZA FIRMA ══════ */
.campo {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.campo__cabecera, .botiquin__cabecera { max-width: 56rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

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

.campo h2, .botiquin h2 {
  font-size: clamp(2.2rem, 7vw, 4.6rem); line-height: 1;
  margin-bottom: 1.2rem;
}
.botiquin h2 { color: var(--leche); }
.entrada { max-width: 54ch; }
.botiquin .entrada { color: var(--leche); }

/* el aviso de honestidad va ARRIBA, no al final */
.aviso {
  background: var(--leche-2);
  border-left: 4px solid var(--correa);
  padding: 1.2rem 1.4rem;
  max-width: 60ch;
}
.aviso p { font-size: .96rem; }
.aviso p:last-child { margin-bottom: 0; }
.aviso__falta {
  font-family: var(--dato); font-size: .88rem;
  color: var(--correa);
}

.bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.bl { padding: 1.4rem; border: 1px solid var(--linea); }
/* los tres bloques por llenar van con el borde punteado: se ve que
   estan esperando algo. */
.bl--vacio { border-style: dashed; }
.bl--lleno { background: var(--leche-2); border-color: var(--leche-2); grid-column: 1 / -1; }
.bl__num {
  font-family: var(--dato); font-size: .9rem;
  color: var(--correa); margin-bottom: .3rem;
}
.bl h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.bl p { font-size: .98rem; }

.bl__marca {
  font-family: var(--dato); font-size: .8rem; color: var(--gris);
  border-left: 2px solid var(--gris); padding-left: .6rem;
}

.listo { margin: 0; padding: 0; list-style: none; }
.listo li { padding: .7rem 0; border-top: 1px solid var(--linea); }
.listo li:first-child { border-top: none; }

/* «falta»: la pagina es mayormente CLARA, asi que el tono oscuro va
   por defecto y el claro es la excepcion declarada. */
.falta {
  display: inline-block; margin: .4rem 0 0;
  font-family: var(--dato); font-size: .8rem;
  color: var(--gris); border-bottom: 1px dashed var(--gris);
}
.botiquin .falta { color: #C9C4B9; border-bottom-color: #C9C4B9; }

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

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

/* ══════ EL BOTIQUIN ══════ */
/* La seccion oscura es la mancha grande de la pagina: negro Holstein
   de borde a borde, con el borde superior irregular. */
.botiquin {
  background: var(--negro); color: var(--leche);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-radius: 0 0 0 0;
}

.cosas { margin: 0; padding: 0; list-style: none; max-width: 58rem; }
.cosas li {
  padding: .9rem 0; border-top: 1px solid #33322E;
  color: var(--leche); font-size: 1rem;
}
.cosas li:first-child { border-top: none; }
.cosa__q {
  display: inline-block; min-width: 13rem;
  font-family: var(--dato); font-size: .95rem;
  color: #E8B98C;
}
@media (max-width: 640px) { .cosa__q { display: block; min-width: 0; margin-bottom: .1rem; } }

.descargo {
  max-width: 64ch; margin: 2rem 0 0;
  font-size: .86rem; color: var(--leche);
  border-left: 3px solid #E8B98C; padding-left: 1rem;
}

/* ══════ CIERRE — T1 FUNDIDO ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
}
.cierre__tel { font-size: clamp(2rem, 9vw, 5.5rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--negro);
  border-bottom: 5px solid var(--correa);
}
.cierre__tel a:hover { color: var(--correa); }
.cierre__pie { font-size: .9rem; color: var(--gris); margin: 0 auto; max-width: 46ch; }

/* ══════ PARA LA VETERINARIA ══════ */
.dueno {
  background: var(--leche-2);
  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: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--correa); 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(--correa); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--negro); }

/* ══════ PIE ══════ */
.pie {
  background: var(--negro); color: #ADA9A1;
  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: 58% 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(--leche) 0%, var(--leche) 30%,
              rgba(250,248,244,.66) 46%, rgba(250,248,244,.22) 68%, rgba(250,248,244,.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(250,248,244,0) 0%, rgba(250,248,244,.30) 42%, var(--leche) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#campo { 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(--leche-2);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala, ambos se salen unos píxeles y
     aparece scroll horizontal por un segundo. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: 62svh; overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--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(--leche); 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(250,248,244,.72) 0%,
              rgba(250,248,244,.84) 45%, rgba(250,248,244,.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(--correa);
}
.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; }
}