/*========================================
0. GENERICOS
========================================*/

/* 1. Importación de la fuente desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* 2. Aplicación global a todo el sitio */
body, h3, h4, h5, h6, p, a, li, span, div {
    font-family: 'Inter', sans-serif !important;
}

body {
   background: #fff;
}

.material-icons {
    font-family: 'Material Icons' !important;
}

.col .responsive-img,
.video-responsive {
    border-radius: 24px;
}

.header img,
.footer img,
.icons img {
    border-radius: 0 !important;
}

.dynamicform:has(> .header) {
   min-width: 100%;
}

.row:has(> div > .margin-block) {
  overflow: hidden;
  padding: 24px;
}

.row:has(> div > .vertical-center-trigger) > div {
    display: flex;
    align-items: center;
}

/*-----RESPONSIVE---------*/
@media only screen and (max-width: 992px) {
    .row:has(> div > .vertical-center-trigger) > div {
       flex-wrap: wrap;
    }
    .dynamicform:has(> .reverse) {
      display: flex;
      flex-direction: column-reverse;
    }
}

span.blue-text {
    color: #1a3e77 !important;
}

.row:has(> div > .gradient-blue) {
    background: linear-gradient(
        to top,
        #C2D3E7 0%,
        #D8E3F0 45%,
        #FFFFFF 100%
    ) !important;
}

/*================================   
CENTRAR TEXTO
================================*/
.gradient-blue > div:nth-child(2) {
    transform: translateX(-50%);
    margin-left: 50%;
}

/*================================   
1. TIPOGRAFÍA
================================*/

body h1,
body h1 * {
    display: block;
    width: 100%;
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    line-height: 1.2;
    font-weight: 700;
    word-wrap: normal;
    margin-top: 218px;
    font-family: 'Outfit', sans-serif !important;
}

@media (max-width: 768px) {
    h1, 
    .white-text {
        margin-top: 48px !important;
    }
}

body h2,
body h2 * { 
    font-size: clamp(1.875rem, 4vw, 2.5rem) !important;
    line-height: 1.3 !important;
    margin-top: 86px;
    font-family: 'Outfit', sans-serif !important;
}

h3 { 
    color: #1C1D1F; 
    font-size: 28px; 
}

p { 
    font-size: 17px; 
    color: #1C1D1F; 
}

.p-medium p {
    font-size: clamp(1.125rem, 2.2vw, 1.375rem) !important;
    line-height: 1.45 !important;
}

.p-large p {
    font-size: clamp(1.375rem, 3vw, 1.75rem) !important;
    line-height: 1.3 !important;
} 

.row:has(> div > .vertical-center) > div {
    display: flex;
    align-items: center;
}

/*=============================
LINEA DIVISORIA AZUL
=============================*/
.border-blue {
  position: relative;
}

.border-blue:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 3px solid #1a3e77;
    width: 100%;
    border-radius: 3px;
}

/*=============================
MARGIN-SECTION
=============================*/
.row:has(> div > .margin-section) {   
    padding: 35px 0;
    display: block;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
    .row:has(> div > .margin-section) {
        padding: 24px !important;
        margin-top: -48px;

    }
}

/*========================
ICONO CON FONDO AZUL 
PARA LAS SECCIONES
=========================*/
.icon-box .col img {
    background-color: #1a3e77;
    padding: 18px;
    border-radius: 12px;
    min-width: 68px !important;
    max-width: 68px !important;
}

/*========================
MOVILES:
-  CARD FORMULARIO
-  CENTER VERTICAL
=========================*/

@media only screen and (max-width: 767px) {
    .card {
        margin: 0 8px !important;
        max-width: calc(100% - 16px);
        float: initial !important;
    }
}

@media only screen and (max-width: 992px) {
    .row:has(> .center) {
        flex-wrap: wrap;
    }

    .row:has(> .center.reverse) {
        flex-direction: column-reverse;
    }
}

/*=============================
BANNER-HEADER-SECTION
=============================*/

/*-----------Responsive-------------*/

@media only screen and (max-width: 767px) {
    .banner img {
        display: none;
    }
}

/*===========================================
grey card exclamación
===========================================*/

