/* directorio.css — Directorio médico público. Nivel enterprise.
 *
 * UN MISMO STANDARD que el resto del sistema (admin, portal): Manrope de
 * cuerpo, Fraunces de display serif, JetBrains Mono para datos, acento teal
 * #0f8f7f, fondo #f4f6f9, cards blancas, bordes #dfe3eb, radio 14px. La
 * identidad del directorio está en la confianza: el sello de colegiado
 * verificado, la torre de cifras y la claridad de lectura en la calle.
 */

:root{
  /* Mismo sistema que app.css (admin) — modo claro */
  --tinta:#1a2332;          /* text-primary */
  --tinta-2:#4b5a6b;        /* text-secondary */
  --tinta-3:#8492a6;        /* text-muted */
  --papel:#f4f6f9;          /* bg-primary */
  --papel-2:#ffffff;        /* bg-card */
  --linea:#dfe3eb;          /* border-color */
  --acento:#0f8f7f;         /* accent */
  --acento-osc:#0b7a6c;     /* accent-hover */
  --acento-suave:#e6f3f0;   /* accent-muted sólido */
  --acento-borde:#cfe7e0;
  --oro:#d99a2b;
  --ok:#16a34a;
  --aviso:#e2574a;
  --radio:14px;             /* radius-lg */
  --radio-md:10px;          /* radius-md */
  --sombra:0 1px 3px rgba(0,0,0,.06), 0 16px 44px rgba(0,0,0,.12);
  --sombra-suave:0 1px 3px rgba(0,0,0,.06);
  --fuente:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--fuente);color:var(--tinta);background:var(--papel);line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%}
img{max-width:100%;height:auto}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
.min0{min-width:0}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px;border-radius:6px}

/* Full-width como el resto del sistema (admin no tiene max-width). Los grids
   llenan el viewport; solo los párrafos se acotan a una medida de lectura. */
.ancho{max-width:none;padding:0 clamp(16px,4vw,44px)}
.ancho-full{max-width:none;padding:0 clamp(16px,4vw,44px)}
.bloque p,.bloque li,.legal p,.legal li,.banda-sub,.sede-dir{max-width:72ch}
@media (max-width:640px){.ancho,.ancho-full{padding:0 16px}}

