/* ══════════════════════════════════════════════════════════════════
   MOTOSIERRAS LONCOCHE
   Demo 184. Identidad: «CARCASA NARANJA».

   RUBRO NUEVO DEL REGISTRO: venta y servicio de maquinaria forestal.

   DATO QUE NO SE USA: 10 reseñas. No se citan (regla de la 133). El
   argumento es el rubro en la zona: Loncoche es comuna forestal y
   leñera, y la motosierra es herramienta de casa.

   ╔════════════════════════════════════════════════════════════════╗
   ║  REGLA DE SEGURIDAD DE ESTA PAGINA                              ║
   ║  Ni un consejo de corte, ni de volteo, ni de uso. **Solo        ║
   ║  MANTENCION.** Usar una motosierra se aprende con alguien al    ║
   ║  lado, no leyendo una web, y una demo que enseñara a cortar     ║
   ║  seria un problema y no un servicio. El descargo lo dice con    ║
   ║  todas sus letras.                                              ║
   ╚════════════════════════════════════════════════════════════════╝

   LA PALETA
   --crudo    #F2F1EE  fondo
   --panel    #E5E4E0  bloque secundario
   --taller   #4A4E50  gris de taller para texto (5,6:1 sobre panel)
   --naranjo  #E8641A  CARCASA, para objetos y bloques chicos
   --nar-txt  #A03D00  el mismo naranjo cuando lleva texto: 5,1:1
                       sobre el panel, que es el peor fondo claro
   --hondo    #26292B  la tabla y la seccion oscura

   DESLINDE DE NARANJOS (el registro tiene varios): la señal vial de
   la 120 vive sobre pizarra y es SEÑALETICA; el fuego de la 153 es
   LUZ contenida en la ventanita de la estufa; la maquinaria de la 127
   es AMARILLO, no naranjo. **Este es PLASTICO INYECTADO: saturado,
   con brillo de molde, en bloques chicos de maquina.** Es el color
   del objeto real —toda motosierra del mundo es naranja o roja— y por
   eso se defiende solo. Sin marca, sin logo, sin imitar a nadie.
   PAR DE PLASTICOS DE LA GIRA: con la jaba azul de la 185 — mismo
   material inyectado, otro color y otro oficio.

   EL TRIO
   · display · Anton SC — la mas pesada del catalogo, en versaditas:
     rotulo de taller. Primera vez en el registro.
   · cuerpo  · Archivo — neutra, aguanta la tabla.
   · dato    · Share Tech Mono — REPETICION CONSCIENTE: el catalogo
     esta agotado; es la mas de panel de maquina que queda.

   LA CABECERA (149ª del oficio) — EL ESLABON
   Un diente de cadena de motosierra de perfil: la forma con gancho.
   **Ningun logotipo del registro es un eslabon de corte**, y este
   dice el oficio entero sin dibujar la maquina.
   (149ª y no 150ª porque la 179 quedo en pausa.)

   EL FONDO — EL ASERRIN QUE SALTA
   A rafagas, particulas saltan en ARCO CORTO desde un punto lateral y
   caen rapido. 7s por rafaga.
   **DESLINDE — EL CUARTETO DE LAS CAIDAS**:
     · las chispas de la 92 SUBEN flotando (aire caliente)
     · los petalos de la 155 BAJAN EN ZIGZAG (planean)
     · la harina de la 186 cae RECTA Y FINA y se acumula
     · **el aserrin SALTA en arco balistico y cae rapido**: no flota,
       no planea, no se acumula — es trabajo, no ambiente.
   Reduced-motion: esconder (particulas quietas no son aserrin, son
   suciedad en la pantalla).

   LA ESTRUCTURA — C (la tabla es la pagina)
   SINTOMA / QUE ES / QUE SE HACE.
   DESLINDE con los C del registro: la 180 es CHECKLIST DE EXAMEN
   («esto se mira, esto reprueba»); **esta es DIAGNOSTICO DE MAQUINA
   («si pasa esto, es esto y se hace esto»)**. Y tiene un pariente
   inesperado: **la 160 hace triage de SALUD con exactamente la misma
   logica en otro mundo** — sintoma, que significa, que corresponde
   hacer. Anotado en las dos filas.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crudo:   #F2F1EE;
  --panel:   #E5E4E0;
  --taller:  #4A4E50;
  --naranjo: #E8641A;
  /* 4,41:1 sobre el panel del bloque del dueño. Se oscurecio a
     #A03D00: 5,1:1 ahi y 5,4:1 sobre el crudo. */
  --nar-txt: #A03D00;
  --hondo:   #26292B;
  --linea:   #D2D1CC;

  --display: 'Anton SC', system-ui, sans-serif;
  --cuerpo:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Share Tech 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(--crudo);
  color: var(--hondo);
  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(--nar-txt); outline-offset: 3px; }

