/* ==========================================
   MARCAS - DESKTOP PREMIUM
========================================== */

.marcas-section {
    
    display: none;
}

@media (min-width:1024px){

.marcas-section{

    width:min(1500px,95%);
    margin:55px auto 65px;

    padding:0;

}

.marcas-section h2{

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

    color:#fff;

    margin-bottom:22px;

    letter-spacing:.3px;

}

/* Slider */

.marcas-slider{

    width:100%;

    overflow:hidden;

    position:relative;

    border-radius:26px;

}

/* Track */

.marcas-track{

    display:flex;

    align-items:center;

    gap:24px;

    padding:12px 2px;

    width:max-content;

}

/* Card */

.marca-card{

    position:relative;

    flex:0 0 calc((100vw - 240px)/5);

    max-width:200px;
    min-width:210px;

    height:190px;

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

    overflow:hidden;

    border-radius:24px;

background:#141B2D;

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

    backdrop-filter:blur(18px);

    opacity:.78;

    transition:
        transform .35s,
        opacity .35s,
        border-color .35s,
        box-shadow .35s;

}


/* Logos */

.marca-card svg{

    width:72px;

    height:72px;

    fill:currentColor;

    transition:.35s;

}

/* Hover */

.marca-card:hover{

    cursor:pointer;

    opacity:1;

    transform:
        translateY(-8px)
        scale(1.05);

    border-color:
        color-mix(in srgb,var(--brand) 45%,white);

    box-shadow:

        0 0 18px
        color-mix(in srgb,var(--brand) 30%,transparent),

        0 0 50px
        color-mix(in srgb,var(--brand) 18%,transparent),

        0 18px 40px rgba(0,0,0,.45);

}

.marca-card:hover svg{

    transform:scale(1.12);

    filter:

        drop-shadow(
            0 0 12px
            color-mix(in srgb,var(--brand) 70%,white)
        )

        drop-shadow(
            0 0 24px
            var(--brand)
        );

}

/* AutoPlay */

.marca-card.play{

    opacity:1;

    transform:
        translateY(-6px)
        scale(1.04);

    border-color:
        color-mix(in srgb,var(--brand) 35%,white);

    box-shadow:

        0 0 15px
        color-mix(in srgb,var(--brand) 28%,transparent),

        0 0 40px
        color-mix(in srgb,var(--brand) 18%,transparent);

}

.marca-card.play::before{

    content:"";

    position:absolute;

    top:-30%;
    bottom:-30%;

    width:34%;

    left:-40%;

    background:

        linear-gradient(
            90deg,

            transparent,

            color-mix(in srgb,var(--brand) 30%,transparent),

            color-mix(in srgb,var(--brand) 95%,white),

            color-mix(in srgb,var(--brand) 30%,transparent),

            transparent

        );

    filter:blur(5px);

    animation:brandScan 1.2s ease;

}

}