/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/* FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");



/*-----------------------------------------------------------------------------------------------------------------------*/
/* VARIABLES ------------------------------------------------------------------------------------------------------------*/
:root {
  
  /* Colores principales */
    --azul: 30, 45, 116;
    --azul-medio: 184, 220, 245;
    --azul-claro: 226, 240, 251;
    --gris: 51, 51, 51;
    --gris-claro: 247, 248, 249;
    --blanco: 255, 255, 255;
 
  /* Colores CTA */
    --cta-azul: 0, 146, 255;
    --cta-amarillo: 253, 171, 0;

  /* Tipografia */
    --f-principal: "Inter", sans-serif;
    --f-especial: "Alex Brush", cursive;
  
  /* Tipografia */
    --h-1: 70px;
    --h-2: 50px;
    --h-3: 46px;
    --h-4: 40px;
  
    --f-1: 16px;
    --f-2: 18px;
    --f-3: 20px;
    --f-4: 22px;
    --f-5: 26px;
    --f-6: 30px;
  
  /* Bordes */
    --borde-boton: 50px;
    --borde-esquina: 15px;
    --borde-redondo: 50%;
    --sombra: 1px 4px 13px rgba(var(--gris), 0.20);
  
  /* Padding */ 
    --espacio-contenedor: 130px 20px;
    --espacio-boton: 10px 30px;
    
  

  
}


/* 1. CONTENEDORES -------------------------------------------------------------------------------------------------------*/
*{font-family: var(--f-principal) !important;}

  .body-container {
    margin:0 !important;padding:0 !important;
    position:relative;
  }
  .main, .main-g, .main-p, .estrecho, .estrecho-g{ 
     margin:0 auto !important;
     padding: var(--espacio-contenedor);
     float: none !important;
  } 
  .main{
      max-width: 1400px !important;; 
  }
  .main-g{
      max-width: 1600px; 
  }
  .main-p{
      max-width: 1100px; 
  }

  .row{
      margin-left:0 !important;
      margin-right: 0 !important;;
  }
  .estrecho{
      max-width: 800px;
  }
  .estrecho-g{
      max-width: 1000px;
  }
  .esquina, .esquina img{
    border-radius: var(--borde-esquina) !important;
  }
  .grid-2{
    display:grid !important;;
    grid-template-columns: 1fr 1fr;
    gap:70px !important;
    margin-top:30px;
  }
  .grid-2-left{ 
    display:grid !important;; 
    grid-template-columns: 0.8fr 1fr;
    gap:50px !important;
  }
  .grid-2-left-pq{ 
    display:grid !important;; 
    grid-template-columns: auto 1fr;
    gap:30px !important;
  }
  .espacio{padding-top:100px;}
  .d-flex{
    display:flex !important;
  }
  .d-none{
    display:none !important;
  }
  .d-grid{
    display:grid !important;
  }


/*------------------------------------------------------------------------------------------------------------------------*/
/* 2. COLORES --------------------------------------------------------------------------------------------------------------*/

  .f-oscuro{
      background: rgb(var(--azul));
      color: var(--blanco); 
      margin-top:-1px
  }
  .f-claro{
/*       background: rgb(var(--gris-claro)); */
      margin-top:-1px
  }
  .f-blanco{
      background: rgb(var(--blanco));
  }
  .f-azul-claro{
      background: rgb(var(--azul-claro));
  }

  .t-blanco{
    color: rgb(var(--blanco)) !important;;
  }
