@charset "UTF-8";

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

.brands{

    padding:42px 0;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbff
        );

    position:relative;

    overflow:hidden;
}

/* =====================================================
   EFECTO SUPERIOR
===================================================== */

.brands::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            #1e5cc8,
            #60a5fa,
            #1e5cc8
        );

    opacity:.85;
}

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

.brands-row{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(180px,1fr)
        );

    gap:22px;

    align-items:stretch;
}

/* =====================================================
   CARD MARCA
===================================================== */

.brand-item{

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:20px;

    min-height:130px;

    padding:22px 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;

    box-shadow:
        0 6px 18px rgba(15,23,42,.04);
}

/* =====================================================
   EFECTO HOVER
===================================================== */

.brand-item:hover{

    transform:translateY(-6px);

    border-color:#d8e5ff;

    box-shadow:
        0 18px 35px rgba(15,23,42,.10);
}

/* =====================================================
   EFECTO BRILLO
===================================================== */

.brand-item::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transition:.7s ease;
}

.brand-item:hover::before{

    left:140%;
}

/* =====================================================
   IMAGEN
===================================================== */

.brands-row img{

    width:100%;

    max-width:150px;

    height:70px;

    object-fit:contain;

    opacity:.82;

    filter:grayscale(.12);

    transition:
        transform .3s ease,
        opacity .3s ease,
        filter .3s ease;
}

/* =====================================================
   HOVER IMG
===================================================== */

.brand-item:hover img{

    opacity:1;

    filter:none;

    transform:scale(1.05);
}

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

@media (min-width:1600px){

    .brands{

        padding:60px 0;
    }

    .brands-row{

        grid-template-columns:
            repeat(
                auto-fill,
                minmax(240px,1fr)
            );

        gap:34px;
    }

    .brand-item{

        min-height:170px;

        border-radius:26px;

        padding:28px;
    }

    .brands-row img{

        max-width:190px;

        height:90px;
    }
}

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

@media (max-width:1200px){

    .brands-row{

        grid-template-columns:
            repeat(
                auto-fill,
                minmax(170px,1fr)
            );

        gap:18px;
    }

    .brands-row img{

        max-width:135px;

        height:62px;
    }
}

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

@media (max-width:992px){

    .brands{

        padding:34px 0;
    }

    .brands-row{

        grid-template-columns:
            repeat(
                auto-fill,
                minmax(150px,1fr)
            );

        gap:16px;
    }

    .brand-item{

        min-height:115px;

        border-radius:18px;

        padding:18px;
    }

    .brands-row img{

        max-width:120px;

        height:56px;
    }
}

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

@media (max-width:768px){

    .brands{

        padding:28px 0;
    }

    .brands-row{

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px;
    }

    .brand-item{

        min-height:105px;

        border-radius:16px;

        padding:16px;
    }

    .brands-row img{

        max-width:100px;

        height:48px;
    }
}

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

@media (max-width:580px){

    .brands{

        padding:24px 0;
    }

    .brands-row{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;
    }

    .brand-item{

        min-height:95px;

        border-radius:14px;

        padding:14px;
    }

    .brands-row img{

        max-width:88px;

        height:42px;
    }
}

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

@media (max-width:420px){

    .brands-row{

        grid-template-columns:1fr 1fr;
    }

    .brand-item{

        min-height:90px;

        padding:12px;
    }

    .brands-row img{

        max-width:80px;

        height:38px;
    }
}