/* =====================================================================
   Simulado — Design system único (um arquivo só, de propósito).
   Para mudar uma cor/espaçamento em todo o site, mexa nas variáveis
   do :root abaixo — evite duplicar valores soltos nas regras.
   ===================================================================== */

:root {
    /* Cores base */
    --cor-fundo: #F6F4FF;
    --cor-superficie: #FFFFFF;
    --cor-texto: #221F3B;
    --cor-texto-suave: #6C6889;
    --cor-borda: #E6E1F7;

    /* Marca / ação */
    --cor-primaria: #6C63FF;
    --cor-primaria-escura: #5148E0;
    --cor-primaria-clara: #ECE9FF;
    --cor-secundaria: #FF6B6B;

    /* Estados */
    --cor-sucesso: #1FAE6A;
    --cor-sucesso-clara: #E4F9EE;
    --cor-erro: #E64545;
    --cor-erro-clara: #FDEBEB;
    --cor-alerta: #E8940C;
    --cor-alerta-clara: #FFF4E0;
    --cor-info: #2E7CE0;
    --cor-info-clara: #E9F2FF;

    /* Forma */
    --raio: 16px;
    --raio-pequeno: 10px;
    --raio-grande: 24px;
    --sombra: 0 10px 30px rgba(65, 56, 140, 0.10);
    --sombra-pequena: 0 4px 12px rgba(65, 56, 140, 0.08);

    --fonte-titulo: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --fonte-corpo: 'Nunito', system-ui, -apple-system, sans-serif;
}

/* Perfil "aluno": um pouco mais vibrante/lúdico */
body[data-perfil="aluno"] {
    --cor-fundo: #F5F2FF;
}

/* Fase 5 do SaaS multi-tenant: tema visual por escola (grupo_escolar.cor_tema,
   editável em /professor/grupo). 'claro' é o padrão acima (cinza claro);
   'escuro' troca a paleta pra um azul escuro. Vem DEPOIS do override de
   perfil "aluno" de propósito: numa escola com tema escuro, o tema da
   escola prevalece mesmo pro perfil aluno. */
body[data-tema="escuro"] {
    --cor-fundo: #0F1729;
    --cor-superficie: #1A2340;
    --cor-texto: #EDEFFB;
    --cor-texto-suave: #9CA3C4;
    --cor-borda: #2B3660;

    --cor-primaria: #3B82F6;
    --cor-primaria-escura: #2563EB;
    --cor-primaria-clara: #1E3A6E;

    --cor-sucesso-clara: #14321F;
    --cor-erro-clara: #3A1D1D;
    --cor-alerta-clara: #3A2E10;
    --cor-info: #60A5FA;
    --cor-info-clara: #1E3355;

    --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
    --sombra-pequena: 0 4px 12px rgba(0, 0, 0, 0.28);
}

/* Melhoria 2026-09-11: 3º tema visual por escola — 'grafite' (cinza
   escuro neutro, sem o matiz azulado do tema 'escuro'). Mantém a cor de
   marca (roxo) como acento, só ajustada pra contrastar bem em fundo
   escuro neutro. Mesma convenção do tema 'escuro' acima. */
body[data-tema="grafite"] {
    --cor-fundo: #1B1B1D;
    --cor-superficie: #262628;
    --cor-texto: #EDEDEE;
    --cor-texto-suave: #9B9B9F;
    --cor-borda: #3A3A3D;

    --cor-primaria: #8B7CFF;
    --cor-primaria-escura: #6C63FF;
    --cor-primaria-clara: #2E2A4D;

    --cor-sucesso-clara: #17301F;
    --cor-erro-clara: #331B1B;
    --cor-alerta-clara: #332A12;
    --cor-info: #7DA6FF;
    --cor-info-clara: #1E2A45;

    --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
    --sombra-pequena: 0 4px 12px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-corpo);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Correções defensivas 2026-09-11 (layout quebrando no mobile, ex.:
   /professor/suporte): nada na página deve conseguir empurrar a
   largura além do viewport. Aplicado globalmente — é sempre correto,
   não só nas telas com o bug relatado. */
img, svg { max-width: 100%; height: auto; }
/* <input type="file"> tem largura mínima "nativa" grande em alguns
   navegadores mobile (Safari/WebView Android) e é o suspeito mais
   comum de estourar a largura da página quando existe MAIS de um
   (como em /professor/suporte, ticket + resposta) — sem isso, ele
   ignora `max-width:100%` do resto do formulário. */
input[type="file"] { max-width: 100%; }
/* Texto sem espaço que não quebra sozinho (nome de arquivo anexado,
   número de ticket, link longo) — sem isso um único texto comprido
   força o cartão/flex a ficar mais largo que a tela. */
.cartao a, .cartao p, .cartao small { overflow-wrap: anywhere; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 700; margin: 0 0 .5em; line-height: 1.25; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; color: var(--cor-texto-suave); }
/* Melhoria 2026-09-12 (pedido do usuário): nenhum link do site sublinhado
   por padrão — a cor já basta pra indicar que é clicável. Classes mais
   específicas (ex.: .botao-link, que é um <button> imitando link em
   texto corrido) continuam com seu próprio text-decoration, já que não
   herdam de `a`. */
a { color: var(--cor-primaria-escura); text-decoration: none; }
small { color: var(--cor-texto-suave); }

/* ---------------------------------------------------------------------
   Layout geral do app autenticado
   --------------------------------------------------------------------- */
.avatar-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--cor-primaria-clara);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Fase 13 (2026-09-04): menu lateral colapsável estilo ERP, substituindo
   a antiga barra horizontal de pills (.nav-app).
   Fase 14 (2026-09-04): o cabeçalho (.cabecalho-app) foi removido de vez
   — marca, usuário, "Meus dados"/"Sair" moraram pra dentro da própria
   barra lateral, que agora existe pras DUAS perfis (professor e aluna),
   não só pro professor. */
.botao-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: var(--raio-pequeno);
    border: 2px solid var(--cor-borda);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font-size: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
}
.botao-menu:hover { background: var(--cor-fundo); }

/* Botão flutuante só pra abrir a gaveta no celular — sem cabeçalho, é o
   único jeito de abrir a barra lateral quando ela está fora de tela
   (o botão de dentro da barra não adianta se a barra em si está
   escondida). Some no desktop, onde a barra fica sempre visível. */
.botao-menu-flutuante {
    display: none;
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 22;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: none;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: var(--sombra);
    cursor: pointer;
}

.app-corpo { display: flex; align-items: flex-start; }

.barra-lateral {
    flex-shrink: 0;
    /* Correção 2026-09-18 (pedido do usuário): 220px -> 240px — layout é
       flex (.app-corpo), então o conteúdo se ajusta sozinho, sem precisar
       mexer em nenhuma outra regra. */
    width: 240px;
    background: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda);
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    transition: width .15s ease;
    z-index: 15;
}

/* Regra global do menu: nenhum texto em itálico, padronização visual completa */
.barra-lateral em {
    font-style: normal !important;
}

