/* ══════════════════════════════════════════════════════════════════
   CLINICA VETERINARIA EL BOSQUE · Valdivia
   Demo 164. Identidad: «GRIS GATO Y AMBAR DE OJO».

   ─────────────────────────────────────────────────────────────────
   MECANICA DE ACENTO NUEVA — EL AMBAR VA SIEMPRE DE A PARES
   Dos puntos = dos ojos. Los bullets de las listas van de a dos, los
   focos van de a dos, los ojos del fondo parpadean de a dos. Nunca
   hay un punto ambar solo en toda la pagina: un ojo suelto no es un
   gato, es un error.
   Es la segunda mecanica de acento del registro: la 129 hizo
   acento-al-tocar; esta hace acento-en-pares.
   ─────────────────────────────────────────────────────────────────

   LA PALETA
   --gato   #6E7784  gris azulado de pelaje
   --crudo  #F4F3F0
   --ambar  #E8A22E  ojo de gato (sobre oscuro)
   --ambar-o #8A5A05  el mismo para texto sobre crudo (5,5:1)

   DESLINDE DE AMBARES — el de la 132 es aceite FLUIDO (translucido,
   se derrama); el de la 142 es fritura CROCANTE (opaco, con textura);
   el oro de makma es joya. Este es VIDRIOSO y tiene PUPILA: los
   puntos ambar de esta pagina llevan un punto oscuro adentro, hecho
   con un radial-gradient. Sin la pupila serian luces; con la pupila
   son ojos.

   EL TRIO
   · display · Farro — humanista limpia, nueva en el registro.
   · cuerpo  · Jost — geometrica, se aparta.
   · dato    · Syne Mono — rotulos y escenas.

   LA CABECERA (130ª del oficio) — LOS OJOS EN LA CAJA
   El rectangulo de la caja entreabierta con DOS puntos ambar adentro.
   Es el humor sobrio del registro en su mejor forma: no hay un gato
   dibujado, hay una caja y dos ojos mirando.

   EL FONDO — LOS OJOS QUE PARPADEAN
   En la franja oscura de la portada, un par de puntos ambar parpadea
   —los dos a la vez, obviamente— y despues reaparece EN OTRO LUGAR.
   El gato escondido que nos mira desde otro rincon.
   DESLINDE: las luces del panal de la 124 encienden DE A UNA en una
   trama fija; las luciernagas de la 150 DERIVAN por el aire. Estos
   parpadean en PAR y CAMBIAN de escondite — no se mueven: desaparecen
   y aparecen en otra parte, que es lo que hace un gato.
   Reduced-motion: un par fijo, sin parpadeo.

   LA ESTRUCTURA — E (laminas apiladas)
   DESLINDE con 94/98/103/122/149/186: la 122 fue secuencia de CARGA
   (trabajo) y la 149 de LLEGADA (hospitalidad). Esta es secuencia de
   MANIOBRA CON UN ANIMAL, y es la primera del registro con humor.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --gato:      #6E7784;
  --gato-osc:  #2E343C;
  --gato-2:    #3A424C;
  --gato-3:    #474F5A;
  --crudo:     #F4F3F0;
  --crudo-2:   #E8E7E2;
  --ambar:     #E8A22E;
  --ambar-o:   #8A5A05;   /* 5,5:1 sobre crudo */
  --tinta:     #23262B;
  --tinta-2:   #565C64;   /* 6,2:1 sobre crudo */
  --claro-2:   #BCC2CA;   /* 8,6:1 sobre gato-osc */
  --linea:     #DEDCD6;
  --linea-osc: #414954;

  --display: 'Farro', system-ui, sans-serif;
  --cuerpo:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Syne Mono', ui-monospace, 'Consolas', monospace;

  /* EL OJO: ambar con pupila. Sin el punto oscuro adentro seria una
     luz; con el, es un ojo. */
  --ojo: radial-gradient(circle at 50% 50%,
    #1E2126 0 1.1px, #E8A22E 1.1px 100%);
}

*, *::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.68;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

::selection { background: var(--ambar-o); color: var(--crudo); }
a { color: var(--ambar-o); }
:focus-visible { outline: 2px solid var(--ambar-o); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--gato-osc);
  color: var(--claro-2);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
}
.propuesta p { margin: 0; }
.propuesta__que { color: var(--crudo); }
.propuesta__que b { font-weight: 600; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 66ch; }

