/* ===========================================================================
   Base — reset, elementos, layout e as três regiões fixas (`VDB-060`)
   ===========================================================================
   Depende de tokens.css. Aqui entra o que é ELEMENTO ou ESTRUTURA de página;
   o que tem nome de componente mora em components.css.

   Desenho: Figma do Marketing (docs/PLANO_REDESIGN_FIGMA.md).
   =========================================================================== */

/* Mulish, a fonte provisória no lugar da Museo Sans (ver tokens.css). Variável:
   um arquivo cobre de 200 a 1000, e o subconjunto latino tem o português todo.
   `swap` para o texto aparecer já na fonte de sistema, sem esperar o download. */
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/mulish-latin-wght-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Mulish';
    font-style: italic;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/mulish-latin-wght-italic.woff2') format('woff2');
}

* { box-sizing: border-box; }

/* ⚠️ `hidden` do HTML precisa de `!important`, e este é o único lugar do projeto
   onde ele se justifica.

   O `[hidden] { display: none }` que esconde o elemento vem da folha do
   NAVEGADOR, e folha de autor SEMPRE vence folha de navegador — basta uma regra
   de classe com `display` para o atributo virar decoração. Era exatamente o caso
   da `.session-pill`: o `auth.js` fazia `pill.hidden = true` ao descobrir que
   não há sessão, o atributo entrava no DOM, e a pílula "Olá, você / Sair`
   continuava na tela ao lado de "Entrar" e "Criar conta" — os dois estados do
   cabeçalho ao mesmo tempo, para quem nem conta tem.

   `until-found` fica de fora: é o valor que o navegador usa para achar texto
   dentro de conteúdo recolhido, e escondê-lo com `!important` quebraria o
   Ctrl+F. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

html { scroll-behavior: smooth; }

/* Quem prefere menos movimento não deve levar scroll animado nem fade-in. É uma
   preferência de sistema operacional, e ignorá-la causa enjoo real em parte das
   pessoas — não é detalhe de acessibilidade opcional. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--fonte);
    font-weight: 500;
    font-size: var(--fs-corpo);
    line-height: 1.35;
    color: var(--texto);
    background: var(--branco);
    -webkit-font-smoothing: antialiased;
    /* ⚠️ `clip`, NUNCA `hidden`. `overflow: hidden` aqui cria um contexto de
       rolagem e o `position: sticky` do header para de grudar — o cabeçalho
       descolando é o sintoma de quem trocou os dois. `clip` corta sem criar
       contêiner de rolagem. É rede de segurança, não solução: o estouro se
       corrige na origem, e o cheque de `scrollWidth` é o que o detecta. */
    overflow-x: clip;
}

/* Palavra que não cabe QUEBRA, em vez de empurrar a página.
   `:where()` tem especificidade ZERO, então isto nunca disputa com regra de
   componente e ninguém vai precisar de `!important` para escapar.
   `anywhere` e não `break-word`: só `anywhere` encolhe o `min-content` do
   elemento, que é o que impede uma coluna `1fr` de estourar a grade. */
:where(p, li, td, dd, .c-value, .breadcrumb, .arquivo-escolhido, .ticket-preview) {
    overflow-wrap: anywhere;
}

img, svg { max-width: 100%; height: auto; }

/* Link dentro de texto: laranja de texto (AA), sublinhado. Menu, rodapé e
   botões definem a própria cor. */
a { color: var(--brand-texto); }

/* O "Título 1" do Figma: 900 itálico em caixa alta. */
h1, h2, h3, .display {
    font-family: var(--fonte);
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0;
    margin: 0;
}

section { padding: var(--secao-y) 0; }

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-x); }

/* Conteúdo visível só para leitor de tela. Usado no link "pular para o
   conteúdo" e em rótulos que o desenho não mostra mas a navegação precisa. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pular-para-conteudo {
    position: absolute; left: -999px; top: 0; z-index: 300;
    background: var(--texto); color: var(--branco);
    padding: 10px 18px; border-radius: 0 0 var(--radius) 0;
    font-weight: 700; font-size: 14px; text-decoration: none;
}
.pular-para-conteudo:focus { left: 0; }

/* Foco visível em tudo que recebe teclado. O mockup tinha
   `nav button:focus{outline:none}`, que apaga a única pista de onde o cursor
   está para quem navega por Tab. Sobre as superfícies laranja o anel laranja
   sumiria — ali ele é branco. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--brand-texto);
    outline-offset: 2px;
}
:where(header, footer, .side-note, .timeline, .hero-acao, .faq-item > summary) :focus-visible,
:where(.faq-item > summary):focus-visible {
    outline-color: var(--branco);
}

/* ---------------------------------------------------------------- HEADER -- */
/* Faixa laranja do Figma com o lockup Avelloz + AZ170 Bravo e os links brancos. */
header {
    background: var(--brand-fundo);
    color: var(--sobre-brand);
    padding: 0;
    min-height: var(--altura-header);
    display: flex; align-items: center;
    /* ⚠️ 160 e não 100: o painel do menu aberto nasce dentro do header, e com
       100 ele ficava ATRÁS do banner de cookies (150) — numa tela baixa, o
       banner escondia metade dos itens. O modal de ajuda (200) continua acima
       dos dois, que é a ordem certa: ele é o único com `aria-modal`. */
    position: sticky; top: 0; z-index: 160;
    box-shadow: var(--sombra-header);
}
header .wrap {
    width: 100%; max-width: 1600px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.logo-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }
