:root {
    --navy: #06162c;
    --navy-2: #0a2548;
    --gold: #d7a85a;
    --gold-2: #f0c982;
    --text: #f7f3ea;
    --muted: #c7cfda;
    --line: rgba(164, 184, 211, 0.35);
    --card: rgba(5, 23, 48, 0.72);
}


/* =========================================================
   RESET / BASE
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background: var(--navy);
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   BACKGROUND
========================================================= */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            180deg,
            #06162c 0%,
            #071b35 45%,
            #06162c 100%
        );
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(15, 52, 97, 0.18),
            transparent 45%
        );

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.page-shell {
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 28px 18px 56px;
}


/* =========================================================
   BRAND / LOGO
========================================================= */

.brand {
    text-align: center;
    margin: 2px 0 26px;
}

.brand img {
    display: block;
    margin: 0 auto -2px;
    object-fit: contain;
}

.brand-name {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--gold-2);
    font-size: 28px;
    letter-spacing: 0.16em;
}

.brand-sub {
    color: var(--gold-2);
    font-size: 10px;
    letter-spacing: 0.18em;
    margin-top: 4px;
}


/* =========================================================
   HERO
========================================================= */

.hero h1 {
    margin: 0 0 24px;
    text-align: center;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;

    line-height: 1.15;
    font-size: clamp(21px, 5.4vw, 30px);
}

.hero h1 span,
.hero h1 strong {
    display: block;
    white-space: normal;
}

.hero h1 strong {
    color: var(--gold-2);
    font-weight: 400;
    margin-top: 5px;
}


/* =========================================================
   VÍDEO
========================================================= */

.video-frame {
    position: relative;

    width: min(78%, 330px);
    aspect-ratio: 9 / 16;

    margin: 0 auto 18px;

    border: 2px solid var(--gold-2);
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.32);

    background: #07121f;
}

.video-frame img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}

.video-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0, 0, 0, 0.2)
        );

    pointer-events: none;
}

.play-btn {
    position: absolute;
    z-index: 2;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 74px;
    height: 74px;

    border-radius: 50%;
    border: 2px solid var(--gold-2);

    background: rgba(3, 10, 20, 0.66);

    color: var(--gold-2);

    font-size: 30px;

    cursor: pointer;
}

.video-time {
    position: absolute;
    right: 10px;
    bottom: 10px;

    z-index: 2;

    background: rgba(0, 0, 0, 0.68);

    padding: 4px 7px;

    border-radius: 7px;

    font-size: 13px;
}

.video-note {
    text-align: center;

    color: var(--muted);

    font-size: 12px;

    margin: -7px 0 20px;
}


/* =========================================================
   CARD / SUCCESS
========================================================= */

