/* ══════════════════════════════════════════════════════════════════
   FELIPE GARRIDO CARREÑO · Kinesiologia · Villarrica
   Demo 175. Identidad: «MEZCLILLA DE VISITA».

   ╔════════════════════════════════════════════════════════════════╗
   ║  EL NEGOCIO ES UNA PERSONA CON NOMBRE Y APELLIDO                ║
   ║  Ni biografia, ni titulo, ni especialidad, ni anos de           ║
   ║  experiencia: NADA DE ESO CONSTA y en salud no se supone. La    ║
   ║  ficha de la izquierda tiene cinco campos y CUATRO estan        ║
   ║  marcados como pendientes, empezando por el registro            ║
   ║  profesional — que es lo primero que una pagina de salud        ║
   ║  deberia poder mostrar. La ficha vacia no es un descuido: es    ║
   ║  el argumento.                                                  ║
   ╚════════════════════════════════════════════════════════════════╝

   LA DIRECCION EN UNA FRASE
   La ropa del que llega a tu casa a ayudar. Mezclilla lavada,
   grisacea, de diario — no un uniforme clinico. Es la paleta mas
   DOMESTICA del registro y esa es exactamente la idea: la pagina
   trata de alguien entrando a una casa.

   LA PALETA
   --crudo     #F4F2ED  fondo
   --mezclilla #455567  azul mezclilla para TEXTO (6,6:1)
   --mezcla-ob #7A8CA0  el mismo azul para OBJETOS dibujados. No se
                        usa en texto: sobre crudo da 3,0:1.
   --hondo     #2C3949  la seccion oscura
   --tinta     #21262C
   --gris      #575E66  secundario: 5,9:1 sobre crudo y 5,3:1 sobre
                        crudo-2, que es el fondo peor de la pagina

   DESLINDE DE AZULES TEXTILES: la lona de la 150 es CARPA TECNICA
   (saturada, mate, impermeable); el toldo de la 148 es RAYA DE VERANO
   (alegre, contrastada). La mezclilla es GASTADA Y GRISACEA — tiene
   el azul lavado de una prenda usada cien veces, y por eso funciona
   como «ropa de trabajo» y no como «uniforme».

   EL TRIO
   · display · Newsreader (variable) — serif de lectura, de diario de
     casa. Primera vez como display del registro.
   · cuerpo  · Alegreya Sans — humanista calida.
   · dato    · Anonymous Pro — REPETICION CONSCIENTE: el catalogo de
     monos esta agotado; es la mas de «nota escrita a maquina» que
     queda y aca sostiene la ficha de datos pendientes.

   FAMILIA «LA PERSONA ES EL NEGOCIO»: 155 · **175** · 177 · 180.

   LA CABECERA (141ª del oficio) — EL BOLSO
   El bolso de visita: rectangulo redondeado, asa arriba y el cierre
   marcado. **Ningun logotipo del registro es un bolso**, y este dice
   en un objeto lo que la pagina dice en tres secciones: que el que
   atiende se traslada.

   EL FONDO — EL CAMINO QUE SE ENCIENDE
   Entre dos casitas minimas, una hilera de puntos se enciende EN
   ORDEN, como los mapas de vuelo de los aeropuertos. Ciclo de 12s.
   DESLINDE con el hilvan de la 130: aquel DIBUJA puntadas nuevas a
   saltos (algo que no estaba, aparece). Aca **los puntos YA EXISTEN**
   tenues desde el principio y lo unico que cambia es que se
   ENCIENDEN: es un recorrido conocido, no un trazo que se inventa.
   OJO — **la familia «llegar y quedarse» (114 · 127 · 135 · 149) NO
   APLICA**: alli lo que llega SE QUEDA encendido para siempre; aca
   los puntos se apagan al final del ciclo porque la visita termina y
   el kine se va. Anotado para que nadie lo confunda al revisar.
   Reduced-motion: hilera fija encendida.

   LA ESTRUCTURA — G (split sticky)
   Izquierda fija: LA FICHA DE LA PERSONA. Derecha: la visita.
   DESLINDE con los G de la tanda — la 139 fija un neon, la 153 una
   estufa, la 161 un reloj, la 168 una tina: **los cuatro son OBJETOS.
   Este es el unico G cuyo lado fijo es una PERSONA** —su ficha—, y
   ademas es una ficha incompleta que se queda a la vista mientras el
   lector baja: el hueco acompaña toda la lectura.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crudo:     #F4F2ED;
  --crudo-2:   #E9E6DF;
  --mezclilla: #455567;
  --mezcla-ob: #7A8CA0;
  --hondo:     #2C3949;
  --tinta:     #21262C;
  /* CALIBRADO CONTRA EL PEOR FONDO, no contra el primero: el gris
     estaba en #666D75, que da 5,2:1 sobre el crudo pero SOLO 4,2:1
     sobre el crudo-2 de la ficha y del bloque del dueño — y ahi es
     justamente donde vive casi todo el texto secundario. El auditor
     devolvio doce fallas de una sola variable. */
  --gris:      #575E66;
  --linea:     #D8D4CB;

  --display: 'Newsreader', Georgia, serif;
  --cuerpo:  'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Anonymous Pro', 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(--crudo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.09rem;
  line-height: 1.7;
  overflow-x: hidden;
}

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

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

