.smu-container {
    width: min(
        calc(100% - (2 * var(--smu-page-gutter))),
        var(--smu-container-content)
    );
    margin-inline: auto;
}

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

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

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

.smu-section--compact {
    padding-block: var(--smu-section-space-sm);
}

.smu-section--spacious {
    padding-block: var(--smu-section-space-lg);
}

.smu-surface--base {
    background: var(--smu-color-page);
    color: var(--smu-color-text);
}

.smu-surface--white {
    background: var(--smu-color-surface);
    color: var(--smu-color-text);
}

.smu-surface--soft {
    background: var(--smu-color-surface-soft);
    color: var(--smu-color-text);
}

.smu-surface--dark {
    background: var(--smu-color-surface-inverse);
    color: var(--smu-color-text-inverse);
}

.smu-grid {
    display: grid;
    gap: var(--smu-space-6);
}

.smu-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smu-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smu-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .smu-grid--4,
    .smu-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .smu-grid--4,
    .smu-grid--3,
    .smu-grid--2 {
        grid-template-columns: 1fr;
    }
}



/*
 * Contenedor estructural de las referencias HTML Smartmind.
 *
 * El HTML fuente utiliza el modelo content-box para wrappers con:
 * max-width: 1240px + padding lateral.
 *
 * Se mantiene border-box globalmente y solo estos shells
 * reproducen el comportamiento original.
 */
.smu-reference-shell {
    box-sizing: content-box;

    width: auto;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 32px;
}

@media (max-width: 768px) {
    .smu-reference-shell {
        padding-inline: 24px;
    }
}

@media (max-width: 480px) {
    .smu-reference-shell {
        padding-inline: 20px;
    }
}