/* ══════════════════════════════════════════════════════════════════
   CLINICA VETERINARIA PEHUEN · Osorno
   Demo 166. Identidad: «PELAJE Y ESCALA».

   REGLA CULTURAL APLICADA
   «Pehuen» es palabra mapuche (la araucaria). Se escribe tal cual y
   NO se ilustra: no hay araucarias, ni piñones, ni simbologia. La
   identidad sale del TAMANO DE LOS PACIENTES, que es de lo que habla
   la pagina.

   LA DIRECCION EN UNA FRASE
   El gesto es la ESCALA: la pagina compone «grande» grande y «chico»
   chico, y el layout repite el chiste en serio —la columna del perro
   grande es casi el doble de ancha que la del chico—. Se lee el
   tamano antes de leer las palabras.

   LA PALETA
   --crudo   #F3EFE7  papel, el fondo de casi toda la pagina
   --pelaje  #4A3227  chocolate MATE — bloques de fondo y titulares
   --tinta   #1F1A16  texto
   --gris    #6B5F55  secundario sobre crudo (5,3:1)
   --claro   #E8DED3  secundario sobre pelaje (7,4:1)

   DESLINDE DE CAFES DEL REGISTRO — cuatro ya usados:
     · el cuero de la 76 es CURTIDO y BRILLANTE (tiene reflejo)
     · el mimbre de la 135 es TEJIDO (tiene trama)
     · el pinon de la 143 es CASCARA (tiene veta y es mas rojizo)
     · la tierra de la 146 es HUMEDA (mas oscura y fria)
   Este es PELAJE: mate, sin brillo, sin trama y sin veta, y por eso
   vive en BLOQUES PLANOS de fondo y nunca en un degradado.

   SIN COLORES DE SEMAFORO (misma decision que la 160)
   La urgencia de la torsion gastrica no se marca en rojo: se marca
   INVIRTIENDO EL TONO —la tarjeta se pone oscura— y con el peso de
   la tipografia. Un rojo de alarma en una pagina de salud animal
   asusta al dueno antes de explicarle nada.

   EL TRIO
   · display · Passion One 700 — grotesca pesadisima y estrecha; a
     15rem sostiene la palabra sin deformarse. Primera vez en el
     registro.
   · cuerpo  · Instrument Sans — neutra, aguanta bien al lado de una
     display tan pesada.
   · dato    · M PLUS 1 Code — mono nueva del registro (verificado
     contra la columna de monos de identidades.md). Los kilos y los
     rotulos.

   LA CABECERA (132ª del oficio) — LA CORREA DOBLE
   Dos correas paralelas, una gruesa y una delgada, cada una con su
   mosqueton. El grande y el chico de la casa, dibujados en 26px.

   EL FONDO — LAS DOS SOMBRAS
   La sombra de un perro grande y la de uno chico cruzan JUNTAS la
   franja baja de la portada, al mismo paso, separadas siempre por la
   misma distancia: es la dupla dispareja.
   DESLINDE: la correa de la 134 arrastra siluetas de productos a
   TIRONES (steps); las hormigas de la 126 son PUNTOS minimos en el
   borde. Estas son dos manchas ORGANICAS que cruzan FLUIDO y en
   pareja — y lo que las hace legibles como perros no es la forma, es
   que van juntas y desiguales.
   Reduced-motion: se esconden (una mancha oscura quieta abajo no se
   lee como sombra, se lee como error de render).

   LA ESTRUCTURA — M (comparador paralelo)
   DESLINDE con los M del registro (92/110/120/131/151/178/185):
   aquellos comparan cosas DISTINTAS. Aca se compara EL MISMO
   SERVICIO en dos TAMANOS, y las columnas son desiguales a proposito
   — el ancho es parte del argumento.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crudo:    #F3EFE7;
  --crudo-2:  #E9E3D8;
  --pelaje:   #4A3227;
  --pelaje-2: #3A271E;
  --tinta:    #1F1A16;
  --gris:     #6B5F55;
  --claro:    #E8DED3;
  --linea:    #D6CDC0;

  --display: 'Passion One', system-ui, sans-serif;
  --cuerpo:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'M PLUS 1 Code', 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.0625rem;
  line-height: 1.65;
  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(--pelaje); 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(--tinta);
  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: #C9BFB4; margin: 0; max-width: 62ch; }

/* ── cabecera fantasma ──
   Solida por defecto: sin JS igual se ve bien. El JS le saca el fondo
   arriba del todo. */
