@charset "UTF-8";

/* =========================
   ANNOUNCEMENT BAR
========================= */

.announcement-bar {

    width: 100%;

    background:
        linear-gradient(
            90deg,
            #0f2a5c,
            #1e5cc8,
            #2d73ff
        );

    color: #fff;

    overflow: hidden;

    white-space: nowrap;

    padding: 11px 0;

    position: relative;

    font-family:
        'Segoe UI',
        sans-serif;

    touch-action: pan-y;
}

/* =========================
   TRACK
========================= */

.announcement-track {

    display: flex;

    align-items: center;

    width: max-content;

    will-change: transform;

    animation:
        scrollLoop 28s linear infinite;
}

/* =========================
   GROUP
========================= */

.announcement-group {

    display: flex;

    align-items: center;

    gap: 60px;
}

/* =========================
   ITEM
========================= */

.announcement-item {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    font-weight: 500;

    opacity: .96;

    white-space: nowrap;

    letter-spacing: .2px;
}

/* =========================
   ICONOS
========================= */

.announcement-item i {

    background:
        rgba(255,255,255,.16);

    width: 28px;
    height: 28px;

    border-radius: 50%;

    font-size: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;
}

/* =========================
   SEPARADOR
========================= */

.announcement-item::after {

    content: "•";

    margin-left: 20px;

    opacity: .45;

    font-size: 14px;
}

/* SOLO EL ULTIMO */

.announcement-group
.announcement-item:last-child::after {

    content: "";
}

/* =========================
   ANIMACION
========================= */

@keyframes scrollLoop {

    0%{
        transform: translateX(0);
    }

    100%{
        transform: translateX(-50%);
    }
}

/* =========================
   HOVER PAUSA
========================= */

.announcement-bar:hover
.announcement-track {

    animation-play-state: paused;
}

/* =========================
   LINEA INFERIOR
========================= */

.announcement-bar::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;

    height: 2px;

    background:
        rgba(255,255,255,.18);
}

/* =====================================================
   MONITORES GRANDES
   24" / 27"
===================================================== */

@media (min-width:1600px){

    .announcement-bar{

        padding:14px 0;
    }

    .announcement-track{

        animation-duration:36s;
    }

    .announcement-group{
        gap:90px;
    }

    .announcement-item{

        font-size:17px;
    }

    .announcement-item i{

        width:34px;
        height:34px;

        font-size:15px;
    }

    .announcement-item::after{

        margin-left:30px;

        font-size:16px;
    }
}

/* =====================================================
   LAPTOPS 19" / 15"
===================================================== */

@media (max-width:1400px){

    .announcement-group{
        gap:52px;
    }
}

/* =====================================================
   LAPTOPS 14"
===================================================== */

@media (max-width:1200px){

    .announcement-track{

        animation-duration:24s;
    }

    .announcement-group{
        gap:44px;
    }

    .announcement-item{

        font-size:13px;
    }
}

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

@media (max-width:992px){

    .announcement-bar{

        padding:10px 0;
    }

    .announcement-track{

        animation-duration:22s;
    }

    .announcement-group{
        gap:36px;
    }

    .announcement-item{

        font-size:13px;

        gap:8px;
    }

    .announcement-item i{

        width:24px;
        height:24px;

        font-size:11px;
    }

    .announcement-item::after{

        margin-left:16px;
    }
}

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

@media (max-width:768px){

    .announcement-track{

        animation-duration:20s;
    }

    .announcement-group{
        gap:30px;
    }

    .announcement-item{

        font-size:12px;
    }

    .announcement-item i{

        width:22px;
        height:22px;

        font-size:10px;
    }

    .announcement-item::after{

        margin-left:12px;

        font-size:12px;
    }
}

/* =====================================================
   TELEFONOS GRANDES
===================================================== */

@media (max-width:580px){

    .announcement-bar{

        padding:9px 0;
    }

    .announcement-track{

        animation-duration:17s;
    }

    .announcement-group{
        gap:24px;
    }

    .announcement-item{

        font-size:11px;

        gap:7px;
    }

    .announcement-item i{

        width:20px;
        height:20px;

        font-size:9px;
    }

    .announcement-item::after{

        margin-left:10px;

        font-size:11px;
    }
}

/* =====================================================
   TELEFONOS PEQUEÑOS
===================================================== */

@media (max-width:420px){

    .announcement-track{

        animation-duration:15s;
    }

    .announcement-group{
        gap:20px;
    }

    .announcement-item{

        font-size:10px;
    }

    .announcement-item i{

        width:18px;
        height:18px;

        font-size:8px;
    }

    .announcement-item::after{

        margin-left:8px;

        font-size:10px;
    }
}