/*========================================
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;
}


/*================================   
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: 50px;
    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;
}

@media (max-width: 768px) {
 h2{
  margin-top: 12px!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;
}




/* ======================
PADRE de esta tarjeta concreta 
========================*/
.col.l8.m12.s12:has(> div:nth-child(1) h3) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;

    background: #fff;
    border: 1px solid #111;
    border-radius: 28px;

    padding: 75px 80px 65px;
}


/* HIJO 1 — Título */
.col.l8.m12.s12:has(> div:nth-child(1) h3)
> div:nth-child(1) {
    grid-column: 1 / -1;
    margin-bottom: 35px;
}


/* HIJOS 2–5 — botones formatos */
.col.l8.m12.s12:has(> div:nth-child(1) h3)
> div:nth-child(n+2):nth-child(-n+5) {
    width: 100%;
}


/* Botones */
.col.l8.m12.s12:has(> div:nth-child(1) h3)
> div:nth-child(n+2):nth-child(-n+5) a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 48px;

    padding: 0;

    background: #fff;
    color: #333;

    border: 1px solid #aaa;
    border-radius: 14px;

    font-size: 20px;
    font-weight: 600;

    text-transform: none;
    box-shadow: none;
}


/* HIJO 6 — descripción */
.col.l8.m12.s12:has(> div:nth-child(1) h3)
> div:nth-child(6) {
    grid-column: 1 / -1;

    margin-top: 40px;
    margin-bottom: 35px;

    text-align: center;
}


/* HIJO 7 — Descargar */
.col.l8.m12.s12:has(> div:nth-child(1) h3)
> div:nth-child(7) {
    grid-column: 1 / -1;

    display: flex;
    justify-content: center;
}


.col.l8.m12.s12:has(> div:nth-child(1) h3)
> div:nth-child(7) a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 400px;
    height: 50px;

    background: #fff;
    color: #111;

    border: 1px solid #111;
    border-radius: 20px;

    font-size: 20px;

    text-transform: none;
    box-shadow: none;
}



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

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

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

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


/*=============================
BOX-FLAG
=============================*/
.box-flag > div:nth-child(2) > div,
.box-flag > div:nth-child(3) > div {
  padding: 60px 0;
    display: block;
    overflow: hidden;
}

.button-white a {
    padding: 14px 46px;
    background-color: #fff;
    border-radius: 99px;
    color: #1d1d1d;
    font-size: 18px;
    display: inline-block;
    min-width: 320px;
    text-align: center;
    transition: 0.3s;
}

.button-white a:hover{
    box-shadow: 0 3px 7px rgb(0 0 0 / 47%);
}
 
.button a {
    padding: 14px 46px;
    background-color: #1d1d1d;
    border-radius: 99px;
    color: #fff;
    font-size: 18px;
    display: inline-block;
    min-width: 320px;
    text-align: center;
    transition: 0.3s;
    display: inline-block;
}

.button a:hover{
    box-shadow: 0 3px 7px rgb(0 0 0 / 47%);
}

.button-second a{
    color: #1d1d1d;
    background-color: #fff;
    border: 1px solid #1d1d1d;
    margin-top: 24px;
    padding: 14px 46px;
    border-radius: 99px;
    font-size: 18px;
    display: inline-block;
    min-width: 320px;
    text-align: center;
    transition: 0.3s;
}

.button-second a:hover{
    background-color: #f5f6f7;
    box-shadow: 0 3px 7px rgb(0 0 0 / 15%);
}



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



.button-white a {
    padding: 14px 46px;
    background-color: #fff;
    border-radius: 99px;
    color: #1d1d1d;
    font-size: 18px;
    display: inline-block;
    min-width: 320px;
    text-align: center;
    transition: 0.3s;
}

.button-white a:hover{
    box-shadow: 0 3px 7px rgb(0 0 0 / 47%);
}
 
.button a {
    padding: 14px 46px;
    background-color: #1d1d1d;
    border-radius: 99px;
    color: #fff;
    font-size: 18px;
    display: inline-block;
    min-width: 320px;
    text-align: center;
    transition: 0.3s;
    display: inline-block;
}