.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.5rem;
  letter-spacing: .01em;
}

/* LA CORREA DOBLE — la cabecera 132ª.
   Dos tiras horizontales de distinto grosor, cada una con su
   mosqueton (el circulito del extremo). */
.correas { display: block; width: 30px; }
.correa {
  display: block; position: relative;
  background: var(--pelaje);
  border-radius: 3px;
}
.correa::after {
  content: ''; position: absolute; right: -5px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border: 1.5px solid var(--pelaje); border-radius: 50%;
  background: var(--crudo);
}
.correa--gruesa { width: 22px; height: 5px; margin-bottom: 6px; }
.correa--fina   { width: 15px; height: 2px; margin-left: 4px; }
.correa--fina::after { width: 4px; height: 4px; margin-top: -2px; border-width: 1px; right: -4px; }

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

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

@media (max-width: 720px) {
  .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: 62rem; width: 100%; }

.sitio {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 1rem;
}

/* EL GESTO: la escala. «chico» chico y «él» enorme, en la misma
   columna, alineados al mismo borde izquierdo. */
h1 { line-height: .9; margin-bottom: 1.6rem; }
.h1__chico {
  display: block;
  font-size: clamp(1.5rem, 4.2vw, 2.6rem);
  color: var(--gris);
  letter-spacing: .01em;
}
.h1__grande {
  display: block;
  font-size: clamp(6rem, 26vw, 15rem);
  line-height: .78;
  color: var(--pelaje);
  letter-spacing: -.02em;
}
.h1__grande::after { content: '?'; color: var(--gris); }

.bajada {
  max-width: 46ch; font-size: 1.05rem; color: var(--tinta);
  margin-bottom: 2rem;
}

.specs { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin: 0; }
.spec dt {
  font-family: var(--dato); font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.5rem; }
.dd--no { font-size: 1rem !important; color: var(--gris); padding-top: .4rem; }
.dd--tel a { text-decoration: none; border-bottom: 2px solid var(--pelaje); }

/* LAS DOS SOMBRAS — el fondo. */
.sombras {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26vh;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.sombra {
  position: absolute; bottom: 6%;
  background: radial-gradient(ellipse at center,
              rgba(74,50,39,.30) 0%, rgba(74,50,39,.16) 45%, rgba(74,50,39,0) 72%);
  border-radius: 50%;
}
.sombra--grande { width: 260px; height: 62px; left: -320px; }
.sombra--chica  { width: 108px; height: 34px; left: -140px; }

/* Van a la MISMA velocidad y con el MISMO retraso: la distancia entre
   las dos nunca cambia. Ahi esta la dupla. */
.js .sombra--grande,
.js .sombra--chica {
  animation: cruzar 19s linear infinite;
}
@keyframes cruzar {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 340px)); }
}
@media (prefers-reduced-motion: reduce) {
  .sombras { display: none; }
}

/* ══════ PIEZA FIRMA — EL COMPARADOR ══════ */
.peso {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.peso__cabecera, .dentro__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }

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

.peso h2, .dentro h2 {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: .92; margin-bottom: 1.2rem;
  color: var(--pelaje);
}
.dentro h2 { color: var(--crudo); }

.entrada { max-width: 52ch; color: var(--tinta); }
.dentro .entrada { color: var(--claro); }

/* la marca de honestidad: se escribe desde el atributo data-, para
   que el texto viva en el HTML y no en el CSS. */
.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .06em;
  color: var(--gris);
  border-left: 2px solid var(--gris);
  padding-left: .6rem;
}
.marca-ejemplo--fuerte::before {
  color: var(--claro); border-left-color: var(--claro);
  text-transform: uppercase; letter-spacing: .1em;
}

/* LAS DOS COLUMNAS DESIGUALES — 1,85 contra 1. */
.comp {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 800px) {
  .comp { grid-template-columns: 1fr; }
}

.col { padding: clamp(1.5rem, 3vw, 2.5rem); }
.col--grande { background: var(--pelaje); color: var(--crudo); }
.col--chico  { background: var(--crudo-2); border: 1px solid var(--linea); }

.col__rot {
  font-family: var(--dato); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .4rem;
}
.col--grande .col__rot { color: var(--claro); }
.col--chico  .col__rot { color: var(--gris); }