.logo-btn img { height: clamp(26px, 2.4vw, 38px); width: auto; display: block; }

nav { display: flex; align-items: center; gap: clamp(0px, .4vw, 10px); }
nav a, nav button {
    background: none; border: none; color: var(--sobre-brand);
    text-decoration: none; font-size: var(--fs-nav); font-weight: 500;
    padding: 8px clamp(5px, .5vw, 10px); border-radius: 6px; cursor: pointer;
    font-family: var(--fonte); white-space: nowrap;
    text-underline-offset: 6px; text-decoration-thickness: 2px;
}
nav a:hover, nav button:hover { text-decoration: underline; text-decoration-color: var(--sobre-brand-borda); }
/* O item atual é sublinhado cheio: cor sozinha não diria nada sobre um fundo
   que já é todo de uma cor só. O `aria-current` é o que o leitor de tela lê. */
nav a.active, nav button.active { text-decoration: underline; text-decoration-color: var(--sobre-brand); font-weight: 700; }

/* Os links levam a lugares da promoção; "Entrar", "Criar conta" e a pílula de
   sessão são a ÁREA DA CONTA. São duas coisas diferentes e o espaço diz isso. */
nav > [data-deslogado], nav > [data-sessao] { margin-left: clamp(8px, 1.2vw, 20px); }
nav > [data-deslogado] { display: flex; align-items: center; gap: 4px; }

/* "Criar conta" em pílula branca: é o único destaque do cabeçalho. */
.nav-cta {
    background: var(--branco) !important; color: var(--brand-texto) !important;
    font-weight: 700 !important; border-radius: var(--radius-pilula) !important;
    padding: 8px 18px !important; margin-left: 4px;
}
.nav-cta:hover { text-decoration: none !important; background: var(--superficie-2) !important; }

/* O botão do menu mobile: os três traços do Figma. Escondido no desktop; é
   `display:none` e não `visibility` para que não receba foco de teclado quando
   não está em uso. */
.nav-toggle {
    display: none;
    background: none; border: none; color: var(--sobre-brand);
    border-radius: 6px; padding: 8px; line-height: 0; cursor: pointer;
    /* É o ÚNICO caminho para a navegação no celular. Vale o alvo cheio. */
    min-width: var(--alvo-toque); min-height: var(--alvo-toque);
}
.nav-toggle svg { width: 34px; height: auto; display: block; }

.session-pill {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--sobre-brand-borda);
    border-radius: var(--radius-pilula); padding: 3px 4px 3px 12px;
    font-size: var(--fs-nav); color: var(--sobre-brand); white-space: nowrap;
}
.session-pill b { color: var(--sobre-brand); }
.session-pill a { font-size: var(--fs-nav); padding: 4px 6px; }
.session-pill button {
    background: var(--branco); color: var(--brand-texto); border: none;
    border-radius: var(--radius-pilula); padding: 5px 14px; font-size: var(--fs-pequeno); font-weight: 700;
    cursor: pointer; font-family: var(--fonte);
}
.session-pill button:hover { text-decoration: none; background: var(--superficie-2); }

/* ------------------------------------------------------------------ HERO -- */
/* O hero são duas peças, como no Figma: a arte do Marketing, de ponta a ponta,
   e a FAIXA DO CONTADOR logo abaixo dela (fundo escuro, contagem à esquerda,
   chamada e botões à direita).

   `padding: 0` anula o `section { padding }` — a arte encosta no cabeçalho. */
.hero { background: var(--brand-fundo); color: var(--branco); position: relative; padding: 0; }

