/* ═══════════════════════════════════════════════════════════════════
   Veterinaria La Poza · Pucón — hoja de estilo
   Demo comercial de Yordy Serna. Sin build, sin librerías, sin frameworks.

   ── IDENTIDAD ───────────────────────────────────────────────────────
   Dirección: "BLANCO Y AGUA DEL LAGO". Blanco puro como superficie
   dominante, una bruma celeste que alterna las secciones, el turquesa
   del propio logo como marca y fondo de las láminas, y UN coral
   racionado, reservado entero para urgencias.

   El celeste sale del logo real de la clínica: el cuadrado del que se
   recortaron las siluetas era un teal #035A6C. Trabajar sobre ese color
   tiene una ventaja que ninguna paleta inventada da — el sitio y el
   letrero de la calle son la misma marca.

   Lo que hubo que cuidar, y cómo:

   · El "celeste de clínica" genérico es el aire de plantilla comprada de
     todo el rubro. Se esquiva por dos lados: el celeste NO es una
     superficie pastel de relleno sino la tinta oscura de la página
     (petróleo #0B3A48 a sangre en tres secciones), y el titular va en
     una grotesca de peso 800, no en la serif fina de catálogo médico.
   · dental-patagonia, misma ciudad y mismo rubro salud, ya es blanco con
     azul frío. Se separan por el tono y por el peso: aquella es azul
     petróleo casi marino con display serif; ésta es TURQUESA verdoso con
     display grotesca gruesa. Puestas al lado no se confunden.
   · El logo se reescribió en la paleta de la página
     (imagenes/logo-tinta.png y logo-claro.png): fondo recortado y las
     siluetas en petróleo sobre claro o en hielo sobre el petróleo.

   ── TIPOGRAFÍA ──────────────────────────────────────────────────────
   Plus Jakarta Sans + Mulish + Red Hat Mono. Las tres nuevas: ninguna
   aparece en los quince proyectos anteriores.

   · Plus Jakarta Sans (display, 800) — grotesca humanista de peso alto.
     Los titulares importantes van en 800 con el tracking cerrado a
     -.022em: es lo que le da peso a una página que por lo demás es casi
     toda blanca. Una serif fina sobre blanco y celeste se habría leído
     como folleto de laboratorio.
   · Mulish (cuerpo) — humanista de x-height alta y terminaciones
     redondeadas. Se lee clínica sin sonar fría, que es la mitad del
     encargo: es un hospital, pero de perros con nombre. Se descartó
     Figtree (ya está en bogota-barber) y Onest (en dental-patagonia).
   · Red Hat Mono (dato) — mono de esquinas suaves para edades, precios y
     teléfonos. Con tabular-nums las columnas de la carta se alinean solas.

   ── CONTRASTES MEDIDOS (WCAG, sobre el fondo que corresponde) ────────
   · --tinta        #0C2C38 sobre --blanco ......... 14,65:1
   · --tinta-suave  #46626F sobre --bruma  .......... 5,94:1  AA
   · --celeste-hondo#08697A sobre --bruma  .......... 5,81:1  AA
   · --coral        #AE3628 sobre --blanco .......... 6,25:1  AA
   · --coral        #AE3628 sobre --bruma  .......... 5,73:1  AA
   · --blanco       #FFFFFF sobre --coral  .......... 6,25:1  AA
   · --hielo        #EAF6FA sobre --petroleo ....... 11,13:1  AA
   · --celeste-claro#7FD4E8 sobre --petroleo ........ 7,29:1  AA
   · --coral-claro  #F0A183 sobre --petroleo ........ 5,91:1  AA
   · --oro          #7A5F0E sobre --bruma  .......... 5,54:1  AA
   El fondo decide el tono: --celeste-hondo y --coral son para texto
   sobre claro; --celeste-claro y --coral-claro SÓLO para texto sobre el
   petróleo. Cambiarlos de lado rompe los cuatro.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* superficies — blanco puro dominante y una bruma celeste que alterna */
  --blanco:#FFFFFF;
  --bruma:#EFF6FA;
  --bruma-honda:#DCE9F0;
  --celeste-agua:#E2F1F7;

  /* tinta */
  --tinta:#0C2C38;
  --tinta-suave:#46626F;
  --linea:#CFE0E9;
  --linea-clara:rgba(234,246,250,.20);

  /* el celeste de la marca — cuatro alturas, una por trabajo */
  --petroleo:#0B3A48;        /* superficie oscura */
  --petroleo-caja:#124A5B;   /* cajas dentro de la superficie oscura */
  --celeste-hondo:#08697A;   /* texto y bordes sobre claro */
  --celeste-claro:#7FD4E8;   /* texto secundario sobre el petróleo */
  --hielo:#EAF6FA;           /* texto principal sobre el petróleo */

  /* urgencia — el único acento cálido, y se gasta entero acá */
  --coral:#AE3628;
  --coral-claro:#F0A183;
  --coral-agua:#FAEAE5;

  /* estrellas de Google */
  --oro:#7A5F0E;

  /* tipografía */
  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cuerpo:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dato:"Red Hat Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* escala fluida */
  --paso--1:clamp(.8rem,.77rem + .13vw,.88rem);
  --paso-0:clamp(1rem,.96rem + .19vw,1.1rem);
  --paso-1:clamp(1.14rem,1.07rem + .33vw,1.35rem);
  --paso-2:clamp(1.34rem,1.21rem + .6vw,1.7rem);
  --paso-3:clamp(1.58rem,1.36rem + 1.05vw,2.26rem);
  --paso-4:clamp(1.92rem,1.55rem + 1.75vw,3rem);
  --paso-5:clamp(2.26rem,1.72rem + 2.6vw,3.95rem);

  /* medidas */
  --ancho:1180px;
  --alto-cab:64px;
  --alto-urgencia:64px;
  --salida:cubic-bezier(.16,1,.3,1);
  --radio:5px;
}