.card,
.success {
    border: 1px solid var(--line);

    background:
        linear-gradient(
            180deg,
            rgba(8, 34, 67, 0.84),
            rgba(4, 22, 46, 0.84)
        );

    border-radius: 24px;

    padding: 24px 20px;

    margin: 0 auto 28px;

    backdrop-filter: blur(5px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   TEXTOS
========================================================= */

.eyebrow {
    color: var(--gold-2);

    font-size: 12px;

    letter-spacing: 0.22em;

    margin-bottom: 10px;
}

h2 {
    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;

    font-size: clamp(25px, 6.6vw, 34px);

    line-height: 1.12;

    margin: 0 0 20px;
}

.subcopy {
    color: var(--muted);

    font-size: 16px;

    line-height: 1.45;

    margin: -8px 0 22px;
}


/* =========================================================
   SELECT
========================================================= */

.select-wrap {
    position: relative;

    margin-bottom: 16px;
}

.select-wrap::after {
    content: "⌄";

    position: absolute;

    right: 18px;
    top: 50%;

    transform: translateY(-58%);

    color: var(--gold-2);

    font-size: 28px;

    pointer-events: none;
}


/* =========================================================
   CAMPOS
========================================================= */

select,
input {
    width: 100%;

    border: 1px solid rgba(170, 191, 218, 0.42);

    background: rgba(9, 34, 66, 0.72);

    color: var(--text);

    border-radius: 15px;

    padding: 17px 18px;

    font: inherit;

    outline: none;
}

select {
    appearance: none;

    padding-right: 52px;

    color: #e7ecf2;
}

select:focus,
input:focus {
    border-color: var(--gold-2);

    box-shadow:
        0 0 0 3px rgba(215, 168, 90, 0.11);
}

label {
    display: block;

    font-size: 13px;

    color: #e7edf4;

    margin: 13px 0 7px;
}


/* =========================================================
   TELEFONE / DDI
========================================================= */

.phone-combo {
    display: grid;

    grid-template-columns:
        minmax(140px, 42%) 1fr;

    gap: 0;
}

.phone-combo select,
.phone-combo input {
    width: 100%;
    height: 58px;

    background: rgba(3, 27, 53, 0.72);

    color: #fff;

    border:
        1px solid rgba(157, 190, 221, 0.42);

    font: inherit;

    outline: none;
}

.phone-combo select {
    border-radius: 16px 0 0 16px;

    padding: 0 10px;
}

.phone-combo input {
    border-radius: 0 16px 16px 0;

    padding: 0 16px;

    border-left: 0;
}

.phone-combo select:focus,
.phone-combo input:focus {
    border-color: #d6aa5d;
}


/* =========================================================
   BOTÃO PRINCIPAL
========================================================= */

.primary-btn {
    display: block;

    width: 100%;

    border: 0;

    border-radius: 17px;

    padding: 18px 20px;

    text-align: center;

    text-decoration: none;

    background:
        linear-gradient(
            90deg,
            #d2a25b,
            #f0cb84,
            #c18e48
        );

    color: #0b1e37;

    font-weight: 800;

    letter-spacing: 0.08em;

    font-size: 15px;

    cursor: pointer;

    transition:
        0.2s transform,
        0.2s opacity,
        0.2s filter;
}

.primary-btn:hover {
    filter: brightness(1.04);
}

.primary-btn:active {
    transform: translateY(1px);
}

.primary-btn:disabled {
    opacity: 0.47;

    cursor: not-allowed;

    filter: grayscale(0.2);
}


/* =========================================================
   PERÍODO DE CONTATO
========================================================= */

fieldset {
    border: 0;

    padding: 0;

    margin: 22px 0 20px;
}

legend {
    font-size: 15px;

    margin-bottom: 14px;
}

.radio-row {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;
}

.radio-row label {
    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    white-space: nowrap;

    font-size: 13px;

    cursor: pointer;
}

.radio-row input {
    appearance: none;

    width: 19px;
    height: 19px;

    padding: 0;

    margin: 0;

    border-radius: 50%;

    border:
        2px solid var(--gold);

    background: transparent;
}

.radio-row input:checked {
    box-shadow:
        inset 0 0 0 4px #0a2548;

    background: var(--gold-2);
}


/* =========================================================
   PRIVACIDADE
========================================================= */

.privacy-note {
    text-align: center;

    color: var(--muted);

    font-size: 11px;

    margin: 13px 0 0;
}


/* =========================================================
   UTILITÁRIOS
========================================================= */

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute !important;

    width: 1px;
    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   SUCESSO
========================================================= */

.success {
    text-align: center;

    padding: 42px 24px;
}

.check {
    width: 110px;
    height: 110px;

    border:
        3px solid var(--gold-2);

    border-radius: 50%;

    display: grid;

    place-items: center;

    margin: 4px auto 28px;

    color: var(--gold-2);

    font-size: 54px;

    box-shadow:
        0 0 28px rgba(215, 168, 90, 0.17);
}

.success h2 strong {
    color: var(--gold-2);

    font-weight: 400;
}

.success p {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
}

.success-copy {
    color: var(--muted) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 16px !important;

    line-height: 1.55;

    margin-bottom: 24px;
}

.whatsapp {
    margin: 26px 0 18px;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    text-align: center;

    color: var(--gold-2);

    padding: 12px 6px 0;
}

.footer-line {
    width: 84px;
    height: 1px;

    background: var(--gold);

    margin: 0 auto 22px;
}

.tagline {
    letter-spacing: 0.18em;

    font-size: 13px;

    line-height: 1.6;
}

footer nav {
    margin-top: 18px;

    font-size: 11px;

    color: var(--muted);
}

footer a {
    color: var(--muted);

    text-decoration: none;
}

footer nav span {
    margin: 0 7px;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 440px) {

    .page-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .radio-row {
        gap: 4px;
    }

    .radio-row label {
        font-size: 11.5px;

        gap: 4px;
    }

    .radio-row input {
        width: 17px;
        height: 17px;
    }

    .card {
        padding: 22px 16px;
    }

    .hero h1 {
        font-size: 20px;
    }

    .brand {
        margin-bottom: 20px;
    }
}


@media (max-width: 360px) {

    .radio-row {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }

    .radio-row label {
        justify-content: flex-start;

        font-size: 13px;
    }
}