/* ══════════════════════════════════════════════════════════════════
   TRANSPORTES ROJAS · Villarrica
   Demo 181. Identidad: «PAPEL Y CINTA DE EMBALAR».

   ╔════════════════════════════════════════════════════════════════╗
   ║  EVIDENCIA DE VENTA, VERIFICADA EL 31-08-2026                   ║
   ║  rojastransportes.cl NO RESUELVE. No es un sitio caido: el      ║
   ║  DNS responde «Non-existent domain», o sea que el dominio       ║
   ║  salio del registro. Tuvieron web y la perdieron entera,        ║
   ║  incluido el nombre — y hoy cualquiera puede tomarlo, un        ║
   ║  competidor incluido. Eso es lo que va en la banda de           ║
   ║  propuesta, con fecha, porque se comprueba en un minuto.        ║
   ╚════════════════════════════════════════════════════════════════╝

   DATO QUE NO SE USA: la ficha tiene 3 reseñas. En B2B las reseñas
   no son el argumento y con ese volumen menos: **en toda la pagina
   no aparece ni la nota ni el numero**. El argumento es el dominio
   caido y un rubro sin nadie online.

   RUBRO NUEVO DEL REGISTRO: transporte de carga. (forestal-robur es
   B2B de cosecha, no flete.)

   LA DIRECCION EN UNA FRASE
   Papel kraft y cinta de embalar: el material con el que se despacha
   cualquier cosa. La cinta cruza la pagina como cruza una caja.

   LA PALETA
   --kraft   #EFE6D6  papel
   --cinta   rgba(166,120,60,.32)  la cinta TRANSLUCIDA, para
             franjas y adornos. Nunca lleva texto encima.
   --cafe    #7A5219  el mismo cafe opaco cuando lleva texto (5,6:1)
   --tinta   #241F18
   --hondo   #2A2118  la seccion oscura
   --gris    #5C5349  secundario: 6,0:1 sobre kraft y 5,3:1 sobre
                      kraft-2, que es el fondo de las fichas

   DESLINDE DE KRAFT Y CAFES: el carton de la 80 es CAJA DE REPUESTOS
   con rotulador (superficie de escritura); el kraft de la 125 es
   SACO DE HARINA (textil, con trama); el pelaje de la 166 es MATE de
   animal. **Aca el motivo no es el papel: es LA CINTA** — franjas
   adhesivas translucidas que cruzan y sellan, con el brillo plastico
   que tiene la cinta de embalar. **Ningun proyecto del registro usa
   cinta adhesiva.**

   EL TRIO
   · display · Roboto Condensed (variable) — condensada de etiqueta
     logistica. Primera vez en el registro.
   · cuerpo  · Instrument Sans — neutra.
   · dato    · Overpass Mono — REPETICION CONSCIENTE: el catalogo
     esta agotado; es la mas de guia de despacho que queda.

   LA CABECERA (146ª del oficio) — LA CAJA FLEJADA
   La caja con las dos cintas cruzadas en X sobre la tapa. (Numero
   146ª y no 147ª porque la 179 quedo en pausa — ver la fila de la
   180 en el registro.)

   EL FONDO — LA CINTA QUE SELLA
   Una franja translucida cruza en diagonal, se asienta y **SE CORTA
   CON BORDE DENTADO**; queda un rato y se funde.
   DESLINDE OBLIGATORIO CON LA RAYA DE PASTA DE LA 173, que tambien
   avanza y se corta: **la pasta termina en GOTA BLANDA que se
   asienta; la cinta termina en CORTE DENTADO Y SECO, de un tiron.**
   Mismo esqueleto de animacion, fisica opuesta — escrito en las dos
   filas del registro. El dentado se dibuja con un `clip-path` de
   sierra en el extremo.
   Reduced-motion: cinta puesta y quieta.

   LA ESTRUCTURA — J (ficha tecnica)
   QUE SE LLEVA / CAPACIDAD / DONDE / QUE NO, y el mini-formulario del
   flete al cierre (un T5-lite: los cuatro datos que hay que mandar,
   sin formulario de verdad porque no hay backend).
   DESLINDE con los J del registro: la 176 especifica MOVIMIENTOS del
   cuerpo; **esta es la unica J de LOGISTICA**, y su rasgo propio es
   que **la mitad de los campos se entregan vacios**: en carga,
   prometer una capacidad que no se tiene es peor que no publicar
   nada.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --kraft:   #EFE6D6;
  --kraft-2: #E4D8C3;
  --cafe:    #7A5219;
  --cinta:   rgba(166,120,60,.32);
  --cinta-2: rgba(166,120,60,.5);
  --tinta:   #241F18;
  --hondo:   #2A2118;
  /* CALIBRADO CONTRA EL KRAFT-2, no contra el kraft: en #6A6055 daba
     5,2:1 sobre el fondo de la pagina pero 4,4:1 sobre el fondo de
     las fichas — y todos los rotulos viven en las fichas. Doce
     fallas de una variable, igual que en la 175. */
  --gris:    #5C5349;
  --linea:   #D3C6AE;

  --display: 'Roboto Condensed', system-ui, sans-serif;
  --cuerpo:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Overpass 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(--kraft);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.64;
  overflow-x: hidden;
}

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

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

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