/* ════════════════ CABECERA ════════════════ */
.sitio-cab{background:#ffffff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.sitio-cab .ancho{display:flex;align-items:center;gap:26px;min-height:64px;flex-wrap:wrap}
.marca{color:var(--tinta);font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px}
.marca:hover{text-decoration:none}
.marca-ico{width:32px;height:32px;border-radius:10px;background:var(--acento);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:800;box-shadow:0 4px 10px -4px var(--acento)}
.marca small{display:block;font-family:var(--fuente);font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin-top:-2px}

.sitio-nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sitio-nav a{color:var(--tinta-2);font-weight:600;font-size:.9rem;padding:8px 12px;border-radius:10px}
.sitio-nav a:hover{text-decoration:none;color:var(--tinta);background:var(--papel)}
.sitio-nav a.activo{color:var(--acento)}
.sitio-nav .btn{margin-left:6px}
.nav-cta{background:var(--acento);border-color:var(--acento);color:#fff}
.nav-cta:hover{background:var(--acento-osc);border-color:var(--acento-osc);color:#fff}
@media (max-width:760px){
  .sitio-cab .ancho{gap:12px;min-height:56px}
  .marca small{display:none}
  .sitio-nav a{padding:7px 9px;font-size:.84rem}
}

/* ════════════════ HERO (landing) ════════════════ */
.hero{background:
  radial-gradient(1200px 480px at 85% -10%, rgba(15,143,127,.20), transparent 60%),
  radial-gradient(900px 420px at -10% 110%, rgba(217,154,43,.10), transparent 55%),
  #16212e;
  color:#fff;border-radius:0 0 26px 26px;padding:56px 0 0;overflow:hidden}
.hero-in{padding-bottom:34px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7fd1c4;margin:0 0 14px}
.hero-eyebrow::before{content:"";width:22px;height:2px;background:#7fd1c4;border-radius:2px}
.hero h1{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.06;letter-spacing:-.02em;max-width:16ch}
.hero-sub{margin:16px 0 0;font-size:clamp(.95rem,1.6vw,1.1rem);color:#c7d8dd;max-width:46ch;line-height:1.55}
.hero-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px;font-size:.82rem;font-weight:700;color:#bcd6db}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta .bx{color:#3fd3b0}
.hero-busca .buscador{grid-template-columns:1fr;background:rgba(255,255,255,.97);box-shadow:0 24px 60px -28px rgba(0,0,0,.5);padding:20px}
.hero-busca .campo-q input{font-size:1rem;padding:12px 13px}
.hero-busca .btn-buscar{width:100%;padding:13px}
.hero-busca .busca-etq{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 4px}
.stats{display:flex;gap:0;flex-wrap:wrap;margin-top:44px;border-top:1px solid rgba(255,255,255,.14)}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero h1{max-width:20ch}
}
@media (max-width:640px){.hero{padding:38px 0 0;border-radius:0 0 18px 18px}}

/* ── Tira de cifras (stats) — grilla pareja, cada cifra enlaza a su sección ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 0;margin-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.stat{padding:18px 22px 16px 0;display:block;text-decoration:none;color:inherit;border-radius:8px;transition:background .15s ease,transform .15s ease}
.stat:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
.stat:focus-visible{outline:2px solid #7fd1c4;outline-offset:2px}
.stat-cif{font-family:var(--mono);font-size:1.8rem;font-weight:700;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.stat-lbl{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7fd1c4;margin-top:2px}
@media (max-width:920px){.stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}.stat{padding:14px 14px 12px 0}.stat-cif{font-size:1.4rem}}

/* ════════════════ SECCIONES (landing) ════════════════ */
.seccion{padding:44px 0 8px}
.seccion-kicker{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
.seccion-kicker::after{content:"";flex:1;height:1px;background:var(--linea)}
.seccion h2{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.8rem);letter-spacing:-.01em;line-height:1.15}
.seccion-sub{color:var(--tinta-2);margin:0 0 22px;font-size:.95rem;max-width:64ch}

/* ── Especialidades destacadas ── */
.esp-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.esp-item{border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;background:var(--papel-2);display:flex;flex-direction:column;gap:4px;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;position:relative;overflow:hidden}
.esp-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acento);opacity:0;transition:opacity .14s ease}
.esp-item:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--acento);text-decoration:none}
.esp-item:hover::before{opacity:1}
.esp-item>.bx{font-size:1.5rem;color:var(--acento);margin-bottom:2px}
.esp-kpi{font-family:var(--mono);font-size:1.55rem;font-weight:700;color:var(--acento);font-variant-numeric:tabular-nums;line-height:1.05}
.esp-nombre{font-size:.92rem;font-weight:700;color:var(--tinta);line-height:1.25}
.esp-cta{margin-top:6px;font-size:.72rem;font-weight:700;color:var(--tinta-3);display:inline-flex;align-items:center;gap:4px}
.esp-item:hover .esp-cta{color:var(--acento)}
.esp-cta .bx{font-size:1rem}

/* ── Banda de adopción (marketing indirecto) ── */
.banda{background:var(--acento-suave);border:1px solid var(--acento-borde);border-radius:var(--radio);padding:34px 34px 30px;margin:34px 0}
.banda h2{margin:0 0 8px;font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.01em}
.banda-sub{color:var(--tinta-2);margin:0 0 22px;font-size:.95rem;max-width:60ch}
.banda-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.banda-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--linea);border-radius:14px;padding:16px}
.banda-item .bx{font-size:1.35rem;color:var(--acento);flex:none;margin-top:2px}
.banda-item b{display:block;font-size:.92rem;margin-bottom:3px}
.banda-item p{margin:0;font-size:.82rem;color:var(--tinta-2);line-height:1.45}
.banda-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;align-items:center}
.banda-cta .btn-grande{background:var(--acento);border-color:var(--acento);color:#fff}
.banda-cta .btn-grande:hover{background:var(--acento-osc)}
.banda-nota{margin:14px 0 0;font-size:.78rem;color:var(--tinta-3)}
@media (max-width:640px){.banda{padding:24px 20px;border-radius:16px}}

/* ════════════════ BÚSQUEDA ════════════════ */
.buscador{display:grid;grid-template-columns:2fr 1fr 1fr auto auto;gap:10px;align-items:end;
  background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--radio);padding:14px;margin-bottom:22px;box-shadow:var(--sombra-suave)}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo label{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.campo input,.campo select{font:inherit;font-size:.92rem;padding:9px 11px;border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--tinta);min-width:0;width:100%}
.campo input:focus,.campo select:focus{border-color:var(--acento);outline:none;box-shadow:0 0 0 3px var(--acento-suave)}

/* Buscador de laboratorios: dos combos más (tipo y cantón) y los dos filtros
   propios del rubro. Mismo bloque, solo cambia el reparto de columnas. */
