/* =============================================================================
   SITE PÚBLICO — Toth Quiz (index.php, como-funciona.php, termos, privacidade, contato)
   CSS comum a todas as páginas públicas: cores (--lp-*), botões, cabeçalho, menu do
   celular (off-canvas), CTA final, rodapé e páginas de texto. Carregado pelo
   components/head.php; o CSS próprio de cada página vem depois, num <style> dela.
   Não usa sistema.css (que é do painel e do jogo).
   ============================================================================= */

:root {
    --lp-fundo: #0b0f19; /* Fundo principal, azul-noite quase preto. */
    --lp-fundo-2: #0f172a; /* Fundo das seções alternadas. */
    --lp-vidro: rgb(148 163 184 / 6%); /* Fundo translúcido dos cartões de vidro. */
    --lp-vidro-borda: rgb(148 163 184 / 14%); /* Borda dos cartões de vidro. */
    --lp-texto: #ffffff; /* Títulos em branco puro. */
    --lp-texto-apoio: #94a3b8; /* Parágrafos em cinza claro. */
    --lp-texto-suave: #64748b; /* Rótulos e textos menores. */
    --lp-violeta: #7c3aed; /* Início do gradiente dos botões principais. */
    --lp-azul: #2563eb; /* Fim do gradiente dos botões principais. */
    --lp-ciano: #22d3ee; /* Acento frio dos brilhos e destaques. */
    --lp-ouro: #e5bd71; /* Dourado do painel (PIN, pódio, sobretítulos). */
    --lp-alt-a: #c8203f; /* Carmesim da alternativa A (igual ao jogo). */
    --lp-alt-b: #1f4fd8; /* Cobalto da alternativa B. */
    --lp-alt-c: #e0a412; /* Mostarda da alternativa C. */
    --lp-alt-d: #08825a; /* Esmeralda da alternativa D. */
    --lp-raio: 20px; /* Cantos dos cartões grandes. */
    --lp-largura: 72rem; /* Largura máxima do conteúdo. */
    --lp-gutter: clamp(16px, 4vw, 32px); /* Margem lateral: 16px no celular. */
    --lp-gradiente: linear-gradient(135deg, var(--lp-violeta), var(--lp-azul)); /* Gradiente dos CTAs. */
}

*,
*::before,
*::after {
    box-sizing: border-box; /* Larguras incluem borda e preenchimento. */
}

html {
    scroll-behavior: smooth; /* Rolagem suave nos links do menu. */
    scroll-padding-top: 5rem; /* Compensa o cabeçalho fixo ao pular para uma seção. */
}

body {
    margin: 0; /* Sem margem padrão. */
    overflow-x: hidden; /* Os brilhos decorativos nunca criam rolagem lateral. */
    color: var(--lp-texto-apoio); /* Texto corrido em cinza claro. */
    background: var(--lp-fundo); /* Fundo escuro profundo. */
    font-family: "Inter", "Segoe UI", Arial, sans-serif; /* Tipografia moderna. */
    font-size: 1rem; /* Base de 16px. */
    line-height: 1.6; /* Leitura confortável. */
    -webkit-font-smoothing: antialiased; /* Texto mais nítido no fundo escuro. */
}

h1,
h2,
h3 {
    margin: 0; /* O espaço vem de cada componente. */
    color: var(--lp-texto); /* Títulos em branco. */
    line-height: 1.15; /* Títulos compactos. */
    letter-spacing: -0.02em; /* Visual refinado. */
}

p {
    margin: 0; /* O espaço vem de cada componente. */
}

a {
    color: inherit; /* Links herdam a cor do contexto. */
    text-decoration: none; /* Sem sublinhado padrão. */
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--lp-ciano); /* Foco visível pelo teclado. */
    outline-offset: 3px; /* Afastado do elemento. */
}

.lp-container {
    width: 100%; /* Ocupa a largura... */
    max-width: calc(var(--lp-largura) + 2 * var(--lp-gutter)); /* ...até o limite... */
    margin: 0 auto; /* ...centralizado. */
    padding: 0 var(--lp-gutter); /* Margens laterais. */
}

/* Botões ------------------------------------------------------------- */

.lp-botao {
    display: inline-flex; /* Texto e ícone lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: center; /* Centraliza horizontalmente. */
    gap: 0.5rem; /* Espaço até o ícone. */
    min-height: 2.75rem; /* Área de clique confortável. */
    padding: 0 1.25rem; /* Espaço lateral. */
    border: 1px solid transparent; /* Reserva a borda. */
    border-radius: 999px; /* Formato de cápsula. */
    font-size: 0.9375rem; /* Texto do botão. */
    font-weight: 600; /* Semi-negrito. */
    white-space: nowrap; /* Uma linha. */
    transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease; /* Hover suave. */
}

.lp-botao--primario {
    color: #ffffff; /* Texto branco. */
    background: var(--lp-gradiente); /* Gradiente violeta → azul. */
    box-shadow: 0 8px 24px -10px rgb(124 58 237 / 70%); /* Brilho de base. */
}

