/* Retícula 12 columnas - Corregida */
* {
    margin: 0; 
    padding: 0;
    box-sizing: border-box; /* Crucial para que los paddings no sumen tamaño extra */
}

#pagina {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

/* Fila corregida: Limpia los floats pero permite que crezca según el alto de la foto/texto */
.fila {
    clear: both; 
    border: none; 
    height: auto; /* Cambiado de 30px a auto */
}

/* Truco moderno para limpiar filas sin alterar alturas */
.fila::after {
    content: "";
    display: table;
    clear: both;
}

/* Columnas con anchos ajustados considerando el margen del 1% */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
    float: left;  
    margin-right: 1%; /* Margen derecho */
}

/* Se resta el 1% del margen al ancho de cada una para que sumen 100% perfecto */
.col1  { width: 7.33%; }
.col2  { width: 15.66%; }
.col3  { width: 24.00%; }
.col4  { width: 32.33%; }
.col5  { width: 40.66%; }
.col6  { width: 49.00%; } /* 49% + 1% de margen = 50% (Dos col6 darán 100% exacto) */
.col7  { width: 57.33%; }
.col8  { width: 65.66%; }
.col9  { width: 74.00%; }
.col10 { width: 82.33%; }
.col11 { width: 90.66%; }
.col12 { width: 100%; float: left; } /* La col12 no lleva margen derecho */

/* Imágenes */
.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, 
.col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
    display: block; 
    width: 100%;
    height: auto;
}

/* Responsive para pantallas móviles */
@media all and (max-width: 800px) {
    .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
        display: block; 
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 20px; /* Espacio abajo en celular para que no se peguen */
    }
}

/* Contenido */
.contenidos {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 20px;
    box-sizing: border-box;
}