@import url(normalize.css);
@import url('https://fonts.googleapis.com/css2?family=Quicksand');
@import url(fontello.css);
@import url(menu.css);

/*Comparador scroll*/
.comparador_scroll {
	position: sticky;
  top: 0;
  background-color: white;
}
.padding_1rem{
	padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
/*
formulario vehículo
*/
.responsive-form{
	max-width:600px ;
	margin:0 auto;
        width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
	.column-half{
		width: 50%;
	}
}

:root{
    /*Colores Fondos*/
    --FondoBlanco: #ffffff;
    --FondoAzul: #00247d;
    --FondoSeccionesGris: #e6e6e6;
    /*Color Fondo Cuadro Comparativo*/
    --FondoCuadroComparativo: #365299;
    --FondoCuadroPersonalizaSeleccion: #667cb1;
    /*Colores Letras*/
    --Titulos: #ffffff;
    /*Fuente Letras*/
    --fuenteprincipal: 'Quicksand', sans-serif;
    /*Colores de botones*/
    --FondoBotonAzul: #01164a;
    --FondoBotonComparar: #ff6600;

}
/**Globales**/
html {
  box-sizing: border-box;
  font-size: 62.5%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body{
    background-color: var(--FondoBlanco);
    font-size: 1.6rem;
    line-height: 1.5;
    font-family: var(--fuenteprincipal);
}


p{
    font-size: 1.8rem;
    font-family: var(--fuenteprincipal);

}
a{
    font-family: var(--fuenteprincipal);
    text-decoration: none;
}
img{
    max-width: 100%;
}
.contenedor{
    max-width: 125rem;
    margin: 0 auto;
    position: relative;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--fuenteprincipal) ;
}
h1{
    font-size: 4rem ;
    font-weight: bold ;
}
h2{
    font-size: 2.8rem ;
}
h3{
    font-size: 2.4rem ;
}
h4{
    font-weight: 100 ;
    font-size: 3rem ;
}
.centrar{
    text-align: center;
}
.derecha{
    text-align: right;
}
.separacion_botton{
    padding-bottom: 3rem;
}
.separacion_top{
    padding-top: 5rem;
}
.separacion_paddig{
    padding: 8rem;
}
.separacion{
    padding: 1rem;
}
.ocultar{
    display: none;
}
.letraazul{
    color: var(--FondoBotonAzul);
}
/*Botones*/
.botonazul{
    background-color: var(--FondoBotonAzul);
    color: var(--Titulos);
    padding: 1rem;
    border-radius: 0.5rem;
    width: 45%;
}
.botonazul:hover{
    transform:scale(1.1);
    transition: all .4s ease;
}
.botonazul a{
    color: white;
    text-decoration: none;
}
.botonazul_cuenta{
    text-align: center;
    background-color: var(--FondoBotonAzul);
    color: var(--Titulos);
    padding: 1rem;
    border-radius: 0.5rem;
    width: 20%;
}
.botonazul_cuenta a{
    color: white;
    text-decoration: none;
}
.botonazul_cuenta:hover{
    transform:scale(1.1);
    transition: all .4s ease;
}

/*Estilos Fondo Azul*/
.fondo_azul_titulos{
    text-align: center;
    background-color: var(--FondoBotonAzul);
    color: var(--Titulos);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Estilos Header*/

.estilos_header{
    position: relative;
    z-index: 5;
    color: var(--Titulos);
    background-color: var(--FondoAzul);
}
.estilos_header_navegacion{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*Estilos  Banner*/
.banner{
    position: relative;

}
.formulario_banner_3columnas{
    background-color: var(--FondoAzul);
    display: grid;
    grid-template-columns: 20% 20% 60%;
 }

.formulario_banner{
   position:relative;
   z-index: 3;
   top: 10%;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 3;
   color: var(--Titulos);
}
.fondo_azul_fuerte{
   padding-bottom: 2rem;
   padding-top: 2rem;
   background-color: var(--FondoBotonAzul);

}
.fondo_blanco{
   padding-left: 1rem;
   padding-top: 2rem;
   background-color: var(--FondoBlanco);
   color: var(--FondoAzul);
}

.formulario_banner_fondo{
   background-color: var(--FondoAzul);
   padding: 5rem;
   opacity:0.9;
}
.letrareponsive{
   font-size: 1.5rem;
}
.letra_responsive_compara{
    font-size: 2rem;
}
/*Estilos Seccion Forma de Encontrar tu Seguro*/
.fondo_gris{
    background-color: var(--FondoSeccionesGris);
}

.dos_columnas{
    padding: 1rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

 /*Estilos seccion conoce beneficios*/
 .cuatro_columnas_beneficios{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
/*Estilos seccion contacto*/
.contacto{
    padding-top: 5rem;
    background-color: var(--FondoAzul);
    color: var(--Titulos);
}
.dos_columnas_azul{
    padding: 1rem;
}

/*Estilos Formulario*/
form{
    width: 100%;
    box-sizing: border-box;
    border-radius: 7px;
}

select, input, textarea{
    width: 100%;
    margin-bottom: 15px;
    padding: 7px;
    box-sizing: border-box;
    font-size: 15px;
    font-family: var(--fuenteprincipal) ;


}
textarea{
    min-height: 100px;
    max-height: 200px;
    max-width: 100%;
}
.boton{
    font-size: 18px;
    cursor: pointer;
    width: 50%;
    color: white;
    border: white 1px solid;
    background-color:transparent;
}
.boton:hover{
    transform:scale(1.1);
    transition: all .4s ease;
    color: #989796;

}
/*Estilos Pagina Datos de Contratación*/
.dos_columnas_datosvehiculo{
    display: flex;
    justify-content:center;
    align-items: center;
    gap: 2rem;
}
.seccion_desplegable{
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding-bottom: 2rem;
}

.icon-down-open{
    cursor: pointer;
}

.fondo_blanco_datosvehiculo{
    padding: 2rem;
    background-color: var(--FondoBlanco);

}

/*Ocultar botones de seccion desplegables*/
#boton1, #boton2, #boton3{
    display: none;
}

.botonOculto{
    display: none;
}
/*Estilos pagina contratar*/

.dos_columnas_contratar{
    padding-top: 5rem;
    padding-bottom: 5rem;

}
.dos_columnas_contratar_comparar_dos_resultados{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
}

/*Estilos cuadros comparar*/
.cuadro_resultados{
    background-color: var(--FondoCuadroComparativo);
    color: var(--Titulos);
    padding: 1rem;

}

.boton_comparar_contratar{
    background-color: var(--FondoAzul);
    color: var(--Titulos);
    padding:0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
}

.boton_comparar_contratar:hover{
    background-color: var(--FondoBotonComparar);
    cursor: pointer;

}
.fondo_azul_personaliza{
    padding: 1rem;
    background-color: var(--FondoAzul);
}

.personaliza_tu_seleccion_dos_columnas{
    display: grid;
    grid-template-columns: 49% 48%;
    column-gap: 1.7rem;
    background-color: var(--FondoCuadroPersonalizaSeleccion);
    padding: 1.75rem;
}
.personaliza_tu_seleccion_una_columna{
    background-color: var(--FondoCuadroPersonalizaSeleccion);
}

/*Estilos Seccion comparar */
.cuatro_columnas{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.fondo_blanco_comparar{
    background-color: var(--FondoBlanco);
}
.fondo_blanco_loader{
    background-color: var(--FondoBlanco);
    text-align: center;
}

.fondo_azul_comparar{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    color: var(--Titulos);
    background-color: var(--FondoAzul);
}
.casilla_verificacion_comparar{
    margin-top: 2rem;
}
.boton_comparar_coberturas{
    background-color: var(--FondoBotonComparar);
    color: var(--Titulos);
    padding:0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    border: none;
}
.boton_comparar_coberturas:hover{
    background-color: var(--FondoAzul);
    cursor: pointer;

}

.boton_comparar_opciones{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5rem;
    color: var(--FondoAzul);
    background-color: var(--FondoBlanco);
    padding: 1rem;
    cursor: pointer;

}
.seccion_desplegable_comparativo{
    display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
}



@media (max-width:480px){


/*Estilos Formulario*/
form{
     width: 100%;
    }
}

@media (min-width:600px){
/*Estilos Formulario*/
form{
     width: 100%;
    }
}

@media (min-width: 768px){

/* Estilos Seccion Banner*/
.formulario_banner_fondo{
    background-color: var(--FondoAzul);
    display: grid;
    grid-template-columns: 70% 30%;
    column-gap: 2rem;
    padding: 5rem;
    opacity:0.9;
 }
 .boton{
    width: 30%;

}
.fondo_blanco{
    padding-top: 2rem;
    padding-left: 2rem;
 }

 .letrareponsive{
    font-size: 2.5rem;
 }
 .letra_responsive_compara{
    font-size: 2.8rem;
}

/*Estilos Contratar*/
.botonazul{
    width: 40%;
}
/*Estilos cuadros comparar*/
.cuadro_resultados{

    padding: 3rem;

}
/*Estilos seccion una nueva forma de encontrar tu seguro*/
.dos_columnas{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
}

.paddig_top_imagen{
    padding-top: 2rem;
}

/*Estilos seccion contacto*/
.dos_columnas_azul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5rem;
}

/*Botones*/



}

@media (min-width: 1024px){

/*Estilos globales*/

.botonazul_cuenta{
    text-align: center;
    background-color: var(--FondoBotonAzul);
    color: var(--Titulos);
    padding: 1rem;
    border-radius: 0.5rem;
    width: 10%;
}

.ocultar{
    display: block;
}
.separacion{
    padding: 0rem;
}
/*Estilos  Banner*/
.formulario_banner{
    position:absolute;
 }
 .fondo_blanco{
    padding-top: 4rem;


 }



 /*Estilos seccion conoce beneficios*/
.cuatro_columnas_beneficios{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/*Estilos Contratar*/
.botonazul{
    width: 23%;
}
.dos_columnas_contratar_cuadro{
    display: grid;
    grid-template-columns: 47% 50%;
    column-gap: 3rem;

}
.dos_columnas_contratar_comparar_dos_resultados{
    color: var(--FondoBotonAzul);
    display: grid;
    grid-template-columns: 49% 48%;
    column-gap: 1.7rem;
}

/*Estilos Formulario*/
form{
    width: 90%;
}
.imput40{
    width: 49%;
}
.imput40_formulario_cotizar{
    margin-left: 0.3rem;
    width: 49%;
}
.imput50{
    width: 50%;
}

.imput100{
    width: 100%;
}

/*Estilos Fondo Azul*/
.tamano{
    width: 40%;
    margin-left: 30%;
}

/*Estilos pagina contratar*/
.dos_columnas_contratar{
    display: grid;
    grid-template-columns: 20% 80%;
    column-gap: 2rem;

}
.cuatro_columnas{
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    padding-top: 5rem;

}
/*Estilos pagina resultado comparativo*/

.seccion_desplegable_comparativo{
    display: grid;
    grid-template-columns: 10% 80% 10%;
    column-gap: 1rem;
}

.tres_columnas_comparativo{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
}
.division_columnas_comparativo{
    border-right-style: ridge;
}

}

.hipervinculoIndex{
  color:blue;
  cursor: pointer;
}

.estiloElementos{
  /* margin-bottom: 15px;
  padding: 7px;
  box-sizing: border-box;
  font-size: 15px;
  font-family: var(--fuenteprincipal); */
}

.noPaddingTop{
  padding-top: 0rem;
}

.seccion_desplegable_comparativoSeparacion{
    display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
padding: 1rem;
}

.fondo_grisseparacion_paddig{
    background-color: var(--FondoSeccionesGris);
    padding: 8rem;
}

.contenedordos_columnas_azul{
  padding: 1rem;
  max-width: 125rem;
  margin: 0 auto;
  position: relative;
}

.separacion_bottom0{
  padding-bottom: 1px;
  padding-top: 17px;
}
.swal-wide{
    width:42em !important;
}