@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Titan+One&display=swap");

@font-face {
    font-family: "LolapeluzaBlack";
    src: url("../fonts/LolapeluzaBlack-Regular.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #160b50;
    --navy-2: #211066;
    --navy-3: #2a1a72;
    --yellow: #ffca05;
    --cyan: #10a9e4;
    --orange: #ff7122;
    --text: #181349;
    --muted: #5d5c68;
    --soft: #f5f5f8;
    --white: #ffffff;
    --shadow: 0 18px 42px rgba(20, 11, 79, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--text);
    font-family: Montserrat, Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

.page {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--white);
}

.pattern-bg {
    background-color: #160948;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.065), transparent 42%),
        linear-gradient(180deg, #12043d 0%, #211064 100%);
    background-size: 150px 150px, 150px 150px, 100% 100%, 100% 100%;
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.brand {
    display: block;
    width: 210px;
    height: auto;

    &.brand-on-color {
        filter: brightness(0) invert(1);
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.event-title {
    position: relative;
    margin: 0;
    color: var(--yellow);
    font-family: "LolapeluzaBlack", "Arial Black", Montserrat, Arial, sans-serif;
    font-weight: 900;
    letter-spacing: -0.08em;
    text-shadow: 0 6px 0 rgba(0, 0, 0, 0.05);

    .exame {
        display: block;
        font-size: clamp(4.5rem, 20vw, 7rem);
        line-height: 0.72;
    }

    .de {
        display: inline-block;
        margin-right: .45rem;
        font-size: clamp(3rem, 16vw, 6rem);
        line-height: 0.78;
        vertical-align: top;
    }

    .bolsa {
        display: inline-block;
        margin-left: -4px;
        font-size: clamp(5rem, 22vw, 8rem);
        line-height: 0.76;
    }

    .year-wrap {
        position: relative;
        top: -.75rem;
        display: flex;
        align-items: flex-end;
        gap: .6rem;

        .year {
            color: var(--white);
            font-family: "LolapeluzaBlack", Montserrat, Arial, sans-serif;
            font-size: clamp(2.5rem, 10vw, 4rem);
            font-weight: 900;
            letter-spacing: 0.02em;
            line-height: 0.9;
            text-shadow: 0 6px 0 rgba(0, 0, 0, 0.05);
            z-index: 1;
        }

        .scribble {
            display: block;
            width: clamp(56px, 14vw, 96px);
            height: clamp(22px, 5vw, 36px);
            background: transparent url("../images/icons/forma_03.svg") center / contain no-repeat;
        }
    }
}

.discount,
.banner-discount {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    text-align: center;

    > img {
        position: absolute;
        inset: 60% auto auto 50%;
        width: 100%;
        max-width: 15rem;
        transform: translate(-50%, -50%);
        z-index: 0;
        pointer-events: none;
    }

    > :not(img) {
        position: relative;
        z-index: 1;
    }

    .up-to {
        display: inline-block;
        margin: 0;
        color: var(--white);
        font-size: clamp(.72rem, 3.3vw, 1rem);
        font-weight: 800;
        letter-spacing: 0.02em;
        transform: translate(-195%, 100%);
        z-index: 2;
    }

    .percent {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
        color: var(--navy);
        font-size: clamp(3rem, 15vw, 4rem);
        font-weight: 900;
        line-height: 0.82;
        letter-spacing: -0.04em;

        span {
            display: inline-block;
        }
    }

    .caption {
        margin: 0;
        color: var(--navy);
        font-size: clamp(.72rem, 3vw, 1rem);
        line-height: 1.05;
        text-transform: uppercase;

        span {
            display: block;
            font-size: clamp(.625rem, 2.7vw, 1rem);
            font-weight: 600;
            text-transform: uppercase;
        }

        strong {
            display: block;
            text-transform: none;
        }
    }
}

.mini-choice {
    position: relative;
    width: min(100%, 11rem);
    aspect-ratio: 595.28 / 285.89;
    overflow: visible;

    > img {
        position: absolute;
        inset: 0;
        width: 100%;
        z-index: 0;
        pointer-events: none;
    }

    .choice-purple,
    .choice-orange,
    .choice-blue {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        font-weight: 600;
        line-height: 0.92;
        text-align: center;
        z-index: 1;
    }

    .choice-purple {
        left: 12%;
        top: 19%;
        width: 24%;
        height: 48%;
        transform: rotate(-5deg);
        font-size: clamp(.68rem, 3.3vw, .9rem);
        text-align: right;
    }

    .choice-orange {
        left: 47%;
        top: 25%;
        width: 34%;
        height: 33%;
        transform: rotate(-1deg);
        font-size: clamp(1rem, 4.8vw, 1.25rem);
        justify-content: flex-start;
        text-align: left;
    }

    .choice-blue {
        left: 32%;
        top: 72%;
        width: 56%;
        transform: rotate(-3deg);
        font-size: clamp(.48rem, 2.2vw, .72rem);
        letter-spacing: -0.01em;
    }

    .choice-star {
        display: none;
    }
}

.date-box {
    width: 100%;
    min-height: 84px;
    display: grid;
    place-items: center;
    border: 2px solid var(--orange);
    border-radius: 1rem;
    background: rgba(22, 14, 80, 0.62);
    color: var(--yellow);
    font-family: "LolapeluzaBlack", Montserrat, Arial, sans-serif;
    text-align: center;
    font-size: clamp(1rem, 4vw, 1.35rem);
    line-height: 1.1;
    font-weight: 900;
    padding: .65rem;

    span {
        display: block;
        margin-bottom: .5rem;
        color: var(--white);
        font-size: 1.25rem;
        font-weight: 900;
    }
}

.container__hero {
    .container {
        position: relative;
        width: 100%;
        max-width: 87.5rem;
        min-height: inherit;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "logo logo"
            "titulo titulo"
            "desconto escolha"
            "estudante estudante"
            "formulario formulario";
        margin: 0 auto;
        padding: 1rem 1rem 0;
        color: var(--white);

        &::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            z-index: 0;
            height: 130px;
            background: linear-gradient(180deg, transparent, rgba(12, 5, 44, 0.35));
            pointer-events: none;
        }

        .hero-logo {
            grid-area: logo;
            justify-self: end;
            width: 150px;
            max-width: 44vw;
        }

        .hero-title-area {
            grid-area: titulo;
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
        }

        .discount {
            grid-area: desconto;
            justify-self: end;
            aspect-ratio: 1.18;
            padding: 1rem .5rem 0;
        }

        .mini-choice {
            grid-area: escolha;
            align-self: center;
            justify-self: start;
        }

        .estudante {
            grid-area: estudante;
            position: relative;
            z-index: 1;

            .hero-student {
                display: block;
                width: 100%;
                max-width: 260px;
                margin: 0 auto;
                object-fit: cover;
            }

            .date-box {
                position: absolute;
                left: 50%;
                bottom: 1rem;
                width: min(80%, 210px);
                min-height: 0;
                transform: translateX(-50%);
                border-width: 1px;
            }
        }

        .lead-form {
            grid-area: formulario;
            position: relative;
            z-index: 1;
            width: 100%;
            margin-bottom: 2rem;
            padding: 2rem 1rem;
            border-radius: 1rem;
            background: var(--white);
            color: var(--text);
            box-shadow: var(--shadow);

            h2 {
                margin: 0 0 1.5rem;
                color: var(--navy);
                font-size: 1.5rem;
                line-height: 1;
                font-weight: 700;
                letter-spacing: -0.07em;
                text-transform: uppercase;
            }

            p {
                margin: 0 0 1.5rem;
                max-width: 350px;
                color: #45424f;
                font-size: .875rem;
                line-height: 1.5;
            }

            .field {
                position: relative;
                display: block;
                margin-bottom: 1rem;

                &.chevron::after {
                    content: "";
                    position: absolute;
                    top: 18px;
                    right: 1rem;
                    width: 10px;
                    height: 10px;
                    border-right: 3px solid #302d3d;
                    border-bottom: 3px solid #302d3d;
                    transform: rotate(45deg);
                    pointer-events: none;
                }

                .icon {
                    position: absolute;
                    left: 18px;
                    top: 50%;
                    width: 25px;
                    height: 25px;
                    color: #67676d;
                    transform: translateY(-50%);
                }

                input,
                select {
                    width: 100%;
                    height: 2.5rem;
                    border: 0;
                    border-radius: 4px;
                    background: #f6f6f6;
                    color: #62616a;
                    padding: 0 16px 0 52px;
                    font-size: 15px;
                    font-weight: 700;
                    outline: 2px solid transparent;
                    transition: outline-color 0.2s ease, background-color 0.2s ease;

                    &:focus {
                        background: var(--white);
                        outline-color: rgba(16, 169, 228, 0.35);
                    }
                }

                select {
                    appearance: none;
                    cursor: pointer;
                }

                &.has-error {
                    input,
                    select {
                        outline-color: rgba(255, 113, 34, 0.85);
                    }
                }
            }

            .field-error {
                display: block;
                margin: -8px 0 9px 4px;
                color: var(--orange);
                font-size: 10px;
                font-weight: 800;
                line-height: 1.2;
            }

            .form-status {
                min-height: 1.25rem;
                margin: 0;
                color: var(--orange);
                font-size: .8rem;
                font-weight: 800;
                text-align: center;
            }

            .date-row {
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: 14px;
                margin: 19px 0;

                span {
                    color: var(--navy);
                    font-size: 13px;
                    font-weight: 900;
                }
            }

            .date-pill {
                position: relative;
                min-width: 73px;
                height: 35px;
                display: inline-grid;
                place-items: center;
                border: 2px solid transparent;
                border-radius: 5px;
                background: #f6f6f6;
                color: var(--navy);
                font-family: "LolapeluzaBlack", Montserrat, Arial, sans-serif;
                font-size: 13px;
                font-weight: 900;
                cursor: pointer;
                transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

                input {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    opacity: 0;
                    pointer-events: none;
                }

                &:has(input:checked) {
                    background: var(--navy);
                    color: var(--white);
                }

                &:has(input:focus-visible) {
                    border-color: var(--cyan);
                }
            }

            .privacy {
                display: flex;
                align-items: center;
                gap: 7px;
                margin: -2px 0 12px;
                color: #6d6b75;
                font-size: 11px;
                font-weight: 600;

                input {
                    width: 12px;
                    height: 12px;
                    accent-color: var(--navy);
                }

                a {
                    color: #f49b23;
                    font-weight: 900;
                }

                &.has-error input {
                    outline-color: rgba(255, 113, 34, 0.85);
                }
            }

            .privacy + .field-error {
                margin: -8px 0 9px;
            }

            .submit {
                position: relative;
                width: 100%;
                min-height: 3rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                border: 0;
                border-radius: .5rem;
                background: var(--orange);
                color: var(--white);
                font-size: 1rem;
                font-weight: 600;
                text-transform: uppercase;
                cursor: pointer;
                box-shadow: 0 9px 18px rgba(255, 113, 34, 0.22);

                &::before {
                    content: "";
                    width: 18px;
                    height: 18px;
                    display: none;
                    border: 3px solid rgba(255, 255, 255, 0.42);
                    border-top-color: var(--white);
                    border-radius: 50%;
                    animation: spin 0.75s linear infinite;
                }
            }

            &.is-loading {
                .submit {
                    cursor: wait;
                    opacity: 0.86;

                    &::before {
                        display: block;
                    }
                }
            }
        }
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.content {
    width: min(100%, 1358px);
    margin: 0 auto;
    padding: 30px 18px 0;
    background:
        radial-gradient(circle at 45% 52%, rgba(219, 245, 238, 0.4), transparent 26%),
        var(--white);
}

.container__programas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 27px;
    margin-bottom: 56px;

    .program-card {
        position: relative;
        min-height: 420px;
        overflow: hidden;
        border-radius: 1rem;
        background: #e8e8ed;
        box-shadow: 0 14px 34px rgba(16, 7, 70, 0.12);

        .program-image,
        .placeholder {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .program-band {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            min-height: 130px;
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            border-radius: 0 0 1rem 1rem;
            background: rgba(24, 18, 87, 0.93);
            color: var(--white);

            .quero-bolsa {
                color: var(--yellow);
                font-family: "LolapeluzaBlack", "Arial Black", Montserrat, Arial, sans-serif;
                font-size: clamp(2.7rem, 12vw, 3.5rem);
                font-weight: 900;
                line-height: 0.85;
                letter-spacing: -0.02em;
                text-shadow: 0 4px 0 rgba(0, 0, 0, 0.04);

                span {
                    display: inline-block;
                    margin-left: 1.4rem;
                }
            }

            p {
                margin: 0;
                font-size: .9rem;
                line-height: 1.45;
                font-weight: 600;
                text-transform: uppercase;
            }

            strong,
            .program-band-middle-school {
                display: block;
                font-size: 1.15rem;
                line-height: 1;
            }
        }
    }
}

.container__intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: center;
    margin-bottom: 52px;

    .intro-copy {
        padding-left: 0;

        h2 {
            margin: 0 0 30px;
            color: var(--navy);
            font-size: clamp(2rem, 10vw, 2.56rem);
            line-height: 1.1;
            font-weight: 900;
            letter-spacing: -0.03em;
            text-transform: uppercase;
        }

        .highlight-line {
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: 16px;
            align-items: center;
            margin-bottom: 28px;

            .highlight-star {
                color: #ffb120;
                font-size: 3rem;
                line-height: 1;
            }

            p {
                margin: 0;
                color: var(--navy);
                font-size: 1.25rem;
                line-height: 1.17;
                font-weight: 900;
            }
        }

        .orange-copy {
            margin: 0 0 24px;
            color: var(--orange);
            font-size: 1.125rem;
            line-height: 1.35;
            font-weight: 900;
            letter-spacing: 0.05em;
        }

        > p:not(.orange-copy) {
            margin: 0 0 30px;
            color: #34345e;
            font-size: 1.05rem;
            line-height: 1.31;
            font-weight: 600;
        }

        .cta {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: .5rem;
            background: var(--orange);
            color: var(--white);
            text-align: center;
            font-size: 1rem;
            line-height: 1.5;
            font-weight: 600;
            text-transform: uppercase;
            padding: 1rem 3rem;
        }
    }

    .school-card {
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        background: var(--navy);
        box-shadow: 0 14px 34px rgba(16, 7, 70, 0.14);

        .school-image,
        .placeholder {
            display: block;
            width: 100%;
            height: 290px;
            object-fit: cover;
            object-position: center;
        }

        .school-features {
            width: 100%;
            min-height: 152px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 1rem;
            background: rgba(23, 15, 83, 0.96);
            color: var(--white);
            text-align: center;

            .feature {
                width: 9rem;
                display: grid;
                justify-items: center;
                align-content: start;
                gap: .5rem;

                .feature-icon {
                    width: 4rem;
                    height: 4rem;
                    display: grid;
                    place-items: center;
                    border-radius: 50%;
                    background: var(--white);
                    color: var(--navy);

                    .icon {
                        width: 2.25rem;
                        height: 2.25rem;
                        stroke-width: 2.2;
                    }
                }

                strong {
                    display: block;
                    font-size: .75rem;
                    line-height: 1.5;
                    font-weight: 600;
                    text-transform: uppercase;
                }
            }
        }
    }
}

.info-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 0 0 24px;

    .info-card {
        min-height: 210px;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 24px;
        padding: 1rem;
        border-radius: 10px;
        background: var(--white);
        box-shadow: 0 12px 34px rgba(19, 12, 74, 0.08);
        text-align: center;

        > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            height: 100%;
        }

        .info-icon {
            color: var(--navy);
            margin: 0 auto;

            .icon {
                width: 90px;
                height: 90px;
                stroke-width: 1.8;
            }
        }

        .kicker {
            display: block;
            margin-bottom: 13px;
            color: var(--orange);
            font-size: 1rem;
            line-height: 1;
            font-weight: 900;
            text-transform: uppercase;
        }

        p {
            margin: 0;
            color: var(--navy);
            font-size: 1rem;
            line-height: 1.5;
            font-weight: 700;
        }

        .small-action {
            width: min(100%, 196px);
            height: 3rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            margin-top: auto;
            border: 1px solid #7a7582;
            border-radius: 5px;
            background: var(--white);
            color: var(--navy);
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;

            .icon {
                width: 16px;
                height: 16px;
            }

            &.outline-orange {
                width: min(100%, 208px);
                border-color: var(--orange);
                color: var(--orange);
            }
        }
    }
}

.bottom-banner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "titulo desconto"
        "datas escolha"
        "botao botao";
    gap: clamp(18px, 4vw, 28px) clamp(8px, 2vw, 18px);
    align-items: center;
    justify-items: center;
    min-height: 0;
    margin: 0 0 18px;
    padding: 22px 16px 28px;
    border-radius: 8px;
    overflow: hidden;
    color: var(--white);
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 15%, rgba(0, 0, 0, 0.08) 42%, transparent 72%),
        linear-gradient(180deg, #160948 0%, #211064 100%);
    background-size: 150px 150px, 150px 150px, 100% 100%, 100% 100%;

    > * {
        min-width: 0;
        max-width: 100%;
    }

    .banner-title {
        grid-area: titulo;
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 1;

        .event-title {
            .exame {
                font-size: 4rem;
            }

            .de {
                margin-right: .25rem;
                font-size: clamp(1.75rem, 8vw, 2.15rem);
            }

            .bolsa {
                font-size: clamp(2.9rem, 13vw, 3.55rem);
            }

            .year-wrap {
                top: -.45rem;
                justify-content: center;
                gap: .25rem;

                .year {
                    font-size: clamp(1.45rem, 6vw, 1.85rem);
                }

                .scribble {
                    width: clamp(40px, 10vw, 58px);
                    height: clamp(16px, 4vw, 24px);
                }
            }
        }
    }

    .banner-discount {
        grid-area: desconto;
        width: min(100%, 9.75rem);
        aspect-ratio: 1.18;
        min-height: 0;
        padding: 1rem .5rem 0;

        .up-to {
            font-size: clamp(.68rem, 3vw, .78rem);
            z-index: 2;
        }

        .percent {
            font-size: clamp(3.1rem, 14vw, 3.5rem);
        }
    }

    .mini-choice {
        grid-area: escolha;
        width: min(100%, 10.75rem);

        .choice-purple {
            font-size: clamp(.62rem, 3vw, .78rem);
        }

        .choice-orange {
            font-size: clamp(.95rem, 4.4vw, 1.18rem);
        }

        .choice-blue {
            font-size: clamp(.44rem, 2vw, .62rem);
        }
    }

    .banner-actions {
        grid-area: datas;
        width: 100%;
        display: grid;
        gap: 10px;
        align-items: center;
        justify-items: center;
        margin: 0;

        > strong {
            color: var(--white);
            font-size: clamp(.7rem, 3.4vw, .95rem);
            line-height: 1.1;
            font-weight: 900;
            text-align: center;
            text-transform: uppercase;
        }
    }

    .banner-button {
        grid-area: botao;
        width: min(86%, 235px);
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        background: var(--cyan);
        color: var(--white);
        font-size: clamp(.85rem, 4vw, 1.15rem);
        font-weight: 900;
        text-align: center;
        text-transform: uppercase;
        transform: rotate(-2deg);
    }
}

.footer {
    position: relative;
    min-height: 89px;
    background: var(--orange);
    color: var(--white);

    .footer-inner {
        width: min(100%, 1358px);
        min-height: 89px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: center;
        justify-items: center;
        margin: 0 auto;
        padding: 22px;
    }

    .brand {
        width: 150px;
    }

    .socials {
        display: flex;
        gap: 18px;
        align-items: center;
        justify-content: center;

        .social {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--white);
            font-size: 24px;
            font-weight: 900;

            .icon,
            img {
                display: block;
                width: 33px;
                height: 33px;
            }

            .icon {
                stroke-width: 2.4;
            }

            img {
                filter: invert(1);
            }
        }
    }
}

.success-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(13, 6, 49, 0.68);

    &[hidden] {
        display: none;
    }

    .success-card {
        position: relative;
        width: min(495px, 100%);
        min-height: 195px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        align-items: start;
        padding: 25px 28px;
        border-radius: 19px;
        background: var(--white);
        color: #4a4851;
        box-shadow: var(--shadow);

        .modal-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border: 0;
            border-radius: 50%;
            background: #f1f1f4;
            color: var(--navy);
            font-size: 22px;
            font-weight: 900;
            line-height: 1;
            cursor: pointer;
        }

        .check-badge {
            width: 56px;
            height: 56px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: #42c951;
            color: var(--white);
            box-shadow:
                inset 0 0 0 6px rgba(255, 255, 255, 0.28),
                0 4px 9px rgba(66, 201, 81, 0.28);
            margin: 0 auto;

            .icon {
                width: 34px;
                height: 34px;
                stroke-width: 4;
            }
        }

        p {
            margin: 2px 0 0;
            font-size: 1.25rem;
            line-height: 1.12;
            font-weight: 500;
        }
    }
}

