/* ============================================================
   USAM - NOTICIAS
   noticias.css

   Estructura visual:
   - Videos: 1 grande + 2 verticales
   - Noticias: 3 columnas
   - Eventos destacados: 1 completo + 2 mitades
   - Responsive / WCAG / reduced motion
   ============================================================ */


/* ============================================================
   01. VARIABLES
   ============================================================ */

.news-page {
    --news-navy: #071d49;
    --news-blue: #164f8d;
    --news-aqua: #6ecdd1;
    --news-red: #c2003d;
    --news-red-dark: #96002f;

    --news-white: #ffffff;
    --news-gray: #f5f7f9;
    --news-border: #dbe2e8;
    --news-text: #566474;

    --news-container: 1280px;

    width: 100%;

    overflow-x: clip;

    color: var(--news-navy);
    background: var(--news-white);

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


.news-page *,
.news-page *::before,
.news-page *::after {
    box-sizing: border-box;
}


.news-page img {
    display: block;

    max-width: 100%;
}


.news-page button,
.news-page input,
.news-page select {
    font: inherit;
}


.news-page [hidden] {
    display: none !important;
}


/* ============================================================
   02. ACCESIBILIDAD
   ============================================================ */

.news-page :focus-visible {
    outline: 3px solid #f9c74f;
    outline-offset: 3px;
}


.news-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ============================================================
   03. CONTENEDOR
   ============================================================ */

.news-container {
    width:
        min(
            calc(100% - 40px),
            var(--news-container)
        );

    margin-inline: auto;
}


/* ============================================================
   04. HERO
   ============================================================ */

.news-hero {
    position: relative;

    min-height: 520px;
    top: -53px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: var(--news-navy);
}


.news-hero__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.news-hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 22, 59, .78),
            rgba(4, 22, 59, .15)
        );
}


.news-hero__content {
    position: relative;

    z-index: 2;

    padding-bottom: 55px;

    color: var(--news-white);
}


.news-hero h1 {
    margin: 0;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    font-weight: 400;
    line-height: 1;
}


.news-hero p {
    margin: 10px 0 0;

    font-size:
        clamp(
            20px,
            2.3vw,
            33px
        );

    font-weight: 300;
    line-height: 1.05;
}


/* ============================================================
   05. ENCABEZADOS
   ============================================================ */

.news-section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 24px;
}


.news-section-heading h2,
.news-events-featured__heading h2 {
    margin: 0;

    color: var(--news-navy);

    font-size:
        clamp(
            28px,
            3vw,
            40px
        );

    font-weight: 800;
    line-height: 1.05;
}


.news-section-heading p,
.news-events-featured__heading p {
    margin: 5px 0 0;

    color: var(--news-blue);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}


/* ============================================================
   06. VIDEOS
   Referencia: 1 grande + 2 verticales
   ============================================================ */

.news-videos {
    padding: 0px;
}


.news-video-stage {
    position: relative;
}


.news-video-window {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(170px, .70fr)
        minmax(170px, .70fr);

    gap: 5px;

    height: 440px;
    min-height: 440px;
}


.news-video-card {
    position: relative;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    background: var(--news-navy);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.news-video-card:hover {
    z-index: 2;

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(7, 29, 73, .18);
}


.news-video-card__open {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--news-white);

    text-align: left;

    cursor: pointer;
}


.news-video-card__media {
    position: absolute;

    inset: 0;

    display: block;

    overflow: hidden;
}


.news-video-card__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .5s ease;
}


.news-video-card__media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(3, 19, 52, .96) 0%,
            rgba(3, 19, 52, .68) 22%,
            rgba(3, 19, 52, .05) 62%
        );
}


.news-video-card:hover
.news-video-card__media img {
    transform: scale(1.035);
}


/* PLAY */

.news-video-card__play {
    position: absolute;

    top: auto;
    right: auto;
    bottom: 37px;
    left: 24px;

    z-index: 5;

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border:
        2px solid
        var(--news-white);

    border-radius: 50%;

    background: transparent;
}


.news-video-card__play
.material-icons {
    font-size: 18px;
}


/* TEXTO */

.news-video-card__content {
    position: absolute;

    right: 22px;
    bottom: 72px;
    left: 22px;

    z-index: 4;

    padding: 0;
}


.news-video-card__category {
    display: block;

    margin-bottom: 5px;

    color: var(--news-aqua);

    font-size: 9px;
    font-weight: 700;
}


.news-video-card__title {
    display: block;

    max-width: 550px;

    font-size:
        clamp(
            20px,
            2.1vw,
            32px
        );

    font-weight: 700;
    line-height: 1.05;
}


