/* Respaldo en CSS del <meta name="color-scheme" content="light"> de cada
   página (gen_units.py) — mismo propósito: declarar que el sitio es solo
   claro para que Chrome Android / Samsung Internet no le apliquen su
   repintado automático "Forzar tema oscuro" (ver el comentario largo junto
   al meta tag para el diagnóstico completo, 2026-09-18). */
:root{
  color-scheme: light;
  --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;
}
/* Redunda con el <meta name="color-scheme" content="light"> y el
   "color-scheme:light" de arriba, a propósito — capa extra para Samsung
   Internet específicamente. El cliente confirmó 2026-09-18 que, tras el
   primer arreglo (meta tag), el logo del header y la grilla de seguros
   TODAVÍA se ven lavados/oscurecidos, pero solo en el navegador Samsung
   Internet — en cualquier otro (Chrome, Firefox, Safari) ya se ve bien. Es
   un indicio de que el "Forzar tema oscuro para el contenido web" de ese
   navegador en particular no respeta bien la señal estándar por sí sola
   (comportamiento conocido en versiones de Samsung Internet, no es un bug
   de este sitio). El truco es repetir literalmente los mismos colores
   claros dentro de un bloque @media (prefers-color-scheme:dark) — así el
   navegador "ve" que el sitio SÍ tiene una versión oscura declarada
   explícitamente (aunque sea idéntica a la clara) y con eso basta para que
   deje de intentar repintar los colores por su cuenta con su heurística.
   No cambia nada para ningún otro navegador: si prefers-color-scheme:dark
   no aplica, este bloque entero se ignora. */
@media (prefers-color-scheme:dark){
  :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;
  }
}

*,*::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:var(--navy-deep);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
header.scrolled{
  background:rgba(19,59,133,.82);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 2px 20px rgba(14,44,99,.28)
}
/* Header en Azul Profundo sólido (opción A elegida por el cliente,
   2026-09-24): logo blanco, menú claro y CTA blanco. Los estados hover y
   foco de más abajo (pensados para fondo blanco) se sobreescriben aquí con
   #site-header para que ganen por especificidad sin depender del orden. */
#site-header .nav-links>a,#site-header .nav-trigger{color:rgba(255,255,255,.82)}
#site-header .nav-links>a.active,#site-header .nav-links>a:hover,#site-header .nav-trigger:hover{color:var(--white)}
#site-header .nav-links a::after{background:var(--navy-pale)}
#site-header .icon-btn,#site-header .hamburger{color:var(--white)}
#site-header .icon-btn:hover,#site-header .hamburger:hover{background:rgba(255,255,255,.12)}
#site-header .nav-cta .btn-primary{background:var(--white);color:var(--navy-deep)}
#site-header .nav-cta .btn-primary:hover{background:var(--sky)}
#site-header :focus-visible{outline-color:var(--white)}
#site-header .nav-dropdown-grid{border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.28)}
.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{flex-shrink:0}
/* Alturas mayores que antes a propósito: el PNG del logo blanco trae más
   margen transparente, y así el ancho visible queda igual al del logo a
   color anterior (medido sobre el recorte real de cada archivo). */
#site-header .brand img{height:67px;transition:height .25s var(--ease)}
#site-header.scrolled .brand img{height:51px}
@media (max-width:860px){
  #site-header .brand img{height:51px}
  #site-header.scrolled .brand img{height:42px}
}
.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)}

/* Mega-menú de "Unidades" (2026-09-19, inspirado en el header de Clínica
   Alemana): .nav-item envuelve el link + el panel para que ambos cuenten como
   "un solo elemento" al hacer :hover — así no hay zona muerta entre el link y
   el panel (el panel arranca justo en top:100%, sin separación real, el
   respiro visual lo da el padding interno del panel). :focus-within cubre
   navegación por teclado. */
.nav-item{position:relative}
.nav-trigger{display:flex!important;align-items:center;gap:4px}
.nav-trigger .nav-caret{width:13px;height:13px;transition:transform .25s var(--ease)}
.nav-item:hover .nav-trigger .nav-caret,.nav-item:focus-within .nav-trigger .nav-caret{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute;top:100%;left:0;width:600px;max-width:calc(100vw - 40px);
  padding-top:14px;opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.nav-dropdown-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px 16px;
  background:var(--action-deep);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-md);
}
.nav-links a.nav-dropdown-item{
  display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:var(--radius-sm);
  color:#fff;font-weight:600;font-size:13px;white-space:normal;line-height:1.25;
}
.nav-links a.nav-dropdown-item::after{content:none}
.nav-links a.nav-dropdown-item:hover,.nav-links a.nav-dropdown-item:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.nav-dropdown-icon{display:flex;width:30px;height:30px;flex-shrink:0;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.14);color:#fff}
.nav-dropdown-icon svg{width:15px;height:15px}

