/* ══════════════════════════════════════════════════════════════════
   CLINICA DENTAL ARAUCARIA · Villarrica
   Demo 172. Identidad: «PLATA DE BRACKET Y LIGA».

   REGLA CULTURAL / DE NOMBRE
   «Araucaria» es nombre de arbol de uso corriente: se escribe tal
   cual y NO SE DIBUJA EL ARBOL, ni por el nombre ni como adorno. La
   identidad sale enteramente de la ORTODONCIA — el aparato, no el
   paisaje. (Mismo criterio que la 142, 143, 166 y 169.)

   LA DIRECCION EN UNA FRASE
   Un aparato de ortodoncia es una estructura plateada, fina y seria,
   con UN punto de color que el paciente elige cada mes. La pagina es
   exactamente eso: gris plata, blanco, y turquesa SOLO en puntos.

   LA PALETA
   --blanco    #FCFCFC  fondo
   --plata     #9AA3AA  la estructura DIBUJADA (no es color de texto)
   --plata-txt #5C666E  el gris cuando lleva texto (5,5:1)
   --liga      #12B0A8  turquesa chicle, SOLO en puntitos y objetos
   --liga-txt  #0A6B67  el mismo turquesa cuando lleva texto (6,1:1)
   --tinta     #1B2024
   --hondo     #1E2A2E  la seccion oscura

   REGLA DURA DE LA LIGA: **el turquesa aparece EN PUNTOS, nunca en
   planos**. Es exactamente lo que es en la boca: gomitas de color
   sobre una estructura plateada. Si se usara de fondo dejaria de
   leerse como liga y seria «una pagina turquesa» mas.
   DESLINDE DE CIANES del registro: el lab de la 111 es cian de
   pantalla, la cinta de la 136 es cian de material deportivo, el neon
   de la 139 es luz encendida. La LIGA es chicle: opaca, saturada y
   diminuta.
   DESLINDE DE PLATAS: el acero de la 128 es ESPEJO DE NAVAJA (grande,
   con reflejo). Esta es plata CHICA de aparato fino: mate, en hilos
   de 2px, y nunca en superficie.

   FAMILIA DENTAL POR PIEZA: 54 precio · 67 niños · 84 duracion ·
   119 miedo · 171 urgencia · **172 ORTODONCIA** · 173 prevencion ·
   174 protesis.
   FAMILIA «DURACION HONESTA»: 84 · 136 · 165 · **172**.

   EL TRIO
   · display · Instrument Serif — serif de contraste alto y aire
     editorial; primera vez como display del registro.
   · cuerpo  · Cantarell — humanista limpia.
   · dato    · Red Hat Mono — REPETICION CONSCIENTE: el catalogo de
     monos esta agotado a esta altura y es la mas fina y tecnica que
     queda, que es lo que pide un aparato de ortodoncia.

   LA CABECERA (138ª del oficio) — EL BRACKET
   El cuadradito con sus cuatro alitas y la ranura horizontal donde
   entra el alambre. **Ningun logotipo del registro es un aparato
   dental**: la muela de la 137ª es ANATOMIA (el diente es del
   paciente); este es el APARATO (es de la clinica). Las dos dentales
   con cabecera del registro y ninguna repite objeto.

   EL FONDO — EL ALAMBRE QUE SE ENDEREZA
   Una linea con curva suave que se ENDEREZA gradualmente hasta quedar
   recta, y vuelve. Ciclo de 46s. La curva se hace con el
   `border-radius` del borde superior de una caja y se anima hasta 0:
   cuando el radio es cero, el borde es una recta.
   **DESLINDE OBLIGATORIO CON LA BANDA DE LA 136** (kinesiologia):
   aquella se estira con overshoot elastico y REBOTA. El alambre NO
   rebota: corrige lento y sostenido, y esa es exactamente la
   diferencia entre una banda de ejercicio y un aparato de ortodoncia.
   Por eso la curva usa `ease-in-out` y jamas un `cubic-bezier` con
   overshoot.
   Reduced-motion: linea semi-recta fija.

   LA ESTRUCTURA — I (linea de progreso), FUNDIDA CON EL FONDO
   Las cinco etapas van sobre una linea que **esta cada vez mas
   derecha**: la etapa 1 lleva la mayor curvatura y la 5 es
   completamente recta. La estructura no ilustra el tratamiento: ES el
   tratamiento.
   DESLINDE con los I del registro (112/127/132/154): la varilla media
   NIVEL, el termometro TEMPERATURA, el flete ESPACIO. **Esta es la
   unica linea del registro que CAMBIA DE FORMA al avanzar.**
   ══════════════════════════════════════════════════════════════════ */

