/* ============================================================
   Red de Clínicas Adventistas — Estilos
   Paleta azul (c-50 … c-800) · fondos claros · toques glass
   ============================================================ */
:root{
  --c50:#E6F2FB; --c100:#C7E0F4; --c200:#92C5EB; --c300:#5BA6DE; --c400:#2882CB;
  --c500:#036CC9; --c600:#0357A0; --c700:#063F75; --c800:#0A2349;

  --bg:#F4F9FE;            /* fondo general (azul muy claro) */
  --surface:#FFFFFF;       /* tarjetas */
  --ink:#0E2440;           /* texto principal (azul oscuro) */
  --muted:#5B7088;         /* texto secundario */
  --border:#DCEAF7;        /* bordes claros */
  --primary:var(--c500);
  --primary-hover:var(--c600);

  --radius:16px;
  --maxw:1180px;
  --shadow:0 20px 45px -28px rgba(3,87,160,.45);
  --shadow-sm:0 10px 30px -20px rgba(3,87,160,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Manrope','Inter',sans-serif;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}
.mt{margin-top:42px}
.hide-sm{display:inline}

.eyebrow{display:inline-block;font-family:'Inter';font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c500)}
.eyebrow.light{color:var(--c200)}
.divider{width:56px;height:3px;background:linear-gradient(90deg,var(--c500),var(--c300));border-radius:2px;margin:14px 0}
.center .divider{margin:14px auto}
.lead{color:var(--muted);font-size:1.06rem;max-width:62ch}
.center .lead{margin-inline:auto}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;
  padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:.22s ease;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 26px -12px rgba(3,108,201,.8)}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px)}
