/* ==========================================================================
   Layout — contenedores, secciones y utilidades de composición.
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

.section {
    position: relative;
    padding-block: var(--section-padding);
}

.section--tight {
    padding-block: clamp(2.75rem, 4vw, 4.5rem);
}

.section--tint {
    background-color: var(--color-surface-tint);
}

/*
 * Arranca en blanco y toma el tono poco a poco. Se usa cuando la sección
 * teñida viene detrás de una blanca: evita la línea horizontal que partía la
 * página justo donde el usuario empieza a hacer scroll.
 */
.section--blend {
    background-image: linear-gradient(
        180deg,
        var(--color-background) 0%,
        var(--color-surface-tint) 180px
    );
}

.section--muted {
    background-color: var(--color-surface-muted);
}

/* --- Encabezado de sección ---------------------------------------------- */
.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.section-head__intro {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    max-width: 62ch;
}

/* --- Etiqueta superior (eyebrow) ---------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

/* Mantiene el contenido por encima de los fondos decorativos de cada sección. */
.section > .container {
    position: relative;
    z-index: 1;
}