/* ─────────── cabecera fantasma ─────────── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--crudo);
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(244, 243, 240, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.35rem; line-height: 1.1; }

/* ── LOS OJOS EN LA CAJA ── */
.caja {
  position: relative;
  width: 25px; height: 19px;
  flex: 0 0 auto;
  margin-top: 3px;
  background: var(--gato-osc);
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--gato-3);
}
.caja::before {   /* la tapa entreabierta */
  content: ''; position: absolute;
  left: -1px; right: -1px; top: -4px;
  height: 4px;
  background: var(--gato-3);
  border-radius: 1px;
  transform: rotate(-5deg);
  transform-origin: 0 50%;
}
.caja::after {    /* LOS DOS OJOS — nunca uno */
  content: ''; position: absolute;
  left: 6px; bottom: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ojo);
  box-shadow: 8px 0 0 0 var(--ambar);
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a:hover { color: var(--ambar-o); border-bottom-color: var(--ambar-o); }
@media (max-width: 58rem) { .cab__nav { display: none; } }

/* T1 — el telefono verificado */
.cab__tel {
  text-align: right; text-decoration: none; line-height: 1.15;
  padding-left: 1.1rem; border-left: 1px solid var(--linea);
  flex: 0 0 auto;
}
.cab__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.8rem, 2vw, .96rem);
  color: var(--ambar-o);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--gato-osc);
  color: var(--crudo);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 42rem); }

/* ── LOS OJOS QUE PARPADEAN ──
   Tres escondites. Cada par aparece en su turno, parpadea, y se va.
   Los dos ojos de un par SIEMPRE juntos: el segundo es un box-shadow
   del primero, asi no pueden desincronizarse ni por accidente. */
.escondite { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ojos {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ojo);
  box-shadow: 13px 0 0 0 var(--ambar);
  opacity: 0;
}
.ojos--1 { right: 12%; top: 26%; }
.ojos--2 { right: 30%; bottom: 18%; }
.ojos--3 { right:  6%; bottom: 38%; }

.js .ojos--1 { animation: mira 24s ease-in-out infinite; }
.js .ojos--2 { animation: mira 24s ease-in-out infinite 8s; }
.js .ojos--3 { animation: mira 24s ease-in-out infinite 16s; }

/* Aparece, parpadea dos veces, se va. Y el siguiente aparece en otro
   lado: el gato no se mueve, se esconde en otra parte. */
@keyframes mira {
  0%,  2%  { opacity: 0;   }
  6%       { opacity: .85; }
  12%      { opacity: .85; }
  13.5%    { opacity: 0;   }   /* parpadeo */
  15%      { opacity: .85; }
  22%      { opacity: .85; }
  23.5%    { opacity: 0;   }   /* parpadeo */
  25%      { opacity: .85; }
  30%      { opacity: .85; }
  34%,100% { opacity: 0;   }
}

.sitio {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ambar);
  margin-bottom: 1.2rem;
}
.portada h1 {
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: 1.06;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--claro-2);
  max-width: min(92vw, 35rem);
  margin-bottom: 2.2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: .25rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1; }
.dd--tel { font-family: var(--dato) !important; font-size: 1.05rem !important; }
.dd--tel a { color: var(--ambar); text-decoration: none; }
.dd--tel a:hover { text-decoration: underline; }

/* ═══════════ LAS ESCENAS (estructura E) ═══════════ */
.esc {
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crudo);
  border-top: 1px solid var(--linea);
}
.esc--2, .esc--4 { background: var(--crudo-2); }
.esc__cuerpo { max-width: min(100%, 46rem); }

.esc__n {
  font-family: var(--dato);
  font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ambar-o);
  margin-bottom: .6rem;
}
.esc h2, .amiga h2 {
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.06;
  margin-bottom: 1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--tinta-2);
  max-width: min(100%, 36rem);
  margin-bottom: 1.4rem;
}
.entrada em { font-style: italic; }

/* ── LOS BULLETS DE A DOS ──
   La mecanica de acento aplicada a las listas: cada item lleva DOS
   puntos ambar, no uno. Son ojos mirando cada linea. */
.pasos { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.pasos li {
  position: relative;
  padding: .55rem 0 .55rem 2.2rem;
  font-size: .99rem;
  color: var(--tinta-2);
}
.pasos li::before {
  content: ''; position: absolute;
  left: 0; top: 1.05rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ambar-o);
  box-shadow: 8px 0 0 0 var(--ambar-o);
}
.pasos b { color: var(--tinta); }

.esc__pq {
  font-size: .94rem;
  color: var(--tinta-2);
  border-left: 2px solid var(--ambar-o);
  padding-left: .9rem;
  margin: 0;
  max-width: min(100%, 42rem);
}

