/* ══════════════════════════════════════════════════════════════════
   VETERINARIA LACUSTRE · Villarrica (urgencias)
   Demo 157. Identidad: «MADRUGADA DE TURNO».

   ─────────────────────────────────────────────────────────────────
   REGLA DE SALUD, SIN EXCEPCION
   Ni un diagnostico, ni un medicamento, ni una cantidad. La lista de
   los primeros cinco minutos es GENERAL, esta escrita para los
   minutos en que el dueño ya va en camino, y lo que dice NO HACER
   pesa mas que lo que dice hacer. Va con aviso arriba, pendiente de
   firma profesional, y descargo completo en el pie.
   Y una regla propia de esta demo: el «24 horas» sale de su ficha
   publica y va MARCADO como pendiente de confirmar. No hay nada peor
   que prometer un turno que no existe a alguien que maneja de noche
   con un animal grave.
   ─────────────────────────────────────────────────────────────────

   LA PALETA
   --madrugada #101A2E  azul de las tres de la mañana
   --blanco    #EFF3F7  blanco frio
   --rojo      #E03A2F  letrero de turno — objetos y texto GRANDE
   --rojo-txt  #FF6B5E  el mismo para texto chico (6,2:1)

   EL ROJO VIVE SOLO EN LA URGENCIA. La palabra, el numero, la barra
   fija y el resplandor. Todo lo demas de la pagina es azul y blanco.
   DESLINDE de rojos: el de la 78 es cruz de botiquin (saturado,
   clinico, cuadrado); el segundero de la 176 es una aguja fina. Este
   es rojo DE LETRERO ENCENDIDO: profundo, y con halo.
   DESLINDE de las nocturnas de la tanda: la 154 es vapor de tinaja,
   la 161 es velador, la 169 es luna. Esta es la unica con rojo y la
   unica URGENTE.

   EL TRIO
   · display · Turret Road — angulosa y con peso, nueva en el
     registro. Para que el «24» aguante ser gigante.
   · cuerpo  · Public Sans — neutra, legible a las tres de la mañana.
   · dato    · JetBrains Mono — el telefono, que es el dato que
     importa.

   LA CABECERA (123ª del oficio) — EL AURICULAR
   El telefono descolgado, en curva. PRIMERA CABECERA-TELEFONO del
   registro: la 113 (la otra vet 24/7) uso timbre y linterna, no el
   aparato.

   EL FONDO — EL RESPLANDOR QUE LATE
   Un halo rojo tenue en el borde de arriba que late lentisimo: el
   letrero de turno respirando. DESLINDE: el circulo de la 119 respira
   EN TAMAÑO como guia de respiracion; las brasas de la 98 respiran en
   brillo calido. Este es un resplandor DE BORDE, rojo, casi
   subliminal — se nota que esta, no se mira.
   Reduced-motion: fijo y tenue.

   LA ESTRUCTURA — A (stats-hero) fundida con T1
   DESLINDE con 86/118/126/155: aca UNA DE LAS CIFRAS MARCA. El
   telefono no esta al lado de las estadisticas: ES una de ellas, con
   su tel: adentro. Es el unico caso del registro donde A y T1 son la
   misma cosa.

   EL CONTACTO — T1 + T2 JUNTAS
   Unico caso del registro. En movil la barra fija de URGENCIA esta
   siempre visible; en escritorio el telefono vive en la cabecera, en
   la portada y en el cierre. En una pagina de urgencia, redundar el
   numero no es exceso: es el trabajo.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --madrugada:   #101A2E;
  --madrugada-2: #17233C;
  --madrugada-3: #223252;
  --blanco:      #EFF3F7;
  --blanco-2:    #DFE6EE;
  --rojo:        #E03A2F;   /* objetos y texto >=24px */
  /* Blanco sobre el rojo de letrero da 4,36:1 — no alcanza. Las
     SUPERFICIES rojas con texto blanco encima usan este, que llega a
     5,1:1 y sigue siendo el mismo rojo de letrero. */
  --rojo-fondo:  #D22E24;
  --rojo-txt:    #FF6B5E;   /* 6,2:1 — texto chico */
  --rojo-osc:    #B32419;   /* 5,3:1 sobre blanco */
  --tinta:       #16202F;
  --tinta-2:     #4A5666;   /* 6,6:1 sobre blanco */
  --claro-2:     #A8B6C8;   /* 8,1:1 sobre madrugada */
  --linea:       #CBD5E0;
  --linea-osc:   #26344F;

  --display: 'Turret Road', system-ui, sans-serif;
  --cuerpo:  'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'JetBrains 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(--madrugada);
  color: var(--blanco);
  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; }