.btn-outline{border-color:var(--c300);color:var(--c600);background:rgba(255,255,255,.6)}
.btn-outline:hover{border-color:var(--c500);background:#fff;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--c600)}
.btn-white:hover{background:var(--c50);transform:translateY(-2px)}
.btn-light-outline{border-color:rgba(255,255,255,.5);color:#fff}
.btn-light-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-whats{background:#25D366;color:#fff}
.btn-whats:hover{background:#1da851;transform:translateY(-2px)}

/* ---------- Topbar ---------- */
.topbar{background:var(--c800);color:#bcd4ec;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 24px}
.topbar a{display:inline-flex;align-items:center;gap:6px;color:#bcd4ec}
.topbar a:hover{color:#fff}
.topbar .sep{color:#2c4a73;margin:0 10px}
.topbar .right{display:flex;align-items:center;gap:14px}
.link-accent{color:var(--c200);font-weight:600}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0}
.brand{display:flex;align-items:center;flex-shrink:0}
/* flex-shrink:0 — la barra es flex y comprimía la marca; con la regla
   global `img{max-width:100%}` y object-fit:fill, el logo no se recortaba:
   se aplastaba. Se veía 93px de ancho cuando le tocaban 171. */
.logo-img{height:48px;width:auto;max-width:none;object-fit:contain}
/* 48 y no 42: el logo oficial lleva tres líneas de texto y «DEL NORTE DE
   MÉXICO» no se lee por debajo de esa altura. El archivo va a 513×144, el
   triple, para que no se vea borroso en pantallas retina. */
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:.93rem;font-weight:600;color:var(--ink)}
.nav a:hover{color:var(--c500)}
.nav-cta-mobile{display:none}
.nav-portal-movil{display:none}
.hamburger{display:none;cursor:pointer;width:44px;height:44px;border:1px solid var(--border);
  border-radius:11px;place-items:center;background:#fff}
.hamburger svg{width:22px;height:22px;color:var(--c700)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#EAF4FF 0%,var(--bg) 100%)}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;z-index:0}
.orb-1{width:460px;height:460px;background:radial-gradient(circle,var(--c200),transparent 70%);top:-120px;right:-80px}
.orb-2{width:380px;height:380px;background:radial-gradient(circle,var(--c100),transparent 70%);bottom:-120px;left:-100px}
.orb-d{width:520px;height:520px;background:radial-gradient(circle,rgba(91,166,222,.35),transparent 70%);
  top:-160px;right:-120px;filter:blur(70px);opacity:.6}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:54px;
  align-items:center;padding:80px 24px 92px}
.hero h1{font-size:3.25rem;margin:16px 0 16px}
.grad{background:linear-gradient(90deg,var(--c500),var(--c300));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero .sub{color:var(--muted);font-size:1.12rem;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px;margin-top:40px}
.hero-trust div{border-left:3px solid var(--c300);padding-left:14px}
.hero-trust b{display:block;font-family:'Manrope';font-size:1.7rem;color:var(--c700)}
.hero-trust small{color:var(--muted);font-size:.82rem}

/* glass card (3 rutas) */
.glass{background:rgba(255,255,255,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}
.bookcard{border-radius:20px;padding:26px}
.bookcard h3{font-size:1.3rem}
.bookcard>p{color:var(--muted);font-size:.92rem;margin:4px 0 18px}
.route{display:flex;align-items:center;gap:14px;padding:13px;border:1px solid var(--border);
  border-radius:13px;margin-bottom:11px;background:#fff;transition:.2s}
.route:hover{border-color:var(--c400);transform:translateX(3px);box-shadow:var(--shadow-sm)}
.route .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--c50);color:var(--c600)}
.route .ic svg{width:21px;height:21px}
.route .ic.whats{background:#e7f9ee;color:#25D366}
.route .rt b{display:block;font-size:.96rem;color:var(--ink)}
.route .rt small{color:var(--muted);font-size:.82rem}
.route .arrow{margin-left:auto;color:var(--c400)}
.route .arrow svg{width:18px;height:18px}

/* ---------- Profesionales ---------- */
/* La ficha lleva título, cédula, posgrado, universidad y sedes, así que el
   texto se alinea a la izquierda: cinco líneas de datos centradas se leen mal.
   La foto baja de cuadrada a 3:2 para dejarles sitio, con el encuadre un poco
   más arriba para no cortar la cabeza. */
.pro{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.pro:hover{box-shadow:var(--shadow);transform:translateY(-5px);border-color:var(--c200)}
.pro-foto{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  object-position:50% 8%;background:var(--c50)}
.pro-ini{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;
  background:linear-gradient(135deg,var(--c50),var(--c100));color:var(--c700);
  font-family:'Manrope';font-weight:800;font-size:2rem;letter-spacing:.06em}
.pro-datos{padding:18px 20px 20px}
.pro h4{font-size:1.02rem;margin-bottom:4px;line-height:1.3}
.pro-esp{color:var(--c600);font-weight:600;font-size:.9rem;margin-bottom:10px}
/* La cédula es el dato con el que cualquiera puede comprobar al profesional,
   pero no es lo primero que se lee: va en gris y pequeña. */
.pro-titulo,.pro-posgrado{color:var(--muted);font-size:.83rem;margin-bottom:6px;line-height:1.45}
.pro-posgrado{color:var(--c700)}
.pro-uni,.pro-sede{display:flex;align-items:flex-start;gap:6px;color:var(--muted);
  font-size:.82rem;line-height:1.4;margin-top:8px}
.pro-uni svg,.pro-sede svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--c500)}

/* La cinta pasa sola de derecha a izquierda y se puede arrastrar. Sin anclaje:
   devolvería la pista a la tarjeta más cercana en cada fotograma y el
   movimiento continuo no avanzaría. `overflow-x` recorta también en vertical,
   de ahí el relleno: sin él se comería el levantamiento y la sombra del
   :hover. */
.pro-carrusel{position:relative}
.pro-pista{display:flex;gap:22px;overflow-x:auto;padding:10px 0 20px;
  scrollbar-width:none;-ms-overflow-style:none}
.pro-pista::-webkit-scrollbar{display:none}
.pro-pista>.pro{flex:0 0 calc((100% - 44px)/3)}

/* Las flechas solo sirven con JS; sin él la pista se arrastra y basta. */
.pro-ctrl{display:none;align-items:center;justify-content:center;gap:14px;margin-top:4px}
.pro-carrusel.con-js .pro-ctrl{display:flex}
.pro-flecha{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--c600);display:grid;place-items:center;
  cursor:pointer;padding:0;transition:.2s}
.pro-flecha:hover{background:var(--c50);border-color:var(--c200);color:var(--c700)}
.pro-flecha svg{width:18px;height:18px}
.pro-flecha:focus-visible,.pro-pista:focus-visible{outline:2px solid var(--c500);outline-offset:3px}

/* Quien pide menos movimiento no recibe la cinta: main.js ni la arranca ni
   duplica las fichas, y la fila se queda quieta y arrastrable. */
@media (prefers-reduced-motion:reduce){
  .pro-pista{scroll-behavior:auto}
}

/* ---------- Trust strip ---------- */
.strip{background:var(--c600);color:#eaf4ff}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:20px 24px;align-items:center}
.strip .item{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500}
.strip .item svg{width:20px;height:20px;color:var(--c200)}

/* Los cuatro distintivos caben en una línea en escritorio. Por debajo de unos
   1000 px ya no, y con `space-between` el que sobra se iba solo a una segunda
   fila: tres arriba y uno suelto debajo. Se reparten de dos en dos. */
@media (max-width:1000px){
  .strip .wrap{justify-content:flex-start;gap:14px 24px}
  .strip .item{flex:0 0 calc(50% - 12px)}
}
@media (max-width:640px){
  .strip .item{flex:0 0 100%}
}

/* ---------- Secciones ---------- */
.section{padding:88px 0;position:relative;overflow:hidden}
.soft{background:var(--c50)}
.head{max-width:60ch}
.center.head,.center .head{margin-inline:auto}
.head h2,.why-grid h2,.online-grid h2,.finalcta h2{font-size:2.35rem;margin:10px 0 12px}

/* ---------- Grid + tarjetas ---------- */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:.25s;overflow:hidden}
/* El relleno pasa de la tarjeta a su cuerpo: la foto tiene que llegar a los
   bordes. `overflow:hidden` la recorta siguiendo el radio de la esquina. */
.card-cuerpo{padding:28px}
.card-foto{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* El icono monta sobre el borde inferior de la foto en vez de repetirse
   debajo: dice lo mismo que la imagen y apilados recargaban la tarjeta.
   Se sube con un margen negativo, no con posición absoluta: el porcentaje se
   medía contra el alto de toda la tarjeta, no el de la foto, y el icono
   acababa encima del título. */
.card .ic{margin-top:-62px;margin-bottom:14px;position:relative;z-index:1;background:#fff;box-shadow:var(--shadow)}
/* La separación la pone el icono con su margen inferior, no el título: al
   fiarlo al margen del h3 se solapaban 18px en móvil, donde la tarjeta pasa
   a una sola columna. */
.card-cuerpo h3{margin-top:0}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--c200)}
.card .ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--c600),var(--c400));color:#fff;margin-bottom:16px}
.card .ic svg{width:27px;height:27px}
.card h3{font-size:1.22rem;margin-bottom:7px}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:14px}
.more{display:inline-flex;align-items:center;gap:7px;color:var(--c500);font-weight:700;font-size:.9rem}
.more svg{width:16px;height:16px;transition:.2s}
.card:hover .more svg{transform:translateX(4px)}

/* ---------- Por qué elegirnos ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.features{margin-top:26px}
.feature{display:flex;gap:15px;margin-bottom:22px}
.feature .ck{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--c500);
  display:grid;place-items:center;flex:none;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.feature .ck svg{width:20px;height:20px}
.feature h4{font-size:1.07rem;margin-bottom:3px}
.feature p{color:var(--muted);font-size:.93rem}
.why-visual{position:relative;overflow:hidden;border-radius:22px;padding:46px;color:#fff;
  background:linear-gradient(150deg,var(--c600),var(--c800));box-shadow:var(--shadow)}
.why-mark{position:absolute;width:230px;opacity:.12;top:-30px;right:-40px;filter:brightness(0) invert(1)}
.why-visual .q{position:relative;font-family:'Manrope';font-weight:700;font-size:1.5rem;line-height:1.4}
.why-visual .badge{display:inline-block;margin-top:24px;border:1px solid var(--c300);color:var(--c200);
  padding:8px 16px;border-radius:999px;font-size:.82rem;letter-spacing:.06em}

/* ---------- Sucursales ---------- */
.branch{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:.25s}
.branch:hover{box-shadow:var(--shadow);transform:translateY(-5px);border-color:var(--c200)}
/* 180 y no 118: con 304 px de ancho, 118 daba una banda de 2,6:1 en la que
   una fachada entera no cabe —había que recortar tanto que solo se veía un
   trozo ampliado—. A 180 la proporción baja a 1,7:1, que es la de una foto de
   edificio. */
.branch .map{height:180px;position:relative;background:linear-gradient(135deg,var(--c100),var(--c50))}
.branch .map::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 22px,rgba(3,87,160,.07) 22px 23px),
  repeating-linear-gradient(90deg,transparent 0 22px,rgba(3,87,160,.07) 22px 23px)}
.branch .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);color:var(--c500);z-index:2}
.branch .pin svg{width:30px;height:30px;filter:drop-shadow(0 4px 6px rgba(3,87,160,.3))}
/* Sucursales con fachada. Solo algunas tienen foto; el resto conserva el
   marcador con el degradado y el pin, así que el estilo se añade aparte en
   vez de cambiar `.branch .map`. */