.visually {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

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

/* EL ESLABON — la cabecera 149ª. Diente de cadena de perfil. */
.eslabon {
  position: relative; display: block; flex: none;
  width: 26px; height: 18px;
}
/* el cuerpo del eslabon */
.eslabon::before {
  content: ''; position: absolute; left: 0; bottom: 2px;
  width: 26px; height: 8px;
  background: var(--taller);
  border-radius: 3px;
}
/* el diente con gancho: la forma que hace reconocible una cadena */
.eslabon::after {
  content: ''; position: absolute; left: 9px; top: 0;
  width: 15px; height: 12px;
  background: var(--naranjo);
  clip-path: polygon(0 100%, 0 55%, 42% 8%, 78% 0, 100% 26%, 62% 40%, 52% 100%);
}

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

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

@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 ASERRIN QUE SALTA */
.aserrin {
  position: absolute; right: 14%; bottom: 18%;
  width: 320px; height: 220px;
  z-index: 1; pointer-events: none;
}
.p {
  position: absolute; left: 0; bottom: 0;
  width: 5px; height: 3px;
  background: #C9A87A;
  border-radius: 1px;
  opacity: 0;
}
/* arco balistico: sale rapido, sube poco, cae mas rapido todavia */
.js .p { animation: saltar 7s ease-out infinite; }
.js .p2 { animation-delay: .12s; }
.js .p3 { animation-delay: .24s; }
.js .p4 { animation-delay: .07s; }
.js .p5 { animation-delay: 3.5s; }
.js .p6 { animation-delay: 3.62s; }
.js .p7 { animation-delay: 3.74s; }
.js .p8 { animation-delay: 3.57s; }
@keyframes saltar {
  0%   { transform: translate(0, 0)         rotate(0deg);   opacity: 0; }
  4%   { transform: translate(20px, -46px)  rotate(60deg);  opacity: 1; }
  12%  { transform: translate(90px, -78px)  rotate(220deg); opacity: 1; }
  22%  { transform: translate(170px, -10px) rotate(400deg); opacity: .9; }
  28%, 100% { transform: translate(196px, 12px) rotate(430deg); opacity: 0; }
}
/* Cada particula arranca desde un punto un poco distinto. OJO: esto
   NO se hace con `transform`, porque la animacion lo sobreescribe
   mientras corre — se hace moviendo el origen con left/bottom. */
.p2 { left: 4px;  bottom: 6px; }
.p3 { left: -3px; bottom: 12px; }
.p4 { left: 6px;  bottom: -2px; }
.p5 { left: 0;    bottom: 8px; }
.p6 { left: 5px;  bottom: 14px; }
.p7 { left: -2px; bottom: 3px; }
.p8 { left: 3px;  bottom: 10px; }
@media (prefers-reduced-motion: reduce) {
  .aserrin { display: none; }
}

.sitio {
  font-family: var(--dato); font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--taller); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.6rem, 9vw, 6.4rem);
  line-height: .98; letter-spacing: .005em;
  margin-bottom: 1.4rem;
}
.bajada { max-width: 46ch; margin-bottom: 1.8rem; }

