/* ══════════════════════════════════════════════════════════════════
   CLINICA VETERINARIA HAPPY PET · Valdivia (hospital)
   Demo 161. Identidad: «MANTA DE VELADOR».

   ─────────────────────────────────────────────────────────────────
   LA DEMO MAS DELICADA DE LA TANDA
   Habla de un animal internado pasando la noche. TODOS los campos de
   la seccion principal estan VACIOS a proposito: no se sabe si hay
   turno de noche, ni cada cuanto se revisa, ni cuando se llama al
   dueño. En una hospitalizacion, una suposicion publicada es una
   promesa que alguien va a cobrar en el peor momento de su vida.
   El tono es SOBRIO: sin adjetivos tranquilizadores, sin «su mascota
   en las mejores manos», sin nada que suene a folleto.
   ─────────────────────────────────────────────────────────────────

   LA PALETA
   --penumbra #2B333D  azul-gris de sala con la luz baja
   --manta    #9FC3D9  celeste de tela polar (6,9:1 sobre penumbra)
   --blanco   #F7F5F1  blanco CALIDO

   DESLINDE DE CELESTES — la bata de la 110 es uniforme de trabajo
   (tela tecnica, plana); la pasta de la 173 es una raya de gel
   (brillante, sintetica). Este es TEXTIL DE ABRIGO: suave, mate, y
   aparece en bloques con esquinas MUY redondeadas — la unica
   concesion redonda de toda la pagina, porque es literalmente una
   manta.
   DE LAS NOCTURNAS DE LA TANDA — la 154 es vapor de tinaja, la 157 es
   urgencia con rojo, la 169 es luna. Esta es la noche EN CALMA
   CUIDADA: ni fiesta, ni emergencia, ni paisaje.

   EL TRIO
   · display · Andika — diseñada para alfabetizacion: es la letra mas
     legible que existe en el catalogo. Se eligio por eso y no por
     estilo — alguien leyendo esta pagina a las once de la noche,
     preocupado, no deberia tener que esforzarse.
   · cuerpo  · Wix Madefor Text — neutra.
   · dato    · Oxygen Mono — para la columna de horas.

   LA CABECERA (127ª del oficio) — LA LUZ PILOTO
   El circulito encendido en su placa: la lucecita que queda prendida
   de noche en una sala vacia. DESLINDE con la ventana de la 149:
   aquella es una luz de HOGAR, grande y calida, que dice «hay alguien
   esperando». Esta es un PUNTO de vigilia — mucho mas chico y mucho
   mas frio.

   EL FONDO — LA RESPIRACION DORMIDA
   UNA sola onda ancha y baja que sube y baja lentisimo: el lomo de un
   animal que respira tranquilo.
   DESLINDE: la linea de electro de la 110 era clinica, con picos y
   ritmo de monitor; el circulo de la 119 respira EN TAMAÑO como guia
   para el paciente. Esta no mide nada ni guia a nadie: es la calma
   hecha linea, y por eso es una curva organica y no una señal.
   Reduced-motion: onda quieta.

   LA ESTRUCTURA — G (split sticky)
   DESLINDE con los G del registro: el lado fijo no es texto, ni una
   imagen, ni un objeto — es una COLUMNA DE HORAS. El tiempo como
   ancla, que es exactamente lo que se vuelve interminable cuando uno
   deja a un animal internado.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --penumbra:   #2B333D;
  --penumbra-2: #353E4A;
  --penumbra-3: #424C5A;
  --blanco:     #F7F5F1;
  --blanco-2:   #EAE7E1;
  --manta:      #9FC3D9;   /* 6,9:1 sobre penumbra */
  --manta-2:    #C3DAE8;
  --manta-osc:  #2E6D8E;   /* 5,4:1 sobre blanco */
  --tinta:      #232830;
  --tinta-2:    #575E68;   /* 6,3:1 sobre blanco */
  --claro-2:    #B6BEC9;   /* 8,3:1 sobre penumbra */
  --linea:      #DDD9D2;
  --linea-osc:  #3E4753;

  --display: 'Andika', system-ui, sans-serif;
  --cuerpo:  'Wix Madefor Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Oxygen 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(--blanco);
  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: 700; margin: 0; }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