.lp-botao--primario:hover {
    box-shadow: 0 0 0 1px rgb(165 180 252 / 45%), 0 12px 36px -8px rgb(99 102 241 / 85%), 0 0 42px -6px rgb(34 211 238 / 45%); /* Brilho neon. */
    transform: translateY(-2px); /* Sobe levemente. */
}

.lp-botao--secundario {
    border-color: var(--lp-vidro-borda); /* Contorno discreto. */
    color: var(--lp-texto); /* Texto branco. */
    background: var(--lp-vidro); /* Vidro translúcido. */
}

.lp-botao--secundario:hover {
    border-color: rgb(148 163 184 / 35%); /* Contorno mais visível. */
    background: rgb(148 163 184 / 12%); /* Vidro mais claro. */
}

.lp-botao--grande {
    min-height: 3.5rem; /* Botão alto. */
    padding: 0 2rem; /* Espaço lateral generoso. */
    font-size: 1rem; /* Texto maior. */
    letter-spacing: 0.04em; /* Levemente espaçado. */
}

.lp-botao--gigante {
    min-height: 4rem; /* CTA final ainda maior. */
    padding: 0 2.75rem; /* Espaço lateral generoso. */
    font-size: 1.0625rem; /* Texto maior. */
    letter-spacing: 0.05em; /* Espaçado. */
}

.lp-botao svg {
    width: 1.125rem; /* Seta. */
    height: 1.125rem; /* Seta. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do texto. */
    stroke-width: 2.25; /* Traço firme. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
    transition: transform 0.2s ease; /* Seta anda no hover. */
}

.lp-botao:hover svg {
    transform: translateX(3px); /* Seta avança. */
}

/* Cabeçalho ---------------------------------------------------------- */

.lp-topo {
    position: sticky; /* Fica no topo ao rolar. */
    top: 0; /* Colado ao topo. */
    z-index: 20; /* Acima das seções. */
    border-bottom: 1px solid rgb(148 163 184 / 8%); /* Linha sutil. */
    background: rgb(11 15 25 / 72%); /* Vidro escuro... */
    backdrop-filter: blur(14px) saturate(140%); /* ...desfocando o que passa por baixo. */
    -webkit-backdrop-filter: blur(14px) saturate(140%); /* Safari. */
}

.lp-topo__conteudo {
    display: flex; /* Logo, menu e ações na mesma linha. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 2rem; /* Espaço entre os blocos. */
    min-height: 4.25rem; /* Altura do cabeçalho. */
}

.lp-marca {
    display: inline-flex; /* Ícone e nome lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 0.625rem; /* Espaço entre ícone e nome. */
    color: var(--lp-texto); /* Nome em branco. */
    font-size: 1.125rem; /* Tamanho do nome. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: -0.02em; /* Visual refinado. */
}

.lp-marca__icone {
    width: 2.125rem; /* Logo. */
    height: 2.125rem; /* Logo. */
    flex: 0 0 auto; /* Não encolhe. */
}

.lp-menu {
    display: flex; /* Links lado a lado. */
    gap: 1.75rem; /* Espaço entre links. */
    margin-right: auto; /* Empurra as ações para a direita. */
    font-size: 0.9375rem; /* Texto do menu. */
}

.lp-menu a {
    color: var(--lp-texto-apoio); /* Links em cinza. */
    transition: color 0.2s ease; /* Hover suave. */
}

.lp-menu a:hover {
    color: var(--lp-texto); /* Branco no hover. */
}

.lp-topo__acoes {
    display: flex; /* Botões lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 0.625rem; /* Espaço entre botões. */
}

.lp-link-pin {
    margin-right: 0.5rem; /* Afasta dos botões. */
    color: var(--lp-texto-apoio); /* Link discreto. */
    font-size: 0.875rem; /* Texto pequeno. */
    transition: color 0.2s ease; /* Hover suave. */
}

.lp-link-pin:hover {
    color: var(--lp-ouro); /* Dourado no hover, como o PIN do telão. */
}

/* Menu mobile (off-canvas) ------------------------------------------- */
/* Abaixo de 64rem o menu de âncoras some do cabeçalho: o botão sanduíche abre
   um painel de vidro que desliza da esquerda com todas as opções. */
.lp-sanduiche {
    display: none; /* Só aparece em telas menores (ver @media abaixo). */
    flex: 0 0 auto; /* Não encolhe. */
    place-content: center; /* Três linhas no centro. */
    gap: 5px; /* Espaço entre as linhas. */
    width: 2.75rem; /* Área de toque confortável (44px). */
    height: 2.75rem; /* Área de toque confortável (44px). */
    padding: 0; /* Sem preenchimento padrão. */
    border: 1px solid rgb(148 163 184 / 16%); /* Borda de vidro. */
    border-radius: 12px; /* Cantos. */
    background: rgb(148 163 184 / 6%); /* Vidro. */
    cursor: pointer; /* Indica clique. */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; /* Hover suave. */
}

.lp-sanduiche span {
    display: block; /* Linha do ícone. */
    width: 1.125rem; /* Comprimento da linha. */
    height: 2px; /* Espessura. */
    border-radius: 2px; /* Pontas arredondadas. */
    background: var(--lp-texto); /* Branco. */
    transition: width 0.25s ease; /* Linha do meio "respira" no hover. */
}