/* ── cimientos ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* Declarado a mano y con !important a propósito: el atributo hidden pierde
   contra cualquier regla que traiga display, y el botón del menú nace con
   hidden. Sin esta línea aparece un botón muerto antes de que corra el JS. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:var(--paso-0);
  font-weight:400;
  line-height:1.62;
  overflow-x:hidden;
  /* La barra de urgencia es fija y sólo existe en celular: sin este colchón
     tapa el pie de página entero. */
  padding-bottom:0;
}
img{ max-width:100%; height:auto; display:block; }

/* Los encabezados que cargan el mensaje van en 800 con el tracking cerrado:
   sobre una página casi toda blanca, el peso del titular es lo único que
   sostiene la jerarquía. Los h3 —que son rótulos de tarjeta, no titulares—
   se quedan en 700 y con menos tracking negativo, porque en cuerpo chico el
   apretado empasta las letras y separa ópticamente las comas. */
h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.022em;
  margin:0 0 .7rem;
  text-wrap:balance;
}
h1{ font-size:var(--paso-5); }
h2{ font-size:var(--paso-4); }
h3{
  font-size:var(--paso-1); line-height:1.26;
  font-weight:700; letter-spacing:-.015em;
}
p{ margin:0 0 1rem; }
ul,ol{ margin:0; padding:0; list-style:none; }

a{ color:inherit; }
:focus-visible{
  outline:3px solid var(--coral);
  outline-offset:3px;
  border-radius:2px;
}

.contenido{ width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--petroleo); color:var(--hielo);
  padding:.8rem 1.2rem; text-decoration:none;
}
.saltar:focus{ left:.6rem; top:.6rem; }

.oculto-visual{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── ojo (eyebrow) y dato ────────────────────────────────────────── */
.ojo{
  font-family:var(--dato); font-size:var(--paso--1); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--celeste-hondo);
  margin:0 0 .7rem;
}
.ojo--claro{ color:var(--celeste-claro); }
.ojo--alerta{ color:var(--coral-claro); }

.dato{
  font-family:var(--dato); font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.dato__unidad{ font-size:.55em; opacity:.7; }
/* El subrayado va con text-decoration y no con border-bottom: el enlace
   necesita 44 px de alto para el dedo, y un borde inferior se iría al fondo
   de esos 44 px, lejos del número. */
.dato--enlace{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:.18em;
  text-decoration-color:var(--celeste-hondo);
}
.dato--enlace:hover{ color:var(--celeste-hondo); }

/* ── marca de dato inventado ─────────────────────────────────────── */
.ej{
  position:relative;
  outline:1px dashed color-mix(in srgb, var(--coral) 42%, transparent);
  outline-offset:10px;
  border-radius:2px;
}
.ej::after{
  content:"ejemplo";
  position:absolute; top:-10px; right:-10px;
  transform:translateY(-100%);
  font-family:var(--dato); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coral);
  background:var(--blanco);
  padding:0 .4rem;
  pointer-events:none;
}
.ej--inline{
  outline:1px dashed color-mix(in srgb, var(--coral) 34%, transparent);
  outline-offset:3px;
}
.ej--inline::after{ content:none; }
/* A 375 px un offset de 10 px empuja la línea punteada fuera del viewport y
   aparece scroll horizontal. */
@media (max-width:560px){
  .ej{ outline-offset:6px; }
  .ej::after{ top:-6px; right:-6px; font-size:.55rem; }
}