.placeholder {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px dashed rgba(255, 255, 255, 0.85);
    background:
        linear-gradient(135deg, rgba(16, 169, 228, 0.82), rgba(255, 202, 5, 0.78)),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.16) 0 10px,
            rgba(255, 255, 255, 0.06) 10px 20px
        );
    color: var(--white);
    text-align: center;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.28), transparent 32%);
    }

    .placeholder-content {
        position: relative;
        z-index: 1;
        width: min(88%, 380px);
        padding: 15px 18px;
        border-radius: 8px;
        background: rgba(20, 10, 73, 0.74);
        box-shadow: 0 8px 18px rgba(12, 4, 45, 0.18);
    }

    span {
        display: block;
        font-size: 17px;
        line-height: 1.1;
        font-weight: 900;
    }

    small {
        display: block;
        margin-top: 5px;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.9);
        font-size: 12px;
        line-height: 1.2;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 576px) {
    .discount,
    .banner-discount {
        .percent {
            font-size: clamp(4.6rem, 10vw, 4.5rem);
        }
    }

    .mini-choice {
        width: min(100%, 21rem);

        .choice-purple {
            font-size: 1.25rem;
        }

        .choice-orange {
            font-size: 2rem;
        }

        .choice-blue {
            font-size: 1.125rem;
        }
    }

    .container__hero {
        .container {
            .hero-logo {
                width: 170px;
            }

            .discount {
                width: 18rem;
            }

            .estudante {
                .hero-student {
                    max-width: 300px;
                }
            }

            .lead-form {
                padding: 2.25rem 1rem;
            }
        }
    }

    .content {
        padding-inline: 34px;
    }

    .container__programas {
        margin-bottom: 78px;

        .program-card {
            min-height: 505px;

            .program-band {
                border-radius: 0 0 1.5rem 1.5rem;

                p {
                    font-size: 1rem;
                    line-height: 1.6;
                }

                strong,
                .program-band-middle-school {
                    font-size: 1.25rem;
                }
            }
        }
    }

    .container__intro {
        .school-card {
            .school-image,
            .placeholder {
                height: 360px;
            }
        }
    }

    .bottom-banner {
        padding: 30px 24px;

        .banner-discount {
            width: min(100%, 16rem);

            .percent {
                font-size: clamp(4.6rem, 10vw, 5.5rem);
            }
            
            .up-to {
                left: -1.5rem;
                font-size: clamp(.68rem, 3vw, .78rem);
                z-index: 2;
            }

        }

        .banner-title {
            .event-title {
                .exame {
                    font-size: 6rem;
                }
            }
        }

        .mini-choice {
            width: min(100%, 21rem);
        }

        .banner-actions {
            width: min(100%, 17.5rem);

            > strong {
                font-size: 1rem;
            }
        }

        .date-box {
            min-height: 110px;
            font-size: 1.45rem;
        }

        .banner-button {
            width: min(100%, 220px);
            min-height: 64px;
            font-size: 1rem;
        }
    }

    .footer {
        .footer-inner {
            grid-template-columns: 1fr auto;
            justify-items: start;
            padding: 0 78px;
        }

        .socials {
            justify-self: end;
        }
    }
}