.lp-sanduiche span:nth-child(2) {
    width: 0.75rem; /* Linha do meio mais curta: toque moderno. */
}

.lp-sanduiche:hover {
    border-color: rgb(34 211 238 / 45%); /* Borda ciano... */
    background: rgb(34 211 238 / 8%); /* ...fundo ciano translúcido... */
    box-shadow: 0 0 24px -8px rgb(34 211 238 / 60%); /* ...e brilho neon. */
}

.lp-sanduiche:hover span:nth-child(2) {
    width: 1.125rem; /* Linha do meio completa no hover. */
}

.lp-sanduiche:focus-visible,
.mobile-sidebar a:focus-visible,
.mobile-sidebar button:focus-visible {
    outline: 2px solid var(--lp-ciano); /* Foco visível pelo teclado. */
    outline-offset: 3px; /* Afastado do elemento. */
}

/* Fundo escuro atrás do painel: clicar nele fecha o menu. */
.mobile-overlay {
    position: fixed; /* Cobre a tela... */
    inset: 0; /* ...inteira. */
    z-index: 999; /* Acima do site, abaixo do painel. */
    background: rgb(2 6 23 / 62%); /* Escuro semi-transparente. */
    backdrop-filter: blur(3px); /* Desfoca o site ao fundo. */
    -webkit-backdrop-filter: blur(3px); /* Safari. */
    opacity: 0; /* Invisível... */
    visibility: hidden; /* ...e sem receber cliques. */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Some depois do fade. */
}

.mobile-overlay.open {
    opacity: 1; /* Visível. */
    visibility: visible; /* Recebe o clique para fechar. */
    transition: opacity 0.3s ease; /* Aparece suave. */
}

.mobile-sidebar {
    position: fixed; /* Painel preso à tela... */
    top: 0; /* ...do topo... */
    left: 0; /* ...à esquerda. */
    z-index: 1000; /* Acima de tudo (o cabeçalho é 20). */
    display: flex; /* Topo, links e botões empilhados. */
    flex-direction: column; /* De cima para baixo. */
    width: 280px; /* Largura do painel... */
    max-width: 85vw; /* ...sem cobrir telas muito estreitas. */
    height: 100vh; /* Altura da tela (navegadores antigos)... */
    height: 100dvh; /* ...descontando a barra do navegador do celular. */
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); /* Respiro (e área do gesto do iPhone). */
    overflow-y: auto; /* Rola se a tela for baixa. */
    border-right: 1px solid rgb(148 163 184 / 12%); /* Borda de vidro. */
    background:
        radial-gradient(22rem 16rem at 0% 0%, rgb(124 58 237 / 22%), transparent 70%),
        radial-gradient(18rem 14rem at 100% 100%, rgb(34 211 238 / 12%), transparent 70%),
        rgba(15, 23, 42, 0.95); /* Fundo escuro profundo com luzes da marca. */
    backdrop-filter: blur(10px); /* Glassmorphism. */
    -webkit-backdrop-filter: blur(10px); /* Safari. */
    box-shadow: 30px 0 60px -20px rgb(0 0 0 / 70%); /* Painel flutua sobre o site. */
    transform: translateX(-100%); /* Escondido à esquerda... */
    visibility: hidden; /* ...e fora do Tab enquanto fechado. */
    transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s; /* Desliza; some ao terminar. */
}

.mobile-sidebar.open {
    transform: translateX(0); /* Desliza para a tela. */
    visibility: visible; /* Navegável. */
    transition: transform 0.3s ease-in-out; /* Entrada suave. */
}

.mobile-sidebar__topo {
    display: flex; /* Logo e botão fechar... */
    align-items: center; /* ...centralizados... */
    justify-content: space-between; /* ...nas pontas. */
    padding-bottom: 1.25rem; /* Espaço até a divisória. */
    border-bottom: 1px solid rgb(148 163 184 / 10%); /* Divisória. */
}

.mobile-sidebar__fechar {
    display: grid; /* Centraliza o X. */
    place-items: center; /* Centro. */
    width: 2.5rem; /* Botão redondo. */
    height: 2.5rem; /* Botão redondo. */
    padding: 0; /* Sem preenchimento. */
    border: 1px solid rgb(148 163 184 / 16%); /* Borda de vidro. */
    border-radius: 50%; /* Círculo. */
    color: var(--lp-texto-apoio); /* Ícone cinza. */
    background: rgb(148 163 184 / 6%); /* Vidro. */
    cursor: pointer; /* Indica clique. */
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.3s ease; /* Hover suave. */
}

.mobile-sidebar__fechar:hover {
    color: var(--lp-texto); /* X branco... */
    border-color: rgb(148 163 184 / 35%); /* ...borda mais visível... */
    transform: rotate(90deg); /* ...e gira um quarto de volta. */
}