.branch .map-con-foto{background:none}
.branch .map-con-foto::after{display:none}
.branch .map-con-foto .pin{display:none}
.branch .map-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.branch .body{padding:20px}
.branch h4{font-size:1.1rem;margin-bottom:8px}
.branch .meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.86rem;margin-bottom:5px}
.branch .meta svg{width:15px;height:15px;color:var(--c400);flex:none}
.branch .meta.dir{align-items:flex-start;line-height:1.45}
.branch .meta.dir svg{margin-top:3px}
/* Los servicios son los que tienen profesional con cédula en esa sede, no los
   que el portafolio anuncia: en Obregón y Loreto las dos listas no coinciden. */
.branch .serv{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px;padding:0;list-style:none}
.branch .serv li{font-size:.76rem;line-height:1.2;padding:5px 10px;border-radius:999px;
  background:var(--c50);color:var(--c700);border:1px solid var(--border)}
.branch-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.branch .cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--c500);font-weight:700;font-size:.88rem}
.branch .cta svg{width:15px;height:15px}
.branch .cta-sec{color:var(--muted);font-weight:600}
.branch .cta-sec:hover{color:var(--c500)}

/* ---------- Brigadas y cuidados espirituales ---------- */
/* La ruta son las seis estaciones de `Letreros Brigada.pdf`, en su orden. */
.ruta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px;padding:0;list-style:none}
.ruta li{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  font-size:.88rem;font-weight:600;color:var(--c700)}
.ruta li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--c50);color:var(--c500);font-size:.74rem;flex:none}
.ruta-pie,.hito-pie{color:var(--muted);font-size:.84rem;margin-top:12px}
/* Cada cifra lleva su unidad porque el informe no usa la misma: Santa Rosalía
   cuenta servicios y las otras dos cuentan personas. Sumarlas sería mentir. */
.hito{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px}
.hito b{display:block;font-family:'Manrope';font-size:1.9rem;color:var(--c700);line-height:1.1}
.hito span{display:block;font-weight:700;margin-top:6px}
.hito small{display:block;color:var(--muted);font-size:.84rem;margin-top:5px;line-height:1.4}
.nota{margin-top:26px;padding:20px 24px;border-radius:var(--radius);background:var(--c50);
  border:1px solid var(--border);
  color:var(--muted);font-size:.93rem;line-height:1.65}
.nota b{color:var(--ink)}
.cifras{display:grid;gap:16px}
.alinear{align-items:center}

