/* ============================================================
   USAM
   COMPONENTE DE NOTICIAS
   Diseño Editorial 01

   ============================================================ */


/* ============================================================
   01. CONTENEDOR
   ============================================================ */

.noticia-editorial {
    --editorial-navy: #071d49;
    --editorial-blue: #164f8d;
    --editorial-aqua: #6ecdd1;
    --editorial-text: #263238;
    --editorial-muted: #5f6873;
    --editorial-line: #dfe5ea;

    width: 100%;
    margin: 0;
    padding: 0;

    color: var(--editorial-text);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 1rem;
    line-height: 1.8;

    overflow-wrap: break-word;
}


/* ============================================================
   02. BLOQUES GENERALES
   ============================================================ */

.noticia-editorial .publication-copy {
    width: 100%;
    margin: 0;
}

.noticia-editorial .publication-copy:last-child {
    margin-bottom: 0;
}


/* ============================================================
   03. ENCABEZADOS
   ============================================================ */

.noticia-editorial .publication-copy h2,
.noticia-editorial .publication-copy h3,
.noticia-editorial .publication-copy h4 {
    margin-top: 0;

    color: var(--editorial-navy);

    font-weight: 700;
    line-height: 1.25;

    text-wrap: balance;
}

.noticia-editorial .publication-copy h2 {
    max-width: 900px;
    margin-bottom: 1.35rem;

    font-size: clamp(
        1.7rem,
        2.6vw,
        2.45rem
    );
}

.noticia-editorial .publication-copy h3 {
    margin-bottom: 1.15rem;

    font-size: clamp(
        1.4rem,
        2vw,
        1.9rem
    );
}

.noticia-editorial .publication-copy h4 {
    margin-bottom: 1rem;

    font-size: clamp(
        1.15rem,
        1.5vw,
        1.4rem
    );
}


/* ============================================================
   04. PÁRRAFOS
   ============================================================ */

.noticia-editorial .publication-copy p {
    margin: 0 0 1.4rem;

    color: var(--editorial-text);

    font-size: clamp(
        1rem,
        .25vw + .95rem,
        1.08rem
    );

    line-height: 1.85;
}

.noticia-editorial .publication-copy p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   05. ÉNFASIS
   ============================================================ */

.noticia-editorial strong,
.noticia-editorial b {
    color: var(--editorial-navy);
    font-weight: 700;
}

.noticia-editorial em,
.noticia-editorial i {
    font-style: italic;
}


/* ============================================================
   06. ENLACES
   ============================================================ */

.noticia-editorial a {
    color: var(--editorial-blue);

    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;

    transition:
        color .2s ease,
        text-decoration-color .2s ease;
}

.noticia-editorial a:hover {
    color: var(--editorial-navy);
}

.noticia-editorial a:focus-visible {
    outline: 3px solid var(--editorial-aqua);
    outline-offset: 4px;

    border-radius: 2px;
}


/* ============================================================
   07. LISTAS
   ============================================================ */

.noticia-editorial ul,
.noticia-editorial ol {
    margin:
        1.4rem
        0
        2rem;

    padding-left: 1.6rem;
}

.noticia-editorial li {
    margin-bottom: .65rem;
    padding-left: .25rem;

    line-height: 1.75;
}

.noticia-editorial li:last-child {
    margin-bottom: 0;
}

.noticia-editorial li::marker {
    color: var(--editorial-blue);
    font-weight: 700;
}


/* ============================================================
   08. IMAGEN + TEXTO
   ============================================================ */

.noticia-editorial .publication-media-text {
    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, .98fr);

    gap: clamp(
        2rem,
        4.5vw,
        4.75rem
    );

    align-items: center;

    width: 100%;

margin: 0.5rem 0 clamp(3.5rem, 6vw, 3.5rem);
}


/* ============================================================
   09. FIGURE DEL BLOQUE IMAGEN + TEXTO
   ============================================================ */

