/* ============================================
   RETÍCULA — 12 COLUMNAS
   Lizeth Enriquez Portafolio
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#pagina {
    max-width: 1280px;
    margin: 0 auto;
}

/* --- Columnas float clásico --- */
.col1, .col2, .col3, .col4, .col5, .col6,
.col7, .col8, .col9, .col10, .col11, .col12 {
    float: left;
    margin-right: 1%;
}

/* Cada col = (100% - 11 márgenes × 1%) / 12 ≈ 7.583% por unidad */
.col1  { width: 7.583%; }
.col2  { width: 16.166%; }
.col3  { width: 24.75%; }
.col4  { width: 33.333%; }
.col5  { width: 41.916%; }
.col6  { width: 50.5%; }
.col7  { width: 59.083%; }
.col8  { width: 67.666%; }
.col9  { width: 76.25%; }
.col10 { width: 84.833%; }
.col11 { width: 93.416%; }
.col12 { width: 100%; margin-right: 0; }

/* --- Fila con clearfix --- */
.fila {
    clear: both;
    width: 100%;
    height: auto;
    padding: 0;
}

.fila::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Imágenes base --- */
img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================
   MEDIA QUERIES
   ============================================ */

/* Tablet */
@media (max-width: 900px) {
    .col3, .col4 { width: 49%; margin-right: 1%; }
    .col5, .col6, .col7, .col8,
    .col9, .col10, .col11, .col12 {
        width: 100%; margin-right: 0;
    }
}

/* Móvil */
@media (max-width: 600px) {
    .col1, .col2, .col3, .col4, .col5, .col6,
    .col7, .col8, .col9, .col10, .col11, .col12 {
        width: 100%;
        float: none;
        display: block;
        margin: 0 0 16px 0;
    }
}