.barra-lateral__topo {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem .8rem;
    border-bottom: 1px solid var(--cor-borda);
}
.barra-lateral__marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--cor-texto);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}
.barra-lateral__marca-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    color: #fff;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
}
.barra-lateral__perfil {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .8rem;
    border-bottom: 1px solid var(--cor-borda);
    text-decoration: none;
    color: inherit;
    transition: background .1s ease;
}
.barra-lateral__perfil:hover {
    background: var(--cor-primaria-clara);
}
.barra-lateral__perfil-texto {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.barra-lateral__perfil-texto small { font-weight: 600; font-size: .72rem; }

.barra-lateral__itens {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

/* Itens de menu direto e cabeçalhos de grupos compartilham exatamente a mesma estrutura */
.barra-lateral__item,
.barra-lateral__grupo-cabecalho {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .75rem;
    min-height: 2.3rem;
    border-radius: var(--raio-pequeno);
    text-decoration: none;
    color: var(--cor-texto-suave);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: .88rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background .12s ease, color .12s ease;
    box-sizing: border-box;
}

/* Ícones padronizados e ligeiramente menores */
.barra-lateral__item span,
.barra-lateral__grupo-cabecalho span {
    font-size: 1.05rem;
    width: 1.3rem;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.barra-lateral__item em,
.barra-lateral__grupo-cabecalho em {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover e estados ativos consistentes */
.barra-lateral__item:hover,
.barra-lateral__grupo-cabecalho:hover {
    background: var(--cor-fundo);
    color: var(--cor-texto);
}
.barra-lateral__item.is-ativo {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    font-weight: 800;
}
body[data-tema="escuro"] .barra-lateral__item.is-ativo,
body[data-tema="grafite"] .barra-lateral__item.is-ativo {
    color: #fff;
    background: var(--cor-primaria-clara);
}
.barra-lateral__grupo.has-ativo > .barra-lateral__grupo-cabecalho {
    color: var(--cor-primaria-escura);
    font-weight: 800;
}
body[data-tema="escuro"] .barra-lateral__grupo.has-ativo > .barra-lateral__grupo-cabecalho,
body[data-tema="grafite"] .barra-lateral__grupo.has-ativo > .barra-lateral__grupo-cabecalho {
    color: var(--cor-primaria);
}

/* Seta indicadora de submenu com visual nítido e proporção elegante */
.barra-lateral__grupo-seta {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .15s ease;
    margin-left: auto;
    margin-right: .2rem;
    flex-shrink: 0;
    opacity: .85;
}
.barra-lateral__grupo.is-aberto > .barra-lateral__grupo-cabecalho .barra-lateral__grupo-seta {
    transform: rotate(-135deg);
    opacity: 1;
}

/* Container de submenus */
.barra-lateral__submenu {
    display: none;
    flex-direction: column;
    gap: .15rem;
    padding-left: 1.9rem;
    padding-top: .15rem;
    padding-bottom: .25rem;
}
.barra-lateral__grupo.is-aberto > .barra-lateral__submenu {
    display: flex;
}

/* Subitens com a mesma identidade visual */
.barra-lateral__subitem {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .7rem;
    min-height: 2rem;
    border-radius: var(--raio-pequeno);
    text-decoration: none;
    color: var(--cor-texto-suave);
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: .86rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    transition: background .12s ease, color .12s ease;
}
.barra-lateral__subitem:hover {
    background: var(--cor-fundo);
    color: var(--cor-primaria-escura);
}
.barra-lateral__subitem.is-ativo {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    font-weight: 700;
}
body[data-tema="escuro"] .barra-lateral__subitem.is-ativo,
body[data-tema="grafite"] .barra-lateral__subitem.is-ativo {
    color: #fff;
    background: var(--cor-primaria-clara);
}

.barra-lateral__separador {
    height: 1px;
    background: var(--cor-borda);
    margin: .4rem .3rem;
    flex-shrink: 0;
}

/* Rodapé ("Meus dados" e "Sair") proporcional e harmonizado com o restante */
.barra-lateral__rodape {
    padding: .5rem .6rem;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex-shrink: 0;
}
.barra-lateral__rodape form {
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}
/* Melhoria 2026-09 (rodada 3, item 1): número de versão, bem discreto. */
.barra-lateral__versao {
    text-align: center;
    color: var(--cor-texto-fraco, #98a2b3);
    font-size: .68rem;
    opacity: .7;
    padding-top: .2rem;
}
.barra-lateral__item--botao {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    margin: 0;
}

/* Colapsada (desktop): só os ícones, com rótulos e setas ocultados */
.barra-lateral.is-colapsada { width: 60px; }
.barra-lateral.is-colapsada .barra-lateral__item,
.barra-lateral.is-colapsada .barra-lateral__grupo-cabecalho { justify-content: center; padding: .45rem; }
.barra-lateral.is-colapsada .barra-lateral__item em,
.barra-lateral.is-colapsada .barra-lateral__grupo-cabecalho em,
.barra-lateral.is-colapsada .barra-lateral__grupo-seta,
.barra-lateral.is-colapsada .barra-lateral__marca em,
.barra-lateral.is-colapsada .barra-lateral__perfil-texto { display: none; }
.barra-lateral.is-colapsada .barra-lateral__perfil { justify-content: center; }
.barra-lateral.is-colapsada .barra-lateral__submenu { display: none !important; }
/* Correção 2026-09-13 (pedido do usuário: badge "Ambiente de QA" sobrepunha
   o menu e extrapolava pro conteúdo quando o menu lateral está colapsado —
   só ícones visíveis): encolhe o badge e esconde o texto "AMBIENTE DE ",
   deixando só "🧪 QA" compacto, sem quebrar o layout do rodapé do menu. */
.barra-lateral.is-colapsada .barra-lateral__rodape { align-items: center; }
.barra-lateral.is-colapsada .barra-lateral__badge-qa {
    margin-left: 0 !important;
    padding: .15rem .4rem;
    font-size: .62rem;
    white-space: nowrap;
}
.barra-lateral.is-colapsada .barra-lateral__badge-qa-prefixo { display: none; }

/* Flyout flutuante no desktop colapsado */
@media (min-width: 861px) {
    .barra-lateral.is-colapsada .barra-lateral__grupo:hover .barra-lateral__submenu {
        display: flex !important;
        position: absolute;
        left: 100%;
        top: 0;
        min-width: 190px;
        background: var(--cor-superficie);
        border: 1px solid var(--cor-borda);
        border-radius: var(--raio-pequeno);
        box-shadow: var(--sombra);
        padding: .5rem;
        z-index: 50;
        margin-left: 4px;
    }
    .barra-lateral.is-colapsada .barra-lateral__grupo:hover .barra-lateral__subitem em {
        display: inline !important;
    }
}

.app-corpo__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(34, 31, 59, .45);
    z-index: 14;
}

.conteudo-app {
    flex: 1;
    min-width: 0;
    max-width: 980px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

/* Mobile: a barra lateral vira uma gaveta (some por padrão, abre por
   cima do conteúdo quando o botão flutuante de menu é clicado). */
@media (max-width: 860px) {
    /* Rede de segurança final: se algo (mesmo algo que a gente não
       previu) tentar ficar mais largo que a tela, corta em vez de
       empurrar a página inteira e "reconfigurar" o layout. */
    html, body { overflow-x: hidden; }

    .botao-menu-flutuante {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Correção 2026-09-11: no celular esse botão ficava fixo no
           canto superior ESQUERDO e sobrepunha o começo do conteúdo
           (ex.: nome da aluna, título da página). Movido pra direita,
           onde nenhuma tela tem conteúdo fixo naquele canto. */
        left: auto;
        right: .75rem;
    }

    /* Correção 2026-09-17 (pedido do usuário): no celular, o cronômetro
       do Desafio relâmpago (e os da tela de prova) ficavam embaixo do
       botão flutuante de menu — os dois brigando pelo canto superior
       direito. O botão fica em right:.75rem com 2.6rem de diâmetro
       (ocupa até uns 3.35rem da borda); a margem abaixo garante que o
       cronômetro nunca invada essa faixa, esteja ele na mesma linha do
       título ou tenha quebrado pra linha de baixo (.cabecalho-secao e
       .prova-topo já tem flex-wrap). */
    .temporizador {
        margin-right: 3.5rem;
    }

    /* Melhoria 2026-09-18 (pedido do usuário): no Desafio relâmpago, a
       página lista TODAS as questões de uma vez (sem paginação) — ao
       rolar pra responder, o aluno perdia de vista o cronômetro, que só
       existia dentro do cabeçalho no topo.

       Tentativa 1 (descartada): só o `#temporizador-relampago` com
       `position: fixed`, deixando o `<h1>` sozinho no fluxo. Quebrou de
       duas formas, as duas só visíveis no teste visual: (a) sem o
       cronômetro reservando espaço no `.cabecalho-secao`, o título
       "⚡ Desafio relâmpago" passou a ocupar a linha toda e ficou embaixo
       do próprio cronômetro flutuante; (b) mesmo depois de reservar
       espaço no título, ao rolar a página o cronômetro (que não faz
       parte de nenhum cartão) ia parar por cima do ENUNCIADO da questão
       que estivesse no topo da tela nesse momento — exatamente a
       sobreposição de dado importante que o pedido do usuário avisou
       pra evitar.

       Tentativa 2 (descartada): `.cabecalho-secao` inteiro com `position:
       sticky`. Resolveria a sobreposição (a barra cobre só a própria
       faixa, o resto do conteúdo passa por baixo dela, nunca do lado) —
       mas não gruda: `html, body { overflow-x: hidden }`, algumas linhas
       acima nesse mesmo media query ("rede de segurança" contra layout
       mais largo que a tela), faz o navegador tratar `overflow-y` deles
       como "auto" (regra do spec de overflow: eixo "visible" vira "auto"
       quando o outro eixo não é "visible") — isso cria um scroll
       container "acidental" em `html`/`body` que quebra `position:
       sticky` de QUALQUER elemento dentro da página (confirmado isolando
       um `<div>` de teste, sem nenhuma outra regra deste projeto). Mudar
       aquela regra pra consertar sticky é fora do escopo deste pedido
       (ela protege TODAS as páginas mobile de um bug de layout antigo) —
       não mexer nela sem pedido explícito.

       Solução adotada: `.cabecalho-secao` inteiro (título + cronômetro)
       com `position: fixed; left:0; right:0` (não depende de scroll
       container, só do viewport) e fundo sólido (`--cor-fundo`, correto
       em todos os temas) — cobre só a própria faixa, igual à tentativa 2,
       sem depender de sticky. Como `fixed` tira o elemento do fluxo,
       precisa compensar o espaço que ele ocupava, senão o resto do
       conteúdo sobe e fica embaixo dele — por isso o script no fim de
       desafio_relampago.php mede a altura real do cabeçalho (via JS, na
       carga da página) e aplica como `padding-top` no `<body>`: mais
       preciso que um valor fixo no CSS (que quebraria se o título
       quebrasse em 2 linhas numa tela bem estreita, por exemplo). */
    .cabecalho-secao--desafio-relampago {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 18;
        background: var(--cor-fundo);
        padding: .75rem .75rem .5rem;
        box-shadow: var(--sombra-pequena);
    }

    /* Correção 2026-09-17 (pedido do usuário): em telas com colunas
       estreitas (ex.: "Ver plano" na grade de /aluno/planos-estudo), o
       botão dividia "Ver plano" letra por letra dentro da célula
       (`.cartao a { overflow-wrap: anywhere }` deixa qualquer link
       dentro de um cartão quebrar em qualquer ponto quando o espaço
       aperta). No celular, mostra só o ícone — o texto continua
       acessível via aria-label/title no próprio link. */
    .botao--rotulo-oculto-mobile .botao__rotulo {
        display: none;
    }

    .barra-lateral {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        height: 100dvh; /* Correção 2026-09: 100vh conta com a barra do navegador escondida;
                            no celular isso empurrava o rodapé ("Sair") pra fora da área visível. */
        min-height: 0;
        width: 240px;
        box-shadow: var(--sombra);
        transform: translateX(-100%);
        z-index: 21;
    }
    .barra-lateral.is-aberta { transform: translateX(0); }
    /* No mobile, colapsar não se aplica — só aberta/fechada. */
    .barra-lateral.is-colapsada { width: 240px; }
    .barra-lateral.is-colapsada .barra-lateral__item em,
    .barra-lateral.is-colapsada .barra-lateral__marca em { display: inline; }
    .barra-lateral.is-colapsada .barra-lateral__perfil-texto { display: flex; }
    .barra-lateral.is-colapsada .barra-lateral__item,
    .barra-lateral.is-colapsada .barra-lateral__grupo-cabecalho { justify-content: flex-start; }
    .barra-lateral.is-colapsada .barra-lateral__grupo-cabecalho em,
    .barra-lateral.is-colapsada .barra-lateral__grupo-seta { display: inline; }
    .barra-lateral.is-colapsada .barra-lateral__grupo.is-aberto > .barra-lateral__submenu {
        display: flex !important;
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 2rem;
    }
    .barra-lateral.is-colapsada .barra-lateral__perfil { justify-content: flex-start; }
    .app-corpo__backdrop.is-visivel { display: block; }
}

/* ---------------------------------------------------------------------
   Páginas públicas (login / instalação)
   --------------------------------------------------------------------- */
.fundo-publico {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at 15% 15%, #2E5CA8 0%, transparent 45%),
                radial-gradient(circle at 85% 85%, #1B3A73 0%, transparent 45%),
                linear-gradient(160deg, #16234A 0%, #0D1730 60%, #060B18 100%);
}
.cartao-publico {
    width: 100%;
    max-width: 420px;
    background: var(--cor-superficie);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra);
    padding: 2rem 1.75rem;
}
.cartao-publico__marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
}
.cartao-publico__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    color: #fff;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1;
}

/* ---------------------------------------------------------------------
   Fase 12 do SaaS multi-tenant: landing page de venda (/assinar) —
   layout_landing.php. Larga (não é o cartão centralizado de login),
   reaproveita as variáveis de cor/fonte do resto do sistema.
   --------------------------------------------------------------------- */
.pagina-landing {
    background: var(--cor-fundo);
}
.landing-hero {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    text-align: center;
}
.landing-hero__marca {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}
.landing-hero h1 {
    font-family: var(--fonte-titulo);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin-bottom: .8rem;
}
.landing-hero__subtitulo {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}
.landing-recursos {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem 1.5rem 2.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}
.landing-recursos__item {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.2rem;
}
.landing-recursos__item span { font-size: 1.6rem; }
.landing-recursos__item b { display: block; margin: .4rem 0 .3rem; font-family: var(--fonte-titulo); }
.landing-recursos__item p { margin: 0; font-size: .88rem; }
.landing-planos {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 2.5rem;
    text-align: center;
}
.landing-planos__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}
.landing-plano-card {
    display: block;
    background: var(--cor-superficie);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.2rem .8rem;
    cursor: pointer;
    transition: border-color .15s, transform .1s;
}
.landing-plano-card:hover { border-color: var(--cor-primaria-clara); }
.landing-plano-card.is-selecionado { border-color: var(--cor-primaria); transform: translateY(-2px); }
.landing-plano-card b { display: block; font-family: var(--fonte-titulo); margin-bottom: .4rem; }
.landing-plano-card__preco { display: block; font-size: 1.3rem; font-weight: 800; color: var(--cor-primaria-escura); margin-bottom: .2rem; }
/* Melhoria 2026-09-12 (pedido do usuário): valor principal riscado +
   valor promocional em destaque, quando o plano está em promoção
   ativa (ver Helpers.php:preco_plano_card_html()). */
.landing-plano-card__preco-riscado { display: block; font-size: .92rem; font-weight: 600; color: var(--cor-texto-suave); text-decoration: line-through; margin-bottom: .1rem; }
.landing-plano-card__preco--promo { color: var(--cor-sucesso); }
.landing-cadastro {
    max-width: 1040px;
    margin: 0 auto;
    padding: 3rem 1.5rem 6rem;
}
.landing-cadastro h2, .landing-planos h2 { font-family: var(--fonte-titulo); text-align: center; }
.landing-form {
    background: var(--cor-superficie);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-grande);
    padding: 3.2rem 4rem;
    box-shadow: 0 20px 50px rgba(65, 56, 140, 0.09);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.landing-form:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 24px 60px rgba(108, 99, 255, 0.14);
}
.landing-form .form-grade {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2.2rem;
    margin-bottom: 1.8rem;
}
.landing-form .campo--bloco {
    grid-column: 1 / -1;
}
.landing-form .campo label {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--cor-texto);
    margin-bottom: .5rem;
}
.landing-form .campo input[type="text"],
.landing-form .campo input[type="email"],
.landing-form .campo input[type="password"],
.landing-form .campo select {
    width: 100%;
    padding: .95rem 1.25rem;
    font-size: 1.05rem;
    font-family: var(--fonte-corpo);
    color: var(--cor-texto);
    background: var(--cor-superficie);
    border: 2px solid var(--cor-borda);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
    min-height: 3.35rem;
    box-sizing: border-box;
}
.landing-form .campo input::placeholder {
    color: #9CA3C4;
    opacity: .75;
}
.landing-form .campo input:focus,
.landing-form .campo select:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 4px var(--cor-primaria-clara);
}
.landing-form .campo--checkbox {
    grid-column: 1 / -1;
    margin: .8rem 0 1.2rem;
    padding: 1.1rem 1.4rem;
    background: var(--cor-fundo);
    border-radius: 12px;
    border: 1px solid var(--cor-borda);
}
.landing-form .campo--checkbox label {
    display: flex;
    align-items: center;
    gap: .85rem;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    line-height: 1.5;
    margin: 0;
    color: var(--cor-texto);
}
.landing-form .campo--checkbox input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    accent-color: var(--cor-primaria);
    cursor: pointer;
    margin: 0;
}
.landing-form button[type="submit"] {
    min-height: 3.8rem;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -.01em;
    border-radius: 12px;
    box-shadow: var(--sombra);
    transition: transform .1s ease, filter .15s ease;
}
.landing-form button[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

@media (max-width: 860px) {
    .landing-cadastro {
        padding: 2rem 1rem 4rem;
    }
    .landing-form {
        padding: 2rem 1.5rem;
    }
    .landing-form .form-grade {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

/* ---------------------------------------------------------------------
   Componentes genéricos
   --------------------------------------------------------------------- */
.cartao {
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra-pequena);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.cartao--destaque { border: 2px solid var(--cor-primaria-clara); }

/* Melhoria 2026-09-12: botão com aparência de link (usado no "Ver
   completo" do comunicado em /mensagens) e o <dialog> nativo que ele
   abre — sem lib JS, respeitando o tema (claro/escuro/grafite) via as
   mesmas custom properties do resto do site. */
.botao-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--cor-primaria);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
}
.dialog-comunicado {
    max-width: 520px;
    width: 90vw;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.25rem;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    box-shadow: var(--sombra-pequena);
}
.dialog-comunicado::backdrop {
    background: rgba(0, 0, 0, .5);
}

/* Fase 18: "dropdown" de checkboxes (ex.: marcar várias matérias de uma
   vez pra gerar questões por IA) — um <details> estilizado pra parecer
   um campo de formulário normal, com um painel flutuante de checkboxes. */
.dropdown-checkbox { position: relative; }
.dropdown-checkbox > summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    padding: .6rem .7rem;
    background: var(--cor-superficie);
    font-weight: 600;
    font-size: .95rem;
    color: var(--cor-texto);
}
.dropdown-checkbox > summary::-webkit-details-marker { display: none; }
.dropdown-checkbox > summary::after { content: '▾'; float: right; color: var(--cor-texto-suave); }
.dropdown-checkbox[open] > summary::after { content: '▴'; }
.dropdown-checkbox__painel {
    position: absolute;
    z-index: 20;
    top: calc(100% + .3rem);
    left: 0;
    min-width: 100%;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra);
    padding: .4rem;
    max-height: 260px;
    overflow-y: auto;
}
.dropdown-checkbox__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: var(--raio-pequeno);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
}
.dropdown-checkbox__item:hover { background: var(--cor-primaria-clara); }

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-family: var(--fonte-corpo);
    font-weight: 800;
    font-size: .92rem;
    padding: .7rem 1.3rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    background: var(--cor-primaria);
    color: #fff;
    transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
}
.botao:hover { background: var(--cor-primaria-escura); }
.botao:active { transform: scale(.97); }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao--secundario { background: var(--cor-secundaria); }
.botao--sucesso { background: var(--cor-sucesso); }
.botao--perigo { background: var(--cor-erro); }
.botao--fantasma { background: transparent; color: var(--cor-texto-suave); border: 2px solid var(--cor-borda); }
.botao--fantasma:hover { background: var(--cor-fundo); color: var(--cor-texto); }
.botao--pequeno { padding: .45rem .9rem; font-size: .8rem; }
.botao--bloco { display: flex; width: 100%; }
.botao:disabled { opacity: .7; cursor: wait; }