img { max-width: 100%; display: block; }

::selection { background: var(--rojo); color: #fff; }
a { color: var(--rojo-txt); }
:focus-visible { outline: 2px solid var(--rojo-txt); outline-offset: 3px; }

/* ═══ T2 — LA BARRA FIJA DE URGENCIA ═══
   Solo en movil. En escritorio el numero ya vive en tres sitios. */
.barra {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--rojo-fondo);
  color: #fff;
  text-decoration: none;
  padding: .7rem 1rem;
  text-align: center;
  box-shadow: 0 -8px 24px rgba(16, 26, 46, .5);
}
.barra__rot {
  display: block;
  font-family: var(--dato);
  font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .92;
}
.barra__num {
  display: block;
  font-family: var(--dato);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: .02em;
}
@media (max-width: 46rem) {
  .barra { display: block; }
  body { padding-bottom: 4.4rem; }
}

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

/* ─────────── 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(--madrugada);
  border-bottom: 1px solid var(--linea-osc);
  color: var(--blanco);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(16, 26, 46, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .7rem;
  min-height: 44px;                 /* objetivo tactil */
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: .01em;
  line-height: 1.1;
}

/* ── EL AURICULAR — el telefono descolgado ──
   ::before = el mango · ::after = las dos capsulas (una con
   box-shadow, para no gastar un tercer elemento) */
.auricular {
  position: relative;
  width: 20px; height: 22px;
  flex: 0 0 auto;
  color: var(--rojo-txt);
  transform: rotate(-32deg);
}
.auricular::before {
  content: ''; position: absolute;
  left: 50%; top: 5px; bottom: 5px; width: 6px;
  margin-left: -3px;
  border-radius: 3px;
  background: currentColor;
}
.auricular::after {
  content: ''; position: absolute;
  left: 50%; top: 0; width: 13px; height: 7px;
  margin-left: -6.5px;
  border-radius: 3.5px;
  background: currentColor;
  box-shadow: 0 15px 0 currentColor;
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  position: relative;
  font-family: var(--dato);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--claro-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
/* El ancla mide 21 px de alto y el minimo de la casa son 44. No se sube
   con min-height porque el filete del hover se despegaria del texto: se
   agranda el AREA de toque con un ::before invisible centrado. */
.cab__nav a::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.cab__nav a:hover { color: var(--rojo-txt); border-bottom-color: var(--rojo-txt); }
@media (max-width: 58rem) { .cab__nav { display: none; } }

/* T1 — en la cabecera */
.cab__tel {
  /* En una pagina de urgencia este es el enlace que mas importa: va con
     los 44 px de alto minimos, no con los 29 que daba el texto solo. */
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  min-height: 44px;
  text-align: right; text-decoration: none; line-height: 1.15;
  padding-left: 1.1rem; border-left: 1px solid var(--linea-osc);
  flex: 0 0 auto;
}
.cab__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .56rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rojo-txt);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.8rem, 2vw, 1rem);
  font-weight: 700;
  color: var(--blanco);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ PORTADA — stats-hero + T1 ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--madrugada);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 46rem); }

/* ── EL RESPLANDOR QUE LATE ── */
.resplandor {
  position: absolute;
  left: -20%; right: -20%; top: -30%;
  height: 78%;
  z-index: 1; pointer-events: none;
  /* El halo TIENE que llegar a alfa 0 antes del borde de su caja. Anclado
     en el borde de abajo (at 50% 100%) llegaba vivo hasta ahi y el corte
     dejaba una RAYA HORIZONTAL RECTA cruzando la portada entera, medida a
     los 400 px: es el mismo bug del aura recortada con ::after. Por eso el
     centro va arriba (30%) y el ultimo tramo muere en el 76% del radio,
     bien dentro de la caja. El borde de arriba lo tapa la cabecera. */
  background: radial-gradient(62% 74% at 50% 30%,
    rgba(224, 58, 47, .34) 0%, rgba(224, 58, 47, .16) 44%,
    rgba(224, 58, 47, 0) 76%);
}
.js .resplandor { animation: late 11s ease-in-out infinite; }
/* Lentisimo y casi subliminal: se nota que esta, no se mira. */
@keyframes late {
  0%, 100% { opacity: .62; }
  50%      { opacity: 1;   }
}

