:root {
    --icons: #49D1AF;
    --blue: #1D558C;
    --accent: #4589E4;
    --dark-contrast: #031339;
    --text-titles: #1C4064;
    --texto-bajadas-cards: #305A85;
    --text-body: #6587AA;
    --gradient-blue: linear-gradient(90.52deg, #1D558C -22.21%, #4E97FA 121.73%);
    --gradient-image: linear-gradient(176.95deg, rgba(10, 30, 49, 0) 45.82%, rgba(10, 30, 49, 0.5) 96.21%);
    --gradient-cards: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(112.4deg, rgba(53, 178, 210, 0.6) 5.66%, rgba(26, 209, 163, 0.6) 41.83%, rgba(2, 238, 122, 0.6) 102.42%);
    --gradient-green: linear-gradient(90deg, #35B2D2 -0.06%, #1AD1A3 55.3%, #02EE7A 100.59%);
    --gradient-cta: linear-gradient(134.82deg, #35B2D2 -17.31%, #1AD1A3 80.13%, #02EE7A 133.17%);
    --gradient-special: linear-gradient(139.46deg, #C4C2FF 0%, #78FFC6 94.06%);
    --soft:#EEF3FF;
    --bg: #F7F9FE;
    --light-grey: #F6F6F6;
    --dark-gray: #E7E7E7;
    --black: #4A4A4A;
    --error: #EE3636;
}

h1 {
    font-size: 64px;
    font-weight: 300;
    color: var(--text-titles)
}

h2 {
    font-size: 56px;
    font-weight: 600;
    color: var(--text-titles)
}

h3 {
    font-size: 42px;
    font-weight: 500;
    color: var(--text-titles)
}

h3.light {
    font-weight: 200;
    font-size: 40px;
    color: var(--text-titles)
}

h4 {
    font-weight: 600;
    font-size: 32px;
    color: var(--text-titles)
}

h4.light {
    font-size: 32px;
    font-weight: 300;
    color: var(--text-titles)
}

h5 {
    font-weight: 500;
    font-size: 24px;
    color: var(--text-titles)
}

.card{
    padding: 32px;
    background: transparent;
    gap: 32px;
    margin: auto;
    border: transparent !important;
}

.account-form {
    gap: 20px;
}

@media screen and (min-width: 770px) {
    .card{
        padding: 64px;
    }

    .account-form{
        flex-wrap: nowrap;
    }
}




.card .title {
    font-size: 24px;
    font-weight: 600;
}

.card .title-small {
    font-size: 18px;
}

.card .tag {
    font-size: 12px;
    text-transform: uppercase;
}

p.xl{
    font-size: 20px;
}

p.lg{
    font-size: 18px;
}

p{
    color: var(--text-body);
    font-size: 16px;
}

p.sm{
    font-size: 14px;
}

p.xs{
    font-size: 12px;
}

nav .tab-title{
    font-size: 18px;
    font-weight: 600;
}

nav .item{
    font-size: 16px;
    font-weight: 600;
}

nav .tab-subtitle, nav .item-small{
    font-size: 14px;
}

,button-regular {
    font-size: 14px;
    font-weight: 600;
    min-width: 150px;
}

.button-light {
    display: flex;
    border: 1px solid transparent;
    border-radius: 100px;
    background-image: 
        linear-gradient(#fff, #fff),
        linear-gradient(to right, #39A2DB, #39DB84);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 100px;
    color: var(--blue);
    padding: 19px 40px;
    outline: none;
    font-weight: 500;
    align-items: center;
    transition: transform 0.5s ease;
    min-width: 150px;
    justify-content: space-around;
    width: max-content;
}

.button-light:focus {
    border: 2px solid var(--gradient-green);
}

.button-light:hover {
    background: var(--soft);
    border: unset;
    padding: 20px 20px;
}

.button-light.dark{
    color: var(--soft);
}

.button-light.dark::hover{
    border: 2px solid var(--gradient-green);
}

input {
    background: var(--bg);
    padding: 20px 18px;
    border-radius: 16px;
    outline: none;
    color: var(--blue);
    border: none;
    width: 387px;
}

input::placeholder {
    color: var(--text-body);
}

input:hover {
    background: var(--soft);
    color: var(--accent);
}
input:hover::placeholder {
    color: var(--accent);
}

input:focus{
    border: 1px solid transparent;
    background-image: 
    linear-gradient(var(--soft), #fff),
    linear-gradient(to right, #39A2DB, #39DB84);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input.error{
    border: 1px solid var(--error);
}

.error-msg{
    font-size: 12px;
    font-weight: 500;
    color: var(--error);
}

.hidden {
    display: none;
}


.result-data {
    display: flex;
    flex-direction: column;
    color: var(--text-body);
    margin: 20px 0;
}

strong {
    color: var(--dark-contrast);
}

.arrow {
    display: none;
    font-size: 12px;
    margin-left: 0.5rem;
    /* opacity: 0; */
    transform: translateX(0px) rotate(-45deg);
    transition: transform 0.5s ease;
    background: var(--gradient-green);
    border-radius: 50%;
    padding: 3px 6px;
    color: white;
    font-weight: 100 !important;
    align-items: center;
}

.button-light:hover .arrow {
    display: inline-block;
    transform: translateX(0px) rotate(-45deg);
}

.title-container{
    margin-bottom: 32px;
}

.label-container {
    margin-bottom: 12px;
}