/* Fase 6: spinner do indicador de carregamento (ver assets/js/ia-loading.js) */
.spinner-ia {
    display: inline-block;
    width: .9em;
    height: .9em;
    border: .15em solid rgba(255,255,255,.5);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -.15em;
    animation: girar-spinner-ia .7s linear infinite;
}
@keyframes girar-spinner-ia { to { transform: rotate(360deg); } }

.avatar-foto {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    background: var(--cor-primaria-clara);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}
.badge--em_andamento { background: var(--cor-info-clara); color: var(--cor-info); }
.badge--finalizado { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.badge--expirado { background: var(--cor-alerta-clara); color: var(--cor-alerta); }
.badge--nao_iniciado { background: var(--cor-fundo); color: var(--cor-texto-suave); border: 1px solid var(--cor-borda); }
.badge--ia { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }
.badge--disponivel, .badge--sempre_disponivel { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.badge--agendado { background: var(--cor-info-clara); color: var(--cor-info); }
.badge--encerrado { background: var(--cor-fundo); color: var(--cor-texto-suave); border: 1px solid var(--cor-borda); }
/* Melhoria 2026-09-16 (pedido do usuário): tom mais forte que .badge--erro
   (que é fundo claro + texto vermelho) — fundo vermelho SÓLIDO com texto
   branco, pra fatura já VENCIDA se destacar de "vai vencer em 2 dias" na
   grade de /admin/escolas. */
.badge--vencido { background: var(--cor-erro); color: #fff; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .8rem;
    background: var(--cor-materia, var(--cor-primaria-clara));
    color: #fff;
}
.chip--clara {
    background: color-mix(in srgb, var(--cor-materia, var(--cor-primaria)) 16%, white);
    color: color-mix(in srgb, var(--cor-materia, var(--cor-primaria)) 70%, black);
}

/* Fase 18: chip de série, colorido por etapa — só pra bater o olho e
   diferenciar rápido a que etapa cada simulado pertence na grid. */
.chip--etapa-fundamental1 { background: color-mix(in srgb, #2E9E5B 16%, white); color: color-mix(in srgb, #2E9E5B 65%, black); }
.chip--etapa-fundamental2 { background: color-mix(in srgb, #2E7CD6 16%, white); color: color-mix(in srgb, #2E7CD6 65%, black); }
.chip--etapa-medio { background: color-mix(in srgb, #A6459B 16%, white); color: color-mix(in srgb, #A6459B 65%, black); }

.flash-pilha { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.flash {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: var(--raio-pequeno);
    font-weight: 700;
    font-size: .9rem;
}
.flash--sucesso { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.flash--erro { background: var(--cor-erro-clara); color: var(--cor-erro); }
.flash--info { background: var(--cor-info-clara); color: var(--cor-info); }

.caixa-erros {
    background: var(--cor-erro-clara);
    color: var(--cor-erro);
    border-radius: var(--raio-pequeno);
    padding: .9rem 1.1rem;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: .88rem;
}
.caixa-erros ul { margin: 0; padding-left: 1.1rem; }

/* Formulários */
.campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; min-width: 0; }
.campo label { font-weight: 800; font-size: .85rem; }
.campo small { font-size: .76rem; }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="url"],
.campo input[type="date"],
.campo input[type="datetime-local"],
.campo input[type="time"],
.campo select,
.campo textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-family: var(--fonte-corpo);
    font-size: .95rem;
    padding: .65rem .8rem;
    border-radius: var(--raio-pequeno);
    border: 2px solid var(--cor-borda);
    background: var(--cor-superficie);
    color: var(--cor-texto);
}
/* <select> não encolhe abaixo do texto da opção mais longa por padrão —
   isso estourava a largura do cartão quando um tema de redação tinha
   título comprido (ex.: "Tema de redação" em editar/criar simulado).
   min-width:0 (aqui e em .campo/.form-grade acima) deixa o texto
   visível truncar com reticências em vez de alargar o layout. */
.campo select {
    min-width: 0;
    text-overflow: ellipsis;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
}
.campo textarea { resize: vertical; min-height: 5rem; }
.campo--check { flex-direction: row; align-items: center; gap: .5rem; }
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; min-width: 0; }
.form-grade > .campo { min-width: 0; }
@media (max-width: 620px) { .form-grade { grid-template-columns: 1fr; } }

/* Melhoria 2026-09-13 (pedido do usuário): Agenda mensal por série —
   menu de conteúdo (Trilha de Estudo) à esquerda, calendário arrastável
   à direita (ver professor/agenda.php e AgendaController). Fins de
   semana usam --cor-fundo (o "cinza" neutro do tema); feriados usam
   --cor-erro-clara (o "vermelho claro" já existente pra estado de erro)
   — assim ambos respeitam os 3 temas (claro/escuro/grafite) sem cor fixa. */
.agenda-layout { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.agenda-menu { flex: 1 1 280px; max-width: 360px; min-width: 0; }
.agenda-menu.is-dragover { outline: 2px dashed var(--cor-primaria); border-radius: var(--raio); }
.agenda-menu__grupo { margin-bottom: .9rem; }
.agenda-menu__grupo summary { cursor: pointer; font-weight: 800; margin-bottom: .4rem; }
.agenda-item { border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); padding: .5rem .7rem; margin: .4rem 0; background: var(--cor-superficie); cursor: grab; font-size: .82rem; }
.agenda-item:active { cursor: grabbing; }
.agenda-item.is-concluido { opacity: .55; }
.agenda-item__meta { display: block; font-size: .7rem; color: var(--cor-texto-suave); margin-top: .2rem; }
.agenda-calendario { flex: 2 1 480px; min-width: 0; }
.agenda-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.agenda-grid__cabecalho { font-size: .68rem; text-transform: uppercase; color: var(--cor-texto-suave); text-align: center; padding-bottom: .3rem; }
.agenda-dia { min-height: 92px; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); padding: .3rem; background: var(--cor-superficie); font-size: .7rem; overflow: hidden; }
.agenda-dia.is-dragover { outline: 2px dashed var(--cor-primaria); }
.agenda-dia--fora { opacity: .4; }
.agenda-dia--fds { background: var(--cor-fundo); }
.agenda-dia--feriado { background: var(--cor-erro-clara); }
.agenda-dia__numero { font-weight: 800; margin-bottom: .2rem; }
.agenda-dia__feriado-nome { display: block; font-size: .62rem; color: var(--cor-texto-suave); margin-bottom: .2rem; overflow-wrap: anywhere; }
.agenda-ocorrencia { background: var(--cor-primaria-clara); border-radius: 6px; padding: .15rem .35rem; margin-bottom: .2rem; cursor: grab; font-size: .66rem; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .agenda-layout { flex-direction: column; }
    .agenda-menu { max-width: 100%; }
}

/* Tabelas */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tabela th { text-align: left; color: var(--cor-texto-suave); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; padding: .5rem .6rem; border-bottom: 2px solid var(--cor-borda); }
table.tabela td { padding: .6rem; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
table.tabela tr:last-child td { border-bottom: none; }
/* Fase 18: variante mais compacta (ex.: grid de simulados do professor). */
table.tabela--compacta th, table.tabela--compacta td { padding: .45rem .6rem; }
table.tabela--compacta { font-size: .84rem; }

/* Melhoria 2026-09-13 (pedido do usuário: grid com rolagem horizontal
   difícil de usar — perde a referência de qual linha é qual ao rolar):
   mantém a 1ª coluna fixa (ex.: nome da pessoa) enquanto o resto da
   tabela rola por baixo dela. */
table.tabela--fixa-primeira th:first-child,
table.tabela--fixa-primeira td:first-child {
    position: sticky;
    left: 0;
    background: var(--cor-fundo);
    z-index: 1;
}

/* Barra de progresso */
.progresso { height: 10px; background: var(--cor-borda); border-radius: 999px; overflow: hidden; }
.progresso__preenchimento { height: 100%; background: var(--cor-primaria); border-radius: 999px; transition: width .3s ease; }

.vazio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--cor-texto-suave);
}
.vazio__emoji { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
/* Fase 18: variante mais compacta — só a home da aluna usa (grid de
   simulados) por enquanto; as outras telas com .grade-cartoes (dashboard,
   cadastros etc.) continuam com o espaçamento padrão de antes. */
.grade-cartoes--compacta { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .85rem; }
.grade-cartoes--compacta .cartao { margin-bottom: 0; padding: 1rem; }
.grade-cartoes--compacta .cartao h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.grade-cartoes--compacta .cartao p { margin: .4rem 0; font-size: .88rem; }

.cabecalho-secao { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Tela de prova
   --------------------------------------------------------------------- */
.prova-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.temporizador {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.1rem;
    padding: .5rem 1rem;
    border-radius: var(--raio-pequeno);
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
}
.temporizador--urgente { background: var(--cor-erro-clara); color: var(--cor-erro); animation: pulsar 1s infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.pontos-questoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.ponto-questao {
    position: relative;
    width: 2.3rem;
    height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: .82rem;
    border: 2px solid var(--cor-borda);
    background: var(--cor-superficie);
    color: var(--cor-texto-suave);
    cursor: pointer;
}
.ponto-questao.is-respondida { background: var(--cor-sucesso-clara); border-color: var(--cor-sucesso); color: var(--cor-sucesso); }
.ponto-questao.is-atual { border-color: var(--cor-primaria); color: var(--cor-primaria-escura); box-shadow: 0 0 0 3px var(--cor-primaria-clara); }
.ponto-questao.is-marcada-revisao::after {
    content: '🚩';
    position: absolute;
    top: -.55rem;
    right: -.4rem;
    font-size: .75rem;
    line-height: 1;
}

.revisar-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    margin-top: 1.1rem;
    padding: .55rem .9rem;
    border-radius: var(--raio-pequeno);
    border: 1.5px dashed var(--cor-alerta);
    background: var(--cor-alerta-clara);
    color: var(--cor-alerta);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
}
.revisar-toggle input { margin: 0; }

.questao-enunciado { font-size: 1.05rem; font-weight: 600; margin-bottom: 1.25rem; white-space: pre-line; }
.alternativas { display: flex; flex-direction: column; gap: .65rem; }
.alternativa {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: var(--raio);
    border: 2px solid var(--cor-borda);
    cursor: pointer;
    background: var(--cor-superficie);
}
.alternativa:hover { border-color: var(--cor-primaria); }
.alternativa input { margin-top: .2rem; }
.alternativa.is-selecionada { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.alternativa__letra {
    width: 1.7rem;
    height: 1.7rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cor-fundo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .82rem;
}
.alternativa.is-selecionada .alternativa__letra { background: var(--cor-primaria); color: #fff; }

.alternativa.is-correta { border-color: var(--cor-sucesso); background: var(--cor-sucesso-clara); }
.alternativa.is-errada-marcada { border-color: var(--cor-erro); background: var(--cor-erro-clara); }

.prova-acoes {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* Resultado */
.resultado-topo { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.resultado-nota {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.resultado-nota small { font-size: .65rem; font-weight: 700; }

@media (max-width: 640px) {
    .conteudo-app { padding: 1rem .75rem 3rem; }
    h1 { font-size: 1.4rem; }
}

/* ---------------------------------------------------------------------
   Plano de estudos (Fase 12/13) — passou a usar o design system comum
   em vez de estilo próprio isolado; só estes componentes são novos.
   --------------------------------------------------------------------- */
.plano-hero {
    background: linear-gradient(135deg, var(--cor-primaria-escura), var(--cor-primaria));
    color: #fff;
    border-radius: var(--raio-grande);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}
.plano-hero h1 { color: #fff; }
.plano-hero p { color: rgba(255,255,255,.85); margin-bottom: 0; }
.plano-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 1.25rem; }
.plano-stats .stat { background: rgba(255,255,255,.16); padding: .8rem .9rem; border-radius: var(--raio-pequeno); }
.plano-stats .stat b { display: block; font-family: var(--fonte-titulo); font-size: 1.3rem; }
.plano-stats .stat small { color: rgba(255,255,255,.85); }
@media (max-width: 640px) { .plano-stats { grid-template-columns: repeat(2, 1fr); } }

.plano-pular { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }

.badge--erro { background: var(--cor-erro-clara); color: var(--cor-erro); }

/* Fase 11 do SaaS multi-tenant: modal do alerta de pendência financeira. */
.modal-sobreposicao {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 1rem;
}
.modal-caixa {
    background: var(--cor-superficie, #fff); border-radius: var(--raio, 12px);
    padding: 1.5rem; max-width: 420px; width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}


.plano-caixa {
    background: var(--cor-fundo);
    border-left: 4px solid var(--cor-primaria);
    padding: .85rem 1rem;
    border-radius: var(--raio-pequeno);
    margin: .9rem 0;
}
.plano-caixa--dica { border-left-color: var(--cor-sucesso); background: var(--cor-sucesso-clara); }
.plano-caixa--atencao { border-left-color: var(--cor-alerta); background: var(--cor-alerta-clara); }
/* Melhoria 2026-09-13 (pedido do usuário): sessão de "Cosmovisão
   cristã" na Trilha de Estudo — mesmo destaque visual da "dica", mas
   com outra cor (roxo/azul da marca) pra não ser confundida com ela. */
.plano-caixa--cosmovisao { border-left-color: var(--cor-primaria); background: var(--cor-primaria-clara); }

.plano-treino {
    background: var(--cor-fundo);
    border: 1.5px dashed var(--cor-borda);
    padding: .9rem 1.1rem;
    border-radius: var(--raio-pequeno);
}
.plano-treino .resposta { color: var(--cor-sucesso); font-weight: 800; }

@media print {
    /* Fase 12 (melhoria 2026-09): força o navegador a imprimir cores de
       fundo (badges, caixas de destaque do plano de estudos etc.) —
       por padrão a maioria dos navegadores tira o fundo colorido ao
       imprimir, a menos que a pessoa marque manualmente "imprimir
       gráficos de fundo"; isso aqui pede pra já vir assim. */
    * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; print-color-adjust: exact !important; }
    .barra-lateral, .botao-menu-flutuante, .app-corpo__backdrop, .botao:not(.botao-imprimir), form, .plano-pular { display: none !important; }
    .botao-imprimir { display: none !important; }
    .conteudo-app { max-width: 100%; padding: 0; }

    /*
     * Correção 2026-09-13/14 (pedido do usuário: "com tanto background
     * escuro, ninguém vai querer imprimir" — trilha de estudo com tema
     * escuro/grafite ficava toda escura no papel, gastando tinta e
     * difícil de ler): força TODAS as custom properties de cor pro valor
     * do tema claro na impressão, não importa o tema ativo na tela.
     * Precisa do !important em CADA declaração: "body[data-tema='escuro']"
     * tem mais especificidade que um "body" solto, e especificidade normal
     * decide entre duas regras da MESMA importância — só !important
     * garante que estas ganham de qualquer seletor de tema, em qualquer
     * ordem. Cartões/caixas usam var(--cor-superficie)/var(--cor-fundo)
     * etc., então eles seguem automaticamente: fundo fica branco/claro,
     * texto fica escuro (legível), e só as caixas de destaque (dica,
     * cosmovisão cristã etc.) mantêm uma cor leve — não o tema inteiro
     * colorido/escuro.
     */
    body {
        --cor-fundo: #F6F4FF !important;
        --cor-superficie: #FFFFFF !important;
        --cor-texto: #221F3B !important;
        --cor-texto-suave: #6C6889 !important;
        --cor-borda: #E6E1F7 !important;
        --cor-primaria: #6C63FF !important;
        --cor-primaria-escura: #5148E0 !important;
        --cor-primaria-clara: #ECE9FF !important;
        --cor-sucesso-clara: #E4F9EE !important;
        --cor-erro-clara: #FDEBEB !important;
        --cor-alerta-clara: #FFF4E0 !important;
        --cor-info: #2E7CE0 !important;
        --cor-info-clara: #E9F2FF !important;
    }
}


/* ---------------------------------------------------------------------
   Landing Pages Avançadas (ENEM + Homeschool + Múltiplas LPs)
   --------------------------------------------------------------------- */
.landing-header {
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    padding: .85rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--sombra-pequena);
}
.landing-header__conteudo {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.landing-header__marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--cor-texto);
    text-decoration: none;
}
.landing-header__marca-texto { font-weight: 800; }
.landing-header__links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.landing-nav-link {
    text-decoration: none;
    color: var(--cor-texto-suave);
    font-weight: 700;
    font-size: .9rem;
    transition: color .15s ease;
}
.landing-nav-link:hover { color: var(--cor-primaria-escura); }

@media (max-width: 640px) {
    .landing-nav-link { display: none; }
}

.landing-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    font-size: .82rem;
    font-weight: 800;
    border-radius: 999px;
    margin-bottom: 1.2rem;
    box-shadow: var(--sombra-pequena);
}
.landing-badge--enem {
    background: #FFF0E6;
    color: #D9531E;
}
.landing-badge--homeschool {
    background: var(--cor-sucesso-clara);
    color: var(--cor-sucesso);
}
/* Melhoria 2026-09-18 (pedido do usuário, 3 modelos novos): Estude
   Sozinho reaproveita as cores padrão do .landing-badge (roxo da marca),
   sem precisar de modificador próprio. */
.landing-badge--reforco {
    background: var(--cor-alerta-clara);
    color: var(--cor-alerta);
}
.landing-badge--escolas {
    background: var(--cor-info-clara);
    color: var(--cor-info);
}

.landing-hero {
    max-width: 860px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 2.5rem;
    text-align: center;
}
.landing-hero h1 {
    font-size: clamp(1.8rem, 4.5vw, 2.75rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -.02em;
}
.landing-hero__subtitulo {
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--cor-texto-suave);
    margin-bottom: 2rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.landing-hero__acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.landing-hero__prova {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    font-size: .84rem;
    font-weight: 700;
    color: var(--cor-texto-suave);
    flex-wrap: wrap;
}

/* Melhoria 2026-09-27 (pedido do usuário): faixa de destaques legais/
   comerciais (garantia de 7 dias mesmo após o pagamento + 1 assinatura
   cobrindo quantas pessoas o grupo precisar) — elemento ADITIVO logo
   abaixo do hero, mesmo espírito do .landing-destaque-imagem (não
   reordena nada, só antecede as seções já existentes). Usada nas 4
   páginas de /assinar (formulario, enem, homeschool e o template
   dinâmico) — no template dinâmico é conteúdo FIXO da plataforma, não
   vem do JSON editável pelo admin (ver docs/ARQUITETURA.md). */
.landing-destaques-legais {
    max-width: 1040px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
}
.landing-destaques-legais__item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-grande);
    padding: 1.4rem 1.5rem;
    transition: transform .15s ease;
}
.landing-destaques-legais__item:hover {
    transform: translateY(-2px);
}
.landing-destaques-legais__icone {
    font-size: 1.9rem;
    line-height: 1;
    flex-shrink: 0;
}
/* Melhoria 2026-09-27b (pedido do usuário): rótulo curto acima do
   título, mesmo espírito do .landing-plano-badge, pra deixar os 2
   cartões mais "em destaque" como pedido — antes eram só uma borda
   colorida fina, agora têm fundo tintado + selo + sombra colorida. */
.landing-destaques-legais__tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .18rem .65rem;
    border-radius: 999px;
    color: #fff;
    margin-bottom: .4rem;
}
.landing-destaques-legais__item b {
    display: block;
    margin-bottom: .25rem;
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
}
.landing-destaques-legais__item p {
    margin: 0;
    font-size: .88rem;
    color: var(--cor-texto-suave);
}
.landing-destaques-legais__item--garantia {
    border-color: var(--cor-sucesso);
    background: var(--cor-sucesso-clara);
    box-shadow: 0 10px 28px rgba(31, 174, 106, 0.22);
}
.landing-destaques-legais__item--garantia .landing-destaques-legais__icone { color: var(--cor-sucesso); }
.landing-destaques-legais__item--garantia .landing-destaques-legais__tag { background: var(--cor-sucesso); }
.landing-destaques-legais__item--grupo {
    border-color: var(--cor-info);
    background: var(--cor-info-clara);
    box-shadow: 0 10px 28px rgba(46, 124, 224, 0.22);
}
.landing-destaques-legais__item--grupo .landing-destaques-legais__icone { color: var(--cor-info); }
.landing-destaques-legais__item--grupo .landing-destaques-legais__tag { background: var(--cor-info); }

/* Seção Duplo Foco */
.landing-duplo-foco {
    max-width: 1040px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}
.landing-duplo-foco__card {
    background: var(--cor-superficie);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-grande);
    padding: 2.2rem 2rem;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, border-color .15s ease;
}
.landing-duplo-foco__card:hover {
    transform: translateY(-3px);
    border-color: var(--cor-primaria);
}
.landing-duplo-foco__card--destaque {
    border-color: var(--cor-primaria);
    background: linear-gradient(180deg, var(--cor-superficie) 0%, var(--cor-primaria-clara) 100%);
}
.landing-duplo-foco__icone {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.landing-duplo-foco__card h2 {
    font-size: 1.45rem;
    margin-bottom: .6rem;
}
.landing-duplo-foco__card p {
    font-size: .95rem;
    margin-bottom: 1.2rem;
}
.landing-lista-beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.landing-lista-beneficios li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--cor-texto);
}
.landing-lista-beneficios li span {
    color: var(--cor-sucesso);
    font-weight: 800;
    flex-shrink: 0;
}
.landing-card-link {
    margin-top: auto;
    font-weight: 800;
    font-size: .92rem;
    color: var(--cor-primaria-escura);
    text-decoration: none;
}
.landing-card-link:hover { text-decoration: underline; }

/* Cabeçalho de seções */
.landing-secao-titulo {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
}
.landing-secao-titulo h2 {
    font-size: 1.85rem;
    margin-bottom: .5rem;
}
.landing-secao-titulo p {
    font-size: 1rem;
    margin: 0;
}

/* Cards de Planos e Badges */
.landing-plano-card {
    position: relative;
    text-align: center;
}
.landing-plano-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cor-primaria);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .2rem .75rem;
    border-radius: 999px;
    box-shadow: var(--sombra-pequena);
    white-space: nowrap;
}
.landing-plano-badge--secundario {
    background: var(--cor-secundaria);
}
.landing-plano-card--destaque {
    border-color: var(--cor-primaria);
    box-shadow: 0 12px 30px rgba(108, 99, 255, 0.18);
    background: var(--cor-superficie);
}
.landing-plano-card__beneficios {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--cor-borda);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .78rem;
    color: var(--cor-texto-suave);
    text-align: left;
}

/* FAQ Accordion */
.landing-faq {
    max-width: 800px;
    margin: 0 auto 3.5rem;
    padding: 0 1.5rem;
}
.landing-faq__lista {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.landing-faq__item {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.1rem 1.3rem;
    box-shadow: var(--sombra-pequena);
    transition: border-color .15s ease;
}
.landing-faq__item[open] {
    border-color: var(--cor-primaria);
}
.landing-faq__item summary {
    cursor: pointer;
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    color: var(--cor-texto);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.landing-faq__item summary::-webkit-details-marker { display: none; }
.landing-faq__item summary::after {
    content: "▾";
    font-size: 1.1rem;
    color: var(--cor-primaria);
    transition: transform .2s ease;
}
.landing-faq__item[open] summary::after {
    transform: rotate(180deg);
}
.landing-faq__item p {
    margin: .8rem 0 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--cor-texto-suave);
}

.landing-footer {
    border-top: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: .85rem;
    color: var(--cor-texto-suave);
}

/* Logotipo oficial em imagens */
.landing-header__logo-img {
    height: 38px;
    width: auto;
    max-width: 220px;
    display: block;
    object-fit: contain;
}
.barra-lateral__logo-img {
    height: 34px;
    width: auto;
    max-width: 160px;
    display: block;
    object-fit: contain;
    transition: transform .15s ease, opacity .15s ease;
}
.barra-lateral.is-colapsada .barra-lateral__logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    object-position: left center;
}
/* Melhoria 2026-09-16 (pedido do usuário): a logo PRÓPRIA de uma escola
   (enviada em /professor/grupo) pode ter cores escuras/sem fundo — nos
   temas 'escuro'/'grafite' a barra lateral fica com --cor-superficie
   escura (ver body[data-tema="escuro|grafite"] no topo deste arquivo),
   e uma logo assim praticamente some. drop-shadow (diferente de
   box-shadow) segue o CONTORNO real dos pixels visíveis do PNG, não o
   retângulo da imagem — então um halo claro nas bordas do desenho cria
   contraste sem precisar saber a cor real da logo (funciona pra logo
   clara também, só fica bem sutil nela).*/
body[data-tema="escuro"] .barra-lateral__logo-img,
body[data-tema="grafite"] .barra-lateral__logo-img {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .85)) drop-shadow(0 0 5px rgba(255, 255, 255, .45));
}
.cartao-publico__logo-img {
    height: 72px;
    width: auto;
    max-width: 280px;
    margin: 0 auto 1.2rem;
    display: block;
    object-fit: contain;
}
.landing-header__tag {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .2rem .55rem;
    border-radius: 6px;
    text-transform: uppercase;
    line-height: 1;
}
.landing-header__tag--enem {
    background: #FFF0E6;
    color: #D9531E;
}
.landing-header__tag--homeschool {
    background: var(--cor-sucesso-clara);
    color: var(--cor-sucesso);
}
/* Melhoria 2026-09-18 (pedido do usuário, 3 modelos novos) — ver
   comentário equivalente em .landing-badge--reforco/--escolas acima. */
