@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
* {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/*@media (min-width: 800px) {*/
*::-webkit-scrollbar {
		width: .5em;
		height: .5em;
	}
*::-webkit-scrollbar-track {
    /*box-shadow: inset 0 0 4px rgba(0,0,0,0.3); */
    box-shadow: none;
    background-color: var(--g200);
    border-radius: 0.375em;
    /*background-color:rgba(177,177,177,1.00);*/
}

*::-webkit-scrollbar-thumb {
   /* box-shadow: inset 0 0 4px rgba(0,0,0,0.5); */
    border-radius: 0.375em;
    background: var(--a100);
}
/*}*/
html {    
        /* Color styles */
    --g600: rgba(65, 65, 62, 1);
    --g500: rgba(91, 91, 87, 1);
    --g400: rgba(117, 117, 112, 1);
    --g300: rgba(168, 168, 164, 1);
    --g200: rgba(224, 224, 223, 1);
    --g100: rgba(242, 242, 242, 1);
    --g000: rgba(250, 250, 250, 1);
    --a600: rgba(12, 17, 28, 1);
    --a500: rgba(16, 34, 61, 1);
    --a400: rgba(24, 50, 97, 1);
    --a300: rgba(40, 80, 140, 1);
    --a200: rgba(83, 134, 193, 1);
    --a100: rgba(164, 199, 234, 1);
    --a0: rgba(223,235,246,1.00);
    
    /*Mios*/
    --blanco: rgba(250,252,254,1.00);
        
    /* Text-size styles */
    /* base size: l-p (16px) */
    --l-display: 4.75rem;
    --l-h1: 4rem;
    --l-h2: 3rem;
    --l-h3: 2.75rem;
    --l-h4: 2.25rem;
    --l-h5: 1.75rem;
    --l-h5light: 1.75rem;
    --l-subheader: 1.5rem;
    --l-p-big: 1.25rem;
    --l-p: 1rem;
    --l-caption: 0.88rem;
    --l-link: 1rem;
    --l-lang: 1rem;
    --l-button: 1.31rem;
    --s-display: 2.75rem;
    --s-h1: 2.5rem;
    --ss-h1: 2.25rem;
    --s-h2: 2.25rem;
    --s-h3: 2rem;
    --s-h4: 1.5rem;
    --s-h5: 1.25rem;
    --s-h5light: 1.25rem;
    --s-p: 1rem;
    --s-caption: 0.675rem;
    --ss-h1: 2.25rem;

    /* Effect styles */
    --s01:  2px 6px 32px rgba(22, 30, 50, 0.05);

    --radio-g: 12px;
    --radio-m: 8px;
    --radio-p: 4px;   
    --rellenohorizontal: 1rem;
    --rellenohorizontalfijo: 1rem;
    --rellenohorizontalmediano: 2rem;
    --rellenohorizontalgrande: 4rem;
    
    --margenhorizontal: 1.25rem;
    --rellenovertical: 1rem;
    --rellenoverticalmediano: 3rem;
    --rellenoverticalgrande: 6rem;
    --margenvertical: 1rem;
    --fondoventanasflotantes: rgba(243,244,249,.9);
    --separacionsecciones: 3rem;
    
    --separacionsubsecciones: 1rem;
    
    --fondoclaro: linear-gradient(-72.297deg, #28508C 0%, #5386C1 58%, #E0E0DF 100%);
    --fondooscuroarriba: linear-gradient(-15.432deg, #9CB4CE 0%, #28508C 50%, #0C111C 100%);
    --fondooscuroabajo: linear-gradient(146.596deg, #9CB4CE 0%, #28508C 50%, #0C111C 100%);
}
body {
    opacity: 0;
    transition: opacity .5s ease-in 0s;
	display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 380px;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    background-color: var(--g000);
    color: var(--g600);
}
main {
    margin-left: var(--margenhorizontal);
    margin-right: var(--margenhorizontal);
    padding-bottom: var(--rellenoverticalgrande);
    display: flex;
    flex-direction: column;
    flex-grow: 1;        
}
main > * {
    border-radius: var(--radio-m);
}
#contenedorprincipal {
    flex-grow: 1;
}

.caja  {    
    padding-left: var(--rellenohorizontalgrande);
    padding-right: var(--rellenohorizontalgrande);
    padding-top: var(--rellenoverticalmediano);
    padding-bottom: var(--rellenoverticalmediano);
    border-radius: var(--radio-p);
    line-height: 1.6;
}
.caja > p:last-of-type {
    margin-bottom: 0px;
}


.caja.gris {
    background-color: var(--g200);
}
.caja.gris h2 {
    color: var(--a200)
}
.caja.grisclara {
    background-color: var(--g100);
}
.caja.gris h2 {
    color: var(--a200);
}
.caja.gris p {
    color: var(--g600);
}
.caja.blanca {
    background-color: var(--g000)
}
.caja.azularriba {
    background: var(--fondooscuroarriba);
     color: var(--g100);
}
.caja.azulabajo {
    background: var(--fondooscuroabajo);
    color: var(--g100);
}
.radiogrande {
    border-radius: var(--radio-l);
}
.radiomediano {
    border-radius: var(--radio-m);
}
.radiopequeno {
    border-radius: var(--radio-s);
}

.gradienteoscuroabajo{
    background: var(--fondooscurabajo);
}
.gradienteoscuroarriba {
    background: var(--fondooscuroarriba);
}
.gradienteclaro {
    background: var(--fondoclaro);
}
.sombra1 {
    box-shadow: var(--s01);
}
h1,h2,h3,h4,h5,h6 {
    margin: 0px;
}
.contenidosdinamicos h2, .contenidosdinamicos h3, .contenidosdinamicos h4, .contenidosdinamicos h5, .contenidosdinamicos h6 {
    margin-top: .5em;
    margin-bottom: .5em;
}

.contenidosdinamicos img {
    border-radius: var(--radio-p);
}
.display {
    font-size: var(--l-display);
    letter-spacing: -6%;
    line-height: 1.1;
    font-weight: 400;
}

.h1, h1 {
    font-size: var(--l-h1);
    letter-spacing: -1px;
    line-height: 1;
    font-weight: 400;
    margin: 0px;
}

.h2, h2 {
    font-size: var(--l-h2);
    letter-spacing: -1px;
    line-height: 1;
    font-weight: 400;
    margin: 0px;
}

.h3, h3 {
    font-size: var(--l-h3);
    letter-spacing: -1px;
    line-height: 1;
    font-weight: 400;
    margin: 0px;
}

.h4, h4 {
    font-size: var(--l-h4);
    letter-spacing: -2%;
    line-height: 1;
    font-weight: 400;
    margin: 0px;
}

.h5, h5 {
    font-size: var(--l-h5);
    letter-spacing: -2%;
    line-height: 1;
    font-weight: 400;
    margin: 0px;
}

.h5-light {
    font-size: var(--s-h5light);
    letter-spacing: -2%;
    line-height: 1;
    font-weight: 300;
    margin: 0px;
}

.subheader, h6 {
    font-size: var(--s-h6);
    letter-spacing: -2%;
    line-height: 1.4;
    font-weight: 300;
    margin: 0px;
}

.p-big {
    font-size: var(--l-p-big);
    letter-spacing: -2%;
    line-height: 1.3;
    font-weight: 300;
    margin: 0px;
}

.p, p {
    font-size: var(--l-p);
    letter-spacing: -2%;
    line-height: 1.4;
    font-weight: 300;
}

.caption {
    font-size: var(--l-caption);
    letter-spacing: -2%;
    line-height: 1.2;
    font-weight: 400;
}

.link, a {
    font-size: var(--l-link);
    letter-spacing: -2%;
    font-weight: 300;
}

.lang {
    /*Es el estilo a aplicar en encabezado css al contenedor de los idiomas*/
    font-size: var(--l-lang);
    letter-spacing: -2%;
    line-height: 1rem;
    font-weight: 600;
}


/* Estilos S */
.display-s {
    font-size: var(--s-display);
    letter-spacing: -6%;
    line-height: 6.875rem;
    font-weight: 400;
}

#cargaprevia {
	display: none;
}


.centrador {
	text-align: center;
}
.aladerecha {
	text-align: right;
}
.alaizquierda {
	text-align: left;
}

a {
    color: var(--negro);
    text-decoration: none;
}

#capamarco,#capamarco1 {
	z-index: 150;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--fondoventanasflotantes);
	transition: transform .2s ease-in 0s,opacity .2s ease-in 0s;
	opacity:0;
    transform: scale(0);
	background-image:url("../imagenes/loading.svg");
	background-attachment: fixed;
	background-position: center center;
	background-repeat:no-repeat;
    background-size: 4em auto;
}
#capamarco.abierta, #capamarco1.abierta {
    opacity: 1;
    transform: scale(1);
}
.capasmarco {
	width: 100%;
	height: 0px;
	-webkit-transition: height 1s ease-in 0s;
	transition: height 1s ease-in 0s;
	background-image:url(../imagenes/procesando.gif);
	background-position: center center;
	background-repeat: no-repeat
}
.capasmarco iframe {
	overflow: hidden;
}
#capamarco iframe, .capasmarco iframe {
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: none;
	padding: 0px;
	margin: 0px;
	ssssoverflow: hidden;
}
/*ventana de avisos*/
#ventanaavisos, #ventanaaceptar, #ventanaformularioflotante, #ventanacomocomprar {
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: var(--fondoventanasflotantes);
	width: 100%;
	height: 100%;
	color: var(--negro);
	z-index: 152;
	transition: transform .2s ease-in 0s,opacity .2s ease-in 0s;
	opacity:0;
    transform: scale(0);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#ventanaavisos h2, #ventanaaceptar h2,#ventanacomocomprar {
    color: var(--a300);
}
#ventanaavisos div, #ventanaaceptar div, #ventanacomocomprar div {
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	padding: 1em;
}
#ventanaavisos div p, #ventanaaceptar div p, #ventanacomocomprar div p{
    font-size: 1.25em;
}
#ventanacomocomprar div p:not(:first-of-type) {
    margin-top: 0px;
}
#ventanaformularioflotante {
    z-index: 150;
}
#ventanaavisos.abierta, #ventanaaceptar.abierta, #ventanaformularioflotante.abierta, #ventanacomocomprar.abierta {
    opacity: 1;
    transform: scale(1);
}

