/******************************
*   Tipografias
******************************/
@import url('typo.css');
@import url('iconos.css');
 
:root {
    --negro: 0, 0, 0;
    --blanco: 255, 255, 255;
    --azul: 13, 46, 76;
    --azul_l: 58, 162, 218;
    --verde: 4, 207, 178;
    --gris: 170, 170, 170;
}
::selection {
    background: rgb(var(--verde), .2);
    color: rgb(var(--azul), 1);
}
::-moz-selection {
    background: rgb(var(--verde), .2);
    color: rgb(var(--azul), 1);
}
::-webkit-selection {
    background: rgb(var(--verde), .2);
    color: rgb(var(--azul), 1);
}

/******************************
*   Reset
******************************/
*{
    border: 0px;
    margin: 0px;
    padding: 0px;
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    background: rgb(var(--azul), 1);
    font-family: 'Open Sans';
    font-weight: normal;
    font-style: normal;
    line-height: 1.4;
}
figure img { margin: 0 auto; }
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a, a:link, a:hover, a:visited {
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
h1, h2, h3, h4, h5, h6 { margin: 0; }
input,
select,
textarea {
    display: block;
    width: 100%;
    padding: 18px 16px;
    background: #ffffff;
    border-radius: 20px;
    line-height: 1;
    color: rgb(var(--azul), 1);
    border: 1px solid rgb(var(--gris), .3);
    -moz-appearance: none;
    -webkit-appearance: none;
}
textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    line-height: 1.4;
}
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--azul), 1);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
input::placeholder,
textarea::placeholder { color: #565656; }
button { background: transparent; }
input:focus,
select:focus,
textarea:focus,
button:focus { outline: none; }
p { margin: 0; }
p + p { margin-top: 20px; }

/******************************
*   Loader
******************************/
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(var(--azul), .8);
    z-index: 1000;
}
.c__spin {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.spinner {
   position: relative;
   width: 15.7px;
   height: 15.7px;
}
.spinner div {
   animation: spinner-4t3wzl 1.875s infinite backwards;
   background-color: rgb(var(--blanco), 1);
   border-radius: 50%;
   height: 100%;
   position: absolute;
   width: 100%;
}
.spinner div:nth-child(1) {
   animation-delay: 0.15s;
   background-color: rgb(var(--azul_l), 0.9);
}

.spinner div:nth-child(2) {
   animation-delay: 0.3s;
   background-color: rgb(var(--azul_l), 0.8);
}

.spinner div:nth-child(3) {
   animation-delay: 0.45s;
   background-color: rgb(var(--azul_l), 0.7);
}

.spinner div:nth-child(4) {
   animation-delay: 0.6s;
   background-color: rgb(var(--verde), 0.6);
}

.spinner div:nth-child(5) {
   animation-delay: 0.75s;
   background-color: rgb(var(--verde), 0.5);
}

@keyframes spinner-4t3wzl {
   0% {
      transform: rotate(0deg) translateY(-200%);
   }

   60%, 100% {
      transform: rotate(360deg) translateY(-200%);
   }
}

/******************************
*	General
******************************/
/*----------- Estructura -----------*/
.wrapper {
    overflow: hidden;
    position: relative;
}
main {
    min-height: calc(100vh - 76px);
    min-height: calc(100dvh - 76px);
    position: relative;
    z-index: 1;
}
.top__cont,
.bot__cont {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}
.top__cont {
    width: 100%;
    padding: 15px 0 30px;
    color: rgb(var(--blanco), 1);
}
.bot__cont {
    width: 100%;
    min-height: calc(70vh - 76px);
    min-height: calc(70dvh - 76px);
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    background: rgb(var(--blanco), 1);
    color: rgb(var(--azul), 1);
    padding: 40px 0;
}
.top__info {
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
.info__apli * + * { margin-top: 30px; }
.logo__inter {
    margin-left: auto;
    margin-right: auto;
    width: 230px;
    max-width: 70%;
}
.apli__txt {
    margin-left: auto;
    margin-right: auto;
    max-width: 350px;
    text-align: center;
    font-weight: 300;
}
.info__user {
    position: relative;
    padding: 8px 0px 8px 12px;
}
.info__user span + span { margin-top: 6px; }
.info__user span {
    display: block;
    line-height: 1;
}
.user { font-weight: 300; }
.bien { font-weight: 600; }
.bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(rgb(var(--verde), 1), rgb(var(--azul_l), 1));
}
.sec__bar { position: relative; }
.opt__tab {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    z-index: 5;
}
.opt__tab .tab { color: rgb(var(--azul), 1); }
.tab {
    padding: 14px 26px;
    position: relative;
    z-index: 1;
    font-weight: 600;
}
.tab + .tab { margin-left: -10px; }
.tab::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 200%;
    top: 0;
    left: 0;
    background: rgb(var(--blanco), 1);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    -webkit-box-shadow: inset 0px -40px 20px 10px rgb(var(--negro), .3);
    box-shadow: inset 0px -40px 20px 10px rgb(var(--negro), .3);
    z-index: -1;
}
.tab.active {
    z-index: 10;
    pointer-events: none;
}
.tab.active::before {
    -webkit-box-shadow: initial;
    box-shadow: initial;
}