.noticia-editorial .publication-media-text > figure {
    position: relative;

    width: 100%;
    margin: 0;

    overflow: hidden;

    border-radius: 2px;
}


/* ============================================================
   10. IMAGEN PRINCIPAL
   ============================================================ */

.noticia-editorial .publication-media-text > figure img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transform: scale(1);

    transition:
        transform .65s cubic-bezier(
            .2,
            .7,
            .2,
            1
        );
}

.noticia-editorial .publication-media-text > figure:hover img {
    transform: scale(1.025);
}


/* ============================================================
   11. TEXTO DEL BLOQUE IMAGEN + TEXTO
   ============================================================ */

.noticia-editorial
.publication-media-text
> .publication-copy {
    margin: 0;
}

.noticia-editorial
.publication-media-text
> .publication-copy
p {
    font-size: 1rem;
    line-height: 1.8;
}


/* ============================================================
   12. VARIANTE INVERSA

   Puede utilizarse posteriormente como:

   <section class="
       publication-media-text
       publication-media-text--reverse
   ">
   ============================================================ */

.noticia-editorial
.publication-media-text--reverse
> figure {
    order: 2;
}

.noticia-editorial
.publication-media-text--reverse
> .publication-copy {
    order: 1;
}


/* ============================================================
   13. GALERÍA
   ============================================================ */

.noticia-editorial .publication-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: clamp(
        .8rem,
        1.5vw,
        1.5rem
    );

    width: 100%;

    margin: clamp(2rem, 5vw, 2.5rem) 0;
}


/* ============================================================
   14. VARIANTE DE 3 COLUMNAS
   ============================================================ */

.noticia-editorial .publication-gallery--3 {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}


/* ============================================================
   15. FIGURAS DE GALERÍA
   ============================================================ */

.noticia-editorial .publication-gallery figure {
    position: relative;

    width: 100%;
    margin: 0;

    overflow: hidden;

    border-radius: 2px;

    background: #f2f4f6;
}


/* ============================================================
   16. IMÁGENES DE GALERÍA
   ============================================================ */

.noticia-editorial .publication-gallery img {
    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transform: scale(1);

    transition:
        transform .6s cubic-bezier(
            .2,
            .7,
            .2,
            1
        ),
        filter .35s ease;
}

.noticia-editorial
.publication-gallery
figure:hover
img {
    transform: scale(1.035);
}


/* ============================================================
   17. FIGCAPTION
   ============================================================ */

.noticia-editorial figcaption {
    padding:
        .8rem
        .25rem
        0;

    color: var(--editorial-muted);

    font-size: .85rem;
    line-height: 1.55;
}


/* ============================================================
   18. BLOCKQUOTE
   ============================================================ */

.noticia-editorial blockquote {
    position: relative;

    margin:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        )
        0;

    padding:
        1.8rem
        2rem
        1.8rem
        2.5rem;

    border-left:
        5px solid
        var(--editorial-aqua);

    background:
        rgba(
            110,
            205,
            209,
            .08
        );

    color: var(--editorial-navy);

    font-size: clamp(
        1.1rem,
        1.5vw,
        1.35rem
    );

    font-weight: 500;
    line-height: 1.7;
}

.noticia-editorial blockquote p {
    margin: 0;
}


/* ============================================================
   19. IMÁGENES GENERALES

   Protección para imágenes editoriales que no pertenezcan
   específicamente a la galería.
   ============================================================ */

.noticia-editorial img {
    max-width: 100%;
}


/* ============================================================
   20. TABLET GRANDE
   ============================================================ */

@media (
    max-width: 1100px
) {

    .noticia-editorial
    .publication-media-text {
        gap: 2.5rem;
    }

}


/* ============================================================
   21. TABLET
   ============================================================ */