:root {
  --blanco:    #FCFCFC;
  --blanco-2:  #F1F3F4;
  --plata:     #9AA3AA;
  --plata-txt: #5C666E;
  --liga:      #12B0A8;
  --liga-txt:  #0A6B67;
  --tinta:     #1B2024;
  --hondo:     #1E2A2E;
  --linea:     #DCE0E3;

  --display: 'Instrument Serif', Georgia, serif;
  --cuerpo:  'Cantarell', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Red Hat 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(--blanco);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.66;
  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(--liga-txt); outline-offset: 3px; }

/* ── la banda de propuesta ── */
.propuesta {
  background: var(--hondo); 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: #A9B4B7; 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(--blanco);
  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.4rem; }

/* EL BRACKET — la cabecera 138ª. Cuerpo, cuatro alitas y la ranura. */
.bracket {
  position: relative; display: block; flex: none;
  width: 18px; height: 18px;
  background: var(--plata);
  border-radius: 3px;
}
/* las cuatro alitas: dos arriba y dos abajo, en las esquinas */
.bracket::before, .bracket::after {
  content: ''; position: absolute; left: -3px; right: -3px;
  height: 5px; background: var(--plata);
  border-radius: 2px;
}
.bracket::before { top: 1px; }
.bracket::after  { bottom: 1px; }
/* la ranura horizontal donde entra el alambre: va en turquesa porque
   es donde va la liga. */
.bracket__ranura {
  position: absolute; left: 1px; right: 1px; top: 50%;
  height: 3px; margin-top: -1.5px;
  background: var(--liga);
  border-radius: 1px; z-index: 2;
}

.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(--plata-txt);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.cab__nav a:hover { color: var(--liga-txt); border-bottom-color: var(--liga); }

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

@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: 44rem; }

/* EL ALAMBRE QUE SE ENDEREZA */
.alambre {
  position: absolute; left: -4%; right: -4%; bottom: 16%;
  height: 200px; z-index: 1; pointer-events: none;
}
.alambre__linea {
  display: block; width: 100%; height: 100%;
  border-top: 2px solid var(--plata);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* ease-in-out y NUNCA overshoot: un alambre no rebota. */
.js .alambre__linea { animation: enderezar 46s ease-in-out infinite alternate; }
@keyframes enderezar {
  from { border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
  to   { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .alambre__linea { animation: none; border-radius: 50% 50% 0 0 / 42% 42% 0 0; }
}

.sitio {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--plata-txt); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  line-height: 1; letter-spacing: -.01em;
  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: .12em; text-transform: uppercase; color: var(--plata-txt);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.4rem; }
.dd--tel a { text-decoration: none; color: var(--liga-txt); border-bottom: 2px solid var(--liga); }

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

.antetitulo {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--plata-txt);
  margin-bottom: .7rem;
}
.antetitulo--claro { color: #A9B4B7; }

.mapa h2, .control h2 {
  font-size: clamp(2.2rem, 6.5vw, 4.4rem); line-height: 1.02;
  margin-bottom: 1rem;
}
.control h2 { color: var(--blanco); }
.entrada { max-width: 54ch; }
.control .entrada { color: #D5DDDF; }

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

/* LA LINEA DEL TRATAMIENTO: cada etapa mas derecha que la anterior.
   La curvatura se hace con el border-left redondeado del <li>. */
.linea { list-style: none; margin: 0; padding: 0; max-width: 58rem; }
.et {
  position: relative;
  padding: 1.6rem 0 1.6rem 2.6rem;
  border-left: 2px solid var(--plata);
}
/* de curva a recta, etapa por etapa */
.et--1 { border-radius: 44px 0 0 0; }
.et--2 { border-radius: 30px 0 0 0; }
.et--3 { border-radius: 18px 0 0 0; }
.et--4 { border-radius: 8px 0 0 0; }
.et--5 { border-radius: 0; }

/* el punto de cada etapa ES una liga: turquesa, chico y redondo. */
.et::before {
  content: ''; position: absolute; left: -7px; top: 2.1rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--liga);
  box-shadow: 0 0 0 3px var(--blanco);
}
.et__mes {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--liga-txt); margin-bottom: .2rem;
}
.et h3 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .5rem; }
.et p { max-width: 56ch; }
.et__dato {
  font-family: var(--dato); font-size: .84rem;
  color: var(--plata-txt); margin-bottom: 0;
}

