/* =========================================================
   MARCAS
========================================================= */

.marcas{
    padding:70px 0;
    background:#fff;
}

.marcas-header{
    text-align:center;
    margin-bottom:35px;
}

.marcas-label{
    display:inline-flex;
    padding:8px 18px;
    border-radius:30px;
    background:#edf3ff;
    color:#2463FF;
    font-size:11px;
    font-weight:700;
    letter-spacing:.8px;
}

.marcas-header h2{
    margin:14px 0 8px;
    font-size:36px;
    color:#172033;
    font-weight:700;
}

.marcas-header p{
    margin:0;
    color:#7B8494;
    font-size:15px;
}

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

.marcas-slider{
    overflow:hidden;
    position:relative;
    width:100%;
    padding:8px 0;
}

.marcas-slider::before,
.marcas-slider::after{
    content:"";
    position:absolute;
    top:0;
    width:70px;
    height:100%;
    z-index:5;
    pointer-events:none;
}

.marcas-slider::before{
    left:0;
    background:linear-gradient(to right,#fff,transparent);
}

.marcas-slider::after{
    right:0;
    background:linear-gradient(to left,#fff,transparent);
}

.marcas-track{
    display:flex;
    gap:18px;
    width:max-content;
    animation:marcasScroll 40s linear infinite;
}

.marcas-slider:hover .marcas-track{
    animation-play-state:paused;
}

/* =========================================================
   TARJETAS (como las originales)
========================================================= */

.marca-item{
    width:165px;
    height:95px;
    flex:0 0 auto;

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

    padding:16px;

    background:#fff;
    border:1px solid #E7EDF5;
    border-radius:18px;

    box-shadow:0 6px 16px rgba(20,35,60,.05);

    transition:.25s ease;
}

.marca-item img{
    width:auto;
    max-width:105px;
    max-height:36px;
    object-fit:contain;

    filter:grayscale(100%);
    opacity:.65;

    transition:.25s;
}

.marca-item:hover{
    transform:translateY(-3px);
    border-color:#2463FF;
    box-shadow:0 12px 24px rgba(36,99,255,.12);
}

.marca-item:hover img{
    filter:grayscale(0);
    opacity:1;
}

/* =========================================================
   ANIMACIÓN
========================================================= */

@keyframes marcasScroll{

    from{
        transform:translateX(0);
    }

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

}

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

@media(max-width:768px){

.marcas{
padding:50px 0;
}

.marcas-header h2{
font-size:28px;
}

.marcas-track{
gap:14px;
animation-duration:28s;
}

.marca-item{
width:120px;
height:75px;
padding:12px;
border-radius:14px;
}

.marca-item img{
max-width:75px;
max-height:28px;
}

.marcas-slider::before,
.marcas-slider::after{
width:35px;
}

}