#ventanaavisos table, #ventanaavisos td, #ventanaaceptar table, #ventanaaceptar td {
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}
#ventanaaceptar td h2, #ventanaavisos td h2 {
	text-align: center;
	color: black;;
}
#hablemos {
    position: fixed;
    right: calc(var(--margenhorizontal) + var(--rellenohorizontal) - 1rem);
    bottom: 5.5rem;
    z-index: 30;
    font-size: .875em;
}
#ventanaformularioflotante, #ventanacomocomprar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    margin: 0px;
    color: var(--g100);
}
   
#ventanaformularioflotante h2 {
    margin: 0px;
    font-size: var(--l-h3);
    line-height: 1.2;
    letter-spacing: -.02em;
}
#ventanaformularioflotante form, #ventanacomocomprar > div {
    width: 100%;
    max-width: 700px;
    background: var(--fondooscuroarriba);
    padding: 2rem 2rem 1rem 2rem;
    border-radius: var(--radio-m);
    display: flex;
    flex-direction: column;
}
#ventanaformularioflotante form p:last-of-type, #formulariocontacto p:last-of-type, #ventanacomocomprar > div p:last-of-type {
    margin-bottom: 0px;
    text-align: right
}

#ventanaformularioflotante  p{
    margin-bottom: 0px;
}
#ventanaformularioflotante input:not(.nocrecer), #ventanaformularioflotante textarea, #formulariocontacto input:not(.nocrecer), #formulariocontacto textarea {
    padding: .5em 1em;
    width: 100%;
}
#ventanaformularioflotante input, #ventanaformularioflotante textarea, #formulariocontacto input, #formulariocontacto textarea {
    border-radius: var(--radio-p);
    border: none;
    box-shadow: none;
}
#ventanaformularioflotante #parrafocontrol, #formulariocontacto #parrafocontrol {
    display: flex;
    align-items: center;
}