.falta {
  font-family: var(--dato);
  font-size: .9em;
  color: var(--ambar-o);
  border-bottom: 1px dashed var(--ambar-o);
}
.amiga .falta, .portada .falta { color: var(--ambar); border-bottom-color: var(--ambar); }

.ojo {
  background: var(--crudo-2);
  border-left: 3px solid var(--ambar-o);
  padding: 1.2rem 1.4rem;
  max-width: min(100%, 46rem);
  margin-top: 1.4rem;
}
.esc--2 .ojo, .esc--4 .ojo { background: var(--crudo); }
.ojo p { margin: 0; font-size: .96rem; color: var(--tinta-2); }
.ojo b { color: var(--tinta); }

/* ═══════════ LA CONSULTA AMIGA DEL GATO ═══════════ */
.amiga {
  background: var(--gato-osc);
  color: var(--crudo);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.amiga__cuerpo { max-width: min(100%, 46rem); }
.amiga .entrada { color: var(--claro-2); }

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

.huecos { margin: 0 0 1.6rem; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: .3rem 1.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linea-osc);
}
.hueco:last-child { border-bottom: 1px solid var(--linea-osc); }
.huecos dt {
  font-family: var(--dato);
  font-size: .76rem;
  color: var(--claro-2);
  align-self: start;
  padding-top: .2rem;
}
.huecos dd { margin: 0; }
.hueco__pq { display: block; font-size: .93rem; color: var(--claro-2); margin-top: .3rem; }
@media (max-width: 44rem) { .hueco { grid-template-columns: 1fr; } }

.firma {
  font-size: .96rem;
  color: var(--claro-2);
  margin: 0;
  max-width: min(100%, 44rem);
}
.firma em { font-style: italic; color: var(--crudo); }

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--crudo-2);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.5rem, 6.4vw, 3.4rem);
  line-height: 1.1;
  color: var(--ambar-o);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { text-decoration: underline; }
.cierre__pie { font-size: .95rem; color: var(--tinta-2); margin: 0; }

/* ═══════════ PARA LA CLÍNICA ═══════════ */
.dueno {
  background: var(--crudo);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.dueno h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 2rem; }
.dueno__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.dueno h3 {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ambar-o);
  margin-bottom: .5rem;
}
.dueno p { color: var(--tinta-2); font-size: .96rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 600;
  color: var(--ambar-o);
  text-decoration: none;
  border-bottom: 1px solid var(--ambar-o);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--gato-osc);
  color: var(--claro-2);
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .85rem;
}
.pie p { margin: 0 0 .8rem; max-width: 72ch; }
.pie b { color: var(--crudo); }
.pie__demo { font-size: .78rem; opacity: .85; margin: 0 !important; }

/* ═══════════ APARICIONES ═══════════ */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.ok { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (prefers-reduced-motion: reduce) {
  /* UN par fijo, sin parpadeo. Los otros dos se van: si quedaran los
     tres pares encendidos a la vez serian seis ojos, que ya no es un
     gato escondido — es otra cosa. */
  .js .ojos--1 { animation: none; opacity: .85; }
  .js .ojos--2, .js .ojos--3 { display: 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: 54% 46%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--crudo) 0%, var(--crudo) 30%,
              rgba(244,243,240,.66) 46%, rgba(244,243,240,.22) 68%, rgba(244,243,240,.06) 86%);
}
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: respira 46s ease-in-out infinite alternate; }
}
@keyframes respira {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.8%, -1.2%, 0); }
}
.js .portada--foto .portada__foto { opacity: 0; }
.js .portada--foto.ok .portada__foto { opacity: 1; transition: opacity 1.1s ease; }
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: none; }
@media (max-width: 860px) {
  .portada--foto { padding-top: 36svh; }
  .portada__foto img {
    object-position: 50% 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(244,243,240,0) 0%, rgba(244,243,240,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#e1 { 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);
}
/* --gato-2 y no --gato: el gris de la pagina esta calibrado contra el
   fondo principal, y sobre el panel de la media pantalla —que es mas
   oscuro— se queda en 3,66:1. */
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gato-2); margin: 0 0 .9rem;
}
.mitades h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08;
  margin: 0 0 1rem; color: var(--tinta);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--tinta); max-width: 34rem;
}
.js .mitades__texto.rev { opacity: 0; transform: translateX(1.6rem); }
.js .mitades__foto.rev  { opacity: 0; transform: scale(1.04); }
.js .mitades__texto.rev.ok,
.js .mitades__foto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 780px) {
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto { min-height: 44svh; }
}

