section.mosaico {
    border-top: solid 6px var(--separator);
    margin-top: 3rem;
}



.mosaic {
    display: flex;
    justify-content: start;
    /* centra las filas incompletas */
    align-items: flex-start;
    flex-flow: row wrap;
    /* necesario para que el aspect-ratio de .col mande sobre la altura */
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;

    max-width: 1280px;
    margin: auto;
    padding: 3rem 15px;
}

.col {
    /* ancho fijo = 1/5 del mosaico descontando los 4 huecos */
    flex: 0 0 calc((100% - 4 * 12px) / 5);
    aspect-ratio: 5 / 12;
    /* altura = 2.4 × ancho (cámbialo para más/menos altura) */
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.col img {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 0;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.col img.tall {
    flex: 2 1 0;
}

/* 2 anchas: opción B (opcional) */
.col.n-2.sin-altas {
    justify-content: center;
}

.col.n-2.sin-altas img {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 4 / 3;
}

/* ---------- Tablet: 2 columnas por fila (651px – 800px) ---------- */
@media (max-width: 800px) {
    .mosaic {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .col {
        flex: 0 0 calc((100% - 12px) / 2);
        aspect-ratio: 5 / 9;
    }
}

/* Última columna impar: ancho completo y en horizontal */
@media (min-width: 651px) and (max-width: 800px) {
    .col:last-child:nth-child(odd) {
        flex: 0 0 100%;
        flex-direction: row;
        justify-content: flex-start;
        aspect-ratio: 16 / 7;
    }

    .col:last-child:nth-child(odd) img {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: 100%;
        aspect-ratio: auto;
        /* anula la regla de 2 anchas */
    }
}

/* ---------- Móvil: 1 columna por fila (≤ 650px) ---------- */
@media (max-width: 650px) {
    .col {
        flex: 0 0 100%;
        max-width: 480px;
        /* evita columnas gigantes en pantallas anchas */
        aspect-ratio: 5 / 9;
    }
}