/* ============================================================
   categoria.css — página /especialidad/{slug}/  (diseño CUMBRE)
   Portado a la marca Médicos en México · fuente Albert Sans
   ============================================================ */

.cat-page{
  --accent:#2F77BE;
  --accent-deep:#1C4E86;
  font-family:'Albert Sans',sans-serif;
  background:#EEF3F8;
  color:#15222E;
  position:relative;
  overflow:hidden;
}
.cat-page *{box-sizing:border-box}
.cat-page a{color:inherit}

.cat-texture{
  position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background:radial-gradient(circle at 14% 10%, rgba(47,119,190,.07), transparent 40%);
}

@keyframes cat-rise{from{transform:translateY(22px);opacity:.4}to{transform:translateY(0);opacity:1}}

/* ── Breadcrumb / Hero ───────────────────────────────────── */
.cat-hero{
  position:relative;z-index:10;max-width:1180px;margin:0 auto;padding:40px 48px 30px;
}
.cat-crumb{font-size:13px;color:#6B7886;font-weight:600;letter-spacing:.04em}
.cat-crumb a{color:#6B7886;text-decoration:none}
.cat-crumb a:hover{color:var(--accent-deep)}
.cat-crumb .sep{color:#A9B7C5;margin:0 8px}
.cat-crumb .cur{color:var(--accent-deep)}

.cat-hero-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:24px;margin-top:24px;
}
.cat-hero-text{max-width:640px}
.cat-eyebrow{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:700;
}
.cat-hero-text h1{
  font-family:'Albert Sans',sans-serif;font-weight:700;
  font-size:clamp(44px,7vw,84px);line-height:.96;letter-spacing:-.015em;
  margin-top:12px;animation:cat-rise .7s ease both;
}
.cat-hero-text p.lead{
  font-size:17px;line-height:1.6;color:#5A6776;margin-top:18px;
}

/* ── Filtros ─────────────────────────────────────────────── */
.cat-filters{
  display:flex;gap:0;background:#F8FBFE;border:1px solid rgba(21,34,46,.14);
  border-radius:12px;box-shadow:0 22px 50px -34px rgba(21,34,46,.4);overflow:hidden;
}
.cat-filters label{padding:12px 18px;border-right:1px solid rgba(21,34,46,.1)}
.cat-filters label:last-child{border-right:none}
.cat-filters .flabel{
  display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#8A95A3;font-weight:700;margin-bottom:3px;
}
.cat-filters select{
  border:none;background:transparent;font-family:'Albert Sans',sans-serif;
  font-size:15px;font-weight:600;color:#15222E;outline:none;cursor:pointer;max-width:240px;
}

/* ── The 3 (tarjetas top) ────────────────────────────────── */
.cat-grid-wrap{position:relative;z-index:10;max-width:1180px;margin:0 auto;padding:30px 48px 20px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.cat-card{
  text-decoration:none;color:inherit;display:block;background:#F8FBFE;
  border:1px solid rgba(21,34,46,.12);border-radius:10px;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 56px -34px rgba(21,34,46,.5);
  border-color:var(--accent);
}
.cat-card-media{position:relative}
.cat-card-photo{display:block;width:100%;height:240px;object-fit:cover}
.cat-card-photo.is-initials{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1A4061,#0F2B42);
  font-family:'Albert Sans',sans-serif;font-weight:700;font-size:64px;color:#2F77BE;
}
.cat-rank{
  position:absolute;top:14px;left:14px;background:rgba(13,36,54,.9);color:#EEF3F8;
  font-family:'Albert Sans',sans-serif;font-weight:700;font-size:22px;
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.cat-badge{
  position:absolute;top:18px;right:14px;background:var(--accent);color:#0D2436;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;
}
.cat-card-body{padding:22px 24px 26px}
.cat-card-body h3{
  font-family:'Albert Sans',sans-serif;font-size:25px;font-weight:600;line-height:1.05;
}
.cat-card-sub{font-size:13.5px;color:#5A6776;margin-top:7px;line-height:1.5}
.cat-card-stats{
  display:flex;gap:22px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(21,34,46,.1);
}
.cat-stat-num{font-family:'Albert Sans',sans-serif;font-size:22px;font-weight:700;color:var(--accent-deep)}
.cat-stat-num span{font-size:12px}
.cat-stat-lbl{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A95A3}
.cat-card-cta{margin-top:18px;font-size:14px;font-weight:700;color:var(--accent)}

.cat-note{text-align:center;margin-top:34px;font-size:14px;color:#7C8B9B;letter-spacing:.04em}
.cat-empty{
  text-align:center;padding:50px 20px;font-size:16px;color:#5A6776;
  background:#F8FBFE;border:1px dashed rgba(21,34,46,.18);border-radius:10px;
}

/* ── Criterios (banda oscura) ────────────────────────────── */
.cat-criteria{
  position:relative;z-index:10;background:#0D2436;color:#E9F1F8;margin-top:50px;padding:70px 48px;
}
.cat-criteria-inner{max-width:1180px;margin:0 auto}
.cat-criteria .cat-eyebrow{color:var(--accent)}
.cat-criteria h2{
  font-family:'Albert Sans',sans-serif;font-weight:600;font-size:clamp(28px,4vw,44px);
  margin-top:10px;max-width:640px;line-height:1.05;
}
.cat-criteria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.cat-crit{border-top:2px solid var(--accent);padding-top:18px}
.cat-crit-n{font-family:'Albert Sans',sans-serif;font-size:30px;font-weight:700;color:var(--accent)}
.cat-crit h3{font-family:'Albert Sans',sans-serif;font-size:19px;font-weight:600;margin-top:12px}
.cat-crit p{font-size:13.5px;line-height:1.55;color:#9FB1C2;margin-top:8px}

/* ── Otras especialidades ────────────────────────────────── */
.cat-related{position:relative;z-index:10;max-width:1180px;margin:0 auto;padding:70px 48px 40px}
.cat-related .cat-eyebrow{color:var(--accent-deep)}
.cat-related h2{
  font-family:'Albert Sans',sans-serif;font-weight:600;
  font-size:clamp(26px,3.6vw,40px);margin-top:10px;
}
.cat-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cat-chip{
  text-decoration:none;color:#26303A;background:#F8FBFE;
  border:1px solid rgba(21,34,46,.14);border-radius:100px;
  padding:12px 22px;font-size:15px;font-weight:600;font-family:'Albert Sans',sans-serif;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.cat-chip:hover{background:#0D2436;color:#EEF3F8;border-color:#0D2436}

/* ── Intro SEO + FAQ ─────────────────────────────────────── */
.cat-intro-wrap{position:relative;z-index:10;max-width:900px;margin:0 auto;padding:50px 48px 10px}
.cat-intro{font-size:1.05rem;line-height:1.8;color:#3A4757}
.cat-intro p{margin-bottom:1em}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px){
  .cat-grid{grid-template-columns:1fr 1fr}
  .cat-criteria-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .cat-hero{padding:28px 22px 20px}
  .cat-grid-wrap{padding:24px 22px}
  .cat-criteria{padding:54px 22px}
  .cat-related{padding:50px 22px 30px}
  .cat-intro-wrap{padding:36px 22px 10px}
  .cat-hero-row{flex-direction:column;align-items:stretch}
  .cat-filters{width:100%}
  .cat-grid{grid-template-columns:1fr}
  .cat-criteria-grid{grid-template-columns:1fr}
}

/* ── Grid de especialidades en la página de ciudad ── */
.city-esp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.city-esp-card{display:block;text-decoration:none;background:#F8FBFE;border:1px solid rgba(21,34,46,.12);border-radius:10px;padding:20px 20px 22px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.city-esp-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 36px -26px rgba(21,34,46,.5)}
.city-esp-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.city-esp-code{font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--accent);text-transform:uppercase}
.city-esp-count{font-size:11px;color:#90A2B4;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.city-esp-name{font-family:'Albert Sans',sans-serif;font-size:21px;font-weight:600;margin-top:18px;line-height:1.12;color:#15222E}
.city-esp-cta{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--accent-deep)}
@media(max-width:560px){.city-esp-grid{grid-template-columns:1fr 1fr}}

/* ── Hero categoría/ciudad: banner de marca con texto legible ──
   (override del .cat-hero heredado de style.css que dejaba el texto ilegible) */
.cat-page .cat-hero{
  background:linear-gradient(135deg,#0D2436 0%,#1C4E86 55%,#2F77BE 100%);
  color:#fff;border-radius:16px;overflow:hidden;padding:44px 48px 40px;margin-top:10px;
}
.cat-page .cat-hero .cat-crumb,
.cat-page .cat-hero .cat-crumb a{color:rgba(255,255,255,.78)}
.cat-page .cat-hero .cat-crumb a:hover{color:#fff}
.cat-page .cat-hero .cat-crumb .sep{color:rgba(255,255,255,.4)}
.cat-page .cat-hero .cat-crumb .cur{color:#fff}
.cat-page .cat-hero .cat-eyebrow{color:rgba(255,255,255,.85)}
.cat-page .cat-hero-text h1{color:#fff}
.cat-page .cat-hero-text p.lead{color:rgba(255,255,255,.85)}
@media(max-width:720px){.cat-page .cat-hero{border-radius:0;padding:30px 22px 26px}}