:root{
  --bone:#F7FAFF;
  --bone-dim:#EAF1FB;
  --navy:#133b85;
  --navy-mid:#2c4e9c;
  --navy-deep:#133b85;
  --navy-pale:#9DBBEB;
  --sky:#E3ECFB;
  --action:#2c4e9c;
  --action-deep:#0e2c63;
  --ink:#1B1B1B;
  --ink-soft:#5B6266;
  --sand:#C7D9F5;
  --gris-ceniza:#767777;
  --white:#FFFFFF;
  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(19,59,133,.10);
  --shadow-md:0 12px 32px rgba(19,59,133,.16);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --nav-h:84px;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--action) var(--bone-dim)}
/* Barra de scroll de marca (Chrome/Edge/Safari; Firefox usa scrollbar-color arriba).
   Sin selector, aplica a cualquier elemento con scroll propio (la página, los
   modales, carruseles con overflow), no solo al body. */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bone-dim)}
::-webkit-scrollbar-thumb{background:var(--action);border-radius:20px;border:3px solid var(--bone-dim)}
::-webkit-scrollbar-thumb:hover{background:var(--navy-deep)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

body{
  font-family:'Noto Sans',system-ui,-apple-system,sans-serif;
  background:var(--bone);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
section{scroll-margin-top:var(--nav-h)}
h1,h2,h3{font-family:'Figtree',system-ui,-apple-system,sans-serif;font-weight:800;letter-spacing:-0.02em;line-height:1.08;color:var(--navy);text-wrap:balance}
h2{font-size:clamp(28px,4vw,40px)}
h3{font-size:20px}
p{color:var(--ink-soft)}
p:not(.eyebrow-sub){text-wrap:pretty}
.eyebrow-sub{color:var(--ink-soft);font-size:16px;margin-top:10px}
.eyebrow-tag{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--action);margin-bottom:10px}
.section-head{margin-bottom:44px}
.section-pad{padding-block:88px;scroll-margin-top:28px}
@media (max-width:640px){.section-pad{padding-block:56px;scroll-margin-top:56px}}
#servicios{padding-bottom:0}
@media (max-width:640px){#servicios{padding-bottom:0}}

:focus-visible{outline:2.5px solid var(--action);outline-offset:3px;border-radius:4px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-pill);
  font-weight:700;font-size:15px;white-space:nowrap;
  transition:transform .2s var(--ease-bounce),box-shadow .18s var(--ease),background .18s var(--ease);
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:disabled{opacity:.65;cursor:default;pointer-events:none}
.btn-primary{background:var(--action);color:var(--white);box-shadow:var(--shadow-sm)}
.btn-primary:hover{box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.4)}
.btn-outline{background:transparent;color:var(--navy-deep);border:1.5px solid var(--sand)}
.btn-sm{padding:9px 18px;font-size:13.5px}

/* Header */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);display:flex;align-items:center;
  background:rgba(247,250,255,.72);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
header.scrolled{border-bottom-color:rgba(19,59,133,.1);box-shadow:0 2px 20px rgba(19,59,133,.06)}
.nav-row{width:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;font-family:'Figtree',system-ui,-apple-system,sans-serif;font-weight:800;font-size:16px;color:var(--navy-deep);line-height:1.15}
.brand img{height:32px;width:auto;flex-shrink:0}
#site-header .brand img{height:60px;transition:height .25s var(--ease)}
#site-header.scrolled .brand img{height:46px}
@media (max-width:860px){
  #site-header .brand img{height:46px}
  #site-header.scrolled .brand img{height:38px}
}
.footer-brand .brand img{height:56px}
.brand span{display:block}
.brand small{display:block;font-weight:600;font-size:11px;color:var(--ink-soft);letter-spacing:.01em}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-weight:600;font-size:13.5px;color:var(--ink-soft);position:relative;padding:6px 0;transition:color .2s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--action);transform:scaleX(0);transition:transform .25s var(--ease);transform-origin:left}
.nav-links a.active{color:var(--navy-deep)}
.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:10px}
.icon-btn{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;color:var(--navy-deep);transition:background .2s var(--ease)}
.icon-btn svg{width:20px;height:20px}
.hamburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.hamburger svg{width:22px;height:22px}
.hamburger svg line{transform-origin:12px 12px;transition:transform .22s var(--ease),opacity .22s var(--ease)}
.hamburger[aria-expanded="true"] svg line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] svg line:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] svg line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:99;
  background:var(--bone);padding:28px 24px;
  display:flex;flex-direction:column;gap:4px;overflow-y:auto;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-menu a{padding:16px 4px;font-weight:700;font-size:19px;border-bottom:1px solid var(--bone-dim)}
.mobile-menu .btn{margin-top:20px}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-cta .btn-primary{display:none}
  .hamburger{display:flex}
}
@media (min-width:861px){ .mobile-menu{display:none} }

/* Breadcrumb / back-to-home bar — used on every unit page so a visitor
   always has an obvious, one-click way back without feeling like they left
   the site (same header/footer/colors carry through everywhere too). */
.breadcrumb-bar{background:var(--bone-dim);border-bottom:1px solid var(--sand);margin-top:var(--nav-h)}
.breadcrumb-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.breadcrumb a{color:var(--action);font-weight:600}
.breadcrumb .crumb-current{color:var(--ink);font-weight:600}

