@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;450;500;550;600;650;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


html {
    font-size: 1rem;
    --margen: 2rem;
    --margendoble: 4rem;
    --colornegro: black;
    --colorgris: #CCCCCC;
    --colorblanco: white;
    /*Secciones y post, y post del home y encabezado del home el margen el de 11,345vw*/
    --ui100: #DFDEDB;
    --morado200: #CAC6E5;
    --morado300: #9D96CF;
    --morado400: rgba(124,115,191,1.00);
    --morado400al60: rgba(124,115,191,.6);
    --morado400al80: rgba(124,115,191,.9);
    --morado500: #5C50AF;
    --morado500transparencia: rgba(92,80,175,.5);
    --morado600: #49408C;
    --morado600al80: rgba(73,64,140,.8);
    --casiblanco: #F8F8F7;
    --degradopiemovil: radial-gradient(147.98% 53.37% at 57.07% 75.62%, #9D96CF 0%, #F8F8F9 70.15%);
    --degradopie: radial-gradient(85.5% 91.26% at 76.85% 109.62%, #9D96CF 0%, #F8F8F9 70.15%);
    --naranjaboton: rgba(255,143,76,1.00);
    --naranjabotonal80: rgba(255,143,76,.8);
    /* exportados de figma*/
    --morado100: rgba(235, 234, 245, 1);
    --morado200: rgba(202, 198, 229, 1);
    --morado300: rgba(157, 150, 207, 1);
    --morado400: rgba(124, 115, 191, 1);
    --morado400al90: rgba(124, 115, 191, .9);
    --morado500: rgba(92, 80, 175, 1);
    --morado500al20: rgba(92, 80, 175, .2);
    --morado600: rgba(73, 64, 140, 1);
    --rojo100: rgba(255, 239, 229, 1);
    --rojo200: rgba(255, 207, 179, 1);
    --rojo300: rgba(255, 175, 128, 1);
    --rojo400: rgba(255, 143, 76, 1);
    --rojo500: rgba(255, 111, 26, 1);
    --rojo600: rgba(229, 85, 0, 1);
    --rojo600al80: rgba(229, 85, 0, .8);
    --blanco: rgba(253, 253, 253, 1);
    --blancoal40: rgba(253, 253, 253,1);
    --u-i0: rgba(243,243,242, 1);
    --u-i100: rgba(223, 222, 219, 1);
    --u-i200: rgba(200, 198, 193, 1);
    --u-i300: rgba(175, 173, 166, 1);
    --u-i400: rgba(151, 149, 139, 1);
    --u-i500: rgba(126, 124, 113, 1);
    --u-i600: rgba(100, 97, 89, 1);
    --u-i700: rgba(73, 71, 65, 1);
    --u-i800: rgba(46, 45, 41, 1);
    --u-i900: rgba(19, 18, 17, 1);

}
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-variant-numeric:lining-nums;
    font-feature-settings: 'pnum' on, 'lnum' on, 'case' on, 'ss04' on;
    styleset: 'ss04';
    margin: 0px;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-weight: 400;

    opacity: 0;
    transition: opacity .2s linear 0s;
    min-width: 360px;
}
body.cargado {
    transition: opacity .5s linear 0s;
    opacity: 1;
}
.anchomaximo {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
h1,h2,h3,h4,h5,h6,.fuentetitulos {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
}
.contenidosdinamicos h6 {
    font-size: 1.125rem;
}
h2 {
    font-weight: 700;
    font-size: 1.875em;
}
main {
    position: relative;
    z-index: 2;
	flex-grow: 1;
    padding-left: var(--margen);
    padding-right: var(--margen);
    padding-bottom: var(--margendoble);
    margin-bottom: 360px;
    background-color: white;
    min-height: 90vh;
    overflow: hidden;
    
}
input:focus, textarea:focus, select:focus {
    outline: 0px;
    
}
textarea {
    resize:vertical;
}

form input, form textarea {
    background-color: var(--morado100);
    color: var(--morado500);
    border:none;
    padding:.5em 1em;
    border-radius: 4px;
        box-shadow: none;
    border-image: none;
}
form input:focus, form textarea:focus {
    background-color: var(--u-i0);
}
*::placeholder {
    color: var(--morado400);
}
.traselementoflotate {
	clear: both;
}
.centrador {
    text-align: center;
}
.nocortar {
	white-space:nowrap;
}
.romperpalabras {
    word-break: keep-all;
}
.cortar {
	word-break: break-all;
}
.contenedoraperturavertical {
	height: 0px;
	overflow: hidden;
	transition: height 1s linear 0s;
}
.contenedoraperturavertical > * {
    overflow: hidden;
}
.aladerecha {
    text-align: right;
}
.superindice {
    font-size: .55em;
    vertical-align:super;
    font-weight:bolder;
}
.mayusculas {
    text-transform: uppercase;
}
.minusculas {
    text-transform: lowercase;
}
.textomorado {
    color: var(--morado500);
}
#capamarco, #capamarco1 {
	z-index: 150;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.8);	
	transform: scale(0);
/*	background-image:url(../imagenes/procesando.gif);*/
	background-attachment: fixed;
	background-position: center center;
	background-repeat:no-repeat;
	background-size: 3em auto;
	transition: transform .5s ease-in 0s;
}

