/* ==========================================================================
   Layout y Sistema de Grid Asimétrico
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
}

/* Utilidades de asimetría y espacio negativo */
.spacer-xl { height: 20vh; }
.spacer-lg { height: 10vh; }
.spacer-md { height: 5vh; }

/* Composición: Texto Izquierda / Imagen Derecha */
.layout-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
    align-items: center;
}

.layout-split.reverse {
    grid-template-columns: 7fr 5fr;
}

.layout-split.reverse .split-content {
    order: 2;
}

.layout-split.reverse .split-media {
    order: 1;
}

/* Fullscreen Sections */
.section-fullscreen {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 8rem 0;
}

/* Pinned Container Wrapper */
.pinned-wrapper {
    overflow: hidden;
}