/* ── botones ────────────────────────────────────────────────────── */
.boton{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  min-height:48px; padding:.85rem 1.7rem;
  font-family:var(--cuerpo); font-size:var(--paso--1); font-weight:700;
  letter-spacing:.015em;
  text-decoration:none; border:1px solid transparent; border-radius:var(--radio);
  cursor:pointer;
  transition:transform .18s var(--salida), background-color .18s ease,
             color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.boton:hover{ transform:translateY(-2px); }

.boton--acento{
  background:var(--petroleo); color:var(--hielo);
  box-shadow:0 10px 22px -16px rgba(11,58,72,.9);
}
.boton--acento:hover{ background:var(--petroleo-caja); }

.boton--alerta{
  background:var(--coral); color:var(--bruma);
  box-shadow:0 10px 22px -14px rgba(174,54,40,.9);
}
.boton--alerta:hover{ background:#952C20; }

.boton--claro{
  background:var(--hielo); color:var(--petroleo);
  box-shadow:0 10px 22px -16px rgba(0,0,0,.55);
}
.boton--claro:hover{ background:#FFFFFF; }

.boton--fantasma{
  background:transparent; color:var(--petroleo);
  border-color:color-mix(in srgb, var(--petroleo) 34%, transparent);
}
.boton--fantasma:hover{
  border-color:var(--petroleo);
  background:color-mix(in srgb, var(--petroleo) 7%, transparent);
}
.boton--fantasma-claro{
  color:var(--hielo);
  border-color:var(--linea-clara);
}
.boton--fantasma-claro:hover{
  border-color:var(--hielo);
  background:rgba(234,246,250,.10);
}
.boton--fantasma-alerta{
  color:var(--hielo);
  border-color:color-mix(in srgb, var(--coral-claro) 55%, transparent);
}
.boton--fantasma-alerta:hover{
  border-color:var(--coral-claro);
  background:rgba(240,161,131,.12);
}

/* ── banda de propuesta (se borra al entregar el sitio) ──────────── */
.propuesta{ background:var(--petroleo); color:var(--hielo); }
.propuesta__cinta{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.1rem;
  padding:.85rem 0;
}
.propuesta__marca{
  font-family:var(--dato); font-size:.62rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--petroleo);
  background:var(--coral-claro);
  padding:.28rem .6rem; border-radius:3px;
  white-space:nowrap;
}
.propuesta__txt{
  margin:0; flex:1 1 22rem;
  font-size:var(--paso--1); line-height:1.5;
  color:var(--celeste-claro);
}
.propuesta__txt strong{ color:var(--hielo); font-weight:700; }
.propuesta__link{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--paso--1); font-weight:700;
  color:var(--hielo); white-space:nowrap;
  text-underline-offset:4px;
}

/* ── cabecera fantasma ──────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:80;
  background:var(--blanco);
  border-bottom:1px solid var(--linea);
  transition:transform .3s var(--salida), background-color .3s ease,
             border-color .3s ease, box-shadow .3s ease;
}
/* Arriba del todo no tiene fondo: la portada arranca con el mismo arena, así
   que la barra desaparece en ella sin necesidad de márgenes negativos. */
.js .cabecera:not(.cabecera--solida){
  background:transparent;
  border-bottom-color:transparent;
}
.cabecera--solida{
  background:var(--bruma);
  box-shadow:0 8px 24px -18px rgba(12,44,56,.55);
}
.cabecera--oculta{ transform:translateY(-100%); }
/* Nunca esconderla con el foco de TECLADO dentro: si alguien llegó
   tabulando, esconder la barra le arrebata de la pantalla el elemento
   enfocado. Va con :has(:focus-visible) y no con :focus-within — un toque
   con el dedo en el botón del menú también deja el foco puesto, y con
   :focus-within la barra queda congelada para el resto de la sesión. */
.cabecera:has(:focus-visible){ transform:none !important; }
/* Ni con el menú abierto: el panel se iría con ella. */
.cabecera--menu{ transform:none !important; }

.cabecera__fila{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
  min-height:var(--alto-cab);
  flex-wrap:wrap;
}

.marca{
  min-height:44px;
  display:inline-flex; align-items:center; gap:.65rem;
  text-decoration:none; color:var(--tinta);
  margin-right:auto;
}
.marca__logo{ width:38px; height:38px; }
.marca__txt{
  font-family:var(--display); font-size:1.06rem; font-weight:800;
  line-height:1.02; letter-spacing:-.01em;
  display:flex; flex-direction:column;
}
.marca__sub{
  font-family:var(--dato); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--celeste-hondo);
  margin-top:.18rem;
}

.nav__lista{ display:flex; flex-wrap:wrap; gap:.15rem; }
.nav a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:.4rem .7rem;
  font-size:var(--paso--1); font-weight:600;
  text-decoration:none; border-radius:3px;
  color:var(--tinta);
  transition:background-color .18s ease, color .18s ease;
}
.nav a:hover{ background:color-mix(in srgb, var(--petroleo) 10%, transparent); }
.nav a[aria-current="true"]{ color:var(--celeste-hondo); }

.cabecera__cta{ display:none; }