.mobile-sidebar__fechar svg {
    width: 1.125rem; /* Ícone X. */
    height: 1.125rem; /* Ícone X. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do botão. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
}

.mobile-sidebar__rotulo {
    margin: 1.5rem 0 0.5rem 0.75rem; /* Respiro acima dos links. */
    color: var(--lp-texto-suave); /* Rótulo discreto. */
    font-size: 0.6875rem; /* Texto pequeno. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.14em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

.mobile-sidebar__links {
    display: grid; /* Links empilhados. */
    gap: 0.25rem; /* Espaço entre links. */
}

.mobile-sidebar__links a {
    position: relative; /* Referência para a barra da página atual. */
    display: flex; /* Texto e seta... */
    align-items: center; /* ...centralizados... */
    justify-content: space-between; /* ...nas pontas. */
    padding: 0.875rem 0.75rem; /* Área de toque generosa. */
    border-radius: 12px; /* Cantos. */
    color: var(--lp-texto-apoio); /* Cinza. */
    font-size: 1rem; /* Texto legível. */
    font-weight: 600; /* Semi-negrito. */
    transition: color 0.2s ease, background-color 0.2s ease; /* Hover suave. */
}

.mobile-sidebar__links a::after {
    content: "›"; /* Seta discreta... */
    color: var(--lp-texto-suave); /* ...apagada... */
    font-size: 1.25rem; /* ...visível... */
    line-height: 1; /* ...alinhada. */
    transition: transform 0.2s ease, color 0.2s ease; /* ...que anda no hover. */
}

.mobile-sidebar__links a:hover,
.mobile-sidebar__links a[aria-current="page"] {
    color: var(--lp-texto); /* Branco. */
    background: rgb(148 163 184 / 8%); /* Destaque de vidro. */
}

.mobile-sidebar__links a:hover::after {
    color: var(--lp-ciano); /* Seta ciano... */
    transform: translateX(3px); /* ...avançando. */
}

.mobile-sidebar__links a[aria-current="page"]::before {
    content: ""; /* Barra da página atual. */
    position: absolute; /* Na borda esquerda. */
    top: 25%; /* Centrada... */
    bottom: 25%; /* ...na altura. */
    left: 0; /* Encostada. */
    width: 3px; /* Fina. */
    border-radius: 3px; /* Arredondada. */
    background: linear-gradient(180deg, var(--lp-violeta), var(--lp-ciano)); /* Gradiente da marca. */
}

.mobile-sidebar__pin {
    display: flex; /* Ícone e texto. */
    align-items: center; /* Centralizados. */
    gap: 0.75rem; /* Espaço entre eles. */
    margin-top: 1rem; /* Espaço acima. */
    padding: 0.875rem 1rem; /* Cartão. */
    border: 1px solid rgb(229 189 113 / 28%); /* Contorno dourado. */
    border-radius: 14px; /* Cantos. */
    color: var(--lp-ouro); /* Dourado do PIN. */
    background: rgb(229 189 113 / 6%); /* Fundo dourado translúcido. */
    font-size: 0.9375rem; /* Texto. */
    font-weight: 600; /* Semi-negrito. */
}

.mobile-sidebar__pin small {
    display: block; /* Linha de apoio. */
    color: var(--lp-texto-apoio); /* Cinza. */
    font-size: 0.75rem; /* Texto pequeno. */
    font-weight: 500; /* Peso médio. */
}

.mobile-sidebar__acoes {
    display: grid; /* Botões empilhados... */
    gap: 0.625rem; /* ...com espaço... */
    margin-top: auto; /* ...no fim do painel. */
    padding-top: 1.5rem; /* Respiro acima. */
}

.mobile-sidebar__acoes .lp-botao {
    width: 100%; /* Largura do painel. */
}

/* Entrada em cascata: cada item chega um instante depois do anterior. */
.mobile-sidebar.open .mobile-sidebar__item {
    animation: lp-menu-entrar 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; /* Desliza e aparece. */
    animation-delay: calc(0.08s + var(--i, 0) * 0.05s); /* Atraso progressivo. */
}

@keyframes lp-menu-entrar {
    from { opacity: 0; transform: translateX(-14px); } /* Um pouco à esquerda, invisível. */
    to { opacity: 1; transform: none; } /* No lugar. */
}

/* Menu aberto: a página por trás não rola. */
html.lp-menu-aberto,
html.lp-menu-aberto body {
    overflow: hidden; /* Trava a rolagem. */
}

@media (max-width: 64rem) {
    .lp-sanduiche {
        display: inline-grid; /* Aparece junto com o sumiço do menu de âncoras. */
    }

    .lp-topo__conteudo {
        gap: 0.75rem; /* Sanduíche e logo mais próximos. */
    }
}

/* Desktop: o painel nunca aparece, mesmo que tenha ficado aberto ao girar/aumentar a tela. */
@media (min-width: 64.0625rem) {
    .mobile-sidebar,
    .mobile-overlay {
        display: none; /* O menu de cima já mostra tudo. */
    }

    html.lp-menu-aberto,
    html.lp-menu-aberto body {
        overflow: visible; /* Rolagem liberada. */
    }
}

.lp-secao {
    padding: clamp(4rem, 9vw, 7rem) 0; /* Respiro vertical. */
}

