/* Bellota V2 — Page header + breadcrumbs (compartido entre todas las vistas)
   Banda gris arriba de la página con: miga → H1 → lead. Border-bottom la separa
   del contenido. Usa `.page-header--slim` cuando solo quieras la miga (detail
   pages con hero propio abajo).
*/

.page-header {
    background: var(--c-surface-alt);
    padding: var(--sp-8) 0 var(--sp-6);
    border-bottom: 1px solid var(--c-border);
}
.page-header--slim { padding: var(--sp-4) 0; }
.page-header--slim .breadcrumbs { margin-bottom: 0; }

.page-header h1 {
    margin: var(--sp-2) 0;
    font-size: var(--fs-3xl);
    color: var(--c-text-strong);
    line-height: var(--lh-tight);
}
.page-header .page-lead {
    color: var(--c-text-muted);
    max-width: 680px;
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
}

/* Breadcrumbs — usados en page-header y también sueltos en algunas vistas */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-2);
}
.breadcrumbs a {
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--t-fast);
}
.breadcrumbs a:hover { color: var(--c-brand); }
.breadcrumbs [aria-current="page"] { color: var(--c-text-strong); }

/* Sección con contenido tras un .page-header (padding-top reducido porque
   la banda ya proporciona separación visual, padding-bottom razonable
   antes del footer). */
.section.section--tight { padding: var(--sp-5) 0 var(--sp-8); }