/* A arte do Marketing. Ela traz o título, a chamada e as três motos — é o
   conteúdo do hero, não um fundo, por isso é `<img>` e não `background-image`:
   assim ela tem `alt`, entra no `srcset` e o navegador pode priorizá-la.

   Em todas as páginas a arte vai de ponta a ponta, sem teto de largura nem de
   altura, como no Figma. O preço: acima de 1920px de tela ela é ampliada além
   do arquivo, e num monitor 16:9 ela ocupa quase toda a primeira tela. */
.hero-banner { display: block; width: 100%; height: auto; }

/* A faixa do contador. */
.hero-acao {
    position: relative;
    background: var(--faixa);
    /* A faixa é de ponta a ponta; o conteúdo, não. O `.wrap` que vem junto na
       classe cuida do miolo, e o `box-shadow` pinta as laterais sem mexer no
       layout — `max-width` + `margin: auto` do `.wrap` continuam valendo. */
    max-width: none;
    padding-block: clamp(28px, 4.4vw, 56px);
    padding-inline: max(var(--wrap-x), calc((100% - var(--wrap-max)) / 2 + var(--wrap-x)));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "contador texto";
    gap: clamp(20px, 3.4vw, 56px);
    align-items: center;
}
.hero-acao-texto { grid-area: texto; min-width: 0; }
.hero-acao .countdown-card { grid-area: contador; }

/* "3 sorteios. 3 motos. 3 chances de ganhar. Participe." — 700 itálico. */
.hero .chamada {
    font-weight: 700; font-style: italic; color: var(--branco);
    font-size: clamp(20px, 2.25vw, 29px); line-height: 1.2; margin: 0;
}
.hero p.slogan { font-size: var(--fs-pequeno); color: var(--branco); max-width: 640px; margin: 10px 0 0; line-height: 1.5; opacity: .92; }
.hero-cta { margin-top: 16px; display: flex; gap: clamp(10px, 2vw, 40px); flex-wrap: wrap; align-items: center; }
.hero-cta .btn { flex: 1 1 220px; max-width: 330px; text-align: center; }
/* No Figma o "CADASTRE-SE AGORA" da faixa e o do selo vêm em caixa alta. */
.hero-acao .btn-primary { text-transform: uppercase; }

.eyebrow {
    color: var(--branco); font-weight: 700; font-size: 12px;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; opacity: .92;
}

/* O selo "CADASTRE-SE AGORA": escondido até o botão da faixa sair da tela, e
   então fixo no topo, no meio, logo abaixo do cabeçalho (selo-flutuante.js).

   ⚠️ `visibility` e não só `opacity`: invisível mas visível para o Tab, o selo
   seria um foco fantasma no meio da página. O atraso de `visibility` na saída
   deixa o fade terminar antes de ele sumir de vez.

   `z-index` 155: acima do banner de cookies (150), abaixo do cabeçalho (160),
   para o menu aberto no celular cobrir o selo e não o contrário. */