.landing-header__tag--reforco {
    background: var(--cor-alerta-clara);
    color: var(--cor-alerta);
}
.landing-header__tag--escolas {
    background: var(--cor-info-clara);
    color: var(--cor-info);
}

/* ---------------------------------------------------------------------
   Melhoria 2026-09-26 (pedido do usuário, 19ª rodada): redesign moderno
   e vibrante das landing pages de /assinar (formulario.php = LP geral,
   lp_enem.php, lp_homeschool.php, lp_dinamica.php), com imagens reais
   (banco gratuito Unsplash, licença livre). Escopado inteiramente sob
   .pagina-landing--moderna (aplicada no <body> só por layout_landing.php)
   para NÃO vazar pro resto do app — toda regra abaixo é prefixada com
   esse seletor. Decisão confirmada com o usuário (AskUserQuestion):
   só /assinar por enquanto, imagens de banco gratuito, estilo "moderno e
   vibrante" (não o azul/dourado sóbrio de outros projetos do usuário),
   mantendo a MESMA estrutura de seções/ids/formulário — só o visual e a
   inclusão de imagens mudam. bem_vindo.php não foi incluído porque não é
   uma landing page de vendas (é a tela de confirmação pós-cadastro, sem
   hero/seções). */
.pagina-landing--moderna {
    --lp-gradiente: linear-gradient(135deg, #6C63FF 0%, #FF3E9A 55%, #FFB800 100%);
    --lp-gradiente-sucesso: linear-gradient(135deg, #E8590C 0%, #FF7A00 55%, #FFC53D 100%);
    --lp-raio-grande: 28px;
}

/* Header: leve efeito "glass" ao rolar, sem mudar estrutura/links */
.pagina-landing--moderna .landing-header {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(1.3) blur(8px);
    -webkit-backdrop-filter: saturate(1.3) blur(8px);
}

/* Hero: layout dividido texto+imagem (antes era só texto centralizado).
   Requer um wrapper novo .landing-hero__texto em volta do conteúdo
   textual existente e um .landing-hero__imagem novo — resto do conteúdo
   (badge/h1/subtítulo/ações/prova) permanece idêntico e na mesma ordem. */
.pagina-landing--moderna .landing-hero {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
    padding: 3rem 1.5rem 4.5rem;
    position: relative;
    overflow: visible;
}
.pagina-landing--moderna .landing-hero::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -60px;
    width: 420px;
    height: 420px;
    background: var(--lp-gradiente);
    filter: blur(95px);
    opacity: .26;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}
.pagina-landing--moderna .landing-hero__texto {
    position: relative;
    z-index: 1;
}
.pagina-landing--moderna .landing-badge {
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pagina-landing--moderna .landing-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}
.pagina-landing--moderna .landing-hero__subtitulo,
.pagina-landing--moderna .landing-hero__acoes,
.pagina-landing--moderna .landing-hero__prova {
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
}
.pagina-landing--moderna .landing-hero__imagem {
    position: relative;
    z-index: 1;
}
.pagina-landing--moderna .landing-hero__imagem img {
    width: 100%;
    aspect-ratio: 4 / 3.3;
    object-fit: cover;
    border-radius: var(--lp-raio-grande);
    box-shadow: 0 30px 60px -18px rgba(30, 20, 80, .35);
    display: block;
}
.pagina-landing--moderna .landing-hero__selo {
    position: absolute;
    bottom: -16px;
    left: -16px;
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--cor-superficie);
    padding: .65rem 1.05rem;
    border-radius: 16px;
    box-shadow: var(--sombra);
    font-weight: 800;
    font-size: .82rem;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .pagina-landing--moderna .landing-hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 2.5rem;
    }
    .pagina-landing--moderna .landing-hero__texto { order: 2; }
    .pagina-landing--moderna .landing-hero__imagem {
        order: 1;
        max-width: 420px;
        margin: 0 auto;
    }
    .pagina-landing--moderna .landing-hero__subtitulo,
    .pagina-landing--moderna .landing-hero__acoes,
    .pagina-landing--moderna .landing-hero__prova {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    .pagina-landing--moderna .landing-hero__selo {
        left: 50%;
        transform: translateX(-50%);
        bottom: -14px;
    }
}