#ventanaformularioflotante .parrafoavisoslegales, #ventanaformularioflotante .teclee, #formulariocontacto .parrafoavisoslegales, #formulariocontacto .teclee {
    font-size: var(--links);
}
#ventanaformularioflotante form p:last-of-type button, #formulariocontacto form p:last-of-type button {
    margin-bottom: 1rem;
    font-size: 1.125rem;
}
#ventanaformularioflotante form a, #formulariocontacto form a {
    text-decoration: underline;
}
#ventanaformularioflotante .dcontrol, #formulariocontacto .dcontrol {
    background-color: var(--blanco);
    border-radius: var(--radio-p);
    padding: 0px .25rem;
    margin-right: .5em;
    height: 1.5em;
    width: auto;
    background-color: var(--a100);
}
#cancelarformularioflotante, #cancelarformulariocontacto {
    margin-right: .5rem;
}
strong, strong a, .negrita {
	font-weight: 500;	
}
.boton1, .boton2, .boton3, .boton4  {
    display: inline-block;
    width: auto;    
    line-height: 1;
    padding: .2875em .75em;
    font-size: var(--l-button);
    color: var(--a400);
    background-color: var(--g100);
    border: 2px solid var(--a200);
    transition: all .1s ease-out 0s;
    border-radius: var(--radio-s);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radio-p);
    text-align: center;
}  
.boton1.pequeno, .boton2.pequeno, .boton3.pequeno, .boton4.pequeno  {
    font-size: 1rem;
    border-width: 1.5px;
    font-weight: 400;
}
.boton1:hover {
    color: var(--g000);
    background-color: var(--a200);
    border-color:  var(--a100);
}