/*----------- Centar -----------*/
.c__center {
    min-height: 100vh;
    min-height: 100dvh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 1;
    color: rgb(var(--blanco), 1);
}
.c__center > * { width: 100%; }

/*----------- BG -----------*/
.bg__inicio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgb(var(--azul), 1);
}
.bg__inicio figure {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    opacity: 1;
    mix-blend-mode: soft-light;
    /* opacity: .2;
    mix-blend-mode: revert; */
}
.bg__inicio figure img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

/*----------- CTA -----------*/
.c__cta {
    text-align: center;
    margin-top: 60px;
}
.cta,
a.cta {
    width: auto;
    min-width: 150px;
    display: inline-block;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    color: rgb(var(--blanco), 1);
    background: rgb(var(--verde), 1);
    text-transform: uppercase;
    padding: 18px 16px;
    text-align: center;
    cursor: pointer;
}

.cta_disabled {
    background: rgb(var(--gris), 1);
}

/******************************
*   Header
******************************/
.btn__men {
    position: fixed;
    top: 0px;
    right: 8px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 1000;
    mix-blend-mode: exclusion;
}
.btn__men > div {
    position: absolute;
    width: 60%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn__men > div span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgb(var(--blanco), 1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.btn__men.over > div span { background: rgb(var(--azul), 1); }
.btn__men > div span + span { margin-top: 6px; }
.btn__men.active > div span { background: rgb(var(--verde), 1); }
.btn__men.active > div span:nth-child(2) { transform: scaleX(0); }
.btn__men.active > div span:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
    -moz-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    -o-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
}
.btn__men.active > div span:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    -o-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
}
.bg__me {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(var(--negro), .4);
    z-index: 90;
    display: none;
}
.cont__menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    height: 100vh;
    height: 100dvh;
    padding: 80px 0;
    overflow: auto;
    max-width: 80%;
    background: rgb(var(--azul), 1);
    color: rgb(var(--blanco), 1);
    z-index: 100;
    display: none;
}
.cont__menu nav {
    margin: 0 auto;
    width: 80%;
}
.ti__menu {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: rgb(var(--verde), .6);
    display: block;
    line-height: 1;
}
.cont__menu nav ul li { overflow: hidden; }
.cont__menu nav ul li a {
    display: block;
    padding: 14px 0;
    font-weight: 600;
    position: relative;
}
.cont__menu nav ul li a:hover { color: rgb(var(--verde), .6); }
.logout::before {
    position: absolute;
    content: '';
    width: 30px;
    height: 1px;
    background: rgb(var(--blanco), .3);
    left: 0;
    top: 1px;
}

/******************************
*	Footer
******************************/
footer {
    margin-top: -1px;
    text-align: center;
    padding: 30px;
    font-size: 12px;
    color: rgb(var(--azul), 1);
    background: rgb(var(--blanco), 1);
}