/* TARJETAS VERTICALES */

.news-video-card:not(.is-primary)
.news-video-card__content {
    right: 14px;
    bottom: 67px;
    left: 14px;
}


.news-video-card:not(.is-primary)
.news-video-card__title {
    font-size:
        clamp(
            14px,
            1.25vw,
            18px
        );

    line-height: 1.08;
}


.news-video-card:not(.is-primary)
.news-video-card__play {
    bottom: 31px;
    left: 14px;

    width: 24px;
    height: 24px;
}


.news-video-card:not(.is-primary)
.news-video-card__play
.material-icons {
    font-size: 16px;
}


/* ============================================================
   07. SOCIAL
   ============================================================ */

.news-social-actions {
    display: flex;

    align-items: center;

    gap: 7px;
}


.news-view-count {
    display: inline-flex;

    align-items: center;

    gap: 3px;

    font-size: 11px;
    font-weight: 600;
}


.news-view-count
.material-icons {
    font-size: 15px;
}


.news-share-button {
    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    padding: 0;

    border:
        1px solid
        currentColor;

    border-radius: 50%;

    background: transparent;

    color: inherit;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.news-share-button:hover {
    border-color: var(--news-red);

    background: var(--news-red);

    color: var(--news-white);

    transform: translateY(-2px);
}


.news-share-button
.material-icons {
    font-size: 14px;
}


.news-video-card >
.news-social-actions {
    position: absolute;

    right: 13px;
    bottom: 13px;

    z-index: 10;

    color: var(--news-white);
}


/* ============================================================
   08. FLECHAS / DOTS
   ============================================================ */

.news-carousel-arrow {
    position: absolute;

    top: 50%;

    z-index: 20;

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--news-red);

    cursor: pointer;

    transform:
        translateY(-50%);
}


.news-carousel-arrow--prev {
    left: -43px;
}


.news-carousel-arrow--next {
    right: -43px;
}


.news-carousel-arrow
.material-icons {
    font-size: 38px;
}


.news-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 17px;
}


.news-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;
    border-radius: 100px;

    background: #c3ccd6;

    cursor: pointer;

    transition:
        width .2s ease,
        background .2s ease;
}


.news-dot.is-active {
    width: 24px;

    background: var(--news-red);
}


/* ============================================================
   09. FILTROS
   ============================================================ */

.news-filter-button {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    min-height: 28px;

    padding: 5px 13px;

    border: 0;
    border-radius: 18px;

    background: var(--news-red);

    color: var(--news-white);

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.news-filter-button:hover {
    background: var(--news-red-dark);

    transform: translateY(-1px);
}


.news-filter-button
.material-icons {
    font-size: 14px;
}


.news-filter-panel {
    margin-bottom: 24px;

    padding: 20px;

    border:
        1px solid
        var(--news-border);

    border-radius: 15px;

    background: #f8fafc;
}


.news-filter-form {
    display: grid;

    align-items: end;

    gap: 14px;
}


.news-filter-form--videos {
    grid-template-columns:
        1.3fr
        1fr
        1fr
        1fr
        auto;
}


.news-filter-form--news,
.news-filter-form--events {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        )
        auto;
}


.news-filter-field label {
    display: block;

    margin-bottom: 6px;

    color: var(--news-navy);

    font-size: 10px;
    font-weight: 700;
}


.news-filter-field input,
.news-filter-field select {
    width: 100%;
    height: 42px;

    margin: 0 !important;

    padding:
        0
        13px !important;

    border:
        1px solid
        #c8d3de !important;

    border-radius: 9px !important;

    background:
        var(--news-white) !important;

    color: var(--news-navy);

    box-shadow:
        none !important;
}


.news-filter-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}


.news-filter-apply,
.news-filter-clear {
    min-height: 38px;

    padding: 6px 15px;

    border-radius: 20px;

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}


.news-filter-apply {
    border:
        1px solid
        var(--news-red);

    background: var(--news-red);

    color: var(--news-white);
}


.news-filter-clear {
    border:
        1px solid
        var(--news-blue);

    background: var(--news-white);

    color: var(--news-blue);
}


.news-filter-clear--link {
    min-height: auto;

    padding: 5px 4px;

    border: 0;

    background: transparent;

    color: var(--news-navy);

    font-size: 9px;
}


/* ============================================================
   10. ESTADOS
   ============================================================ */

.news-status {
    min-height: 15px;

    margin:
        12px
        auto;

    color: var(--news-text);

    font-size: 10px;

    text-align: center;
}