/* Hero (home) */
.hero{
  position:relative;min-height:var(--hero-min-h, min(100svh,760px));
  overflow:hidden;
}
.hero-slide{
  /* El padding-top va aquí, no en .hero: .hero-slide es position:absolute;inset:0,
     así que se ancla al borde superior real del hero sin importar el padding que
     .hero tenga (inset:0 ignora el padding del contenedor). Poniéndolo en el propio
     flex container que centra el texto sí reserva ese espacio de verdad, para que
     el h1 nunca quede debajo del header fijo — antes esto no se notaba porque el
     hero era mucho más alto y sobraba espacio, pero con un hero bajo en celular el
     texto centrado quedaba tapado por el header translúcido. */
  position:absolute;inset:0;padding-top:var(--nav-h);box-sizing:border-box;
  display:flex;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .8s var(--ease);
}
.hero-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.hero-slide.no-photo{background:linear-gradient(135deg,var(--navy-deep),var(--navy-mid))}
.hero-wrap-split{display:flex;align-items:center;justify-content:space-between;gap:32px}
.hero-wrap-split .hero-copy{flex-shrink:1}
.hero-slide-logo{
  width:min(26vw,300px);flex-shrink:0;opacity:.9;pointer-events:none;
}
.hero-collage{
  width:min(56vw,700px);flex-shrink:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  pointer-events:none;
}
.hero-collage-card{
  background:var(--white);border-radius:10px;aspect-ratio:1;padding:12px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px rgba(0,0,0,.26);
}
.hero-collage-card img{max-width:100%;max-height:100%;object-fit:contain}
.hero-collage-card:nth-child(odd){transform:rotate(-3deg)}
.hero-collage-card:nth-child(even){transform:rotate(2.5deg)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  animation:heroZoom 7s var(--ease) forwards;
}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
/* pared, especialidades y odontología ahora usan recortes -mobile/-pc hechos
   a mano (uno por tamaño de pantalla vía <picture>), así que ya vienen
   encuadrados desde el archivo y no necesitan object-position propio (usan
   el center por defecto de .hero-bg img). El ecógrafo sigue con la foto
   original sin recortar aparte, por eso conserva su propio ajuste. */
.hero-photo-ecografo{object-position:center 25%}
.hero-overlay{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(14,33,61,.74) 0%,rgba(14,33,61,.64) 40%,rgba(14,33,61,.32) 68%,rgba(14,33,61,.12) 100%);
}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(32px,6vh,56px);width:100%}
.hero-copy{max-width:580px}
.hero-slide.is-active .hero-copy{animation:heroCopyIn .6s var(--ease) .1s backwards}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.hero-copy h1,.hero-copy h2{font-size:clamp(30px,4.6vw,54px);max-width:14ch;color:var(--white)}
.hero-copy p{font-size:17px;max-width:48ch;margin-top:14px;color:rgba(255,255,255,.85)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-eyebrow{
  font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy-pale);margin-top:16px;
}
.hero-controls{
  position:absolute;left:0;right:0;bottom:16px;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.hero-arrow{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.3);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),border-color .2s var(--ease);
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
}
.hero-arrow-prev{left:20px}
.hero-arrow-next{right:20px}
.hero-arrow svg{width:20px;height:20px}
.hero-arrow:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.hero-dots{display:flex;gap:9px}
.hero-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .2s var(--ease),transform .2s var(--ease)}
.hero-dot.is-active{background:var(--white);transform:scale(1.25)}
.hero-dot:hover{background:rgba(255,255,255,.75)}

@media (max-width:900px){
  .hero .wrap{padding-block:clamp(24px,5vh,40px)}
  .hero-overlay{
    background:linear-gradient(180deg,rgba(14,33,61,.60) 0%,rgba(14,33,61,.70) 100%);
  }
  .hero-slide-logo{display:none}
  .hero-collage{display:none}
  .hero-controls{bottom:10px}
  .hero-arrow{display:none}
}
@media (max-width:760px){
  /* En celular, "casi pantalla completa" (min(100svh,760px)) vuelve al hero
     mucho más alto que ancho — con fotos horizontales, object-fit:cover tiene
     que recortar casi todo el ancho para llenar ese alto, dejando ver muy poco
     de la foto (la del ecógrafo, que es vertical, no sufre este problema).
     Se limita a un rango bajo para que el recorte sea mucho menos agresivo.
     El piso bajó a 420px (antes 480px) porque el copy de la diapositiva 1
     (la más larga de las 6, la que dimensiona este piso) se acortó bastante
     — ya no hace falta tanto alto para que su texto quepa sin cortarse antes
     de llegar a los CTA. Sigue anulando min-height directamente, sin importar
     lo que --hero-min-h traiga puesto (en celular site.js ya no lo define,
     ver comentario ahí). */
  .hero{min-height:clamp(420px,64svh,520px)}
}

/* Banda de agendamiento rápido, justo debajo del hero */
.book-band{background:var(--action);color:var(--white)}
.book-band-inner{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;padding-block:22px}
.book-band-lead{display:flex;align-items:center;gap:14px;flex:1 1 260px;min-width:0}
.book-band-icon{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.book-band-icon svg{width:22px;height:22px}
.book-band-title{font-weight:800;font-size:16px;color:var(--white)}
.book-band-sub{font-size:13.5px;color:rgba(255,255,255,.8);margin-top:2px}
.book-band-form{display:flex;flex-wrap:wrap;gap:12px;flex:1 1 420px}
.book-band-select{
  flex:1 1 220px;min-width:0;height:48px;padding:0 36px 0 14px;border-radius:var(--radius-sm);
  border:none;background:var(--white);color:var(--ink);font:inherit;font-size:14.5px;
  appearance:none;-webkit-appearance:none;-moz-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='%235B6266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;
}
.book-band-form .btn{flex-shrink:0}
.book-band-form .btn-primary{background:var(--white);color:var(--action)}
.book-band-form .btn-primary:hover{background:var(--sky)}
.book-band-links{display:flex;flex-wrap:wrap;gap:20px 28px;flex-basis:100%;padding-top:4px}
.book-band-link{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--white);text-decoration:underline;text-underline-offset:3px}
.book-band-link svg{width:15px;height:15px;flex-shrink:0}
.book-band-link:hover{color:rgba(255,255,255,.85)}
@media (max-width:760px){
  .book-band-inner{padding-block:20px}
  .book-band-form{flex-direction:column;align-items:stretch}
  .book-band-links{flex-direction:column;gap:12px}
  /* La casilla "¿Qué necesitas?" se veía enorme en celular: no era apariencia
     nativa, era que su "flex:1 1 220px" fija el tamaño en el EJE PRINCIPAL, y
     al pasar .book-band-form a flex-direction:column ese eje principal pasa a
     ser el alto — por eso 220px se convertía en 220px de ALTO, no de ancho.
     "flex:0 0 auto" aquí anula ese flex-basis y deja que "height" mande. */
  .book-band-select{flex:0 0 auto;height:42px;font-size:13.5px}
  .book-band-form .btn{padding:11px 22px;font-size:14px}
}

/* Page hero (unit pages) — shorter than the home hero, photo where we have
   one for that unit, solid brand gradient where we don't (Seguridad y Salud
   Ocupacional, Ambulancia have no dossier photo yet — a gradient beats a
   stock photo that isn't really theirs). */