/* Conversão final. */
.lp-final {
    position: relative; /* Referência para o brilho. */
    overflow: hidden; /* Recorta o brilho. */
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); /* Espaço interno generoso. */
    border: 1px solid rgb(129 140 248 / 28%); /* Contorno índigo. */
    border-radius: 28px; /* Cantos grandes. */
    background:
        radial-gradient(60% 120% at 50% 0%, rgb(99 102 241 / 32%), transparent 70%),
        radial-gradient(40% 80% at 100% 100%, rgb(34 211 238 / 14%), transparent 70%),
        linear-gradient(180deg, #111834, #0b0f19); /* Gradiente de luz vindo de cima. */
    box-shadow: 0 40px 90px -40px rgb(99 102 241 / 55%); /* Brilho projetado. */
    text-align: center; /* Centralizado. */
}

.lp-final h2 {
    max-width: 44rem; /* Linhas confortáveis. */
    margin: 0 auto; /* Centralizado. */
    font-size: clamp(2rem, 4.4vw, 3.25rem); /* Título imponente. */
    font-weight: 800; /* Extra negrito. */
}

.lp-final p {
    max-width: 38rem; /* Linhas confortáveis. */
    margin: 1.25rem auto 2.5rem; /* Espaço ao redor. */
    font-size: 1.0625rem; /* Texto um pouco maior. */
}

.lp-final__micro {
    margin-top: 1.25rem; /* Abaixo do botão. */
    color: var(--lp-texto-suave); /* Texto discreto. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

.lp-menu a[aria-current="page"] {
    color: var(--lp-texto); /* Página atual em branco... */
    font-weight: 600; /* ...e semi-negrito. */
}

/* Texto só para leitores de tela (invisível na tela). */
.visualmente-oculto {
    position: absolute; /* Fora do fluxo. */
    width: 1px; /* Tamanho mínimo. */
    height: 1px; /* Tamanho mínimo. */
    overflow: hidden; /* Oculta o conteúdo. */
    clip: rect(0 0 0 0); /* Recorta tudo. */
    white-space: nowrap; /* Sem quebra de linha. */
}

/* Rodapé (4 colunas no desktop, empilhadas no celular) ----------------------- */
.lp-rodape {
    margin-top: clamp(4rem, 8vw, 6rem); /* Espaço acima. */
    padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; /* Respiro interno. */
    border-top: 1px solid rgb(148 163 184 / 10%); /* Borda superior sutil. */
    background:
        radial-gradient(40rem 18rem at 10% 0%, rgb(124 58 237 / 8%), transparent 70%),
        #0b1120; /* Mais escuro que o corpo, com leve brilho da marca. */
    font-size: 0.9375rem; /* Texto do rodapé. */
}

.lp-rodape__grade {
    display: grid; /* Quatro colunas... */
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); /* ...a da marca um pouco maior. */
    gap: 2.5rem; /* Espaço entre colunas. */
}

.lp-rodape__slogan {
    max-width: 18rem; /* Slogan em duas linhas. */
    margin-top: 1rem; /* Abaixo da marca. */
    color: var(--lp-texto-apoio); /* Cinza claro. */
}

.lp-rodape__redes {
    display: flex; /* Ícones lado a lado. */
    gap: 0.625rem; /* Espaço entre ícones. */
    margin: 1.5rem 0 0; /* Abaixo do slogan. */
    padding: 0; /* Sem recuo. */
    list-style: none; /* Sem marcadores. */
}

.lp-rodape__redes a {
    display: grid; /* Centraliza o ícone. */
    place-items: center; /* Centro. */
    width: 2.5rem; /* Botão redondo. */
    height: 2.5rem; /* Botão redondo. */
    border: 1px solid rgb(148 163 184 / 16%); /* Borda de vidro. */
    border-radius: 50%; /* Círculo. */
    color: var(--lp-texto-apoio); /* Ícone cinza. */
    background: rgb(148 163 184 / 5%); /* Vidro. */
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; /* Hover suave. */
}

.lp-rodape__redes a:hover {
    border-color: rgb(34 211 238 / 45%); /* Borda ciano. */
    color: var(--lp-texto); /* Ícone branco. */
    transform: translateY(-2px); /* Sobe levemente. */
}

