/* =============================================
   EXTENSIÓN PARA PANTALLAS GRANDES
   Bootstrap 3 limita .container a 1170px.
   Estos breakpoints expanden el contenido
   en monitores más grandes (1400px+).
   ============================================= */

/* ≥1400px — Monitores estándar grandes (1440p) */
@media (min-width: 1400px) {
    .container {
        width: 1340px;
        max-width: 1340px;
    }

    .pub-grid {
        gap: 28px;
    }

    .autor-grid {
        gap: 28px;
    }

    .secc-photo-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .secc-hero-img {
        width: 420px;
    }
}

/* ≥1600px — Monitores amplios (1600p, 1680p) */
@media (min-width: 1600px) {
    .container {
        width: 1500px;
        max-width: 1500px;
    }

    .pub-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .secc-photo-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .autor-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ≥1920px — Full HD y superiores */
@media (min-width: 1920px) {
    .container {
        width: 1760px;
        max-width: 1760px;
    }

    .afil-cards {
        max-width: 1200px;
    }

    .afil-tabs {
        max-width: 950px;
    }

    .contacto-grid {
        gap: 48px;
    }

    .secc-hero {
        padding: 40px 48px 48px;
    }

    .secc-hero-img {
        width: 480px;
    }

    .autor-hero {
        min-height: 480px;
    }

    .autor-hero-foto {
        width: 360px;
        min-width: 360px;
    }

    .autor-hero-foto img {
        height: 460px;
    }

    .autor-hero-nombre {
        font-size: 36px;
    }
}

/* ≥2560px — Monitores 2K/QHD */
@media (min-width: 2560px) {
    .container {
        width: 2200px;
        max-width: 2200px;
    }

    .pub-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 32px;
    }

    .secc-photo-grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .autor-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}