@font-face {
    font-family: Nunito;
    src: url(/TarificadorWeb/FUENTES/Nunito/nunito-regular-webfont.eot;);
    src: url(/TarificadorWeb/FUENTES/Nunito/nunito-regular-webfont.eot?#iefix) format("embedded-opentype"), url(/TarificadorWeb/FUENTES/Nunito/nunito-regular-webfont.woff2) format("woff2"),
        url(/TarificadorWeb/FUENTES/Nunito/nunito-regular-webfont.woff) format("woff"), url(/TarificadorWeb/FUENTES/Nunito/nunito-regular-webfont.ttf) format("truetype"),
        url(/TarificadorWeb/FUENTES/Nunito/nunito-regular-webfont.svg#nunitoregular) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Nunito Bold";
    src: url(/TarificadorWeb/FUENTES/Nunito/nunito-semibold-webfont.eot);
    src: url(/TarificadorWeb/FUENTES/Nunito/nunito-semibold-webfont.eot?#iefix) format("embedded-opentype"), url(/TarificadorWeb/FUENTES/Nunito/nunito-semibold-webfont.woff2) format("woff2"),
        url(/TarificadorWeb/FUENTES/Nunito/nunito-semibold-webfont.woff) format("woff"), url(/TarificadorWeb/FUENTES/Nunito/nunito-semibold-webfont.ttf) format("truetype"),
        url(/TarificadorWeb/FUENTES/Nunito/nunito-semibold-webfont.svg#nunitosemibold) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
    --azul: #1e5799;
    --verde: #26c426;
    --azulc: #daebff;
   }

img{height: auto}
.fa-classic, .fa-regular, .fa-solid, .far, .fas {
    font-family: "Font Awesome 6 Free" !important;
}
p{font-size:1.1rem}
a {text-decoration: none;}
header {padding: 10px 0; background: #ffffff;}
.hr_azul {
    position: absolute;
    left: 50%;
    margin-left: -25px;
    top: 100px;
    height: 4px;
    width: 50px;
    border-radius: 5px;
    background: #1e5799;
    content: "";
}
.azul_oscuro{color:var(--azul)}
.verde{color:var(--verde)}
footer {background: #1e5799; padding: 30px;}

div#viewport{height:90vh}

	.btn-danger{background-color:var(--azul)}
	.btn-danger:hover{border-color:var(--azul); background-color:#fff !important; color:var(--azul) !important; font-weight:bold}
	.btn-info{background-color:var(--verde); color:#fff; border:1px solid var(--verde);}
	.btn-info:hover{background-color:var(--azulc) !important; color:var(--azul) !important; font-weight:bold; border:1px solid var(--azulc) !important}
	header .btn{background:var(--azulc); border:none; color:var(--azul); font-weight: bold; margin:auto; display:block; width:100%}
	header .btn:hover{border-color:none; background-color:var(--verde) !important; color:#fff !important}
	.btn{border-radius:20px}
	.carousel-inner {padding-bottom: 15px;}
	footer > div > div{display:flex; justify-content:center; align-items:center}


/*-----------------------------------BANNER PRINCIPAL-----------------------------------------------------------*/
#hero {
    width: 100%;
    height: 70vh;
    background: var(--verde);
    position: relative;
    padding:100px 0px 200px;
}
#hero h1 {font-size: 7vh; color: #ffffff; position: relative;}
#hero h1:before {
    position: absolute;
    left: 50%;
    margin-left: -25px;
    bottom: -15px;
    height: 4px;
    width: 50px;
    border-radius: 5px;
    background: #ffffff;
    content: "";
    }
#hero .wave {
    width: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    bottom: -150px;

}
#hero p {font-size: 28px; color: #ffffff;}
#hero .btn-danger {font-size: 25px; width: 60%; padding: 15px; border: 1px solid #ffffff; line-height:110% }

#hero div.container{position:absolute; right:0; left:0; margin:auto; z-index: 1}
	img.adorno-banner{width: 100%; opacity:0.3; position:absolute; bottom:0; z-index: 0}







/*-----------------------------------FIN BANNER PRINCIPAL-----------------------------------------------------------*/
.ventajasComparador {
    position: relative;
    z-index: 1;
    height:20vh;
    display:flex;
    align-items:center;
    margin-top:-30px
    
    }
.ventajasComparador h2 {
    text-align: left;
    width: calc(85% - 50px);
    display: inline-block;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 24px;
    padding-left: 5px;
    color: var(--azul);
    }
.icon {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--azulc);
    border-radius: 50px;
    position:relative

}
.icon i {
    font-size: 50px;
    position:absolute;
    top:-10px;
    left:-10px;

    color: var(--verde);
}





/*=============================
    Carrusel Aseguradoras
===============================*/
.carrusel-aseguradoras {background: #daebff;}
.carrusel-aseguradoras img {
    width: 165px;
    margin: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    padding: 15px;}
.carrusel-aseguradoras .carousel-indicators {top: 140px;}
.carrusel-aseguradoras .carousel-indicators [data-bs-target] {background-color: #033d5b !important;}
.carousel-control-prev-icon {background-image: none;}
@media (max-width: 575px) {
.carrusel-aseguradoras .carousel-indicators {top: 110%;}
.carrusel-aseguradoras img {width: 120px; padding:8px}
}

@media (min-width: 576px) and (max-width: 767px) {
.carrusel-aseguradoras .carousel-indicators {top: 250px;}
}

@media (min-width: 768px) and (max-width: 991px) {
.carrusel-aseguradoras h2 {
    padding: 10px 20px;
}
.carrusel-aseguradoras .carousel-indicators {top: 295px;}

}

@media (min-width: 992px) and (max-width: 1199px) {
  .carrusel-aseguradoras .carousel-indicators {top: 295px;}
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services {background: #ffffff;}
.services .icon-box {
  margin-bottom: 20px;
  padding: 30px;
  border-radius: 6px;

  height: 90%;
}

.services .icon-box h4, .services .icon-box h3 {
  margin-left: 70px;
  font-weight: 700;
  font-size: 23px;
}
.services .icon-box h4 a, .services .icon-box h3 a {
  color: #fff;
}
.services .icon-box .icon-box:hover h4 a, .services .icon-box .icon-box:hover h3 a {
  color: #e03a3c;
}
.services .icon-box p {
  margin-left: 70px;
  line-height: 24px;
  font-size: 18px;
}

hr{margin: 30px auto 0px;
    height: 4px;
    width: 100px;
    border-radius: 5px;
    background: var(--azulc);opacity:1; border:none
    }


/*--------------------------------------------------------------
# Productos
--------------------------------------------------------------*/
.tipoProducto {height: 100%; border: 1px solid var(--azulc); padding: 10px; position:relative}
.tipoProducto .btn{position:absolute; margin:auto; left:0; right:0; max-width:240px; padding: 10px; bottom:-25px; font-size: 18px;}
.tipoProducto img{margin-bottom:10px}
.tipoProducto .btn-danger {font-size: 18px; padding: 15px; width: 100%;}
.productos h3 {font-size: 27px;font-weight: bold;color:var(--azul)}
.btn{line-height:110%}
.cta-productos .btn{font-size: 25px;
    width: 60%;
    max-width:500px;
    padding: 15px;
    line-height: 110%;
    min-width: 250px;}






/*--------------------------------------------------------------
# Cortes generales
--------------------------------------------------------------*/

@media only screen and (max-width: 575px) {
	header{padding:0px}
	#hero{height:70vh;min-height: 250px; overflow:hidden; padding:40px 0px 100px}
	#hero h1{font-size:2rem}
	#hero p{font-size:1.5rem}
	.container{max-width:96%}
	.ventajasComparador h2{font-size:19px}
	.productos h3{font-size:21px}
	div.encabezado_llamada{display:none}
	.ventajasComparador > div{width: 90%; margin:auto; overflow-x:hidden; padding-top:15px}
	.ventajasComparador > div > div{margin-bottom:30px}
	.ventajasComparador > div > div:nth-child(2){margin-left:45px}
	.icon{width: 50px; height: 50px;}
	.icon i{font-size:40px}
	.tipoProducto{height:auto; margin-bottom:45px}
	section#services{display:none}
	img.adorno-banner{width:1000px; right:-75px}
	.ventajasComparador{margin-top:-75px}
	#hero .btn-danger{width:85%}
	div#viewport {height: 100vh;}

}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	
	#hero{height:55vh;min-height: 300px; padding:60px 0px 100px}
	#hero h1{font-size:2.5rem}
	#hero p{font-size:1.6rem}
	.container{max-width:96%}
	.ventajasComparador h2{font-size:20px}
	.productos h3{font-size:23px}
	.ventajasComparador > div{width: 90%; margin: auto;}
	.ventajasComparador > div > div{margin-bottom:20px}
	.ventajasComparador > div > div:nth-child(2){margin-bottom:15px; margin-left:45px}
	.icon{width: 55px; height: 55px;}
	.icon i{font-size:45px}
	.tipoProducto{padding: 10px}
	img.adorno-banner{width:1000px; right:0px}
	.services .icon-box {padding: 15px; margin-bottom:0px}
	.carrusel-aseguradoras img {width: 150px;}

}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	#hero{height:65vh; min-height: 350px; padding:80px 0px 100px}
	#hero h1{font-size:3rem}
	#hero p{font-size:1.7rem}
	.container{max-width:96%}
	.ventajasComparador h2{font-size:22px}
	.productos h3{font-size:25px}
	.services .icon-box {padding: 20px;}

}
@media only screen and (min-width: 992px) {
	
	#hero{min-height: 400px}

}



/************ LLAMADA LATERAL **************************************/

.llamada-gratis-fixed {
    width: 100px;
    height: 100px;
    position: fixed;
    background-color: #ff5400;
    right: -200px;
    bottom: 10%;
    padding: 15px;
    z-index: 999;
    box-shadow: -5px 5px 7px rgb(0 0 0 / 20%);
    -webkit-box-shadow: -5px 5px 7px rgb(0 0 0 / 20%);
    -moz-box-shadow: -5px 5px 7px rgba(0,0,0,.2);
    overflow: hidden;
    border-radius: 50%;
}

.llamada-gratis-fixed img.icono_movil {
    cursor: pointer;
    width: 70px;
    max-width: 70px;
    padding: 0;
    margin-bottom: 15px;
}



button#btn-llamada{background-color:transparent; padding:0px; line-height:0px; border:none; position:absolute}
.llamada-gratis-fixed{
  animation-name: llamadafixed;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  }
  .llamada-gratis-fixed i{font-size:65px}
  
  div.protecciondatos_llamadagratis{display:flex; flex-wrap:wrap; align-items: start;}
  div.protecciondatos_llamadagratis small{width:80%; margin:0px 5%;}
  div.protecciondatos_llamadagratis p{font-size:11px !important}
  div.protecciondatos_llamadagratis > div{width:100%}
  div.protecciondatos_llamadagratis input#protecciondatos{margin-top:25px !important}
  
  img.icono_movil {
    -webkit-animation: tiembla 2s infinite;
}
@-webkit-keyframes tiembla {
    0% {
        -webkit-transform: rotate(0);
    }
    70% {
        -webkit-transform: rotate(0);
    }
    73% {
        -webkit-transform: rotate(6deg) scale(1.1);
    }
    76% {
        -webkit-transform: rotate(-6deg) scale(1.1);
    }
    79% {
        -webkit-transform: rotate(6deg) scale(1.1);
    }
    82% {
        -webkit-transform: rotate(-6deg) scale(1.1);
    }
    85% {
        -webkit-transform: rotate(6deg) scale(1.1);
    }
    88% {
        -webkit-transform: rotate(-6deg) scale(1.1);
    }
    91% {
        -webkit-transform: rotate(6deg) scale(1.1);
    }
    94% {
        -webkit-transform: rotate(-6deg) scale(1.1);
    }
    97% {
        -webkit-transform: rotate(6deg) scale(1.1);
    }
    100% {
        -webkit-transform: rotate(-6deg) scale(1.1);
    }
}
  
  @keyframes llamadafixed {
  from {right:-100px;}
  to {right:50px;}
}
.llamada-gratis-fixed{right;50px}

	.modal-footer{position:relative}
	.modal-footer div.cubrecaptcha{position: absolute;
    width: 100%;
    height: 80px;
    top: 85px;
    left: -4px;
    background-color: transparent;}
    
    
 /************ MODAL LLAMADA LATERAL **************************************/   
    
  .modal-body  p.llamada_grande{font-size:21px; margin-bottom:0px}
  .modal-body  p.llamada_grande a{font-size:32px; font-weight:bold}
  .modal-body hr{margin: 15px auto;}
  form#presupuesto{width: 100% !important;
    max-width: 600px;
    margin: -15px auto 0px !important;
    padding: 0px !important;
    background-color: #fff !important;}
    form#presupuesto #solicitante {background-color: transparent !important;}
    form#presupuesto legend{background-color:var(--azul) !important}
    #idnombre, #idtel, #idhorario {border:1px solid var(--verde) !important; border-bottom:1px solid var(--verde) !important; }
    #presupuesto .enviar{background-color:var(--verde) !important; border-bottom:none !important}
    form#presupuesto input.enviar{margin:15px auto !important}
    form#presupuesto label{text-align:left !important}