.lp-rodape__redes svg,
.lp-rodape__email svg {
    width: 1.125rem; /* Ícone. */
    height: 1.125rem; /* Ícone. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do link. */
    stroke-width: 1.75; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.lp-rodape__titulo {
    margin-bottom: 1rem; /* Espaço até os links. */
    color: var(--lp-texto); /* Branco. */
    font-size: 0.8125rem; /* Rótulo. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.1em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

.lp-rodape__coluna ul {
    display: grid; /* Links empilhados. */
    gap: 0.75rem; /* Espaço entre links. */
    margin: 0; /* Sem margens. */
    padding: 0; /* Sem recuo. */
    list-style: none; /* Sem marcadores. */
}

.lp-rodape__coluna ul a,
.lp-rodape__contato {
    color: var(--lp-texto-apoio); /* Links em cinza claro. */
    transition: color 0.2s ease; /* Hover suave. */
}

.lp-rodape__coluna ul a:hover,
.lp-rodape__contato:hover {
    color: var(--lp-texto); /* Branco no hover. */
}

.lp-rodape__texto {
    margin-bottom: 1rem; /* Espaço até o e-mail. */
    color: var(--lp-texto-apoio); /* Cinza claro. */
}

.lp-rodape__email {
    display: inline-flex; /* Ícone e e-mail. */
    align-items: center; /* Centralizados. */
    gap: 0.5rem; /* Espaço entre eles. */
    color: var(--lp-ouro); /* E-mail em destaque dourado. */
    font-weight: 600; /* Semi-negrito. */
    overflow-wrap: anywhere; /* Não estoura a coluna. */
}

.lp-rodape__email:hover {
    text-decoration: underline; /* Sublinha no hover. */
    text-underline-offset: 3px; /* Afastado. */
}

.lp-rodape__contato {
    display: inline-block; /* Linha própria. */
    margin-top: 0.75rem; /* Abaixo do e-mail. */
    font-size: 0.875rem; /* Texto menor. */
}

.lp-rodape__base {
    display: flex; /* Direitos e CNPJ nas pontas... */
    flex-wrap: wrap; /* ...empilhando se faltar espaço. */
    justify-content: space-between; /* Nas pontas. */
    gap: 0.5rem 2rem; /* Espaço entre eles. */
    margin-top: 3rem; /* Afastado das colunas. */
    padding-top: 1.5rem; /* Espaço até a linha. */
    border-top: 1px solid rgb(148 163 184 / 8%); /* Linha sutil. */
    color: var(--lp-texto-suave); /* Texto discreto. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

/* Páginas de texto (Termos, Privacidade, Contato) -------------------------- */
.pg-cabecalho {
    position: relative; /* Referência para o brilho. */
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3rem); /* Respiro. */
    text-align: center; /* Centralizado. */
}

.pg-cabecalho::before {
    content: ""; /* Brilho da marca atrás do título. */
    position: absolute; /* Atrás do conteúdo. */
    inset: 0; /* Bloco inteiro. */
    z-index: -1; /* Atrás. */
    background: radial-gradient(40rem 16rem at 50% 0%, rgb(99 102 241 / 22%), transparent 70%); /* Luz índigo. */
}

.pg-cabecalho__rotulo {
    margin-bottom: 0.875rem; /* Espaço até o título. */
    color: var(--lp-ciano); /* Ciano. */
    font-size: 0.75rem; /* Rótulo. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.14em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

.pg-cabecalho h1 {
    font-size: clamp(2rem, 5vw, 3.25rem); /* Título fluido. */
    font-weight: 800; /* Extra negrito. */
}

.pg-cabecalho__descricao {
    max-width: 40rem; /* Linhas confortáveis. */
    margin: 1rem auto 0; /* Centralizado. */
    font-size: 1.0625rem; /* Texto um pouco maior. */
}

/* Documento legal: coluna de leitura com sumário. */
.doc {
    display: grid; /* Sumário ao lado do texto... */
    grid-template-columns: 15rem minmax(0, 1fr); /* ...no desktop. */
    gap: 3rem; /* Espaço entre eles. */
    align-items: start; /* Cada um com a própria altura. */
}

.doc__sumario {
    position: sticky; /* Acompanha a rolagem... */
    top: 6rem; /* ...abaixo do cabeçalho fixo. */
    padding: 1.25rem; /* Espaço interno. */
    border: 1px solid var(--lp-vidro-borda); /* Borda de vidro. */
    border-radius: 16px; /* Cantos. */
    background: var(--lp-vidro); /* Vidro. */
    font-size: 0.875rem; /* Texto menor. */
}

.doc__sumario p {
    margin-bottom: 0.75rem; /* Espaço até a lista. */
    color: var(--lp-texto); /* Branco. */
    font-weight: 700; /* Negrito. */
}

.doc__sumario ol {
    display: grid; /* Itens empilhados. */
    gap: 0.5rem; /* Espaço entre itens. */
    margin: 0; /* Sem margens. */
    padding-left: 1.1rem; /* Números alinhados. */
}

.doc__sumario a:hover {
    color: var(--lp-texto); /* Branco no hover. */
}

.doc__texto {
    max-width: 46rem; /* Linha de leitura confortável. */
    color: #cbd5e1; /* Texto um pouco mais claro: leitura longa. */
    font-size: 1rem; /* Corpo. */
    line-height: 1.75; /* Entrelinha de leitura. */
}

.doc__aviso {
    margin-bottom: 2rem; /* Espaço até o texto. */
    padding: 1rem 1.25rem; /* Espaço interno. */
    border: 1px solid rgb(229 189 113 / 28%); /* Contorno dourado. */
    border-radius: 14px; /* Cantos. */
    color: var(--lp-texto-apoio); /* Cinza. */
    background: rgb(229 189 113 / 6%); /* Fundo dourado sutil. */
    font-size: 0.9375rem; /* Texto. */
}

.doc__texto h2 {
    margin: 2.75rem 0 1rem; /* Respiro entre seções. */
    padding-top: 0.5rem; /* Folga ao pular pelo sumário. */
    font-size: 1.375rem; /* Título de seção. */
    font-weight: 700; /* Negrito. */
}

.doc__texto h3 {
    margin: 1.75rem 0 0.75rem; /* Respiro. */
    font-size: 1.0625rem; /* Subtítulo. */
    font-weight: 700; /* Negrito. */
}

.doc__texto p,
.doc__texto ul {
    margin: 0 0 1rem; /* Espaço entre parágrafos. */
}

.doc__texto ul {
    padding-left: 1.25rem; /* Marcadores alinhados. */
}

.doc__texto li {
    margin-bottom: 0.5rem; /* Espaço entre itens. */
}

.doc__texto strong {
    color: var(--lp-texto); /* Destaques em branco. */
}

.doc__texto a {
    color: var(--lp-ciano); /* Links em ciano... */
    text-decoration: underline; /* ...sublinhados... */
    text-underline-offset: 3px; /* ...afastados. */
}

.doc__tabela {
    width: 100%; /* Largura do texto. */
    margin: 0 0 1.25rem; /* Espaço abaixo. */
    border-collapse: collapse; /* Bordas simples. */
    font-size: 0.9375rem; /* Texto da tabela. */
}

.doc__tabela th,
.doc__tabela td {
    padding: 0.75rem; /* Espaço interno. */
    border-bottom: 1px solid rgb(148 163 184 / 12%); /* Linha entre itens. */
    text-align: left; /* Alinhado à esquerda. */
    vertical-align: top; /* Topo. */
}

.doc__tabela th {
    color: var(--lp-texto); /* Cabeçalho branco. */
    font-weight: 600; /* Semi-negrito. */
}

.doc__rolagem {
    overflow-x: auto; /* Tabela rola sozinha no celular. */
}

/* Contato: informações diretas ao lado do formulário. */
.contato {
    display: grid; /* Informações e formulário lado a lado. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); /* Formulário maior. */
    gap: 1.5rem; /* Espaço entre eles. */
    align-items: start; /* Cada um com a própria altura. */
}

.contato__cartao {
    padding: clamp(1.5rem, 3vw, 2.25rem); /* Espaço interno. */
    border: 1px solid var(--lp-vidro-borda); /* Borda de vidro. */
    border-radius: var(--lp-raio); /* Cantos. */
    background: linear-gradient(160deg, rgb(148 163 184 / 9%), rgb(148 163 184 / 3%)); /* Vidro. */
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / 70%); /* Profundidade. */
}