::selection { background: var(--manta-osc); color: var(--blanco); }
a { color: var(--manta-osc); }
:focus-visible { outline: 2px solid var(--manta-osc); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--penumbra);
  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(--blanco); }
.propuesta__que b { font-weight: 700; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 68ch; }

/* ─────────── 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(--blanco);
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(247, 245, 241, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }

/* ── LA LUZ PILOTO — el punto encendido en su placa ── */
.piloto {
  position: relative;
  width: 20px; height: 20px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--penumbra-2);
  box-shadow: inset 0 0 0 1px rgba(35, 40, 48, .5);
}
.piloto::after {
  content: ''; position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--manta-2);
  box-shadow: 0 0 8px 2px rgba(159, 195, 217, .55);
}

.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: .06em;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a:hover { color: var(--manta-osc); border-bottom-color: var(--manta-osc); }
@media (max-width: 52rem) { .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, .98rem);
  color: var(--manta-osc);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ ESTRUCTURA G ═══════════ */
.split { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); }
@media (max-width: 60rem) { .split { grid-template-columns: 1fr; } }

/* ── LADO FIJO: el reloj de la noche ── */
.reloj {
  position: sticky; top: 0;
  align-self: start;
  height: 100svh;
  display: flex; align-items: center;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 3vw, 2.6rem);
  background: var(--penumbra);
  color: var(--blanco);
  overflow: hidden;
}
@media (max-width: 60rem) { .reloj { position: static; height: auto; min-height: 88svh; } }
.reloj__caja { position: relative; z-index: 2; width: 100%; }

/* ── LA RESPIRACION DORMIDA ── */
.respira {
  position: absolute;
  left: -18%; right: -18%; bottom: -14%;
  height: 46%;
  z-index: 1; pointer-events: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(0deg,
    rgba(159, 195, 217, .13),
    rgba(159, 195, 217, .04) 58%,
    rgba(159, 195, 217, 0));
  transform-origin: 50% 100%;
}
.js .respira { animation: duerme 9s ease-in-out infinite; }
/* Muy poco recorrido y muy lento: es una respiracion tranquila, no un
   jadeo. Si se nota que se mueve, esta mal calibrada. */
@keyframes duerme {
  0%, 100% { transform: scaleY(1);    }
  50%      { transform: scaleY(1.07); }
}

.sitio {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--manta);
  margin-bottom: 1.1rem;
}
.reloj h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.12;
  margin-bottom: 1rem;
}
.reloj__bajada {
  font-size: .98rem;
  color: var(--claro-2);
  margin-bottom: 1.8rem;
}