/* ============================================================
   11. CATÁLOGO NOTICIAS
   ============================================================ */

.news-catalog {
    padding:
        45px
        0
        25px;
}


.news-catalog__header {
    margin-bottom: 25px;

    text-align: center;
}


.news-catalog__header h2 {
    margin: 0 auto!important;

    max-width: 760px;

    color: var(--news-navy);

    font-size:
        clamp(
            29px,
            3.2vw,
            42px
        );

    font-weight: 800;
    line-height: 1.04;
}


/* BUSCADOR */

.news-search {
    width:
        min(
            100%,
            1000px
        );

    margin-inline: auto;
}


.news-search__field {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        46px;

    overflow: hidden;

    border:
        1px solid
        var(--news-blue);

    border-radius: 25px;

    background: var(--news-white);
}


.news-search__field:focus-within {
    box-shadow:
        0 0 0 3px
        rgba(22, 79, 141, .08);
}


.news-search__field input {
    width: 100%;
    height: 44px !important;

    margin: 0 !important;

    padding:
        0
        20px !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: var(--news-navy);

    font-size: 10px;
}


.news-search__field button {
    border: 0;

    background: transparent;

    color: var(--news-blue);

    cursor: pointer;
}


.news-search__field
.material-icons {
    font-size: 20px;
}


.news-toolbar {
    width:
        min(
            100%,
            1000px
        );

    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin:
        7px
        auto
        20px;
}


/* ============================================================
   12. GRID NOTICIAS
   ============================================================ */

.news-grid,
.news-event-grid {
    display: grid;

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

    gap:
        27px
        12px;
}


/* ============================================================
   13. TARJETA NOTICIA
   Referencia: imagen + bloque azul superpuesto
   ============================================================ */

.news-card {
    min-width: 0;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.news-card:hover {
    transform:
        translateY(-4px);
}


.news-card__media {
    position: relative;

    display: block;

    height: 260px;

    overflow: hidden;

    background: var(--news-gray);
}


.news-card__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease;
}


.news-card:hover
.news-card__media img {
    transform:
        scale(1.035);
}


select {
    display: block!important;
}

input[type=date]:not(.browser-default), {
    width: 90%!important;
}

.news-card__body {
    position: relative;

    z-index: 2;

    min-height: 180px;

    margin:
        -92px
        14px
        0;

    padding:
        18px
        18px
        14px;

    border-radius:
        0
        0
        14px
        14px;

    background:
        rgba(
            5,
            35,
            83,
            .96
        );

    color: var(--news-white);

    box-shadow:
        0 8px 18px
        rgba(7, 29, 73, .08);
}


.news-card__category {
    display: inline-flex;

    align-items: center;

    min-height: 20px;

    padding:
        3px
        9px;

    border-radius: 12px;

    background: var(--news-aqua);

    color: var(--news-navy);

    font-size: 8px;
    font-weight: 700;
}


.news-card h3 {
    margin:
        8px
        0
        6px;
}


.news-card__title {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color: var(--news-white);

    font-size:
        clamp(
            15px,
            1.3vw,
            18px
        );

    font-weight: 800;

    line-height: 1.02;

    text-decoration: none;

    text-transform: uppercase;
}


.news-card__description {
    display: -webkit-box;

    min-height: 43px;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    margin:
        0
        0
        4px;

    color:
        rgba(
            255,
            255,
            255,
            .92
        );

    font-size: 9px;
    line-height: 1.35;
}


.news-card__date {
    display: block;

    margin:
        6px
        0
        8px;

    color: var(--news-aqua);

    font-size: 8px;
}


.news-card__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;
}

h3 {
    font-size: 13px!important;
    margin: 1.0rem 0 1.0rem 0!important;
}


.news-card__more,
.news-list-event__more,
.news-event-featured__more {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 25px;

    padding:
        4px
        13px;

    border-radius: 15px;

    background: var(--news-red);

    color: var(--news-white);

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;
}


.news-card__more:hover,
.news-list-event__more:hover,
.news-event-featured__more:hover {
    background: var(--news-red-dark);

    transform:
        translateY(-1px);
}


/* ============================================================
   14. PRÓXIMOS EVENTOS
   1 COMPLETO + 2 MITADES
   ============================================================ */

.news-events-featured {
    padding:
        0px
        0
        20px;
}


.news-events-featured__heading {
    margin-bottom: 17px;
}


.news-events-featured__grid {
    display: grid;

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

    gap: 7px;
}


/* TARJETA BASE */

.news-event-featured {
    position: relative;

    min-height: 330px;

    overflow: hidden;

    background: var(--news-navy);
}