.contato__destaque {
    margin-bottom: 1.5rem; /* Espaço até o próximo bloco. */
    padding: 1.25rem; /* Espaço interno. */
    border: 1px solid rgb(229 189 113 / 30%); /* Contorno dourado. */
    border-radius: 16px; /* Cantos. */
    background: rgb(229 189 113 / 6%); /* Fundo dourado sutil. */
}

.contato__rotulo {
    color: var(--lp-texto-suave); /* Rótulo discreto. */
    font-size: 0.75rem; /* Rótulo. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.1em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

.contato__email {
    display: block; /* Linha própria. */
    margin: 0.375rem 0 0.75rem; /* Espaço ao redor. */
    color: var(--lp-ouro); /* Dourado. */
    font-size: clamp(1.125rem, 2.4vw, 1.375rem); /* E-mail em destaque. */
    font-weight: 700; /* Negrito. */
    overflow-wrap: anywhere; /* Não estoura no celular. */
}

.contato__acoes {
    display: flex; /* Botões lado a lado. */
    flex-wrap: wrap; /* Quebram no celular. */
    gap: 0.5rem; /* Espaço entre eles. */
}

.contato__mini {
    display: inline-flex; /* Ícone e texto. */
    align-items: center; /* Centralizados. */
    min-height: 2.25rem; /* Botão compacto. */
    padding: 0 0.875rem; /* Cápsula. */
    border: 1px solid rgb(148 163 184 / 22%); /* Borda de vidro. */
    border-radius: 999px; /* Cápsula. */
    color: var(--lp-texto); /* Branco. */
    background: rgb(148 163 184 / 6%); /* Vidro. */
    font: inherit; /* Mesma fonte. */
    font-size: 0.8125rem; /* Texto pequeno. */
    font-weight: 600; /* Semi-negrito. */
    cursor: pointer; /* Indica clique. */
}

.contato__mini:hover {
    border-color: rgb(34 211 238 / 45%); /* Borda ciano no hover. */
}

.contato__lista {
    display: grid; /* Itens empilhados. */
    gap: 1rem; /* Espaço entre itens. */
    margin: 0; /* Sem margens. */
    padding: 0; /* Sem recuo. */
    list-style: none; /* Sem marcadores. */
}

.contato__lista strong {
    display: block; /* Título do item em linha própria. */
    color: var(--lp-texto); /* Branco. */
}

.contato__lista span {
    font-size: 0.9375rem; /* Texto de apoio. */
}

.contato__form {
    display: grid; /* Campos empilhados. */
    gap: 1.125rem; /* Espaço entre campos. */
}