.button a:hover{
    box-shadow: 0 3px 7px rgb(0 0 0 / 47%);
}

.button-second a{
    color: #1d1d1d;
    background-color: #fff;
    border: 1px solid #1d1d1d;
    margin-top: 24px;
    padding: 14px 46px;
    border-radius: 99px;
    font-size: 18px;
    display: inline-block;
    min-width: 320px;
    text-align: center;
    transition: 0.3s;
}

.button-second a:hover{
    background-color: #f5f6f7;
    box-shadow: 0 3px 7px rgb(0 0 0 / 15%);
}



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

.box {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: transparent !important;
  padding: 10 !important;
  gap: 0 !important;
  
}


/* Contenedor gris formado por icono + texto */
.box > div:nth-child(1),
.box > div:nth-child(2) {
  background-color: #e1e1e1;
  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.box-black{
margin-bottom: 50px;
}

.box.box-black > div:nth-child(1),
.box.box-black > div:nth-child(2) {
  background-color: #000000;
}

/* Caja Icono */
.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 > div:nth-child(1) .col .responsive-img{
width: auto !important;
height: 72px !important;
border-radius: 0;

}

/* Caja blanca detrás del icono */
.box > div:nth-child(1) > * {

  width: 100px !important;
  height: 82px !important;
  border-radius: 14px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Caja negra detrás del icono */
.box.box-black-square > div:nth-child(1) > * {
 
}

/* Texto */
.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;
}

/* Texto interno */
.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;
}

/* Estilos de tipografía fina para el texto interior */
.box > div:nth-child(2) *,
.box > div:nth-child(2) {  
  line-height: 1.4 !important;
}


/* Responsive */
@media (max-width: 768px) {
.box > div:nth-child(1) {
    width: 80px !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: 36px !important;
    height: 33px !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.box-white{
  margin-bottom: 20px;
}
}


/*==========================================
BOX WHITE
==========================================*/

.box-white {
  display: flex !important;

  align-items: stretch !important;
  justify-content: flex-start !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 0 !important;
}


/* Contenedor blanco formado por icono + texto */
.box-white > div:nth-child(1),
.box-white > div:nth-child(2) {
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Caja Icono */
.box-white > 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-white > div:nth-child(1) .col .responsive-img{
width: auto !important;
height: 53px !important;
border-radius: 0;

}



/* Texto */
.box-white > 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;
}

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

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

/* Estilos de tipografía fina para el texto interior */
.box-white > div:nth-child(2) *,
.box-white > div:nth-child(2) {  
  line-height: 1.4 !important;
}


/* Responsive */
@media (max-width: 768px) {

.row:has(> div > .box-white) {
padding: 0 16px 16px 16px !important;
}

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

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

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

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

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


/*=====================
BOTONES
======================*/
.resource-card > div:nth-child(2) a,
.resource-card > div:nth-child(3) a,
.resource-card > div:nth-child(4) a,
.resource-card > div:nth-child(5) a,
.resource-card > div:nth-child(7) a {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #000;
}

.resource-card > div:nth-child(-n+5) .btn:hover {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000;
}
/*=====================
CORPORATIVE BUTTON
======================*/


.corporative-button {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
}

.corporative-button > div:nth-child(-n+4) {
    width: 100%;
    min-width: 0;
    margin: 50px 0px;
}

.corporative-button > div:nth-child(-n+4) .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.corporative-button > div:nth-child(-n+4) .col {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.corporative-button > div:nth-child(-n+4) .btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: 78px;

    padding: 10px 14px;

    box-sizing: border-box;

    background-color: #fff !important;
    color: #000 !important;

    border: 1px solid #999;
    border-radius: 14px;

    box-shadow: none;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.15;

    text-align: center;
    white-space: normal;
    text-transform: none;

    transition: 0.2s ease;
}

.corporative-button > div:nth-child(-n+4) .btn:hover {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000;
}