.centrado{text-align:center; !important;}
/*------------------------------------------------------------------------------------------------------------------------*/
/* HEDADER------------------------------------------------------------------------------------------------*/

  .header{
/*     position:absolute;z-index: 1;top:0; left:0;width:100vw; */
}
  .header .main {display:flex;justify-content:space-between;padding:20px; !important;align-items:center !important;}
  .header .main {align-items:center !important;}

  .header .headerEnlaces ul{display:flex;justify-content: flex-end;height:100%;gap:30px;margin-bottom: 0 !important;}
  .header .headerEnlaces li, .header .headerEnlaces li a, .header .headerEnlaces li, .header .headerEnlaces li p{list-style-type:none !important;color: #fff;margin-bottom:0 !important;}
  .header .headerEnlaces .hs-button{padding: 10px !important;}

  .header .header-logo img{max-width:150px !important;height: auto;}
/*   .header .header-logo.escritorio{display:block} */
  .header .header-logo.movil{display:block}

/*------------------------------------------------------------------------------------------------------------------------*/
/* CABECERA ------------------------------------------------------------------------------------------------*/

.cabecera{position:relative !important;;height: 100%;overflow:hidden;}


.cabecera .fondo-cabecera, 
.cabecera > div, 
.cabecera > div > div,  
.cabecera .fondo-cabecera > div, 
.cabecera .fondo-cabecera >div > span{height: 100% !important; display:block}
.cabecera .fondo-cabecera .hs-video-widget, .cabecera .fondo-cabecera .hs-video-container,
.cabecera .fondo-cabecera .hs-video-wrapper{height:100% !important;}
.cabecera .fondo-cabecera video{
/*     height:100% !important;
    min-height: 100%;
    object-fit: cover;
    width: 100%;
    object-position: center center; */
} 
.cabecera .titulo-mensaje {position: absolute; bottom: 60px } 
/* .cabecera .titulo-mensaje .main{padding-bottom: 0!important;}  */
.titulo-mensaje h1{font-size: 80px; font-weight:bold;color: #1E2D74;margin-bottom:50px; 
text-align:center}  

/* .cabecera .video-principal{height: 90vh !important;background: #000;}
.cabecera .hs-video-wrapper,  .cabecera .hs-video-wrapper
.cabecera .video-principal iframe, .hs-video-wrapper{height:100% !important; width: auto !important;padding-bottom: 0 !important;max-width:1400px !important; margin: 0 auto !important;} 
 */



.frase-azul-grande{
  text-align: center;
  font: normal normal normal 40px/52px Inter;
  letter-spacing: 0px;
  color: #1E2D74;
}

.bi.bi-plus-circle-fill{
  font-size: 40px;
  color: #fdab00;
  margin-right:10px;
}
.bi.bi-play-circle-fill{
  font-size: 40px;
  color: #1E2D74;
  margin-right:20px;
}
/*   .titulo-movil{
    display:none !important;;
  } */


/*------------------------------------------------------------------------------------------------------------------------*/
/* SECCION VIDEOS ------------------------------------------------------------------------------------------------*/



.videos{}
/* .videos .main{padding-top:0 !important;} */
.videos h2{
  font: normal normal bold 60px/76px Inter;
  letter-spacing: 0px;
  color: #1E2D74;
  line-height: 1.2;
}
.videos p{
  font: normal normal bold 16px/26px Inter;
  letter-spacing: 0px;
  color: #1E2D74;
}
.videos .comentario p{
  font: normal normal 300 26px/36px Inter;
  letter-spacing: 0px;
  color: #1E2D74;
  margin-top:20px;
}
.videos .loop-post-3col li{
  box-shadow: none;
    border-radius: 0;
}

.loop-post-3col li img{
  height:auto !important;;
  margin-bottom:0 !important;
}




/*------------------------------------------------------------------------------------------------------------------------*/
/* SECCION HISTORIAS ------------------------------------------------------------------------------------------------*/



#historias{
  position: relative;
  background: #000;
  overflow:hidden;
  margin:50px 0px 150px 0;

}
#historias .fondo-imagen{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.7;
  overflow: hidden;
}
#historias .fondo-imagen > div{height:100%;}
#historias .fondo-imagen img{
 width:100%;
  min-height: 100%;
  height: 100% !important;;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scaleX(-1);
  max-width:inherit !important;
}
#historias .contenido{
  z-index:1; 
  position:relative
}
#historias .contenido h2{
  font: normal normal bold 94px/100px Inter;
  color: #FFFFFF;
  text-shadow: 0px 0px 6px rgb(0 0 0 / 14%);
} 