.sitio {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: 1.2rem;
}
.portada h1 {
  font-size: clamp(2.2rem, 6.6vw, 4.6rem);
  line-height: 1.04;
  margin-bottom: 2rem;
}

/* ── las cifras del turno ── */
.stats {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 1.6rem clamp(1.8rem, 5vw, 4rem);
  margin: 0 0 2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--linea-osc);
}
.stat dd {
  margin: 0;
  font-family: var(--display);
  font-size: 2.8rem;
  line-height: .9;
  color: var(--blanco);
}
.stat dt {
  font-family: var(--dato);
  font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--claro-2);
  margin-top: .6rem;
  max-width: 13rem;
  line-height: 1.7;
}
.stat--grande dd { font-size: clamp(4.5rem, 14vw, 9rem); color: var(--rojo); }
/* La tercera cifra MARCA: el telefono no esta al lado de las stats,
   es una de ellas. */
.stat--tel dd { font-family: var(--dato); font-size: clamp(1.4rem, 4.6vw, 2.4rem); }
.stat--tel a {
  display: inline-flex; align-items: center; min-height: 44px;  /* toque */
  color: var(--rojo-txt); text-decoration: none;
}
.stat--tel a:hover { text-decoration: underline; }

.bajada {
  font-size: clamp(1rem, 1.9vw, 1.14rem);
  color: var(--claro-2);
  max-width: min(92vw, 38rem);
  margin: 0;
}

/* ── EL POLVO EN EL RESPLANDOR — ambiente de portada ──
   Esta demo no lleva video: el clip se reserva para los negocios mejor
   valorados. El ambiente lo pone el CSS, no un mp4 de 1,8 MB.
   Catorce motas subiendo lentisimo dentro del halo rojo del letrero:
   es el polvo que se ve en un rayo de luz a las tres de la manana.
   Vive SOLO en el tercio izquierdo, que es la zona donde la mascara ya
   borro la foto: sobre la foto no se veria y encima la ensuciaria.
   Va sin depender de .js — es CSS puro y funciona sin JavaScript.
   Con prefers-reduced-motion se apaga entero (es lo intrusivo). */
.polvo {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.polvo span {
  position: absolute; bottom: -4%;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 208, 200, .6);
  opacity: 0;
  animation: mota 26s linear infinite;
}
@keyframes mota {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.6); }
  10%  { opacity: .55; }
  65%  { opacity: .3; }
  100% { opacity: 0;   transform: translate3d(2.4rem, -86vh, 0) scale(1.2); }
}
/* posiciones, tamanos y retardos por nth-child: la CSP prohibe style="" */
.polvo span:nth-child(1)  { left:  4%; animation-duration: 28s; animation-delay:   0s; }
.polvo span:nth-child(2)  { left:  9%; animation-duration: 34s; animation-delay:  -4s; width: 2px; height: 2px; }
.polvo span:nth-child(3)  { left: 14%; animation-duration: 24s; animation-delay:  -9s; }
.polvo span:nth-child(4)  { left: 19%; animation-duration: 31s; animation-delay: -14s; width: 4px; height: 4px; }
.polvo span:nth-child(5)  { left: 24%; animation-duration: 27s; animation-delay:  -2s; width: 2px; height: 2px; }
.polvo span:nth-child(6)  { left: 29%; animation-duration: 36s; animation-delay: -19s; }
.polvo span:nth-child(7)  { left: 34%; animation-duration: 25s; animation-delay:  -7s; width: 2px; height: 2px; }
.polvo span:nth-child(8)  { left: 39%; animation-duration: 33s; animation-delay: -24s; }
.polvo span:nth-child(9)  { left: 44%; animation-duration: 29s; animation-delay: -11s; width: 4px; height: 4px; }
.polvo span:nth-child(10) { left: 49%; animation-duration: 38s; animation-delay: -30s; width: 2px; height: 2px; }
.polvo span:nth-child(11) { left: 54%; animation-duration: 26s; animation-delay: -16s; }
.polvo span:nth-child(12) { left: 58%; animation-duration: 32s; animation-delay:  -5s; width: 2px; height: 2px; }
.polvo span:nth-child(13) { left: 62%; animation-duration: 30s; animation-delay: -21s; }
.polvo span:nth-child(14) { left: 12%; animation-duration: 40s; animation-delay: -27s; width: 2px; height: 2px; }
@media (prefers-reduced-motion: reduce) { .polvo { display: none; } }

