/* =====================================================================
   Carro Certo — campanha "Qual o Carro Certo?"
   ===================================================================== */

/* --- Tokens --------------------------------------------------------- */
:root {
    --navy-900: #0c1a30;
    --navy-800: #14294a;
    --navy-700: #1c3a63;
    --brand-300: #ff9966;
    --brand-400: #ff7a33;
    --brand-500: #ff5500;
    --brand-700: #993300;
    --white:    #ffffff;
    --text:     rgba(255, 255, 255, .82);
    --text-muted: rgba(255, 255, 255, .55);
    --error:    #ff8f7a;

    --sans: "Amulya", "Lato", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --script: "Great Vibes", "Brush Script MT", cursive;

    --radius: 18px;
    --radius-sm: 10px;
    --transition: 260ms cubic-bezier(.2, .7, .3, 1);
}

/* --- Base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sans);
    font-weight: 400;
    color: var(--text);
    background: var(--navy-900);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

button, input, select { font: inherit; color: inherit; }

a { color: var(--brand-400); }

:focus-visible {
    outline: 3px solid var(--brand-400);
    outline-offset: 3px;
    border-radius: 4px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

/* --- Background ----------------------------------------------------- */
.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 80% at 50% 8%, rgba(31, 96, 146, .38), transparent 62%),
        linear-gradient(158deg, #17294a 0%, #122340 48%, #0b1729 100%);
}

.bg > span { position: absolute; inset: 0; display: block; }

.bg__glow {
    background: radial-gradient(105% 92% at -6% 26%, rgba(255, 85, 0, .72), rgba(255, 85, 0, 0) 58%);
    opacity: 0;
    transition: opacity 900ms ease;
}

body[data-screen="wait"]    .bg__glow,
body[data-screen="win"]     .bg__glow,
body[data-screen="thanks"]  .bg__glow { opacity: 1; }

.bg__stripe--1 {
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 33% 100%);
    background: rgba(255, 255, 255, .035);
}
.bg__stripe--2 {
    clip-path: polygon(87% 0, 100% 0, 100% 58%, 74% 100%, 58% 100%);
    background: linear-gradient(180deg, rgba(255, 85, 0, .34), rgba(255, 85, 0, .02));
}
.bg__stripe--3 {
    clip-path: polygon(0 44%, 24% 100%, 0 100%);
    background: rgba(255, 255, 255, .03);
}
.bg__stripe--4 {
    clip-path: polygon(0 68%, 16% 100%, 0 100%);
    background: rgba(255, 85, 0, .10);
    opacity: 0;
    transition: opacity 900ms ease;
}
body[data-screen="wait"] .bg__stripe--4,
body[data-screen="win"]  .bg__stripe--4 { opacity: 1; }

/* --- Header --------------------------------------------------------- */
.header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px clamp(20px, 4vw, 58px) 0;
}

.logo {
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1;
    color: var(--white);
    font-weight: 500;
    font-style: italic;
}
.logo em { color: var(--brand-500); }

.brand {
    width: clamp(48px, 5vw, 68px);
    height: auto;
    fill: var(--white);
    opacity: .95;
}

/* --- Stage & screens ------------------------------------------------ */
.stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 92px);
    padding: clamp(28px, 5vh, 64px) clamp(20px, 4vw, 58px) 128px;
}

.screen {
    display: none;
    width: 100%;
    max-width: 1060px;
    text-align: center;
}

.screen--active {
    display: block;
    animation: enter 520ms cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes enter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* --- Typography ----------------------------------------------------- */
.title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.6rem, 4.6vw, 3.2rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: var(--white);
    @media (width >= 40rem) {
        margin: 0 0 14px;
    }
}