.page-hero{position:relative;overflow:hidden;color:var(--white)}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(14,33,61,.92) 0%,rgba(14,33,61,.78) 55%,rgba(14,33,61,.58) 100%)}
.page-hero.no-photo{background:linear-gradient(135deg,var(--navy-deep),var(--navy-mid))}
.page-hero-inner{position:relative;z-index:1;padding-block:60px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.page-hero-icon{width:68px;height:68px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.page-hero-icon svg{width:32px;height:32px;color:var(--white)}
.page-hero-copy h1{color:var(--white);font-size:clamp(28px,4vw,42px);max-width:20ch}
.page-hero-copy p{color:rgba(255,255,255,.85);margin-top:12px;max-width:58ch;font-size:16.5px}
.page-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
@media (max-width:640px){.page-hero-inner{padding-block:40px;gap:18px}}

/* Why us */
.why{background:var(--bone-dim);color:var(--ink)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.why-card{
  padding:4px 26px 4px 0;border-top:2px solid var(--sand);
  padding-top:22px;transition:border-color .25s var(--ease);
}
.why-card:not(:first-child){border-left:1px solid var(--sand);padding-left:26px}
.why-card svg{width:28px;height:28px;color:var(--navy);margin-bottom:16px;transition:transform .25s var(--ease)}
.why-card img{width:30px;height:30px;margin-bottom:16px;transition:transform .25s var(--ease)}
.why-card h3{color:var(--navy-deep);font-size:17px;margin-bottom:8px}
.why-card p{color:var(--ink-soft);font-size:14.5px}
@media (max-width:960px){
  .why-grid{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .why-card:nth-child(2n){border-left:1px solid var(--sand);padding-left:26px}
  .why-card:nth-child(2n+1){border-left:none;padding-left:0}
}
@media (max-width:560px){
  .why-grid{grid-template-columns:1fr;gap:0}
  .why-card{border-left:none !important;padding-left:0 !important}
}

/* Especialidades / categorías de servicio — reutilizado en cada página de
   unidad para agrupar sus servicios reales por categoría. */
.spec-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.spec-cat-card{
  background:var(--white);border:1.5px solid var(--action);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:14px;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s;
}
.spec-cat-card svg{width:28px;height:28px;color:var(--action)}
.spec-cat-card h3{margin-top:2px;font-size:18px}
.spec-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.spec-tag{font-size:13px;background:var(--sky);color:var(--navy-deep);padding:6px 12px;border-radius:var(--radius-pill);font-weight:600;border:none;font-family:inherit;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),transform .15s var(--ease)}
.spec-tag:active{transform:scale(.95)}
/* Variante solo-botón — contorno que se rellena al pasar el mouse, con flecha.
   Usada en las 8 páginas de unidad (cat_card_clickable/cat_card_bookable);
   .spec-tag en <span> puro (cat_card(), si algo la sigue usando) no cambia,
   por eso se usa el calificador de tipo `button` en vez de tocar .spec-tag. */
button.spec-tag{background:transparent;border:1.3px solid var(--sand);display:inline-flex;align-items:center;gap:5px;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .15s var(--ease)}
button.spec-tag svg{width:13px;height:13px;color:inherit;flex-shrink:0;transition:transform .18s var(--ease)}
/* Categorías con 7+ tags: grid interno de 2 columnas en vez de flex-wrap, para
   que se acomoden en menos filas en vez de apilarse en una sola columna. */
.spec-tags--grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.spec-tags--grid2 button.spec-tag{justify-content:space-between;width:100%}
@media (max-width:640px){.spec-tags--grid2{grid-template-columns:1fr}}
.price-note{font-size:13.5px;color:var(--ink-soft);margin-top:28px;text-align:center}
.team-directory-cta{margin-top:28px;text-align:center}
@media (max-width:960px){.spec-cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.spec-cat-grid{grid-template-columns:1fr}}

/* Especialidades — listado plano en orden alfabético (sin agrupar por área):
   una fila por especialidad, nombre + flecha, en columnas — estilo buscador
   de exámenes de clínica. Solo se usa en especialidades-medicas.html, en
   reemplazo de .spec-cat-grid (que sigue viva para las otras 7 páginas). */
.spec-flat-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px}
.spec-flat-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:15px 2px;border:none;border-bottom:1px solid var(--sand);background:transparent;
  text-align:left;font:inherit;font-size:15.5px;font-weight:700;color:var(--navy);
  cursor:pointer;transition:color .18s var(--ease);
}
.spec-flat-item svg{width:15px;height:15px;flex-shrink:0;color:var(--ink-soft);transition:transform .18s var(--ease),color .18s var(--ease)}
.spec-flat-item:active{opacity:.7}
@media (hover:hover) and (pointer:fine){
  .spec-flat-item:hover{color:var(--action)}
  .spec-flat-item:hover svg{transform:translateX(3px);color:var(--action)}
}
@media (max-width:960px){.spec-flat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.spec-flat-grid{grid-template-columns:1fr}}

/* Especialidades destacadas — tarjetas más ricas (ícono + descripción + CTA)
   para las especialidades de mayor demanda, por encima de la cuadrícula
   compacta de categorías. Mismo lenguaje visual que .spec-cat-card. */
.featured-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.featured-spec-card{
  background:var(--white);border:1.5px solid var(--action);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:12px;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s;
}
.featured-spec-card svg{width:28px;height:28px;color:var(--action)}
.featured-spec-card h3{margin-top:2px;font-size:18px}
.featured-spec-card p{font-size:14.5px;flex-grow:1}
.featured-spec-card .btn{align-self:flex-start;margin-top:4px}
@media (max-width:960px){.featured-spec-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.featured-spec-grid{grid-template-columns:1fr}}

/* Servicios (home) — grid de 9 tarjetas, cada una lleva a la página de su
   unidad. 3 columnas: 9 tarjetas caen en tres filas parejas de 3 sin necesitar
   ningún hack de span (misma lección aprendida en Unidades). */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* PRUEBA 2026-09-16: color plano blanco/borde azul (estilo original) sobre
   el modelo de layout actual (ícono circular, mismo padding/gap que la
   versión de bloques saturados). Si no convence, el bloque de color
   saturado sigue documentado en Backups/backup-tarjetas-servicio-original.html
   junto con este mismo layout para comparar. */
.service-card{
  background:linear-gradient(160deg,var(--white) 0%,var(--sky) 100%);border:1.5px solid var(--action);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s;
}
.service-icon{width:48px;height:48px;border-radius:50%;background:var(--sky);color:var(--action);display:flex;align-items:center;justify-content:center}
.service-icon svg{width:23px;height:23px}
.service-card h3{font-size:17px;color:var(--navy-deep)}
.service-card p{font-size:14px;color:var(--ink-soft);flex:1 1 auto}
.service-link{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--action);margin-top:4px}
.service-link svg{width:15px;height:15px;transition:transform .2s var(--ease)}
@media (max-width:960px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.services-grid{grid-template-columns:1fr}}

