/* =========================
   LEADERBOARD
========================= */

.leaderboard{
    width:100%;

    padding:clamp(10px, 1.5vw, 10px);

    background:#ffffff;
}

/* =========================
   CONTENEDOR
========================= */

.anuncios{
    display:flex;

    gap:0;

    overflow:hidden;

    border-radius:18px;
}

/* =========================
   TARJETA
========================= */

.anuncio{
    position:relative;

    flex:1;

    height:70px;

    overflow:hidden;

    background:#fff;

    margin-top:-15px;
}

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

.anuncio:not(:last-child){
    border-right:1px solid #e5e7eb;
}

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

.track{
    display:flex;
    flex-direction:column;

    transition:transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.item{
    display:flex;
    align-items:center;

    gap:12px;

    min-height:90px;

    padding:14px;
}

/* =========================
   ICONO
========================= */

.item img{
    width:clamp(40px, 4vw, 45px);
}

/* =========================
   TEXTO
========================= */

.item span{
    flex:1;

    font-size:clamp(12px, 1.4vw, 10px);

    color:#374151;
}

/* TITULO */

.item strong{
    display:block;

    font-weight:900;

    color:#111827;
}

/* =========================
   SKELETON
========================= */

.skeleton{
    display:flex;

    overflow:hidden;

    border:1px solid #e5e7eb;
    border-radius:18px;
}

/* ITEMS */

.skeleton div{
    flex:1;

    height:70px;

    margin-top:-15px;

    background:linear-gradient(
        100deg,
        #f3f4f6 20%,
        #e5e7eb 40%,
        #f3f4f6 60%
    );

    background-size:200% 100%;

    animation:shimmer 1.2s infinite;
}

/* SEPARADOR */

.skeleton div:not(:last-child){
    border-right:1px solid #e5e7eb;
}

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

@keyframes shimmer{

    0%{
        background-position:200% 0;
    }

    100%{
        background-position:-200% 0;
    }

}

/* =========================
   RESPONSIVE 1024PX
========================= */

@media (max-width:1024px){

    .anuncio:nth-child(4){
        display:none;
    }

}

/* =========================
   RESPONSIVE 768PX
========================= */

@media (max-width:768px){

    .anuncio:nth-child(3){
        display:none;
    }

}

/* =========================
   RESPONSIVE 500PX
========================= */

@media (max-width:500px){

    .anuncio:nth-child(2){
        display:none;
    }

}