/* ── la banda de propuesta ── */
.propuesta {
  background: var(--hondo); color: var(--crudo);
  padding: .9rem clamp(1.2rem, 5vw, 4rem);
}
.propuesta__que { font-size: .84rem; margin: 0 0 .25rem; }
.propuesta__gancho { font-size: .84rem; color: #B7C0CC; 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(--crudo);
  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.25rem; font-weight: 600; }

/* EL BOLSO — la cabecera 141ª. */
.bolso {
  position: relative; display: block; flex: none;
  width: 26px; height: 18px;
  margin-top: 5px;
  background: var(--mezcla-ob);
  border-radius: 3px 3px 5px 5px;
}
/* el cierre marcado */
.bolso::after {
  content: ''; position: absolute; left: 3px; right: 3px; top: 4px;
  height: 2px; background: var(--crudo); border-radius: 1px;
}
.bolso__asa {
  position: absolute; left: 50%; top: -7px;
  width: 14px; height: 9px; margin-left: -7px;
  border: 2px solid var(--mezcla-ob);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
}
.bolso--grande {
  width: 58px; height: 40px; margin: 0 0 1.2rem;
}
.bolso--grande::after { left: 6px; right: 6px; top: 9px; height: 3px; }
.bolso--grande .bolso__asa {
  width: 28px; height: 16px; margin-left: -14px; top: -14px;
  border-width: 3px; border-radius: 14px 14px 0 0;
}

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .82rem;
  text-decoration: none; color: var(--gris);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.cab__nav a:hover { color: var(--mezclilla); border-bottom-color: var(--mezclilla); }

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

@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 CAMINO QUE SE ENCIENDE */
.camino {
  position: absolute; left: 6%; right: 6%; bottom: 14%;
  height: 40px; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between;
}
.casita {
  width: 22px; height: 18px; flex: none;
  background: var(--mezcla-ob);
  opacity: .5;
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}
.pt {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--mezcla-ob);
  opacity: .22;
}
/* los puntos YA ESTAN: lo unico que cambia es que se encienden. */
.js .pt { animation: encender 12s linear infinite; }
.js .p2 { animation-delay: .9s; }
.js .p3 { animation-delay: 1.8s; }
.js .p4 { animation-delay: 2.7s; }
.js .p5 { animation-delay: 3.6s; }
.js .p6 { animation-delay: 4.5s; }
@keyframes encender {
  0%       { opacity: .22; }
  6%, 46%  { opacity: 1; }
  58%, 100%{ opacity: .22; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pt { animation: none; opacity: 1; }
}

.sitio {
  font-family: var(--dato); font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.6rem, 8.5vw, 5.8rem);
  line-height: 1.04; margin-bottom: 1.4rem;
}
.bajada { max-width: 46ch; margin-bottom: 1.8rem; }

/* T1 CON NOMBRE — segunda del registro, tras la 155. */
.tel-nombre { margin: 0; }
.tel-nombre a {
  display: inline-block;
  font-family: var(--dato);
  font-size: clamp(1.1rem, 2.8vw, 1.7rem);
  text-decoration: none; color: var(--mezclilla);
  border-bottom: 3px solid var(--mezcla-ob); padding-bottom: 3px;
}
.tel-nombre a:hover { border-bottom-color: var(--mezclilla); }