.menu-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:48px; padding:.5rem .9rem;
  background:transparent; color:var(--tinta);
  border:1px solid color-mix(in srgb, var(--tinta) 25%, transparent);
  border-radius:var(--radio);
  font-family:var(--cuerpo); font-size:var(--paso--1); font-weight:700;
  cursor:pointer;
}
.menu-btn__barras{ display:inline-flex; flex-direction:column; gap:3px; }
.menu-btn__barras i{
  display:block; width:17px; height:2px; background:currentColor;
  transition:transform .22s var(--salida), opacity .18s ease;
}
.cabecera--menu .menu-btn__barras i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.cabecera--menu .menu-btn__barras i:nth-child(2){ opacity:0; }
.cabecera--menu .menu-btn__barras i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ── portada ────────────────────────────────────────────────────── */
.portada{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(176deg, var(--blanco) 0%, var(--blanco) 46%, var(--bruma-honda) 100%);
  padding:clamp(2rem,6vh,4rem) 0 clamp(3.5rem,8vh,5.5rem);
}

/* Fondo dibujado: el cerro que ya vive dentro del logo y las huellas
   subiendo hacia él. Cero bytes de imagen, y no se pixela en ninguna
   pantalla. Todo con @keyframes: la portada no depende del JS. */
.paisaje{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.paisaje__cerro{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:min(52%,340px);
}
.paisaje__ladera{ fill:color-mix(in srgb, var(--celeste-hondo) 14%, transparent); }
.paisaje__nieve{ fill:color-mix(in srgb, var(--bruma) 78%, transparent); }
.paisaje__huellas{
  position:absolute; left:-1.4rem; bottom:.4rem;
  width:min(62%,540px); height:auto;
}
/* El rastro pasa por debajo del pie de los datos, así que su tinta y el color
   de ese texto se decidieron juntos: al 13 % de celeste con el pie en
   --tinta-suave el peor punto daba 4,37:1 y no pasaba AA. Con el pie en
   --tinta pleno la huella puede subir a 15 % y sigue pasando de sobra.
   Medido con la huella debajo, no con el blanco limpio. */
.huella{ fill:color-mix(in srgb, var(--celeste-hondo) 15%, transparent); }
.js .huella{
  opacity:0;
  animation:pisar .9s var(--salida) forwards;
  animation-delay:calc(.5s + var(--i) * .22s);
}
@keyframes pisar{ from{ opacity:0; transform:translateY(9px) scale(.9); } to{ opacity:1; transform:none; } }

.portada__caja{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  display:grid; gap:clamp(1.8rem,4vw,3.4rem);
  align-items:center;
}
@media (min-width:900px){
  .portada__caja{ grid-template-columns:1.12fr .88fr; }
}

.js .portada__texto > *{ opacity:0; animation:entrar .8s var(--salida) forwards; }
.js .portada__texto > *:nth-child(1){ animation-delay:.05s; }
.js .portada__texto > *:nth-child(2){ animation-delay:.14s; }
.js .portada__texto > *:nth-child(3){ animation-delay:.24s; }
.js .portada__texto > *:nth-child(4){ animation-delay:.34s; }
.js .portada__texto > *:nth-child(5){ animation-delay:.44s; }
@keyframes entrar{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.portada__bajada{
  font-size:var(--paso-1); line-height:1.5;
  color:var(--tinta-suave);
  max-width:34ch;
  margin-bottom:1.6rem;
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2.2rem; }

.portada__datos{
  display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem;
  border-top:1px solid var(--linea);
  padding-top:1.3rem;
}
.portada__datos .dato{
  display:block; font-size:var(--paso-2); color:var(--petroleo);
  line-height:1.1;
}
.portada__pie{
  display:block; font-size:.78rem; color:var(--tinta);
  margin-top:.25rem; max-width:20ch;
}

.portada__foto{
  margin:0; position:relative;
}
.portada__foto img{
  width:100%; border-radius:var(--radio);
  box-shadow:0 30px 60px -40px rgba(12,44,56,.8);
}
.js .portada__foto{ opacity:0; animation:entrar 1s var(--salida) .3s forwards; }
.portada__epigrafe{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.04em;
  color:var(--tinta-suave);
  margin-top:.6rem;
}

/* ── secciones ──────────────────────────────────────────────────── */
.servicios,.plan,.precios,.resenas,.donde,.reservar{
  padding:clamp(3.4rem,9vh,6rem) 0;
}
.servicios{ background:var(--bruma); }
.plan{ background:var(--blanco); }
.precios{ background:var(--bruma); }
.resenas{ background:var(--celeste-agua); }
.donde{ background:var(--bruma); }
.reservar{ background:var(--blanco); }

.titulo{ max-width:52ch; margin-bottom:clamp(2rem,4vh,3rem); }
.entrada{
  font-size:var(--paso-1); line-height:1.55;
  color:var(--tinta-suave);
  margin-bottom:0;
}

/* ── urgencias ──────────────────────────────────────────────────── */
.urgencias{
  background:var(--petroleo);
  color:var(--hielo);
  padding:clamp(3rem,8vh,5rem) 0;
}
.urgencias__caja{
  display:grid; gap:clamp(1.8rem,4vw,3rem);
}
@media (min-width:900px){
  .urgencias__caja{ grid-template-columns:1fr 1fr; align-items:start; }
}
.urgencias h2{ color:var(--hielo); }
.urgencias .entrada{ color:var(--celeste-claro); }
.urgencias__acciones{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin:1.6rem 0 1.9rem;
}
/* El teléfono de la sección de urgencias es un marcador de ejemplo, no un
   enlace: esta demo no lleva el número de nadie. Va con el mismo peso visual
   que tendría el número real para que se entienda dónde iría. */
.urgencias__fono{
  display:inline-flex; align-items:center;
  min-height:48px; margin:0;
  font-size:var(--paso-1);
  color:var(--hielo);
}
.urgencias__horario{
  font-size:var(--paso--1); color:var(--celeste-claro);
  max-width:44ch; margin:0;
}
.urgencias .ej{ outline-color:color-mix(in srgb, var(--coral-claro) 55%, transparent); }
.urgencias .ej::after{ color:var(--coral-claro); background:var(--petroleo); }

.alarma{
  background:var(--petroleo-caja);
  border:1px solid color-mix(in srgb, var(--coral-claro) 30%, transparent);
  border-left:4px solid var(--coral-claro);
  border-radius:var(--radio);
  padding:clamp(1.3rem,3vw,1.9rem);
}
.alarma__titulo{ color:var(--hielo); margin-bottom:1rem; }
.alarma__lista li{
  position:relative;
  padding-left:1.5rem; margin-bottom:.7rem;
  font-size:var(--paso--1); line-height:1.5;
  color:var(--celeste-claro);
}
.alarma__lista li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%;
  background:var(--coral-claro);
}
.alarma__pie{
  margin:1.1rem 0 0; padding-top:.9rem;
  border-top:1px solid var(--linea-clara);
  font-size:.78rem; color:var(--celeste-claro);
}

/* ── rejillas de tarjetas ───────────────────────────────────────── */
.rejilla{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.rejilla--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }

.serv{
  display:flex; flex-direction:column;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:1.4rem 1.3rem 1.2rem;
}
.serv__titulo{ color:var(--petroleo); margin-bottom:.5rem; }
.serv__txt{
  font-size:var(--paso--1); line-height:1.55;
  color:var(--tinta-suave);
  margin-bottom:1rem;
}
.serv__precio{
  margin:auto 0 .9rem; font-size:var(--paso--1); color:var(--petroleo);
  align-self:flex-start;
}
.serv__link{
  align-self:flex-start;
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--paso--1); font-weight:700;
  color:var(--celeste-hondo);
  text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:.3em;
  text-decoration-color:color-mix(in srgb, var(--celeste-hondo) 40%, transparent);
}
.serv__link:hover{ text-decoration-color:var(--celeste-hondo); }
.serv--destacado{
  background:var(--celeste-agua);
  border-color:color-mix(in srgb, var(--celeste-hondo) 35%, transparent);
}