/* «falta»: la pagina es mayormente CLARA — tono oscuro por defecto,
   claro como excepcion declarada para la seccion hondo. */
.falta {
  display: inline-block; margin-top: .3rem;
  font-family: var(--dato); font-size: .76rem;
  color: var(--liga-txt); border-bottom: 1px dashed var(--liga);
}
.control .falta { color: #7FD8D2; border-bottom-color: #7FD8D2; }

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

/* ══════ EL CONTROL ══════ */
.control {
  background: var(--hondo); color: var(--blanco);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
  margin-bottom: clamp(1.6rem, 4vw, 2.5rem);
}
.tj { border-top: 2px solid #35464B; padding-top: 1rem; }
.tj__n {
  font-family: var(--dato); font-size: .8rem;
  color: #7FD8D2; margin-bottom: .3rem;
}
.tj h3 { font-size: 1.35rem; color: var(--blanco); margin-bottom: .5rem; }
.tj p { font-size: .95rem; color: #D5DDDF; margin-bottom: 0; }

.saltar {
  background: #172225;
  border-left: 4px solid var(--liga);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  max-width: 62rem;
}
.saltar h3 { font-size: 1.6rem; color: var(--blanco); margin-bottom: .6rem; }
.saltar p { color: #D5DDDF; max-width: 62ch; }
.saltar p:last-child { margin-bottom: 0; }

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

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--plata-txt);
}
.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(--tinta);
  border-bottom: 4px solid var(--liga);
}
.cierre__tel a:hover { color: var(--liga-txt); }
.cierre__pie { font-size: .88rem; color: var(--plata-txt); margin: 0; }

/* ══════ PARA LA CLINICA ══════ */
.dueno {
  background: var(--blanco-2);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.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: .1em; text-transform: uppercase;
  color: var(--liga-txt); margin-bottom: .5rem;
}
.dueno p { color: var(--tinta); 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(--plata); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--liga); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #A0A8AC;
  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; }
}

/* ══════ CÓMO LLEGAR ══════
   Las dos unicas fotos de la pagina. Van DESPUES del telefono y no en
   la portada: en ortodoncia primero se decide entrar al tratamiento y
   despues se averigua donde queda.
   Se montan sobre el panel claro y con la liga turquesa como filete
   inferior, para que entren en el sistema —plata + un punto de color—
   en vez de quedar como dos recortes pegados. Ancho contenido: vienen
   de la ficha de Google y a tamano completo se les nota el origen. */
.llegar {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 40rem;
  text-align: left;
}
.llegar__rot {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--plata-txt); margin-bottom: .8rem;
}
.llegar__par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}
.llegar figure {
  margin: 0;
  background: var(--blanco-2);
  padding: .6rem;
}
.llegar img {
  display: block; width: 100%; height: auto;
  border-bottom: 3px solid var(--liga);
}
.llegar figcaption {
  font-family: var(--dato); font-size: .74rem;
  color: var(--plata-txt); padding-top: .6rem;
}
.llegar__falta { margin: 1rem 0 0; }

/* ── las fotos del cuerpo entran desde un costado ──
   Cada figura del bloque «cómo llegar» llega desde su propio lado, no
   las dos juntas: se lee como dos piezas que se acomodan y no como un
   bloque que aparece. */
.js .llegar figure { opacity: 0; }
.js .llegar figure:first-child  { transform: translateX(-2rem); }
.js .llegar figure:last-child   { transform: translateX(2rem); }
.js .llegar.ok figure {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform 1s cubic-bezier(.16,.7,.3,1);
}
.js .llegar.ok figure:last-child { transition-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
  .js .llegar figure { opacity: 1; transform: none; }
}

/* La portada entra en la lista de piezas que destapa el JS solo para
   disparar la foto: el bloque de texto se anima aparte y el contenedor
   no debe desvanecerse entero. */
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: 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: 52% 50%;
  -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(--blanco) 0%, var(--blanco) 30%,
              rgba(252,252,252,.66) 46%, rgba(252,252,252,.22) 68%, rgba(252,252,252,.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(252,252,252,0) 0%, rgba(252,252,252,.30) 42%, var(--blanco) 70%);
  }
}

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