.dynamicform:has(> .card-icon),
.row > div:has(> .card-icon) {
    display: flex;    
    gap: 24px; 
    flex-wrap: nowrap;
    margin-left: 10px;
    margin-right: 10px;
} 

.card-icon {
    display: flex;
    flex-wrap: wrap;
    background: #f3f3f3;
    border-radius: 16px;
    padding: 16px 29px !important;
    align-content: center;
}

.card-icon > div:nth-child(1),
.card-icon > div:nth-child(2) {
    flex: 1 1 0;
}

.card-icon > div:nth-child(3) {
    flex: 0 0 100%;
}

@media only screen and (max-width: 1200px) {
    .row:has(> div > .card-icon) > div {
        margin: auto;
        flex-wrap: wrap;
        padding: 0 24px;
        margin-top: -29px;
        margin-bottom: -22px;
    }

    .card-icon {
        min-width: 100%;
        align-items: center;
        padding: 24px 24px !important;
        text-align: center;
    } 
}


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

/* Ocultar imagen en móvil */
@media (max-width: 768px) {
    #cms-module-e19477259c7811f1ae250272835e56cd .no-imagen img {
        display: none !important;
    }
}


/*=====================
BLUE BANNER
=====================*/

@media only screen and (max-width: 992px) {
.dynamicform:has(> .horizontal-center.reverse-column)
.dynamicform:has(> .horizontal-center){
   flex-wrap: wrap;
   display:none;
    }

.blue-banner img {
   display:none;
    }
}

/*===========================================
CUSTOM GREY CARD
===========================================*/

.dynamicform:has(> .grey-card-icon) {
    display: flex;    
    gap: 24px; 
    flex-wrap: nowrap;
} 

.grey-card-icon {
    display: flex;
    flex-wrap: wrap;
    background: #f3f3f3;
    border-radius: 16px;
    padding: 30px 38px !important;
    align-content: flex-start; 
    margin-right: 30px;
}

.grey-card-icon > div:nth-child(1),
.grey-card-icon > div:nth-child(2) {
    flex: 1 1 0;
    padding: 6px;
}

.grey-card-icon > div:nth-child(3) {
    flex: 0 0 100%;
}

.grey-card-icon > div:nth-child(1) {
    max-width: 82px;
}