/* ── láminas a sangre ───────────────────────────────────────────── */
/* El velo va medido contra la foto y no contra el color de respaldo: en una
   lámina a sangre el background-color no es lo que se ve. */
.lamina{
  position:relative; isolation:isolate;
  min-height:88svh;
  display:flex; align-items:center;
  padding:clamp(3rem,10vh,6rem) 0;
  background:var(--petroleo) center/cover no-repeat;
  color:var(--hielo);
}
.lamina::after{
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
}
/* Esta foto tiene el sujeto justo al medio y es casi cuadrada: con `cover`
   en una lámina apaisada no queda eje horizontal que correr, así que un velo
   lateral le habría tapado la cara a la veterinaria. El velo va de abajo
   hacia arriba y el texto se apoya en el pie: la cara y el volcán quedan
   limpios arriba, que es lo que hace que la foto valga los 141 KB. */
.lamina--equipo{
  background-image:url("../imagenes/lamina-equipo.jpg");
  background-position:center 20%;
  align-items:flex-end;
}
.lamina--equipo::after{
  background:linear-gradient(to top,
    rgba(10,42,54,.93) 0%, rgba(10,42,54,.87) 56%,
    rgba(10,42,54,.60) 74%, rgba(10,42,54,.26) 90%, rgba(10,42,54,.15) 100%);
}
.lamina--hospital{
  background-image:url("../imagenes/lamina-hospital.jpg");
  background-position:center 42%;
}
.lamina--hospital::after{
  background:linear-gradient(260deg,
    rgba(10,42,54,.95) 0%, rgba(10,42,54,.91) 42%,
    rgba(10,42,54,.63) 70%, rgba(10,42,54,.38) 100%);
}
.lamina__caja{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  max-width:min(100% - 2.4rem, 46rem);
}
.lamina__caja--der{ margin-left:auto; margin-right:max(1.2rem, (100vw - var(--ancho))/2); }
.lamina h2{ color:var(--hielo); }

.lamina__txt{
  font-size:var(--paso-1); line-height:1.55;
  color:var(--hielo);
  max-width:38ch;
  margin-bottom:1.7rem;
}

