/* ==========================================================================
   Richey Animal Clinic — design system v3
   Clinical calm: deep teal primary, the brand indigo kept as an accent,
   cool-neutral surfaces, Sora + Public Sans, square-cut cards, borders
   instead of drop shadows.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* The clinic's own blue, measured off richeyanimalclinic.com — it is the
     primary here, not an accent. */
  --indigo: #292B77;
  --indigo-deep: #1B1D55;
  --indigo-ink: #12143C;
  --indigo-soft: #6D70B8;
  --mist: #EDEEF8;
  --mist-2: #DCDEF1;

  /* Secondary: the slate the original pairs with its blue. */
  --aqua: #34394D;
  --aqua-deep: #23283A;
  --aqua-soft: #EDEEF2;

  --sun: #E3A33A;
  --sun-deep: #B87C14;
  --sun-soft: #FAF0DD;

  --coral: #C0492F;

  --paper: #FFFFFF;
  --sand: #F4F5F9;
  --line: #E2E3EE;
  --line-2: #C8CADC;

  --ink: #1B1D2E;
  --ink-2: #32364B;
  --slate: #5B5F74;
  --muted: #6A6E84;

  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --pill: 6px;

  --shadow-xs: 0 1px 1px rgba(18, 20, 60, .04);
  --shadow-sm: 0 1px 2px rgba(18, 20, 60, .06);
  --shadow: 0 10px 24px -18px rgba(18, 20, 60, .55);
  --shadow-lg: 0 24px 50px -32px rgba(18, 20, 60, .6);

  --display: "Sora", "Trebuchet MS", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shell: 1180px;
  --gutter: 22px;
  --head-h: 82px;
  --ease: cubic-bezier(.22, .68, .28, 1);
  /* Para lo que tiene que entrar sin llamar la atencion. La de arriba
     arranca de golpe —0.68 de pendiente nada mas salir— y se nota seca en
     un hover; esta sale suave y se posa despacio al final. */
  --ease-suave: cubic-bezier(.33, 1, .68, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 20px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.5rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.022em; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.015em; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
strong, b { font-weight: 700; color: var(--ink); }
em { font-style: italic; }
small { font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }
::selection { background: var(--mist-2); color: var(--ink); }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }

.shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }
.shell-wide { width: min(100% - 2 * var(--gutter), 1340px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 200; background: var(--indigo); color: #fff; padding: 10px 16px; border-radius: var(--pill); }
.skip:focus { left: 14px; }
.ico { width: 20px; height: 20px; flex: 0 0 auto; }
.ico.mini { width: 14px; height: 14px; }
.muted { color: var(--slate); }
.tiny { font-size: .82rem; color: var(--slate); line-height: 1.55; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--indigo); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border: 2px solid transparent; border-radius: var(--pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 .97rem/1 var(--body); letter-spacing: .005em; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s;
  text-decoration: none !important; white-space: nowrap;
}
.btn .ico { transition: transform .22s var(--ease); }
.btn:hover { filter: none; }
.btn:hover .ico:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: var(--indigo-deep); }
.btn-aqua { background: var(--aqua); color: #fff; }
.btn-aqua:hover { background: var(--aqua-deep); }
.btn-sun { background: var(--sun); color: #2A2102; }
.btn-sun:hover { background: #E9A62C; }
.btn-outline { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-outline:hover { border-color: var(--indigo); color: var(--indigo); background: var(--mist); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-ghost { background: var(--mist); color: var(--indigo); }
.btn-ghost:hover { background: var(--mist-2); }
.btn-lg { padding: 15px 28px; font-size: 1.02rem; }
.btn-sm { padding: 9px 16px; font-size: .88rem; }
.btn-block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--indigo); text-decoration: none; }
.link-arrow .ico { transition: transform .22s var(--ease-suave); width: 18px; height: 18px; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .ico { transform: translateX(4px); }

/* ---------- Kicker / section heads ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 700 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-deep);
}
.kicker .ico { width: 17px; height: 17px; color: var(--sun-deep); }
.sec-head { max-width: 62ch; margin-bottom: 38px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .sub { color: var(--slate); font-size: 1.08rem; margin: 0; }

/* ---------- Utility bar ---------- */
.utility { background: var(--indigo-ink); color: rgba(255,255,255,.82); font-size: .86rem; }
.utility .shell { display: flex; align-items: center; gap: 18px; height: 40px; }
.utility a { color: inherit; display: inline-flex; align-items: center; gap: 7px; }
.utility a:hover { color: #fff; text-decoration: none; }
.utility .ico { width: 15px; height: 15px; opacity: .8; }
.utility b { color: #fff; font-weight: 600; letter-spacing: .01em; }
.util-sep { flex: 1; }
.util-right { margin-left: auto; }
.open-badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .82rem; }
.open-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.open-badge.is-open i { background: var(--indigo-soft); box-shadow: 0 0 0 4px rgba(109, 112, 184, .25); }
.open-badge.is-closed i { background: var(--sun); box-shadow: 0 0 0 4px rgba(242, 179, 60, .18); }
.open-badge.dark { color: rgba(255,255,255,.8); }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s, background .25s; }
.site-head.is-stuck { box-shadow: 0 6px 20px -18px rgba(18,20,60,.55); border-bottom-color: var(--line); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); }
.head-inner { display: flex; align-items: center; gap: 20px; height: var(--head-h); }
.brand { flex: 0 0 auto; }
.brand img { width: clamp(180px, 20vw, 248px); height: auto; }
.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { position: relative; margin: 0; }
.nav > ul > li > a, .nav .nav-top {
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; border-radius: var(--pill);
  font: 600 .95rem/1 var(--body); color: var(--ink-2); background: none; border: 0; cursor: pointer; font-family: var(--body);
}
.nav > ul > li > a:hover, .nav .nav-top:hover { background: var(--mist); color: var(--indigo); text-decoration: none; }
.nav > ul > li > a.is-current { color: var(--indigo); background: var(--mist); }
.nav .chev { width: 15px; height: 15px; opacity: .6; transition: transform .2s; }
.nav .has-sub.open .chev { transform: rotate(180deg); }
.nav .sub {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; min-width: 286px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .2s var(--ease); z-index: 70;
}
.nav > ul > li:nth-last-child(-n+3) .sub { left: auto; right: 0; translate: 0 0; }
.has-sub:hover .sub, .has-sub.open .sub { opacity: 1; visibility: visible; transform: none; }
.nav .sub ul { list-style: none; margin: 0; padding: 0; }
.nav .sub li { margin: 0; }
.nav .sub a { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--r-xs); color: var(--ink-2); font-weight: 500; font-size: .94rem; }
.nav .sub a:hover { background: var(--mist); color: var(--indigo); text-decoration: none; }
.sub-cta { display: flex !important; align-items: center; gap: 11px; margin-top: 6px; padding: 12px 13px !important; background: var(--mist); border-radius: var(--r-sm); }
.sub-cta:hover { background: var(--mist-2) !important; }
.sub-cta .ico:first-child { width: 22px; height: 22px; color: var(--indigo); }
.sub-cta span { display: grid; flex: 1; }
.sub-cta small { color: var(--slate); font-weight: 400; font-size: .8rem; line-height: 1.3; }
.sub-cta .ico:last-child { width: 16px; height: 16px; color: var(--indigo); }
.head-cta { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.head-cta .call { display: none; }
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; cursor: pointer; padding: 0 12px; }
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile nav (full-screen sheet) ---------- */
.mobile-nav { position: fixed; inset: 0; z-index: 55; background: var(--paper); overflow-y: auto; padding: calc(var(--head-h) + 18px) var(--gutter) 40px; animation: sheet .28s var(--ease); }
.mobile-nav[hidden] { display: none; }
@keyframes sheet { from { opacity: 0; transform: translateY(-10px); } }
.m-list { list-style: none; margin: 0 0 26px; padding: 0; }
.m-list > li { border-bottom: 1px solid var(--line); }
.m-list > li > a, .m-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 16px 2px; font: 600 1.28rem/1.2 var(--display); color: var(--ink); background: none; border: 0; cursor: pointer; text-align: left;
}
.m-toggle .ico { transition: transform .25s; color: var(--slate); }
.m-toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
.m-list ul { list-style: none; margin: 0 0 10px; padding: 0 0 8px 2px; display: none; }
.m-list .open + ul, .m-list ul.open { display: block; }
.m-list ul a { display: block; padding: 10px 0 10px 14px; color: var(--ink-2); border-left: 2px solid var(--line); font-size: 1rem; }
.m-list ul a:hover { color: var(--indigo); border-left-color: var(--indigo); text-decoration: none; }
.m-foot { display: grid; gap: 10px; }
.m-foot p { margin: 12px 0 0; color: var(--slate); font-size: .92rem; }
body.nav-open { overflow: hidden; }

/* ---------- Home hero ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 76px) 0 clamp(60px, 8vw, 110px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 72%;
  background: radial-gradient(120% 90% at 85% 0%, var(--mist) 0%, rgba(239,240,251,0) 60%), linear-gradient(180deg, var(--sand) 0%, rgba(247,242,233,0) 100%);
  z-index: -1;
}
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.hero h1 { margin-bottom: 18px; }
.hero h1 .accent { position: relative; display: inline-block; color: var(--indigo); }
.hero h1 .accent::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .32em; z-index: -1;
  background: var(--sun); border-radius: var(--pill); opacity: .5; transform: rotate(-1deg) scaleX(0); transform-origin: left; animation: swipe .9s .35s var(--ease) forwards;
}
@keyframes swipe { to { transform: rotate(-1deg) scaleX(1); } }
.hero .lede { font-size: 1.14rem; color: var(--ink-2); max-width: 52ch; margin-bottom: 26px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero-trust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.stars { display: inline-flex; gap: 2px; color: var(--sun-deep); }
.stars .ico { width: 17px; height: 17px; fill: var(--sun); stroke: none; }
.hero-trust p { margin: 0; font-size: .92rem; color: var(--slate); }
.hero-trust b { color: var(--ink); }
.hero-art { position: relative; }
.hero-art .arch { position: relative; z-index: 2; }
.hero-art .chip-float {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 11px 15px; box-shadow: var(--shadow);
  font-size: .9rem; font-weight: 600; animation: bob 5s ease-in-out infinite;
}
.hero-art .chip-float .ico { width: 20px; height: 20px; color: var(--aqua); }
.hero-art .chip-float.f1 { top: 11%; left: -4%; }
.hero-art .chip-float.f2 { bottom: 13%; right: -5%; animation-delay: -2.4s; }
.hero-art .chip-float small { display: block; font-weight: 400; color: var(--slate); font-size: .78rem; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.blob { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 1; }
.blob.b1 { width: 58%; aspect-ratio: 1; background: var(--aqua-soft); top: -6%; right: -8%; }
.blob.b2 { width: 42%; aspect-ratio: 1; background: var(--sun-soft); bottom: -5%; left: -9%; }
.hero-pets { position: relative; }
.hero-pets img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.hero-pets img.is-on { opacity: 1; position: relative; }
.hero-dots { display: flex; gap: 7px; justify-content: center; margin-top: 18px; }
.hero-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--line-2); cursor: pointer; transition: .2s; }
.hero-dots button.is-on { background: var(--indigo); width: 26px; border-radius: var(--pill); }

/* The signature arch shape ---------------------------------------------- */
.arch { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--mist); border: 1px solid var(--line); }
.arch img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 4.2; }
.arch.wide img { aspect-ratio: 16 / 11; }
/* Excepción: la imagen de la tienda no es una foto sino un cartel con el
   texto dentro («Visit our online store · Shop now»). Es de 600x344 y la
   caja pide 16/11, así que `cover` recortaba 55px por cada lado: se comía
   la V de «VISIT» por la izquierda y mordía al cachorro por la derecha.
   Una foto aguanta ese recorte; un texto no.
   Se le da su proporción, que entra entera y sin franjas. Va escrita y no
   `auto`: la imagen es `loading="lazy"` y con `auto` la caja medía cero de
   alto hasta que cargaba, así que la página daba un salto al llegar a ella.
   El día que la clínica dé un cartel en 16/11, esta regla se puede quitar y
   no cambia nada. */