/* Otros servicios (páginas de unidad) — enlaces cruzados de vuelta al resto
   de unidades, en formato de lista horizontal (mismo patrón que la vieja
   sección "Nuestras unidades" del home, reutilizado aquí). Una fila nunca
   deja huérfanos aunque el número de unidades cambie. */
.units-grid{display:flex;flex-direction:column;border-top:1.5px solid var(--sand)}
.unit-card{
  display:flex;align-items:center;gap:22px;padding:22px 6px;
  border-bottom:1.5px solid var(--sand);
  transition:background .2s var(--ease);
}
.unit-icon{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  background:var(--sky);color:var(--action);display:flex;align-items:center;justify-content:center;
}
.unit-icon svg{width:24px;height:24px}
.unit-main{flex:1 1 auto;min-width:0}
.unit-card h3{font-size:17px}
.unit-loc{display:block;margin-top:2px;font-family:var(--font-mono);font-size:12.5px;color:var(--action);font-weight:600}
.unit-desc{font-size:14px;margin-top:4px;max-width:58ch}
.unit-meta{flex:0 0 auto;font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;white-space:nowrap;text-align:right}
.unit-meta svg{width:16px;height:16px;color:var(--action);flex-shrink:0}
@media (max-width:760px){
  .unit-card{flex-wrap:wrap;padding-block:20px}
  .unit-meta{flex-basis:100%;padding-left:74px;justify-content:flex-start}
}

/* Como funciona */
.steps-band{background:var(--bone-dim)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:step;position:relative}
.steps::before{
  content:"";position:absolute;top:26px;left:16%;right:16%;height:2px;
  background:repeating-linear-gradient(90deg,var(--sand) 0 10px,transparent 10px 20px);
  z-index:0;
}
.step{position:relative;z-index:1;text-align:center;padding-inline:8px}
.step-num{
  width:52px;height:52px;border-radius:50%;background:var(--navy-deep);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:19px;
  margin-inline:auto;margin-bottom:20px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-bounce),background .2s var(--ease),box-shadow .2s var(--ease);
}
@keyframes stepPop{
  0%{transform:scale(.4);opacity:0}
  60%{transform:scale(1.14);opacity:1}
  100%{transform:scale(1);opacity:1}
}
html.js-reveal .step-num{opacity:0;transform:scale(.4)}
html.js-reveal .step.reveal.in .step-num{animation:stepPop .6s var(--ease-bounce) .1s forwards}
.step h3{margin-bottom:8px}
.step p{font-size:14.5px;max-width:32ch;margin-inline:auto}
@media (max-width:760px){
  .steps{grid-template-columns:1fr;gap:36px}
  .steps::before{display:none}
}

/* Nosotros: Visión/Misión (mismo lenguaje visual que .why-grid) + instalaciones debajo */
.nosotros-pilares{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-bottom:44px}
.nosotros-pilar{padding:22px 26px 4px 0;border-top:2px solid var(--sand)}
.nosotros-pilar:last-child{border-left:1px solid var(--sand);padding-left:26px}
.nosotros-pilar h3{color:var(--navy-deep);font-size:17px;margin-bottom:8px}
.nosotros-pilar p{color:var(--ink-soft);font-size:14.5px}
@media (max-width:640px){
  .nosotros-pilares{grid-template-columns:1fr;gap:24px}
  .nosotros-pilar:last-child{border-left:none;padding-left:0}
}
.nosotros-instalaciones-head{margin-bottom:28px}
.nosotros-instalaciones-head h3{font-size:20px;color:var(--navy-deep);margin-bottom:6px}
.nosotros-instalaciones-head p{color:var(--ink-soft);font-size:15px}

/* Nosotros bento (carrusel, mismas tarjetas que antes en grid fijo) */
.commit-carousel{position:relative}
.commit-track-viewport{overflow:hidden}
.commit-track{display:flex;gap:20px;width:max-content}
.commit-track.is-marquee{animation:commit-scroll var(--commit-duration,32s) linear infinite}
.commit-track-viewport:hover .commit-track.is-marquee{animation-play-state:paused}
@keyframes commit-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.commit-tile{
  flex:0 0 clamp(240px,30vw,340px);
  border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:280px;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.commit-tile.photo h3{color:var(--white);position:relative;z-index:1;font-size:22px;max-width:16ch}
.commit-tile.photo p{color:rgba(255,255,255,.85);margin-top:10px;position:relative;z-index:1}
.commit-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.commit-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,33,61,.92) 0%,rgba(14,33,61,.35) 55%,rgba(14,33,61,.15) 100%)}

/* Equipo (carrusel oscuro, home) */
.team-band{background:var(--navy-deep);color:var(--white)}
.team-band .section-head{text-align:center}
.team-band .eyebrow-tag{color:var(--navy-pale)}
.team-band h2{color:var(--white)}
.team-band .eyebrow-sub{color:rgba(255,255,255,.7);margin-inline:auto}
.team-carousel{display:flex;align-items:center;gap:14px;margin-top:44px}
.team-track-viewport{
  flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.team-track-viewport::-webkit-scrollbar{display:none}
.team-track{display:flex;gap:28px}
.team-arrow{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.24);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.team-arrow svg{width:20px;height:20px}
.team-arrow:disabled{opacity:.3;cursor:default;pointer-events:none}
.team-card{flex:0 0 calc((100% - 56px)/3);scroll-snap-align:start;transition:transform .25s var(--ease)}
.team-photo{
  aspect-ratio:4/5;border-radius:var(--radius);background:rgba(255,255,255,.06);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.32);margin-bottom:18px;position:relative;
}
.team-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team-photo .initials{font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:42px;color:var(--navy-pale)}
.team-card h3{color:var(--white);font-size:18px}
.team-role{color:var(--navy-pale);font-size:14px;font-weight:600;margin-top:4px}
.team-cred{font-size:13px;color:rgba(255,255,255,.62);margin-top:10px;display:flex;flex-direction:column;gap:4px}
.team-cred span{display:flex;align-items:center;gap:6px}
.team-cred svg{width:13px;height:13px;flex-shrink:0;color:var(--navy-pale)}
@media (max-width:960px){.team-card{flex:0 0 calc((100% - 28px)/2)}}
@media (max-width:640px){.team-card{flex:0 0 100%}}