.title--medium {
    font-size: clamp(2.3rem, 6vw, 3.1rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -.005em;
}

.title--large {
    font-size: clamp(3.4rem, 12.5vw, 8.4rem);
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.015em;
    text-transform: uppercase;
    text-shadow: 0 0 44px rgba(255, 200, 150, .45), 0 0 110px rgba(255, 140, 60, .25);
}

.title--medium .ellipsis { font-weight: 300; color: var(--text); }

.subtitle {
    margin: 0 auto;
    max-width: 48ch;
    font-size: clamp(1.125rem, 0.125rem + 3.3333vw, 1.9rem);
    font-weight: 300;
    line-height: 1.45;
    color: var(--text);
}
.subtitle strong { font-weight: 700; color: var(--white); }

.subtitle--prize { max-width: 40ch; }
.subtitle--prize strong { text-transform: uppercase; letter-spacing: .015em; }
.subtitle--medium { font-size: clamp(1rem, 0.4286rem + 1.9048vw, 1.5rem); }
.prize-detail {
    margin: 12px auto 0;
    max-width: 90%;
    font-size: .96rem;
    font-weight: 300;
    line-height: 1.55;
    color: var(--text-muted);
}

.divider {
    display: block;
    width: min(340px, 60%);
    height: 2px;
    margin: 26px auto 0;
    background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
}
.divider--short { width: min(210px, 45%); margin-top: 34px; }

.screen-footer {
    margin: 64px 0 0;
    font-size: clamp(1rem, 2vw, 1.8rem);
    font-weight: 300;
    color: var(--text);
}
.screen-footer strong { font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: .015em; }

.screen-footer--small {
    margin-top: 26px;
    max-width: 46ch;
    margin-inline: auto;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.screen-footer--small strong { text-transform: none; }

.link { color: var(--brand-400); text-underline-offset: 3px; }

/* --- Garage --------------------------------------------------------- */
.garage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 4vw, 52px);
    max-width: 940px;
    margin: clamp(40px, 6vh, 72px) auto 0;
}

.car {
    position: relative;
    aspect-ratio: 1 / .92;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform var(--transition), opacity var(--transition);
}

.car__glow {
    position: absolute;
    inset: -18% -28%;
    background: radial-gradient(50% 44% at 50% 58%, rgba(255, 85, 0, .78), rgba(255, 85, 0, 0) 72%);
    opacity: .8;
    transition: opacity var(--transition);
    pointer-events: none;
}

.car__image {
    position: absolute;
    left: 50%;
    bottom: 13%;
    width: 132%;
    max-width: none;
    transform: translateX(-50%);
    pointer-events: none;
}

.car__frame {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
    pointer-events: none;
}

.car__number {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(6.5rem, 13vw, 10.5rem);
    font-weight: 900;
    line-height: 1;
    color: var(--white);
    text-shadow: 0 12px 34px rgba(4, 16, 32, .55);
    transition: transform var(--transition);
    pointer-events: none;
}

.car__cta,
.car__empty {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    padding: 4px 16px;
    border-radius: 7px;
    font-size: clamp(.95rem, 1.3vw, 1.125rem);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.car__cta {
    background: var(--brand-500);
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(6, 30, 44, .45);
}

.car__empty {
    display: none;
    background: rgba(255, 255, 255, .12);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, .2);
}

.car:hover  { transform: translateY(-7px); }
.car:hover  .car__glow,
.car:focus-visible .car__glow { opacity: 1; }
.car:hover  .car__frame,
.car:focus-visible .car__frame {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px rgba(255, 85, 0, .16), 0 22px 44px rgba(4, 16, 32, .4);
}
.car:hover .car__number { transform: scale(1.05); }
.car:hover .car__cta { background: var(--brand-400); }
.car:active { transform: translateY(-2px); }

.car--selected { animation: pulse 480ms ease both; }
@keyframes pulse {
    0%   { transform: translateY(-7px) scale(1); }
    45%  { transform: translateY(-7px) scale(1.06); }
    100% { transform: translateY(-7px) scale(1); }
}

.car--dimmed { opacity: .25; transform: scale(.94); }

