/* ══════════════════════════════════════════════════════════════════
   ¡QUE MONADA! · Pitrufquen
   Demo 168. Identidad: «POMPAS DE JABON».

   EL NOMBRE SE ESCRIBE CON SUS SIGNOS: «¡Que Monada!», con apertura
   y cierre. Va asi en el <title>, en la cabecera y en el pie.

   LA DIRECCION EN UNA FRASE
   Una peluqueria canina con veterinaria al lado es, para el dueno,
   un viaje que rinde el doble. La pagina se ve como el agua de esa
   tina: crudo, celeste jabonoso y pompas — pero el contenido es
   logistica de pueblo, no ternura.

   LA PALETA
   --crudo    #F6F3EC  fondo
   --agua     #22637A  CELESTE JABONOSO para TEXTO (5,9:1 sobre crudo)
   --agua-obj #3E92AE  el mismo celeste para OBJETOS DIBUJADOS (la
                       tina, las pompas). NO SE USA EN TEXTO: sobre
                       crudo da 3,1:1. Leccion de la 154: el color de
                       texto y el color de objeto son dos variables
                       distintas y hay que declararlas por separado.
   --hondo    #123844  agua profunda: el fondo de la seccion oscura
   --espuma   #DCEEF3  texto sobre hondo (10,1:1)
   --tinta    #17242A  texto sobre crudo

   DESLINDE DE CELESTES DEL REGISTRO:
     · la bata de la 110 es UNIFORME (tela plana de clinica)
     · la manta de la 161 es TEXTIL de noche (opaca, abrigada)
     · el gel de la 173 sera una RAYA de pasta (viscosa)
   Este es AGUA JABONOSA: translucido, con espuma y con brillo. Por
   eso es el unico que aparece en forma de circulos y burbujas.

   EL TORNASOL DE LAS POMPAS — deslinde con el mejillon de la 141:
   aquel es NACAR, tornasol organico de concha, y va sobre una
   superficie dura. El de aca es de POMPA: aire y jabon, un anillo
   `conic-gradient` MUY suave en el borde y nada en el centro, porque
   una pompa es transparente por dentro.

   EL TRIO
   · display · Rammetto One — redonda y gordita, es letra de burbuja
     sin caer en infantil. Primera vez en el registro.
   · cuerpo  · Golos Text — humanista, redondeada, aguanta bien al
     lado de una display tan pesada.
   · dato    · Sono (variable) — REPETICION CONSCIENTE, no descuido:
     a la altura de la demo 168 el catalogo de monos de Google esta
     agotado (la columna de identidades.md lleva 40 nombres). Se
     elige la repeticion que MENOS se nota y que mejor calza: Sono es
     la unica mono de esquinas blandas del catalogo y esta pagina es
     toda curvas. Anotado en el registro.

   LA CABECERA (134ª del oficio) — LA POMPA DOBLE
   Dos circulos pegados, uno grande y uno chico, y el brillito de luz
   (un arco fino) en el grande. Sin el arco parecen dos puntos; con el
   arco son jabon.

   EL FONDO — POMPAS QUE FLOTAN Y UNA REVIENTA
   Tres pompas suben lentas derivando de lado, y arriba UNA revienta:
   desaparece dejando un anillo que se expande un instante.
   DESLINDE con la 91 (el schop): alli las burbujas eran CHICAS,
   MUCHAS y CONTINUAS, subiendo en columna dentro del vaso — gas
   disuelto. Estas son GRANDES, POCAS y SUELTAS, derivan de lado
   porque no van dentro de nada, y una revienta: el gas no revienta,
   el jabon si.
   Reduced-motion: pompas quietas y ninguna revienta.

   LA ESTRUCTURA — G (split sticky)
   Izquierda fija: LA TINA (objeto CSS, escalon 1 de profundidad-web:
   si se puede dibujar, se dibuja). Derecha: el combo baño+control.
   DESLINDE con los G del registro: aca el lado fijo es un objeto CON
   AGUA ADENTRO — la espuma se mueve sola mientras el texto pasa al
   lado.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crudo:    #F6F3EC;
  --crudo-2:  #ECE7DC;
  --agua:     #22637A;
  --agua-obj: #3E92AE;
  --hondo:    #123844;
  --espuma:   #DCEEF3;
  --tinta:    #17242A;
  --gris:     #5E6A70;
  --linea:    #D8D2C6;

  --display: 'Rammetto One', system-ui, sans-serif;
  --cuerpo:  'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Sono', 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.66;
  overflow-x: hidden;
}

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

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

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

/* LA POMPA DOBLE — la cabecera 134ª. */
.pompa-doble { position: relative; display: block; width: 30px; height: 24px; flex: none; }
.pd { position: absolute; border-radius: 50%; border: 2px solid var(--agua-obj); }
.pd--g { left: 0; top: 2px; width: 20px; height: 20px; }
/* el brillito: un arco fino arriba a la izquierda. Sin esto son dos
   puntos; con esto son jabon. */