.specs { display: flex; flex-wrap: wrap; gap: 1.5rem 2.6rem; margin: 0 0 1rem; }
.spec dt {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--taller);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.35rem; }
.dd--si { color: var(--nar-txt); }
.dd--tel a { text-decoration: none; border-bottom: 3px solid var(--naranjo); }
.aviso-corto { font-size: .9rem; color: var(--taller); margin: 0; max-width: 46ch; }

/* ══════ LA TABLA — ESTRUCTURA C ══════ */
.cadena {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.cadena__cabecera, .invierno__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

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

.cadena h2, .invierno h2 {
  font-size: clamp(2.2rem, 7vw, 4.8rem); line-height: 1;
  margin-bottom: 1rem;
}
.invierno h2 { color: var(--crudo); }
.entrada { max-width: 56ch; }
.invierno .entrada { color: #D5D7D8; }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .78rem;
  color: var(--taller); border-left: 3px solid var(--naranjo); padding-left: .6rem;
}
.marca-ejemplo--claro::before { color: #D5D7D8; border-left-color: var(--naranjo); }

.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; min-width: 42rem; }
.tabla thead th {
  font-family: var(--dato); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--hondo); color: var(--crudo);
  text-align: left; padding: .8rem 1rem; font-weight: 400;
}
.tabla tbody th {
  font-family: var(--display); font-weight: 400;
  font-size: 1.15rem; text-align: left;
  padding: 1rem; width: 17rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.tabla td {
  padding: 1rem; vertical-align: top;
  border-bottom: 1px solid var(--linea);
  font-size: .96rem;
}
.tabla tbody tr:nth-child(even) { background: var(--panel); }
.acc { width: 13rem; }
.tag {
  display: inline-block;
  font-family: var(--dato); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--crudo); background: var(--taller);
  padding: .2rem .6rem; border-radius: 2px;
  margin: 0 .2rem .3rem 0;
}
.tag--cambio { background: var(--nar-txt); }

.veredicto {
  background: var(--hondo); color: var(--crudo);
  border-left: 6px solid var(--naranjo);
  padding: clamp(1.3rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 62rem;
}
.veredicto h3 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--crudo); margin-bottom: .7rem; }
.veredicto p { color: #D5D7D8; max-width: 62ch; }
.veredicto 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: .84rem;
  color: var(--nar-txt); border-bottom: 1px dashed var(--naranjo);
}
.invierno .falta { color: #F0A470; border-bottom-color: #F0A470; }

/* ══════ ANTES DEL INVIERNO ══════ */
.invierno {
  background: var(--hondo); color: var(--crudo);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.meses {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.me { border-top: 3px solid #454A4C; padding-top: 1rem; }
.me--tarde { border-top-color: var(--naranjo); }
.me__t {
  font-family: var(--dato); font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: #E89A62; margin-bottom: .3rem;
}
.me h3 { font-size: 1.4rem; color: var(--crudo); margin-bottom: .5rem; }
.me p { font-size: .95rem; color: #D5D7D8; }
.me p:last-child { margin-bottom: 0; }

.guardar {
  background: #1D2022;
  border: 1px solid #3B4042;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  max-width: 62rem;
}
.guardar h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--crudo); margin-bottom: .7rem; }
.guardar ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.guardar li { margin-bottom: .5rem; color: #D5D7D8; }
.guardar__nota { font-family: var(--dato); font-size: .84rem; color: #D5D7D8; margin: 0; }

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

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

/* ══════ PARA EL TALLER ══════ */
.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.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: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--nar-txt); margin-bottom: .5rem;
}
.dueno p { color: var(--hondo); 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(--naranjo); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--hondo); }

/* ══════ PIE ══════ */
.pie {
  background: #1A1D1E; color: #9DA1A2;
  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% 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(--crudo) 0%, var(--crudo) 30%,
              rgba(242,241,238,.66) 46%, rgba(242,241,238,.22) 68%, rgba(242,241,238,.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(242,241,238,0) 0%, rgba(242,241,238,.30) 42%, var(--crudo) 70%);
  }
}

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