/* Personal / staff (páginas de unidad, fondo claro) */
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.staff-card{background:var(--white);border:1.5px solid var(--sand);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.staff-card .initials-badge{width:46px;height:46px;border-radius:50%;background:var(--sky);color:var(--action);display:flex;align-items:center;justify-content:center;font-family:'Figtree',sans-serif;font-weight:800;font-size:15px;margin-bottom:14px}
.staff-card h3{font-size:16px}
.staff-role{color:var(--action);font-size:13px;font-weight:600;margin-top:2px}
.staff-days{font-size:13px;color:var(--ink-soft);margin-top:10px;display:flex;align-items:center;gap:6px}
.staff-days svg{width:14px;height:14px;color:var(--action);flex-shrink:0}
@media (max-width:760px){.staff-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.staff-grid{grid-template-columns:1fr}}

/* Ubicacion */
.loc-band h2{max-width:14ch;margin-top:8px}
.faq-band{background:var(--bone-dim)}
.loc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
/* Páginas de unidad (gen_units.py: loc_section_html): sin mapa embebido, ya que
   las 8 comparten la misma dirección que el visitante ya vio en el home. En vez
   de una tarjeta angosta centrada (dejaba mucho vacío a los lados en pantallas
   anchas), usa el ancho completo del .wrap y reparte las filas de contacto en 2
   columnas para que no quede tan vertical. No toca la regla base .loc-grid
   porque el home sigue usando su propio mapa de 2 columnas con esa clase. */
.loc-grid--single{grid-template-columns:1fr}
.loc-grid--single .loc-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:22px;align-items:start}
/* Los botones (Agendar cita / Ver en Google Maps) van dentro de esta cuadrícula,
   antes de la fila de Correo (misma fila, columna izquierda; Correo a la
   derecha), en vez de un bloque aparte a todo lo ancho debajo de todo — así se
   aprovecha el hueco que quedaba vacío en vez de dejar la sección más vertical
   de lo necesario. Si la página no tiene "WhatsApp seguros" queda un número
   impar de filas de contacto y el último elemento (que puede ser los botones o
   Correo, según la página) se queda solo en su fila; el selector genérico
   *:nth-child(odd):last-child hace que ese elemento ocupe las 2 columnas en vez
   de dejar un hueco vacío al lado, sin importar cuál de los dos sea. */
.loc-grid--single .loc-ctas{margin-top:0;align-self:end}
.loc-grid--single .loc-rows > *:nth-child(odd):last-child{grid-column:1/-1}
@media (max-width:640px){.loc-grid--single .loc-rows{grid-template-columns:1fr}}
.loc-info{display:flex;flex-direction:column}
.loc-rows{display:flex;flex-direction:column;gap:22px;margin-top:32px}
.loc-row{display:flex;gap:14px;align-items:flex-start}
.loc-row > span{min-width:0}
.loc-row p,.loc-row a{overflow-wrap:anywhere}
.loc-icon{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--sky);color:var(--action);
}
.loc-icon svg{width:19px;height:19px}
.loc-row strong{display:block;color:var(--navy-deep);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.loc-row span,.loc-row p{font-size:14.5px;color:var(--ink-soft)}
.loc-row a{color:var(--action);font-family:var(--font-mono)}
.loc-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.loc-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);height:420px;border:1.5px solid var(--action)}
.loc-map iframe{width:100%;height:100%;border:0}
/* Dos iframes con zoom distinto (no solo CSS) porque el embed de Google
   "q=...&output=embed" recentra el pin según el aspecto del iframe — a 420px
   de alto (PC) queda bien con z=17, pero al pasar a la caja más baja/angosta
   de celular (320px) ese mismo z=17 lo empuja visiblemente hacia la derecha.
   Un z=16 en la versión móvil (misma coordenada) da más aire y lo recentra. */
.loc-map-mobile{display:none}
@media (max-width:860px){
  .loc-grid{grid-template-columns:1fr}
  .loc-map{height:320px}
  .loc-map-pc{display:none}
  .loc-map-mobile{display:block}
}