.contato__linha {
    display: grid; /* Dois campos lado a lado... */
    grid-template-columns: 1fr 1fr; /* ...no desktop. */
    gap: 1.125rem; /* Espaço entre eles. */
}

.contato__campo label {
    display: block; /* Rótulo em linha própria. */
    margin-bottom: 0.4rem; /* Próximo do campo. */
    color: #cbd5e1; /* Cinza claro. */
    font-size: 0.8125rem; /* Rótulo. */
    font-weight: 500; /* Peso médio. */
}

.contato__campo input,
.contato__campo select,
.contato__campo textarea {
    width: 100%; /* Largura da coluna. */
    padding: 0.8rem 1rem; /* Espaço interno. */
    border: 1px solid rgb(148 163 184 / 16%); /* Borda fina. */
    border-radius: 12px; /* Cantos. */
    color: var(--lp-texto); /* Texto branco. */
    background: rgb(2 6 23 / 55%); /* Fundo escuro. */
    font: inherit; /* Mesma fonte. */
    font-size: 0.9375rem; /* Texto do campo. */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Foco suave. */
}

.contato__campo select {
    appearance: none; /* Seta própria. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1rem,
        rgb(2 6 23 / 55%); /* Fundo escuro com seta. */
}

.contato__campo select option {
    color: #0f172a; /* Opções legíveis na lista nativa. */
}

.contato__campo textarea {
    min-height: 9rem; /* Espaço para a mensagem. */
    resize: vertical; /* Só aumenta para baixo. */
}

.contato__campo input:focus,
.contato__campo select:focus,
.contato__campo textarea:focus {
    border-color: rgb(34 211 238 / 70%); /* Borda ciano... */
    outline: none; /* ...no lugar do contorno padrão... */
    box-shadow: 0 0 0 4px rgb(34 211 238 / 12%); /* ...com brilho. */
}

/* Armadilha para robôs: invisível para pessoas (inclusive leitores de tela). */
.contato__isca {
    position: absolute; /* Fora do fluxo. */
    left: -9999px; /* Fora da tela. */
    width: 1px; /* Mínimo. */
    height: 1px; /* Mínimo. */
    overflow: hidden; /* Recorta. */
}

.contato__privacidade {
    color: var(--lp-texto-suave); /* Texto discreto. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

.contato__privacidade a {
    color: var(--lp-texto-apoio); /* Link um pouco mais claro... */
    text-decoration: underline; /* ...sublinhado. */
}

.contato__mensagem {
    padding: 0.875rem 1rem; /* Faixa. */
    border-radius: 12px; /* Cantos. */
    font-size: 0.9375rem; /* Texto. */
}

.contato__mensagem:empty {
    display: none; /* Some sem mensagem. */
}

.contato__mensagem--sucesso {
    border: 1px solid rgb(52 211 153 / 35%); /* Contorno verde. */
    color: #6ee7b7; /* Verde claro. */
    background: rgb(52 211 153 / 8%); /* Fundo verde. */
}

.contato__mensagem--erro {
    border: 1px solid rgb(248 113 113 / 35%); /* Contorno vermelho. */
    color: #fca5a5; /* Vermelho claro. */
    background: rgb(248 113 113 / 8%); /* Fundo vermelho. */
}

/* Telas médias: menu de âncoras some (o sanduíche aparece); páginas de texto em uma coluna. */
@media (max-width: 64rem) {
    .lp-menu {
        display: none; /* Menu de âncoras some; os CTAs continuam. */
    }

    .lp-topo__acoes {
        margin-left: auto; /* Ações à direita. */
    }

    .lp-rodape__grade {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Rodapé 2x2. */
    }

    .doc,
    .contato {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna. */
    }

    .doc__sumario {
        position: static; /* Sumário no topo, sem acompanhar a rolagem. */
    }
}

/* Celulares: cabeçalho compacto, rodapé empilhado. */
@media (max-width: 40rem) {
    .lp-link-pin,
    .lp-topo__acoes .lp-botao--secundario {
        display: none; /* Sobra só o CTA principal no cabeçalho... */
    }

    .lp-topo__acoes .lp-botao {
        min-height: 2.5rem; /* ...mais compacto. */
        padding: 0 1rem; /* Menos espaço lateral. */
        font-size: 0.875rem; /* Texto menor. */
    }

    .lp-final .lp-botao {
        width: 100%; /* CTA final na largura toda... */
        padding: 0 1rem; /* ...com texto que cabe. */
        white-space: normal; /* Pode quebrar a linha. */
        text-align: center; /* Centralizado. */
    }

    .lp-rodape__grade {
        grid-template-columns: minmax(0, 1fr); /* Colunas empilhadas. */
        gap: 2rem; /* Menos espaço. */
    }

    .lp-rodape__base {
        flex-direction: column; /* Direitos e CNPJ empilhados. */
    }

    .contato__linha {
        grid-template-columns: minmax(0, 1fr); /* Um campo por linha. */
    }
}

/* Menos movimento para quem prefere. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto; /* Pulo direto às seções. */
    }

    *,
    *::before,
    *::after {
        animation: none !important; /* Desliga as animações decorativas. */
        transition: none !important; /* Sem transições. */
    }
}