/* =====================================================
   CLIENTES - OPTIMIZACIÓN CANARIAS V2
===================================================== */

#clientes{

    padding:120px 0 130px;

    background:#F7F9FC;

    position:relative;

    overflow:hidden;

}


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

.clientes-container{

    max-width:1200px;

    margin:0 auto;

    padding:0 40px;

    text-align:center;

}


/* =====================================================
   ETIQUETA SUPERIOR
===================================================== */

.clientes-eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    margin-bottom:25px;

    background:#EEF6E2;

    color:#6F9F32;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.2px;

}


/* =====================================================
   TÍTULO
===================================================== */

.clientes-title{

    max-width:850px;

    margin:0 auto 22px;

    color:#0B2149;

    font-size:42px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-1px;

}


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

.clientes-text{

    max-width:720px;

    margin:0 auto 60px;

    color:#6C7280;

    font-size:17px;

    line-height:1.8;

}


/* =====================================================
   GRID DE LOGOS
===================================================== */

.clientes-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

    max-width:1050px;

    margin:0 auto;

}


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

.cliente-logo{

    height:150px;

    background:#ffffff;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;

    box-shadow:

        0 10px 35px rgba(16,24,40,.06);

    border:1px solid rgba(11,33,73,.04);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}


.cliente-logo:hover{

    transform:translateY(-6px);

    box-shadow:

        0 20px 45px rgba(16,24,40,.12);

}


/* =====================================================
   IMÁGENES
===================================================== */

.cliente-logo img{

    display:block;

    width:auto;

    height:auto;

    max-width:92%;

    max-height:95px;

    object-fit:contain;

    transition:

        transform .3s ease,

        filter .3s ease;

}


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

.cliente-logo:hover img{

    transform:scale(1.05);

}


/* =====================================================
   LOGOS QUE NECESITAN MÁS TAMAÑO
===================================================== */

.cliente-logo.logo-bella img{
    max-width:95%;
    max-height:90px;
}

.cliente-logo.logo-capross img{
    max-width:95%;
    max-height:90px;
}

.cliente-logo.logo-cofricansa img{
    max-width:95%;
    max-height:90px;
}

.cliente-logo.logo-cortijo img{
    max-width:88%;
    max-height:100px;
}

.cliente-logo.logo-willy img{
    max-width:82%;
    max-height:105px;
}

.cliente-logo.logo-piratas img{
    max-width:85%;
    max-height:105px;

}


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

.clientes-trust{

    margin-top:55px;

    color:#0B2149;

    font-size:16px;

    font-weight:600;

}


.clientes-trust strong{

    color:#7DAA3D;

}


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

@media(max-width:900px){

    #clientes{

        padding:90px 0 100px;

    }


    .clientes-container{

        padding:0 25px;

    }


    .clientes-title{

        font-size:36px;

    }


    .clientes-grid{

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

        gap:18px;

    }

}


/* =====================================================
   RESPONSIVE MÓVIL
===================================================== */

@media(max-width:600px){

    #clientes{

        padding:80px 0 90px;

    }


    .clientes-eyebrow{

        font-size:13px;

        padding:11px 18px;

    }


    .clientes-title{

        font-size:30px;

        line-height:1.2;

    }


    .clientes-text{

        font-size:15px;

        line-height:1.7;

        margin-bottom:40px;

    }


    .clientes-grid{

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

        gap:14px;

    }


    .cliente-logo{

        height:120px;

        padding:15px;

        border-radius:14px;

    }


    .cliente-logo img{

        max-width:90%;

        max-height:65px;

    }


    .clientes-trust{

        font-size:14px;

        line-height:1.6;

    }

}