/******************************
*   Login
******************************/
.info__ini {
    font-weight: 300;
    text-align: center;
    font-size: 20px;
}
.logo__ini {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    max-width: 70%;
}
.info__ini span {
    display: block;
    font-size: 46px;
}
.info__ini > * + * { margin-top: 26px; }
* + .form__log { margin-top: 30px; }
.form__log {
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
}
.form__log,
.form__log input { text-align: center; }
.form__log form label { color: rgb(var(--blanco), 1); }


/******************************
*   Tutorial
******************************/
.c__tutorial { padding: 80px 0; }
.skipt {
    position: fixed;
    background: rgb(var(--negro), .3);
    padding: 12px 18px;
    border-radius: 6px;
    line-height: 1;
    top: 15px;
    right: 15px;
    font-weight: 600;
    z-index: 100;
}
.s__tuto.slick-dotted.slick-slider { margin-bottom: 0; }
.s__tuto .slick-dots {
    position: relative;
    bottom: 0;
    margin-top: 12px;
}
.s__tuto .slick-track { display: flex; }
.s__tuto .slick-track .slick-slide { height: inherit; }
.s__tuto .slick-track .slick-slide > div,
.s__tuto .slick-track .slick-slide > div > div {
    width: 100%;
    display: flex;
    height: 100%;
}
.item__tuto {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
}
.controls {
    text-align: center;
    position: relative;
    margin-top: 30px;
}
.terminar { display: none; }
.tuto__graf {
    margin: 0 auto;
    /* width: 50%; */
}
.tuto__graf figure {
    padding: 0 15px;
}
.tuto__txt {
    margin-top: 60px;
    text-align: center;
}
.tuto__txt p {
    margin-right: auto;
    margin-left: auto;
    max-width: 600px;
    font-size: 18px;
}

/******************************
*   Formularios
******************************/
form label {
    margin-bottom: 8px;
    font-weight: 600;
    color: rgb(var(--gris), 1);
}
* + .cont__fomr { margin-top: 40px; }
.campo { padding: 15px 0; }

.c__camp .select2-container--default .select2-selection--single {
    background-color: rgb(var(--blanco), 1);
    border: 1px solid rgb(var(--gris), .3);
    border-radius: 20px;
}
.c__camp .select2-container .select2-selection--single { height: auto; }
.c__camp .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 18px 16px;
    line-height: 1.5;
}
.select2-dropdown {
    border: 1px solid rgb(var(--gris), .3);
    border-radius: 20px;
    overflow: hidden;
}
.select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid rgb(var(--gris), .3);
    padding: 12px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: rgb(var(--azul), .9); }

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    width: 30px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: initial;
    border-style: initial;
    border-width: initial;
    height: auto;
    margin-left: auto;
    margin-top: auto;
    position: absolute;
    width: auto;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b::before {
    content: "\e908";
    font-family: 'icomoon';
    font-weight: normal;
    font-style: normal;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    -webkit-transform: translate(-50%, -60%) rotateX(180deg);
    -moz-transform: translate(-50%, -60%) rotateX(180deg);
    -ms-transform: translate(-50%, -60%) rotateX(180deg);
    -o-transform: translate(-50%, -60%) rotateX(180deg);
    transform: translate(-50%, -60%) rotateX(180deg);
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 60px;
    margin-right: 30px;
    font-size: 25px;
}