.pd--g::after {
  content: ''; position: absolute; left: 3px; top: 2px;
  width: 8px; height: 8px;
  border: 2px solid var(--crudo);
  border-radius: 50%;
  border-right-color: transparent; border-bottom-color: transparent;
  transform: rotate(-20deg);
}
.pd--c { right: 0; top: 0; width: 11px; height: 11px; }

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

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

@media (max-width: 820px) {
  .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; }

/* LAS POMPAS */
.pompas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pompa, .revienta {
  position: absolute; border-radius: 50%;
  border: 2px solid rgba(62,146,174,.42);
  /* el tornasol: un anillo conico MUY suave y el centro vacio, porque
     una pompa es transparente por dentro. */
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.85) 0 6%, rgba(255,255,255,0) 26%),
    conic-gradient(from 210deg,
      rgba(255,214,236,.30), rgba(214,240,255,.30), rgba(226,255,232,.30),
      rgba(255,246,206,.30), rgba(255,214,236,.30));
  -webkit-mask-image: radial-gradient(circle, transparent 54%, #000 62%);
          mask-image: radial-gradient(circle, transparent 54%, #000 62%);
}
/* el brillito NO puede ir enmascarado, asi que va aparte */
.pompa::after {
  content: ''; position: absolute; left: 22%; top: 18%;
  width: 22%; height: 22%; border-radius: 50%;
  background: rgba(255,255,255,.9);
}
.pompa--1 { width: 96px; height: 96px; left: 8%;  bottom: -140px; }
.pompa--2 { width: 58px; height: 58px; left: 62%; bottom: -120px; }
.pompa--3 { width: 132px; height: 132px; left: 82%; bottom: -180px; }

.js .pompa--1 { animation: flotar 26s linear infinite; }
.js .pompa--2 { animation: flotar 34s linear infinite 6s; }
.js .pompa--3 { animation: flotar 30s linear infinite 12s; }

/* suben y DERIVAN de lado: una pompa no sube recta. */
@keyframes flotar {
  from { transform: translate(0, 0); }
  35%  { transform: translate(26px, -38svh); }
  70%  { transform: translate(-18px, -74svh); }
  to   { transform: translate(14px, -118svh); }
}

/* LA QUE REVIENTA: arriba, un anillo que se expande y se va. El resto
   del ciclo esta invisible. */
.revienta {
  width: 70px; height: 70px; left: 38%; top: 14%;
  opacity: 0;
}
.js .revienta { animation: reventar 18s ease-out infinite 9s; }
@keyframes reventar {
  0%       { opacity: 1; transform: scale(1); }
  22%      { opacity: 1; transform: scale(1.04); }
  26%      { opacity: .9; transform: scale(1.5); }
  30%, 100%{ opacity: 0; transform: scale(1.9); }
}

@media (prefers-reduced-motion: reduce) {
  .js .pompa--1, .js .pompa--2, .js .pompa--3 { animation: none; }
  .pompa--1 { bottom: 22%; } .pompa--2 { bottom: 46%; } .pompa--3 { bottom: 8%; }
  .revienta { display: none; }
}

.sitio {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.7rem, 9vw, 6.4rem);
  line-height: .98; letter-spacing: -.01em;
  color: var(--agua); margin-bottom: 1.5rem;
}
.bajada { max-width: 46ch; margin-bottom: 2rem; }

.specs { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin: 0; }
.spec dt {
  font-family: var(--dato); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.45rem; }
.dd--tel a { text-decoration: none; color: var(--agua); border-bottom: 2px solid var(--agua); }

/* ══════ LA PIEZA FIRMA — SPLIT STICKY (G) ══════ */
.combo {
  display: grid;
  grid-template-columns: minmax(0, 20rem) 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: 900px) {
  .combo { grid-template-columns: 1fr; }
}

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

