.elementor-88 .elementor-element.elementor-element-f96718c{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-88 .elementor-element.elementor-element-f96718c.elementor-element{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for html, class: .elementor-element-f96718c *//* =====================================================
   QUALINOVA — SOLUCIONES
   DISEÑO CORPORATIVO PREMIUM
===================================================== */


:root{

    --ql-blue-dark:#001244;
    --ql-blue-tech:#008ee6;
    --ql-bg:#f6f6f6;
    --ql-white:#ffffff;

}






/* =====================================================
   SECCIÓN PRINCIPAL
===================================================== */


.ql-solutions{

    background:#f6f6f6;

    padding:100px 24px 110px;

}



.ql-solutions__inner{

    width:min(1450px,94%);

    margin:auto;

}








/* =====================================================
   HERO
===================================================== */


.ql-solutions__hero{


    display:grid;


    grid-template-columns:

    48% 52%;


    align-items:center;


    gap:40px;


    margin-bottom:100px;


}






/* TEXTO HERO */


.ql-solutions__label{


    display:flex;


    align-items:center;


    gap:15px;


    color:#008ee6;


    font-size:13px;


    font-weight:800;


    letter-spacing:.18em;


}



.ql-solutions__label::before{


    content:"";


    width:40px;


    height:2px;


    background:#008ee6;


}






.ql-solutions__hero h1{


    margin:25px 0;


    color:#001244;


    font-size:clamp(42px,4vw,60px);


    line-height:1.08;


    letter-spacing:-.04em;


}



.ql-solutions__hero h1 span{


    color:#008ee6;


}





.ql-solutions__hero p{


    color:#555;


    font-size:18px;


    line-height:1.75;


    max-width:560px;


}






/* IMAGEN HERO */


.ql-solutions__hero-image{


    height:450px;


    border-radius:0 40px 40px 40px;


    overflow:hidden;


    position:relative;


}



.ql-solutions__hero-image img{


    width:100%;


    height:100%;


    object-fit:cover;


}




.ql-solutions__hero-image::after{


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(

    90deg,

    rgba(0,18,68,.25),

    transparent

    );


}






/* MARCA DE AGUA */


.ql-solutions__watermark{


    position:absolute;


    right:35px;


    top:35px;


    width:180px;


    height:180px;


    opacity:.20;


    z-index:2;


}



.ql-solutions__watermark img{


    width:100%;


    height:100%;


    object-fit:contain;


}








/* =====================================================
   HEADER INDUSTRIAS
===================================================== */


.ql-solutions__header{


    text-align:center;


    margin-bottom:55px;


}



.ql-solutions__header span{


    color:#008ee6;


    font-size:13px;


    font-weight:800;


    letter-spacing:.18em;


}



.ql-solutions__header h2{


    margin:18px auto 0;


    max-width:1000px;


    white-space:nowrap;


    color:#001244;


    font-size:46px;


    line-height:1.15;


    letter-spacing:-.035em;


}




/* =====================================================
   TARJETAS INDUSTRIAS
===================================================== */


.ql-solutions__cards{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}







.ql-solution-card{


    background:white;


    border-radius:28px;


    overflow:hidden;


    position:relative;


    padding-bottom:40px;


    box-shadow:

    0 20px 60px rgba(0,18,68,.10);


    transition:.35s ease;


}



.ql-solution-card:hover{


    transform:translateY(-8px);


}







/* IMAGEN TARJETA */


.ql-solution-card__image{


    height:230px;


    overflow:hidden;


}



.ql-solution-card__image img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s ease;


}




.ql-solution-card:hover 
.ql-solution-card__image img{


    transform:scale(1.05);


}







/* ICONO */


.ql-solution-card__icon{


    width:75px;


    height:75px;


    border-radius:50%;


    background:#008ee6;


    border:8px solid white;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:-38px auto 25px;


    position:relative;


    z-index:2;


}



.ql-solution-card__icon img{


    width:38px;


    height:38px;


    object-fit:contain;


}







/* TEXTO */


.ql-solution-card h3{


    text-align:center;


    padding:0 30px;


    color:#001244;


    font-size:25px;


    line-height:1.25;


    margin-bottom:18px;


}



.ql-solution-card p{


    padding:0 35px;


    text-align:center;


    color:#555;


    font-size:15px;


    line-height:1.7;


}









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


@media(max-width:1000px){



.ql-solutions__hero{


    grid-template-columns:1fr;


}



.ql-solutions__cards{


    grid-template-columns:1fr;


}



.ql-solutions__hero-image{


    height:380px;


}


}







/* =====================================================
   MOBILE
===================================================== */


@media(max-width:767px){

.ql-solutions__header h2{

    white-space:normal;

}

.ql-solutions{


    padding:70px 18px;


}



.ql-solutions__inner{


    width:100%;


}



.ql-solutions__hero h1{


    font-size:38px;


}



.ql-solutions__hero p{


    font-size:16px;


}



.ql-solutions__header h2{


    font-size:34px;


}



.ql-solution-card{


    border-radius:22px;


}


}
/* =====================================================
   BOTONES SOLUCIONES
===================================================== */


.ql-solution-card__button{


    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;


    width:max-content;


    margin:30px auto 0;


    padding:14px 28px;


    border-radius:50px;


    text-decoration:none;


    font-family:"Nunito Sans",sans-serif;


    font-size:14px;


    font-weight:800;


    letter-spacing:.04em;


    color:white;


    background:

    linear-gradient(

    135deg,

    #008ee6,

    #001244

    );


    box-shadow:

    0 12px 30px rgba(0,142,230,.25);


    transition:.35s ease;


}




.ql-solution-card__button span{


    font-size:20px;


    line-height:1;


    transition:.35s ease;


}




.ql-solution-card__button:hover{


    transform:translateY(-4px);


    background:

    linear-gradient(

    135deg,

    #001244,

    #008ee6

    );


    box-shadow:

    0 18px 40px rgba(0,18,68,.30);


}



.ql-solution-card__button:hover span{


    transform:translateX(5px);


}
/* =====================================================
   AJUSTE ALTURA TARJETAS Y BOTONES
===================================================== */


.ql-solution-card{

    display:flex;

    flex-direction:column;

}



.ql-solution-card p{

    flex-grow:1;

}




.ql-solution-card__button{

    margin-top:30px;

}
/* =====================================================
   BOTONES PERSONALIZADOS POR INDUSTRIA
===================================================== */


/* Farmacéutica */

.ql-solution-card:nth-child(1)
.ql-solution-card__button{


background:
linear-gradient(
135deg,
#001244,
#008ee6
);


}




/* Dispositivos médicos */

.ql-solution-card:nth-child(2)
.ql-solution-card__button{


background:
linear-gradient(
135deg,
#008ee6,
#001244
);


}




/* Alimentaria y cosmética */

.ql-solution-card:nth-child(3)
.ql-solution-card__button{


background:
linear-gradient(
135deg,
#008ee6,
#001244
);


}
.ql-solution-card h3{

    min-height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e2a9154 *//* =====================================================
   QUALINOVA
   SERVICIOS ESPECIALIZADOS
===================================================== */


.ql-services{

background:#f6f6f6;

padding:110px 24px;

overflow:hidden;

}




.ql-services__container{

width:min(1400px,94%);

margin:auto;

}





/* ==========================
   HEADER
========================== */


.ql-services__header{

position:relative;

margin-bottom:70px;

}



.ql-services__label{


display:flex;

align-items:center;

gap:15px;


font-size:13px;

font-weight:800;

letter-spacing:.18em;

color:#008ee6;


}




.ql-services__label::before{


content:"";

width:45px;

height:2px;

background:#008ee6;


}





.ql-services__header h2{


margin:25px 0 20px;


font-size:58px;


line-height:1;


letter-spacing:-.04em;


color:#001244;


}




.ql-services__header p{


max-width:650px;


font-size:18px;


line-height:1.7;


color:#667085;


}







/* LUPA GRANDE EXTERNA */


.ql-services__brand-watermark{


position:absolute;


right:20px;


top:-80px;


width:320px;


height:320px;


opacity:.08;


}



.ql-services__brand-watermark img{


width:100%;


height:100%;


object-fit:contain;


}






/* ==========================
   GRID 3 + 2
========================== */


.ql-services__grid{


display:grid;


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


gap:30px;


}




.ql-service-card{


grid-column:span 2;


min-height:430px;


padding:42px;


border-radius:28px;


position:relative;


overflow:hidden;


box-shadow:

0 25px 60px rgba(0,18,68,.12);


transition:.35s ease;


}




.ql-service-card:hover{


transform:translateY(-8px);


}




/* segunda fila centrada */


.ql-service-card:nth-child(4){

grid-column:2 / span 2;

}


.ql-service-card:nth-child(5){

grid-column:4 / span 2;

}






/* ==========================
   COLORES
========================== */


.ql-dark{


background:

linear-gradient(
135deg,
#001244,
#00245f
);


color:white;


}




.ql-gradient{


background:

linear-gradient(
135deg,
#008ee6,
#001244
);


color:white;


}





.ql-light{


background:

linear-gradient(
145deg,
#ffffff,
#dcecff
);


color:#001244;


}






/* ==========================
   ICONOS
========================== */


.ql-service-icon{


width:75px;


height:75px;


border-radius:50%;


background:white;


display:flex;


align-items:center;


justify-content:center;


margin-bottom:35px;


}



.ql-service-icon img{


width:40px;


height:40px;


object-fit:contain;


}







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


.ql-service-card h3{


font-size:32px;


line-height:1.15;


letter-spacing:-.03em;


margin:0 0 20px;


}




.ql-service-card p{


font-size:16px;


line-height:1.7;


margin-bottom:25px;


}






/* LISTAS */


.ql-service-card ul{


list-style:none;


padding:0;


margin:0;


}




.ql-service-card li{


position:relative;


padding-left:22px;


margin-bottom:12px;


}




.ql-service-card li::before{


content:"";


position:absolute;


left:0;


top:9px;


width:8px;


height:8px;


border-radius:50%;


background:#008ee6;


}






/* ==========================
   MOBILE
========================== */


@media(max-width:900px){



.ql-services__grid{


grid-template-columns:1fr;


}



.ql-service-card,


.ql-service-card:nth-child(4),


.ql-service-card:nth-child(5){


grid-column:auto;


}




.ql-services__header h2{


font-size:42px;


}




.ql-services__brand-watermark{


width:220px;


height:220px;


right:-40px;


}



}/* End custom CSS */