/* =========================================================
   CARRUSEL DE NOTICIAS
   ========================================================= */

.news-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}


/* =========================================================
   CONTENEDOR DEL CARRUSEL
   ========================================================= */

.news-track-wrapper {
    width: 100%;
    overflow: hidden;
}


.news-track {
    display: flex;
    gap: 24px;
    width: 100%;
    transition: transform 0.45s ease;
    will-change: transform;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.news-card {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
}


/* =========================================================
   FLECHAS
   ========================================================= */

.news-arrow {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(4, 18, 34, 0.15);
    border-radius: 50%;

    background: #ffffff;
    color: var(--navy);

    font-size: 1.15rem;
    font-weight: 700;

    cursor: pointer;

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


.news-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--navy);

    transform: translateY(-2px);
}


.news-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}


/* =========================================================
   INDICADORES
   ========================================================= */

.news-dots {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top: 28px;
}


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

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #c7d0d9;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease;
}


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

    border-radius: 20px;

    background: var(--accent);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .news-card {
        flex: 0 0 calc((100% - 24px) / 2);
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .news-carousel {
        gap: 10px;
    }


    .news-card {
        flex: 0 0 100%;
    }


    .news-arrow {
        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        font-size: 1rem;
    }

}


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

@media (max-width: 480px) {

    .news-carousel {
        gap: 8px;
    }


    .news-arrow {
        flex: 0 0 34px;

        width: 34px;
        height: 34px;
    }

}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

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

    .news-track,
    .news-arrow,
    .news-dot {
        transition: none;
    }

}