.car--used { cursor: not-allowed; }
.car--used .car__cta { display: none; }
.car--used .car__empty { display: block; }
.car--used .car__glow { opacity: 0; }
.car--used .car__image { opacity: .18; filter: grayscale(.6); }
.car--used .car__number { color: rgba(255, 255, 255, .3); text-shadow: none; }
.car--used .car__frame { border-style: dashed; border-color: rgba(255, 255, 255, .28); }
.car--used:hover { transform: none; }
.car--used:hover .car__frame { border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.car--used:hover .car__number { transform: none; }

.garage--locked .car { pointer-events: none; }

.warning {
    display: none;
    max-width: 42ch;
    margin: 34px auto 0;
    padding: 12px 18px;
    background: rgba(255, 143, 122, .12);
    border: 1px solid rgba(255, 143, 122, .35);
    border-radius: var(--radius-sm);
    font-size: .92rem;
    line-height: 1.5;
    color: #ffd0c6;
}
.warning--visible { display: block; }

/* --- Wait screen ---------------------------------------------------- */
.ring {
    --diameter: clamp(200px, 34vw, 230px);
    position: relative;
    width: var(--diameter);
    aspect-ratio: 1;
    margin: 0 auto clamp(34px, 6vh, 76px);
}

.ring > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 27px;
    margin: -13px 0 0 -7px;
    border-radius: 0px;
    background: rgba(255, 255, 255, .16);
    transform: rotate(calc(var(--i) * 22.5deg)) translateY(calc(var(--diameter) * -0.5 + 14px));
    animation: ring-pulse 1.7s linear infinite;
    animation-delay: calc(var(--i) * -.106s);
}

@keyframes ring-pulse {
    0%   { background: var(--brand-400); }
    16%  { background: rgba(255, 255, 255, .95); }
    42%  { background: rgba(255, 255, 255, .38); }
    100% { background: rgba(255, 255, 255, .12); }
}

.ring__car {
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 47px rgba(255, 85, 0, 1));
}

/* --- Fail screen ---------------------------------------------------- */
.empty-illustration {
    position: relative;
    width: clamp(200px, 30vw, 300px);
    margin: 0 auto clamp(28px, 5vh, 56px);
}
.empty-illustration__car { width: 100%; opacity: .3; filter: grayscale(.7); }

/* --- Win screen ----------------------------------------------------- */
.screen--win { position: relative; }

.spotlight {
    position: absolute;
    top: 4%;
    width: min(420px, 34vw);
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 8%, rgba(224, 245, 253, .62));
    filter: blur(26px);
    pointer-events: none;
}
.spotlight--left  { left: 2%;  transform: rotate(26deg); }
.spotlight--right { right: 2%; transform: rotate(-26deg) scaleX(-1); }

#screen-thanks { position: relative; }

/* --- Form ----------------------------------------------------------- */
.form-card {
    max-width: 620px;
    margin: clamp(36px, 6vh, 60px) auto 0;
    padding: clamp(26px, 4vw, 40px);
    text-align: left;
    background: rgba(9, 24, 44, .62);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 70px rgba(3, 12, 26, .45);
}

.form-card__title {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
}

.form-card__note {
    margin: 0 0 26px;
    font-size: .93rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-muted);
}
.form-card__note strong {
    color: var(--brand-300);
    font-weight: 700;
    letter-spacing: .06em;
}

.form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field > label {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--text);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select {
    width: 100%;
    padding: 13px 15px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-sm);
    color: var(--white);
    transition: border-color var(--transition), background var(--transition);
}

.field select {
    appearance: none;
    padding-right: 44px;
    background-image: linear-gradient(45deg, transparent 50%, var(--brand-400) 50%),
                      linear-gradient(135deg, var(--brand-400) 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.field select option { background: var(--navy-800); color: var(--white); }

.field input::placeholder { color: rgba(255, 255, 255, .34); }

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--brand-400);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(255, 85, 0, .18);
}

.field--error input,
.field--error select { border-color: var(--error); }

.error {
    display: none;
    margin: 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--error);
}
.error--visible { display: block; }
.error--general { margin-top: 12px; text-align: center; }

