/* ==========================================================================
   GRID SYSTEM
   ========================================================================== */

.main-wrapper {
    margin-top: calc(var(--nav-height) + 40px);
    padding: 0 20px 35px;
}

/* Contenedor grid */
.mdl-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 25px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Columnas */

.mdl-cell--1-col { grid-column: span 1; }
.mdl-cell--2-col { grid-column: span 2; }
.mdl-cell--3-col { grid-column: span 3; }
.mdl-cell--4-col { grid-column: span 4; }
.mdl-cell--5-col { grid-column: span 5; }
.mdl-cell--6-col { grid-column: span 6; }
.mdl-cell--7-col { grid-column: span 7; }
.mdl-cell--8-col { grid-column: span 8; }
.mdl-cell--9-col { grid-column: span 9; }
.mdl-cell--10-col { grid-column: span 10; }
.mdl-cell--11-col { grid-column: span 11; }
.mdl-cell--12-col { grid-column: span 12; }

/* tarjetas */

.contenido-seccion {
    background-color: var(--bg-card);
    backdrop-filter: var(--glass-blur); /* Aplica el desenfoque */
    -webkit-backdrop-filter: var(--glass-blur); /* Soporte para Safari */
    
    border-bottom: 1px solid var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px ;
    margin-top: 5px;
    box-shadow: var(--shadow);
}

/* responsive */

@media (max-width: 850px){

    .mdl-cell--1-col,
    .mdl-cell--2-col,
    .mdl-cell--3-col,
    .mdl-cell--4-col,
    .mdl-cell--5-col,
    .mdl-cell--6-col,
    .mdl-cell--7-col,
    .mdl-cell--8-col,
    .mdl-cell--9-col,
    .mdl-cell--10-col,
    .mdl-cell--11-col {
        grid-column: span 12;
    }

}