.hero-selo {
    position: fixed; left: 50%; top: calc(var(--altura-header) + 12px);
    transform: translate(-50%, -8px);
    z-index: 155; white-space: nowrap;
    box-shadow: var(--sombra-header);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.hero-selo.is-visivel {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition-delay: 0s;
}

/* A página neutra do gate de pré-lançamento (`gate.js`) monta
   `section.hero > .wrap > h1 + p.slogan + a.btn` por JavaScript. */
.hero > .wrap:not(.hero-acao) { padding-top: var(--secao-y); padding-bottom: var(--secao-y); }
.hero > .wrap:not(.hero-acao) h1 { font-size: var(--fs-titulo); text-transform: uppercase; color: var(--branco); }
.hero > .wrap:not(.hero-acao) .slogan { font-size: var(--fs-corpo); opacity: 1; }
.hero > .wrap:not(.hero-acao) .btn-primary { background: var(--branco); color: var(--brand-texto); }

/* --------------------------------------------------------------- SEÇÕES -- */
.section-tag {
    color: var(--brand-texto); font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px;
}
/* O "Título 1" do Figma. */
.section-title {
    font-size: var(--fs-titulo); color: var(--brand); line-height: 1.1;
    text-transform: uppercase; max-width: 900px;
}
.section-sub { color: var(--brand-texto); font-size: var(--fs-corpo); max-width: 760px; margin-top: 12px; line-height: 1.35; }
.secao-nota { margin-top: 16px; font-size: var(--fs-pequeno); color: var(--texto); }

/* O selo "VOCÊ DE BRAVO" que o Figma põe ao lado do título das páginas internas
   no celular mora no bloco responsivo, junto do `.hero--interna` que ele
   substitui — ver `.tem-selo` lá embaixo. */

/* ---------------------------------------------------------------- FOOTER -- */
footer {
    background: var(--brand-fundo); color: var(--sobre-brand);
    padding: clamp(32px, 4vw, 48px) 0 clamp(20px, 2.4vw, 28px); font-size: 14px;
}
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
footer .cert {
    border: 1px solid var(--branco); border-radius: var(--radius);
    padding: clamp(16px, 2vw, 26px) clamp(18px, 2vw, 26px);
    max-width: 540px; flex: 1 1 320px;
    font-weight: 700; font-style: italic; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.3;
}
footer .cert b { color: var(--branco); font-weight: 700; }
footer a { color: var(--sobre-brand); cursor: pointer; }
footer .links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
footer .links a { text-decoration: none; }
footer .links a:hover { text-decoration: underline; }

/* ⚠️ `flex-basis: 100%` não é enfeite: `footer .wrap` é `flex` com `wrap`, então
   o <hr> é um ITEM de flex e colapsa sem isto. */
footer hr {
    border: none; border-top: 1px solid var(--sobre-brand-suave);
    margin: 28px 0 16px; width: 100%; flex-basis: 100%;
}
.footer-logo { height: clamp(44px, 4.8vw, 61px); width: auto; margin-bottom: 20px; display: block; }
.footer-legal { font-size: 11.5px; text-transform: uppercase; text-align: center; width: 100%; line-height: 1.5; }

/* Ritmo de seção. Estes quatro nasceram de `style="padding-top:…"` repetido nos
   seis HTMLs — e enquanto viviam no atributo eram IMUNES a qualquer regra de
   folha, porque estilo inline vence tudo sem `!important`. */
.secao-continua   { padding-top: 2; }                  /* emenda, sem respiro */
.secao-topo-curto { padding-top: var(--secao-y-topo); }  /* primeira seção abaixo do header */
.secao-apos-faixa { padding-top: var(--secao-y-faixa); } /* primeira abaixo da faixa do portal */
.secao-emenda     { padding-top: 8px; }                /* continuação da seção acima */
.secao-documento  { padding-top: var(--secao-y-topo); padding-bottom: var(--secao-y-solta); }

/* Desfaz o 900 itálico de `h1, h2, h3` onde o texto é de INTERFACE e não de
   display. */
.titulo-corpo { font-family: var(--fonte); font-weight: 700; font-style: normal; }

/* Linha de apoio dentro de um rótulo: o "e o que isso significa" abaixo da frase. */
.detalhe { display: block; margin-top: 4px; }

/* ============================================================ RESPONSIVO ==
   Aqui mora só o que é ESTRUTURA DE PÁGINA: cabeçalho, menu e hero. As grades
   de componente moram na seção responsiva do components.css.

   ⚠️ Os HTMLs carregam base.css ANTES de components.css. `@media` NÃO soma
   especificidade, então regra responsiva de COMPONENTE aqui perderia para a
   regra de mesma especificidade que vem depois, em components.css.
   ====================================================================== */

/* O menu vira painel aqui. ⚠️ O número anda junto com o `matchMedia` do
   `ligarMenuMobile` (ui.js) — um muda, o outro muda (teste de contrato).
   Medido no navegador com o menu do Figma: lockup + oito itens + a área da conta
   ocupam ~1080px com a Mulish; abaixo de 1200px o cabeçalho não cabe. */
@media (max-width: 1200px) {
    /* ⚠️ O mockup fazia `nav{display:none}` aqui, SEM menu substituto: no
       celular não havia como chegar a "Criar conta" nem ao regulamento. A nav
       vira painel, aberto pelo .nav-toggle. */
    .nav-toggle { display: block; }
    nav {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: flex-end; gap: 0;
        background: var(--brand-fundo);
        padding: 12px var(--wrap-x) 20px;
        box-shadow: var(--sombra-header);
        /* Com oito linhas no painel, um celular deitado não alcançava "Criar
           conta". O `dvh` acompanha a barra de URL recolhendo; a linha de `vh`
           acima é o fallback de quem não o entende. */
        max-height: calc(100vh - var(--altura-header));
        max-height: calc(100dvh - var(--altura-header));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    nav.aberto { display: flex; }
    /* O painel do Figma: itens grandes, alinhados à direita. */
    nav a, nav button { text-align: right; padding: 10px 4px; font-size: clamp(20px, 5.4vw, 24px); }
    .nav-cta { margin-left: 0; margin-top: 8px; text-align: center !important; font-size: 18px !important; }
    /* Em coluna, a área da conta se separa por linha e respiro, não por recuo. */
    nav > [data-deslogado], nav > [data-sessao] {
        margin-left: 0; margin-top: 12px; padding-top: 12px;
        border-top: 1px solid var(--sobre-brand-suave);
        align-self: stretch;
    }
    nav > [data-deslogado] { display: flex; flex-direction: column; align-items: flex-end; }
    header .wrap { position: static; }
    header { position: sticky; }

    /* A pílula de sessão é uma pílula quando cabe ao lado do logo. Dentro do
       painel em coluna ela é um item de menu, e passa a parecer um. */
    .session-pill {
        border: none; border-radius: 0; padding: 0;
        flex-wrap: wrap; justify-content: flex-end; white-space: normal;
        font-size: 18px;
    }
    .session-pill a { font-size: 18px; }
}

/* A faixa do contador empilha: contagem em cima, chamada e botões embaixo —
   como no frame mobile do Figma, mas com a contagem primeiro, que é a
   informação com prazo. */
@media (max-width: 900px) {
    .hero-acao {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "texto" "contador";
        justify-items: stretch;
    }
    /* Empilhada, a contagem fica no meio da faixa. */
    .hero-acao .countdown-card { text-align: center; }
    .hero-acao .countdown { justify-content: center; }
}

/* Nas páginas internas o Figma mostra a arte no desktop e, no celular, só o
   título da página — a arte inteira empurraria o formulário para a segunda
   tela, que é justamente onde ninguém chega. */
@media (max-width: 767px) {
    .hero--interna { display: none; }

    /* No lugar da arte, o selo "VOCÊ DE BRAVO" à direita do título (Figma).
       `float` num pseudo-elemento: tag e título quebram ao lado dele e o
       subtítulo passa por baixo em largura total, sem marcação a mais.

       ⚠️ Fundo e não `<img>`: dentro do `@media` o desktop nunca baixa o selo —
       um `<img>` escondido com `display:none` seria baixado do mesmo jeito. E é
       decorativo: o título já diz a página, o leitor de tela não precisa dele.

       Os .webp saem de `selo-voce-de-bravo.svg` (um PNG de 4096px embrulhado,
       14 MB — não referenciar), recortados na arte e reduzidos para 1x/2x/3x de
       140px. O `aspect-ratio` é o do recorte; um muda, o outro muda.

       A largura é o que SOBRA ao lado do título mais longo, e não uma fração de
       `vw`: o `%` de um float é da largura do `.wrap`, e os 252px reservados são
       "REGULAMENTO" (~234px com o `--fs-titulo` de 30px) + folga + a margem.
       Com `26vw` o título descia para baixo do selo em 360px e deixava um
       buraco. Abaixo de ~350px os títulos longos descem mesmo assim.

       A margem de cima negativa sobe o selo para dentro do respiro da seção
       (o `padding-top` dela, menos 4px de folga para o que vem acima): assim
       ele termina na altura do título e o subtítulo corre em largura total, em
       vez de quebrar as primeiras linhas em volta dele. ⚠️ O token tem de ser
       o MESMO do `padding-top` da seção, senão o selo invade o cabeçalho ou a
       faixa — por isso o portal, que usa `.secao-apos-faixa`, tem regra própria. */
    .tem-selo::before {
        content: ""; float: right;
        width: clamp(80px, 100% - 252px, 140px); aspect-ratio: 3569 / 2091;
        margin: calc(4px - var(--secao-y-topo)) 0 4px 8px;
        background: url("../img/selo-voce-de-bravo-320.webp") no-repeat center / contain;
        background-image: -webkit-image-set(url("../img/selo-voce-de-bravo-160.webp") 1x, url("../img/selo-voce-de-bravo-320.webp") 2x, url("../img/selo-voce-de-bravo-480.webp") 3x);
        background-image: image-set(url("../img/selo-voce-de-bravo-160.webp") 1x, url("../img/selo-voce-de-bravo-320.webp") 2x, url("../img/selo-voce-de-bravo-480.webp") 3x);
    }
    .secao-apos-faixa > .tem-selo::before { margin-top: calc(4px - var(--secao-y-faixa)); }
    /* Com subtítulo curto o selo vazaria para o formulário/accordion abaixo. */
    .tem-selo > .section-sub ~ * { clear: right; }
}

/* ------------------------------------------------------ CELULAR DEITADO --
   O problema aqui é ALTURA, e nenhuma regra baseada em largura o alcança.
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    /* Redefinir token dentro de `@media` é REGRA DE ESTILO, e por isso mora
       aqui e não em tokens.css — é a fronteira exata onde a regra do `VDB-060`
       morde. */
    :root {
        --secao-y: 36px;
    }
}