.arch img[src$="store-graphic.webp"] { aspect-ratio: 600 / 344; }
.arch.soft { border-radius: var(--r-xl); }

/* ---------- Quick actions ---------- */
/* El margen negativo con que .quick lapaba sobre el hero viejo lo pisa la
   regla de más abajo desde que existe .hero-bar; aquí sólo queda lo que sigue
   haciendo falta: el apilado sobre la banda oscura. */
.quick { position: relative; z-index: 5; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.quick-card {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
/* La transicion va en «.is-in» y no en «.quick-card» a secas por una razon
   concreta: las tarjetas llevan tambien la clase «reveal», y
   «.reveal { transition: opacity .7s, transform .7s }» esta mas abajo en
   este mismo fichero con la misma especificidad, asi que GANABA y se
   llevaba por delante lo que se pusiera aqui.
   El efecto era el que se veia: el fondo, la sombra y el filete —que no
   estan en la lista de .reveal— cambiaban de golpe, mientras el
   desplazamiento tardaba 0.7s. De ahi que el hover se sintiera seco por
   mucho que se tocaran los valores.
   Con «.is-in» (dos clases) gana esta, y ademas sólo a partir del momento
   en que la tarjeta ya ha entrado: la animacion de entrada la sigue
   gobernando .reveal con sus 0.7s, como el resto de la pagina. */
.quick-card.is-in {
  transition: transform .25s var(--ease-suave), box-shadow .25s var(--ease-suave),
              background-color .25s var(--ease-suave), border-color .25s var(--ease-suave);
}
/* Lo de dentro cambia de color con la tarjeta; sin esto el texto saltaba a
   blanco de golpe mientras el fondo todavia estaba entrando. */
.quick-card.is-in b, .quick-card.is-in span, .quick-card.is-in .q-ico, .quick-card.is-in .link-arrow {
  transition: color .25s var(--ease-suave), background-color .25s var(--ease-suave);
}
/* El hover tiene que notarse: la transicion ya anunciaba transform y sombra,
   pero no habia regla que las cambiara, asi que al pasar por encima sólo se
   recoloreaba el filete y la tarjeta no parecia pulsable.

   Se tiñe con el azul de la casa, pero en claro —--mist-2, que es el mismo
   tono rebajado— y lo hace CUALQUIERA de las cuatro, la que tengas debajo
   del raton. Antes el relleno estaba fijo en la primera: marcaba jerarquia,
   pero dejaba a las otras tres como si no se pudieran pulsar.

   En claro y no en el azul pleno por dos razones. Una, que cuatro tarjetas
   que se vuelven azul oscuro al pasar por encima son mucho color para una
   pagina que ya tiene el hero y la franja en azul. Y dos, la de verdad: el
   indigo medio (--indigo-soft) esta medido y no vale para fondo —con texto
   blanco da 4.51 de contraste y con texto oscuro 3.60, los dos al filo—,
   mientras que este tinte deja el titulo en 12.5 y la descripcion en 4.7
   sin tocar el color del texto.

   El efecto es a proposito discreto: dos pixeles de subida, sombra corta y
   menos de dos decimas al entrar. Lo que se percibe como «suave» no es tanto el color como
   el recorrido y el tiempo; con seis pixeles y un salto rapido, el mismo
   tinte se siente brusco.

   El foco del teclado recibe lo mismo: quien no usa raton tiene derecho a
   ver donde esta. */
.quick-card:hover,
.quick-card:focus-visible {
  /* La ida algo mas corta que la vuelta: responde al entrar el raton y se
     deja ir al salir, que es donde una transicion corta se siente como un
     corte. */
  transition-duration: .18s;
  transform: translateY(-2px); box-shadow: 0 10px 22px -18px rgba(18,20,60,.42);
  background: var(--mist-2); border-color: var(--indigo-soft); text-decoration: none;
}
/* El chip del icono pasa a blanco para seguir separandose del fondo, que
   ahora es el que lleva el tinte. */
.quick-card:hover .q-ico,
.quick-card:focus-visible .q-ico { background: var(--paper); color: var(--indigo); }
.quick-card:hover .link-arrow,
.quick-card:focus-visible .link-arrow { color: var(--indigo); }
.quick-card .q-ico { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; background: var(--sand); color: var(--aqua); }
.quick-card .q-ico .ico { width: 23px; height: 23px; }
.quick-card b { font-family: var(--display); font-size: 1.08rem; color: var(--ink); }
.quick-card span { color: var(--slate); font-size: .92rem; line-height: 1.45; }
.quick-card .link-arrow { margin-top: auto; padding-top: 8px; font-size: .9rem; color: var(--aqua); }
/* El ambar de la marca marca el camino, igual que en las tarjetas de servicio */
.quick-card .link-arrow .ico { color: var(--sun); }

/* ---------- Bands ---------- */
.band { padding: clamp(56px, 7vw, 96px) 0; position: relative; }
.band.tight { padding: clamp(38px, 4.5vw, 60px) 0; }
.band.sand { background: var(--sand); }
.band.mist { background: var(--mist); }
.band.aqua { background: var(--aqua-soft); }
.band.ink { background: var(--indigo-ink); color: rgba(255,255,255,.85); }
.band.ink h2, .band.ink h3 { color: #fff; }
.band.paper-edge::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); }

/* ---------- Welcome / split rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.art-left { direction: rtl; }
.split.art-left > * { direction: ltr; }
.split-art { position: relative; }
.split-art .stack-2 { display: grid; grid-template-columns: 1.3fr .9fr; gap: 14px; align-items: end; }
.split-art .stack-2 img { border-radius: var(--r-lg); object-fit: cover; width: 100%; }
.split-art .stack-2 img:first-child { aspect-ratio: 4/5; }
.split-art .stack-2 img:last-child { aspect-ratio: 1; }
.split-text .prose { margin-bottom: 22px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.badge-row span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--pill); background: #fff; border: 1px solid var(--line); font-size: .88rem; font-weight: 600; }
.badge-row .ico { width: 16px; height: 16px; color: var(--indigo); }

/* ---------- Bento services ----------

   Las tarjetas eran una foto a sangre con el texto blanco encima sobre un
   degradado. Tiene dos problemas: el texto se lee distinto en cada tarjeta
   —depende de lo que haya en la foto justo debajo— y cinco rectángulos
   oscuros seguidos pesan mucho en una página por lo demás clara.

   Ahora la foto es una banda arriba y el texto va debajo, sobre blanco: se
   lee siempre igual, la fotografía —que en una clínica es lo que engancha—
   se ve entera en vez de medio tapada por el velo, y la sección respira.
   Es además lo que hacen las webs veterinarias que se ponen de ejemplo. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }

.svc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  grid-column: span 2; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.svc-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow);
  border-color: var(--line-2); text-decoration: none;
}

/* La banda de foto. En la tarjeta ancha es más baja: a igual altura, una foto
   de 582px de ancho se comería la tarjeta entera. */
.svc-card .svc-img { display: block; overflow: hidden; background: var(--sand); }
.svc-card .svc-img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3 / 2; transition: transform .6s var(--ease);
}
.svc-card.big .svc-img img { aspect-ratio: 21 / 9; }
.svc-card:hover .svc-img img { transform: scale(1.05); }
/* El velo era para poder leer encima de la foto; ya no hay nada encima. */
.svc-card .svc-shade { display: none; }