/* EL PRIMERO ES EL LARGO */

.news-event-featured--main {
    grid-column:
        1 / -1;

    min-height: 455px;
}


.news-event-featured img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .55s ease;
}


.news-event-featured:hover img {
    transform:
        scale(1.025);
}


/*
 * Azul transparente encima de la fotografía.
 * Permite conservar legibilidad aunque cambien las imágenes.
 */

.news-event-featured__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 35, 83, .82) 0%,
            rgba(5, 35, 83, .52) 35%,
            rgba(5, 35, 83, .05) 72%
        );
}


/* EVENTOS PEQUEÑOS */

.news-event-featured:not(
    .news-event-featured--main
)
.news-event-featured__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5, 35, 83, .88) 0%,
            rgba(5, 35, 83, .60) 43%,
            rgba(5, 35, 83, .10) 78%
        );
}


.news-event-featured__content {
    position: absolute;

    top: 50%;
    left:
        clamp(
            25px,
            5vw,
            70px
        );

    z-index: 2;

    max-width: 46%;

    color: var(--news-white);

    transform:
        translateY(-50%);
}


.news-event-featured:not(
    .news-event-featured--main
)
.news-event-featured__content {
    left:
        clamp(
            22px,
            3vw,
            45px
        );

    max-width: 58%;
}


.news-event-featured__category {
    display: block;

    margin-bottom: 6px;

    color: var(--news-aqua);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
}


.news-event-featured h3 {
    margin:
        0
        0
        15px;

    font-size:
        clamp(
            24px,
            3vw,
            43px
        );

    font-weight: 700;
    line-height: 1.02;
}


.news-event-featured:not(
    .news-event-featured--main
)
h3 {
    font-size:
        clamp(
            21px,
            2.2vw,
            31px
        );
}


/* ============================================================
   15. CATÁLOGO DE EVENTOS
   ============================================================ */

.news-events-list {
    padding:
        20px
        0
        10px;
}


.news-list-event {
    overflow: hidden;

    border:
        1px solid
        var(--news-border);

    border-radius: 16px;

    background: var(--news-white);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.news-list-event:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0
        14px
        30px
        rgba(7, 29, 73, .09);
}


.news-list-event__media {
    display: block;

    height: 220px;

    overflow: hidden;

    background: var(--news-gray);
}


.news-list-event__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.news-list-event:hover
.news-list-event__media img {
    transform:
        scale(1.035);
}


.news-list-event__body {
    padding:
        21px
        19px
        18px;
}


.news-list-event__category {
    color: var(--news-red);

    font-size: 9px;
    font-weight: 700;
}


.news-list-event__title {
    min-height: 42px;

    margin:
        8px
        0
        16px;

    color: var(--news-navy);

    font-size: 17px;
    font-weight: 600;

    line-height: 1.18;
}


.news-list-event__date {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 18px;

    color: var(--news-navy);

    font-size: 13px;
}


.news-list-event__date
.material-icons {
    color: var(--news-red);

    font-size: 16px;
}


.news-list-event__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


/* ============================================================
   16. PAGINACIÓN
   ============================================================ */

.news-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 3px;

    margin-top: 38px;
}