/* Bloco "destaque com imagem": novo elemento ADITIVO inserido dentro das
   seções de diferenciais/benefícios já existentes (não substitui nem
   reordena a grade de cards atual, só antecede ela). */
.pagina-landing--moderna .landing-destaque-imagem {
    max-width: 1080px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.pagina-landing--moderna .landing-destaque-imagem img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--lp-raio-grande);
    box-shadow: var(--sombra);
    display: block;
}
.pagina-landing--moderna .landing-destaque-imagem__tag {
    display: inline-block;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    font-weight: 800;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .3rem .8rem;
    border-radius: 999px;
    margin-bottom: .8rem;
}
.pagina-landing--moderna .landing-destaque-imagem__texto h3 {
    font-size: 1.5rem;
    margin-bottom: .6rem;
}
.pagina-landing--moderna .landing-destaque-imagem--inverso img { order: 2; }
@media (max-width: 800px) {
    .pagina-landing--moderna .landing-destaque-imagem { grid-template-columns: 1fr; }
    .pagina-landing--moderna .landing-destaque-imagem--inverso img { order: 0; }
}

/* Cards de diferenciais: cantos maiores, sombra suave, leve elevação no
   hover, ícone dentro de um "chip" colorido em vez de emoji solto. */
.pagina-landing--moderna .landing-recursos__item {
    border-color: transparent;
    border-radius: var(--lp-raio-grande);
    box-shadow: var(--sombra-pequena);
    transition: transform .18s ease, box-shadow .18s ease;
}
.pagina-landing--moderna .landing-recursos__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra);
}
.pagina-landing--moderna .landing-recursos__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    background: var(--cor-primaria-clara);
    font-size: 1.4rem;
    margin-bottom: .5rem;
}