/* Seguros */
.seguros-band{background:var(--bone-dim)}
.seguros-inner{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.seguros-sub{max-width:none}
.seguro-icon-lg{width:56px;height:56px;border-radius:14px;background:var(--sky);color:var(--action);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.seguro-icon-lg svg{width:26px;height:26px}
.seguros-row{display:flex;gap:20px;align-items:flex-start}
.insurers-grid{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px;justify-content:center}
.insurer-card{
  flex:0 0 calc((100% - 6*16px)/7);height:88px;
  background:var(--white);border:1.5px solid var(--sand);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;padding:12px;cursor:pointer;
  font:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.insurer-card:hover,.insurer-card:focus-visible{transform:translateY(-4px);box-shadow:0 14px 26px rgba(0,0,0,.12);border-color:var(--action)}
.insurer-card img{max-width:100%;max-height:48px;object-fit:contain}
/* 2026-09-13: el logo de Pirámide Seguros es un logotipo vertical (más alto que
   ancho) mientras el resto son horizontales, así que a la misma altura máxima
   se ve mucho más angosto/pequeño que los demás — se le da un poco más de
   tamaño para emparejarlo visualmente, sin tocar el resto de aseguradoras. */
.insurer-card img[src$="piramide.png"]{transform:scale(1.35)}
/* 2026-09-13 (2): estos 4 logos son más cuadrados que el resto (banners bien
   horizontales), así que a la misma altura máxima rinden más angostos/chicos
   en comparación — zoom leve, a pedido del usuario ("solo un poco"). */
.insurer-card img[src$="proseguros.png"],
.insurer-card img[src$="seguros-constitucion.png"],
.insurer-card img[src$="seguros-miranda.png"],
.insurer-card img[src$="la-mundial.png"]{transform:scale(1.18)}
.insurer-name{display:none;font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:13px;color:var(--ink);text-align:center;line-height:1.25;padding:0 6px}
.insurer-card.no-logo{background:var(--bone-dim)}
.insurer-card.no-logo img{display:none}
.insurer-card.no-logo .insurer-name{display:block}
@media (max-width:900px){.insurer-card{flex:0 0 calc((100% - 2*16px)/3);height:92px}.insurer-card img{max-height:52px}}
@media (max-width:640px){.insurer-card{flex:0 0 calc((100% - 2*16px)/3);height:76px;padding:8px}.insurer-card img{max-height:40px}}

/* Promociones / jornadas (carrusel, mismo patrón que Equipo/Nosotros) */
.promo-carousel{display:flex;align-items:center;gap:14px;margin-top:12px}
.promo-track-viewport{
  flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.promo-track-viewport::-webkit-scrollbar{display:none}
.promo-grid{display:flex;gap:22px}
.promo-arrow{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;background:var(--white);
  border:1.5px solid var(--action);color:var(--action);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);
}
.promo-arrow svg{width:22px;height:22px}
.promo-arrow:disabled{opacity:.3;cursor:default;pointer-events:none}
.promo-card{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start;background:var(--navy-deep);color:var(--white);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.promo-photo{width:100%;aspect-ratio:4/5;object-fit:contain;background:rgba(255,255,255,.04);display:block;transition:opacity .2s var(--ease)}
.promo-photo-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.promo-photo-btn:hover .promo-photo{opacity:.85}
.promo-body{position:relative;padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.promo-body::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 0% 0%,rgba(157,187,235,.18),transparent 60%);pointer-events:none}
.promo-badge{position:relative;align-self:flex-start;background:rgba(157,187,235,.18);color:var(--navy-pale);font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-pill)}
.promo-body h3{position:relative;color:var(--white);font-size:19px}
.promo-body p{position:relative;color:rgba(255,255,255,.75);font-size:14px;flex-grow:1}
.promo-vigencia{position:relative;font-size:12.5px;color:var(--navy-pale);font-family:var(--font-mono);display:flex;align-items:center;gap:6px}
.promo-vigencia svg{width:14px;height:14px;flex-shrink:0}
@media (max-width:960px){.promo-card{flex:0 0 calc((100% - 22px)/2)}}
@media (max-width:640px){.promo-card{flex:0 0 100%}}
.promo-empty{flex:0 0 100%;text-align:center;color:var(--ink-soft);font-size:14.5px;padding:48px 24px;background:var(--bone-dim);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;gap:18px}

/* Skeletons de carga para #team-track/#promo-grid/#insurers-grid antes de que
   site.js los repinte una sola vez con datos reales (en vivo o de respaldo —
   ver pintarDatosDelSheet() en site.js y team_track_html() en gen_units.py
   para el "por qué" de este patrón de un solo pintado, sin parpadeo). Usan
   las mismas clases reales de tarjeta (.team-card/.promo-card/.insurer-card)
   para heredar tamaño/columnas automáticamente, con bloques .skeleton-shimmer
   en vez de contenido real. */
.skeleton-card{pointer-events:none}
.skeleton-line{display:block;border-radius:6px}
.skeleton-shimmer{position:relative;overflow:hidden;background:rgba(19,59,133,.08)}
.team-card .skeleton-shimmer,.promo-card .skeleton-shimmer{background:rgba(255,255,255,.08)}
.skeleton-shimmer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(19,59,133,.16),transparent);
  transform:translateX(-100%);animation:skeletonSweep 1.6s ease-in-out infinite;
}
.team-card .skeleton-shimmer::after,.promo-card .skeleton-shimmer::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
@keyframes skeletonSweep{100%{transform:translateX(100%)}}

/* Reseñas — banda azul oscuro, separa visualmente de Ubicación (blanco) y Preguntas (bone-dim) */
.reviews-band{background:var(--navy-deep);color:var(--white)}
.reviews-band .eyebrow-tag{color:var(--navy-pale)}
.reviews-band h2{color:var(--white)}
.reviews-band .eyebrow-sub{color:rgba(255,255,255,.7)}
.reviews-head{margin-bottom:36px}
.reviews-track{display:flex;gap:20px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.review-card{
  scroll-snap-align:start;flex:0 0 300px;background:var(--white);border:1.5px solid var(--action);
  border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.review-card .stars{display:flex;gap:2px;color:var(--action)}
.review-card .stars svg{width:15px;height:15px}
.review-card p{font-size:14.5px;line-height:1.55;color:var(--ink);flex-grow:1}
.review-card .who{display:flex;align-items:center;gap:10px}
.review-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--sky);color:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;
}
.review-name{font-size:13.5px;font-weight:700;color:var(--navy-deep);display:block}
.review-source{font-size:12px;color:var(--ink-soft)}
@media (max-width:640px){.review-card{flex-basis:78vw}}
.reviews-empty{
  flex:1 1 100%;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:16px;padding:48px 24px;background:var(--bone-dim);border-radius:var(--radius);
}
.reviews-empty svg{width:32px;height:32px;color:var(--action)}
.reviews-empty p{max-width:52ch;color:var(--ink-soft);font-size:14.5px}

/* FAQ */
.faq-list{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--white);border:1.5px solid var(--action);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .25s var(--ease)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;text-align:left;font-weight:700;font-size:15.5px;color:var(--navy-deep);
  background:transparent;transition:background .15s ease-out;
}
.faq-q:focus-visible{background:var(--bone-dim)}
.faq-q svg{width:20px;height:20px;flex-shrink:0;transition:transform .3s var(--ease);color:var(--action)}
.faq-item[data-open="true"] .faq-q svg{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq-item[data-open="true"] .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a p{padding:0 22px 20px;font-size:14.5px}

/* CTA band */
.cta-band{background:var(--navy-deep);color:var(--white);text-align:center}
.cta-band h2{color:var(--white);max-width:18ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.68);margin-top:14px;max-width:48ch;margin-inline:auto}
.cta-band .btn{margin-top:30px}

/* Footer */
footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding-top:64px;border-top:1px solid rgba(255,255,255,.14)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .brand{color:var(--white)}
.footer-brand p{color:rgba(255,255,255,.65);margin-top:14px;max-width:32ch;font-size:14px}
.footer-social{display:flex;gap:10px;margin-top:20px}
.footer-social a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s}
.footer-social svg{width:18px;height:18px}
.footer-col h3{color:var(--white);font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:14.5px;transition:color .2s}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-block:24px;font-size:13px;color:rgba(255,255,255,.62);flex-wrap:wrap;gap:10px}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:32px}}