/* ---------- Sección oscura (online / final) ---------- */
.dark{background:linear-gradient(140deg,var(--c700),var(--c800));color:#eaf4ff}
.online-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.dark h2{color:#fff}
.muted-light{color:#bcd4ec}
.steps{display:grid;gap:16px}
.step{display:flex;gap:16px;align-items:flex-start}
.step .n{width:42px;height:42px;border-radius:50%;border:2px solid var(--c300);color:var(--c200);
  display:grid;place-items:center;font-family:'Manrope';font-weight:800;flex:none}
.step b{color:#fff;display:block}

/* Acceso al portal. Va aparte de los tres pasos: aquéllos son para quien
   empieza de cero y esto es para quien ya tiene cuenta, que hasta ahora no
   tenía por dónde entrar desde aquí. */
.portal{position:relative;z-index:2;margin-top:46px;padding:24px 28px;border-radius:var(--radius);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.portal p{color:#bcd4ec;margin:0;max-width:54ch}
.portal b{color:#fff}
.portal-btns{display:flex;flex-wrap:wrap;gap:12px}
.step small{color:#a9c4e0}

/* ---------- Testimonios ---------- */
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px;position:relative}
.tcard .stars{color:var(--c400);letter-spacing:2px;font-size:1rem;margin-bottom:8px}
.tcard .quote{font-family:Georgia,serif;font-size:3rem;color:var(--c300);line-height:.5;height:22px}
.tcard p{color:#2c4257;font-size:1rem;margin:6px 0 18px}
.tperson{display:flex;align-items:center;gap:13px}
.avatar{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-weight:800;font-family:'Manrope';background:linear-gradient(140deg,var(--c600),var(--c300))}
.avatar.lg{width:92px;height:92px;font-size:1.6rem;margin:0 auto 14px;border:3px solid #fff;box-shadow:var(--shadow)}
.tperson b{display:block;font-size:.96rem}
.tperson small{color:var(--muted)}

/* ---------- Colaboradores ---------- */
/* Con 17 logos en vez de 5, el hueco de 46px y los 62px de alto llenaban
   media pantalla. Se aprietan un poco para que la fila respire igual. */
.partners{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 38px;margin-top:30px}
.partners img{height:52px;width:auto;object-fit:contain;opacity:.85;transition:.25s}
.partners img:hover{opacity:1;transform:translateY(-3px)}

/* ---------- Final CTA ---------- */
.finalcta .center-narrow{max-width:56ch;margin:0 auto}
.center-cta{justify-content:center}

/* ---------- Footer ---------- */
footer.site{background:var(--c800);color:#9fb6d4;font-size:.9rem;padding:62px 0 26px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
.fbrand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fbrand img{height:48px;width:auto}
.fbrand b{color:#fff;font-family:'Manrope';font-weight:800;display:block;line-height:1.15}
.fbrand span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c300)}
.fabout{max-width:34ch;margin-bottom:6px}
footer h5{color:#fff;font-family:'Manrope';font-size:1.02rem;margin-bottom:16px;font-weight:700}
footer a{display:block;color:#9fb6d4;margin-bottom:9px}
footer a:hover{color:var(--c200)}
.fcofe{display:inline-block;margin-top:12px;border:1px solid #1f3a5c;border-radius:8px;padding:7px 12px;font-size:.78rem;color:#bcd4ec}
.fbottom{border-top:1px solid #16294a;margin-top:40px;padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:#6f88ad}

/* ---------- Slider (hero gallery) ---------- */
.hero-slider{background:var(--c800);padding:0}
.hslider{position:relative;height:540px;overflow:hidden}
.hslide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1s ease;display:flex;align-items:center;pointer-events:none}
.hslide.active{opacity:1;pointer-events:auto}
.hslide::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,35,73,.88) 0%,rgba(10,35,73,.55) 45%,rgba(10,35,73,.05) 80%);
  pointer-events:none}
.hslide-caption{position:relative;z-index:2;color:#fff;padding:0 32px;max-width:560px;margin-left:7%}
.hslide-caption .eyebrow.light{color:var(--c200);display:inline-block;margin-bottom:10px}
.hslide-caption .hslide-titulo{font-family:'Manrope','Inter',sans-serif;font-weight:800;
  letter-spacing:-.02em;color:#fff;font-size:2.6rem;line-height:1.15;margin:6px 0 14px}
.hslide-caption p{color:#dceaf7;max-width:42ch;margin-bottom:22px;font-size:1.05rem}
.hslide-arrow{position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;
  width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.2rem;z-index:3;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.2s;
  display:grid;place-items:center;line-height:1;padding:0}
.hslide-arrow:hover{background:rgba(255,255,255,.28);transform:translateY(-50%) scale(1.07)}
.hslide-arrow.prev{left:18px}
.hslide-arrow.next{right:18px}
.hslide-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:3}
.hslide-dots button{width:10px;height:10px;border-radius:50%;border:none;
  background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:.3s}
.hslide-dots button.active{background:#fff;width:28px;border-radius:5px}
.hslide-dots button:hover{background:rgba(255,255,255,.8)}
@media (max-width:760px){
  .hslider{height:440px}
  .hslide-caption .hslide-titulo{font-size:1.7rem}
  .hslide-caption{margin-left:0;padding:0 24px;max-width:none}
  .hslide-caption p{font-size:.96rem}
  .hslide-arrow{width:38px;height:38px;font-size:1rem}
  .hslide-arrow.prev{left:10px}
  .hslide-arrow.next{right:10px}
}

/* ---------- WhatsApp flotante ---------- */
.fab{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(37,211,102,.7);z-index:60;transition:.2s}
.fab svg{width:30px;height:30px;color:#fff}
.fab:hover{transform:scale(1.07)}

/* ---------- Reveal (progresivo: visible sin JS) ---------- */
body.reveal-on .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
body.reveal-on .reveal.in{opacity:1;transform:none}
/* Lo que ya se ve al cargar entra sin animación: no hay nada que anunciar. */
body.reveal-on .reveal.ya{opacity:1;transform:none;transition:none}

/* ---------- Foco y salto al contenido ---------- */
/* Había una sola regla :focus en toda la hoja: quien navega con teclado no
   veía dónde estaba. `:focus-visible` no molesta a quien usa el ratón. */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,
input:focus-visible,summary:focus-visible,.pro-pista:focus-visible{
  outline:3px solid var(--c400);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--c700);color:#fff;font-weight:700;
  border-bottom-right-radius:var(--radius)}
.saltar:focus{left:0}

/* ---------- Destinos de los enlaces internos ---------- */
/* La cabecera es sticky, así que sin esto el salto deja el destino debajo de
   ella. Medida: 81px cuando se ve el botón «Agendar» y 69px por debajo de
   1000, donde se esconde; lo que manda no es el logo de 48 sino el botón de
   56. 100 deja 19px de aire en el peor caso. */
[id]{scroll-margin-top:100px}
/* Las tarjetas llevan tabindex="-1" para que el salto mueva también el foco
   del teclado, no solo la página. Al llegar ahí sí conviene ver el borde. */
.card:focus-visible,.branch:focus-visible{
  outline:3px solid var(--c400);outline-offset:3px}
/* En <main> no: sería un recuadro alrededor de la página entera. El enlace
   de saltar ya se vio antes de pulsarlo, y lo que importa es que el
   siguiente tabulador caiga dentro del contenido. */
main:focus{outline:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero .wrap,.why-grid,.online-grid{grid-template-columns:1fr;gap:38px}
  .hero h1{font-size:2.6rem}
  .g3{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .pro-pista>.pro{flex-basis:calc((100% - 22px)/2)}
}
@media (max-width:760px){
  .nav-cta{display:none}
  .hamburger{display:grid}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    background:#fff;border-bottom:1px solid var(--border);padding:18px 24px;gap:16px;box-shadow:var(--shadow)}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav-cta-mobile{display:inline-flex}
  .nav-portal-movil{display:inline-flex}
  .hide-sm,.topbar .sep,.topbar a.hide-sm{display:none}
  .section{padding:60px 0}
  .g3,.g2,.fgrid{grid-template-columns:1fr}
  .pro-pista>.pro{flex-basis:86%}
  .hero h1{font-size:2.15rem}
  .head h2,.why-grid h2,.online-grid h2,.finalcta h2{font-size:1.85rem}
  .hero-trust{gap:18px}
  .partners{gap:30px}
  .partners img{height:48px}
}

/* Fondos del slider. Estaban como style="…" en el HTML; aquí el sitio puede
   servirse con una CSP sin 'unsafe-inline' en style-src. */
.hslide-1{background-image:url('../assets/img/slider/slider1.webp')}
.hslide-2{background-image:url('../assets/img/slider/slider2.webp')}
.hslide-3{background-image:url('../assets/img/slider/slider3.webp')}
.hslide-4{background-image:url('../assets/img/slider/slider4.webp')}
.hslide-5{background-image:url('../assets/img/slider/slider5.webp')}

/* Página 404 (404.html). Pocas reglas y propias, para no depender de que el
   maquetado del inicio siga igual. */
.nf{max-width:40rem;margin:0 auto;padding:6rem 1.5rem;text-align:center}
.nf-titulo{font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 1rem}
.nf-texto{margin:0 0 1.5rem;line-height:1.6}
.nf-boton{display:inline-block;padding:.9rem 1.8rem;border-radius:999px;
  background:#1565C0;color:#fff;text-decoration:none;font-weight:600}

/* Páginas legales (aviso-de-privacidad.html). Columna estrecha y medidas de
   lectura propias: el resto del sitio está maquetado para secciones anchas. */
.legal{padding:4rem 0 5rem}
.legal .wrap{max-width:46rem}
.legal h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.4rem 0 .4rem}
.legal h2{font-size:1.15rem;margin:2.4rem 0 .7rem}
.legal p,.legal li{line-height:1.7;margin:0 0 .9rem}
.legal ul{padding-left:1.2rem;margin:0 0 1.2rem}
.legal-fecha{color:#64748b;font-size:.9rem;margin-bottom:2rem}
.legal-volver{margin-top:3rem}
.legal-cita{margin:2.5rem 0 1.5rem;padding:1.2rem 1.4rem;border-left:3px solid var(--c500);
  background:#f6f9fd;font-style:italic;color:#334155}
.legal-cita span{display:block;margin-top:.5rem;font-style:normal;font-weight:600;font-size:.9rem}
.legal-rfc{color:#94a3b8;font-size:.85rem;letter-spacing:.04em}

/* Hueco entre el menú completo y el de hamburguesa. El logo oficial ocupa
   171 px y antes la marca se encogía —deformándose— para dejar sitio; ahora
   que no se deforma, entre 761 y 1150 px el botón «Agendar cita» se salía de
   la pantalla. Se recupera apretando el espaciado del menú y bajando un poco
   el logo, sin adelantar la hamburguesa. */
@media (max-width:1150px){
  .nav{gap:14px}
  .nav a{font-size:.88rem}
  .logo-img{height:44px}
}

/* En móvil manda la hamburguesa y el logo puede ser más pequeño. */
@media (max-width:640px){
  .logo-img{height:38px}
}

/* ---------- Página actual en el menú ---------- */
/* El sitio no tenía estado activo porque era de una sola página. Con
   «Noticias» en el menú hace falta: `aria-current="page"` es lo que leen los
   lectores de pantalla, así que el estilo cuelga de ahí y no de una clase
   aparte, para que no puedan separarse. */
.nav a[aria-current="page"]{color:var(--c600);text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:2px}

/* ---------- Título de página interior ---------- */
/* El sitio solo había dimensionado los h2 de `.head`, porque su único h1
   vivía en el hero y tenía estilo propio. Las páginas interiores encabezan
   con h1 dentro de `.head`, así que necesita la misma medida. */
.head h1{font-size:2.35rem;margin:10px 0 12px}
@media (max-width:760px){.head h1{font-size:1.85rem}}

/* ============================================================
   Transparencia y Noticias
   Las dos páginas son registros públicos y cronológicos: un informe
   por años y un índice por días. Comparten por eso una sola idea de
   maquetado —la fecha ocupa una columna propia a la izquierda, el
   contenido va a su lado y los asientos se separan con un filete—
   en lugar de dibujar una línea de tiempo con marcadores, que
   decora pero no añade información que el propio dato no dé. Donde
   la columna no cabe, el asiento se apila.
   ============================================================ */

/* ---------- Transparencia ---------- */
/* Prefijo propio, como `.legal` y `.nf`: lo de esta página no depende de que
   el maquetado de la portada siga igual. */

/* Ficha de datos legales. Es un registro, no una tarjeta: filete entre
   asientos y ninguna caja alrededor. La página se estructura por la rejilla
   y no por cajas flotantes, que es como se compone un documento y no un
   folleto. */
.tr-ficha{margin-top:20px;border-top:1px solid var(--border)}
.tr-ficha > div{display:grid;grid-template-columns:minmax(150px,250px) minmax(0,1fr);
  gap:4px 32px;padding:12px 2px;border-bottom:1px solid var(--border)}
.tr-ficha dt{color:var(--muted);font-size:.9rem}
.tr-ficha dd{margin:0;font-weight:600;color:var(--ink);font-size:.97rem;overflow-wrap:anywhere}

/* La procedencia del dato, con sangría francesa: se lee como la nota al pie
   de un informe y no como un párrafo más. Es la pieza que convierte esto en
   un informe de transparencia; si un bloque no puede llevarla, ese bloque no
   se publica. */
.tr-fuente{display:block;color:var(--muted);font-size:.85rem;line-height:1.6;
  margin-top:14px;max-width:74ch;padding-left:1.7em;text-indent:-1.7em}
.tr-fuente b{color:var(--ink);font-weight:600}

/* Tabla de informe: cabecera en caja baja con filete grueso debajo, sin
   relleno de color y sin caja exterior. El contenedor hace scroll horizontal
   y es enfocable a propósito: con `tabindex="0"` y `role="region"` quien
   navega con teclado puede desplazarla cuando no cabe. */
.tr-tabla{overflow-x:auto;margin-top:22px}
.tr-tabla:focus-visible{outline:3px solid var(--c400);outline-offset:3px}
.tr-tabla table{width:100%;min-width:520px;border-collapse:collapse;font-size:.94rem}
.tr-tabla caption{text-align:left;padding:0 0 12px;color:var(--muted);
  font-size:.86rem;line-height:1.5}
.tr-tabla th,.tr-tabla td{padding:11px 20px 11px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border)}
.tr-tabla th:last-child,.tr-tabla td:last-child{padding-right:0}
.tr-tabla thead th{font-family:'Manrope',sans-serif;font-weight:700;color:var(--c700);
  font-size:.9rem;padding-bottom:9px;border-bottom:2px solid var(--c700);white-space:nowrap}
.tr-tabla tbody th{font-weight:600;color:var(--ink)}
/* Las cifras se leen mejor alineadas y con dígitos de ancho fijo. */
.tr-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Año por año. El año vive en su propia columna, como el lomo de un
   expediente: es lo que permite localizar un asiento, de modo que no
   necesita ni línea que lo enhebre ni marcador que lo señale. */
.tr-registro{margin-top:30px;border-top:1px solid var(--border)}
.tr-ano{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:38px;
  padding:34px 0;border-bottom:1px solid var(--border)}
.tr-ano > h3{margin:0;font-size:1.8rem;color:var(--c600);line-height:1.1;
  font-variant-numeric:tabular-nums}
.tr-ano:focus-visible{outline:3px solid var(--c400);outline-offset:6px}
.tr-detalle > p{color:var(--muted);line-height:1.75;margin:0;max-width:66ch}
.tr-sub{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.15rem;
  color:var(--c700);margin:40px 0 0}

/* Hueco declarado dentro de un apartado. Decir «esto todavía no está» con
   todas las letras es parte del informe, así que se compone como texto del
   informe: filete encima y la entradilla en Manrope. Una caja de borde
   punteado lo haría parecer un hueco del maquetado y no una declaración. */
.tr-pend{margin-top:22px;padding-top:15px;border-top:1px solid var(--border);
  color:var(--muted);font-size:.95rem;line-height:1.7;max-width:68ch}
.tr-pend b{font-family:'Manrope',sans-serif;color:var(--c700);font-weight:700}

/* Lo que falta, como registro: la materia pendiente en la columna de la
   izquierda y la explicación al lado, con la misma rejilla que la ficha. */
.tr-faltas{margin-top:26px;border-top:1px solid var(--border)}
.tr-faltas > div{display:grid;grid-template-columns:minmax(150px,250px) minmax(0,1fr);
  gap:6px 32px;padding:18px 2px;border-bottom:1px solid var(--border)}
.tr-faltas dt{font-family:'Manrope',sans-serif;font-weight:700;color:var(--c700);
  font-size:.98rem;line-height:1.4}
.tr-faltas dd{margin:0;color:var(--muted);line-height:1.7;max-width:62ch}

@media (max-width:780px){
  .tr-ano{grid-template-columns:1fr;column-gap:0;padding:28px 0}
  .tr-ano > h3{margin-bottom:14px}
  .tr-ficha > div,.tr-faltas > div{grid-template-columns:1fr}
}

/* ---------- Noticias · índice ---------- */
/* Índice de periódico: una sola columna de lectura, un asiento por nota
   separado por filetes y la fecha en su columna, igual que los años del
   informe. Sin tarjeta, sin sombra y sin «leer más»: en un índice el titular
   es el enlace. `.card` no servía de base: su `.ic` lleva un margen negativo
   de 62 px para montar el icono sobre la foto, y aquí no hay icono. */
.nt-lista{max-width:50rem;margin:34px auto 0;border-top:1px solid var(--border)}

a.nt-nota{display:grid;grid-template-columns:104px 128px minmax(0,1fr);
  grid-template-areas:"fecha foto texto";column-gap:26px;align-items:start;
  padding:24px 6px;border-bottom:1px solid var(--border);color:var(--ink);
  transition:background .18s ease}
a.nt-nota:hover{background:var(--c50)}
a.nt-nota:focus-visible{outline:3px solid var(--c400);outline-offset:2px}

.nt-fecha{grid-area:fecha;color:var(--muted);font-size:.85rem;line-height:1.45}
.nt-fecha b{display:block;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:1.05rem;color:var(--c600);font-variant-numeric:tabular-nums}

.nt-thumb{grid-area:foto;width:128px;height:96px;border-radius:10px;object-fit:cover;
  background:var(--c50)}
/* Cuando no hay foto que se pueda atribuir con certeza, la miniatura es un
   icono: mejor un hueco honesto que una imagen de otro acontecimiento. */
.nt-thumb-vacia{display:grid;place-items:center;color:var(--c300);background:var(--c50);
  border:1px solid var(--border)}
.nt-thumb-vacia svg{width:30px;height:30px}

.nt-cuerpo{grid-area:texto;min-width:0}
.nt-nota h2{font-size:1.18rem;line-height:1.3;margin:0 0 7px}
a.nt-nota:hover h2{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:2px;text-decoration-color:var(--c300)}
.nt-entradilla{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 9px}
.nt-sede{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.84rem}
.nt-sede svg{width:14px;height:14px;flex:none}

@media (max-width:720px){
  a.nt-nota{grid-template-columns:104px minmax(0,1fr);
    grid-template-areas:"fecha fecha" "foto texto";column-gap:18px;row-gap:12px}
  .nt-fecha b{display:inline;font-size:.85rem;color:var(--muted)}
  .nt-thumb{width:104px;height:78px}
}

/* ---------- Noticias · la nota abierta ---------- */
/* Sin JavaScript: la CSP no admite scripts en línea y tampoco hacen falta.
   Cada nota es un ancla, así que se puede enlazar y compartir por separado
   —`noticias.html#nota-convenio-adra-2025`—, que es media razón de ser de una
   noticia. Con `:has()` el índice se retira y queda la hoja sola; donde no
   haya `:has()`, el índice se queda arriba y la nota aparece debajo: se lee
   igual. Nada de esto lleva `.reveal`: dentro de un `display:none` el
   observador no dispara y el contenido se quedaría invisible para siempre. */
.nt-hoja{display:none}
.nt-hoja:target{display:block}
.nt-seccion:has(.nt-hoja:target) .nt-indice{display:none}

.nt-hoja{max-width:60rem;margin-inline:auto;margin-top:34px}
.nt-volver{display:flex;width:max-content;align-items:center;gap:7px;color:var(--c600);
  font-weight:700;font-size:.9rem;margin-bottom:30px}
.nt-volver:hover{text-decoration:underline;text-underline-offset:4px}
.nt-volver svg{width:15px;height:15px}

.nt-hoja h2{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.12;margin:0 0 16px;
  max-width:22ch}
/* Fecha y lugar compuestos como los compone un periódico —la plaza en
   negrita, la fecha detrás— con un filete grueso debajo que cierra el
   encabezamiento y abre el cuerpo. */
.nt-datalinea{padding-bottom:13px;border-bottom:2px solid var(--c700);
  color:var(--muted);font-size:.92rem;margin-bottom:30px}
.nt-datalinea b{color:var(--ink);font-weight:700}

.nt-hoja figure{margin:0 0 28px}
.nt-hoja figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);background:var(--c50)}
.nt-hoja figcaption{color:var(--muted);font-size:.84rem;line-height:1.5;margin-top:9px}

.nt-entrada{font-size:1.1rem;line-height:1.7;color:var(--ink);margin:0 0 22px;max-width:62ch}
/* A partir de 900 px el cuerpo va a dos columnas. La foto queda fuera del
   bloque a propósito: una imagen dentro de columnas parte el texto de formas
   difíciles de prever. */
.nt-cuerpo-hoja{color:var(--ink);line-height:1.75}
.nt-cuerpo-hoja p{margin:0 0 1rem}
.nt-cuerpo-hoja ul{margin:0 0 1rem;padding-left:1.15rem}
.nt-cuerpo-hoja li{margin-bottom:.4rem}
@media (min-width:900px){
  .nt-cuerpo-hoja{column-count:2;column-gap:46px}
  .nt-cuerpo-hoja > :first-child{margin-top:0}
}
/* Las cifras de la nota, entre filetes y sin relleno: una tabla pequeña
   dentro del texto, que es como un periódico compone un recuadro de datos. */
.nt-cifras{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:14px 0;margin:0 0 1rem;break-inside:avoid}
.nt-cifras dl{margin:0;display:grid;gap:9px}
.nt-cifras div{display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.nt-cifras dt{color:var(--muted);font-size:.9rem}
.nt-cifras dd{margin:0;font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* Con seis entradas en el menú ya no cabe una sola línea entre 760 y 1040:
   «Noticias» hacía que el menú envolviera a dos líneas y el botón de agendar
   quedara pegado al borde. La hamburguesa se adelanta hasta 1040, y solo
   ella: el resto del maquetado sigue cambiando a 760, donde estaba. Las
   reglas repetidas del bloque de 760 se quedan por si este se retira. */
@media (max-width:1040px){
  .nav-cta{display:none}
  .hamburger{display:grid}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;background:#fff;border-bottom:1px solid var(--border);
    padding:18px 24px;gap:16px;box-shadow:var(--shadow)}
  .nav a{font-size:.95rem}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav-cta-mobile{display:inline-flex}
  .nav-portal-movil{display:inline-flex}
}

/* ============================================================
   Páginas de sucursal (/sucursales/ y /sucursales/<slug>/)
   Generadas por tools/build-sucursales.mjs desde data/sucursales.json.
   ============================================================ */

/* ---------- Ruta ---------- */
.suc-miga{background:var(--c50);border-bottom:1px solid var(--border);font-size:.86rem;color:var(--muted)}
.suc-miga .wrap{padding-block:11px}
.suc-miga a:hover{color:var(--c500)}
.suc-miga span{opacity:.55;margin:0 4px}
.suc-miga [aria-current]{color:var(--ink);font-weight:600;opacity:1;margin:0}

/* ---------- Hero ----------
   Las fachadas que tenemos miden 600×236 y varias son de baja calidad, así que
   no aguantan ir a sangre. Van de capa de fondo al 28 % sobre el degradado de
   marca: dan contexto del lugar sin que se note el pixelado. Cuando lleguen las
   fotos nuevas basta con subir la opacidad. */
.suc-hero{position:relative;overflow:hidden;padding:96px 0 84px;
  background:linear-gradient(135deg,var(--c800),var(--c600) 65%,var(--c500))}
.suc-hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.28;filter:saturate(.8)}
.suc-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,35,73,.92),rgba(10,35,73,.55) 55%,rgba(10,35,73,.25))}
.suc-hero-txt{position:relative;z-index:2;color:#fff}
.suc-hero-txt h1{color:#fff;font-size:2.8rem;margin:10px 0 14px;max-width:18ch}
.suc-hero-txt .lead{color:#d6e7f7;max-width:54ch}
.suc-hero-txt .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Datos prácticos ---------- */
.suc-datos{padding:64px 0}
.suc-datos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.suc-dato{display:flex;gap:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.suc-dato-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--c50);color:var(--c500)}
.suc-dato-ico svg{width:21px;height:21px}
.suc-dato h3{font-size:1rem;margin-bottom:5px}
.suc-dato p{color:var(--muted);font-size:.94rem}
.suc-dato a:not(.cta):hover{color:var(--c500)}
.suc-ref{font-size:.87rem;opacity:.8;margin-top:2px}
.suc-dato .cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-weight:700;font-size:.88rem;color:var(--c500)}
.suc-dato .cta svg{width:15px;height:15px}
.suc-dato .cta:hover{gap:10px}

/* ---------- Servicios ---------- */
.suc-servicios{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.suc-servicios li{background:var(--surface);border:1px solid var(--c200);color:var(--c700);
  border-radius:999px;padding:.55rem 1.15rem;font-weight:600;font-size:.93rem}

/* ---------- Precios ----------
   Publicar precios es raro en salud privada en México y es justo lo que la
   gente busca. La tarifa preferente va en su propia columna porque es parte de
   la misión de la institución, no una promoción. */
.suc-tabla-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-top:26px}
.suc-tabla{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.suc-tabla caption{caption-side:bottom;padding:14px 20px;color:var(--muted);font-size:.84rem;text-align:left}
.suc-tabla th,.suc-tabla td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--border)}
.suc-tabla thead th{background:var(--c50);color:var(--c700);font-weight:700;font-size:.84rem;
  letter-spacing:.04em;text-transform:uppercase}
.suc-tabla tbody th{font-weight:500;color:var(--ink)}
.suc-tabla td{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.suc-tabla tbody tr:last-child th,.suc-tabla tbody tr:last-child td{border-bottom:0}
.suc-tabla tbody tr:hover{background:var(--c50)}
.suc-precio-f{color:var(--c500)}
.suc-nota{color:var(--muted);font-size:.9rem;margin-top:16px;max-width:70ch}
.suc-nota-inline{display:block;color:var(--muted);font-size:.82rem;font-weight:400}

/* ---------- Profesionales ----------
   La cédula es el dato que vuelve verificable todo lo demás: se puede consultar
   en el Registro Nacional de Profesionistas. Por eso va visible, no en letra
   pequeña. */
.suc-pros{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.suc-pro{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;transition:.25s}
.suc-pro:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--c200)}
.suc-pro h4{font-size:1.05rem}
.suc-pro-esp{color:var(--c500);font-weight:700;font-size:.9rem;margin:4px 0 10px}
.suc-pro-tit{color:var(--ink);font-size:.9rem}
.suc-pro-ced{color:var(--muted);font-size:.84rem;margin-top:10px;font-variant-numeric:tabular-nums}
.suc-pro-uni{color:var(--muted);font-size:.84rem}
.suc-pro-it{margin-top:12px;padding-top:11px;border-top:1px solid var(--border);
  color:var(--c600);font-size:.82rem;font-weight:600}

/* ---------- Otras sucursales ---------- */
.suc-otras{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px}
.suc-otra{display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:18px;text-align:center;transition:.22s}
.suc-otra:hover{border-color:var(--c300);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.suc-otra b{display:block;font-family:'Manrope',sans-serif;font-size:.97rem;color:var(--ink)}
.suc-otra span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}

/* ---------- Índice de sucursales ---------- */
.branch .body h3{font-size:1.18rem;margin-bottom:8px}
.branch .body h3 a:hover{color:var(--c500)}

@media (max-width:980px){
  .suc-datos-grid,.suc-pros{grid-template-columns:repeat(2,1fr)}
  .suc-otras{grid-template-columns:repeat(3,1fr)}
  .suc-hero-txt h1{font-size:2.2rem}
}
@media (max-width:640px){
  .suc-hero{padding:68px 0 58px}
  .suc-hero-txt h1{font-size:1.85rem}
  .suc-datos-grid,.suc-pros,.suc-otras{grid-template-columns:1fr}
  .suc-hero-txt .hero-cta .btn{width:100%;justify-content:center}
}