/* @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: 100px 20px;
    --espacio-boton: 10px 30px;
    
  
  
  
}


/* 1. CONTENEDORES -------------------------------------------------------------------------------------------------------*/

  .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: 1300px; 
  }
  .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));
  }

/*--------------------------------------------------------------------------------------------------------------------------*/
/* 3. FUENTES Y TIPOGRAFIAS ------------------------------------------------------------------------------------------------*/

  .f-principal, h1, h2, h3, h4, p, li, a, strong, span, button, .boton a div{
    font-family: var(--f-principal);
    line-height: 1.3 !important;
    color: rgb(var(--azul));
    margin-top:0;
    font-weight: 400;
  
  }
  strong{font-weight: 700 !important;}
  .f-especial{
    font-family: var(--f-especial);
  }
  h1, h2, h3, h4{margin-bottom: 2rem !important;line-height: 1 !important;font-weight: 300 !important;}
  h1{font-size: var(--h-1) !important;font-weight:700 !important;} 
  h2{font-size: var(--h-2) !important; } 
  h2.segundo{font-size:var(--h-3) !important;  }
  h2.tercero{font-size:var(--h-4) !important;margin-bottom: 30px !important;}
  h3 {font-size:var(--f-4)!important ;}

  p, li, a{ font-size: var(--f-1)!important ;}
  .medio p, .boton a{font-size:var(--f-2)!important;}
  .medio-l, .medio-l p, .medio-l li{font-size:var(--f-3) !important;}
  .medio-xl, .medio-xl p, .medio-xl li{font-size:var(--f-4) !important;;}
  .grande, .grande p, .grande li{font-size:var(--f-6) !important;;} 
  a{text-decoration: none !important;margin-bottom: 0 !important;}

  .centrado{text-align:center !important;}
ul{margin-bottom: 0 !important;}
  .subrayado {
    position: relative;
    display: inline-block;
  }
  .subrayado::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -13px;
    width: 103%;
    height: 6px;
    background-color: rgb(var(--cta-azul));
    border-radius: 12px;
    transform: rotate(-2deg);
    transform-origin: left center;
  } 
  .t-blanco{
    color: rgb(var(--blanco));
  }
  .hs-button{
    padding: 10px 25px;
    border-radius: var(--borde-boton);
  }
  .boton a div{
    display:inline-block !important;
    background: rgb(var(--azul)) !important;
    padding: 10px 25px;
    border-radius: var(--borde-boton);
    color: #fff !important;
    font-size: 14px !important;
  }
.headerEnlaces   .hs-button{
    padding: 10px 25px;
    border-radius: 0 !important;
  }