/* Floating WhatsApp CTA */
.fab{
  position:fixed;bottom:22px;right:22px;z-index:80;
  display:flex;align-items:center;gap:10px;
  background:var(--action);color:var(--white);
  padding:15px 20px;border-radius:var(--radius-pill);
  box-shadow:0 10px 28px rgba(19,59,133,.35);
  font-weight:700;font-size:14.5px;
  transform:translateY(120px);transition:transform .3s var(--ease),background .2s;
}
.fab.visible{transform:translateY(0)}
.fab.visible.raised{transform:translateY(-70px)}
/* Un par de pulsos suaves la primera vez que el FAB aparece en pantalla (ver
   site.js: se agrega una sola vez, no cada vez que vuelve a aparecer al
   scrollear), para llamar la atención hacia la acción principal sin quedar
   en loop infinito. iteration-count:2 hace que se detenga solo. */
.fab.pulse{animation:fabPulse 1.3s var(--ease-bounce) .2s 2}
@keyframes fabPulse{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(0) scale(1.09)}
}
.fab svg{width:20px;height:20px}
.fab .fab-label{display:none}
@media (min-width:640px){.fab .fab-label{display:inline}}

/* Botón flotante "volver arriba" (lado opuesto al FAB de WhatsApp) */
.scrolltop-btn{
  position:fixed;bottom:22px;left:22px;z-index:80;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--white);color:var(--navy-deep);
  box-shadow:0 10px 28px rgba(19,59,133,.2);
  transform:translateY(120px) scale(.8);opacity:0;
  transition:transform .3s var(--ease),opacity .3s var(--ease),background .2s;
}
.scrolltop-btn.visible{transform:translateY(0) scale(1);opacity:1}
.scrolltop-btn.visible.raised{transform:translateY(-70px) scale(1)}
.scrolltop-btn svg{width:20px;height:20px}
.scrolltop-btn:hover{background:var(--bone-dim)}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(14,33,61,.55);
  backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.modal-overlay.open{opacity:1;pointer-events:auto}
@media (min-width:640px){.modal-overlay{align-items:center}}
.modal{
  background:var(--bone);width:100%;max-width:520px;max-height:92vh;overflow-y:auto;overflow-x:hidden;
  border-radius:24px 24px 0 0;padding:32px 28px 28px;
  transform:translateY(40px);transition:transform .3s var(--ease);
  box-shadow:0 -20px 60px rgba(0,0,0,.2);
}
@media (min-width:640px){.modal{border-radius:var(--radius);transform:translateY(20px) scale(.97)}}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
/* Variante ancha: directorio completo de especialistas, necesita respirar en grilla */
.modal.modal-wide{max-width:1180px}
/* Variante para el lightbox de promociones: la imagen es lo importante, se le
   da más espacio horizontal que al modal de texto (antes se veía casi del
   mismo tamaño que la miniatura de la tarjeta porque compartía el
   max-width:520px del modal de texto plano). Además va en columna flex y sin
   scroll propio: la imagen se ajusta (object-fit:contain) al espacio real que
   queda tras el título y el texto de la promoción, así nunca hace falta
   scrollear para verla completa — a diferencia del modal de texto/formulario,
   que sí necesita poder scrollear en pantallas chicas y no se toca acá. */
.modal.modal-promo{
  max-width:680px;max-height:92vh;overflow:hidden;
  display:flex;flex-direction:column;
}
.modal.modal-promo .modal-body{
  display:flex;flex-direction:column;min-height:0;flex:1 1 auto;
}
.modal.modal-promo .modal-body p{flex:0 0 auto}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px;flex:0 0 auto}
.modal-head h2{font-size:23px}
.modal-close{width:44px;height:44px;border-radius:50%;background:var(--bone-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-close svg{width:18px;height:18px}
.modal p.sub{font-size:14.5px;margin-bottom:24px}
.modal-body p{font-size:14.5px;margin-bottom:16px}
.modal-body p:last-child{margin-bottom:0}
.modal-promo-img{
  display:block;width:100%;height:auto;
  flex:1 1 auto;min-height:0;object-fit:contain;object-position:center;
  margin:0 auto 16px;border-radius:var(--radius-sm);
}
/* Directorio completo de especialistas (modal "Conoce a todos nuestros especialistas") */
.team-directory-group{margin-bottom:24px}
.team-directory-group:last-child{margin-bottom:0}
.team-directory-group h3{font-size:14px;color:var(--navy-deep);margin-bottom:12px;padding-bottom:4px;border-bottom:1px solid var(--bone-dim)}
.team-directory-grid{display:flex;flex-wrap:wrap;gap:20px 14px}
.team-directory-card{width:124px;text-align:center}
.team-directory-photo{
  width:76px;height:76px;border-radius:50%;margin:0 auto 8px;overflow:hidden;position:relative;
  background:var(--bone-dim);border:1px solid var(--bone-dim);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
}
.team-directory-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team-directory-photo .initials{font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:19px}
.team-directory-card strong{display:block;font-size:12.5px;line-height:1.25;overflow-wrap:break-word;margin-bottom:2px}
.team-directory-specialty{display:block;font-size:11px;font-weight:700;color:var(--action);overflow-wrap:break-word;margin-bottom:2px}
.team-directory-days{display:block;font-size:11px;color:var(--ink-soft);overflow-wrap:break-word;margin-bottom:8px}
.team-directory-card .btn{font-size:12px;padding:5px 12px}
@media (max-width:480px){.team-directory-card{width:104px}.team-directory-photo{width:66px;height:66px}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13.5px;font-weight:700;color:var(--navy-deep)}
.field .req{color:var(--action)}
.field input,.field select,.field textarea{
  padding:13px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--sand);
  background:var(--white);font-size:15px;color:var(--ink);transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--action)}
