/* ============================================================
   CGAP · Página de especialidad (pages/especialidad-*.html)
   Reutiliza .prac-grid/.prac-card (practicas.css) y .doc-card
   (base/doc-card.css); acá solo va el layout propio de esta página.
   ============================================================ */

/* banda angosta, solo el link de volver (sin fondo) */
.esp-navband{
  padding:18px 24px;
}
.esp-navband .esp-back{margin-bottom:0}
.esp-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.85rem;font-weight:700;color:var(--plum);
  text-decoration:underline;
  transition:color .2s;
}
.esp-back:hover{color:var(--magenta)}
/* la flecha va sin subrayado, el texto conserva el suyo */
.esp-back-arrow{text-decoration:none}

/* título + bajada de la especialidad, alineados a la izquierda */
.esp-hero{
  background:linear-gradient(135deg, #F5D6E8 0%, #FBEFF6 100%);
  padding:3rem 2rem; /* más aire vertical */
  text-align:left;
}
.esp-hero-inner{max-width:620px}
.esp-hero .eyebrow{background:#fff}
.esp-hero-title{
  font-family:'Fraunces',serif;font-size:clamp(2rem,5vw,3rem);
  color:var(--magenta-dark);margin:.7rem 0 0;line-height:1.1;
}

.esp-section{background:#fff;padding:96px 0}
.esp-section--alt{background:var(--cream)}
/* títulos genéricos ("Profesionales"/"Prácticas", sin repetir el nombre
   de la especialidad) centrados, igual que la fila de cards debajo */
.esp-section .prac2-section-title,
.esp-section .prac2-section-sub{
  text-align:center;margin-left:auto;margin-right:auto;
}
.esp-section .prac2-section-title{font-size:1.6rem}
/* algo más de aire entre la fila de profesionales y el título de la
   sección siguiente (prácticas), que quedan una debajo de la otra */
.esp-section:has(+ .esp-section){padding-top:44px;padding-bottom:28px}
.esp-section + .esp-section{padding-top:36px}
/* wrap full-bleed, mismo criterio que el resto de practicas.css */
.esp-section > .wrap{
  width:100vw;max-width:none;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0 40px;box-sizing:border-box;
}
/* columnas de ancho fijo (no 1fr): cuando hay pocos profesionales no se
   estiran para llenar el ancho; centradas, igual que el título de la
   sección */
.esp-doc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,220px));gap:18px;
  justify-content:center;
}
/* .prac-grid (de practicas.css) ya centra sus cards por defecto */
.esp-vermas-wrap{display:flex;justify-content:center;margin-top:12px}
.esp-vermas{padding:12px 28px;display:none;background:#fff;color:var(--magenta);border-color:var(--magenta)}
.esp-vermas:hover{background:var(--magenta);color:#fff}