@media (
    max-width: 900px
) {

    .noticia-editorial
    .publication-media-text {
        grid-template-columns:
            1fr;

        gap: 1.8rem;

        align-items: start;
    }


    /* ========================================================
       La variante reverse vuelve al flujo natural en tablet.
       ======================================================== */

    .noticia-editorial
    .publication-media-text--reverse
    > figure,
    .noticia-editorial
    .publication-media-text--reverse
    > .publication-copy {
        order: initial;
    }


    .noticia-editorial
    .publication-media-text
    > figure
    img {
        aspect-ratio:
            16 / 10;
    }


    /* ========================================================
       GALERÍA
       ======================================================== */

    .noticia-editorial
    .publication-gallery,
    .noticia-editorial
    .publication-gallery--3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    /*
     * Si tenemos 3 imágenes, la última ocupa el ancho completo.
     */

    .noticia-editorial
    .publication-gallery--3
    figure:last-child:nth-child(odd) {
        grid-column:
            1 / -1;
    }

    .noticia-editorial
    .publication-gallery--3
    figure:last-child:nth-child(odd)
    img {
        aspect-ratio:
            16 / 8;
    }

}


/* ============================================================
   22. MÓVIL
   ============================================================ */

@media (
    max-width: 600px
) {

    .noticia-editorial {
        font-size: .97rem;
        line-height: 1.75;
    }


    /* ========================================================
       ESPACIADO
       ======================================================== */

    .noticia-editorial
    .publication-copy {
        margin-bottom:
            2.6rem;
    }


    /* ========================================================
       TÍTULOS
       ======================================================== */

    .noticia-editorial
    .publication-copy
    h2 {
        margin-bottom:
            1rem;
    }

    .noticia-editorial
    .publication-copy
    h3 {
        margin-bottom:
            .9rem;
    }


    /* ========================================================
       PÁRRAFOS
       ======================================================== */

    .noticia-editorial
    .publication-copy
    p {
        margin-bottom:
            1.15rem;

        font-size:
            1rem;

        line-height:
            1.75;
    }


    /* ========================================================
       IMAGEN + TEXTO
       ======================================================== */

    .noticia-editorial
    .publication-media-text {
        gap:
            1.5rem;

        margin:
            1rem
            0
            3rem;
    }

    .noticia-editorial
    .publication-media-text
    > figure
    img {
        aspect-ratio:
            4 / 3;
    }


    /* ========================================================
       GALERÍA
       ======================================================== */

    .noticia-editorial
    .publication-gallery,
    .noticia-editorial
    .publication-gallery--3 {
        grid-template-columns:
            1fr;

        gap:
            1rem;

        margin:
            2.75rem
            0;
    }

    .noticia-editorial
    .publication-gallery--3
    figure:last-child:nth-child(odd) {
        grid-column:
            auto;
    }

    .noticia-editorial
    .publication-gallery
    img,
    .noticia-editorial
    .publication-gallery--3
    figure:last-child:nth-child(odd)
    img {
        aspect-ratio:
            4 / 3;
    }


    /* ========================================================
       CITA
       ======================================================== */

    .noticia-editorial
    blockquote {
        margin:
            2.5rem
            0;

        padding:
            1.4rem
            1.25rem
            1.4rem
            1.5rem;

        font-size:
            1.05rem;
    }

}


/* ============================================================
   23. FULL / PANTALLAS > 1920px
   ============================================================ */

@media (
    min-width: 1921px
) {

    .noticia-editorial {
        font-size:
            1.05rem;
    }

    .noticia-editorial
    .publication-media-text {
        gap:
            5rem;
    }

}


/* ============================================================
   24. REDUCED MOTION
   WCAG 2.2
   ============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    .noticia-editorial *,
    .noticia-editorial *::before,
    .noticia-editorial *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

    .noticia-editorial
    .publication-media-text
    > figure:hover
    img,

    .noticia-editorial
    .publication-gallery
    figure:hover
    img {
        transform:
            none;
    }

}