#capamarco iframe, .capasmarco iframe {
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: none;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}
/*ventana de avisos*/
#ventanaavisos, #ventanaaceptar {
	position: fixed;
	left: 0px;
	top: 0px;
    background-size: cover;
	width: 100%;
	height: 100%;
	color: black;
	z-index: 152;	
	transform: scale(0);
	display: flex;
	justify-content:center;
	align-items:center;
	transition: transform .2s linear 0s;
}
#ventanaavisos .tapadormorado, #ventanaaceptar .tapadormorado {
    z-index: 2;
    position: absolute;
    transform: scale(1);
}
#ventanaavisos div:not(.tapadormorado), #ventanaaceptar div:not(.tapadormorado) {
    position: relative;
    z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	padding: 1em; 
    background-color: rgba(255,255,255,1);
    padding: 3em;
    border-radius: 8px;
}
#ventanaavisos h2, #ventanaaceptar h2 {
	background-color: transparent;
    font-size: 2em;
    margin-bottom: .25em;
    text-align: center;
}
#ventanaavisos p, #ventanaaceptar p {
    font-size: 1.225em;
    font-weight: 500;
}
#ventanaavisos .estrecho, #ventanaaceptar .estrecho {
    font-size: .875em;
}
/* animaciones estandard*/


#cargaprevia {
	display: none;
}

