/* =============================================================
   Ilumina Murcia — core/layout.css
   Container, secciones, helpers de layout.
   ============================================================= */

/* --- Contenedor --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--full {
    max-width: 100%;
}


/* --- Secciones --- */
section {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
}

.section--sm     { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.section--lg     { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.section--xl     { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.section--flush  { padding-top: 0;          padding-bottom: 0; }

.section--bg-soft   { background: var(--color-bg-soft); }
.section--bg-dark   { background: var(--color-bg-dark);  color: var(--color-text-inverse); }
.section--bg-primary{ background: var(--color-primary);  color: var(--color-text-inverse); }
.section--bg-accent { background: var(--color-accent);   color: var(--color-text-inverse); }


/* --- Padding superior para páginas SIN hero ---
   Las páginas con hero (.has-hero) NO necesitan este padding:
   el hero ya empieza en y=0 y absorbe el header transparente. */
main {
    padding-top: var(--header-height);
}

body.has-hero main {
    padding-top: 0;
}


/* --- Header de sección reutilizable (centrado) --- */
.section-head {
    text-align: center;
    margin-bottom: var(--sp-7);
}

.section-head__eyebrow { /* alias para usar en .section-head */
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    margin-bottom: var(--sp-3);
}

.section-head__title {
    font-size: var(--fs-h2);
    margin: 0 0 var(--sp-3);
}

.section-head__lead {
    max-width: 720px;
    margin: 0 auto;
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}


/* --- Helpers de espaciado --- */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mt-5 { margin-top: var(--sp-5) !important; }
.mt-6 { margin-top: var(--sp-6) !important; }
.mt-7 { margin-top: var(--sp-7) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--sp-1) !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-3 { margin-bottom: var(--sp-3) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.mb-5 { margin-bottom: var(--sp-5) !important; }
.mb-6 { margin-bottom: var(--sp-6) !important; }
.mb-7 { margin-bottom: var(--sp-7) !important; }


/* --- Visibilidad --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --- Helpers de display --- */
.d-none      { display: none !important; }
.d-block     { display: block !important; }
.d-flex      { display: flex !important; }
.d-grid      { display: grid !important; }
.d-inline-block { display: inline-block !important; }

@media (min-width: 768px) {
    .d-md-none      { display: none !important; }
    .d-md-block     { display: block !important; }
    .d-md-flex      { display: flex !important; }
}

@media (min-width: 992px) {
    .d-lg-none      { display: none !important; }
    .d-lg-block     { display: block !important; }
    .d-lg-flex      { display: flex !important; }
}