/* ── 4 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: 70svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--crudo); overflow: hidden;
}
.cita__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* Velo parejo y fuerte: el texto va centrado y grande, encima de la foto
   entera. Calculado sobre el peor caso —imagen del color contrario
   detrás— para que el ratio aguante sin ensuciar la imagen. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,243,240,.72) 0%,
              rgba(244,243,240,.84) 45%, rgba(244,243,240,.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(--ambar-o);
}
.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(--crudo-2); }
.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; }
}

/* ── TAJO: LA FRANJA A SANGRE ──
   Una franja de foto entre dos secciones. No lleva texto encima, asi
   que no lleva velo: se ve la foto y punto. Es la aparicion que mas
   llena la pagina por el peso que cuesta. */
/* La clase es .tajo y no .banda ni .franja: hay demos que ya usan esos
   dos nombres para secciones propias, y chocaban. */
.tajo {
  position: relative; overflow: hidden;
  height: clamp(180px, 30svh, 340px);
  background: var(--crudo-2);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .tajo img { animation: deriva-tajo 54s ease-in-out infinite alternate; }
}
@keyframes deriva-tajo {
  from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, -1.4%, 0); }
}
.js .tajo { opacity: 0; }
.js .tajo.ok { opacity: 1; transition: opacity 1s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .tajo { opacity: 1; }
}

/* ── TELON: la foto detras de una seccion entera ──
   No es el aura. El aura va reventada a 64 px y se lee como mancha de
   color; el telon va NITIDO y bajo de opacidad, y se lee como foto.
   El texto encima se sostiene porque la foto esta al .15, no porque
   este sucia — que es la regla de siempre. */
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  opacity: .15;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .telon img { animation: deriva-telon 76s ease-in-out infinite alternate; }
}
@keyframes deriva-telon {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.6%, -1%, 0); }
}

/* ── MOSAICO ──
   Seis piezas en grilla. Es la unica parte de la pagina donde una
   imagen puede repetirse con otro recorte: a este tamano no se lee
   como repeticion sino como serie. */
/* El mosaico trae su propio fondo: sus colores salen del bloque de
   .mitades y hay demos donde ese fondo es el contrario al del body —
   el titulo quedaba a 1,00:1, invisible. Con fondo propio el contraste
   esta garantizado en todas. */
.mos {
  background: var(--crudo-2);
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.mos__titulo {
  max-width: 82rem; margin-left: auto; margin-right: auto;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.08;
  margin: 0 0 .5rem; color: var(--tinta);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--gato-2); font-size: .94rem; line-height: 1.6;
}
.mos__grilla {
  display: grid; gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 82rem; margin: 0 auto;
}
.mos__p { margin: 0; overflow: hidden; height: clamp(140px, 20svh, 220px); background: var(--crudo-2); }
.mos__p img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) {
  .mos__p:hover img { transform: scale(1.06); }
}
.js .mos__p { opacity: 0; transform: translateY(1.2rem); }
.js .mos__p.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .mos__p.ok:nth-child(2) { transition-delay: .06s; }
.js .mos__p.ok:nth-child(3) { transition-delay: .12s; }
.js .mos__p.ok:nth-child(4) { transition-delay: .18s; }
.js .mos__p.ok:nth-child(5) { transition-delay: .24s; }
.js .mos__p.ok:nth-child(6) { transition-delay: .30s; }
@media (max-width: 760px) {
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

/* ── MAPA DE UBICACION ──────────────────────────────────────────────
   Imagen propia con mosaicos de OpenStreetMap pegados: la CSP prohibe
   pedir nada a un tercero, asi que un iframe de Google Maps quedaria en
   blanco SIN dar un solo error. El "Como llegar" si es un enlace, y un
   enlace no lo bloquea nada.
   Los colores salen de currentColor a proposito: asi el bloque se adapta
   a la paleta de cada demo sin conocerla y sin chocar con ella.
   La atribucion a OpenStreetMap la exige su licencia (ODbL). */
.mapa-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.mapa { margin: 1.4rem 0 0; border: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; overflow: hidden; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa { border-color: rgba(128, 128, 128, .35); } }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .75rem .9rem;
  font-size: .86em; line-height: 1.45;
  border-top: 1px solid; border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa__pie { border-top-color: rgba(128, 128, 128, .35); } }
.mapa__pie b { font-weight: 700; }
.mapa__ir { color: inherit; font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__cred { width: 100%; font-size: .84em; opacity: .8; }
.mapa__cred a { color: inherit; }