.boton2 {
    color: var(--g000);
    background-color: var(--a200);
    border-color: var(--a100);
}
.boton2:hover {
     color: var(--a400);
    background-color: var(--g100);
    border-color:  var(--a200);
}
.boton1.pequeno:hover, .boton2.pequeno.hover {
    border-width: 1px;
}

.contenedoraperturavertical {
	height: 0px;
	overflow: hidden;
	transition: height .3s ease-in 0.1s;
    transition
}
.contenedoraperturavertical > * {
    overflow: hidden;
}
.contenedorprincipaldeslizador {
	position: relative;
	margin-top: 3.5em;
}
.botonesdeslizador {
    position:absolute;
    bottom: calc(100% + 4px);
    right: 1em;   
    z-index: 4;
}
.botonesdeslizador img {
    height: 2.5em;
    width: auto;
    cursor: pointer;
    border-radius: 50%;
    transition: transform .1s ease-in 0s;
}
.botonesdeslizador img:last-of-type {
    margin-left: 1em;
    transform: rotateZ(180deg);
}
.botonesdeslizador img:first-of-type:hover {
    transform: translateX(-25%);
}
.botonesdeslizador img:last-of-type:hover {
    transform: translateX(25%) rotateZ(180deg);;
}
/* traido de las paginas*/

#texto1 {
    width: 70%;
    font-size: var(--l-p-big);
    line-height: 1.3;
}

.animado {
}
.prueba1 {
    opacity: 0;
    transform: translateY(1em);
}
.prueba1.dentro {
    opacity: 1;
    transform: translateY(0px);
}
.prueba2 {
    opacity: 0;
    transform: translateY(1em);
    transition: opacity .8s ease-in 0s;
}
.prueba2.dentro {
    opacity: 1;
    transform: translateY(0px);
}
/*
.entradalateralizquierda {
    transform: translateX(-130%);
    transition: transform .6s ease-in 0s;;
}
.entradalateralderecha {
    transform: translateX(130%);
    transition: transform .6s ease-in 0s;;
}
.entradalateralizquierda.dentro, .entradalateralderecha.dentro {
    transform: translateX(0px);
}

.entrardelcentro{
    transform: scale(0);
    transition: transform .4s ease-in 0s;;
}
.entrardelcentro.dentro {
    transform: scale(1);
}
.entrardearriba {
    transform: translateY(-130%);
    transition: transform .4s ease-in 0s;;
}
.entrardearriba.dentro {
    transform: translateY(0px);
}
.entrada1 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.entrada1.dentro {
    opacity: 1;
    transform: translateY(0);
}

.entrada2 {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.entrada2.dentro {
    opacity: 1;
    transform: scale(1);
}

.entrada3 {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.entrada3.dentro {
    opacity: 1;
    transform: translateX(0);
}
*/
#contenedorsuperior {
    background-size: cover;
    background-position: left top;
    border-radius: var(--radio-m);
    color: var(--g100);
    padding: var(--rellenoverticalgrande) var(--rellenohorizontal) calc(var(--rellenohorizontalgrande) * 2.5 ) var(--rellenohorizontalgrande);
    
}
#cuerpo #contenedorsuperior h1 {
    padding-right: 30%;
       
}
#cuerpo #textocontenedorsuperior {
    margin: var(--separacionsubsecciones) 0px var(--separacionsecciones) 0px;
    
}

.cajacentradagrande, #contenedorconfian  {
        padding: var(--rellenohorizontal) var(--rellenohorizontal);
    }
#contenedorconfian {
    margin-top: var(--separacionsecciones);
    padding: var(--rellenohorizontalgrande) calc(var(--rellenohorizontalgrande) * 1.5);    
}