.frase-banner{display:grid !important; grid-template-columns:1fr auto; gap: 30px;align-items:center;}
.frase-banner h3{font-size: var(--h-2) !important;font-weight: 700 !important;;line-height: 1.3 !important; } 
.frase-banner span.f-especial{font-size: 100px !important;line-height: 0 !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;width:100%;}
  .header .main {align-items:center !important;}

  .header .headerEnlaces{display:flex;justify-content: flex-end;height:100%;}
  .header .headerEnlaces .hs-button{padding: 10px !important;}

  .header .headerLogo img{max-width:200px !important;height: auto;}


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

  .cabecera{position:relative !important;;height: 88vh;overflow:hidden;}
  .cabecera .menu{background: rgb(var(--azul));position: absolute; bottom: 0 ; width:100%;}

  .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 img{
    height:100% !important;
    min-height: 100%;
    object-fit: cover;
    width: 100%;
    object-position: center center;} 

  .cabecera .menu .main{padding: 10px 20px !important;}
  .cabecera .menu .main .caja-menu ul{display:flex; justify-content: space-between; !important;padding-left:0 !important;}
  .cabecera .menu .main .caja-menu li{list-style: none !important}
  .cabecera .menu .main .caja-menu a{color: #fff !important;text-transform: uppercase !important;}
  .cabecera .claim{position:absolute; bottom: 10%; width: 100%;color: rgb(var(--blanco)) !important;;}
  .cabecera .claim .main{padding-bottom: 4% !important;}

  .cabecera h1, .cabecera p, .cabecera strong, .cabecera span{color: rgb(var(--blanco)) !important;}
  .cabecera h1{line-height: 80px !important;}
  .cabecera h1 span{font-size: 130px !important;;font-weight: 400 !important;line-height:0 !important;}
  .cabecera p{max-width:550px;}

.visible {
    opacity: 0;
    transition: all 1s;
    position: fixed !important;
    z-index: 999;
    top: 0 !important;
  bottom: inherit !important;
    width: 100%;
    background-color: #fff;;
  }
.menu.visible {
    opacity: 1;
    
}



/*------------------------------------------------------------------------------------------------------------------------*/
/* MODULOS ------------------------------------------------------------------------------------------------*/

  .fondo{height:100%;overflow:hidden;}
  .fondo img{
    height:100% !important;
    min-height: 100%;
    object-fit: cover;
    width: 100%;
    object-position: center bottom;
  }

  .tarjeta{padding: 7%;box-shadow: var(--sombra);}
  .tarjeta.icono-lateral{position:relative;margin-top:10%}
  .tarjeta.icono-lateral::before{
    content:'';
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid rgb(var(--azul));
    display: block;
    position:absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    z-index:0;
  }
  .tarjeta.lista ul{padding-left:10px;;}
  .tarjeta.lista li{list-style:none !important;display:grid;grid-template-columns:auto 1fr;margin-bottom:15px;}
  .tarjeta.lista li::before{
    content:'';
    background: rgb(var(--cta-amarillo)); 
    width:10px; height:10px;  
    border-radius: var(--borde-redondo);
    margin-right:10px;
    margin-top:7px;
}

.iconos-valores{display: grid !important;grid-template-columns: repeat(5, 1fr);gap:10px; justify-content:space-between;}
.iconos-valores .valor p{font-size: var(--f-2)}
.iconos-valores .valor p span{font-size: var(--h-4) ; font-weight:700 !important;}


/*------------------------------------------------------------------------------------------------------------------------*/
/* CARRUSEL ------------------------------------------------------------------------------------------------*/
  .carrusel{position:relative;height: 100%;overflow:hidden;}

  .carrusel .fondo{position:absolute;opacity:0.6;top:0;left:0;z-index:-1}
  .carrusel > div, 
  .carrusel > div > div,  
  .carrusel .fondo > div, 
  .carrusel .fondo >div > span{height: 100%; !important; display:block}
  .carrusel .fondo img{
    height:100% !important;
    min-height: 100%;
    object-fit: cover;
    width: 100%;
    object-position: center bottom;} 


/* Guía-------------------------------*/

  #guia img{max-width:300px !important}
  #guia .d-grid{grid-template-columns: 1fr auto;gap:50px;align-items:flex-end;}
  #guia .d-flex{align-items:flex-end;margin-bottom:30px;gap:20px;}
  #guia  h2{font-size: var(--h-5);margin-bottom: 0 !important;line-height:1 !important;}
  #guia  h2 span{font-weight:400 !important;;margin-bottom:0px !important;}
  #guia  h2 span.f-especial{color:#fff !important;font-size: 90px !important;}
  #guia .hs_cos_wrapper_type_cta{ margin-top:30px !important;display:flex !important; justify-content:flex-start !important;} 
  #guia p, #guia strong{  color: #fff !important;}

/* Carrusel ----*/

.slider__container .splide__arrows{display:flex;}
.slider__container .splide__arrows button{bottom:0 !important; top:inherit !important;right: 0 !important; left: inherit !important;background: rgb(var(--blanco));;border-radius: 10px !important;height: 3em;
    width: 3em;}
.slider__container .splide__arrows button svg{display:none}
.slider__container .splide__arrows button:before{
  display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 600 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
  font-size:30px;
}
.slider__container .splide__arrows button.splide__arrow--prev{    right: 63px !important;}
 .slider__container .splide__arrows button.splide__arrow--next:before{content: "\f285";color: rgb(var(--azul));}
 .slider__container .splide__arrows button.splide__arrow--prev:before{content: "\f284";;color: rgb(var(--azul));}

.slider__container .splide__arrows button.splide__arrow svg {height: 1.2em;width: 1.2em;fill: #ffffff !important;
}


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



.container {max-width:1200px !important; width:100%; margin:0 auto!important; float:none!important; }
.container-fluid {padding:0!important;}

/* BLOG -----------------------------*/

.loop-post-4col img{
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
}


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

.info-contacto { text-align:right; font-size:14px;}
.info-contacto p {margin-bottom: 0;}
.info-contacto a {color: #ffffff; text-decoration:none; padding:0 2px;}
.info-contacto a:hover {color: #ffffff;text-decoration:underline;} 


.footer-container-wrapper{padding: 0 !important;}
 
.pie{background: rgb(var(--azul)) } !important;

.pie .titulo p{line-height:40px;}
.pie .titulo p strong{}
.pie .t-grande p{font-family: 'Causten Light';margin-top:-15px;} 

.borde-b{border-bottom:1px solid #fff;margin-bottom:20px;margin-top:30px}
.borde-b > .row-fluid-wrapper > .row-fluid{display:flex !important;justify-content:space-between;align-items: end;}
.borde-b > .row-fluid-wrapper > .row-fluid > span{width:100% !important;}
.borde-b > .row-fluid-wrapper > .row-fluid > div{width:auto !important;}
 .borde-b .row-fluid:before,  .borde-b .row-fluid:after{display:none;} 

.pie .enlace-tel{margin-right:30px;}
.pie .enlaces p, .pie .enlaces a, .pie .enlaces span{font-size:15px;color: #fff !important;} 
.pie .enlaces{padding:50px 0px !important;}
.pie .derechos p, .pie .derechos a { font-size:13px !important;}

.footer-container-wrapper {background !important;padding:2% 2% 1% 2%; color:#ffffff;}
.footer-container-wrapper a {color:#ffffff!important; text-decoration:none;}  
.redes{    
  margin-bottom:10px;;
}
.redes img{width:20px;display: block;padding:0;margin: 0 10px; }

.redes .hs-social-follow{
   justify-content: flex-start !important;
}
.pie .enlaces a.link-canal {
  display:inline-block;
  background: #fff;
  font-size: 14px !important;
  color: rgb(var(--azul)) !important;;
  border-radius: 50px;
  margin-left:20px;
  padding: 3px 10px; !important;
}
.pie .enlaces a.link-canal:hover{
  
  background: rgb(var(--cta-azul));
  color: #fff !important;
  
}

.contacto{margin-top:15px;}
.contacto a{
  margin-right:20px !important;
  
}
.contacto a:last-child{
  margin-right:0px !important;  
}
.logo-footer{
  text-align: right !important;
}
.logo-footer img {text-align:right;}
.hs-social-follow svg{fill: #fff !important;}

@media (max-width: 768px) {
  .pie .titulo p {
      font-size: 40px!important;
      line-height: 42px!important;
    }
  .pie .enlaces div{text-align:center !important;}
  .pie a, .pie span, .pie p{text-align:center !important;}   
  .borde-b > .row-fluid-wrapper > .row-fluid{display:grid !important;grid-template-columns: 1fr;}
  .borde-b .row-fluid > .contacto{order:2 !important;}
  .borde-b .row-fluid > .logo-footer{order:1 !important;}
  .logo-footer{
    text-align:center;
    margin: 20px 0;
  } 
  #hs_cos_wrapper_module_1714128220009546 .hs-social-follow{justify-content: center !important;}
}

@media (max-width: 575px) {
/*     .redes {    
    justify-content:center;
    margin-top:20px;
  } */

}


@media (max-width: 450px) {
  .pie .titulo p {
    font-size: 32px !important;
    line-height: 35px !important;
  }
}

@media (max-width: 1400px){
  h1{font-size: 65px !important;font-weight:700 !important;} 
  .cabecera h1{line-height: 65px !important;}
  .cabecera h1 span{font-size: 80px !important;}
}


@media (max-width: 992px) {
  .main, .main-g, .main-p, .estrecho{
     margin:0 auto !important;
     padding: 50px 20px;;
     float: none !important;
  } 
  
  .grid-2, .d-grid{grid-template-columns: 1fr !important; gap:30px !important; }
  .grid-2 > div:first-child{order:2}
  .grid-2 > div:last-child{order:1}

  h1{font-size: 50px !important;font-weight:700 !important;} 
  h2{font-size: 36px !important; } 
  h2.segundo{font-size:32px !important;  }
  h2.tercero{font-size:24px !important;}
  h3 {font-size:22px!important ;}
  .cabecera h1{line-height: 50px !important;}
  .cabecera h1 span{font-size: 70px !important;}
  .cabecera .menu .main .caja-menu a{ font-size:14px !important;}
  
  .iconos-valores{grid-template-columns: repeat(3, 1fr);}
  .iconos-valores .valor p{font-size: var(--f-2)}
  .iconos-valores .valor p span{font-size:30px!important ; font-weight:700 !important;}
  
 .splide__list .splide__slide {
    width: calc(48% - 10px) !important;
  }
   .carrusel .fondo {  
    opacity: 0.5;
  }
  #galeria li {
    min-height: 177px !important;
  }
  #hs_cos_wrapper_module_17696974757063043_{text-align:center;}
  .iconos-valores{
    display: flex !important; 
    gap:20px;
    justify-content: center;
    flex-wrap:wrap;
  }
  .iconos-valores > div{width: 30% !important;margin-bottom:;text-align:center;}
  .valor img{max-width:80px !important;margin-bottom:10px}
  .frase-banner h3{font-size: 40px !important;line-height: 1.1 !important;}
  .frase-banner h3{font-size: 40px !important;line-height: 1.1 !important;}
  .frase-banner span.f-especial {
    font-size: 80px !important;
    line-height: 0 !important;
  }
  
}
  

@media (max-width: 768px) {
  .loop-post-4col ul{
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-2-left{
    grid-template-columns: 1fr;
    gap:20px;
  }
  .tarjeta.icono-lateral {
    position: relative;
    margin-top: 0 !important;
  }
  .cabecera .menu{display:none !important;}
  .tarjeta.icono-lateral::before {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid rgb(var(--azul));
    left: inherit;
    top: -14px;
    transform: translateY(-50%);
    z-index: 0;
  }
  #guia{text-align:center !important;}
  #guia img{max-width:250px !important; }
    .grid-2-left-pq{ 
    display:grid !important;; 
    grid-template-columns:1fr;
    gap:30px !important;
  }

  #guia  h2{font-size: var(--h-5);text-align:center !important;margin-bottom:10px !important;margin-top:-40px !important;}
  #guia  h2 span.f-especial{color:#fff !important;font-size: 60px !important;}
  #guia .boton{ margin-top:30px !important;margin-bottom: 10px !important;}
  #guia p, #guia strong{  color: #fff !important;}
  #guia .hs_cos_wrapper_type_cta{justify-content: center !important;margin:20px 0 !important;}
  
  
  .loop-post-3col ul{grid-template-columns: repeat(2, 1fr);}
  .frase-banner{grid-template-columns: 1fr;}

  .frase-banner h3{font-size: 40px !important;line-height: 1.1 !important;}
  .frase-banner span.f-especial {
    font-size: 90px !important;
    line-height: 0 !important;
  }
  .header{width:100% !important;}
    .frase-banner span.f-especial {
    font-size: 70px !important;
    line-height: 0 !important;
  }
  .frase-banner .boton{margin-top:20px !important;}
  .medio p, .boton a{font-size: 15px !important;}
  .accordion-button span div{font-size: 20px !important;}
  .logo-footer img {
      text-align: right;
      margin: 15px 0;
  }
    .redes .hs-social-follow{
     justify-content: center !important;margin-top:10px;
  }
}

@media (max-width: 575px) {
.tarjeta.icono-lateral::before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(var(--azul));
    
  }
  .loop-post-3col ul {
        grid-template-columns: repeat(1, 1fr);
    }

  .frase-banner h3{font-size: 30px !important;line-height: 1.1 !important;}
  .frase-banner span.f-especial {
    font-size: 60px !important;
    line-height: 0 !important;
  }
  .subrayado.grande{font-size: var(--f-4) !important;}
  .redes .hs-social-follow{
     justify-content: center !important;
  }
  .accordion-body{padding: 6% !important;}
  .accordion-body .boton{margin-top:30px !important;}
  
  
}