.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}

/* Acordeón de "Unidades" en el menú móvil (2026-09-19) — mismo patrón
   grid-template-rows 0fr→1fr que .faq-a, para quedar consistente con el
   único otro acordeón que ya tiene el sitio. */
.mobile-menu-item{border-bottom:1px solid var(--bone-dim)}
.mobile-menu-item-row{display:flex;align-items:center}
.mobile-menu-item-row .mobile-menu-link{flex:1;border-bottom:none;padding-right:8px}
.mobile-menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;color:var(--ink-soft)}
.mobile-menu-toggle .nav-caret{width:18px;height:18px;transition:transform .3s var(--ease)}
.mobile-menu-item[data-open="true"] .mobile-menu-toggle .nav-caret{transform:rotate(180deg)}
.mobile-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.mobile-menu-item[data-open="true"] .mobile-submenu{grid-template-rows:1fr}
.mobile-submenu-inner{overflow:hidden;display:flex;flex-direction:column}
.mobile-submenu-inner a{padding:13px 4px 13px 18px;font-weight:600;font-size:16px;color:var(--ink-soft);border-bottom:1px solid var(--bone-dim)}
.mobile-submenu-inner a:last-child{border-bottom:none}

/* El menú completo del home (9 enlaces + logo + CTA) no cabe por debajo de
   ~1160px: el logo se aplastaba hasta desaparecer y "Agendar cita" quedaba
   cortado (medido 2026-09-24). Desde ahí se usa el menú hamburguesa; el
   botón de cita sigue visible hasta 860px. */
@media (max-width:1160px){
  .nav-links{display:none}
  .hamburger{display:flex}
}
@media (max-width:860px){
  .nav-cta .btn-primary{display:none}
}
@media (min-width:1161px){ .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): banners de la diseñadora, cargados desde la pestaña
   "Portada" del Sheet (ver renderHero en site.js). La imagen ya trae todo
   su diseño, así que aquí no hay overlay, texto ni zoom: el escenario toma
   exactamente la proporción de cada formato (1920x760 en PC, 1080x1350 en
   celular) para que object-fit:cover nunca recorte nada del arte. Arranca
   debajo del header fijo (margin-top) para que este no tape la parte de
   arriba del banner. Flechas y puntos van encima de la imagen, igual que
   antes del cambio al Sheet. */
.hero{position:relative;margin-top:var(--nav-h);background:var(--bone)}
.hero-stage{position:relative;overflow:hidden;aspect-ratio:1920/760}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;transition:opacity .8s var(--ease);
}
.hero-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-controls{
  position:absolute;left:0;right:0;bottom:16px;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.hero-controls[hidden],.hero-arrow[hidden]{display:none}
.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:4px}
.hero-dot{
  /* Área táctil real de ~37px (9px de punto visible + padding a cada lado)
     sin agrandar el punto en sí. box-sizing:content-box es una excepción
     puntual al reset global para que el padding SUME al tamaño en vez de
     comerse el punto visible; background-clip:content-box deja el color
     solo en los 9px centrales. */
  box-sizing:content-box;width:9px;height:9px;padding:14px;
  border-radius:50%;background-color:rgba(255,255,255,.4);background-clip:content-box;
  transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.hero-dot.is-active{background-color:var(--white);transform:scale(1.25)}
.hero-dot:hover{background-color:rgba(255,255,255,.75)}
@media (max-width:900px){
  .hero-controls{bottom:10px}
  .hero-arrow{display:none}
}
/* Mismo punto de corte que el <source media> de cada diapositiva: por
   debajo de 760px se sirve el formato vertical 1080x1350. */
@media (max-width:760px){
  .hero-stage{aspect-ratio:1080/1350}
}

/* 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}
/* Entrada de Gerenciemos El Riesgo (seguridad-ocupacional.html). Selector
   ".page-hero-bg img.clase" (no solo ".clase") a propósito: una sola clase
   sin el "img" delante pesa menos que ".page-hero-bg img" y nunca le gana
   en especificidad — mismo bug real que se encontró y corrigió 2026-09-18
   en las fotos del hero del home (antes de que ese hero pasara al Sheet).
   Celular sigue usando entrada-gerenciemos-el-riesgo.jpg (ya calibrada,
   sin cambios). Desktop (>900px) carga una foto DISTINTA vía
   photo_desktop/<picture> — entrada-gerenciemos-fachada-pc.jpg, el archivo
   original en resolución completa que mandó el cliente 2026-09-18 para
   empezar el encuadre de cero ahí (después de varias rondas donde ninguna
   combinación de encuadre sobre la foto vieja evitaba que su propio
   letrero de fondo compitiera con el título). object-position:center, SIN
   scale ni transform-origin — punto de partida limpio, a la espera de ver
   cómo se ve antes de calibrar más. */
.page-hero-bg img.page-hero-photo-segocup{
  object-position:center 30%;
  transform:scale(1.2);
}
@media (min-width:901px){
  .page-hero-bg img.page-hero-photo-segocup{
    object-position:center;
    transform:none;
  }
}
.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}}

