@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --neutral: #F7F3EE;
    --border: #E7E7E7;
    --primary: #0F0F0F;
    --orange: #B45118;
    --green: #007A50;
    --light-green: #F2F8F6;
}

/*FONTS CUSTOM*/

.fs-12 {font-size: 0.75rem;}
.fs-14 {font-size: 0.875rem;}
.fs-18 {font-size: 1.125rem;}

.fw-semibold {font-weight: 600;}

.lh-12 {line-height: 0.75rem;}
.lh-15 {line-height: 0.9375rem;}
.lh-16 {line-height: 1rem;}
.lh-18 {line-height: 1.125rem;}

/*SPACING CUSTOM*/


.p-12 {padding: 0.75rem;}
.pb-12 {padding-bottom: 0.75rem;}

.gap-10 {gap: 0.625rem;}
.gap-12 {gap: 0.75rem;}

/*ELEMENTS CUSTOM*/

.separator {
    border-bottom: 1px solid var(--border);
}

.card button, header button {
    all: unset;
    cursor: pointer;
    display: inline-flex;
}

.infobulle {
    width: 1.125rem;
    height: 1.125rem;
    aspect-ratio: 1/1;
}

.tooltip {
    --tooltip-bg: #000000;
    --tooltip-color: #ffffff;
    --bs-tooltip-opacity: 0.8;
    --bs-tooltip-max-width: 15.625rem;
}

.tooltip .tooltip-inner {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: start;
}

/**/

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: var(--primary);
    background-color: var(--neutral);
}

#logo {
    width: clamp(9.6875rem, calc(9.6875rem + (18.125 - 9.6875) * ((100vw - 25rem) / (62 - 25))), 18.125rem);
    height: auto;
}

#return span {
    font-size: clamp(0.75rem, calc(0.75rem + (1 - 0.75) * ((100vw - 25rem) / (62 - 25))), 1rem);
}

#return img {
    width: clamp(1.5rem, calc(1.5rem + (2.1875 - 1.5) * ((100vw - 25rem) / (62 - 25))), 2.1875rem);
    height: auto;
}

h1 {
    font-size: clamp(1.4375rem, calc(0.837rem + 2.4038vw), 3rem);;
}

#subtitle, #example, #example h2 {
    font-size: clamp(0.875rem, calc(0.875rem + (1.5 - 0.875) * ((100vw - 25rem) / (90 - 25))), 1.5rem);
}

#example {
    color: var(--orange);
}

.options-cards {
    gap: 1.5rem;
}

.card {
    padding: 1.125rem 1rem;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 18, 0.16);
}

.option-status {
    font-size: clamp(0.75rem, calc(0.75rem + (0.875 - 0.75) * ((100vw - 25rem) / (90 - 25))), 0.875rem);
    white-space: nowrap;
}

.card td {
    font-size: clamp(0.875rem, calc(0.875rem + (1 - 0.875) * ((100vw - 25rem) / (90 - 25))), 1rem);
    white-space: nowrap;
    padding: 0;
}

button:focus, a:focus {
    outline: 2px solid var(--green);
}

.choice {
    background-color: var(--orange);
    padding: 0.1875rem 0.3125rem 0.25rem;
}

.card h2 {
    font-size: clamp(1.125rem, calc(1.125rem + (1.5 - 1.125) * ((100vw - 25rem) / (90 - 25))), 1.5rem);
    padding-bottom: 1.125rem;
    white-space: wrap;
}

.expandCard {
    background-color: var(--light-green);
}

.expandCard h3 {
    color: var(--green);
}

.expandCard img {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 991px) {
    .womanMobile::before {
        display: block;
        background: url(../img/woman.svg) no-repeat center / cover;
        width: clamp(5.99375rem, calc(0.4284vw + 5.15495rem), 8.57694rem);
        aspect-ratio: 95.90/142.94;
        content: '';
        position: absolute;
        top: -125px;
        right: -5px;
    }
}

@media (min-width: 992px) {
    .womanDesktop::before {
        display: block;
        background: url(../img/woman.svg) no-repeat center / cover;
        width: clamp(8.57694rem, calc(0.4353vw + 4.23673rem), 11.16013rem);

        aspect-ratio: 178.56/266.00;
        content: '';
        position: absolute;
        top: -175px;
        right: 0;
    }

    .choice {
        padding: 0.375rem;
    }
}