/* =====================================================
   SKELETON MODERN
   Sustituto drop-in del grid legacy de Skeleton
   ===================================================== */

:root {
    --sk-container-max: 1200px;
    --sk-container-pad: 24px;
    --sk-grid-gap-x: 24px;
    --sk-grid-gap-y: 24px;
}

/* Contenedor principal con grid moderno de 16 columnas */
.container,
.slider-text {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    column-gap: var(--sk-grid-gap-x);
    row-gap: var(--sk-grid-gap-y);
    align-items: start;
}

.slider-text {
    align-items: end;
}

.container {
    width: 100%;
    max-width: var(--sk-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sk-container-pad);
    padding-right: var(--sk-container-pad);
}

/* Por defecto, los hijos sin clases de columna ocupan todo el ancho */
.container > :not(.column):not(.columns),
.slider-text > :not(.column):not(.columns) {
    grid-column: 1 / -1;
}

.container > .column,
.container > .columns,
.slider-text > .column,
.slider-text > .columns {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
}

/* Span por defecto */
.container > .column,
.container > .columns,
.slider-text > .column,
.slider-text > .columns {
    grid-column: span 16;
}

/* Equivalencias tipo Skeleton */
.container > .one.column,
.container > .one.columns,
.slider-text > .one.column,
.slider-text > .one.columns {
    grid-column: span 1;
}

.container > .two.column,
.container > .two.columns,
.slider-text > .two.column,
.slider-text > .two.columns {
    grid-column: span 2;
}

.container > .three.column,
.container > .three.columns,
.slider-text > .three.column,
.slider-text > .three.columns {
    grid-column: span 3;
}

.container > .four.column,
.container > .four.columns,
.slider-text > .four.column,
.slider-text > .four.columns {
    grid-column: span 4;
}

.container > .five.column,
.container > .five.columns,
.slider-text > .five.column,
.slider-text > .five.columns {
    grid-column: span 5;
}

.container > .six.column,
.container > .six.columns,
.slider-text > .six.column,
.slider-text > .six.columns {
    grid-column: span 6;
}

.container > .seven.column,
.container > .seven.columns,
.slider-text > .seven.column,
.slider-text > .seven.columns {
    grid-column: span 7;
}

.container > .eight.column,
.container > .eight.columns,
.container > .one-half.column,
.container > .one-half.columns,
.slider-text > .eight.column,
.slider-text > .eight.columns,
.slider-text > .one-half.column,
.slider-text > .one-half.columns {
    grid-column: span 8;
}

.container > .nine.column,
.container > .nine.columns,
.slider-text > .nine.column,
.slider-text > .nine.columns {
    grid-column: span 9;
}

.container > .ten.column,
.container > .ten.columns,
.slider-text > .ten.column,
.slider-text > .ten.columns {
    grid-column: span 10;
}

.container > .eleven.column,
.container > .eleven.columns,
.slider-text > .eleven.column,
.slider-text > .eleven.columns {
    grid-column: span 11;
}

.container > .twelve.column,
.container > .twelve.columns,
.slider-text > .twelve.column,
.slider-text > .twelve.columns {
    grid-column: span 12;
}

.container > .thirteen.column,
.container > .thirteen.columns,
.slider-text > .thirteen.column,
.slider-text > .thirteen.columns {
    grid-column: span 13;
}

.container > .fourteen.column,
.container > .fourteen.columns,
.slider-text > .fourteen.column,
.slider-text > .fourteen.columns {
    grid-column: span 14;
}

.container > .fifteen.column,
.container > .fifteen.columns,
.slider-text > .fifteen.column,
.slider-text > .fifteen.columns {
    grid-column: span 15;
}

.container > .sixteen.column,
.container > .sixteen.columns,
.slider-text > .sixteen.column,
.slider-text > .sixteen.columns {
    grid-column: span 16;
}

/* Cuando una sección conserva una "media columna" única, la centramos */
#about .one-half.column,
#about .one-half.columns {
    grid-column: 3 / span 12;
    justify-self: center;
}

/* Utilidades frecuentes de Skeleton */
.alpha {
    margin-left: 0 !important;
}

.omega {
    margin-right: 0 !important;
}

/* Tablet y móvil */
@media (max-width: 959px) {
    :root {
        --sk-container-pad: 20px;
        --sk-grid-gap-x: 20px;
        --sk-grid-gap-y: 20px;
    }
}

@media (max-width: 767px) {
    .container,
    .slider-text {
        grid-template-columns: 1fr;
        column-gap: 16px;
        row-gap: 20px;
    }

    .container > .column,
    .container > .columns,
    .container > :not(.column):not(.columns),
    .slider-text > .column,
    .slider-text > .columns,
    .slider-text > :not(.column):not(.columns) {
        grid-column: 1 / -1;
    }

    #about .one-half.column,
    #about .one-half.columns {
        grid-column: 1 / -1;
    }
}