/* ═══════════ LAS CUATRO CIFRAS ═══════════
   Prueba social · inventario de la propia pagina · argumento · herida.
   Solo cuenta la primera, que es la que costo verificar. */
.cifras {
  background: var(--madrugada-3);
  color: var(--blanco);
  padding: clamp(2.6rem, 7vh, 4.4rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea-osc);
}
.cifras__titulo {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.15;
  margin: 0 0 2rem;
  max-width: 30ch;
  color: var(--blanco);
}
.cifras__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 2rem clamp(1.6rem, 4vw, 3rem);
}
.cifras__lista b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.5vw, 4rem);
  line-height: .95;
  color: var(--blanco);
  font-variant-numeric: tabular-nums;
}
.cifras__lista span {
  display: block; margin-top: .7rem;
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--claro-2);      /* 6,2:1 sobre el #223252 de esta banda */
  line-height: 1.7;
  max-width: 15rem;
}
/* EL CERO HUECO — la herida dibujada como lo que es: un vacio.
   El trazo va en #EFF3F7 puro sobre #223252: 11,4:1. El auditor de
   contraste va a leer color:transparent y dar un falso 1,00:1; el
   numero de verdad es ese. Y si el navegador no tiene text-stroke,
   la regla de arriba deja el cero blanco solido y se lee igual. */
.cifra--hueca b { color: var(--blanco); }
@supports (-webkit-text-stroke: 2px #000) {
  .cifra--hueca b {
    color: transparent;
    -webkit-text-stroke: 2px #EFF3F7;
  }
}

/* ═══════════ LOS PRIMEROS CINCO MINUTOS ═══════════ */
.cinco {
  background: var(--blanco);
  color: var(--tinta);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.cinco__cuerpo { max-width: min(100%, 62rem); }

.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(--rojo-txt); }
/* EN «LOS CINCO MINUTOS» EL FONDO NO ES EL BLANCO DECLARADO.
   Esa seccion lleva telon (.15) Y aura encima del mismo blanco: los dos
   juntos bajan el fondo del cuarto de arriba —justo donde va el rotulo—
   hasta rgb(132,155,172), medido pixel a pixel sobre la pagina servida.
   Ahi el gris secundario daba 2,58:1, no los 6,69:1 que canta cualquier
   auditor que lea el background DECLARADO. Con la tinta son 7,5:1 en el
   peor punto de la seccion. */
.cinco .antetitulo { color: var(--tinta); }

.cinco h2, .urgencia h2, .llevar h2, .datos h2 {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.06;
  margin-bottom: 1.4rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--tinta-2);
  max-width: min(100%, 38rem);
  margin-bottom: 1.8rem;
}

/* El aviso de «llame primero» es lo primero que se ve de la seccion */
.alerta {
  background: var(--madrugada);
  color: var(--blanco);
  border-left: 5px solid var(--rojo);
  padding: 1.2rem 1.4rem;
  margin-bottom: 2rem;
  max-width: min(100%, 46rem);
}
.alerta p { margin: 0; font-size: .98rem; color: var(--claro-2); }
.alerta b { color: #fff; }

.columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.4rem;
  margin-bottom: 1.8rem;
}
.col { padding: 1.4rem clamp(1.1rem, 2.6vw, 1.7rem); }
.col--si { background: var(--blanco-2); border-top: 4px solid var(--tinta); }
.col--no { background: var(--blanco-2); border-top: 4px solid var(--rojo); }
.col h3 { font-size: 1.5rem; margin-bottom: .9rem; }
.col--no h3 { color: var(--rojo-osc); }
.col ul { margin: 0; padding-left: 1.1rem; }
.col li { font-size: .96rem; color: var(--tinta-2); margin-bottom: .7rem; }
.col li:last-child { margin-bottom: 0; }
.col b { color: var(--tinta); }

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