/* Categorías en acordeón (título + lista desplegable de servicios), en 2
   columnas — variante de .faq-item para categorías con pocos ítems, que se
   veían casi vacías como .spec-cat-card. 2026-09-20, a pedido del cliente,
   usada solo en seguridad-ocupacional.html (ver accordion_card_clickable()
   en gen_units.py). Los ítems dentro reusan .spec-flat-item tal cual, sin
   su .spec-flat-grid (que fuerza 3 columnas) — aquí siempre van en una sola
   columna, la de su acordeón. */
.spec-accordion-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;align-items:start}
.spec-accordion-col{display:flex;flex-direction:column;gap:14px}
/* Título en celeste (igual tono que .spec-tag) vs. lista desplegable en
   blanco con texto más liviano — sin esto, título y servicios se veían del
   mismo blanco/peso y todo el bloque se leía monocromo (feedback del
   cliente 2026-09-20 sobre la versión anterior, solo con bordes). El
   min-height evita que la única categoría con título largo quede más alta
   que el resto y rompa la simetría de la cuadrícula cuando está cerrada. */
.spec-accordion-item .faq-q{background:var(--sky);min-height:64px}
.spec-accordion-item .faq-q:focus-visible{background:var(--sand)}
.spec-accordion-item[data-open="true"] .faq-q{border-bottom:1.5px solid var(--sand)}
.spec-accordion-list{padding:0 22px 14px;background:var(--white)}
.spec-accordion-list .spec-flat-item{padding:13px 2px;color:var(--ink);font-weight:600}
.spec-accordion-list .spec-flat-item:last-child{border-bottom:none}
@media (hover:hover) and (pointer:fine){
  .spec-accordion-list .spec-flat-item:hover{color:var(--action)}
}
@media (max-width:860px){.spec-accordion-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}}

/* Perfiles de laboratorio (grupos de exámenes, ej. "Perfil 20") — mismo
   acordeón que .spec-accordion-item, con un botón "Solicitar información"
   agregado dentro del panel desplegable, debajo de la lista de exámenes:
   un <button> no puede anidarse dentro de otro <button> (el título ya es
   uno, para expandir/colapsar), así que pedir información del perfil
   completo vive aquí como acción aparte, sin tocar el clic de
   expandir/colapsar. 2026-09-22.*/
.profile-cta-row{padding:0 22px 20px}

/* 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}
/* La tarjeta es más ancha que la foto del oratorio (retrato vertical), así que
   object-fit:cover recorta arriba/abajo, nunca a los lados. Con la posición
   por defecto (centro) ese recorte se comía justo la cruz de fondo, que está
   en la mitad superior de la foto — se sube el punto de anclaje a "top" para
   que la cruz quede siempre visible (se pierde banca/piso de abajo en su lugar). */
.commit-photo.commit-photo-oratorio{object-position:center top}
.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%)}
/* En móvil el ancho mínimo de 240px deja la tarjeta casi cuadrada frente a la
   foto vertical del oratorio, así que object-fit:cover apenas recorta y el
   rostro de la Madre Carmen Rendiles queda justo detrás del texto. Se sube
   el mínimo para restaurar la proporción "más ancha que alta" que ya funciona
   bien en desktop (más recorte desde abajo, cara fuera de la zona de texto). */
@media (max-width:999px){.commit-tile{flex-basis:300px}}