@media only screen and (max-width: 1024px) {
    .dynamicform:has(> .grey-card-icon) {
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1400px) {
    .dynamicform:has(> .grey-card-icon) {
        flex-wrap: nowrap;
    }
}

/*===========================================
BLUE-BOX-SECTION   &   GREEN-BOX-SECTION
===========================================*/

.row:has(> div > .green-card) {    
    border-radius: 48px;
    padding: 42px 24px;
    overflow: hidden;
    margin: 24px 82px;
    width: calc(100% - 164px);
    background-color: #d7e9dc;  
}

.row:has(> div > .green-card) > div {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

.green-card {
    background-color: #fff;
    border: 2px solid #417b52;
    border-radius: 24px;
    padding: 58px 24px !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 992px) {
    .row:has(> div > .green-card) > div {
        padding: 14px 12px;
        margin: auto 8px;
        width: calc(100% - 16px);
        flex-wrap: wrap;
    }
}

/*********************
BLACK-BLOCK-UNIK
********************/

.black-block-unik {
    display: flex;
    flex-direction: row;       
    flex-wrap: nowrap;          
    justify-content: center;   
    align-items: center;   
    background-color: #000000 !important;
    border-radius: 20px; 
    padding: 24px 40px 24px 10px;   
    margin-top: 40px;
    color: #fff;
}

.black-block-unik img {
    background-color: #fff;
    border-radius: 8px !important;
    min-height: 54px;
    min-width: 54px;
    gap: 24px;
}

/**************************
VERTICAL CENTER
*************************/
.row > div:has(> .horizontal-center) {
    display: flex;
    flex-direction: row;
    justify-content: center;   
    align-items: center;   
}

@media only screen and (max-width: 992px) {
    .row > div:has(> .horizontal-center.reverse-column) {
        flex-direction: column-reverse;
    }
    .row > div:has(> .horizontal-center) {
        flex-wrap: wrap;
    }
}

/*==============================
2. LISTADOS
==============================*/

.list-square,
.list-circle,
.arrow-list,
.green-list,
.admiration-circle-blue,
.admiration-circle-black,
.check-icon {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.list-square ul li,
.list-circle ul li,
.arrow-list ul li,
.green-list ul li,
.admiration-circle-blue ul li,
.admiration-circle-black ul li,
.check-icon ul li {
    position: relative !important;
    padding-left: 45px !important;
    margin-bottom: 12px !important;
    font-size: 18px;             
    color: #000000;
    line-height: 1.5;   
    display: flex;
    align-items: flex-start;     
    text-align: left; 
}

/*------------------------------------------
Bullets cuadrados con check
------------------------------------------*/

.list-square ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px; 
    width: 26px;
    height: 26px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='3' width='18' height='18' rx='1.5' stroke='%23000000' stroke-width='2'/%3E%3Cpath d='M8 12.5L11 15.5L16.5 9' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*------------------------------------------
Bullets círculos con check
------------------------------------------*/

.list-circle ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);  
    width: 24px;           
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='16 9 11 14 8 11'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/*------------------------------------------
Bullets círculos verdes con check
------------------------------------------*/
.green-list ul li {
    margin-bottom: 20px !important;
    position: relative;
    padding-left: 40px !important;
}

.green-list ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 26px;
    height: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='16 9 11 14 8 11'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Responsive */
@media (max-width: 768px) {
    .margin-top-negative {
        margin-top: -14px !important;
    }
}

/*------------------------------------------
Bullets círculos con flecha
------------------------------------------*/
.arrow-list ul li::before {
    content: "";
    position: absolute;
    left: 0; /* CORREGIDO: antes decía 100 sin unidad */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/*------------------------------------------
Bullets círculos con admiracion azul
------------------------------------------*/
.admiration-circle-blue ul li::before {
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 22px; 
    height: 22px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d47a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 
    background-repeat: no-repeat; 
    background-size: contain; 
}

/*------------------------------------------
Bullets círculos con admiracion negro
------------------------------------------*/
.admiration-circle-black div:nth-child(3) .col > div {
   display: flex;
   gap: 24px;
}

.admiration-circle-black ul li {
    margin-bottom: 12px !important;
}

.admiration-circle-black ul li::before {
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 22px; 
    height: 22px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

@media only screen and (max-width: 1200px) {
   .admiration-circle-black div:nth-child(3) .col > div{
        margin: auto;
        flex-wrap: wrap;
        padding: 0 24px;
        gap: 24px 0;
    }

    .admiration-circle-black {
        min-width: 100%;
        align-items: center;
        padding: 24px 24px !important;
    } 

#cms-section-ee235bd3-8bfe-11f1-ae25-0272835e56cd
    .admiration-circle-black
    > #cms-module-ee2b34b78bfe11f1ae250272835e56cd
    .col.s12
    > div
    > ul:first-of-type{
        margin-bottom: -14px !important;
    }
}






/*------------------------------------------
CHECK ICON
------------------------------------------*/
.check-icon ul li {
    position: relative;
    list-style: none;
    padding-left: 40px;
    margin-bottom: 12px !important;
}

.check-icon ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 30%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000000'%3E%3Cpath d='M229.66 77.66 101.66 205.66a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
}

/*==========================================
BOX WARNING
==========================================*/

.box-warning .col > div {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 70px 1fr !important;
    align-items: center !important;
    min-height: 110px !important;
    padding: 30px 40px !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 22px !important;
    background: #fff !important;
    margin-top: 25px;
}

.box-warning .col > div::before {
    content: "";
    width: 38px !important;
    height: 38px !important;
    justify-self: center !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/*==========================================
BOX GREY
==========================================*/

.box {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 0 !important;
    margin-bottom: 24px;
    margin-top: 24px;
}

.box > div:nth-child(1),
.box > div:nth-child(2) {
    background-color: #e1e1e1 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.box.box-white > div:nth-child(1),
.box.box-white > div:nth-child(2) {
    background-color: #ffffff75 !important;
}

.box > div:nth-child(1) .col .responsive-img {
    width: auto !important;
    height: 60px !important;
    border-radius: 0;
}

.box > div:nth-child(1) {
    width: 140px !important;
    min-width: 140px !important;
    justify-content: center !important;
    padding: 28px 16px 28px 24px !important;
    border-radius: 20px 0 0 20px !important;
}

.box.box-black-square > div:nth-child(1) > * {
    background: #000 !important;
}

.box > div:nth-child(2) {
    flex: 1 1 0 !important;
    max-width: none !important;
    justify-content: center !important;
    padding: 28px 40px 28px 10px !important;
    border-radius: 0 20px 20px 0 !important;
}

.box > div:nth-child(2) *,
.box > div:nth-child(2) p {
    color: #1f1f1f;
    margin: 0;
    text-align: left;
    font-weight: 600;
    line-height: 1.2;
}

.box > div:nth-child(1),
.box > div:nth-child(2) {
    flex-wrap: nowrap;
}

.box > div:nth-child(2) *,
.box > div:nth-child(2) {   
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    .box > div:nth-child(1) {
        width: 68px !important;
        min-width: 80px !important;
        padding: 22px 10px 22px 18px !important;
    }

    .box > div:nth-child(1) > * {
        width: 50px !important;
        height: 42px !important;
        border-radius: 6px;
    }

    .box > div:nth-child(1) .col .responsive-img {
        width: 40px !important;
        height: 36px !important;
    }

    .box > div:nth-child(2) {
        padding: 22px 24px 22px 8px !important;
    }

    .box > div:nth-child(2) p {
        font-size: 14px !important;
        font-weight: 500;
    }
}

/*==========================================
BOX TRANSPARENTE
==========================================*/
.box-transparente {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 0 !important;
}

.box-transparente > div:nth-child(1),
.box-transparente > div:nth-child(2) {
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.box-transparente > div:nth-child(1) {
    width: 140px !important;
    min-width: 140px !important;
    justify-content: center !important;
    padding: 28px 16px 28px 24px !important;
    border-radius: 20px 0 0 20px !important;
}

.box-transparente > div:nth-child(1) .col .responsive-img {
    width: auto !important;
    height: 60px !important;
    border-radius: 0;
}

.box-transparente > div:nth-child(2) {
    flex: 1 1 0 !important;
    max-width: none !important;
    justify-content: center !important;
    padding: 28px 40px 28px 10px !important;
    border-radius: 0 20px 20px 0 !important;
}

.box-transparente > div:nth-child(2) *,
.box-transparente > div:nth-child(2) p {
    color: #1f1f1f;
    margin: 0;
    text-align: left;
    font-weight: 600;
    line-height: 1.2;
}

.box-transparente > div:nth-child(1),
.box-transparente > div:nth-child(2) {
    flex-wrap: nowrap;
}

.box-transparente > div:nth-child(2) *,
.box-transparente > div:nth-child(2) {   
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    .box-transparente > div:nth-child(1) {
        width: 68px !important;
        min-width: 68px !important;
        padding: 22px 10px 22px 18px !important;
    }

    .box-transparente > div:nth-child(1) > * {
        width: 50px !important;
        height: 42px !important;
        border-radius: 6px;
    }

    .box-transparente > div:nth-child(1) .col .responsive-img {
        width: 25px !important;
        height: 24px !important;
    }

    .box-transparente > div:nth-child(2) {
        padding: 22px 24px 22px 8px !important;
    }

    .box-transparente > div:nth-child(2) p {
        font-size: 14px !important;
        font-weight: 500;
    }
}

/***********************
BLOCK-COLUMN-BLUE
***********************/

.dynamicform:has(> .block-column-blue) {
    display: flex;
    align-items: center;
    overflow: hidden;
    clear: both;
    border-radius: 24px;
    padding: 38px;
    background-color: #d3dcec;
    border: 1px solid #c2c2c2;
}

.block-column-blue img {
    float: left;
}

.block-column-blue.li ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.block-column-blue.li ul li {
    position: relative !important;
    padding-left: 40px !important; 
    margin-bottom: 16px !important; 
    font-size: 16px;              
    display: flex;
    align-items: center;        
}

.block-column-blue.li ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);  
    width: 24px;                  
    height: 24px;            
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M173.66%2C98.34a8%2C8%2C0%2C0%2C1%2C0%2C11.32l-56%2C56a8%2C8%2C0%2C0%2C1-11.32%2C0l-24-24a8%2C8%2C0%2C0%2C1%2C11.32-11.32L112%2C148.69l50.34-50.35A8%2C8%2C0%2C0%2C1%2C173.66%2C98.34ZM224%2C48V208a16%2C16%2C0%2C0%2C1-16%2C16H48a16%2C16%2C0%2C0%2C1-16-16V48A16%2C16%2C0%2C0%2C1%2C48%2C32H208A16%2C16%2C0%2C0%2C1%2C224%2C48ZM208%2C208V48H48V208H208Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

@media only screen and (max-width: 1024px) {
    .dynamicform:has(> .block-column-blue) {
        flex-wrap: wrap;
    }
}

/*===================================
FONDO AZUL CON BORDES REDONDEADOS
====================================*/

.row:has(> div > .border-radius-top) {
    border-radius: 24px 24px 0 0;
    margin: 0 24px;
}

.row:has(> div > .border-radius-center) {
    margin: 0 24px;
}

.row:has(> div > .border-radius-bottom) {
    border-radius: 0 0 24px 24px;
    margin: 0 24px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

@media (max-width: 768px) {
    .row:has(> div > .border-radius-top),
    .row:has(> div > .border-radius-center),
    .row:has(> div > .border-radius-bottom) {
        padding: 0 24px !important;
    }
     img{
        display-none;
     }
}


/*================================================
   3. Especialidades (.soluciones)
   ============================================== */

/* Contenedor principal de la tarjeta */
.col.soluciones {
  position: relative;
  border-radius: 30px;
  overflow: hidden; 
  width: 100%;
}

/* Imagen base con altura mínima para no aplastar el texto */
.col.soluciones img {
  filter: brightness(0.6);
  width: 100%;
  height: 100%;
  min-height: 220px; /* Evita que la tarjeta sea demasiado baja */
  object-fit: cover; /* Mantiene la proporción de la imagen sin deformarla */
  display: block;
}

/* Capa de imagen y contenedor base */
.col.soluciones img,
.col.soluciones > div:nth-of-type(1) {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  transition: filter 0.45s ease;
  height: 100%;
}

/* Overlay centrado */
.col.soluciones > div:nth-of-type(2) {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0);
  transition: background 0.45s ease;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  pointer-events: none;
  padding: 1.25rem;
}

/* Reseteo de márgenes y alineación de textos */
.col.soluciones h4,
.col.soluciones p {
  text-align: center;
  margin: 0 !important;
  color: #ffffff;
}

/* Hover: Oscurece la imagen al pasar el mouse */
.col.soluciones:hover img {
  filter: brightness(0.3);
}

/* -----------------------------------------------
   RESPONSIVE DESIGN (Media Queries)
   ----------------------------------------------- */

/* --- Pantallas pequeñas/medianas (hasta 992px) --- */
@media (max-width: 992px) {
  .col.soluciones img {
    min-height: 240px; /* Más espacio vertical cuando la columna es estrecha */
  }
  .col.soluciones > div:nth-of-type(2) {
    padding: 1rem 1.25rem;
  }
  .col.soluciones h4 {
    font-size: 1.15rem !important;
    line-height: 1.25;
    margin-bottom: 0.4rem !important;
    font-weight: 700;
  }
  .col.soluciones p {
    font-size: 0.875rem !important;
    line-height: 1.35;
  }

.soluciones.list-circle .white-text {
  margin-top: 0px !important;
  font-size: 14px;
  }
}

/* --- Pantallas grandes / Desktop (desde 993px) --- */
@media (min-width: 993px) {
  .col.soluciones img {
    min-height: 280px;
  }
  .col.soluciones > div:nth-of-type(2) {
    padding: 2rem;
  }
  .col.soluciones h4 {
    font-size: 1.4rem !important;
    line-height: 1.3;
    margin-bottom: 0.5rem !important;
    font-weight: 700;
  }
  .col.soluciones p {
    font-size: 0.95rem !important;
    line-height: 1.4;
  }
}



/*==========================================
BOX BLACK
==========================================*/

.box-black {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 0 !important;
    min-height: 30px !important;
    margin-top: 15px;
}

.box-black > div:nth-child(1),
.box-black > div:nth-child(2) {
    background-color: #000 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.box-black > div:nth-child(1) {
    width: 140px !important;
    min-width: 140px !important;
    justify-content: center !important;
    padding: 28px 16px 28px 24px !important;
    border-radius: 20px 0 0 20px !important;
}

.box-black > div:nth-child(1) .col .responsive-img {
    width: auto !important;
    height: 34px !important;
    border-radius: 0;
    margin-top: 4px;
}

.box-black > div:nth-child(1) > * {
    background: #ffffff !important;
    width: 92px !important;
    height: 92px !important;
    border-radius: 14px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.box-black.box-black-square > div:nth-child(1) > * {
    background: #000 !important;
}

.box-black > div:nth-child(2) {
    flex: 1 1 0 !important;
    max-width: none !important;
    justify-content: center !important;
    padding: 28px 40px 28px 10px !important;
    border-radius: 0 20px 20px 0 !important;
}

.box-black > div:nth-child(2) *,
.box-black > div:nth-child(2) p {
    color: #1f1f1f;
    margin: 0;
    text-align: left;
    font-weight: 600;
    line-height: 1.2;
}

.box-black > div:nth-child(1),
.box-black > div:nth-child(2) {
    flex-wrap: nowrap;
}

.box-black > div:nth-child(2) *,
.box-black > div:nth-child(2) {   
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    .box-black > div:nth-child(1) {
        width: 68px !important;
        min-width: 68px !important;
        padding: 22px 10px 22px 18px !important;
    }

    .box-black > div:nth-child(1) > * {
        width: 50px !important;
        height: 42px !important;
        border-radius: 6px;
    }

    .box-black > div:nth-child(1) .col .responsive-img {
        width: 25px !important;
        height: 24px !important;
    }

    .box-black > div:nth-child(2) {
        padding: 22px 24px 22px 8px !important;
    }

    .box-black > div:nth-child(2) p {
        font-size: 14px !important;
        font-weight: 500;
    }
}



/*===========================================
CHECKLIST NEGRO
============================================*/
.check-list-black ul {
display: flex;
flex-direction: column;
gap: 12px;
}

.check-list-black ul li{
position: relative;
background-color: #000;
color:#fff;
border-radius: 12px;
padding: 24px 24px 24px 78px;
 font-size: clamp(0.975rem, 2vw, 1.175rem) !important;
line-height: 1.45 !important;
}

.check-list-black ul li:before{
    content: "";
    display: inline-block;
    width: 37px;
    height: 32px;
     background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17L4 12' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    left: 22px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}



/*===========================================
CHECKLIST NEGRO EXCLAMACION
============================================*/
.exclamation-list-black ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exclamation-list-black ul li {
    position: relative;
    background-color: #000;
    color: #fff;
    border-radius: 12px;
    padding: 24px 24px 24px 78px;
    font-size: clamp(0.975rem, 2vw, 1.175rem) !important;
    line-height: 1.45 !important;
}

.exclamation-list-black ul li:before {
    content: "";
    display: inline-block;
    width: 37px;
    height: 32px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='32' cy='32' r='28' stroke='white' stroke-width='4'/%3E%3Crect x='29.5' y='16' width='5' height='24' rx='2.5' fill='white'/%3E%3Ccircle cx='32' cy='47' r='3.5' fill='white'/%3E%3C/svg%3E");
    left: 22px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/*===========================================
CARD ICON TEXT
============================================*/

.row:has(> div > .card-icon-text) > div {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: space-between;
    max-width: calc(100% - 48px);
    padding: 48px 24px;
}

.card-icon-text {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 12px;
    align-items: flex-start;
    padding: 24px 68px !important;
}

.card-icon-text img {
    background-color: #000001;
    border-radius: 8px !important;
    max-width: 56px !important;
    height: auto !important;
    padding: 12px;
}

.card-icon-text p {
    font-size: 24px;
}

@media only screen and (max-width: 1200px) {
    .row:has(> div > .card-icon-text) > div {
        margin: auto;
        flex-wrap: wrap;
        padding: 12px 24px;
    }

    .card-icon-text {
        min-width: 100%;
        align-items: center;
        padding: 24px 24px !important;
        text-align: center;
    } 
}

/*===========================================
TRAINING CARD
============================================*/
.training-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: linear-gradient(90deg, #fafcff 0%, #f7f9fd 40%, #ebf3ff 100%);
    border-radius: 24px;
    padding: 32px 82px !important;
}

@media (max-width: 768px) {
    .training-card {
        flex-direction: column;
        gap: 14px;
        padding: 28px;
    }
}

/*===========================================
DARK-GREY-BOX
============================================*/
.dark-grey-box .col {
    background: linear-gradient(
        180deg,
        rgb(71,71,71) 0%,
        rgb(62,62,62) 25%,
        rgb(52,52,52) 50%,
        rgb(43,43,43) 75%,
        rgb(34,34,34) 100%
    );
    border-radius: 24px;
    padding: 12px 148px 12px 46px;
    margin-bottom: 24px;
}

.dark-grey-box > div {
    position: relative;
}

.dark-grey-box > div:before {
    position: absolute;
    content: '';
    width: 75px;
    height: 70px;
    right: 38px;
    top: 50%;
    transform: translateY(-75%);
}

.dark-grey-box > div:first-child:before {
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M173.66%2C98.34a8%2C8%2C0%2C0%2C1%2C0%2C11.32l-56%2C56a8%2C8%2C0%2C0%2C1-11.32%2C0l-24-24a8%2C8%2C0%2C0%2C1%2C11.32-11.32L112%2C148.69l50.34-50.35A8%2C8%2C0%2C0%2C1%2C173.66%2C98.34ZM232%2C128A104%2C104%2C0%2C1%2C1%2C128%2C24%2C104.11%2C104.11%2C0%2C0%2C1%2C232%2C128Zm-16%2C0a88%2C88%2C0%2C1%2C0-88%2C88A88.1%2C88.1%2C0%2C0%2C0%2C216%2C128Z'%3E%3C/path%3E%3C/svg%3E");
}

.dark-grey-box > div:nth-child(2):before {
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z'/%3E%3C/svg%3E");
}

.dark-grey-box .col * {
    color: #fff;
}

/*-----RESPONSIVE--------*/

@media only screen and (max-width: 767px) {
    .dark-grey-box .col {
        padding: 6px 58px 18px 24px !important;
    }

    .dark-grey-box .col p {
        font-size: 13px;
        line-height: 1.3em;
    }

    .dark-grey-box .col h3 {
        font-size: 23px !important;
    }

    .dark-grey-box > div:before {
        width: 37px;
        height: 75px;
        right: 18px;
    }

    .dark-grey-box > div:nth-child(2):before {
        background-size: 36px;
    }
}

/*=======================================
FAQS
========================================*/

.row:has(> div > .faqs) {
    overflow: hidden;
    display: block;
    background-color: #ffebd6;
    border-radius: 48px;
    max-width: 1440px;
    margin: 86px auto;
    padding-bottom: 24px;
}

.faqs > div {   
    background: linear-gradient(
        180deg,
        rgb(255, 197, 140) 0%,
        rgb(255, 207, 159) 50%,
        rgb(255, 217, 178) 100%
    );
    border-radius: 30px !important;
    padding: 0 48px !important;
    margin-bottom: 20px;
}

.faqs > div:first-child {
    background: transparent;
}

.faqs h3 {
    color: #bf7326;
}

.faqs p {
    color: #372425;
}

/*-----RESPONSIVE--------*/

@media only screen and (max-width: 767px) {
    .faqs > div {
        padding: 0 16px !important;
    }
}

.row:has(> div > .footer) {
    background-color: #1d1d1f;
}

/*------------------------------------------
CONTACT FORM
-----------------------------------------*/
.dynamicform:has(> .contact-form) {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 62px;
    margin-top: 120px !important;
    margin-bottom: 120px !important;
    padding: 42px !important;
}

.contact-form.card {
    grid-template-columns: auto !important;
}

/* -------------------------------------
----------- VISTA MOVIL---------------
---------------------------------------*/
@media (max-width: 600px) {
    /*---- CONTACT FORM ------*/
    .dynamicform:has(> .contact-form) {
        padding: 43px 32px 0 32px;
        flex-wrap: wrap;
    }
}