:root{
    --gradiente-azul-verde: linear-gradient(to right, var(--color5A), var(--color5V));
    --altura-linea: 2.037vh;
    --altura-linea-movil: 36px;
    --sombra :2px 2px 3px rgba(0, 0, 0, 0.4), 7px 7px 8px rgba(0, 0, 0, 0.3) ;

    --color1T: rgb(89,198,234);
    --color2T: rgb(126,196,188);
    --color3T: rgb(132,195,206);
    --color4T: rgb(130,187,216);

    --color1A: rgb(240,251,255);
    --color2A: rgb(228,242,249);
    --color3A: rgb(205,235,247);
    --color4A: rgb(160,206,234);
    --color5A: rgb(128,181,221);
    --color6A: rgb(74,128,168);
    --color7A: rgb(45,83,117);

    --color1V: rgb(237,252,244);
    --color2V: rgb(225,244,234);
    --color3V: rgb(214,242,229);
    --color4V: rgb(174,229,209);   
    --color5V: rgb(128,193,170);   
    --color6V: rgb(93,141,128);   
    --color7V: rgb(58,79,72); 
    
    --color1N: rgb(255,248,240);
    --color2N: rgb(222,168,103);      
    --color3N: rgb(189,128,32);

    --color1R: rgb(219,97,97);
    --color2R: rgb(175,79,79);   

    --color1:  rgb(26,26,26);
    --color2:  rgb(51,51,51);
    --color3:  rgb(62,62,62);
    --color4:  rgb(77,77,77);
    --color5:  rgb(90,90,90);
    --color6:  rgb(102,102,102);
    --color7:  rgb(120,120,120);
    --color8:  rgb(128,128,128);
    --color9:  rgb(140,140,140);
    --color10: rgb(146,146,146);
    --color11: rgb(153,153,153);
    --color12: rgb(179,179,179);
    --color13: rgb(190,190,190);
    --color14: rgb(230,230,230);
    --color15: rgb(238,238,238);
    --color16: rgb(240,240,240);
    --color17: rgb(247,247,247);
    --color18: rgb(255,255,255);

    --vw: calc(1vh * 1.777777777777778);
    --margin-16-9: calc((100vw - (100vh * 1.777777777777778))/2);
}

/* *{
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
} */
[v-cloak] {
    display: none;
  }