/* ── el plan de tu mascota (pieza firma) ────────────────────────── */
.plan__linea{ margin:0 0 -1.2rem; }
.plan__linea svg{ width:100%; height:auto; display:block; }
.plan__curva{
  fill:none;
  stroke:color-mix(in srgb, var(--celeste-hondo) 42%, transparent);
  stroke-width:2;
  stroke-dasharray:7 9;
  stroke-linecap:round;
}
.plan__nodo circle{ fill:var(--petroleo); }
.plan__glifo{
  fill:none; stroke:var(--hielo); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.plan__nodo:first-of-type .plan__glifo{ fill:var(--hielo); stroke:none; }
.plan__nodo:nth-of-type(3) .plan__glifo{ fill:var(--hielo); stroke:none; }
.plan__nodo:last-of-type .plan__glifo{ fill:var(--hielo); stroke:none; }
/* El nodo entra desde el JS igual que el resto de los reveals: es el
   contenedor .plan__linea el que se observa, no cada círculo. */
.js .visible .plan__nodo{
  animation:latir .7s var(--salida) backwards;
  animation-delay:calc(var(--n) * .16s);
}
@keyframes latir{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.plan__nodo{ transform-box:fill-box; transform-origin:center; }

@media (max-width:760px){
  /* A 375 px la curva se vuelve un garabato de 40 px de alto que no dice
     nada. Se saca: cada hito está escrito abajo. */
  .plan__linea{ display:none; }
}

.etapas{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}
.etapa{
  background:var(--bruma);
  border:1px solid var(--linea);
  border-top:3px solid var(--celeste-hondo);
  border-radius:var(--radio);
  padding:1.4rem 1.25rem 1.1rem;
}
.etapa__edad{
  font-size:.78rem; color:var(--tinta-suave);
  margin:0 0 .55rem; align-self:flex-start;
  display:inline-block;
}
.etapa__titulo{ color:var(--petroleo); margin-bottom:.5rem; }
.etapa__txt{
  font-size:var(--paso--1); line-height:1.55;
  color:var(--tinta-suave);
  margin-bottom:1.1rem;
}
.hitos{ border-top:1px solid var(--linea); }
.hito{
  padding:.85rem 0;
  border-bottom:1px solid var(--linea);
}
.hito:last-child{ border-bottom:0; padding-bottom:0; }
.hito__edad{
  display:inline-block;
  font-family:var(--dato); font-size:.72rem; font-weight:600;
  color:var(--celeste-hondo);
  margin-bottom:.3rem;
}
.hito__txt{
  display:block; font-size:var(--paso--1); font-weight:600;
  line-height:1.4; margin-bottom:.45rem;
}
.hito__btn{
  display:inline-flex; align-items:center;
  min-height:44px; padding:.4rem .8rem;
  font-size:.74rem; font-weight:700; letter-spacing:.02em;
  text-decoration:none;
  color:var(--petroleo);
  background:var(--celeste-agua);
  border:1px solid color-mix(in srgb, var(--celeste-hondo) 30%, transparent);
  border-radius:3px;
  transition:background-color .18s ease, border-color .18s ease;
}
.hito__btn:hover{ background:var(--bruma-honda); border-color:var(--celeste-hondo); }

.plan__nota{
  margin:1.6rem 0 0; padding:1.1rem 1.3rem;
  background:var(--celeste-agua);
  border-left:3px solid var(--celeste-hondo);
  border-radius:0 var(--radio) var(--radio) 0;
  font-size:var(--paso--1); color:var(--tinta-suave);
  max-width:70ch;
}

/* ── carta de precios ───────────────────────────────────────────── */
.carta{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:.4rem clamp(.6rem,2vw,1.4rem);
  overflow-x:auto;
}
.carta__tabla{ width:100%; border-collapse:collapse; min-width:29rem; }
.carta__caption{
  caption-side:top; text-align:left;
  font-family:var(--dato); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-suave);
  padding:.9rem .2rem .6rem;
}
.carta__tabla th,.carta__tabla td{
  text-align:left; padding:.85rem .5rem;
  border-bottom:1px solid var(--linea);
  vertical-align:middle;
}
.carta__tabla thead th{
  font-family:var(--dato); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-suave);
  border-bottom:1px solid var(--celeste-hondo);
}
.carta__tabla tbody th{
  font-family:var(--cuerpo); font-size:var(--paso--1); font-weight:700;
}
.carta__tabla tbody tr:last-child th,
.carta__tabla tbody tr:last-child td{ border-bottom:0; }
.carta__tabla td.dato{ color:var(--petroleo); white-space:nowrap; }
.carta__nota{
  display:block; font-weight:400; font-size:.72rem;
  color:var(--tinta-suave);
}
.carta__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.35rem .9rem;
  font-size:.74rem; font-weight:700;
  text-decoration:none; color:var(--petroleo);
  border:1px solid color-mix(in srgb, var(--celeste-hondo) 34%, transparent);
  border-radius:3px;
}
.carta__btn:hover{ background:var(--celeste-agua); border-color:var(--celeste-hondo); }
.nota-precios{
  margin:1.3rem 0 0; font-size:var(--paso--1);
  color:var(--tinta-suave); max-width:60ch;
}

