@font-face {
    font-family: 'Metropolis';
    src: url('../font/Metropolis-Regular.otf') format('otf'),
    url('../font/Metropolis-Regular.otf') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Dellynda';
    src: url('../font/Dellynda.ttf') format('ttf'),
    url('../font/Dellynda.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Metropolis';
}

main {
    background-color: #bee2ec;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
}

.container__test {
    background-color: #fff;
    width: 80%;
    max-width: 1440px;
    height: 80%;
    margin: 0 auto;
}

.wrapper {
    padding: 0px 6rem;
    height: 100%;
    overflow: hidden;
    background-image: url(../images/bg__home.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.logo {
    display: flex;
    justify-content: center;
    padding: 60px 0px 20px 0px;
}

progress {
    width: 100%; 
    height: 16px; 
    color: #BBE3EC; 
    border: none;
    border-radius: 10px;
    transition: value 1s ease;
}

progress::-webkit-progress-bar {
    background-color: #F6F6F6; 
    border-radius: 10px;
}

progress::-webkit-progress-value {
    background-color: #6F9CAB; 
    border-radius: 10px;
    transition: width 1s ease;
}

progress::-moz-progress-bar {
    background-color: #6F9CAB; 
    border-radius: 10px;
    transition: width 1s ease;
}


.container__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

form#testForm {
    height: calc(100% - 200px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 24px;
}

form#testForm input {
    border: 2px solid #DCDCDC;
    height: 40px;
    margin-top: 10px;
    border-radius: 6px;
    font-size: 1.1rem;
}

form#testForm select {
    height: 46px;
    margin-top: 10px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-family: 'Metropolis';
}

form#testForm input:focus-visible, form#testForm input:focus, 
form#testForm select:focus-visible, form#testForm:focus select {
    border: 2px solid #3E6D7B;
    outline: #3E6D7B auto 1px;
}

form#testForm label {
    font-size: 1.3rem;
    color: #7f8c8d;
    font-weight: 600;
}

p.user__name {
    text-align: center;
    font-size: 1.6rem;
    color: #7f8c8d;
    margin-top: 0px;
}

p.user__name span {
    color: #3E6D7B;
    font-family: 'Dellynda';
    font-size: 3.2rem;
    font-weight: 500;
}

.display-flex {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

.error {
    color: #e74c3c;
}

.hidden {
    visibility: hidden;
}

.display-none {
    display: none;
}

.btn {
    background-color: #406e7c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    
    &:hover {
        cursor: pointer;
    }
}

.goals__check {
    display: flex;
    gap: 14px;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

label.goal__text {
    font-weight: 500 !important;
    font-size: 1rem !important;
    background-color: #EFEFEF;
    border-radius: 16px;
    padding: 2px 16px;
    transition: background-color 0.8s ease;
    &:hover {
        cursor: pointer;
    }
}

label.goal__text-active {
    background-color: #3E6D7B !important;
    color: #fff !important;
}

.title__goals {
    color: #7f8c8d;
    font-weight: 500;
    text-align: center;
    padding: 10px 0px 0px 0px;
}

.error__check {
    text-align: center;
}

div#container__products {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    align-content: center;
}

#container__products img {
    width: 150px;
}

#container__products .card__product {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 10px;
    width: 230px;
    height: 280px;
    justify-content: center;
}

#container__products h2 {
    color: #fff; 
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
}

p.description__product {
    color: #3E6D7B;
    text-align: center;
    font-weight: 500;
    margin: 0px 0px 12px 0px;
}

/* Colores de texto en los productos */

.bg__color__8566712435010 p.description__product, .bg__color__8566711714114 p.description__product {
    color: #9F7C5B;
}

.bg__color__8566711845186 p.description__product, .bg__color__8566711943490 p.description__product {
    color: #548793;
}

.bg__color__8566712271170 p.description__product {
    color: #B17FB6;
}

.bg__color__8566711451970 p.description__product {
    color: #31854F;
}

.bg__color__8566712074562 p.description__product {
    color: #6FA2B1;
}

/* Colores de texto en los productos */

.bg__color__8566712435010, .bg__color__8566711714114 {
    background-color: #F3DEC7;
}

.bg__color__8566712435010 select, .bg__color__8566711714114 select {
    background-color: #997C5B;
    color: #fff;
}

.bg__color__8566711451970 {
    background-color: #9FD9B9;
}

.bg__color__8566711451970 select {
    background-color: #565E2D;
    color: #fff;
}

.bg__color__8566711189826 {
    background-color: #B8DB9A;
}

.bg__color__8566711845186, .bg__color__8566711943490 {
    background-color: #DAE9FE;
}

.bg__color__8566712271170 {
    background-color: #DDCFE9;
}

.bg__color__8566712271170  select {
    background-color: #AB7FB0;
    color: #fff;
}

.bg__color__8566711386434 {
    background-color: #F6C7D1;
}

.bg__color__8566712074562 {
    background-color: #BCE4ED;
}

.bg__color__8566712074562 select{
    background-color: #6F9CAB;
    color: #fff;
}

.btn.submit {
    background-color: #3E6D7B;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 75px;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    font-size: 1.2rem;
    text-decoration: none;
    &:hover {
        cursor: pointer;
    }
}

.call__to__action {
    font-size: 1.3rem;
    color: #7f8c8d;
    font-weight: 600;
}

.submit-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

select.variant-select {
    padding: 4px 6px;
    font-size: 0.9rem !important;
    border: 2px solid transparent;
}

select.variant-select.no-variant-select {
    visibility: hidden;
}

@media screen and (max-width: 962px) {
    
    .wrapper {
        padding: 0px 2rem;
        background-image: url(../images/mobile/bg__home.png);
        overflow: scroll;
    }

    .btn {
        font-size: 14px;
        padding: 10px 34px
    }

    .submit-form {
        display: none;
        width: 80%;
        text-align: center;
    }
    
    .div#container__products {
        flex-direction: column;
    }
    
    form#testForm label {
        width: 100%;
    }

    .goals__check {
        background-color: #fff;
    }

    .container__controls {
        padding: 14px 0px;
    }

    div#container__products {
        flex-direction: column;
    }
}