.negrita {
    font-weight: bold;
    font-weight: 700;
    
}
strong {
    font-weight: 600;
}
.casinegrita {
    font-weight: 600;
}
.seminegrita {
    font-weight: 500;
}
.ocupatodo {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
/*input::marker {
    background-color: transparent;
}*/


.contenidosdinamicos {
    /*line-height: 1.4em;*/
}
.contenidosdinamicos p {
    margin-top: .5em;
    margin-bottom: .5em;
}
.contenidosdinamicos a, a {
    color: var(--colornegro);
}
.boton1 {
    border: 1px solid #A2A2A2;
    box-shadow: 2px 3px 4px rgba(0,0,0,.25);
    border-radius: .5em;
    background-color: #E3E3E1;
    text-decoration: none;
    padding: .25em 1em .35em 1em;
    background-image: none;
    transition: background-color .3s ease-in 0s;
    line-height: 1em;
    display: inline-flex;
    align-items: flex-end;
    cursor: pointer;
    color: black;
    font-weight: 500;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.08);
}
.boton1:hover {
    background-color: #88887F;
}
.boton2, .boton4, .boton5, .boton6, .contenidosdinamicos h6 a {
    border: solid 1px var(--morado400al80);;
    border-radius: 2em;
    background-color: var(--morado400al80);
    text-decoration: none;
    padding: .875em 1.5em .9375em 1.5em;
    background-image: none;
    transition: all .2s ease-in 0s,bottom .05s ease-in-out 0s;
    line-height: 1em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.08);
}
.boton2, .contenidosdinamicos h6 a {
     color: var(--colorblanco);
    background-color: var(--morado500);
    border-color: var(--morado500);
}
h6 a {
    text-decoration: none;
}
.boton6 {
    background-color: var(--blanco);
    color: var(--morado500);
    border: none;
}
.boton6:hover {
    background-color: var(--morado300);
    color: var(--blanco);
}
.boton2.estrecho, .boton3.estrecho, .boton4.estrecho, .boton5.estrecho, .boton6.estrecho, .contenidosdinamicos h6 a {
    padding: .5em 1em;
}
.boton4 {
    color: white;
    background-color: var(--morado400al60);
    border-color: white;
}
.boton5 {
    color: white;
    background-color: var(--naranjabotonal80);
    border-color: white;
}
.boton2:hover, .contenidosdinamicos h6 a:hover {  
    color: var(--colornegro); 
    border-color: var(--morado300);
    background-color: var(--morado300);
}
.boton4:hover {
    background-color: var(--morado500);
    border-color: white;
}
.boton5:hover {
    background-color: var(--naranjaboton);
    border-color: white;
}
.boton3 {
    border-radius: 2em;
    background-color: #E3E3E1;
    text-decoration: none;
    padding: 1.5em 1em;
    background-image: none;
    transition: background-color .3s ease-in 0s,border-color .3s linear 0s;;
    line-height: 1em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.boton3:hover {
    background-color: #88887F;
    border-color: #8887F;
}
.flecha1, .flecha2, .flecha3 {
    display: inline-block;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: var(--u-i100);
    transition: background-color .2s ease-in 0s,filter .2s ease-in 0s;
    cursor: pointer;
}
.flecha2 > img, .flecha1 > img, .flecha3 > img {
    display: block;
    width: 100%;
    height: auto;
    transform: rotateY(180deg);
    transition: filter .3s ease-in 0s;
}
.flecha1 > img {
    transform: rotateY(0deg);
}
.flecha3 > img {
    transform: rotateZ(90deg) rotateY(0deg);
}
.flecha2:hover, .flecha1:hover, .flecha3:hover {
    background-color: var(--morado300);
}
.flecha1:hover > img, .flecha2:hover > img, .flecha3:hover > img{
    filter: brightness(300);
}
.flecha1.mediana, .flecha2.mediana, .flecha3.mediana { 
    width: 3em;
    height: 3em;
    padding: .75em;
}
.flecha1.pequena, .flecha2.pequena, .flecha3.pequena { 
    width: 2em;
    height: 2em;
    padding: .5em;
}
 
.tapadormorado {
    position: fixed;    
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: .8;
    background:linear-gradient(288.69deg, #49408C 20.41%, #7C73BF 87.79%);
    z-index: 19;
    transform: scale(0);
    transition: transform .2s linear 0s;
}
.tapadormorado.abierto {
    transform: scale(1);
}
.morado400 {
    color: var(--morado400);
}
.subrayado {
    text-decoration: underline;
}
.estrellacentrada {
    display: inline-block;
    line-height: 1em;
    vertical-align: middle;
}
.contenedoranimacion {
    flex-shrink: 0em;
    position: relative;
    z-index: 1;
}
.contenedoranimacion img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: -1;
}
.contenedoranimacion canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40%;
    height: 100%;
    z-index: 2;
}
.contenidosdinamicos img, .contenidosdinamicos table, .contenidosdinamicos video, .contenidosdinamicos iframe {
    border-radius: 8px;
}
#botonscroll {
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: 3em;
    height: auto;
    z-index: 4;
}
#botonscroll object {
    width: 100%;
    height: auto;
}
#botonscroll img {
    position: absolute;
    top: 0px;
    left: 0px;
    wiedth: 100%;
    height: 100%;
    cursor: pointer;
}
#contenedorcamposformulario p:nth-last-of-type(2) br {
    display: none;
}
@media (max-width: 900px) {
    html {
        --margen: 1rem;
    }
}


/*Animaciones*/
.entrada1 {
    opacity: 0; transform: translateY(50px); 
    transition: all .5s linear 0s, opacity 1s ease-in-out, transform 1s ease-in-out; 
} 

.entrada1.dentro, .entrada2.dentro{ 
    opacity: 1; transform: translateY(0); 
}
.entrada2  {
    opacity: 0;
    transition: all .5s linear 0s, transform 1s ease-out, opacity 1s ease-out;
    transform: scale(1.2);
}
@media (max-width: 500px) {
    #contenedorcamposformulario p:nth-last-of-type(2) {
        line-height: 1;
    }
    #contenedorcamposformulario p:nth-last-of-type(2) br {
        display: block;
    }
    #contenedorcamposformulario p:nth-last-of-type(2) input {
        transform: translateX(1.5em) translateY(-.75em)
    }
}
@media (max-width: 820px) {
    form input, form textarea {
        font-size: 1.15em;
    }
}