/* La columna de horas: el ancla de toda la pagina. */
.horas { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.horas li { border-top: 1px solid var(--linea-osc); }
.horas li:last-child { border-bottom: 1px solid var(--linea-osc); }
.horas a {
  display: block;
  padding: .75rem 0;
  font-family: var(--dato);
  font-size: 1.32rem;
  letter-spacing: .04em;
  color: var(--blanco);
  text-decoration: none;
}
.horas a:hover { color: var(--manta); }

.reloj__nota { font-size: .84rem; color: var(--claro-2); margin: 0; }

/* ── LADO QUE FLUYE ── */
.flujo { background: var(--blanco); }
.noche, .alta, .cierre {
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

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

.noche h2, .alta h2 {
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.04rem;
  color: var(--tinta-2);
  max-width: min(100%, 36rem);
  margin-bottom: 1.6rem;
}

/* La manta: el unico bloque con esquinas muy redondeadas de toda la
   pagina. Es literalmente una manta. */
.aviso-fuerte {
  background: var(--manta-2);
  border-radius: 18px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 2rem;
  max-width: min(100%, 44rem);
}
.aviso-fuerte p { margin: 0; font-size: .97rem; color: #1F3A4A; }
.aviso-fuerte b { color: #12252F; }

.falta {
  font-family: var(--dato);
  font-size: .88em;
  color: var(--manta-osc);
  border-bottom: 1px dashed var(--manta-osc);
}
.reloj .falta, .alta .falta { color: var(--manta); border-bottom-color: var(--manta); }

/* ── los tramos de la noche ── */
.tramos { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.tramo {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .5rem 1.4rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--linea);
  scroll-margin-top: 5rem;
}
.tramo:last-child { border-bottom: 1px solid var(--linea); }
.tramo__h {
  font-family: var(--dato);
  font-size: 1.05rem;
  color: var(--manta-osc);
  margin: 0;
  padding-top: .2rem;
}
.tramo__cuerpo { max-width: min(100%, 42rem); }
.tramo__cuerpo h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.tramo__cuerpo p { color: var(--tinta-2); font-size: .97rem; }
@media (max-width: 34rem) { .tramo { grid-template-columns: 1fr; } }

.campos { margin: 1rem 0 0; }
.campos > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
  gap: .2rem 1.2rem;
  padding: .55rem 0;
  border-top: 1px solid var(--linea);
}
.campos dt { font-family: var(--dato); font-size: .78rem; color: var(--tinta-2); }
.campos dd { margin: 0; text-align: right; }
@media (max-width: 40rem) {
  .campos > div { grid-template-columns: 1fr; }
  .campos dd { text-align: left; }
}

.firma {
  font-size: .96rem;
  color: var(--tinta-2);
  border-top: 1px solid var(--linea);
  padding-top: 1.1rem;
  margin: 0;
  max-width: min(100%, 42rem);
}

/* ── el alta ── */
.alta {
  background: var(--penumbra);
  color: var(--blanco);
}
.alta .entrada { color: var(--claro-2); }

.huecos { margin: 0; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 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: .78rem;
  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: 42rem) { .hueco { grid-template-columns: 1fr; } }

/* ── el cierre — T1 ── */
.cierre { background: var(--blanco-2); text-align: center; }
.cierre__rot {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .14em;
  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.3rem, 5vw, 2.6rem);
  line-height: 1.1;
  color: var(--manta-osc);
  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(--blanco-2);
  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.7rem, 4vw, 2.5rem); 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(--manta-osc);
  font-weight: 400;
  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: 700;
  color: var(--manta-osc);
  text-decoration: none;
  border-bottom: 1px solid var(--manta-osc);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--penumbra);
  color: var(--claro-2);
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .85rem;
}
.pie p { margin: 0 0 .8rem; max-width: 74ch; }
.pie b { color: var(--blanco); }
.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) {
  /* La onda queda QUIETA y visible: una curva suave detenida sigue
     siendo un lomo. */
  .js .respira { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LAS IMÁGENES DE RUBRO — cinco tratamientos
   ══════════════════════════════════════════════════════════════════
   Esta demo no tiene portada sino un panel fijo —el reloj de la
   noche—, así que el primer tratamiento va adentro de él: la foto se
   disuelve hacia arriba, donde está el titular, y queda entera abajo.
   El resto sigue el estándar: aura de color, media pantalla, cita a
   sangre y tira de tres.

   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 es el efecto entero.

   Procedencia de cada archivo: imagenes/FUENTES.txt
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · EL PANEL DE LA NOCHE ── */
.reloj--foto { position: sticky; overflow: hidden; }
.reloj__foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.reloj__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 54% 46%;
  /* El panel es alto y angosto: acá el gradiente va en vertical. Arriba,
     donde está el titular, la imagen no existe; abajo se ve entera. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 34%,
              rgba(0,0,0,.22) 50%, rgba(0,0,0,.70) 68%, #000 84%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 34%,
              rgba(0,0,0,.22) 50%, rgba(0,0,0,.70) 68%, #000 84%, #000 100%);
}
.reloj__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--penumbra) 0%, var(--penumbra) 36%,
              rgba(43,51,61,.72) 54%, rgba(43,51,61,.36) 76%, rgba(43,51,61,.18) 100%);
}
.reloj__caja { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reloj__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.4%, -1.8%, 0); }
}
.js .reloj--foto .reloj__foto { opacity: 0; }
.js .reloj--foto.ok .reloj__foto { opacity: 1; transition: opacity 1.1s ease; }

/* ── 2 · AURA DE COLOR ── */
.noche { 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;
  filter: blur(64px) saturate(1.4);
  opacity: .30;
  transform: scale(1.25);
  /* Se apaga EN LA IMAGEN: un ::after que pinta el fondo apaga sólo
     dentro del div y deja un corte recto a media sección. */
  -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(--blanco-2);
  /* overflow hidden porque las entradas son laterales y, mientras
     animan, se salen unos píxeles y aparece scroll horizontal. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: 56svh; overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 44%; }
.mitades__texto {
  padding: clamp(2.2rem, 5vw, 4rem) clamp(1.3rem, 3.5vw, 3rem);
  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(--tinta-2); margin: 0 0 .9rem;
}
.mitades h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); 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: 40svh; }
}

/* ── 4 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: 64svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 4vw, 3rem);
  background: var(--penumbra); 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% 34%; }
/* Velo parejo y fuerte: el texto va centrado y grande, encima de la foto
   entera. Con imagen blanca detrás y el velo en .80 sobre penumbra, el
   peor caso da 6,2:1 — pasa AA con holgura. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,51,61,.66) 0%,
              rgba(43,51,61,.82) 45%, rgba(43,51,61,.90) 100%);
}
.cita__texto { margin: 0; max-width: 40rem; text-align: center; color: var(--blanco); }
.cita__texto p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.16;
  margin: 0; color: var(--blanco);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--manta);
}
.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(--penumbra-2); }
.tira__pieza { margin: 0; overflow: hidden; height: 30svh; min-height: 200px; }
.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: 26svh; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reloj--foto .reloj__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(--blanco-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(--blanco-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(--tinta-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(--blanco-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; }
}

/* ── SIN BOTON DE WHATSAPP, A PROPOSITO ─────────────────────────────
   Happy Pet solo publica un fijo: (63) 229 8388. WhatsApp no funciona
   en numeros fijos, asi que un boton flotante abriria la aplicacion y
   no encontraria la cuenta. Peor que no tenerlo. Cuando la clinica
   confirme un movil, se pone con demos\poner-wapp.ps1 y listo. */
/* ── MAPA DE UBICACIÓN ──────────────────────────────────────────────
   En esta demo el mapa es la pieza más útil de todas: alguien que llama
   a las once de la noche por un animal internado necesita saber dónde
   queda, no leer un adjetivo. Por eso va pegado al teléfono.
   Imagen propia con mosaicos de OpenStreetMap: la CSP prohíbe pedir
   nada a un tercero y un iframe de Google Maps quedaría en blanco sin
   dar un solo error. La atribución a OSM la exige su licencia. */
.mapa {
  max-width: 640px; margin: 1.8rem auto 0;
  border: 1px solid var(--linea-osc); border-radius: 18px; overflow: hidden;
}
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .8rem 1rem;
  font-size: var(--p--1); line-height: 1.5; text-align: left;
  color: var(--manta); background: var(--penumbra);
  border-top: 1px solid var(--linea-osc);
}
.mapa__pie b { color: var(--blanco); }
.mapa__ir { color: var(--blanco); font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__cred { font-size: .82em; opacity: .85; }
.mapa__cred a { color: var(--manta); }