/* Start custom CSS for html, class: .elementor-element-9037088 *//* ==========================
   AUSPICIADORES
========================== */

.sponsors-section{
    position:relative;
    padding:120px 20px;
    text-align:center;
    overflow:hidden;
}

/* Oscurece ligeramente el fondo */
.sponsors-section::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.20),
        rgba(0,0,0,.20)
    );

    z-index:0;
}

.sponsors-section > *{
    position:relative;
    z-index:1;
}

/* ==========================
   ENCABEZADO
========================== */

.section-header{
    max-width:900px;
    margin:auto;
    margin-bottom:80px;
}

.badge{
    display:inline-block;

    padding:12px 28px;

    border-radius:50px;

    background:rgba(255,179,0,.15);

    border:1px solid rgba(255,179,0,.4);

    backdrop-filter:blur(15px);

    color:#ffb300;

    font-weight:700;

    margin-bottom:25px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.12);
}

.section-header h2{
    font-size:clamp(3rem,7vw,6rem);

    font-weight:800;

    color:#fff;

    margin-bottom:25px;

    text-transform:uppercase;

    text-shadow:
    0 5px 25px rgba(0,0,0,.35);
}

.section-header p{
    max-width:700px;

    margin:auto;

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

    font-size:1.1rem;

    line-height:1.8;

    text-shadow:
    0 2px 10px rgba(0,0,0,.2);
}

/* ==========================
   SLIDER
========================== */

.sponsors-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

.sponsors-track{
    display:flex;
    align-items:center;
    gap:50px;

    width:max-content;

    animation:scrollSponsors 30s linear infinite;
}

.reverse{
    margin-top:40px;
}

.reverse-track{
    animation:scrollSponsorsReverse 30s linear infinite;
}

/* ==========================
   LOGOS
========================== */

.sponsors-track img{
    width:220px;
    height:120px;

    object-fit:contain;

    padding:25px;

    border-radius:24px;

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

    backdrop-filter:blur(15px);

    border:
    1px solid rgba(255,255,255,.6);

    box-shadow:
    0 12px 30px rgba(0,0,0,.15);

    transition:.4s ease;
}

.sponsors-track img:hover{
    transform:
    translateY(-10px)
    scale(1.04);

    box-shadow:
    0 18px 40px rgba(0,0,0,.25),
    0 0 30px rgba(255,179,0,.35);
}



/* ==========================
   ANIMACIONES
========================== */

@keyframes scrollSponsors{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@keyframes scrollSponsorsReverse{
    from{
        transform:translateX(-50%);
    }
    to{
        transform:translateX(0);
    }
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:992px){

    .section-header h2{
        font-size:4rem;
    }

    .sponsors-track img{
        width:180px;
        height:100px;
    }
}

@media(max-width:768px){

    .sponsors-section{
        padding:80px 15px;
    }

    .section-header{
        margin-bottom:60px;
    }

    .section-header h2{
        font-size:3rem;
    }

    .section-header p{
        font-size:1rem;
    }

    .sponsors-track{
        gap:25px;
    }

    .sponsors-track img{
        width:140px;
        height:80px;
        padding:15px;
    }

    .sponsors-slider::before,
    .sponsors-slider::after{
        width:60px;
    }
}/* End custom CSS */