/* ══════ LA PIEZA FIRMA — SPLIT STICKY (G) ══════ */
.casa {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
@media (max-width: 940px) { .casa { grid-template-columns: 1fr; } }

.casa__fijo { position: sticky; top: 5.5rem; align-self: start; }
@media (max-width: 940px) { .casa__fijo { position: static; } }

/* LA FICHA DE LA PERSONA */
.ficha {
  background: var(--crudo-2);
  border: 1px solid var(--linea);
  padding: clamp(1.3rem, 3vw, 1.8rem);
}
.ficha__nombre { font-size: 1.5rem; line-height: 1.15; margin-bottom: .2rem; }
.ficha__rubro {
  font-family: var(--dato); font-size: .82rem;
  color: var(--gris); margin-bottom: 1.2rem;
}
.ficha__datos { margin: 0 0 1.2rem; }
.ficha__datos > div { padding: .7rem 0; border-top: 1px solid var(--linea); }
.ficha__datos dt {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .15rem;
}
.ficha__datos dd { margin: 0; font-size: .98rem; }
.ficha__datos dd a { font-family: var(--dato); color: var(--mezclilla); text-decoration: none; border-bottom: 2px solid var(--mezcla-ob); }
.pend {
  font-family: var(--dato); font-size: .84rem !important;
  color: var(--gris);
  border-bottom: 1px dashed var(--gris);
  display: inline-block;
}
.ficha__nota { font-size: .88rem; color: var(--gris); margin: 0; }

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

.casa h2, .persona h2 {
  font-size: clamp(2.1rem, 6vw, 3.8rem); line-height: 1.05;
  margin-bottom: 1rem;
}
.persona h2 { color: var(--crudo); }
.entrada { max-width: 54ch; }
.persona .entrada { color: #DDE3EA; }

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

.sub {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  margin: 2rem 0 .8rem;
}
.quienes { margin: 0; padding: 0; list-style: none; max-width: 58ch; }
.quienes li { padding: .8rem 0; border-top: 1px solid var(--linea); }
.quienes li:first-child { border-top: none; }

.sesion { margin: 0; padding: 0; list-style: none; max-width: 58ch; counter-reset: s; }
.sesion li {
  position: relative; counter-increment: s;
  padding: 1rem 0 1rem 2.4rem;
  border-top: 1px solid var(--linea);
}
.sesion li::before {
  content: counter(s); position: absolute; left: 0; top: 1.05rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--mezcla-ob); color: #FFFFFF;
  font-family: var(--dato); font-size: .84rem;
  display: flex; align-items: center; justify-content: center;
}
.sesion__rot {
  font-family: var(--dato); font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .2rem;
}
.sesion li p:last-child { margin-bottom: 0; }

/* «falta»: pagina mayormente CLARA — tono oscuro por defecto. */
.falta {
  display: inline-block; margin-top: .3rem;
  font-family: var(--dato); font-size: .82rem;
  color: var(--mezclilla); border-bottom: 1px dashed var(--mezcla-ob);
}
.persona .falta { color: #AEC0D4; border-bottom-color: #AEC0D4; }

.firma {
  max-width: 54ch; margin: 2rem 0 0;
  font-size: .96rem; color: var(--gris);
  border-left: 3px solid var(--mezcla-ob); padding-left: 1rem;
}

/* ══════ UNA PERSONA ══════ */
.persona {
  background: var(--hondo); color: var(--crudo);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.persona__cabecera { max-width: 54rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }

.razones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.rz { border-top: 2px solid #4A5A6E; padding-top: 1rem; }
.rz h3 { font-size: 1.3rem; color: var(--crudo); margin-bottom: .5rem; }
.rz p { font-size: .98rem; color: #DDE3EA; margin-bottom: 0; }

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

/* ══════ CIERRE — T1 CON NOMBRE ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .8rem;
  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(--mezclilla);
  border-bottom: 4px solid var(--crudo-2);
}
.cierre__tel a:hover { border-bottom-color: var(--mezclilla); }
.cierre__pie { font-size: .95rem; color: var(--gris); margin: 0; }

/* ══════ PARA FELIPE ══════ */
.dueno {
  background: var(--crudo-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(--mezclilla); margin-bottom: .5rem;
}
.dueno p { color: var(--tinta); font-size: .98rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--mezcla-ob); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--tinta); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #A5ACB4;
  padding: 2rem clamp(1.2rem, 5vw, 4rem);
  font-size: .85rem;
}
.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% 44%;
  -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(--crudo) 0%, var(--crudo) 30%,
              rgba(244,242,237,.66) 46%, rgba(244,242,237,.22) 68%, rgba(244,242,237,.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(244,242,237,0) 0%, rgba(244,242,237,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#casa { 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(--crudo-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(--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(--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(--crudo); 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(244,242,237,.72) 0%,
              rgba(244,242,237,.84) 45%, rgba(244,242,237,.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(--mezclilla);
}
.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; }
}