/******************************
*   Resultados
******************************/
.head__res + * { margin-top: 60px; }
.head__res {
    text-align: center;
    position: relative;
}
.head__res > * + * { margin-top: 15px; }
.cta__back {
    margin: 0;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0;
}
.res__bread span {
    display: inline-block;
    position: relative;
    margin-left: 8px;
    font-weight: 600;
    color: rgb(var(--azul), .6);
}
.res__bread span:last-child { color: rgb(var(--azul), 1); }
.res__bread span + span::before {
    content: '/';
    margin-right: 8px;
}
.res__bread span:last-child::before { color: rgb(var(--azul), .6); }
.head__res hr {
    width: 100px;
    border-top: 2px solid rgb(var(--gris), .4);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
}
.res__dis {
    color: rgb(var(--gris), 1);
    font-size: 14px;
}
.tab__res {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.tab__res + .tab__res { margin-top: 40px; }
.tab__01,
.tab__02,
.tab__03 { font-weight: 600; }

.tab__01 .res__fil a,
.tab__01 .res__fil .detail_indication,
.tab__02 .res__fil,
.tab__03 .res__fil {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.fil__col:first-child {
    width: 80px;
    min-width: 80px;
    display: flex;
}
.fil__col:first-child figure { width: 70%; }
.fil__col sup {
    top: auto;
    position: relative;
    font-size: initial;
    line-height: initial;
    vertical-align: initial;
    color: rgb(var(--gris), 1);
}
.fil__col:nth-child(2), 
.fil__col:nth-child(3) { padding: 0 10px; }
/* .tab__01 .fil__col:nth-child(2) { width: calc(50% - 80px); }
.tab__01 .fil__col:nth-child(3) { width: calc(50% - 30px); } */
.tab__01 .fil__col:last-child {
    width: 30px;
    text-align: center;
}
.tab__02 .fil__col,
.tab__03 .fil__col { text-align: center; }
/* .tab__02 .fil__col:nth-child(2) { width: 50%; }
.tab__02 .fil__col:nth-child(3) { width: calc(50% - 80px); } */

/* .tab__03 .fil__col:nth-child(2),
.tab__03 .fil__col:nth-child(3) { width: 33.33%; }
.tab__03 .fil__col:nth-child(4) { width: calc(33.33% - 80px); } */

.tab__04 table { width: 100%; }
.tab__04 table thead {
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}
.tab__04 table tr td { padding: 16px 6px; }
.tab__04 table tbody { color: rgb(var(--azul), .7); }
.tab__04 table tbody tr + tr td { border-top: 1px solid rgb(var(--gris), .3); }
.tab__04 table tbody tr td:first-child,
.tab__04 table tbody tr td:last-child { text-align: center; }

.res__fil { padding: 0 20px; }
.res__fil + .res__fil,
* + .tab__04 {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgb(var(--gris), .3);
}

/******************************
*	Mobile
******************************/
/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
.res__ti br { display: none; }
}
@media (max-width : 649px) {
.tab__04 table thead tr td { font-size: 12px;}
.tab__04 table tbody tr td { font-size: 14px;}
.tab__01 .res__fil a,
.tab__02 .res__fil,
.tab__03 .res__fil { justify-content: space-between; }
.tab__01 .fil__col:nth-child(2) { width: 170px; }
}
@media (min-width : 650px) {
.skipt {
    top: 25px;
    right: 30px;
}
.res__ti { font-size: 26px; }
.fil__col:first-child { width: 100px; }
.tab__01 .fil__col:nth-child(2) { width: calc(70% - 100px); }
.tab__01 .fil__col:nth-child(3) { width: calc(30% - 30px); }
.tab__02 .fil__col:nth-child(2) { width: 50%; }
.tab__02 .fil__col:nth-child(3) { width: calc(50% - 100px); }
.tab__03 .fil__col:nth-child(2),
.tab__03 .fil__col:nth-child(3) { width: 33.33%; }
.tab__03 .fil__col:nth-child(4) { width: calc(33.33% - 100px); }
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
.tuto__graf {
    width: 100vh;
    max-width: 100%;
}
.cont__campos {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
    margin: 0 -15px;
}
.campo {
    width: 33.33%;
    padding: 0 15px;
}
.campo.c__cta { width: 100%; }
.fil__col:nth-child(2),
.fil__col:nth-child(3) { padding: 0 20px; }
.tab__04 table tr td { padding: 16px 12px; }
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) {
}

/******************************
*	Footer
******************************/
/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) {
}

/******************************
*	Header
******************************/
/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
.opt__tab .tab { font-size: 14px; }
}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
.top__cont {
    width: 100%;
    min-height: 35vh;
    min-height: 35dvh;
}
.bot__cont {
    min-height: calc(65vh - 76px);
    min-height: calc(65dvh - 76px);
}
.btn__men {
    top: 20px;
    right: 30px;
}
}
@media (max-width : 1023px) {
.top__info > div + div { margin-top: 40px; }
}
@media (min-width : 1024px){
.info__user {
    position: absolute;
    top: 50%;
    left: 60px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.opt__tab {
    position: absolute;
    bottom: 100%;
}
}