/* ===================================================================
   ÍMPETO INVESTIMENTOS — RESPONSIVIDADE
   Arquivo: responsive.css
   Objetivo: Ajustes finos por breakpoint para Landing Page, Quiz e
   Obrigado. Depende de: variables.css, reset.css, base.css,
   landing.css, quiz.css, obrigado.css (já carregados antes deste
   arquivo).

   Observação técnica: Custom Properties do CSS não funcionam como
   condição dentro de @media — por isso os breakpoints usam valores
   literais em px (os mesmos documentados em --breakpoint-* no
   variables.css). As DECLARAÇÕES dentro de cada media query
   continuam usando exclusivamente as variáveis do design system.

   -------------------------------------------------------------
   ÍNDICE DESTE ARQUIVO (construído por etapas)
   -------------------------------------------------------------
   1. Tablets — até 992px (Landing, Quiz, Obrigado)
   2. Celulares — até 576px (Landing, Quiz, Obrigado)
   =================================================================== */


/* ===================================================================
   1. TABLETS — ATÉ 992px
   Landing: paddings levemente reduzidos, headline menor, mantendo
   bastante espaço em branco. Quiz e Obrigado: padding do card
   reduzido e pergunta/título levemente menores. Nenhuma alteração
   de estrutura ou layout — só escala.
   =================================================================== */

@media (max-width: 992px) {

    /* ---- LANDING — HERO ---- */

    .hero {
        padding-block: var(--space-8);
    }

    .hero__headline {
        font-size: var(--font-size-2xl);
    }

    /* ---- LANDING — BENEFÍCIOS ---- */

    .benefits {
        padding-block: var(--space-8);
    }

    /* ---- LANDING — CTA FINAL ---- */

    .final-cta {
        padding-block: var(--space-8);
    }


    /* ---- QUIZ — CARD ---- */

    .quiz-card {
        padding: var(--space-6);
    }

    .quiz-step__question {
        font-size: var(--font-size-xl);
    }


    /* ---- OBRIGADO — CARD ---- */

    .obrigado-card {
        padding: var(--space-6);
    }

    .obrigado-title {
        font-size: var(--font-size-xl);
    }

}


/* ===================================================================
   2. CELULARES — ATÉ 576px
   Landing: headline e subheadline menores, botão em largura total,
   paddings reduzidos mantendo bastante respiro. Quiz: card ocupando
   quase toda a largura, padding menor, pergunta menor, alternativas
   maiores para toque, botões em largura total. Obrigado: mesmo
   padrão do Quiz. Nenhuma alteração de estrutura ou novo componente.
   =================================================================== */

@media (max-width: 576px) {

    /* ---- LANDING — HEADER ---- */

    .site-header {
        padding-block: var(--space-4);
    }


    /* ---- LANDING — HERO ---- */

    .hero {
        padding-block: var(--space-7);
    }

    .hero__headline {
        font-size: var(--font-size-xl);
    }

    .hero__subheadline {
        font-size: var(--font-size-base);
    }

    .hero .btn--primary {
        width: 100%;
    }


    /* ---- LANDING — BENEFÍCIOS ---- */

    .benefits {
        padding-block: var(--space-7);
    }

    .benefits__grid {
        grid-template-columns: 1fr;
    }


    /* ---- LANDING — CTA FINAL ---- */

    .final-cta {
        padding-block: var(--space-7);
    }


    /* ---- QUIZ — TELA E CARD ---- */

    .quiz-screen {
        padding: var(--space-4);
    }

    .quiz-card {
        padding: var(--space-5);
    }

    .quiz-step__question {
        font-size: var(--font-size-lg);
    }


    /* ---- QUIZ — ALTERNATIVAS ---- */

    .quiz-option {
        padding: var(--space-5) var(--space-5);
    }


    /* ---- QUIZ — NAVEGAÇÃO ---- */

    .quiz-step__nav {
        flex-direction: column;
    }

    .quiz-step__nav .quiz-button {
        width: 100%;
    }


    /* ---- OBRIGADO — TELA E CARD ---- */

    .obrigado-screen {
        padding: var(--space-4);
    }

    .obrigado-card {
        padding: var(--space-5);
    }

    .obrigado-title {
        font-size: var(--font-size-lg);
    }


    /* ---- OBRIGADO — CAIXA "PRÓXIMOS PASSOS" ---- */

    .obrigado-next-steps {
        padding: var(--space-5);
    }


    /* ---- OBRIGADO — BOTÃO ---- */

    #btn-voltar-inicio {
        width: 100%;
    }

}