.buscador-lab{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr auto auto}
.campo-checks{gap:6px;justify-content:flex-end;padding-bottom:2px}
.campo-lbl{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.campo-checks label.check{flex-direction:row;display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;
  color:var(--tinta-2);letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer}
.campo-checks label.check input[type=checkbox]{width:16px;height:16px;min-width:0;flex:none;accent-color:var(--acento);margin:0}
@media (max-width:1180px){.buscador-lab{grid-template-columns:1fr 1fr 1fr}.buscador-lab .campo-q{grid-column:1/-1}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:.86rem;font-weight:700;
  padding:9px 15px;border-radius:10px;border:1px solid var(--linea);background:#fff;color:var(--tinta);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s ease,border-color .12s ease,transform .12s ease}
.btn:hover{text-decoration:none;border-color:var(--tinta-3)}
.btn-buscar,.btn-cita{background:var(--acento);border-color:var(--acento);color:#fff}
.btn-buscar:hover,.btn-cita:hover{background:var(--acento-osc);border-color:var(--acento-osc);color:#fff;transform:translateY(-1px)}
.btn-cerca{border-style:dashed}
.btn-grande{padding:13px 22px;font-size:.98rem}

/* ════════════════ REJILLA DE RESULTADOS ════════════════ */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(372px,1fr));gap:16px}
.tarjeta{display:flex;background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra-suave);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.tarjeta:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:#c7d8d6}

.torre{flex:none;width:92px;background:linear-gradient(180deg,var(--acento-suave),#f0f7f7);border-right:1px solid var(--linea);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px 8px;text-align:center}
.torre-cif{font-family:var(--mono);font-size:1.1rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--acento)}
.torre-ico{font-size:1.3rem;color:var(--acento);line-height:1}
.torre-lbl{font-size:.56rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);overflow-wrap:anywhere}
.verif{margin-top:8px;font-size:.54rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ok);
  border:1px solid var(--ok);border-radius:20px;padding:2px 7px;line-height:1.3;display:inline-flex;align-items:center;gap:4px}

/* Distintivos de laboratorio: acreditación ECA (INTE/ISO 15189) y toma de
   muestra a domicilio. Solo se pintan cuando el dato existe y es positivo. */
.distintivos{display:flex;flex-wrap:wrap;gap:6px}
.dist{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;font-weight:800;letter-spacing:.03em;
  border-radius:20px;padding:3px 9px;line-height:1.35;border:1px solid var(--linea);color:var(--tinta-2);background:var(--papel)}
.dist .bx{font-size:.9rem}
.dist-acred{color:var(--ok);border-color:var(--ok);background:rgba(22,163,74,.07);text-transform:uppercase}
.dist-dom{color:var(--acento);border-color:var(--acento-borde);background:var(--acento-suave)}

.tarjeta-cuerpo{padding:14px 16px;min-width:0;flex:1;display:flex;flex-direction:column;gap:9px}
.tarjeta-cab{display:flex;gap:12px;align-items:flex-start;min-width:0}
.retrato{flex:none;width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--acento-suave);border:1px solid var(--linea)}
.retrato-ini{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--acento);font-size:1rem}
.retrato-xl{width:104px;height:104px}
.nombre{margin:0;font-size:1.05rem;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.nombre a{color:var(--tinta)}
.nombre a:hover{color:var(--acento)}
.esp{margin:2px 0 0;font-size:.85rem;font-weight:600;color:var(--acento)}
.esp-sin{color:var(--tinta-3);font-weight:500;font-style:italic}
.bio{margin:0;font-size:.86rem;color:var(--tinta-2);overflow-wrap:anywhere}

.linea-nota{margin-top:5px}
.nota{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--tinta-2)}
.nota b{font-size:.92rem;color:var(--tinta)}
.nota-n{color:var(--tinta-3);font-size:.78rem}
.est{position:relative;display:inline-block;letter-spacing:1px;line-height:1;white-space:nowrap}
.est-fondo{color:var(--linea)}
.est-fill{position:absolute;left:0;top:0;overflow:hidden;color:var(--oro);white-space:nowrap}
.sin-nota{font-size:.8rem;color:var(--tinta-3);display:inline-flex;align-items:center;gap:6px}
.est-vacias{color:var(--linea);letter-spacing:1px}

.datos{margin:0;display:grid;gap:5px}
.datos>div{display:flex;gap:8px;min-width:0}
.datos dt{flex:none;width:66px;font-size:.56rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);padding-top:2px}
.datos dd{margin:0;font-size:.84rem;color:var(--tinta-2);min-width:0;overflow-wrap:anywhere}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* ════════════════ MIGAS / TÍTULOS ════════════════ */
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 8px;font-size:.78rem;color:var(--tinta-3)}
.migas li+li::before{content:"›";margin-right:6px;color:var(--tinta-3)}
.migas a{color:var(--tinta-3)}
main{padding:24px 0 56px}
main > .ancho{padding-top:6px}
h1{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.12;letter-spacing:-.01em;margin:6px 0 4px}
.sub{color:var(--tinta-2);margin:0 0 20px;font-size:.94rem}
.pag-titulo{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:2px 0 4px}
.pag-titulo .sub{margin:0 0 4px;flex:1;min-width:220px}

/* ════════════════ FICHA ════════════════ */
.ficha-cab{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--papel-2);
  border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra-suave);margin-bottom:20px}
.ficha-cab h1{margin:0}
.ficha-cab .btn-grande{margin-left:auto}
.verif-linea{margin:7px 0 0;display:inline-block;font-size:.74rem;border-radius:20px;padding:3px 10px}
.verif-sin{color:var(--tinta-3);border:1px dashed var(--linea);text-transform:none;letter-spacing:0;font-weight:600}
.bloque{background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 22px;margin-bottom:16px;box-shadow:var(--sombra-suave)}
.bloque h2{margin:0 0 10px;font-size:1rem;letter-spacing:-.01em}
.bloque p{margin:0 0 8px;font-size:.9rem;color:var(--tinta-2)}
.dir{font-weight:600;color:var(--tinta)}
.vacio{color:var(--tinta-3);font-size:.9rem;padding:14px 0}