/* la escala otra vez: el titulo de la columna grande es cuatro veces
   el de la chica. */
.col__tam { font-family: var(--display); line-height: .9; margin-bottom: .2rem; }
.col--grande .col__tam { font-size: clamp(3.2rem, 9vw, 6.5rem); color: var(--crudo); }
.col--chico  .col__tam { font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--pelaje); }

.col__peso { font-family: var(--dato); font-size: .82rem; margin-bottom: 1.8rem; }
.col--grande .col__peso { color: var(--claro); }
.col--chico  .col__peso { color: var(--gris); }

.items { margin: 0; }
.item + .item { margin-top: 1.4rem; padding-top: 1.4rem; }
.col--grande .item + .item { border-top: 1px solid #6A4C3C; }
.col--chico  .item + .item { border-top: 1px solid var(--linea); }

.items dt {
  font-family: var(--dato);
  font-size: .9rem; letter-spacing: .02em;
  margin-bottom: .45rem;
}
.col--grande .items dt { color: var(--crudo); font-size: 1rem; }
.col--chico  .items dt { color: var(--pelaje); font-size: .8rem; }

.items dd { margin: 0; font-size: 1rem; }
.col--grande .items dd { color: var(--claro); }
.col--chico  .items dd { color: var(--gris); font-size: .9rem; }

/* «falta»: EL FONDO DECIDE EL TONO.
   Esta pagina es mayormente CLARA, asi que el tono por defecto es el
   oscuro y la version clara es la excepcion declarada. */
.falta {
  display: inline-block; margin-top: .5rem;
  font-family: var(--dato); font-size: .72rem;
  color: var(--gris);
  border-bottom: 1px dashed var(--gris);
}
.col--grande .falta, .tarjeta--urg .falta {
  color: var(--claro); border-bottom-color: var(--claro);
}

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

/* ══════ GRANDE POR DENTRO ══════ */
.dentro {
  background: var(--pelaje-2);
  color: var(--claro);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.tarjeta {
  background: var(--crudo); color: var(--tinta);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
/* la urgencia NO es roja: es la tarjeta que se pone oscura. */
.tarjeta--urg {
  background: var(--tinta); color: var(--claro);
  border: 2px solid var(--claro);
}
.tarjeta__rot {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .5rem;
}
.tarjeta__rot--urg { color: var(--crudo); }
.tarjeta h3 {
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: .95;
  color: var(--pelaje); margin-bottom: .9rem;
}
.tarjeta--urg h3 { color: var(--crudo); }
.tarjeta p { font-size: .98rem; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta__accion {
  font-weight: 600;
  border-left: 3px solid var(--crudo);
  padding-left: .9rem;
}

.descargo {
  max-width: 60ch; margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: .85rem; color: var(--claro);
}

/* ══════ 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(--gris);
}
.cierre__tel { font-size: clamp(2.2rem, 9vw, 6rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--pelaje);
  border-bottom: 4px solid var(--linea);
}
.cierre__tel a:hover { border-bottom-color: var(--pelaje); }
.cierre__pie { font-size: .88rem; color: var(--gris); margin: 0; }

/* ══════ PARA LA CLINICA ══════ */
.dueno {
  background: var(--pelaje);
  color: var(--claro);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin-bottom: 2rem; color: var(--crudo); }
.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: .12em;
  text-transform: uppercase; color: var(--crudo);
  margin-bottom: .5rem;
}
.dueno p { color: var(--claro); font-size: .96rem; 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 #7A5B49; padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--crudo); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #B5AA9E;
  padding: 2rem clamp(1.2rem, 5vw, 4rem);
  font-size: .8rem;
}
.pie p { max-width: 72ch; margin: 0; }

/* ── apariciones (las pone el JS; sin JS no existen) ── */
.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(--crudo-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(--pelaje);
}
.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: 66% 40%;
  -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(243,239,231,.66) 46%, rgba(243,239,231,.22) 68%, rgba(243,239,231,.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(243,239,231,0) 0%, rgba(243,239,231,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#peso { position: relative; isolation: isolate; overflow: hidden; }
.aura { position: absolute; z-index: -1; inset: 0; 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(243,239,231,.72) 0%,
              rgba(243,239,231,.84) 45%, rgba(243,239,231,.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(--pelaje);
}
.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; }
}