/* LA CAJA FLEJADA — la cabecera 146ª. */
.caja {
  position: relative; display: block; flex: none;
  width: 24px; height: 20px;
  background: var(--kraft-2);
  border: 2px solid var(--cafe);
  border-radius: 2px;
}
/* las dos cintas cruzadas en X */
.caja__x, .caja__x::after {
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 4px; margin: -2px 0 0 -13px;
  background: var(--cinta-2);
}
.caja__x { transform: rotate(38deg); }
.caja__x::after { content: ''; margin: -2px 0 0 -13px; transform: rotate(-76deg); }

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .72rem;
  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(--cafe); border-bottom-color: var(--cafe); }

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

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

/* LA CINTA QUE SELLA */
.cinta-fondo {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.cinta {
  position: absolute; left: -10%; top: 58%;
  width: 0; height: 74px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0 12%, transparent 12% 88%, rgba(0,0,0,.06) 88% 100%),
    var(--cinta);
  transform: rotate(-14deg);
  transform-origin: left center;
  /* EL CORTE DENTADO: sierra en el extremo derecho. Seco, de un
     tiron — nada de gotas (ver el deslinde con la 173). */
  clip-path: polygon(
    0 0, calc(100% - 10px) 0,
    100% 12%, calc(100% - 10px) 25%, 100% 38%,
    calc(100% - 10px) 50%, 100% 62%, calc(100% - 10px) 75%,
    100% 88%, calc(100% - 10px) 100%,
    0 100%);
}
.js .cinta { animation: sellar 18s ease-out infinite; }
@keyframes sellar {
  0%        { width: 0;   opacity: 1; }
  32%, 76%  { width: 120%; opacity: 1; }
  92%, 100% { width: 120%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cinta { animation: none; width: 120%; }
}

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

.tel-grande { margin: 0; }
.tel-grande a {
  display: inline-block;
  font-family: var(--dato);
  font-size: clamp(1.1rem, 2.8vw, 1.6rem);
  text-decoration: none; color: var(--cafe);
  border-bottom: 3px solid var(--cinta-2); padding-bottom: 3px;
}
.tel-grande a:hover { border-bottom-color: var(--cafe); }

/* ══════ LA FICHA — ESTRUCTURA J ══════ */
.llevan {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.llevan__cabecera, .cotiza__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

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

.llevan h2, .cotiza h2 {
  font-size: clamp(2.2rem, 6.5vw, 4.4rem); line-height: 1;
  text-transform: uppercase; margin-bottom: 1rem;
}
.cotiza h2 { color: var(--kraft); }
.entrada { max-width: 54ch; }
.cotiza .entrada { color: #E0D4C0; }

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

.ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.fi {
  background: var(--kraft-2);
  border-top: 6px solid var(--cinta-2);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.fi--no { border-top-color: var(--cafe); }
.fi__rot {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .3rem;
}
.fi h3 { font-size: 1.4rem; text-transform: uppercase; margin-bottom: .8rem; }
.fi ul { margin: 0 0 .8rem; padding: 0; list-style: none; }
.fi li { padding: .5rem 0; border-top: 1px solid var(--linea); font-size: .96rem; }
.fi li:first-child { border-top: none; }
.fi__nota { font-size: .88rem; color: var(--gris); margin: 0; }

.specs-t { margin: 0 0 .8rem; }
.specs-t > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-top: 1px solid var(--linea);
}
.specs-t > div:first-child { border-top: none; }
.specs-t dt { font-family: var(--dato); font-size: .82rem; color: var(--gris); }
.specs-t dd { margin: 0; }

.pend, .falta {
  display: inline-block;
  font-family: var(--dato); font-size: .8rem;
  color: var(--cafe); border-bottom: 1px dashed var(--cafe);
}
.falta { margin-top: .3rem; }
.cotiza .falta, .cotiza .pend { color: #D8B583; border-bottom-color: #D8B583; }

/* ══════ COMO SE COTIZA ══════ */
.cotiza {
  background: var(--hondo); color: var(--kraft);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.factores {
  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);
}
.fa { border-top: 3px solid var(--cinta-2); padding-top: 1rem; }
.fa__n {
  font-family: var(--dato); font-size: .8rem;
  color: #D8B583; margin-bottom: .3rem;
}
.fa h3 { font-size: 1.35rem; color: var(--kraft); text-transform: uppercase; margin-bottom: .5rem; }
.fa p { font-size: .95rem; color: #E0D4C0; margin-bottom: 0; }

/* el mini-formulario del flete: T5-lite, sin backend */
.formulario {
  background: #221A13;
  border: 1px solid #4A3B2B;
  padding: clamp(1.3rem, 3vw, 2rem);
  max-width: 62rem;
}
.formulario h3 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--kraft); text-transform: uppercase; margin-bottom: .6rem; }
.formulario p { color: #E0D4C0; }
.cuatro { margin: 0 0 1rem; padding-left: 1.3rem; }
.cuatro li { margin-bottom: .6rem; color: #E0D4C0; max-width: 60ch; }
.formulario__pie {
  font-family: var(--dato); font-size: .88rem;
  color: #D8B583; margin: 0;
}

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

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .74rem;
  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(--cafe);
  border-bottom: 6px solid var(--cinta-2);
}
.cierre__tel a:hover { border-bottom-color: var(--cafe); }
.cierre__pie { font-size: .9rem; color: var(--gris); margin: 0 auto; max-width: 46ch; }

/* ══════ PARA EL TRANSPORTISTA ══════ */
.dueno {
  background: var(--kraft-2);
  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.7rem); text-transform: uppercase; 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(--cafe); 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: 3px solid var(--cinta-2); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--cafe); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #A99C8B;
  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 FOTOS ══════
   Grilla dura, igual que el resto de la pagina: dos arriba y una ancha
   abajo. Cada figura llega desde un lado distinto — izquierda, derecha,
   abajo — con un retardo escalonado, para que se lean como tres cosas
   puestas sobre la mesa y no como un bloque que se enciende. */
.galeria {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 78rem; margin: 0 auto;
}
.galeria__titulo {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.05;
  margin: 0 0 .6rem; color: var(--tinta);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--gris); font-size: .96rem; line-height: 1.6;
}
.galeria__grilla { display: grid; gap: clamp(.9rem, 2vw, 1.6rem); grid-template-columns: 1fr 1fr; }
.gal { margin: 0; background: var(--kraft-2); border: 1px solid var(--linea); padding: .6rem; }
.gal--abajo { grid-column: 1 / -1; }
.gal img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 3px solid var(--cafe);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--gris); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--gris);
  margin: 1.4rem 0 0; padding-left: 1.1rem; position: relative;
}
.galeria__falta::before { content: '·'; position: absolute; left: .3rem; }

.js .gal.rev { opacity: 0; }
.js .gal--izq.rev   { transform: translateX(-2.4rem); }
.js .gal--der.rev   { transform: translateX(2.4rem); }
.js .gal--abajo.rev { transform: translateY(2.4rem) scale(.98); }
.js .gal.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.js .gal--der.rev.ok   { transition-delay: .12s; }
.js .gal--abajo.rev.ok { transition-delay: .22s; }

@media (max-width: 700px) {
  .galeria__grilla { grid-template-columns: 1fr; }
  .gal--abajo img { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .js .gal.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(--kraft) 0%, var(--kraft) 30%,
              rgba(239,230,214,.66) 46%, rgba(239,230,214,.22) 68%, rgba(239,230,214,.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(239,230,214,0) 0%, rgba(239,230,214,.30) 42%, var(--kraft) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#llevan { 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(--kraft-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(--kraft); 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(239,230,214,.72) 0%,
              rgba(239,230,214,.84) 45%, rgba(239,230,214,.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(--cafe);
}
.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; }
}