/* ── reseñas ────────────────────────────────────────────────────── */
.resena{
  background:var(--bruma);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:1.4rem 1.3rem 1.1rem;
  display:flex; flex-direction:column;
}
.resena__estrellas{
  color:var(--oro); font-size:1.05rem; letter-spacing:.14em;
  margin:0 0 .7rem;
}
.resena__txt{ margin:0 0 .9rem; }
.resena__txt p{
  margin:0; font-size:var(--paso--1); line-height:1.6;
  color:var(--tinta);
}
.resena__firma{
  margin:auto 0 0;
  font-family:var(--dato); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.resenas .ej::after{ background:var(--celeste-agua); }
.resenas__pie{
  margin:1.4rem 0 0; font-size:var(--paso--1);
  color:var(--tinta-suave); max-width:62ch;
}

/* ── dónde ──────────────────────────────────────────────────────── */
.donde__caja{ display:grid; gap:clamp(1.8rem,4vw,3rem); align-items:center; }
@media (min-width:900px){
  .donde__caja{ grid-template-columns:1.05fr .95fr; }
}
.horario{ margin:1.8rem 0; max-width:34rem; }
.horario__fila{
  display:flex; flex-wrap:wrap; gap:.3rem 1rem;
  justify-content:space-between; align-items:baseline;
  padding:.75rem 0;
  border-bottom:1px solid var(--linea);
}
.horario dt{ font-weight:700; font-size:var(--paso--1); }
.horario dd{ margin:0; color:var(--petroleo); font-size:var(--paso--1); }
.donde__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; }
.donde__foto{ margin:0; }
.donde__foto img{
  width:100%; border-radius:var(--radio);
  box-shadow:0 26px 52px -40px rgba(12,44,56,.85);
}
.donde__foto figcaption{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.04em;
  color:var(--tinta-suave); margin-top:.55rem;
}

/* ── reserva ────────────────────────────────────────────────────── */
.reservar__caja{ display:grid; gap:1.4rem; align-items:start; }
@media (min-width:900px){
  .reservar__caja{ grid-template-columns:1.35fr .65fr; }
}
.form{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  background:var(--bruma);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:clamp(1.2rem,3vw,1.9rem);
}
.campo{ display:flex; flex-direction:column; gap:.35rem; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  color:var(--tinta);
}
.campo__opt{ font-weight:400; color:var(--tinta-suave); }
.campo input,.campo select,.campo textarea{
  font-family:var(--cuerpo); font-size:var(--paso--1);
  color:var(--tinta);
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:3px;
  padding:.7rem .8rem;
  min-height:48px;
  width:100%;
}
.campo textarea{ resize:vertical; line-height:1.5; }
.campo input::placeholder,.campo textarea::placeholder{ color:#57737F; }
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  border-color:var(--celeste-hondo);
}
.form__pie{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem;
  border-top:1px solid var(--linea);
  padding-top:1.1rem;
}
.form__aviso{
  margin:0; font-size:.76rem; color:var(--tinta-suave);
  flex:1 1 14rem;
}

.resumen{
  background:var(--petroleo);
  color:var(--hielo);
  border-radius:var(--radio);
  padding:clamp(1.2rem,3vw,1.6rem);
}
.resumen__titulo{
  font-family:var(--dato); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--celeste-claro);
  margin-bottom:.9rem;
}
.resumen__papel p{
  margin:0 0 .5rem;
  font-family:var(--dato); font-size:.8rem; line-height:1.55;
  color:var(--hielo);
  word-break:break-word;
}
.resumen__papel p:last-child{ margin-bottom:0; }

/* ── para el dueño ──────────────────────────────────────────────── */
.dueno{
  background:var(--petroleo);
  color:var(--hielo);
  padding:clamp(3.4rem,9vh,6rem) 0;
}
.dueno h2{ color:var(--hielo); }
.dueno__pantalla{ max-width:40ch; margin-bottom:clamp(2rem,4vh,3rem); }
/* A 420 px de mínimo caben dos y no tres: con tres, el cuarto bloque queda
   solo en una fila y la sección se ve rota. */