.b-video{
  background: rgba(var(--azul), 0.90) !important;
}
.b-testimonio{
  background: rgba(213,238,250, 0.90) !important;
} 
.card-slide a{
  text-decoration: none !important;
}
.modal-dialog-centered {
/*   display: grid !important; */
/*   max-height:600px !important;;
  min-height: inherit !important; */
  padding: 5% 0;
}
.modal .btn-close{
  position: absolute;
  right:20px;
  top:20px;
  font-size: 40px;
  color: rgb(var(--azul)) !important;
  background:none !important;
}
.modal.b-video .btn-close{
  color: #fff !important;
}
.modal-content{
  background: transparent !important;
  border: 0 !important;  
}
.modal-header{
  border-bottom: 1px solid rgb(var(--azul)) !important;
}
.modal-header h3 {
  color: rgb(var(--azul)) !important;
  font-weight:bold;
}
.modal-body{
  margin-top:20px !important;
/*   background: #fff; */
  color: var(--azul) !important;;
  
}
.modal-body{
  color: rgb(var(--azul)) !important;
}

.b-video .modal-header{
  border-bottom: 1px solid #fff !important;
}
.b-video .modal-header h3 {
  color: #fff !important;
}
.b-video .modal-body{
  color: #fff !important;;
}
.b-video .modal-body{
  color: #fff !important;
}



/*------------------------------------------------------------------------------------------------------------------------*/
/* SECCION FRANJA AZUL ------------------------------------------------------------------------------------------------*/

.f-oscuro{
  margin-bottom:50px;
}

.f-oscuro h2{
font: normal normal normal 40px/52px Inter;
  margin-bottom:50px;
}
.f-oscuro .cta >div{width:100%;}
.f-oscuro .hs_cos_wrapper_type_cta{
  display:flex;
  justify-content:center;
}
/*------------------------------------------------------------------------------------------------------------------------*/
/* SECCION TESTIMONIOS ------------------------------------------------------------------------------------------------*/

.testimonios h2{
  font: normal normal 600 32px/44px Inter;
  color: #1E2D74;
  margin-bottom: 40px;
}

.testimonios #textos-carrusel .row.navegacion{
  display:flex;
  justify-content: center !important;;
}

.testimonios #textos-carrusel li{
  background: #F8F8F8;
  padding: 20px 0 !important;;
}

.testimonios #textos-carrusel li p{
  font: normal normal normal 16px/26px Inter;
  color: #333333;
  padding-top:0;
  margin-top: 0;
  margin-bottom:0;
}
.testimonios #textos-carrusel li p:nth-child(1){
  font: normal normal bold 18px/28px Inter;
  color: #5FBFED;
}

#textos-carrusel .scroll-arrow{
background: #F8F8F8 !important;
}


/*------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER ------------------------------------------------------------------------------------------------*/

#footer .main{padding-bottom: 20px;}
#footer .content{display: flex;justify-content: space-between;align-items:center;border-top: 1px solid #CFD2E1;padding-top:20px;}
#footer .enlaces ul{display: flex;justify-content:flex-end; gap:20px;}
#footer .enlaces li{list-style:none}
#footer .enlaces li, #footer .enlaces li a{
  font: normal normal normal 15px/28px Inter ;
  color: #1E2D74 !important;
  text-decoration:none !important;
}
#footer .enlaces .t-grande li, #footer .enlaces .t-grande li a{
  font: normal normal bold 18px/28px Inter !important;;
}




