/* =====================================================================
   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;
    width: 220px;
    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; }

/* 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;
    }

    .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; }
.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); }

.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; } }

/* 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; }

/* 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); }

.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; }
}


/* ---------------------------------------------------------------------
   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);
}

.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;
}

/* 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;
}
.cartao-publico__logo-img {
    height: 48px;
    width: auto;
    max-width: 220px;
    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);
}