.falta {
  font-family: var(--dato);
  font-size: .88em;
  color: var(--rojo-osc);
  border-bottom: 1px dashed var(--rojo-osc);
}
/* El fondo decide el tono. */
.portada .falta, .urgencia .falta { color: var(--rojo-txt); border-bottom-color: var(--rojo-txt); }

/* ═══════════ QUÉ LLEVAR CUANDO SALGA ═══════════
   El «que traer» del rubro salud. Va CLARA a proposito: parte una
   tirada de tres bandas oscuras seguidas (mitades, urgencia, cita) que
   dejaba la mitad de la pagina en un tunel. Y trae el tercer nivel de
   luz de la casa: fichas blanco puro sobre el #EFF3F7 de la seccion. */
.llevar {
  background: var(--blanco);
  color: var(--tinta);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
}
.llevar > * { max-width: min(100%, 62rem); }
.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
  margin: 0 0 1.8rem;
  max-width: min(100%, 62rem);
}
.ficha {
  background: #FFFFFF;
  border-left: 3px solid var(--linea);
  padding: 1.1rem 1.2rem 1.2rem;
}
.ficha__n {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .18em;
  color: var(--rojo-osc);          /* 5,9:1 sobre el blanco de la ficha */
  margin: 0 0 .5rem;
}
.ficha h3 { font-size: 1.25rem; margin: 0 0 .45rem; }
.ficha p { margin: 0; font-size: .94rem; color: var(--tinta-2); }

/* ═══════════ QUÉ ES URGENCIA ═══════════ */
.urgencia {
  background: var(--madrugada-2);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
/* El mismo carril que .cinco, .llevar y .datos (62 rem). Con 46 rem la
   banda terminaba en el 56 % del ancho y a 1440 px quedaban 640 px de
   azul vacío a la derecha, que es lo que hace que una página se lea
   como plantilla estirada. Lo que se ensancha es el filete de cada
   línea; el texto sigue midiendo lo mismo, capado más abajo. */
.urgencia__cuerpo { max-width: min(100%, 62rem); }
.urgencia .entrada { color: var(--claro-2); }

.tres { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.tr {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .4rem 1.2rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--linea-osc);
}
.tr:last-child { border-bottom: 1px solid var(--linea-osc); }
/* El texto no se estira con el filete: se queda en la medida de lectura. */
.tr > div { max-width: min(100%, 46rem); }
.tr__n {
  font-family: var(--dato);
  font-size: .86rem;
  color: var(--rojo-txt);
  margin: 0;
}
.tr h3 { font-size: 1.4rem; margin: 0 0 .35rem; }
.tr p { color: var(--claro-2); font-size: .96rem; margin: 0; }

.nota-honesta {
  font-size: .96rem;
  color: var(--claro-2);
  border-left: 3px solid var(--rojo-txt);
  padding: .2rem 0 .2rem 1.1rem;
  margin: 0;
  max-width: min(100%, 46rem);
}
.nota-honesta b { color: var(--blanco); }

/* ═══════════ DÓNDE Y CUÁNDO — la ficha técnica ═══════════
   Un <dl> con columna fija de 11 rem y filete por fila: se lee como
   ficha tecnica, no como tabla de contacto. Va clara y justo antes del
   cierre oscuro, para que el numero gigante llegue con el ojo
   descansado. */
.datos {
  background: var(--blanco);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
/* La ficha a la izquierda y el mapa a la derecha. A 1440 px la ficha
   sola medía 54 rem y la mitad derecha de la banda quedaba en fondo
   vacío: el mapa es justo lo que faltaba ahí, y además es el dato que
   busca alguien que va manejando. */
.datos__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
  max-width: min(100%, 76rem);
}
@media (max-width: 900px) { .datos__cols { grid-template-columns: 1fr; } }

.datos__caja { max-width: min(100%, 54rem); }
.datos__lista { margin: 0 0 1.4rem; }
.datos__lista > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: .3rem 1.2rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--linea);
}
.datos__lista > div:first-child { border-top: 1px solid var(--linea); }
.datos__lista dt {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding-top: .25rem;
}
.datos__lista dd {
  margin: 0;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  /* con el mapa al lado la columna se angostó y «2026» quedaba solo en
     la última línea: pretty reparte y mata la viuda sin tocar nada más */
  text-wrap: pretty;
}
.datos__lista dd a {
  font-family: var(--dato);
  font-size: 1.15rem; font-weight: 700;
  color: var(--rojo-osc);
  text-decoration: none;
  border-bottom: 1px solid rgba(179, 36, 25, .4);
  display: inline-flex; align-items: center; min-height: 44px;
}
.datos__lista dd a:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
/* La aclaración baja entera a la línea de abajo antes que partirse por
   el guión de la fecha y dejar un «08-2026» suelto. Mide 263 px con esta
   letra: cabe hasta en la columna de un teléfono de 320 px. */