/* LA TINA — dibujada, cero bytes de imagen (escalon 1). */
.tina { position: relative; width: 100%; max-width: 17rem; height: 12rem; margin-bottom: 1.2rem; }
.tina__cuerpo {
  position: absolute; left: 0; right: 0; top: 3.2rem; height: 7rem;
  background: var(--agua-obj);
  border-radius: .8rem .8rem 3rem 3rem;
  box-shadow: inset 0 -1.2rem 0 rgba(0,0,0,.10);
}
.tina__espuma { position: absolute; left: .4rem; right: .4rem; top: 1.6rem; height: 3rem; }
.tina__espuma i {
  position: absolute; bottom: 0;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: inset -2px -3px 0 rgba(62,146,174,.18);
}
.tina__espuma i:nth-child(1) { left: 0;    width: 4.2rem; height: 3rem; }
.tina__espuma i:nth-child(2) { left: 3rem; width: 5.4rem; height: 3.8rem; }
.tina__espuma i:nth-child(3) { left: 7.4rem;width: 4rem;  height: 2.6rem; }
.tina__espuma i:nth-child(4) { right: 1rem; width: 4.6rem; height: 3.2rem; }
.tina__espuma i:nth-child(5) { right: 0;   width: 3rem;  height: 2.2rem; }
/* la espuma respira: es lo unico que se mueve del lado fijo. */
.js .tina__espuma i { animation: respirar 7s ease-in-out infinite; }
.js .tina__espuma i:nth-child(2) { animation-delay: 1.1s; }
.js .tina__espuma i:nth-child(3) { animation-delay: 2.3s; }
.js .tina__espuma i:nth-child(4) { animation-delay: .6s; }
.js .tina__espuma i:nth-child(5) { animation-delay: 3s; }
@keyframes respirar {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .js .tina__espuma i { animation: none; }
}
.tina__pata {
  position: absolute; top: 9.8rem; width: .7rem; height: 1.6rem;
  background: var(--agua-obj); border-radius: 0 0 .3rem .3rem;
}
.tina__pata--i { left: 2.2rem; }
.tina__pata--d { right: 2.2rem; }
.tina__pie { font-family: var(--dato); font-size: .78rem; color: var(--gris); margin: 0; }

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

.combo h2, .agua h2 {
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1;
  color: var(--agua); margin-bottom: 1rem;
}
.agua h2 { color: var(--espuma); }
.entrada { max-width: 54ch; }
.agua .entrada { color: var(--espuma); }

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

/* los cuatro pasos del viaje */
.viaje { list-style: none; margin: 2rem 0 0; padding: 0; }
.v { padding: 1.4rem 0; border-top: 1px solid var(--linea); }
.v__rot {
  font-family: var(--dato); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .25rem;
}
.v h3 { font-size: 1.35rem; color: var(--tinta); margin-bottom: .45rem; }
.v p { max-width: 60ch; margin-bottom: 0; }

/* «falta»: la pagina es mayormente CLARA, asi que el tono oscuro es
   el que va por defecto y el claro es la excepcion declarada. */
.falta {
  display: inline-block; margin-top: .45rem;
  font-family: var(--dato); font-size: .72rem;
  color: var(--gris); border-bottom: 1px dashed var(--gris);
}
.agua .falta { color: var(--espuma); border-bottom-color: var(--espuma); }

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

/* ══════ EL BAÑO SIN DRAMA ══════ */
.agua {
  background: var(--hondo); color: var(--espuma);
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
}
.agua__cabecera { max-width: 54rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }

.cartas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.carta {
  background: #1A4757;
  border: 1px solid #2C6273;
  border-radius: 1.2rem;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
}
.carta h3 { font-size: 1.2rem; color: var(--espuma); margin-bottom: .5rem; }
.carta p { font-size: .96rem; margin-bottom: 0; color: var(--espuma); }

.descargo {
  max-width: 62ch; margin: 2rem 0 0; font-size: .85rem; color: var(--espuma);
}

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

/* ══════ PARA LA CLINICA ══════ */
.dueno {
  background: var(--hondo); color: var(--espuma);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); margin-bottom: 2rem; color: var(--espuma); }
.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: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--espuma); margin-bottom: .5rem;
}
.dueno p { color: var(--espuma); font-size: .95rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid #35707F; padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--espuma); }

/* ══════ PIE ══════ */
.pie {
  background: #0C262E; color: #9DB4BC;
  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(--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(--agua);
}
.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% 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(246,243,236,.66) 46%, rgba(246,243,236,.22) 68%, rgba(246,243,236,.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(246,243,236,0) 0%, rgba(246,243,236,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#combo { 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(246,243,236,.72) 0%,
              rgba(246,243,236,.84) 45%, rgba(246,243,236,.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(--agua);
}
.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; }
}