/* Cards "duplo foco" (formulario.php): cantos maiores + sombra colorida */
.pagina-landing--moderna .landing-duplo-foco__card {
    border-color: transparent;
    border-radius: var(--lp-raio-grande);
}
.pagina-landing--moderna .landing-duplo-foco__card--destaque {
    background: linear-gradient(180deg, var(--cor-superficie) 0%, var(--cor-primaria-clara) 120%);
}

/* Planos: badge com gradiente vibrante, destaque com sombra colorida */
.pagina-landing--moderna .landing-plano-badge {
    background: var(--lp-gradiente);
}
.pagina-landing--moderna .landing-plano-card--destaque {
    box-shadow: 0 20px 45px -12px rgba(255, 62, 154, .28);
}

/* FAQ: cantos maiores, sem borda visível (só sombra) */
.pagina-landing--moderna .landing-faq__item {
    border-color: transparent;
    border-radius: var(--lp-raio-grande);
    box-shadow: var(--sombra-pequena);
}

/* Formulário de cadastro: cantos maiores */
.pagina-landing--moderna .landing-form {
    border-color: transparent;
    border-radius: var(--lp-raio-grande);
}

/* Botões: gradiente vibrante em vez de cor sólida (só nas LPs) */
.pagina-landing--moderna .botao--primario {
    background: var(--lp-gradiente);
    border: none;
}
.pagina-landing--moderna .botao--primario:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
}
.pagina-landing--moderna .botao--sucesso {
    background: var(--lp-gradiente-sucesso);
    border: none;
}
.pagina-landing--moderna .botao--sucesso:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
}

/* Melhoria 2026-10-18: popup de edição de matéria + seletor de séries
   (vínculo matéria<->série — ver partials/series_checkboxes.php). */
.dialog-materia { max-width: 720px; max-height: 90vh; overflow-y: auto; }
.dialog-materia h2 { margin-top: 0; }
.series-seletor__acoes { margin: 0 0 .5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.series-seletor__etapa {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    margin: 0 0 .6rem;
    padding: .4rem .7rem .6rem;
}
.series-seletor__etapa legend { font-weight: 700; padding: 0 .3rem; }
.series-seletor__etapa-btn {
    background: none; border: 0; color: var(--cor-primaria, #6C63FF);
    cursor: pointer; font-size: .8rem; margin-left: .4rem; text-decoration: underline;
}
.series-seletor__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .25rem .8rem; }
.series-seletor__item { display: flex; align-items: center; gap: .4rem; font-weight: 400; cursor: pointer; }
.series-seletor input:disabled { cursor: not-allowed; }
.dialog-materia__acoes { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.materia-series-resumo { font-size: .85rem; color: var(--cor-texto-suave); }