.datos__nota { color: var(--tinta-2); font-size: .9rem; white-space: nowrap; }
.datos__pie {
  margin: 0;
  font-size: .92rem;
  color: var(--tinta-2);
  max-width: 52rem;
}

/* ── DATO DE EJEMPLO ──
   La etiqueta viaja en el HTML (data-ejemplo) y dice QUE falta y DE
   QUIEN depende. El fondo de la etiqueta tapa la linea punteada donde
   la cruza, como una acotacion de plano tecnico. Esta version solo
   aparece sobre --blanco: si algun dia se usa sobre fondo oscuro hay
   que reescribir el background del ::after o sale con el color de otra
   seccion. La version en linea de este mismo sistema es .falta. */
.ej {
  position: relative;
  display: inline-block;
  border: 1px dashed rgba(179, 36, 25, .5);
  border-radius: 4px;
  padding: .45rem .7rem .4rem;
}
.ej::after {
  content: attr(data-ejemplo);
  position: absolute; top: -.6rem; left: .6rem;
  font-family: var(--dato);
  font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rojo-osc);          /* 5,9:1 sobre --blanco */
  background: var(--blanco);
  padding: 0 .35rem;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 620px) {
  .datos__lista > div { grid-template-columns: 1fr; }
  .datos__lista dt { padding-top: 0; }
}

/* ── EL MAPA ──
   Imagen propia, servida como cualquier foto: 768x768 de mosaicos de
   OpenStreetMap pegados por demos\mapa-negocio.ps1, con el marcador
   dibujado encima. Ni una petición a tile.openstreetmap.org ni a
   google.com al cargar — eso es lo que la CSP prohíbe. El «Cómo llegar»
   es un enlace normal, y navegar sí está permitido.
   La tarjeta va en blanco puro sobre el #EFF3F7 de la sección: es el
   tercer nivel de claridad de la casa, el mismo de las fichas de
   «qué llevar». */
.mapa {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(16, 26, 46, .13);
}
.mapa img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
}
.mapa__pie {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: .3rem 1rem;
  padding: .5rem .9rem .55rem;
  border-top: 1px solid var(--linea);
  font-family: var(--dato);
  font-size: .72rem; letter-spacing: .03em;
  line-height: 1.5;
  color: var(--tinta-2);            /* 7,5:1 sobre el blanco de la tarjeta */
}
/* Atribución ODbL: OpenStreetMap la exige VISIBLE junto al mapa. */
.mapa__pie a { color: var(--tinta-2); }
/* Mismo recurso que el nav y las flechas: el filete es la gracia del
   enlace, así que el área de toque se agranda por detrás con un
   ::before invisible en vez de subir la altura de la línea. */
.mapa__osm { position: relative; }
.mapa__osm::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.mapa__ir {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px;
  color: var(--rojo-osc);           /* 6,6:1 sobre el blanco de la tarjeta */
  font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.mapa__ir:hover { color: var(--tinta); }

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--madrugada);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
  border-top: 1px solid var(--linea-osc);
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .8rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--rojo-txt);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1.2rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.8rem, 8vw, 4.4rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--blanco);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { color: var(--rojo-txt); }
.cierre__pie {
  font-size: .96rem;
  color: var(--claro-2);
  max-width: 44rem;
  margin: 0 auto;
}

/* ═══════════ PARA LA VETERINARIA ═══════════ */
.dueno {
  background: var(--blanco);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.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: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rojo-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 {
  position: relative;
  font-weight: 700;
  color: var(--rojo-osc);
  text-decoration: none;
  border-bottom: 1px solid var(--rojo-osc);
  padding-bottom: 2px;
}
/* Mismo caso que el nav: el filete es la gracia del enlace, asi que el
   area de toque se agranda por detras y el subrayado no se mueve. */
.flecha::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--madrugada);
  color: var(--claro-2);
  /* el padding de abajo deja sitio al boton flotante de WhatsApp:
     56 px de alto mas su margen, para que no tape el deslinde legal */
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 6rem;
  font-size: .85rem;
}
.pie p { margin: 0 0 .8rem; max-width: 72ch; }
.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; }