.field textarea{resize:vertical;min-height:70px}
.field-error{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .15s ease-out,opacity .15s ease-out}
.field-error span{font-size:12.5px;color:var(--action);font-weight:600;overflow:hidden}
.field.invalid input,.field.invalid select{border-color:var(--action)}
.field.invalid .field-error{grid-template-rows:1fr;opacity:1}
.pago-toggle{display:flex;gap:10px}
.pago-option{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border:1.5px solid var(--sand);border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.pago-option input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pago-option:has(input:checked){border-color:var(--action);color:var(--action);background:var(--sky)}
.consent{display:flex;align-items:flex-start;gap:10px;margin-bottom:22px}
.consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--action);flex-shrink:0}
.consent label{font-size:13px;color:var(--ink-soft)}
.modal .btn{width:100%}
.form-status{font-size:13.5px;margin-top:14px;text-align:center;opacity:0;transform:translateY(-4px);transition:opacity .15s ease-out,transform .15s ease-out}
.form-status.show{opacity:1;transform:translateY(0)}

/* Buscador (solo en el home) */
.search-modal{max-width:560px;padding:0;display:flex;flex-direction:column;max-height:min(72vh,560px)}
.search-input-wrap{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--bone-dim);flex-shrink:0}
.search-input-wrap svg{width:20px;height:20px;color:var(--ink-soft);flex-shrink:0}
.search-input-wrap input{flex:1;border:none;background:transparent;font-size:16.5px;color:var(--ink);padding:4px 0}
.search-input-wrap input:focus{outline:none}
.search-input-wrap .modal-close{margin-left:4px}
.search-results{overflow-y:auto;padding:10px;flex:1 1 auto}
.search-group-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:12px 12px 6px}
.search-result{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:12px;border-radius:var(--radius-sm);transition:background .15s}
.search-result-label{font-weight:600;font-size:14.5px;color:var(--ink)}
.search-result-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.search-result[data-active="true"]{background:var(--bone-dim)}
.search-result svg{width:16px;height:16px;color:var(--sand);flex-shrink:0}
.search-empty{padding:32px 22px;text-align:center;font-size:14px;color:var(--ink-soft)}
.search-hint{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);border:1px solid var(--sand);border-radius:5px;padding:2px 6px;flex-shrink:0}
@media (max-width:640px){.search-hint{display:none}}
@keyframes searchHit{0%{box-shadow:0 0 0 0 rgba(44,78,156,.45)}70%{box-shadow:0 0 0 14px rgba(44,78,156,0)}100%{box-shadow:0 0 0 0 rgba(44,78,156,0)}}
.search-hit-flash{animation:searchHit 1.1s var(--ease) 1}

/* Scroll reveal */
.reveal{opacity:1;transform:none}
html.js-reveal .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js-reveal .reveal.in{opacity:1;transform:translateY(0)}
@media (max-width:768px){
  html.js-reveal .reveal{transform:translateY(42px);transition-duration:.95s}
}

/* Fade-in de fotos reales al terminar de cargar (mismo patrón "seguro sin JS"
   que .reveal arriba: sin la clase html.js-reveal — JS deshabilitado o
   bloqueado — la foto se ve normal desde el primer render, nunca se queda
   invisible). Solo aplica a img[loading="lazy"] (todas las fotos de contenido
   real: instalaciones, equipo, promociones, aseguradoras); el logo y el hero
   son loading="eager" y quedan fuera a propósito. site.js agrega
   .img-loaded cuando la imagen ya cargó (ver wireAllImageFades). */
html.js-reveal img[loading="lazy"]{opacity:0;transition:opacity .5s var(--ease)}
html.js-reveal img[loading="lazy"].img-loaded{opacity:1}

.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-link{
  position:fixed;top:-100px;left:16px;z-index:300;background:var(--navy-deep);color:var(--white);
  padding:12px 18px;border-radius:var(--radius-sm);font-weight:700;transition:top .2s;
}
.skip-link:focus{top:16px}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--action-deep);box-shadow:var(--shadow-md);transform:translateY(-1px)}
  .btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
  .btn-outline:hover{border-color:var(--navy-deep);background:var(--white)}
  .nav-links a:hover{color:var(--navy-deep)}
  .hamburger:hover{background:var(--bone-dim)}
  .icon-btn:hover{background:var(--bone-dim)}
  .search-result:hover{background:var(--bone-dim)}
  .why-card:hover{border-top-color:var(--navy)}
  .why-card:hover svg{transform:translateY(-2px)}
  .why-card:hover img{transform:translateY(-2px)}
  .spec-cat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--action-deep)}
  .spec-cat-card.reveal.in:hover{transform:translateY(-4px)}
  .featured-spec-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--action-deep)}
  .featured-spec-card.reveal.in:hover{transform:translateY(-4px)}
  .spec-tag:hover{background:var(--action);color:var(--white)}
  button.spec-tag:hover{border-color:var(--action)}
  button.spec-tag:hover svg{transform:translateX(2px)}
  .service-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--action-deep)}
  .service-card.reveal.in:hover{transform:translateY(-4px)}
  .service-card:hover .service-link svg{transform:translateX(3px)}
  .staff-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--action)}
  .promo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  .review-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--action-deep)}
  .commit-tile:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
  .commit-tile.reveal.in:hover{transform:translateY(-4px)}
  .promo-arrow:not(:disabled):hover{background:var(--action);color:var(--white);box-shadow:var(--shadow-md)}
  .team-card:hover{transform:translateY(-4px)}
  .team-card.reveal.in:hover{transform:translateY(-4px)}
  .team-card:hover .team-photo{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
  .team-arrow:not(:disabled):hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
  .faq-q:hover{background:var(--bone-dim)}
  .faq-item:hover{border-color:var(--action-deep)}
  .footer-social a:hover{background:var(--navy-mid)}
  .footer-col a:hover{color:var(--white)}
  .fab:hover{background:var(--action-deep)}
  .modal-close:hover{background:var(--sand)}
  .unit-card:hover{background:var(--bone-dim)}
  .step:hover .step-num{transform:scale(1.14);background:var(--action);box-shadow:var(--shadow-md)}
  .breadcrumb a:hover{color:var(--action-deep);text-decoration:underline}
}

/* Aviso de cookies: informativo, no bloquea la carga de analítica/Pixel (ver site.js) */
.cookie-notice{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  background:var(--white);border:1px solid var(--sand);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:16px 18px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease;
}
.cookie-notice.show{transform:translateY(0);opacity:1;pointer-events:auto}
.cookie-notice p{font-size:13.5px;color:var(--ink-soft);margin:0;flex:1 1 240px}
.cookie-notice a{text-decoration:underline;color:var(--action)}
.cookie-notice .btn{flex:0 0 auto}
@media (min-width:640px){.cookie-notice{left:24px;right:auto;bottom:24px;max-width:420px}}