/* 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}
/* Ancho de tarjeta controlado por --insurer-card-width, que pone
   balanceInsurersGrid() en site.js: elige un ancho (cerca de 150px) que deje
   el menor hueco posible en la última fila para el total de aseguradoras
   que haya en ese momento, en vez de una división fija entre "N columnas".
   150px es solo el respaldo para el primer instante antes de que JS calcule
   el valor real, o si JS estuviera deshabilitado. Si el conteo de
   aseguradoras cambia, no hay que tocar este CSS. */
.insurer-card{
  flex:0 0 var(--insurer-card-width, 150px);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}
/* Oculto hasta que trimLogoMargins() (site.js) le recorta el margen, para
   que no se vea saltar de chico a grande. #insurers-grid para ganarle en
   especificidad al fade genérico de img[loading="lazy"]. */
#insurers-grid .insurer-card img:not(.logo-ready){opacity:0}
/* 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 var(--insurer-card-width, 130px);height:92px}.insurer-card img{max-height:52px}}
@media (max-width:640px){.insurer-card{flex:0 0 var(--insurer-card-width, 104px);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(--white);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}
/* Móvil: 3 columnas simétricas en vez de flex-wrap de ancho fijo (que dejaba
   2 columnas con espacio sobrante porque la 3ra tarjeta de 104px no entraba
   en el ancho real del modal). Grid reparte el ancho exacto entre columnas,
   así se ven más especialistas de un vistazo y el scroll es más corto. */
@media (max-width:639px){
  .team-directory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 8px}
  .team-directory-card{width:auto}
  .team-directory-photo{width:58px;height:58px;margin:0 auto 6px}
  .team-directory-photo .initials{font-size:15px}
  .team-directory-card strong{font-size:11px;margin-bottom:1px}
  .team-directory-specialty{font-size:9.5px;margin-bottom:1px}
  .team-directory-days{font-size:9.5px;margin-bottom:6px}
  .team-directory-card .btn{font-size:10.5px;padding:4px 6px;width:100%}
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field[hidden]{display:none}
.field label{font-size:13.5px;font-weight:700;color:var(--navy-deep)}
.field .req{color:var(--action)}
.field input,.field select,.field textarea,.field .combo-trigger{
  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,.field .combo-trigger: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)}

/* Selector propio para "Especialidad o unidad" (quick-interes en el home,
   f-interes en el modal de Agendar cita) — ver enhanceGroupedSelect() en
   site.js. Reemplaza el <select> nativo con un botón + panel propios para
   evitar el selector a pantalla completa que Android dibuja para un <select>
   con 2+ optgroups (pestañas "Ant./Siguiente", ajeno al resto del sitio).
   El <select> real sigue en el DOM (oculto) como fuente de .value. */
.combo-select{position:relative;display:block}
.combo-native-hidden{display:none}
.combo-trigger{
  width:100%;text-align:left;cursor:pointer;position:relative;
  background-image:none!important; /* anula el chevron propio de .book-band-select: este usa el de abajo, compartido con el trigger del modal */
}
.field .combo-trigger{padding-right:36px}
.combo-trigger::after{
  content:'';position:absolute;top:50%;right:14px;width:16px;height:16px;
  transform:translateY(-50%);pointer-events:none;opacity:.55;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.combo-trigger-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El panel se "porta" a document.body (ver site.js) y se posiciona con
   position:fixed calculado en JS, así que sus coordenadas viven en línea
   (top/left/width) — aquí solo se define su aspecto. */
.combo-panel{
  position:fixed;z-index:260;overflow-y:auto;overflow-x:hidden;padding:8px;box-sizing:border-box;
  background:var(--white);border:1px solid var(--bone-dim);border-radius:var(--radius-sm);
  box-shadow:0 18px 40px rgba(14,33,61,.18);
}
.combo-option{
  display:block;width:100%;box-sizing:border-box;text-align:left;padding:11px 12px;border-radius:var(--radius-sm);
  font-size:14.5px;color:var(--ink);transition:background .15s;
  white-space:normal;word-break:break-word;
}
.combo-option:hover,.combo-option:focus-visible{background:var(--bone-dim)}
.combo-option[aria-selected="true"]{color:var(--action);font-weight:700}

/* 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(--white);color:var(--navy-deep);
  padding:12px 18px;border-radius:var(--radius-sm);font-weight:700;transition:top .2s;box-shadow:var(--shadow-md);
}
.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}}