/* CASCADA DE HIJOS — para las grillas y las listas.
   El CONTENEDOR se neutraliza y animan los hijos: si no se neutraliza,
   contenedor e hijos bajan a la vez y el grupo entero se desplaza el
   doble. El indice va por nth-child en el CSS y NUNCA en style="--i:3",
   que la CSP bloquea sin decir nada. Seis hijos x 70 ms = 0,42 s: el
   grupo entero aterriza dentro de medio segundo. */
.js .cascada.rev      { opacity: 1; transform: none; transition: none; }
.js .cascada.rev > *  { opacity: 0; transform: translateY(22px); }
.js .cascada.rev.ok > * {
  opacity: 1; transform: none;
  transition: opacity .35s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.cascada > :nth-child(1) { --i: 0; }
.cascada > :nth-child(2) { --i: 1; }
.cascada > :nth-child(3) { --i: 2; }
.cascada > :nth-child(4) { --i: 3; }
.cascada > :nth-child(5) { --i: 4; }
.cascada > :nth-child(6) { --i: 5; }
.cascada > :nth-child(7) { --i: 6; }
.cascada > :nth-child(8) { --i: 7; }

@media (prefers-reduced-motion: reduce) {
  /* El resplandor queda FIJO y tenue: la señal de que hay turno sigue
     encendida, solo deja de respirar. */
  .js .resplandor { animation: none; opacity: .8; }
  /* Los reveals NO se desplazan, pero SI siguen fundiendo: un fundido
     no es movimiento, un salto de 22 px si. */
  .js .rev, .js .cascada.rev > * { 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: 50% 54%;
  -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(--madrugada) 0%, var(--madrugada) 30%,
              rgba(16,26,46,.66) 46%, rgba(16,26,46,.22) 68%, rgba(16,26,46,.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; }
/* EN MOVIL LA PORTADA SE RECOMPONE ENTERA, no se rota la mascara y ya.
   En escritorio la foto entra completa de ancho y la mascara lateral deja
   al veterinario al 12 % de opacidad. En movil la caja era vertical y
   `cover` recortaba dos tercios del ancho: el recorte caia justo sobre la
   cara y salia un primer plano de un senor sonriendo a pantalla completa
   encima del titular «A las tres de la manana» — medido a 500 px el
   09-09-2026. Y correrlo de lado no arregla nada, porque la mascara solo
   deja ver el TERCIO DE ARRIBA de la foto y ahi solo hay pared: el perro
   vive abajo.
   Solucion: la foto deja de ser fondo y pasa a ser una FRANJA arriba, con
   la proporcion del original (3/2) mientras quepa, y con techo de 42svh
   para que en un telefono apaisado no se coma la pantalla. El relleno de
   arriba del texto se calcula con la MISMA formula, asi que el titular
   arranca siempre justo debajo de la franja, a cualquier ancho. */
@media (max-width: 860px) {
  .portada--foto { padding-top: calc(min(66.67vw, 42svh) + 1.4rem); }
  .portada__foto { inset: 0 0 auto 0; height: min(66.67vw, 42svh); }
  .portada__foto img {
    object-position: 50% 46%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.42) 72%, transparent 96%);
            mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.42) 72%, transparent 96%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(16,26,46,0) 0%, rgba(16,26,46,.22) 54%, var(--madrugada) 98%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#cinco { 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);
  /* Bajada de .38 a .28: encima ya hay un telon al .15 sobre el mismo
     blanco y los dos juntos dejaban el cuarto de arriba de la seccion en
     un gris azulado sucio, no en un halo de color. */
  opacity: .28;
  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(--madrugada-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(--blanco);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blanco-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(--blanco);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--blanco); 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(--madrugada); 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(16,26,46,.62) 0%,
              rgba(16,26,46,.80) 45%, rgba(16,26,46,.88) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--blanco); }