/* El texto. No hay un envoltorio en el marcado —la plantilla escribe h3, p y
   el enlace sueltos—, así que el margen lateral lo pone cada uno. */
.svc-card h3 { margin: 0; padding: 18px 20px 0; font-size: 1.12rem; color: var(--ink); line-height: 1.3; }
.svc-card p {
  margin: 8px 0 0; padding: 0 20px; font-size: .93rem; line-height: 1.55;
  color: var(--slate); max-width: 46ch;
}
/* Tres líneas para todos: los resúmenes miden entre 47 y 230 caracteres, y
   sin recortar el «Learn more» de cada tarjeta caía a una altura distinta. */
.bento .svc-card p {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* margin-top:auto empuja el enlace abajo: las tarjetas de una fila miden lo
   mismo (el grid las estira), así que los cinco pies quedan alineados. */
.svc-card .go {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto; padding: 16px 20px 18px;
  font-weight: 700; font-size: .9rem; color: var(--aqua);
}
/* El ámbar de la marca es el único acento de color de la tarjeta: marca el
   camino sin repetir el azul del encabezado y los botones. */
.svc-card .go .ico { color: var(--sun); }
.svc-card .go .ico { transition: transform .22s var(--ease); width: 17px; height: 17px; }
.svc-card:hover .go .ico { transform: translateX(4px); }

.svc-card.big { grid-column: span 3; }
.svc-card.big h3 { font-size: 1.3rem; }

/* El servicio que todavía no tiene página: en vez de «Learn more», el aviso
   y el teléfono. La pastilla va sobre la foto, que es donde se ve. */
.svc-card .pill-tag {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: rgba(255,255,255,.94); color: var(--ink); border-radius: var(--pill);
  padding: 5px 12px; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
/* Mas especifico que el recorte de tres lineas de arriba: con «.bento
   .svc-card p» ganando, esto heredaba display:-webkit-box con orientacion
   vertical y el icono del telefono caia encima del numero en vez de al lado. */
.bento .svc-card p.svc-tel {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding: 16px 20px 18px; font-weight: 700; color: var(--aqua); -webkit-line-clamp: none;
}
.svc-card .svc-tel .ico { width: 17px; height: 17px; }

/* La barra de cierre de la sección.
   Un «ver todos» no es un servicio: no compite con las tarjetas, cierra. */
.svc-all {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: 20px; margin-top: 18px; padding: 20px 24px;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--ink); transition: border-color .25s var(--ease), background .25s var(--ease);
}
.svc-all:hover { text-decoration: none; border-color: var(--line-2); background: var(--paper); }
.svc-all .s-ico {
  grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 14px;
  background: var(--paper); color: var(--sun-deep); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.svc-all h3 { grid-column: 2; grid-row: 1; margin: 0; padding: 0; font-size: 1.1rem; }
.svc-all p  { grid-column: 2; grid-row: 2; margin: 2px 0 0; padding: 0; font-size: .92rem; color: var(--slate); max-width: none; }
.svc-all .go {
  grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 0; font-weight: 700; font-size: .92rem; color: var(--aqua); white-space: nowrap;
}
.svc-all .go .ico { width: 17px; height: 17px; color: var(--sun); transition: transform .22s var(--ease); }
.svc-all:hover .go .ico { transform: translateX(4px); }
/* En estrecho deja de ser barra y se apila: si no, el «See all services»
   empuja al título y lo parte en dos. */
@media (max-width: 700px) {
  .svc-all { grid-template-columns: auto 1fr; row-gap: 14px; }
  .svc-all .go { grid-column: 1 / 3; grid-row: 3; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--paper); padding: 16px 0; }
.marquee-track { display: flex; gap: 42px; width: max-content; animation: marq 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 42px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--slate); white-space: nowrap; }
.marquee span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Team ---------- */
.vet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.vet-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: 220px 1fr; }
.vet-card .vet-photo { background: var(--mist); }
.vet-card .vet-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }
.vet-card .vet-body { padding: 24px; display: flex; flex-direction: column; }
.vet-card h3 { margin-bottom: 2px; }
.vet-card .role { color: var(--aqua-deep); font-weight: 700; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.vet-card p { font-size: .95rem; color: var(--slate); }
.vet-card .link-arrow { margin-top: auto; }
.vet-full { display: grid; grid-template-columns: 340px 1fr; gap: 38px; align-items: start; margin-bottom: 64px; }
.vet-full .arch { position: sticky; top: calc(var(--head-h) + 24px); }
.vet-full .vet-head { margin-bottom: 18px; }
.vet-full h2 { margin-bottom: 4px; }

/* ---------- Reviews ---------- */
.rev-wrap { position: relative; }
.rev-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 20px; scrollbar-width: none; }
.rev-track::-webkit-scrollbar { display: none; }
.rev-card { scroll-snap-align: start; flex: 0 0 min(380px, 84vw); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.rev-card .ico.q { width: 30px; height: 30px; color: var(--mist-2); }
.rev-card p { margin: 0; font-size: 1rem; color: var(--ink-2); flex: 1; }
.rev-card .who { display: flex; align-items: center; gap: 12px; }
.rev-card .av { width: 42px; height: 42px; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--display); }
.rev-card .who b { display: block; }
.rev-card .who small { color: var(--slate); }
.rev-nav { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 4px; }
.rev-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: .18s; }
.rev-nav button:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.rev-nav button:disabled { opacity: .35; cursor: default; background: #fff; color: var(--ink); border-color: var(--line-2); }

/* ---------- Blog cards ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); text-decoration: none; }
.post-card .ph { aspect-ratio: 16/10; background: var(--mist); overflow: hidden; }
.post-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .ph img { transform: scale(1.05); }
.post-card .pb { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-card time { font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--aqua-deep); }
.post-card h3 { margin: 8px 0 8px; font-size: 1.14rem; }
.post-card p { font-size: .93rem; color: var(--slate); margin: 0 0 14px; }
.post-card .link-arrow { margin-top: auto; font-size: .9rem; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { display: grid; grid-template-columns: 112px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; }
.post-list li:last-child { border-bottom: 0; }
.post-list time { font-size: .84rem; color: var(--slate); font-weight: 600; }
.post-list a { font-weight: 600; color: var(--ink); }
.post-list a:hover { color: var(--indigo); }
.post-list .ext { color: var(--slate); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; padding: clamp(30px, 4vw, 50px) 0 clamp(44px, 5vw, 68px); overflow: hidden; }
.page-hero.tone-mist { background: linear-gradient(180deg, var(--mist) 0%, rgba(233,243,241,.3) 100%); }
.page-hero.tone-sand { background: linear-gradient(180deg, var(--mist) 0%, rgba(233,243,241,.3) 100%); }
.page-hero.tone-aqua { background: linear-gradient(180deg, var(--mist) 0%, rgba(233,243,241,.3) 100%); }
.page-hero.tone-ink { background: var(--indigo-ink); color: rgba(255,255,255,.86); }
.page-hero.tone-ink h1 { color: #fff; }
.page-hero.tone-ink .crumbs a, .page-hero.tone-ink .crumbs i { color: rgba(255,255,255,.6); }
.page-hero.tone-ink .crumbs span { color: #fff; }
.ph-inner { display: grid; gap: 34px; align-items: center; }
.page-hero.has-art .ph-inner { grid-template-columns: 1.1fr .9fr; }
.ph-text h1 { margin-bottom: 14px; }
.ph-text .lede { font-size: 1.1rem; color: var(--ink-2); max-width: 56ch; margin: 0; }
.ph-art { position: relative; }
.ph-art .arch { max-width: 420px; margin-left: auto; position: relative; z-index: 2; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: .86rem; margin-bottom: 16px; }
.crumbs a { color: var(--slate); }
.crumbs i { color: var(--muted); font-style: normal; }
.crumbs span { color: var(--ink); font-weight: 600; }

/* ---------- Prose ---------- */
.prose { font-size: 1.04rem; color: var(--ink-2); }
.prose.narrow { max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; color: var(--indigo); }
.prose h2 + h3 { margin-top: 1em; }
.prose ul, .prose ol { padding-left: 1.1em; }
.prose ul li::marker { color: var(--indigo); }
.prose ol li::marker { color: var(--indigo); font-weight: 700; }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mist-2); text-decoration-thickness: 2px; }
.prose a:hover { text-decoration-color: var(--indigo); }
.prose img { border-radius: var(--r-lg); margin: 1.6em 0; }
.prose .lead { font-size: 1.16rem; color: var(--ink); }
.pull { margin: 2em 0; padding: 26px 30px; background: var(--mist); border-radius: var(--r-lg); position: relative; }
.pull .ico { width: 30px; height: 30px; color: var(--indigo-soft); margin-bottom: 10px; }
.pull blockquote { margin: 0; font-family: var(--display); font-size: 1.22rem; line-height: 1.4; font-weight: 500; color: var(--ink); }
.pull figcaption { margin-top: 12px; font-size: .9rem; color: var(--slate); font-weight: 600; }
.note { display: flex; gap: 14px; padding: 18px 22px; border-radius: var(--r); background: var(--sun-soft); border: 1px solid #F0DCB4; margin: 1.8em 0; }
.note .ico { width: 21px; height: 21px; color: var(--sun-deep); margin-top: 2px; }
.note p:last-child { margin-bottom: 0; }
.note.aqua { background: var(--mist); border-color: #CFD1EC; }
.note.aqua .ico { color: var(--indigo); }

/* ---------- Steps ---------- */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 2em 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; margin: 0; }
.step-n { width: 44px; height: 44px; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.steps h3 { margin: 6px 0 4px; font-size: 1.1rem; }
.steps p { margin: 0; color: var(--slate); font-size: .96rem; }

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 20px 2px; background: none; border: 0; cursor: pointer; text-align: left; font: 600 1.06rem/1.35 var(--display); color: var(--ink); }
.acc-q:hover { color: var(--indigo); }
.acc-ico { position: relative; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--mist); }
.acc-ico::before, .acc-ico::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; background: var(--indigo); border-radius: 2px; transition: .25s var(--ease); }
.acc-ico::before { width: 10px; height: 2px; }
.acc-ico::after { width: 2px; height: 10px; }
.acc-q[aria-expanded="true"] .acc-ico::after { transform: rotate(90deg); opacity: 0; }
.acc-a > div { padding: 0 2px 22px; color: var(--ink-2); font-size: 1rem; max-width: 72ch; }
.acc-a p:last-child { margin-bottom: 0; }