.nota-verif{font-size:.78rem;color:var(--ok);background:#eef7f2;border:1px solid #cfe7da;border-radius:9px;padding:8px 11px}
.resena{border-top:1px solid var(--linea);padding:12px 0}
.resena-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.resena-autor{font-weight:700;font-size:.86rem}
.resena time{color:var(--tinta-3);font-size:.76rem}
.resena-resp{background:var(--acento-suave);border-radius:9px;padding:9px 12px;font-size:.84rem;margin-top:6px}

.ficha-hero{background:
  radial-gradient(900px 380px at 90% -20%, rgba(15,143,127,.24), transparent 55%),
  #16212e;
  border-radius:var(--radio);padding:34px 34px 30px;margin:4px 0 22px;color:#fff;box-shadow:var(--sombra)}
.ficha-hero h1{color:#fff;font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.5vw,2.3rem);line-height:1.08;letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
.ficha-hero .esp{color:#7fd1c4;font-size:1rem;font-weight:600;margin:9px 0 0;overflow-wrap:anywhere}
.ficha-hero .verif-badge{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 15px;border-radius:22px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);font-size:.82rem;font-weight:700;overflow-wrap:anywhere}
.ficha-hero .verif-badge .bx{color:#3fd3b0;font-size:1.05rem}
.ficha-hero-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ficha-hero-avatar{flex:none;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:1.9rem;font-weight:800;color:#9fd6dd;letter-spacing:.02em;object-fit:cover}
.ficha-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.ficha-side{position:sticky;top:80px;display:grid;gap:16px}
@media(max-width:900px){.ficha-body{grid-template-columns:1fr}.ficha-side{position:static}}

.hr-strip{display:flex;gap:3px;margin-top:7px}
.hr-dia{flex:1;max-width:30px;text-align:center;font-size:.6rem;font-weight:800;letter-spacing:.02em;padding:3px 0;border-radius:5px;color:var(--tinta-3);background:var(--papel)}
.hr-dia.hr-on{background:var(--acento-suave);color:var(--acento)}

/* ── Widget de reclamo (¿Es su perfil?) ── */
.claim p{font-size:.84rem;color:var(--tinta-2);margin:0 0 12px}
.claim label{display:block;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 5px}
.claim input{width:100%;font:inherit;font-size:.9rem;padding:11px 13px;border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--tinta)}
.claim input:focus{border-color:var(--acento);outline:none;box-shadow:0 0 0 3px var(--acento-suave)}
.claim .btn{width:100%;margin-top:12px}
.claim-msg{margin-top:10px;font-size:.8rem;color:var(--tinta-3);min-height:1em}
.claim-msg.ok{color:var(--ok);font-weight:600}
.claim-msg.err{color:var(--aviso);font-weight:600}

/* ── Widget de solicitud de cita ── */
.cita h2{display:flex;align-items:center;gap:.4rem}
.cita h2 .bx{color:var(--acento)}
.cita p{font-size:.84rem;color:var(--tinta-2);margin:0 0 12px}
.cita-campos{display:flex;flex-direction:column}
.cita label{display:block;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin:10px 0 5px}
.cita-campos>label:first-child{margin-top:0}
.cita .opc{font-weight:600;letter-spacing:0;text-transform:none;color:var(--tinta-3);opacity:.8}
.cita input,.cita textarea{width:100%;font:inherit;font-size:.9rem;padding:11px 13px;border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--tinta)}
.cita textarea{resize:vertical;min-height:56px}
.cita input:focus,.cita textarea:focus{border-color:var(--acento);outline:none;box-shadow:0 0 0 3px var(--acento-suave)}
.cita .btn{width:100%;margin-top:14px}

/* ── Ficha de clínica: mapa multi-pin y sedes ── */
.mapa-ficha{height:360px;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);margin-top:8px;background:var(--acento-suave)}
/* El texto de atribución (Esri/Leaflet) es obligatorio por la licencia del tile
 * gratuito — no se quita. Lo único que se transparenta es la cajita blanca. */
.mapa-ficha .leaflet-control-attribution{background:rgba(255,255,255,.55);font-size:10px;padding:1px 6px}
.mapa-aprox{margin:8px 0 0;font-size:.8rem;color:var(--tinta-3);display:flex;align-items:center;gap:5px}
.mapa-aprox i{color:var(--acento)}
.sedes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:12px}
.sede-card{border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;background:#fff;box-shadow:var(--sombra-suave)}
.sede-tit{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:7px;color:var(--tinta)}
.sede-tit .bx{color:var(--acento);font-size:1.05rem}
.sede-dir{font-size:.8rem;color:var(--tinta-3);margin-top:4px;line-height:1.45}
.sede-link{font-size:.76rem;font-weight:700;margin-top:10px;display:inline-flex;align-items:center;gap:4px;color:var(--acento)}
.sede-link:hover{text-decoration:underline}

/* ════════════════ PAGINACIÓN ════════════════ */
.paginacion{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:28px 0 4px}
.pag-info{font-size:.78rem;color:var(--tinta-3);font-weight:600;margin-right:auto;font-family:var(--mono);font-variant-numeric:tabular-nums}
.pag-info b{color:var(--tinta);font-weight:800}
.pag-flecha,.pag-num{display:inline-flex;align-items:center;justify-content:center;height:38px;min-width:38px;padding:0 11px;border-radius:10px;font-size:.88rem;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;text-decoration:none;transition:transform .12s ease,background .12s ease,border-color .12s ease}
.pag-flecha{color:var(--tinta-2);border:1px solid var(--linea);background:var(--papel-2);font-size:1.1rem;line-height:1}
.pag-flecha:hover{border-color:var(--acento);color:var(--acento);transform:translateY(-1px)}
.pag-num{color:var(--tinta-2);border:1px solid transparent}
.pag-num:hover{color:var(--acento);background:var(--acento-suave)}
.pag-num.pag-hoy{background:var(--acento);color:#fff;border-color:var(--acento);box-shadow:0 3px 10px -3px var(--acento)}
.pag-sep{color:var(--tinta-3);font-weight:600;padding:0 2px}

/* ════════════════ LISTA + MAPA (Leaflet) ════════════════ */
.directorio-layout{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start;margin-top:6px}
.dir-lista{min-width:0}
.dir-lista .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dir-mapa{position:sticky;top:80px;height:calc(100vh - 110px);border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);background:var(--acento-suave);box-shadow:var(--sombra-suave)}
#mapa{width:100%;height:100%;min-height:320px}
.dir-mapa .leaflet-container{font-family:var(--fuente)}
/* Panel honesto cuando el listado aún no tiene coordenadas (misma caja que el mapa). */
.mapa-pendiente{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:28px}
.mapa-pendiente i{font-size:2.4rem;color:var(--acento)}
.mapa-pendiente p{margin:2px 0 0;font-weight:700;color:var(--tinta)}
.mapa-pendiente span{font-size:.82rem;color:var(--tinta-3);max-width:24ch}
@media (max-width:980px){.directorio-layout{grid-template-columns:1fr}.dir-mapa{display:none}}

/* ════════════════ PIE ════════════════ */
.sitio-pie{background:#16212e;color:#fff;padding:40px 0 26px;margin-top:48px}
.sitio-pie .ancho{display:grid;gap:30px}
/* CINCO pistas para los CINCO bloques del pie (marca + 4 columnas). Antes se
   declaraban cuatro y el quinto caía a una segunda fila, dejando un hueco
   enorme bajo la marca. minmax(0,1fr) evita que una columna con un nombre de
   especialidad largo empuje a las demás. */
.pie-cols{display:grid;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));gap:24px 28px;align-items:start}
.pie-marca .marca{color:#fff}
.pie-marca .marca small{color:#7fd1c4}
.pie-marca p{font-size:.84rem;color:#bcd6db;line-height:1.55;max-width:34ch;margin:12px 0 0}
.pie-bloque h2{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7fd1c4;margin:0 0 12px}
.pie-links{display:flex;flex-direction:column;gap:8px}
.pie-links a{color:#dcecee;font-size:.86rem}
.pie-links a:hover{color:#fff}
.pie-cantones{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}
.pie-links-inline{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
.pie-baja{display:flex;justify-content:space-between;align-items:center;gap:12px 22px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);margin-top:24px;padding-top:18px;font-size:.76rem;color:#9fb8bd}
.pie-legal{display:flex;gap:16px;flex-wrap:wrap}
.pie-links .pie-mas{color:#7fd1c4;font-weight:600;margin-top:4px}
.pie-baja a{color:#dcecee;text-decoration:underline}
.pie-baja .urgencia{color:#ffd7a8;font-weight:700}
@media (max-width:1080px){.pie-cols{grid-template-columns:repeat(3,minmax(0,1fr))}.pie-marca{grid-column:1/-1}}
@media (max-width:820px){.pie-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.pie-marca{grid-column:1/-1}}
@media (max-width:480px){.pie-cols{grid-template-columns:1fr}}

/* ════════════════ POR QUÉ SGS (sección producto) ════════════════ */
.porque{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;margin:8px 0 8px}
.porque-copy h2{margin:0 0 8px;font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.8vw,2rem);letter-spacing:-.01em;line-height:1.12}
.porque-copy .seccion-sub{margin:0 0 22px}
.porque-stats{display:flex;gap:34px;flex-wrap:wrap;margin:6px 0 20px}
.porque-num{font-family:var(--mono);font-size:2.2rem;font-weight:700;color:var(--acento);font-variant-numeric:tabular-nums;line-height:1}
.porque-lbl{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);margin-top:4px}
.porque-lista{display:grid;gap:10px}
.porque-li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--tinta-2)}
.porque-li .bx{color:var(--acento);font-size:1.15rem;flex:none;margin-top:2px}
.porque-li b{color:var(--tinta)}

/* Mockup: pantalla del sistema (mediciones). Luce como una captura real. */
.mock{position:relative;border:1px solid var(--linea);border-radius:18px;background:#fff;box-shadow:var(--sombra);overflow:hidden}
.mock-bar{background:var(--tinta);color:#fff;display:flex;align-items:center;gap:8px;padding:12px 16px}
.mock-bar .punto{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}
.mock-bar b{font-size:.82rem;font-weight:700;margin-left:6px;font-family:var(--mono)}
.mock-bar .mock-tag{margin-left:auto;font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7fd1c4}
.mock-body{padding:14px 16px}
.mock-tit{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);margin:2px 0 8px}
.mock-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.mock-chip{border:1px solid var(--linea);border-radius:10px;padding:8px 9px;background:#fbfcfd}
.mock-chip span{display:block;font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3)}
.mock-chip b{font-family:var(--mono);font-size:.84rem;font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.mock-chip i{font-style:normal;font-size:.6rem;color:var(--tinta-3)}
.mock-chip .ok{color:var(--ok)}
.mock-grafo{display:flex;align-items:flex-end;gap:6px;height:74px;margin-top:12px;padding:0 2px}
.mock-grafo .bar{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--acento),var(--acento-suave));min-height:4px}
.mock-grafo .bar:nth-child(odd){opacity:.55}
.mock-pie{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.mock-pill{flex:1;min-width:96px;border:1px solid var(--linea);border-radius:10px;padding:9px 11px;background:#fbfcfd;text-align:center}
.mock-pill b{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--acento);display:block}
.mock-pill span{font-size:.56rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
@media (max-width:860px){.porque{grid-template-columns:1fr;gap:26px}.mock-chips{grid-template-columns:repeat(3,1fr)}}

/* ════════════════ EDITORES DE PERFIL (doctor/clínica) ════════════════ */
.claim-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;max-width:1000px;margin:1rem auto;align-items:start}
.claim-grid>.card{max-width:none;margin:0}
.beneficio{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--linea)}
.beneficio:last-child{border-bottom:none}
.beneficio .bx{color:var(--acento);font-size:1.25rem;flex:none;margin-top:1px}
.beneficio b{font-size:.86rem;display:block}
.beneficio span{font-size:.78rem;color:var(--tinta-2);line-height:1.45}
@media(max-width:760px){.claim-grid{grid-template-columns:1fr}}
.card{background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra-suave)}
.card h2{margin:0 0 10px;font-family:var(--display);font-weight:600;font-size:1.15rem}
.card label{font-size:.74rem;font-weight:700;color:var(--tinta-2);display:block;margin-bottom:4px}
.card input,.card select,.card textarea{font:inherit;font-size:.9rem;padding:10px 12px;border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--tinta)}
.card input:focus,.card select:focus,.card textarea:focus{border-color:var(--acento);outline:none;box-shadow:0 0 0 3px var(--acento-suave)}
.btn-accent{background:var(--acento);border-color:var(--acento);color:#fff}
.btn-accent:hover{background:var(--acento-osc);border-color:var(--acento-osc);color:#fff}
.btn-ghost{background:transparent;color:var(--tinta-2)}
.pill{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:20px;padding:3px 10px;white-space:nowrap}
.pill.ok{color:var(--ok);border:1px solid var(--ok);background:#eef7f2}
.pill.dim{color:var(--tinta-3);border:1px solid var(--linea)}
.pill.err{color:var(--aviso);border:1px solid var(--aviso);background:#fdf0ef}

/* ════════════════ PUERTAS DE ENTRADA (landing) ════════════════ */
.acceso-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
.acceso-card{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--sombra-suave)}
.acceso-card .bx{font-size:1.6rem;color:var(--acento)}
.acceso-card h3{margin:0;font-family:var(--display);font-weight:600;font-size:1.2rem}
.acceso-card p{margin:0;font-size:.85rem;color:var(--tinta-2);line-height:1.5}
.acceso-card .btn{width:100%;justify-content:flex-start;margin-top:2px}
@media(max-width:860px){.acceso-grid{grid-template-columns:1fr}}

/* ════════════════ SLIDER DE PANTALLAS (landing) ════════════════ */
.slider{position:relative;margin-top:8px}
.slider-viewport{overflow:hidden;border-radius:var(--radio);border:1px solid var(--linea);background:#fff;box-shadow:var(--sombra)}
.slider-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
/* 3 por página en desktop, 2 en tablet, 1 en móvil. */
.slide{flex:0 0 100%;min-width:0;margin:0;padding:0}
@media(min-width:561px){.slide{flex:0 0 50%;padding:0 7px}}
@media(min-width:981px){.slide{flex:0 0 33.3333%;padding:0 9px}}
.slide:first-child{padding-left:0}
.slide:last-child{padding-right:0}
.slide figure{margin:0}
.slide img{width:100%;display:block;height:clamp(220px,32vw,340px);object-fit:cover;object-position:top;border-radius:10px 10px 0 0}
.slide figcaption{padding:13px 15px;border:1px solid var(--linea);border-top:none;border-radius:0 0 10px 10px;background:#fff;min-height:74px}
.slide figcaption b{font-family:var(--display);font-weight:600;font-size:1rem}
.slide figcaption span{display:block;font-size:.8rem;color:var(--tinta-2);margin-top:2px;line-height:1.4}
.slider-btn{position:absolute;top:calc(50% - 46px);transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--linea);background:#fff;color:var(--tinta);font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sombra);z-index:5;opacity:.94;transition:opacity .12s ease,transform .12s ease}
.slider-btn:hover{opacity:1;transform:translateY(-50%) scale(1.06)}
.slider-prev{left:14px}
.slider-next{right:14px}
.slider-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.slider-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--linea);cursor:pointer;padding:0;transition:background .12s ease,transform .12s ease}
.slider-dots button:hover{background:var(--tinta-3)}
.slider-dots button.activo{background:var(--acento);transform:scale(1.3)}
@media(max-width:640px){.slide img{height:220px}.slider-btn{width:38px;height:38px;font-size:1.2rem}}

/* ════════════════ CATÁLOGO DE MEDICIONES (landing) ════════════════ */
.destacados{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:8px 0 26px}
.destacado{border:1px solid var(--linea);border-radius:var(--radio);padding:20px;background:var(--papel-2);box-shadow:var(--sombra-suave);display:flex;flex-direction:column;gap:6px}
.destacado .bx{font-size:1.7rem;color:var(--acento)}
.destacado h3{margin:0;font-family:var(--display);font-weight:600;font-size:1.1rem}
.destacado p{margin:0;font-size:.84rem;color:var(--tinta-2);line-height:1.5}
.destacado .sello{margin-top:auto;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--acento);border:1px solid var(--acento-borde);background:var(--acento-suave);border-radius:20px;padding:4px 10px;align-self:flex-start}

/* Buscador de mediciones: escribe y aparecen coincidencias (no se chorrean). */
.med-buscador{display:flex;align-items:center;gap:10px;border:1px solid var(--linea);border-radius:14px;background:var(--papel-2);box-shadow:var(--sombra-suave);padding:6px 8px 6px 16px;margin:8px 0 0}
.med-buscador .bx-search{color:var(--acento);font-size:1.25rem;flex:none}
.med-buscador input{flex:1;min-width:0;font:inherit;font-size:.96rem;padding:11px 4px;border:none;background:transparent;color:var(--tinta)}
.med-buscador input:focus{outline:none}
.med-buscador input::placeholder{color:var(--tinta-3)}
.med-total{font-family:var(--mono);font-size:.72rem;color:var(--tinta-3);font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:8px}
.med-resultados{margin-top:12px;min-height:44px}
.med-vacio{color:var(--tinta-3);font-size:.88rem;margin:0}
.med-vacio b{color:var(--acento);font-weight:700}
.med-hit-count{font-family:var(--mono);font-size:.74rem;color:var(--tinta-3);font-weight:600;margin:0 0 8px}
.med-hits{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:0;padding:0}
.med-hits li{display:flex;align-items:baseline;gap:9px;border:1px solid var(--linea);border-radius:11px;background:var(--papel-2);padding:9px 13px;min-width:0}
.med-hits .bx{color:var(--acento);font-size:1rem;flex:none;transform:translateY(2px)}
.med-hits b{font-size:.86rem;color:var(--tinta);flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.35}
.med-hits span{flex:none;margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.04em;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
@media (max-width:560px){.med-total{display:none}}

/* ════════════════ TÉRMINOS ════════════════ */
/* Sin max-width propio: full width como el resto del sitio. La legibilidad del
 * párrafo la da el max-width:72ch de la regla de arriba, no el contenedor. */
.legal h2{margin:26px 0 8px;font-size:1.15rem}
.legal p,.legal li{font-size:.9rem;color:var(--tinta-2);line-height:1.6}
.legal ul{padding-left:20px}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width:820px){
  .buscador{grid-template-columns:1fr 1fr}
  .buscador-lab{grid-template-columns:1fr 1fr}
  .campo-q{grid-column:1/-1}
  .rejilla{grid-template-columns:1fr}
  .ficha-cab .btn-grande{margin-left:0;width:100%}
}
/* Móvil: la lista de resultados a UNA columna (2 columnas colapsaban la card y
   partían el nombre letra por letra), y el hero de la ficha apila en vertical. */
@media (max-width:640px){
  .dir-lista .rejilla{grid-template-columns:1fr}
  .ficha-hero-top{flex-direction:column;align-items:flex-start;gap:16px}
  .ficha-hero-top .min0{width:100%}
  .ficha-hero .btn-grande{width:100%;justify-content:center}
}
@media (max-width:420px){
  .buscador{grid-template-columns:1fr}
  .torre{width:78px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* FAQ (AEO) — landings de especialidad y páginas informativas */
.dir-faq{max-width:820px;margin:2.5rem auto 0;padding:0 1rem}
.dir-faq>h2{font-family:'Fraunces',Georgia,serif;font-size:1.4rem;margin:0 0 1rem}
.faq-item{border:1px solid var(--linea,#e4e8f0);border-radius:12px;margin:0 0 .6rem;background:var(--panel,#fff);overflow:hidden}
.faq-item>summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:'+';font-size:1.3rem;color:var(--acc,#0f8f7f);font-weight:400;flex:0 0 auto}
.faq-item[open]>summary::after{content:'\2212'}
.faq-item>p{margin:0;padding:0 1.1rem 1rem;color:var(--texto-2,#55637a);line-height:1.55}

/* ════════════════ ALIADOS ════════════════
   Mismos tokens, misma tipografía y las mismas cajas (.bloque, .ficha-cab) que
   el resto del directorio: un aliado tiene que verse parte del sistema. Lo
   único que sube la voz es el comparador calado, y sube la voz porque ES el
   argumento — un yeso es una masa, una férula impresa es una malla abierta. */

/* Monograma en vez de logo: mientras no haya imagen cargada, una inicial en la
   caja del acento identifica sin fingir una marca que no tenemos. */
.ali-mono{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--acento-suave);border:1px solid var(--acento-borde);
  color:var(--acento);font-size:1.45rem;display:inline-flex;align-items:center;justify-content:center}
.ali-mono-g{width:58px;height:58px;font-size:1.85rem;border-radius:14px}
/* Con logo la caja deja de ser un monograma nuestro y pasa a ser el espacio de
   la marca ajena: fondo neutro y sin el tinte de acento, que teñiría un logo
   con transparencia. `contain` y no `cover`: un logo recortado es un logo mal
   usado, y el aliado lo nota antes que nadie. */
.ali-mono-img{background:var(--papel-2);border-color:var(--linea);padding:5px}
.ali-mono-img img{width:100%;height:100%;object-fit:contain;display:block}

/* Listado */
.ali-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:28px}
.ali-card{display:flex;align-items:center;gap:14px;background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px 18px;box-shadow:var(--sombra-suave);color:var(--tinta);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.ali-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--acento)}
.ali-card-n{display:block;font-weight:800;font-size:1rem;letter-spacing:-.01em}
.ali-card-t{display:block;font-size:.86rem;color:var(--tinta-2);margin-top:2px}
.ali-card-pie{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-top:7px}
.ali-card>.bx{margin-left:auto;font-size:1.4rem;color:var(--tinta-3)}
.ali-card:hover>.bx{color:var(--acento)}

/* Ficha */
.ali-meta{margin:9px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ali-cobertura{font-size:.76rem;font-weight:700;color:var(--tinta-3)}
.ali-fino{margin:10px 0 0;font-size:.82rem;color:var(--tinta-3)}

.ali-pasos{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ali-pasos li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;
  border:1px solid var(--linea);border-radius:var(--radio-md);padding:13px 15px;background:var(--papel);font-size:.9rem;color:var(--tinta-2)}
.ali-pasos li>.bx{font-size:1.3rem;color:var(--acento);grid-row:span 2}
@media (max-width:820px){.ali-pasos{grid-template-columns:1fr}}
.ali-pasos b{display:block;color:var(--tinta);font-size:.92rem;margin-bottom:2px}

.ali-fam{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:12px}
.ali-fam-item{border:1px solid var(--linea);border-radius:var(--radio-md);padding:16px 17px;background:var(--papel)}
.ali-fam-item>.bx{font-size:1.5rem;color:var(--acento)}
.ali-fam-item h3{margin:6px 0 4px;font-size:.95rem;letter-spacing:-.01em}
.ali-fam-item p{margin:0;font-size:.85rem;color:var(--tinta-2)}

/* El comparador: acá va toda la audacia de la sección, y sólo acá. */
.ali-eyebrow{margin:0 0 2px;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
.ali-comp-caja{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px;align-items:center;margin-top:14px}
/* Ancho propio con scroll: el dibujo no se encoge hasta volverse ilegible. */
.ali-comp-fig{margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-md);padding:14px 10px}
.ali-comp-svg{display:block;width:100%;min-width:420px;height:auto}
.ali-comp-lbl{font-family:'Manrope',system-ui,sans-serif;font-size:15px;font-weight:800;fill:#8492a6}
.ali-comp-lbl-on{fill:#0b7a6c}
/* La malla aparece: primero el contorno, después lo que lo llena. Es la misma
   lectura que queremos que haga el ojo. El bloque global de
   prefers-reduced-motion al final del archivo la desactiva. */
.ali-comp-abierto{animation:ali-calar .5s ease-out both;transform-origin:center}
@keyframes ali-calar{from{opacity:0}to{opacity:1}}

.ali-notas{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ali-notas li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;font-size:.88rem;color:var(--tinta-2)}
.ali-notas .bx{font-size:1.25rem;color:var(--acento)}
.ali-notas b{color:var(--tinta)}

@media (max-width:900px){
  .ali-comp-caja{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .ali-rejilla{grid-template-columns:1fr}
  .ali-card{padding:15px}
  .ficha-cab .ali-mono-g{width:48px;height:48px;font-size:1.4rem}
}

/* ════════════════ MENCIÓN DE UN TERCERO ════════════════
   Lo que un aliado AFIRMA sobre un médico, en la ficha del médico.

   Se diseñó a propósito para NO parecerse al sello de colegiado (.verif-badge /
   .verif-linea): aquel es una pastilla, con check, en el hero y en el color de
   la confianza, porque esa colegiatura la cotejamos nosotros contra el padrón.
   Esto es una cita de un tercero, así que es una caja rectangular con filete
   gris al margen, texto en serif de cita, sin ícono y en la columna secundaria.
   Distinta forma, distinto peso y distinto lugar: para que nadie las lea como
   la misma clase de cosa. */
.mencion{border-left:3px solid var(--linea);padding:2px 0 2px 13px}
.mencion+.mencion{margin-top:14px}
.mencion-dicho{font-family:var(--display);font-size:.98rem;line-height:1.4;color:var(--tinta);margin:0 0 6px}
.mencion-dicho a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--tinta-3)}
.mencion-dicho a:hover{color:var(--acento);text-decoration-color:var(--acento)}
.mencion-nota{margin:0;font-size:.76rem;line-height:1.5;color:var(--tinta-3)}

/* La misma atribución, una sola vez, arriba del listado de la faceta. */
.dicho{margin:-8px 0 20px;font-size:.86rem;color:var(--tinta-3);border-left:3px solid var(--linea);padding-left:13px;max-width:72ch}