@media (max-width: 1200px){
  .titulo-mensaje h1 {
    font-size: 60px;
  }
    #historias .texto-grande{
    width:40%;
  }
  #historias .contenido h2{
        font: normal normal bold 68px / 78px Inter;
  }
  #historias .caja-carrusel-historia{
    width:56%;
  }
  .frase-azul-grande {
    text-align: center;
    font: normal normal normal 30px / 40px Inter;
    letter-spacing: 0px;
    color: #1E2D74;
}
  .videos h2 {
    font: normal normal bold 50px / 60px Inter;
    letter-spacing: 0px;
    color: #1E2D74;
    line-height: 1.2;
  }
  .header .header-logo img{max-width:120px !important;}

}
@media (max-width: 991px){
  .titulo-mensaje h1 {
    font-size: 65px;
  }
  .cabecera .main{
    padding: 50px 20px;
  }
   .loop-post-3col ul {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .loop-post-3col ul li {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  
  #historias .texto-grande{
    width:100%;
  }
  #historias .caja-carrusel-historia{
    width:100%;
  }
  #historias .contenido h2{
    font: normal normal bold 60px / 68px Inter;
    text-align:center !important;;
    margin-bottom:20px;
  }
}
@media (max-width: 767px){
  
  .videos h2{  
    font: normal normal bold 40px/50px Inter;
  }
    .videos .main{padding-top:0 !important;}
  .frase-azul-grande {
    font: normal normal normal 30px / 42px Inter;
  }
  #footer .content{
    display:block;
    text-align:center;
    margin-top:20px;
  }
  #footer .enlaces{
    margin-top:20px;
  }
  #footer .enlaces ul {
    margin-bottom:0;
    display: flex;
    justify-content: center;
  }
  #footer .enlaces li, #footer .enlaces li a{
        font: normal normal normal 14px / 24px Inter;
  }
  #footer .enlaces .t-grande li, #footer .enlaces .t-grande{
  margin-bottom:10px;
  }
  #footer .enlaces .t-grande li, #footer .enlaces .t-grande li a{
   font: normal normal bold 16px/28px Inter !important;
  }
  .header .headerEnlaces {display:none !important;;}

  #historias .card-slide .t-grande p {
    font: normal normal 600 28px / 36px Inter;
  }
  #footer .enlaces ul{
    padding-left: 0 !important;
  }
  #footer .content img{margin-top:20px;}
  .titulo-mensaje h1 {
    font-size: 40px;
    margin-bottom:30px;
  }

  .main-p{padding-top:100px !important;;}
  .header{position:relative}
  .header .header-logo img{max-width:110px !important;}
/*   .header .header-logo.escritorio{display:none}
  .header .header-logo.movil{display:block;} */
  
}


@media (max-width: 575px){  
  .videos h2{  
    font: normal normal bold 32px/42px Inter;
  }
  .videos p{
    font: normal normal bold 16px/26px Inter;
  }
  .videos .comentario p{
    font: normal normal 300 24px/34px Inter;
  }

  #historias .contenido h2 {
    font: normal normal bold 32px / 42px Inter;
  }
  #historias .main{
  padding: 80px 5px;
  }
  #historias .card-slide{
    padding: 30px 15px;
  }
  #historias .card-slide .t-grande p{
    font: normal normal 600 23px / 31px Inter;
    padding: 15px;
    
  }
  .videos .comentario p {
      font: normal normal 300 20px / 28px Inter;
   }
  
  .f-oscuro h2 {
    font: normal normal normal 35px / 45px Inter;
    margin-bottom: 50px;
  }
  .testimonios h2 {
    font: normal normal 600 30px / 38px Inter;
}
  #historias {
    margin: 20px 0px 100px 0;
  }
  #historias  .card-slide img {
    max-width: 164px;
    margin-bottom: 20px;
  }
  
  #textos-carrusel ul{
    margin-bottom:0 !important;
  }
  #footer .enlaces .t-grande li, #footer .enlaces .t-grande li a {
    font: normal normal bold 15px / 28px Inter !important;
  }
  #footer .enlaces li, #footer .enlaces li a {
    font: normal normal normal 13px / 24px Inter;
  }
  #textos-carrusel .scroll-arrow i {
    font-size: 18px;
    display: block;
    padding: 5px;
}
  #textos-carrusel .scroll-arrow{
     padding: 5px 6px;
  }
  #footer .enlaces ul {
    margin-bottom: 10px;
    display: block;
   
  }
  .frase-azul-grande {
     font: normal normal normal 20px / 30px Inter;
  }
  .main{
    padding: 70px 20px !important;
  }
  #footer .main {
    padding-bottom: 20px !important;;
  }
  .header .main{
    padding: 20px !important;
  }
  .header .header-logo img{max-width:100px !important;}
  .titulo-mensaje h1{font-size: 30px;} 
  

 }