/* ---------- Chip rail ---------- */
.rail-band { padding-block: clamp(40px, 5vw, 62px); background: var(--sand); }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.rail-head h2 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.chip-rail { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 2px; scrollbar-width: none; }
@media (max-width: 820px) {
  .rail-band .shell { position: relative; }
  .chip-rail { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .chip-rail > * { scroll-snap-align: start; }
  .rail-band .shell::after {
    content: ""; position: absolute; right: 0; bottom: 8px; width: 48px; height: 46px;
    pointer-events: none; background: linear-gradient(90deg, rgba(244,245,249,0), var(--sand));
  }
}
.chip-rail::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; padding: 10px 18px; border-radius: var(--pill); background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: .93rem; white-space: nowrap; transition: .18s; }
.chip:hover { border-color: var(--indigo); color: var(--indigo); text-decoration: none; }
.chip.is-on { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* ---------- Info cards ---------- */
/* Las tres fichas y, debajo, el bloque del mapa. El hueco entre ambos es el
   mismo que separa las fichas entre si: sin el, la fila de fichas quedaba
   pegada al mapa, como un solo bloque de cuatro piezas mal cortado. */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
/* En columna y con el ultimo elemento empujado abajo: la rejilla estira las
   tres fichas a la misma altura, pero el contenido se quedaba arriba y los
   pies caian a 26, 36 y 62px del borde. Asi la pastilla de «Open now» y los
   dos enlaces quedan a la misma linea. */
.info-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px;
}
.info-card > :last-child { margin-top: auto; margin-bottom: 0; }
.info-card.accent { background: var(--indigo); border-color: var(--indigo); color: rgba(255,255,255,.85); }
.info-card.accent h3, .info-card.accent a { color: #fff; }
.info-card.accent .muted { color: rgba(255,255,255,.6); }
.info-card h3 { display: flex; align-items: center; gap: 9px; font-size: 1.08rem; margin-bottom: 14px; }
.info-card h3 .ico { color: var(--indigo); width: 19px; height: 19px; }
.info-card.accent h3 .ico { color: var(--sun); }
.info-card p { margin-bottom: .6em; font-size: .97rem; }
.hours { list-style: none; padding: 0; margin: 0 0 14px; }
.hours li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .94rem; margin: 0; }
.hours li:last-child { border-bottom: 0; }
.hours b { font-family: var(--display); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--indigo); color: rgba(255,255,255,.85); position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: rgba(255,255,255,.06); right: -120px; top: -160px; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band .kicker { color: var(--sun); }
.cta-band .kicker .ico { color: var(--sun); }
.cta-inner { display: grid; grid-template-columns: 1.3fr auto; gap: 30px; align-items: center; position: relative; z-index: 1; }
.cta-inner p { margin: 0; max-width: 56ch; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery button { padding: 0; border: 0; background: var(--mist); border-radius: var(--r); overflow: hidden; cursor: zoom-in; aspect-ratio: 1; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.gallery button:hover img { transform: scale(1.07); }
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(12,13,36,.92); display: none; place-items: center; padding: 30px; }
.lightbox.open { display: grid; }
.lightbox img { max-width: min(94vw, 1100px); max-height: 86vh; border-radius: var(--r); object-fit: contain; }
.lightbox button { position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lightbox .lb-close { top: 24px; right: 24px; }
.lightbox .lb-prev { left: 24px; top: 50%; translate: 0 -50%; }
.lightbox .lb-next { right: 24px; top: 50%; translate: 0 -50%; }
.lightbox button:hover { background: rgba(255,255,255,.26); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; }
.form-note { margin: 0; padding: 14px 18px; background: var(--mist); border-radius: var(--r-sm); font-size: .94rem; }
/* El aviso de que el envio no pudo ser, al volver de form-submit.php. */
.form-error { background: #FBEDEA; border: 1px solid #E8C4BB; color: var(--coral); font-weight: 600; }
.form-error:focus { outline: 2px solid var(--coral); outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: .93rem; }
.field .req { color: var(--coral); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.4 var(--body); color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 4px rgba(41,43,119,.16); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input[type="file"] { padding: 10px 12px; background: var(--sand); cursor: pointer; }
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font: 600 .88rem var(--body); cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--indigo); color: var(--indigo); }
.field textarea { resize: vertical; min-height: 130px; }
.field small { color: var(--slate); font-size: .84rem; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566763' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 17px; padding-right: 40px; }
.honeypot { position: absolute; left: -9999px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.form-success { display: none; align-items: center; gap: 10px; padding: 14px 18px; background: var(--aqua-soft); border: 1px solid #BFE3DF; border-radius: var(--r-sm); color: var(--aqua-deep); font-weight: 600; }
.form-success .ico { color: var(--aqua-deep); }
.form.is-sent .form-success { display: flex; }
.radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.radio-row input { width: 18px; height: 18px; accent-color: var(--indigo); }
.scale { display: flex; flex-wrap: wrap; gap: 8px; }
.scale label { position: relative; }
.scale input { position: absolute; opacity: 0; }
.scale span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1.5px solid var(--line-2); font-weight: 700; font-family: var(--display); cursor: pointer; transition: .15s; }
.scale input:checked + span { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.scale input:focus-visible + span { box-shadow: 0 0 0 4px rgba(41,43,119,.2); }

/* ---------- Media / logo rows ---------- */
.logo-row { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.logo-row img { max-height: 42px; max-width: 170px; width: auto; object-fit: contain; }
.app-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.app-badges img { height: 52px; width: auto; }

/* ---------- Link directory ---------- */
.link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.link-card { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.link-card > div { display: flex; flex-direction: column; height: 100%; }
.link-card .link-arrow { margin-top: auto; }
.link-card img { width: 76px; height: 76px; object-fit: contain; object-position: center; border-radius: var(--r-xs); background: var(--paper); padding: 4px; }
.link-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.link-card p { font-size: .92rem; color: var(--slate); margin-bottom: 10px; }

/* ---------- In-page nav (replaces the sidebar) ---------- */
.with-toc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 54px; align-items: start; }
.toc { position: sticky; top: calc(var(--head-h) + 26px); }
.toc h2 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc li { margin: 0; }
.toc a { display: block; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--slate); font-size: .93rem; font-weight: 500; }
.toc a:hover { color: var(--indigo); text-decoration: none; }
.toc a.is-active { color: var(--indigo); border-left-color: var(--indigo); font-weight: 700; }

/* ---------- Stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.stat-strip .s-val { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; color: var(--indigo); line-height: 1; }
.stat-strip .s-lbl { font-size: .9rem; color: var(--slate); margin-top: 6px; }

/* ---------- Footer ---------- */
.site-foot { background: var(--indigo-ink); color: rgba(255,255,255,.72); margin-top: 0; position: relative; }
.foot-cta { background: var(--indigo); padding: clamp(36px, 4.5vw, 54px) 0; }
.foot-cta .shell { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.foot-cta h2 { color: #fff; margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.foot-cta .kicker { color: var(--sun); margin-bottom: 8px; }
.foot-cta .kicker .ico { color: var(--sun); }
.foot-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 34px; padding: clamp(44px, 5vw, 68px) 0 44px; }
.foot-brand img { width: 220px; filter: brightness(0) invert(1); margin-bottom: 18px; }
.foot-brand p { font-size: .93rem; line-height: 1.6; }
.foot-social { display: flex; gap: 10px; margin-top: 18px; }
.foot-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; }
.foot-social a:hover { background: var(--sun); color: var(--indigo-ink); }
.site-foot h3 { color: #fff; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.site-foot h3 .ico { width: 16px; height: 16px; color: var(--sun); }
.site-foot a { color: rgba(255,255,255,.88); }
.site-foot a:hover { color: #fff; }
.foot-addr { font-size: .93rem; line-height: 1.7; }
.foot-addr .muted { color: rgba(255,255,255,.72); }
.foot-contact { display: grid; gap: 8px; font-size: .93rem; margin: 14px 0 0; }
.foot-contact a, .foot-contact span { display: inline-flex; align-items: center; gap: 8px; }
.foot-contact .ico { width: 15px; height: 15px; opacity: .6; }
.foot-hours { list-style: none; padding: 0; margin: 0 0 14px; font-size: .92rem; }
.foot-hours li { display: grid; gap: 1px; padding: 6px 0; margin: 0; }
.foot-hours b { color: #fff; font-weight: 600; }
.foot-links { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
.foot-links li { margin-bottom: 9px; }
.foot-links a { display: inline-flex; align-items: center; gap: 6px; }
.emerg-list { list-style: none; padding: 0; margin: 0 0 14px; }
.emerg-list li { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .9rem; margin: 0; }
.emerg-list li:last-child { border-bottom: 0; }
.emerg-list b { color: #fff; }
.emerg-list a { display: inline-flex; align-items: center; gap: 7px; color: var(--sun); font-weight: 600; }
.emerg-list .ico { width: 14px; height: 14px; }
.emerg-list .tag { font-style: normal; font-size: .78rem; color: rgba(255,255,255,.72); }
.emerg-list .tag.open { color: #B6B8E0; }
.site-foot .tiny { color: rgba(255,255,255,.45); }
.foot-base { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 20px 0 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: .86rem; }
.foot-base p { margin: 0; }
.foot-base span { opacity: .4; margin: 0 6px; }
.to-top { position: fixed; right: 20px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--indigo); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .25s var(--ease); z-index: 70; box-shadow: var(--shadow); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--indigo-deep); }

/* ---------- Mobile action bar ---------- */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff; border-top: 1px solid var(--line); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); grid-template-columns: repeat(3, 1fr); gap: 6px; box-shadow: 0 -6px 22px -12px rgba(23,25,60,.3); }
.mobile-bar a { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: var(--r-sm); color: var(--ink-2); font-size: .76rem; font-weight: 600; }
.mobile-bar a:hover { text-decoration: none; }
.mobile-bar .ico { width: 20px; height: 20px; }
.mobile-bar .hot { background: var(--indigo); color: #fff; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* ---------- Cookie notice ---------- */
.cookie { position: fixed; left: 50%; bottom: 20px; translate: -50% 0; z-index: 110; width: min(100% - 32px, 620px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 18px 22px; display: flex; align-items: center; gap: 18px; font-size: .92rem; opacity: 0; visibility: hidden; transform: translateY(14px); transition: .3s var(--ease); }
.cookie.show { opacity: 1; visibility: visible; transform: none; }
.cookie p { margin: 0; color: var(--slate); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav > ul > li > a, .nav .nav-top { padding: 9px 10px; font-size: .9rem; }
  .brand img { width: 180px; }
  .head-cta .btn span { display: none; }
}
@media (max-width: 1000px) {
  .nav, .head-cta { display: none; }
  .burger { display: flex; }
  .head-inner { justify-content: space-between; }
  .hero-inner, .split, .page-hero.has-art .ph-inner, .cta-inner, .with-toc { grid-template-columns: 1fr; }
  .split.art-left { direction: ltr; }
  .split-art { order: -1; }
  .with-toc .toc { position: static; display: none; }
  .vet-full { grid-template-columns: 1fr; }
  .vet-full .arch { position: static; max-width: 320px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .svc-card.big { grid-column: span 4; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: span 2; }
  .vet-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .link-grid { grid-template-columns: 1fr; }
  .ph-art .arch { max-width: 340px; margin-inline: 0; }
  .utility .shell { gap: 12px; }
  .utility a:not(.util-right) { display: none; }
  .utility a:first-child { display: inline-flex; }
}
/* Solo en tableta: las grandes ocupan fila entera y las pequenas empiezan
   fila nueva de dos en dos, asi que con un numero impar la ultima se
   quedaba sola con medio renglon vacio al lado. Se estira para cerrarlo.
   La paridad se mira sobre el total: las dos grandes ocupan fila entera y
   no alteran la cuenta, asi que total impar = una pequena suelta.
   Acotado por arriba y por abajo a proposito: en movil el grid es de dos
   columnas y un span 4 le crea columnas implicitas que lo descuadran
   (salia 15px 15px 147px 147px, con tarjetas de 46px de ancho). */
@media (min-width: 761px) and (max-width: 1000px) {
  .bento .svc-card:last-child:nth-child(odd) { grid-column: span 4; }
}

@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 68px; }
  .mobile-bar { display: grid; }
  .to-top { bottom: 84px; }
  .cookie { bottom: 80px; flex-direction: column; align-items: stretch; text-align: center; }
  .quick-grid, .bento, .post-grid, .gallery, .stat-strip { grid-template-columns: 1fr 1fr; }
  .svc-card, .svc-card.big { grid-column: span 2; min-height: 200px; }
  .svc-card.big { min-height: 240px; }
  .vet-card { grid-template-columns: 1fr; }
  .vet-card .vet-photo img { aspect-ratio: 16/11; }
  .form-row { grid-template-columns: 1fr; }
  .form { padding: 22px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-brand { grid-column: auto; }
  .hero-art .chip-float.f1 { left: 0; }
  .hero-art .chip-float.f2 { right: 0; }
  .rail-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .steps li { grid-template-columns: 42px 1fr; gap: 14px; }
  .step-n { width: 36px; height: 36px; font-size: .95rem; }
}
@media (max-width: 430px) {
  :root { --gutter: 16px; }
  .quick-grid, .post-grid, .stat-strip { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .pull { padding: 20px; }
  .lightbox button { width: 42px; height: 42px; }
  .lightbox .lb-close { top: 12px; right: 12px; }
  .lightbox .lb-prev { left: 8px; }
  .lightbox .lb-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .utility, .site-head, .mobile-nav, .mobile-bar, .to-top, .cookie, .foot-cta { display: none !important; }
  body { padding: 0; }
}

/* The CTA bands are teal, so the amber button is the contrast. These rules also
   have to out-rank `.site-foot a`, which otherwise repaints the footer button's
   label to translucent white and makes it look disabled. */
.cta-band .btn-primary, .foot-cta .btn-primary,
.site-foot .foot-cta a.btn-primary, .site-foot .foot-cta a.btn-sun {
  background: var(--sun); color: #2A2102; border-color: var(--sun);
}
.cta-band .btn-primary:hover, .foot-cta .btn-primary:hover,
.site-foot .foot-cta a.btn-primary:hover, .site-foot .foot-cta a.btn-sun:hover { background: #D2932E; }
.cta-band .btn-outline, .cta-band .btn-outline-light,
.foot-cta .btn-outline, .foot-cta .btn-outline-light,
.site-foot .foot-cta a.btn-outline, .site-foot .foot-cta a.btn-outline-light {
  border-color: rgba(255,255,255,.55); color: #fff; background: transparent;
}
.cta-band .btn-outline:hover, .foot-cta .btn-outline:hover,
.site-foot .foot-cta a.btn-outline:hover, .site-foot .foot-cta a.btn-outline-light:hover {
  background: rgba(255,255,255,.14); border-color: #fff; color: #fff;
}
.foot-cta .kicker, .cta-band .kicker { color: #FBE4BE; }
.foot-cta .kicker .ico, .cta-band .kicker .ico { color: var(--sun); }

/* ==========================================================================
   Full-bleed hero slider with the copy on top
   The headline never moves — only the photograph behind it changes, so the
   text stays readable and the slider can't swap a message out from under you.
   ========================================================================== */
.hero-full {
  position: relative; isolation: isolate;
  min-height: clamp(520px, 76vh, 740px);
  display: grid; grid-template-rows: 1fr auto;
  /* Lo que se ve mientras carga la primera foto: neutro, como el velo. */
  background: #0E0E12;
}
.hero-full .hero-pets { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-full .hero-pets img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 1.1s var(--ease), transform 7s linear;
}
.hero-full .hero-pets img.is-on { opacity: 1; transform: scale(1); }
/* El velo que deja leer el texto blanco sobre cualquier foto.

   Dos versiones anteriores y por que se cambiaron:

   · Estaba tintado con el azul de la marca y el extremo derecho era indigo
     saturado al 20%. Un azul fuerte, aunque sea poco opaco, no se lee como
     velo: se lee como que la foto es azul.
   · Luego fue un degradado neutro de izquierda a derecha, de 0.80 a 0.16.
     Resolvia el tinte pero dejaba la izquierda mucho mas cargada que la
     derecha, y esa diferencia se notaba mas sin el color que la disimulaba.

   Ahora es una capa PLANA: el mismo carbon y la misma opacidad en todo el
   hero. La foto se oscurece por igual, que es lo que se espera de un velo.

   El 0.62 esta medido, no elegido a ojo. Las cinco fotos tienen pixeles
   blancos puros dentro de la zona del texto, asi que el peor caso de verdad
   es blanco: sobre blanco, este velo deja el fondo en rgb(106,106,110) y el
   texto blanco encima da 5.4 de contraste, por encima del 4.5 que pide la
   norma para texto normal. Subirlo tapa foto sin ganar nada; bajarlo empieza
   a comprometer el subtitulo, que es el texto mas pequeno que va aqui. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(14,14,18,.62);
}
.hero-full-in {
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  padding: clamp(48px, 7vw, 96px) 0 clamp(26px, 3vw, 40px);
}
.hero-copy { max-width: 640px; }
.hero-copy .kicker.light { color: rgba(255,255,255,.82); }
.hero-copy .kicker.light .ico { color: var(--sun); }
.hero-copy h1 { color: #fff; margin-bottom: 18px; text-wrap: balance; }
.hero-copy h1 .accent { color: #fff; }
.hero-copy h1 .accent::after { background: rgba(227,163,58,.55); }
.hero-copy .lede { color: rgba(255,255,255,.88); font-size: 1.12rem; max-width: 52ch; margin-bottom: 28px; }
.btn-glass { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(255,255,255,.2); border-color: #fff; }

.hero-ctrl { display: flex; align-items: center; gap: 14px; }
.hero-arrow {
  width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08);
  color: #fff; border-radius: var(--r-sm); transition: background .2s, border-color .2s;
}
.hero-arrow:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.hero-pause .i-play, .hero-pause.is-paused .i-pause { display: none; }
.hero-pause.is-paused .i-play { display: block; }
.hero-pause { margin-left: 6px; }
.hero-full .hero-dots { margin: 0; gap: 8px; }
.hero-full .hero-dots button { background: rgba(255,255,255,.4); }
.hero-full .hero-dots button.is-on { background: #fff; width: 26px; }

/* The four things an anxious pet owner looks for, pinned under the hero. */
/* La franja de datos si va en el azul de la marca: no es fotografia sino
   una pieza de interfaz —horario, telefono, direccion, urgencias— y ahi el
   color de la casa ayuda a separarla de la foto de arriba. */
.hero-bar { background: rgba(14,16,52,.72); border-top: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); }
.hero-bar-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-item {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px;
  color: #fff; border-right: 1px solid rgba(255,255,255,.14); min-width: 0;
}
.hb-item:first-child { padding-left: 0; }
.hb-item:last-child { border-right: 0; padding-right: 0; }
.hb-item:hover { text-decoration: none; background: rgba(255,255,255,.07); }
.hb-item .ico { width: 20px; height: 20px; color: var(--sun); flex: none; }
.hb-item > span { display: block; font-weight: 600; font-size: .95rem; min-width: 0; }
.hb-item small { display: block; font-weight: 400; font-size: .8rem; color: rgba(255,255,255,.65); }
.hb-item .open-badge { margin-bottom: 3px; }
.hb-urgent .ico { color: #FFB4A2; }
@media (max-width: 1000px) {
  .hero-bar-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-item { padding: 14px 16px; }
  .hb-item:nth-child(2) { border-right: 0; }
  .hb-item:nth-child(3), .hb-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.14); }
  .hb-item:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 620px) {
  .hero-full { min-height: 0; }
  .hero-bar-in { grid-template-columns: 1fr; }
  .hb-item { border-right: 0; padding-left: 0; padding-right: 0; }
  .hb-item + .hb-item { border-top: 1px solid rgba(255,255,255,.14); }
}

/* The quick-action row used to lap over the old hero; the hero bar now sits
   there instead, so give it ordinary breathing room.

   El aire va arriba Y abajo. Con margen sólo arriba, las tarjetas quedaban a
   64px de la barra del hero y pegadas a la banda de cifras: su borde inferior
   y el borde superior de .stats se tocaban.

   Aquí había además una regla muerta, «.hero-bar + .quick { margin-top: 0 }»,
   que no podía cumplirse nunca: .hero-bar es el último hijo de .hero-full y
   .quick es hermano de .hero-full, así que no son hermanos entre sí. */
.quick { margin: clamp(36px, 5vw, 64px) 0; }

/* Bajo el logotipo iba una línea —«Independently owned · Pasadena, Texas»—
   que se ha retirado: no es sitio para ella. Con el logo solo, la cabecera
   vuelve a sus 82px y no hace falta nada más aquí.
   El enlace del logo sigue siendo bloque porque dentro ya sólo va la imagen. */
.brand { display: block; }

/* Stats: what twenty years in one neighbourhood actually looks like. */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sand); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: clamp(26px, 3.4vw, 40px) 24px; border-right: 1px solid var(--line); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; color: var(--indigo); letter-spacing: -.02em; }
.stat span { display: block; margin-top: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.stat small { display: block; margin-top: 6px; font-size: .88rem; color: var(--slate); }
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding-left: 0; padding-right: 20px; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Mobile action bar — the two things a worried owner needs with one thumb. */
.act-bar { display: none; }
@media (max-width: 720px) {
  .act-bar {
    display: grid; grid-template-columns: 1fr 1.25fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -14px rgba(18,20,60,.6);
  }
  .act-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 10px calc(15px + env(safe-area-inset-bottom));
    font-weight: 600; font-size: .95rem; color: var(--ink);
  }
  .act-bar a:hover { text-decoration: none; }
  .act-bar .ico { width: 19px; height: 19px; }
  .act-bar .ab-main { background: var(--indigo); color: #fff; }
  body { padding-bottom: 58px; }
}

/* Big footer: the clinic's name set large behind the practical columns. */
.foot-mark {
  font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 9vw, 6.4rem);
  line-height: .9; letter-spacing: -.04em; color: var(--indigo); opacity: .12;
  margin: 0 0 -6px; white-space: nowrap; overflow: hidden; user-select: none;
}
.hero-bar .open-badge { white-space: nowrap; }
/* Sin icono y con el horario debajo, esta celda se apila en columna. Estaba
   como «block», que anula el align-items:center de .hb-item: su texto salía 13px
   más alto que el de las otras tres y la fila se veía descuadrada. En columna
   se centra igual que las demás y mantiene el apilado.
   gap:0 porque los 12px de .hb-item separaban la pastilla del horario, que ya
   llevan su propio margen. */
.hero-bar .hb-item:first-child { flex-direction: column; justify-content: center; align-items: stretch; gap: 0; }
.hero-bar .hb-item:first-child small { margin-top: 5px; color: rgba(255,255,255,.7); }

/* El velo y el fondo oscuro de la tarjeta eran del diseño anterior, con el
   texto encima de la foto. Ya no hay nada encima: la foto es una banda y
   el texto va debajo sobre blanco. La clase «on-photo» sigue en el
   marcado de las dos páginas pero ya no pinta nada. */
.stat b { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }

/* ---------- Special-offer landing page ---------- */
.split-2-tight { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(26px, 4vw, 54px); align-items: start; }
.offer-card {
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--sun);
  border-radius: var(--r-lg); padding: clamp(26px, 3vw, 36px); text-align: center;
}
.offer-amt { font-family: var(--display); font-weight: 700; font-size: clamp(3.4rem, 8vw, 5rem); line-height: 1; color: var(--indigo); margin: 0; letter-spacing: -.04em; }
.offer-lbl { font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 6px 0 16px; }
.offer-card .stars { display: inline-flex; gap: 2px; margin: 10px 0 6px; color: var(--sun); }
.offer-card .stars .ico { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 860px) { .split-2-tight { grid-template-columns: 1fr; } }

/* The watermark is decorative: let it shrink rather than cut a word in half. */
@media (max-width: 720px) { .foot-mark { font-size: clamp(1.9rem, 10vw, 2.6rem); } }

/* Secondary lines on the teal contact card were below AA. */
.info-card.accent .muted, .info-card.accent small { color: rgba(255,255,255,.82); }

/* The decorative blobs were the last piece of the previous skin. */
.page-hero .blob { display: none; }

/* Hero art filled a narrower box than the copy beside it on phones. */
@media (max-width: 760px) { .ph-art, .ph-art .arch, .ph-art img { width: 100%; } }

/* The in-page CTA used to be a teal slab sitting directly on the footer's teal
   slab, which read as one band with two headlines. It is now a light band with
   a teal rule, so the footer keeps the only dark CTA on the page. */
.cta-band { background: var(--mist); color: var(--ink-2); border-top: 3px solid var(--indigo); }
.cta-band::after { display: none; }
.cta-band h2 { color: var(--ink); }
.cta-band .kicker, .cta-band .kicker .ico { color: var(--indigo); }
.cta-band .btn-primary,
.cta-band a.btn-primary { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.cta-band .btn-primary:hover, .cta-band a.btn-primary:hover { background: var(--indigo-deep); }
.cta-band .btn-outline, .cta-band .btn-outline-light,
.cta-band a.btn-outline, .cta-band a.btn-outline-light {
  background: transparent; border-color: var(--line-2); color: var(--ink);
}
.cta-band .btn-outline:hover, .cta-band a.btn-outline:hover,
.cta-band .btn-outline-light:hover, .cta-band a.btn-outline-light:hover {
  border-color: var(--indigo); color: var(--indigo); background: #fff;
}
.cta-band .btn-sun, .cta-band a.btn-sun { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* Care To Share — the two halves of the referral offer. */
.offer-row { display: flex; justify-content: center; gap: clamp(18px, 4vw, 48px); flex-wrap: wrap; margin-bottom: 26px; }
.offer-big { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--sun); border-radius: var(--r-lg); padding: 24px 38px; text-align: center; min-width: 190px; }
.offer-big span { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--indigo); letter-spacing: -.03em; }
.offer-big small { display: block; margin-top: 8px; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

/* Portrait pet photos put the subject above centre; a plain centre crop cuts
   foreheads off at these aspect ratios. */
.ph-art .arch img, .split-art .arch img { object-position: center 58%; }

/* The bios run far longer than the portraits, which left a tall empty column. */
@media (min-width: 900px) {
  .vet-full .vet-photo { position: sticky; top: calc(var(--head-h) + 22px); }
}

/* ---------- Map block ----------
   The address sits next to the embed, never under it, so a blocked third-party
   frame costs the map and nothing else. */
.map-block {
  display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
}
.map-card { padding: clamp(24px, 3vw, 34px); align-self: center; }
.map-card .label { display: flex; align-items: center; gap: 8px; font: 600 .7rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.map-card .label .ico { width: 15px; height: 15px; color: var(--indigo); }
.map-card .addr { font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.35; margin-bottom: 8px; }
.map-card .muted { font-size: .9rem; color: var(--slate); margin-bottom: 14px; }
.map-card .map-line { font-size: .92rem; color: var(--ink-2); margin-bottom: 20px; }
.map-slot {
  position: relative; min-height: 380px; border-left: 1px solid var(--line);
  background: var(--mist);
  background-image:
    linear-gradient(var(--mist-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--mist-2) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px;
  display: grid; place-items: center;
}
.map-mark { display: grid; justify-items: center; gap: 8px; color: var(--indigo); font: 600 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.map-mark .ico { width: 26px; height: 26px; }
.map-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) {
  .map-block { grid-template-columns: 1fr; }
  .map-slot { border-left: 0; border-top: 1px solid var(--line); min-height: 300px; }
}

/* Reviews: the live feed is a Google widget, so this block points at the real
   listing instead of showing quotes we cannot source. */
.rev-note {
  background: var(--mist); border: 1px solid var(--line); border-left: 3px solid var(--indigo);
  border-radius: var(--r); padding: 22px 24px; display: grid; gap: 12px; align-content: start;
}
.rev-note .rev-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--paper); color: var(--indigo); }
.rev-note .rev-ico .ico { width: 20px; height: 20px; }
.rev-note p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ==========================================================================
   Page banner — the inner-page header
   One shape for every page: a full-width band carrying the breadcrumb, the
   title and the intro. With a photograph it sits under a scrim; without one
   the band is solid brand blue.
   ========================================================================== */
.page-banner {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--indigo-deep); color: rgba(255,255,255,.92);
  display: grid; align-items: end;
  min-height: clamp(220px, 28vw, 340px);
}
.page-banner .pb-media { position: absolute; inset: 0; z-index: -1; }
.page-banner .pb-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.page-banner .pb-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(14,16,52,.92) 0%, rgba(16,18,56,.88) 18%, rgba(20,22,66,.78) 34%,
      rgba(26,28,78,.64) 48%, rgba(32,34,92,.48) 62%, rgba(37,39,105,.34) 78%, rgba(41,43,119,.26) 100%),
    linear-gradient(to top, rgba(14,16,52,.58) 0%, rgba(14,16,52,.2) 26%, transparent 52%);
}
.page-banner.is-plain {
  background:
    radial-gradient(900px 420px at 88% -40%, rgba(255,255,255,.10), transparent 70%),
    var(--indigo-deep);
}
.pb-body { padding: clamp(30px, 4vw, 48px) 0 clamp(26px, 3.4vw, 40px); }
.page-banner .crumbs { color: rgba(255,255,255,.72); margin-bottom: 16px; }
.page-banner .crumbs a { color: rgba(255,255,255,.82); }
.page-banner .crumbs a:hover { color: #fff; }
.page-banner .crumbs i { color: rgba(255,255,255,.45); }
.page-banner .crumbs [aria-current] { color: #fff; }
.page-banner .kicker.light { color: rgba(255,255,255,.82); margin-bottom: 14px; }
.page-banner .kicker.light .ico { color: var(--sun); }
.page-banner h1 { color: #fff; margin-bottom: 12px; max-width: 20ch; }
.page-banner .lede { color: rgba(255,255,255,.9); font-size: 1.1rem; max-width: 58ch; margin: 0; }
@media (max-width: 760px) {
  .page-banner { min-height: 0; }
  .page-banner .pb-shade {
    background: linear-gradient(180deg, rgba(14,16,52,.78) 0%, rgba(16,18,56,.86) 45%, rgba(20,22,66,.92) 100%);
  }
  .page-banner h1 { max-width: none; }
}