.news-pagination button {
    min-width: 29px;
    min-height: 29px;

    padding: 4px 8px;

    border: 0;
    border-radius: 16px;

    background: transparent;

    color: var(--news-navy);

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

h2 {
    margin: 0!important;
}

.news-pagination button.is-active {
    background: var(--news-red);

    color: var(--news-white);
}


/* ============================================================
   17. MODAL VIDEO
   ============================================================ */

.news-video-modal {
    width: 100%;
    max-width: none;

    height: 100%;
    max-height: none;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
}


.news-video-modal::backdrop {
    background:
        rgba(
            2,
            12,
            35,
            .90
        );
}


.news-video-modal[open] {
    display: grid;

    place-items: center;
}


.news-video-modal__dialog {
    position: relative;

    width:
        min(
            calc(100vw - 32px),
            410px
        );

    max-height:
        calc(
            100dvh - 32px
        );

    overflow: auto;

    border-radius: 20px;

    background: var(--news-navy);
}


.news-video-modal__close {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 20;

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: var(--news-aqua);

    color: var(--news-white);

    cursor: pointer;
}


.news-video-modal__player {
    position: relative;

    width: 100%;

    aspect-ratio:
        9 / 16;

    background: #000000;
}


.news-video-modal__player iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


.news-video-modal__info {
    padding:
        17px
        21px
        21px;

    color: var(--news-white);
}


.news-video-modal__category {
    color: var(--news-aqua);

    font-size: 9px;
    font-weight: 700;
}


.news-video-modal__info h2 {
    margin:
        5px
        0
        7px;

    font-size: 19px;
}


/* ============================================================
   18. REVEAL
   ============================================================ */

.news-page.is-enhanced
.news-reveal {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}


.news-page.is-enhanced
.news-reveal.is-visible {
    opacity: 1;

    transform: none;
}


/* ============================================================
   19. TABLET GRANDE
   ============================================================ */

@media (max-width: 1100px) {

    .news-video-window {
        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(150px, .7fr)
            minmax(150px, .7fr);

        height: 400px;
        min-height: 400px;
    }


    .news-grid,
    .news-event-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .news-filter-form--videos,
    .news-filter-form--news,
    .news-filter-form--events {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .news-filter-actions {
        justify-content: flex-start;
    }

}


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

@media (max-width: 800px) {

    .news-video-window {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(125px, .75fr)
            minmax(125px, .75fr);

        height: 360px;
        min-height: 360px;
    }


    .news-video-card__title {
        font-size: 20px;
    }


    .news-event-featured--main {
        min-height: 400px;
    }


    .news-event-featured {
        min-height: 300px;
    }


    .news-event-featured__content {
        max-width: 62%;
    }

}


/* ============================================================
   21. MÓVIL
   ============================================================ */

@media (max-width: 600px) {

    .news-container {
        width:
            calc(
                100% - 28px
            );
    }


    .news-hero {
        min-height: 330px;
    }


    .news-hero__content {
        padding-bottom: 35px;
    }


    .news-section-heading {
        align-items: center;
    }


    /*
     * En móvil solo se muestra la tarjeta primaria.
     * Las flechas siguen cambiando cuál es primaria.
     */

    .news-video-stage {
        width:
            calc(
                100% - 36px
            );

        margin-inline: auto;
    }


    .news-video-window {
        display: block;

        height: auto;
        min-height: 500px;
    }


    .news-video-card {
        min-height: 500px;
    }


    .news-video-card:not(
        .is-primary
    ) {
        display: none;
    }


    .news-carousel-arrow--prev {
        left: -34px;
    }


    .news-carousel-arrow--next {
        right: -34px;
    }


    .news-filter-form--videos,
    .news-filter-form--news,
    .news-filter-form--events {
        grid-template-columns:
            1fr;
    }


    .news-grid,
    .news-event-grid {
        grid-template-columns:
            1fr;
    }


    .news-catalog__header h2 br {
        display: none;
    }


    .news-card__media {
        height: 285px;
    }


    .news-card__body {
        margin:
            -88px
            12px
            0;
    }


    /*
     * Los eventos destacados dejan de ser 2 columnas.
     */

    .news-events-featured__grid {
        grid-template-columns:
            1fr;

        gap: 7px;
    }


    .news-event-featured--main {
        grid-column: auto;
    }


    .news-event-featured,
    .news-event-featured--main {
        min-height: 340px;
    }


    .news-event-featured__content,
    .news-event-featured:not(
        .news-event-featured--main
    )
    .news-event-featured__content {
        right: 24px;
        left: 24px;

        max-width: none;
    }


    .news-event-featured h3,
    .news-event-featured:not(
        .news-event-featured--main
    )
    h3 {
        font-size:
            clamp(
                23px,
                8vw,
                32px
            );
    }


    .news-toolbar {
        align-items: center;
    }

}


/* ============================================================
   22. MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 400px) {

    .news-video-window,
    .news-video-card {
        min-height: 470px;
    }


    .news-card__media {
        height: 250px;
    }


    .news-card__body {
        margin:
            -72px
            8px
            0;

        padding:
            17px
            15px
            14px;
    }


    .news-events-featured__heading h2 {
        font-size: 27px;
    }

}


/* ============================================================
   23. FULL HD / ULTRAWIDE
   ============================================================ */

@media (min-width: 1921px) {

    .news-page {
        --news-container:
            1440px;
    }


    .news-hero {
        min-height:
            600px;
    }


    .news-video-window {
        height:
            500px;

        min-height:
            500px;
    }


    .news-card__media {
        height:
            285px;
    }


    .news-event-featured--main {
        min-height:
            500px;
    }


    .news-event-featured {
        min-height:
            360px;
    }

}


/* ============================================================
   24. REDUCED MOTION
   ============================================================ */

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

    .news-page *,
    .news-page *::before,
    .news-page *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }


    .news-page.is-enhanced
    .news-reveal {
        opacity: 1;

        transform: none;
    }

}