#contenedorconfian h2 {
    color: var(--a200);
    margin-bottom: 1.5rem;
    text-align: center;
}
#contenedorconfian > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.cajacentradagrande {
    padding: var(--rellenohorizontalgrande) calc(var(--rellenohorizontalgrande) * 4);
    text-align: center;
    margin-top: var(--separacionsecciones);
}
.cajacentradagrande.fondoblanco {
    background-color: var(--g100);
}

.cajacentradagrande.fondoblanco {
    color: var(--a200);
}
.cajacentradagrande p {
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
}
.cajacentradagrande > h2:first-child {
    margin-top: 1.25rem;
}
.cajacentradagrande.fondoblanco p {
    color: var(--a600);
    font-weight: 500;
}
input, textarea {
    color: var(--g600);
    border-radius: var(--radio-p);
    background-color: var(--g000);
}
input:placeholder, textarea:placeholder {
    color: var(g300);
}
@media (min-width: 1600px) {
    html {
        --rellenohorizontal: calc((100vw - 1440px) / 8);
        --margenhorizontal: calc((100vw - 1440px) / 8 * 3)
    }
}

@media (max-width: 1200px) {
    #cuerpo #contenedorsuperior h1 {
        padding-right: 0px;

    }
}

@media (max-width: 1000px) {
    html {
        --l-button: 1.15rem;
    }
    #cuerpo #contenedorsuperior h1 {
        padding-right: 20%;
        font-size: var(--l-h2);

    }
    .display {
        font-size: var(--s-display);
    }
    .h1, h1 {
        font-size: var(--s-h1);
    }
    .h2, h2 {
        font-size: var(--s-h2);
    }
    .h3, h3 {
        font-size: var(--s-h3);
    }
    .h4, h4 {
        font-size: var(--s-h4);
    }
    .h5, h5 {
        font-size: var(--s-h5);
    }
    .subheader, h6 {
        font-size: var(--s-h6);
    }
    .caption {
        font-size: var(--s-caption);
    }
    .link, a {
        font-size: var(--s-link);
        letter-spacing: -2%;
        font-weight: 300;
    } 
    .cajacentradagrande {
        padding: var(--rellenohorizontalgrande) calc(var(--rellenohorizontalgrande) * 2);
    }
    .boton1, .boton2, .boton3, .boton4  {
        font-size:
}
@media (max-width: 800px) {
    html {                
        --l-subheader: 1.25rem;
        --rellenohorizontal: 1.5rem;
        --margenhorizontal: 1rem;
        --rellenovertical: 2rem;
        --margenvertical: 1rem;
    }    
    #ventanaformularioflotante,#ventanaformularioflotante form {
        padding: 1rem 1rem 0px 1rem;;
    }
    #contenedorsuperior {
        padding-left: var(--rellenohorizontal);
    }
    #contenedorrecambios, #contenedorhablemos, #contenedorconfian {
        padding: var(--rellenohorizontalgrande) calc(var(--rellenohorizontalgrande));
    }
    #contenedorconfian {
        padding: var(--rellenohorizontalgrande) var(--rellenohorizontalmediano);    
    }
    #cuerpo #contenedorconfian p {
        padding-left: 0px;
        padding-right: 0px;
    }
   
    
}
@media (max-width: 600px) {
    html {
        --rellenohorizontal: 1rem;
        --margenhorizontal: .5rem;
        --rellenoverticalgrande: 4rem;
    }
    #cuerpo #contenedorsuperior {
        padding-bottom: calc(var(--rellenohorizontalgrande) * 1.5 )
    }
    #cuerpo #contenedorsuperior h1 {
        padding-right: 20%;
        font-size: var(--s-h2);

    }
    #cuerpo #textocontenedorsuperior {
        font-weight: 300;
    }
    
   /* .h1, h1 {
        font-size: var(--s-h1);
    }*/
    .caja  {    
        padding-left: calc(var(--rellenohorizontalgrande) / 2);
        padding-right: calc(var(--rellenohorizontalgrande) / 2);
        padding-top: calc(var(--rellenoverticalmediano) / 3 * 2);
        padding-bottom: calc(var(--rellenoverticalmediano) / 3 * 2);
    }
    #cuerpo #contenedorconfian {
        padding-left: 0px;
        padding-right: 0px;
    }
    .cajacentradagrande.fondoblanco p {
        font-weight: 400;
    }
}