input,
button{
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
body{
/*     max-width: calc(100vh * 1.777777777777778); */
    margin: auto;
    cursor: default;
}
.width-16-9{
    max-width: 1920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.margin-16-9{
    padding: 0px var(--margin-16-9);
}

p, h1{
    margin: 0px;
}
/* =======================FUENTES========================= */
@font-face {
    font-family: "Montserrat-bold";
    src: url('../fonts/Montserrat/Montserrat-Bold.ttf');
	font-display: swap;
}

@font-face {
    font-family: "Montserrat-semibold";
    src: url('../fonts/Montserrat/WOFF/montserrat-v18-latin-600.woff2');
	font-display: swap;
}

@font-face {
    font-family: "Montserrat-semibold-italic";
    src: url('../fonts/Montserrat/WOFF/montserrat-v18-latin-600italic.woff2');
	font-display: swap;
}

@font-face {
    font-family: "Montserrat-bold-italic";
    src: url('../fonts/Montserrat/WOFF/montserrat-v18-latin-700italic.woff2');
	font-display: swap;
}
@font-face {
    font-family: "Montserrat-medium-italic";
    src: url('../fonts/Montserrat/WOFF/montserrat-v18-latin-500italic.woff2');
	font-display: swap;
}
@font-face {
    font-family: "Montserrat-medium";
    src: url('../fonts/Montserrat/WOFF/montserrat-v18-latin-500.woff2');
	font-display: swap;
}

@font-face {
    font-family: "TT_Commons_demibold_italic";
    src: url('../fonts/TTCommons/Web Fonts/ttcommons_demibolditalic_macroman/tt_commons_demibold_italic-webfont.woff2');
	font-display: swap;
}
@font-face {
    font-family: "TT_Commons_demibold";
    src: url('../fonts/TTCommons/Web Fonts/ttcommons_demibold_macroman/tt_commons_demibold-webfont.woff2');
	font-display: swap;
}
@font-face {
    font-family: "TT_Commons_medium";
    src: url('../fonts/TTCommons/Web Fonts/ttcommons_medium_macroman/tt_commons_medium-webfont.woff2');
	font-display: swap;
}
@font-face {
    font-family: "TT_Commons_semi_italic";
    src: url('../fonts/TTCommons/Web Fonts/ttcommons_bookitalic_macroman/tt_commons_book_italic-webfont.woff2');
	font-display: swap;
}
@font-face {
    font-family: "TT_Commons_regular";
    src: url('../fonts/TTCommons/Web Fonts/ttcommons_regular_macroman/tt_commons_regular-webfont.woff2');
	font-display: swap;
}
@font-face {
    font-family: "TT_Commons_medium_italic";
    src: url('../fonts/TTCommons/Web Fonts/ttcommons_mediumitalic_macroman/tt_commons_medium_italic-webfont.woff2');
	font-display: swap;
}
@font-face{
    font-family: "TT_Commons_italic";
    src: url('../fonts/TTCommons/Web Fonts/ttcommons_italic_macroman/tt_commons_italic-webfont.woff2');
	font-display: swap;
}

#contenedor-principal{
    position: fixed;
    width: 100vw;
    z-index: 1000;
    top: 0;
}
.linear-gradient{
    background: var(--gradiente-azul-verde);
}
.borde-inferior-redondo{
    border-radius: 0 0 3rem 3rem;
  }
.inline{
    display: flex;    
}
.space-evenly{
    justify-content: space-evenly;
}
.space-between{
    justify-content: space-between;
}
.stretch{
    justify-content: stretch;
}
.center{
    justify-content: center;
}
.imagen_flecha{
    width: 13px;
}
.align-center{
    display: flex;
    align-items: center;
}
.gradiente-trans{
    background: linear-gradient(270deg, rgb(128,193,170), rgb(128,181,221),rgb(74,128,168),rgb(45,83,114));
    background-size: 300% 400%;
    background-position-x: 100%;
    transition-property: background-position-x;
    transition-timing-function: ease-in;
    transition-duration: 500ms;
}
.gradiente-trans:hover{
    background-position-x: 0%;
}
.marginTop{
    margin-top: 165px !important;
}
.marginTopMobile{
    margin-top: 86px !important;
}

/* - - - - - - - - - BOTONES - - - - - - - - -  */
/*btn-demostracion*/
.boton-demostracion{
    border-radius: 90px;
    border: 0px;
    box-shadow: var(--sombra);
    font-family: "TT_Commons_demibold_italic";
    color: var(--color18);
/*     position: relative; */
}
/* .boton-demostracion::before{
    content: url('../images/HomePage/Flecha_b_.svg');
    width: 20px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    height: 17px;
} */
/*Slide btn*/
.btn-slide{   
    border-radius: 90px;
    border: none;
    outline: none;
    position: relative;
    height: 42px;
    color: var(--color3);
    transition: color 500ms ease;
    padding: 0px ;
    overflow: visible !important;
}

.btn-slide:hover,
.btn-slide:focus-within{
    color: white !important;
}
.btn-slide:hover div,
.btn-slide:focus-within div{
    width: 100%;
}
.btn-slide:hover div img,
.btn-slide:focus-within div img{
    content: url('../images/Flecha default 2_.svg');
    left: 20px;
}
.btn-slide div{
    -webkit-appearance: none;
    height: 100%;
    border-radius: 90em;
    box-shadow: var(--sombra);
    transition: width 500ms cubic-bezier(0.43, 1.1, 0.44, 1.07);
    width: 42px;
}
.btn-slide p{
    font-family: 'TT_Commons_demibold_italic';
    font-size: 16px;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 21px;
    height: 100%;
    width: calc(100% - 21px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-slide img{
    content: url('../images/Flecha default_.svg');
    height: 14px;
    position: absolute;
    z-index: 1;
    top: 33%;
    left: 19px;
}
.btn-slide div{
    display: flex;
    align-items: center;
}
.btn-slide .numero{
    position: absolute;
    z-index: 1;
    left: 17px;
    color: white;
    font-size: 18px;
}
.slider-black{
    background-color: var(--color16);
}
.slider-black div{
    background-color: var(--color3);
}

.slider-green{
    background-color: var(--color2V);
}
.slider-green div{
    background-color: var(--color6V);
}

.slider-blue_{
    background-color:var(--color18);
}
.slider-blue_ div{
    background-color: var(--color3);
}

.slider-orange{
    background-color: var(--color16);
}
.slider-orange div{
    background-color: var(--color2N);
}


.slider-blue_2{
    background-color: var(--color18);
}
.slider-blue_2 div{
    background-color: var(--color6A);
}

.slider-blue{
    background-color: var(--color16);

}
.slider-blue div{
    background-color: var(--color6A);
}

.btn-movil{
    display:none;
}

.btn-AS{
    background-color: var(--color1A);
    color: var(--color6A);
    font-family: 'TT_Commons_medium_italic';
    font-size: 1.125rem;
    display: inline-flex;
    width: 155px;
    height: 45px;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 10rem;
    border: none;
    box-shadow: 2px 2px 6px rgb(0 0 0 / 40%);
    outline: none;
}
.btn-AS-Sig::after{
    content: url('../images/PorqueSai/Sig_.svg');
    width: 10px;
    height: 18px;
}
.btn-AS-Ant::before{
    content: url('../images/PorqueSai/Sig_.svg');
    width: 10px;
    height: 18px;
    transform: rotate(180deg);
}

/* Pop Ups */
.modal{
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content{
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 20%;
    min-width: 300px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.modal-content button{
    width: 36px;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(43%, -58%);
    background-color: rgb(222,168,103);
    border-radius: 10rem;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}
.modal-content button p{
    font-size: 28px;
    transform: translate(0px, -2px);
}

.campoInaceptable{
    box-shadow: 0px 0px 10px 1px red !important;
}
/* Fin Pop ups */

@media screen and (orientation: portrait){
    .padding-morado{
        padding-left: 16px;
        padding-right: 16px;
    }
    .padding-naranja{
        padding-right: 20px;
        padding-left: 20px;
    }
    .padding-naranja-morado{
        padding-right: 36px;
        padding-left: 36px;
    }
}

/*Celulares*/
@media screen and (max-width: 1024px) and (orientation: landscape){
    .padding-naranja{
        padding-left: 20px;
        padding-right: 20px;
    }
    .padding-morado{
        padding-left: 16px;
        padding-right: 16px;
    }
    .padding-naranja-morado{
        padding-left:36px;
        padding-right:36px;
    }
}

/*tablets landscape*/
@media screen and (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px){
    .padding-naranja{
        padding-left: 40px;
        padding-right: 40px;
    }
    .padding-morado{
        padding-left: 30px;
        padding-right: 30px;
    }
    .padding-naranja-morado{
        padding-left:70px;
        padding-right:70px;
    }
/*     .width-16-9{
        max-width: 1024px;
    } */
}

/*laptops landscape*/
@media screen and (orientation: landscape) and (min-width: 1366px) and (max-width: 1679px){
    .padding-naranja{
        padding-left: 60px;
        padding-right: 60px;
    }
    .padding-morado{
        padding-left: 45px;
        padding-right: 45px;
    }
    .padding-naranja-morado{
        padding-left:105px;
        padding-right:105px;
    }
/*     .width-16-9{
        max-width: 1366px;
    } */
}

/*Desktop*/
@media screen and (orientation: landscape) and (min-width: 1680px) and (max-width: 1919px){
    .padding-naranja{
        padding-left: 80px;
        padding-right: 80px;
    }
    .padding-morado{
        padding-left: 60px;
        padding-right: 60px;
    }
    .padding-naranja-morado{
        padding-left:140px;
        padding-right:140px;
    }
/*     .width-16-9{
        max-width: 1680px;
    } */
}

/*Full HD and up screens landscape*/
@media screen and (orientation: landscape) and (min-width: 1920px){
    .padding-naranja{
        padding-left: 100px;
        padding-right: 100px;
    }
    .padding-morado{
        padding-left:73px;
        padding-right:73px;
    }
    .padding-naranja-morado{
        padding-left:173px;
        padding-right:173px;
    }
}

.hidden{
    display: none !important;
}