.section {
    padding: var(--space-24) var(--gutter);
}

.section__inner {
    max-width: var(--content-max);
    margin: 0 auto;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.section-header__text {
    max-width: 56ch;
}

.section-header__text .display-2 {
    margin-top: var(--space-3);
}

@media (max-width: 720px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
}

/* Grid de 2 columnas que colapsa a 1 en móvil — usar en vez de
   grid-template-columns inline, que no responde a ningún breakpoint. */
.split-grid {
    display: grid;
    gap: var(--space-12);
    grid-template-columns: 1fr 1fr;
}

.split-grid--wide-left {
    grid-template-columns: 1.3fr 1fr;
}

@media (max-width: 760px) {
    .split-grid,
    .split-grid--wide-left {
        grid-template-columns: 1fr;
    }
}

/* Franja de estadísticas de impacto inmediato tras el hero */
.impact-strip {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.impact-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-8);
}

@media (max-width: 560px) {
    .impact-strip__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6) var(--space-4);
    }
}