/* --- Checkbox ------------------------------------------------------- */
.checkbox {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.checkbox input {
    position: absolute;
    top: 1px;
    left: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.checkbox__mark {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
    transition: background var(--transition), border-color var(--transition);
}
.checkbox__mark::after {
    content: "";
    display: block;
    width: 6px;
    height: 11px;
    margin: 3px auto 0;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(43deg);
    opacity: 0;
    transition: opacity 160ms ease;
}
.checkbox input:checked ~ .checkbox__mark {
    background: var(--brand-500);
    border-color: var(--brand-500);
}
.checkbox input:checked ~ .checkbox__mark::after { opacity: 1; }
.checkbox input:focus-visible ~ .checkbox__mark {
    outline: 3px solid var(--brand-400);
    outline-offset: 2px;
}
.checkbox__text {
    font-size: .89rem;
    font-weight: 300;
    line-height: 1.55;
    color: var(--text);
}
.field--error .checkbox__mark { border-color: var(--error); }

/* --- Marketing consent ---------------------------------------------- */
.marketing__intro {
    margin: 0 0 12px;
    font-size: .89rem;
    font-weight: 300;
    line-height: 1.55;
    color: var(--text);
}
.marketing__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 8px;
}
.radio {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.radio input {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.radio__mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
    transition: background var(--transition), border-color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.radio__mark::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transition: opacity 160ms ease;
}
.radio input:checked ~ .radio__mark {
    background: var(--brand-500);
    border-color: var(--brand-500);
}
.radio input:checked ~ .radio__mark::after { opacity: 1; }
.radio input:focus-visible ~ .radio__mark {
    outline: 3px solid var(--brand-400);
    outline-offset: 2px;
}
.radio__label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text);
}
.marketing__channels[hidden] { display: none; }
.marketing__channels-label {
    margin: 0 0 10px;
    font-size: .82rem;
    font-weight: 300;
    color: var(--text-muted);
}
.marketing__channels-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
}
.marketing__channels-grid .checkbox__text {
    font-size: .79rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.field--error .radio__mark { border-color: var(--error); }

/* --- Prize notice --------------------------------------------------- */
.field__notice {
    margin: 0;
    padding: 10px 14px;
    background: rgba(255, 85, 0, .10);
    border: 1px solid rgba(255, 85, 0, .30);
    border-left: 3px solid var(--brand-500);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--brand-300);
}

/* --- Honeypot ------------------------------------------------------- */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Buttons -------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), opacity var(--transition);
}

.btn--primary {
    background: var(--brand-500);
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(6, 30, 44, .4);
}
.btn--primary:hover { background: var(--brand-400); transform: translateY(-2px); }
.btn--primary:active { transform: none; }

.btn--block { width: 100%; padding: 16px 24px; }

.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

#btn-retry { margin-top: 34px; }

.btn__spinner {
    display: none;
    width: 17px;
    height: 17px;
    border: 2.5px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}
.btn--loading .btn__spinner { display: block; }

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

/* --- Receipt -------------------------------------------------------- */
.receipt {
    max-width: 380px;
    margin: clamp(32px, 5vh, 48px) auto 0;
    padding: 24px 28px;
    background: rgba(9, 24, 44, .6);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
}
.receipt__label {
    margin: 0 0 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.receipt__code {
    margin: 0;
    font-size: clamp(1.6rem, 4.6vw, 2rem);
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--brand-300);
}
.receipt__prize {
    margin: 12px 0 0;
    font-size: .95rem;
    font-weight: 300;
    color: var(--text);
}

/* --- Steps ---------------------------------------------------------- */
.steps {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    padding: 20px 16px 30px;
    background: linear-gradient(180deg, rgba(11, 23, 41, 0), rgba(11, 23, 41, .82) 55%);
    pointer-events: none;
    display: none;
    @media (width >= 80rem) and (height >= 700px) {
        display: block;
    }
}

.steps ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px clamp(16px, 3vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps li {
    font-size: clamp(.8rem, 1.5vw, .95rem);
    font-weight: 300;
    color: var(--text-muted);
    transition: color var(--transition);
}
.steps li span { color: var(--brand-500); font-weight: 400; }
.steps li.step--active { color: var(--white); font-weight: 700; }
.steps li.step--active span { color: var(--brand-400); }

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 860px) {
    .garage {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        max-width: 340px;
    }
    .car { aspect-ratio: 1 / .45; }
    .car__image { width: 106%; bottom: 0%; }
    .subtitle { max-width: 26ch; }
    .form { grid-template-columns: minmax(0, 1fr); }
    .stage { min-height: auto; padding-bottom: 26px; overflow: hidden }
    .spotlight { height: 80px; filter: blur(30px); }
}

@media (max-width: 600px) {
    .header { padding-top: 20px; }
    .steps { padding: 16px 8px 22px; }
    .steps ol { gap: 6px 10px; }
    .steps li { font-size: .72rem; }
    .form-card { padding: 22px 18px; }
}

@media (max-width: 340px) {
    .steps li { flex: 0 0 100%; text-align: center; }
}

/* --- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .ring > span { background: rgba(255, 255, 255, .45); }
    .ring > span:nth-child(4n + 1) { background: var(--brand-400); }
}