.dueno__grilla{
  display:grid; gap:1.8rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
}
.dueno__bloque h3{
  color:var(--coral-claro);
  font-family:var(--dato); font-size:.74rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.7rem;
}
.dueno__bloque p{
  font-size:var(--paso--1); line-height:1.6;
  color:var(--celeste-claro);
  margin:0;
}
.dueno__bloque strong{ color:var(--hielo); }
.dueno .ej--inline{ outline-color:color-mix(in srgb, var(--coral-claro) 55%, transparent); }
.dueno__cierre{
  margin-top:clamp(2.2rem,5vh,3.4rem);
  padding-top:1.6rem;
  border-top:1px solid var(--linea-clara);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.6rem; justify-content:space-between;
}
.dueno__firma{
  margin:0; font-family:var(--dato); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--celeste-claro);
}
.dueno__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* ── pie ────────────────────────────────────────────────────────── */
.pie{
  background:var(--tinta);
  color:var(--hielo);
  padding:2.6rem 0;
}
.pie__fila{
  display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem;
  align-items:center; justify-content:space-between;
}
.pie__marca{ display:flex; align-items:center; gap:.8rem; }
.pie__logo{ width:44px; height:44px; }
.pie__nombre{
  margin:0; font-family:var(--display); font-size:1.15rem; font-weight:600;
}
.pie__sub{
  margin:.1rem 0 0; font-family:var(--dato); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--celeste-claro);
}
.pie__datos{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.pie__datos li > span{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--paso--1);
}
.pie__datos a{
  font-size:var(--paso--1); font-weight:600;
  text-underline-offset:4px;
  display:inline-flex; align-items:center; min-height:44px;
}
.pie__nota{
  margin:0; flex:1 1 100%;
  padding-top:1.2rem; border-top:1px solid var(--linea-clara);
  font-size:.76rem; color:var(--celeste-claro);
}
.pie__nota a{ color:var(--hielo); }

/* ── urgencia siempre a mano ────────────────────────────────────── */
/* Barra fija en el borde inferior, sólo en celular. Dos toques de 56 px:
   llamar y escribir. En escritorio no existe — ahí el teléfono está en la
   portada, en urgencias, en el pie y en la barra superior. */
.urgencia-barra{ display:none; }
@media (max-width:860px){
  body{ padding-bottom:calc(var(--alto-urgencia) + env(safe-area-inset-bottom,0px)); }
  .urgencia-barra{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:grid; grid-template-columns:1.15fr .85fr;
    background:var(--petroleo);
    border-top:1px solid rgba(234,246,250,.18);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -10px 26px -20px rgba(0,0,0,.9);
  }
  .urgencia-barra__btn{
    display:flex; flex-direction:column; justify-content:center;
    min-height:56px; padding:.5rem .9rem;
    text-decoration:none; color:var(--hielo);
  }
  .urgencia-barra__btn--llamar{ background:var(--coral); }
  .urgencia-barra__btn--llamar:hover{ background:#952C20; }
  .urgencia-barra__eyebrow{
    font-family:var(--dato); font-size:.6rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
    opacity:.85;
  }
  .urgencia-barra__btn--wsp .urgencia-barra__eyebrow{ color:var(--celeste-claro); opacity:1; }
  .urgencia-barra__txt{ font-size:.95rem; font-weight:800; line-height:1.2; }
}

/* ── reveals ────────────────────────────────────────────────────── */
/* La clase .revelar la pone main.js, no el HTML: si el script no carga,
   nada queda escondido. */
.js .revelar{
  opacity:0; transform:translateY(16px);
  transition:opacity .65s var(--salida), transform .65s var(--salida);
}
.js .revelar.visible{ opacity:1; transform:none; }

/* ── celular ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .cabecera__fila{ gap:.6rem; }
  .cabecera__cta{ display:none; }
  /* El nav sin JS queda como lista bajo la marca: se navega igual. */
  .nav{ flex:1 1 100%; }
  .nav__lista{ gap:.1rem; }

  .js .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--bruma);
    border-bottom:1px solid var(--linea);
    box-shadow:0 18px 30px -26px rgba(12,44,56,.9);
    max-height:0; overflow:hidden;
    transition:max-height .28s var(--salida);
  }
  .js .cabecera--menu .nav{ max-height:26rem; }
  .js .nav__lista{
    flex-direction:column;
    width:min(100% - 2.4rem, var(--ancho));
    margin-inline:auto;
    padding:.5rem 0 1rem;
  }
  .js .nav a{ width:100%; min-height:48px; }
  .cabecera{ position:sticky; }
}
@media (min-width:901px){
  .menu-btn{ display:none !important; }
  .cabecera__cta{ display:inline-flex; }
}

@media (max-width:560px){
  .portada__datos{ gap:1.1rem 1.6rem; }
  .lamina{ min-height:78svh; }
  .lamina__caja--der{ margin-right:auto; }
  .form__pie .boton{ width:100%; }
}

/* ── movimiento reducido ────────────────────────────────────────── */
/* Se apaga lo intrusivo —los desplazamientos y las huellas que caminan— y
   se dejan los fundidos y los hovers. Windows trae esta preferencia
   activada de fábrica en muchas máquinas: apagarlo todo deja la página
   con cara de muerta para gente que sólo quería que nada se moviera. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .revelar{ transform:none; transition:opacity .4s ease; }
  .js .portada__texto > *,
  .js .portada__foto{ animation:aparecer .5s ease forwards; }
  .js .huella{ animation:aparecer .5s ease forwards; animation-delay:calc(var(--i) * .1s); }
  .js .visible .plan__nodo{ animation:none; }
  .boton:hover{ transform:none; }
  .cabecera{ transition-duration:1ms; }
  @keyframes aparecer{ from{ opacity:0; } to{ opacity:1; } }
}