@media (min-width: 768px) {
    .container__hero {
        .container {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-areas:
                "titulo titulo logo logo"
                "titulo titulo desconto escolha"
                "estudante estudante formulario formulario";
            column-gap: 1rem;

            .hero-logo {
                width: 150px;
            }

            .discount {
                justify-self: center;
                width: min(100%, 15rem);

                .percent {
                    font-size: clamp(3.25rem, 7vw, 4.5rem);
                }

                .caption {
                    span {
                        font-size: 1rem;
                    }

                    strong {
                        font-size: 1.25rem;
                    }
                }
            }

            .mini-choice {
                justify-self: center;
                width: min(100%, 15rem);

                .choice-purple {
                    font-size: clamp(.75rem, 2vw, 1rem);
                }

                .choice-orange {
                    font-size: clamp(1.1rem, 2.8vw, 1.5rem);
                }

                .choice-blue {
                    font-size: clamp(.58rem, 1.5vw, .875rem);
                }
            }

            .estudante {
                display: flex;

                .hero-student {
                    max-width: 398px;
                    margin-left: auto;
                }

                .date-box {
                    left: 10%;
                    right: 0;
                    width: 20rem;
                    transform: none;
                }
            }

            .lead-form {
                max-width: 500px;
            }
        }
    }

    .container__programas {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        .program-card {
            .program-band {
                gap: 1.5rem;

                .quero-bolsa {
                    font-size: 1.75rem;

                    span {
                        margin-left: 2rem;
                    }
                }

                p {
                    font-size: 1.25rem;
                }
            }
        }
    }

    .container__intro {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        .school-card {
            .school-image,
            .placeholder {
                height: 470px;
            }
        }
    }

    .info-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bottom-banner {
        padding: 34px 32px;

        .banner-title {
            .event-title {
                .exame {
                    font-size: 7rem;
                }
    
                .de {
                    font-size: 4rem;
                }
    
                .bolsa {
                    font-size: 8rem;
                }
    
                .year-wrap {

                    .year {
                        font-size: 4rem;
                    }
                }
            }
        }

        .banner-discount {
            width: min(100%, 18rem);
        }

        .mini-choice {
            width: min(100%, 22rem);
            
            .choice-purple {
                font-size: 1.25rem;
            }

            .choice-orange {
                font-size: 1.5rem;
            }

            .choice-blue {
                font-size: 1rem;
            }
        }
    }

    .footer {
        .footer-inner {
            position: relative;

            .brand {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .socials {
            justify-self: end;
        }
    }
}

@media (min-width: 992px) {
    .container__hero {
        .container {
            grid-template-columns: repeat(6, minmax(0, 1fr));
            grid-template-rows: 3rem repeat(4, minmax(7.5rem, auto));
            grid-template-areas:
                ". . . logo logo logo"
                ". . estudante estudante formulario formulario"
                ". . estudante estudante formulario formulario"
                "desconto desconto estudante estudante formulario formulario"
                "escolha escolha estudante estudante formulario formulario";
            min-height: 820px;
            padding: 2rem 2rem 0;
            column-gap: 1rem;
            row-gap: 2rem;

            .hero-logo {
                width: 210px;
            }

            .hero-title-area {
                position: absolute;
                top: 3rem;
                left: 2rem;
                justify-content: flex-start;

                .event-title {
                    .exame {
                        font-size: 9rem;
                    }

                    .de {
                        font-size: 6rem;
                    }

                    .bolsa {
                        font-size: 11rem;
                    }
                }
            }

            .discount {
                align-self: end;
                justify-self: center;
                width: 18rem;

                > img {
                    max-width: 18rem;
                }

                .percent {
                    font-size: 4.5rem;
                }

                .caption {
                    span,
                    strong {
                        font-size: 1.125rem;
                    }
                }
            }

            .mini-choice {
                align-self: start;
                justify-self: start;
                width: 23rem;

                .choice-purple {
                    font-size: 1.25rem;
                }

                .choice-orange {
                    font-size: 2rem;
                }

                .choice-blue {
                    font-size: 1.125rem;
                }
            }

            .estudante {
                align-self: end;
                display: flex;

                .hero-student {
                    max-width: 360px;
                    margin-left: auto;
                }

                .date-box {
                    display: none;
                    left: auto;
                    right: -2rem;
                    width: 230px;
                    transform: none;
                }
            }

            .lead-form {
                align-self: center;
                max-width: 500px;
                margin-bottom: 0;
            }
        }
    }

    .container__programas {
        .program-card {
            .program-band {
                .quero-bolsa {
                    font-size: 3.5rem;
                }
            }
        }
    }

    .container__intro {
        gap: 58px;
    }

    .info-row {
        gap: 50px;

        .info-card {
            grid-template-columns: 120px 1fr;
            text-align: left;

            > div {
                align-items: flex-start;
            }

            .small-action {
                margin-left: auto;
            }
        }
    }

    .bottom-banner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .95fr);
        grid-template-areas:
            "titulo desconto datas escolha"
            "botao desconto datas escolha";
        gap: clamp(10px, 1.6vw, 22px);
        min-height: clamp(250px, 28vw, 340px);
        padding: clamp(24px, 3vw, 38px) clamp(16px, 3.4vw, 44px) clamp(22px, 2.4vw, 28px);
        border-radius: 19px;

        .banner-title {
            .event-title {
                .exame {
                    font-size: clamp(3.2rem, 6.4vw, 6.1rem);
                }

                .de {
                    font-size: clamp(2.15rem, 4.7vw, 4.4rem);
                }

                .bolsa {
                    font-size: clamp(3.55rem, 7vw, 6.5rem);
                }

                .year-wrap {
                    .year {
                        font-size: clamp(1.85rem, 3.8vw, 3.15rem);
                    }
                }
            }
        }

        .banner-discount {
            width: min(100%, clamp(11rem, 23vw, 20rem));

            .up-to {
                left: 0;
                font-size: clamp(.72rem, 1.8vw, 1.5rem);
            }

            .percent {
                font-size: clamp(3.25rem, 8vw, 5rem);
            }
        }

        .mini-choice {
            width: min(100%, clamp(10.75rem, 26vw, 28rem));

            .choice-purple {
                left: 15%;
                font-size: .75rem;
            }

            .choice-orange {
                font-size: 1.25rem;
            }

            .choice-blue {
                left: 32%;
                font-size: .625rem;
            }
        }

        .banner-actions {
            > strong {
                font-size: clamp(.78rem, 1.55vw, 1.28rem);
            }
        }

        .date-box {
            min-height: clamp(84px, 10vw, 125px);
            font-size: clamp(1.05rem, 2vw, 1.7rem);
            border-radius: clamp(14px, 1.7vw, 21px);
        }
    }
}

@media (min-width: 1200px) {
    .event-title {
        .year-wrap {
            .scribble {
                width: 96px;
                height: 36px;
            }
        }
    }

    .container__hero {
        .container {
            min-height: 900px;
            row-gap: 1rem;

            .hero-title-area {
                .event-title {
                    .exame {
                        font-size: 10rem;
                    }

                    .bolsa {
                        font-size: 13rem;
                    }
                }
            }

            .lead-form {
                padding: 2rem 2rem;
            }

            .discount {
                width: 20rem;

                .up-to {
                    font-size: 1.5rem;
                }

                .percent {
                    font-size: 6rem;
                }

                .caption {
                    span {
                        font-size: 1.25rem;
                    }

                    strong {
                        font-size: 1.5rem;
                    }
                }
            }

            .mini-choice {
                width: 28rem;

                .choice-purple {
                    font-size: 1.5rem;
                }

                .choice-orange {
                    font-size: 2rem;
                }

                .choice-blue {
                    font-size: 1.25rem;
                }
            }

            .estudante {
                .hero-student {
                    max-width: 398px;
                }

                .date-box {
                    right: -4rem;
                }
            }
        }
    }

    .content {
        padding-inline: 34px;
    }
}