.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(--blanco);
}
/* PLACA DEL ECO — medido sobre la pagina viva, no calculado.
   El eco cae sobre la zona NITIDA de la foto (el pelaje claro del perro
   bajo el velo) y ahi el #FF6B5E daba 3,50:1 contra rgb(60,68,84): no
   llega al 4,5 que pide un texto de 13 px. El velo NO se sube —ensuciaria
   la foto entera y es justo lo que el estandar prohibe—: se pone placa.
   Con este .82 el peor caso, vuelto a medir pixel a pixel sobre la pagina
   servida, sube a 5,24:1. */
.cita__eco {
  display: inline-block; margin-top: 1.1rem;
  padding: .32rem .75rem;
  border-radius: 4px;
  background: rgba(16, 26, 46, .82);
  line-height: 1.5;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rojo-txt);
}
.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(--madrugada-3); }
.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, con una sola frase abajo.
   El velo SUBE desde el borde inferior y arranca en alfa 0: los dos
   tercios de arriba de la foto quedan a foco completo y solo se tine
   la franja donde va el texto. Peor caso medido: blanco puro sobre el
   .72 del velo con una foto blanca debajo = 6,8:1; abajo del todo,
   sobre el .92, son 13,9:1. Pase lo que pase con la foto. */
/* 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; margin: 0;
  height: clamp(220px, 38svh, 420px);
  background: var(--madrugada-2);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
}
.tajo__txt {
  position: absolute; inset: auto 0 0 0;
  padding: 4rem clamp(1.25rem, 5vw, 4rem) 1.5rem;
  background: linear-gradient(180deg,
              rgba(16,26,46,0) 0%, rgba(16,26,46,.72) 55%,
              rgba(16,26,46,.92) 100%);
}
.tajo__txt p {
  margin: 0; max-width: 22ch;
  color: #FFFFFF;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  line-height: 1.1;
}
@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(--madrugada-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(--blanco);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--blanco-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(--madrugada-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;
}
/* Con OCHO piezas la que rompe la reticula es SOLO la primera: ocho
   celdas mas una doble son nueve unidades, tres filas exactas de tres.
   Si ademas se dobla la sexta quedan diez y la ultima fila se pinta a
   un tercio con dos huecos al lado. */
.mos__p:nth-child(1) { 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; }
.js .mos__p.ok:nth-child(7) { transition-delay: .36s; }
.js .mos__p.ok:nth-child(8) { transition-delay: .42s; }
@media (max-width: 760px) {
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  /* a dos columnas: la primera y la ultima a ancho completo dejan
     2 + 6 + 2 = diez unidades, cinco filas justas y ningun hueco. */
  .mos__p:nth-child(1), .mos__p:nth-child(8) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
   ══════════════════════════════════════════════════════════════════
   Boton fijo abajo a la derecha. 56 px de alto: por encima de los 44
   del minimo tactil. Verde de WhatsApp a proposito — se reconoce sin
   leerlo, y eso es lo que hace que se toque. Texto #07310F sobre el
   #25D366: 7,3:1.

   El numero es el DEL NEGOCIO, el mismo de los tel:. El de CristalWeb
   vive solo en la seccion del dueno; confundirlos manda los clientes
   del cliente al telefono equivocado.

   La direccion del truco importa: el boton se ve SIEMPRE por defecto y
   el JS solo lo esconde mientras el visitante esta en la portada, para
   no tapar el titular. Si el script no arranca, o si rescate.js quita
   la clase .js, el boton queda visible, que es el estado que vende.

   En movil sube 4,4 rem: abajo del todo vive la barra fija de
   URGENCIA, que en una pagina de urgencia manda sobre el WhatsApp.
   ══════════════════════════════════════════════════════════════════ */
.wapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 56px;
  padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: #25D366;
  color: #07310F;
  text-decoration: none;
  font-family: var(--cuerpo);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.wapp__i { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; }
.wapp:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .22); }
.wapp--arriba { opacity: 0; transform: translateY(1.2rem) scale(.94); pointer-events: none; }

@media (max-width: 46rem) {
  .wapp { bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 4.4rem); }
}
@media (max-width: 520px) {
  /* bajo 520 px queda el circulo: el rotulo se esconde sin sacarlo del
     DOM, para que el lector de pantalla lo siga leyendo */
  .wapp { padding: 0; width: 56px; justify-content: center; }
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .wapp { transition: opacity .28s ease; }
  .wapp--arriba { transform: none; }
}