/* ═══════════════════════════════════════════════════════════════════════
   A MARCA, NUM LUGAR SÓ

   O professor levantou o problema em 09/08/2026: hoje o visual está
   espalhado por 336 páginas, mais as cores dentro do `api/_contrato.js` e o
   HTML de e-mail em quatro endpoints. Trocar uma cor de marca era trabalho
   de encontrar e substituir em centenas de arquivos, com risco de deixar
   metade para trás.

   Este arquivo é o passo 1 do §21.3: as variáveis existem aqui, e nada mais
   precisa saber o número da cor.

   ⚠️ E ELE JÁ FOI PERDIDO UMA VEZ. O manual de marca anterior não estava
   versionado, e sumiu. Por isso as regras estão em `marca/MANUAL.md`, dentro
   do repositório, e não numa ferramenta de design.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   🔴 AS FICHAS — o único lugar onde cor mora

   O professor, em 12/08/2026: *"eu quero um tema claro da mesma forma que o
   escuro, e seja mais fácil de mudar."*

   ─── POR QUE O PRIMEIRO TEMA CLARO QUEBROU ───

   Cada uma das 336 páginas declarava a PRÓPRIA paleta no `<style>` dela — 52
   nomes ao todo. O tema claro precisava redefinir os 52; redefinia 24, e as
   outras 28 ficavam com o valor do escuro. Medido: **46 textos ilegíveis por
   página** no EN/BASE, contra 2 no escuro.

   O defeito nunca foi a escolha das cores. Era não existir um lugar onde a
   cor mora.

   ─── COMO FUNCIONA AGORA ───

   O `marca/fichas.mjs` trocou 3149 valores dentro do `:root` das páginas:

       antes:  --card-bg: rgba(15, 23, 42, 0.75);
       depois: --card-bg: var(--sco-superficie, rgba(15, 23, 42, 0.75));

   A página continua usando `var(--card-bg)` — nada mais mudou nela. Mas o
   número saiu de 336 arquivos e passou a morar aqui.

   **Um tema é este bloco.** Trocar a cor do app inteiro é editar uma linha,
   e o claro tem exatamente a mesma forma do escuro — que é o que ele pediu.

   ⚠️ O FALLBACK NÃO É ENFEITE. Cada uso é `var(--sco-x, o-valor-de-antes)`:
   se uma ficha sumir daqui, a página volta a ser o que era em vez de ficar
   sem cor. Foi assim que a repintura de 11/08 pôde ser verificada em vez de
   prometida.

   ⚠️ NENHUM TOM CLARO ENTROU SEM SER MEDIDO (MANUAL §7). Contra papel
   (#F7F5F2) e contra cartão (#FFFFFF), mínimo 4,5:1:

       texto     #1B2033   16,1 / 14,8      acento    #5566C4   5,1 / 4,7
       texto-2   #5A6076    6,2 /  5,7      ok        #1F7A52   5,3 / 4,9
       texto-3   #696F82    5,0 /  4,6      erro      #B3261E   6,5 / 6,0
                                            aviso     #8A5A00   5,9 / 5,4
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── ESCURO — o padrão do projeto ─── */
  --sco-fundo: #141A2B;
  --sco-superficie: rgba(30, 41, 59, 0.70);
  --sco-borda: rgba(255, 255, 255, 0.08);
  --sco-borda-viva: rgba(169, 184, 242, 0.40);

  --sco-texto: #F7F5F2;
  --sco-texto-2: #A8B0C4;
  --sco-texto-3: #8A93AD;

  --sco-acento: #A9B8F2;
  --sco-acento-2: #B9A2F2;
  --sco-ok: #7FD1A8;
  --sco-erro: #F43F5E;
  --sco-aviso: #F59E0B;

  --sco-brilho-acento: rgba(169, 184, 242, 0.18);
  --sco-brilho-ok: rgba(127, 209, 168, 0.20);
  --sco-brilho-erro: rgba(239, 68, 68, 0.18);
  --sco-brilho-aviso: rgba(251, 191, 36, 0.14);

  /* O realce DENTRO de um cartao: branco translucido sobre tinta. */
  --sco-realce: rgba(255, 255, 255, 0.045);

  /* ═══════════════════════════════════════════════════════════════════
     🔴 O TEXTO QUE FICA EM CIMA DO ACENTO (13/08/2026)

     Faltava uma ficha, e a falta custava 100+ ocorrências medidas. Botões
     como `.btn-verify`, `.nav-tab-btn` e `.filter-btn.active` têm fundo de
     ACENTO e escreviam `color: #041322` — quase preto — cravado à mão.

     ⚠️ O PROBLEMA É QUE O ACENTO INVERTE DE LUMINOSIDADE COM O TEMA. No
     escuro ele é pervinca CLARA (#A9B8F2), e quase preto por cima dá
     9,65:1 — ótimo. No claro ele é pervinca ESCURA (#4A5AB0), e o mesmo
     quase preto dá **3,01:1**: texto escuro sobre fundo escuro.

     Nenhuma ficha existente servia: `--sco-texto` é o texto sobre o FUNDO
     da página, e ele acompanha o fundo — no claro é escuro, que é
     exatamente o que não pode ficar aqui. Esta ficha é a única que anda ao
     CONTRÁRIO do tema, porque a superfície dela também anda.

     Medido: 8,93:1 no escuro e 5,71:1 no claro. */
  --sco-sobre-acento: #141A2B;
  /* O mesmo para o verde de sucesso, que inverte junto. */
  --sco-sobre-ok: #141A2B;

  /* ═══════════════════════════════════════════════════════════════════
     🔴 A SUPERFÍCIE INVERTIDA (13/08/2026)

     O FR/PROVAS é desenhado CLARO — papel, texto escuro — e usa painéis
     ESCUROS por contraste: `.btn-neutral-dark{background:var(--navy);
     color:white}`. Um bloco escuro dentro de uma página clara, de propósito.

     ⚠️ E É POR ISSO QUE DUAS TENTATIVAS DE TEMA FALHARAM ALI. Mapear o
     `--navy` para `--sco-fundo` faz o painel virar papel no tema claro — e o
     `color: white` de dentro dele vira branco no branco. Foi exatamente o
     que a medição mostrou: 258 ilegíveis viraram 1489.

     A marca não tinha nome para "superfície que contraria o tema". Agora
     tem, e o par anda junto: a superfície fica ESCURA nos dois temas, e o
     texto em cima dela fica CLARO nos dois. Invertido é invertido — ele não
     acompanha o tema, é o ponto dele não acompanhar.

     ⚠️ Não confundir com `--sco-superficie`, que é a superfície NORMAL e
     acompanha: tinta no escuro, branco no claro. */
  --sco-invertido: #1B2033;
  --sco-sobre-invertido: #F7F5F2;
}

/* ─── CLARO — a mesma forma, os mesmos nomes, outros doze valores ───

   ⚠️ NÃO É O ESCURO INVERTIDO. Papel (#F7F5F2) em vez de branco puro, porque
   branco puro cansa a vista; e a pervinca ESCURECE, porque o tom que brilha
   sobre tinta deixa de ser link sobre papel.

   ⚠️ Os brilhos trocam de MATIZ junto: um brilho vermelho pensado para o
   escuro fica alaranjado sobre branco. */
:root[data-tema="claro"] {
  --sco-fundo: #F7F5F2;
  --sco-superficie: #FFFFFF;
  --sco-borda: #E3DFD8;
  --sco-borda-viva: #4A5AB0;

  --sco-texto: #1B2033;
  --sco-texto-2: #4C5164;
  --sco-texto-3: #696F82;

  --sco-acento: #4A5AB0;
  --sco-acento-2: #6B4FAE;
  --sco-ok: #1A6846;
  --sco-erro: #B3261E;
  --sco-aviso: #8A5A00;

  --sco-brilho-acento: rgba(85, 102, 196, 0.10);
  --sco-brilho-ok: rgba(31, 122, 82, 0.10);
  --sco-brilho-erro: rgba(179, 38, 30, 0.10);
  --sco-brilho-aviso: rgba(138, 90, 0, 0.10);

  /* ⚠️ INVERTIDO no claro: branco translucido sobre papel seria branco no
     branco, e a terceira camada sumiria. Aqui e tinta translucida. */
  --sco-realce: rgba(27, 32, 51, 0.045);

  /* ⚠️ AS DUAS ÚNICAS FICHAS QUE VÃO AO CONTRÁRIO DO TEMA. No claro o
     acento e o verde ESCURECEM para continuarem legíveis sobre papel — e
     por isso o texto em cima deles tem de CLAREAR. Tudo o mais nesta lista
     escurece junto com o tema; estas duas sobem. */
  --sco-sobre-acento: #F7F5F2;
  --sco-sobre-ok: #F7F5F2;

  /* ⚠️ A SUPERFÍCIE INVERTIDA NÃO MUDA AQUI, e é esse o ponto dela.
     Ela é o painel escuro deliberado dentro da página clara. Se ela
     acompanhasse o tema, deixaria de ser inversão e viraria só mais uma
     superfície — e o desenho que a usa perderia o contraste que ele
     procurava. Os dois valores repetem os do escuro de propósito. */
  --sco-invertido: #1B2033;
  --sco-sobre-invertido: #F7F5F2;
}

/* ⚠️ O CLARO NÃO SEGUE O SISTEMA — ainda. Ele exige `[data-tema="claro"]`
   explícito. Ligar o `prefers-color-scheme` é uma linha, e só depois que o
   `afinar-contraste.mjs` apontar menos de 5 ilegíveis por página em toda
   família (MANUAL §8). Ligar antes é repetir 11/08. */

/* ⚠️ E o VIDRO precisa virar papel no claro: `backdrop-filter: blur()` só
   funciona quando há escuridão atrás. Sobre papel ele vira mancha cinza —
   foi uma das coisas que o professor fotografou. */
:root[data-tema="claro"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* O gradiente de fundo das páginas é feito de halos claros sobre tinta.
   Sobre papel eles somem ou sujam; o fundo do tema resolve sozinho. */
:root[data-tema="claro"] body { background-image: none !important; }

/* ─── A TIPOGRAFIA ───
   Poppins, pedido explícito dele: "a fonte é Poppins algo nesse estilo, não
   tanto Century Gothic". A proposta anterior tinha renderizado em Century
   Gothic só porque era a que existia na máquina dele.

   ⚠️ LOCAL, NUNCA DO GOOGLE FONTS. O app promete funcionar sem rede — está
   escrito no manifest e no menu do aluno ("dá para estudar no ônibus, no
   avião"). Uma fonte vinda de CDN quebra essa promessa na primeira visita
   offline, e o texto cai numa fonte de sistema que não é a marca.

   ⚠️ Só o subconjunto LATIN, e isso é suficiente: português precisa de ã, ç,
   õ, é; francês precisa de ç, œ, à, è. Todos cabem em U+0000-00FF mais
   U+0152-0153, que é exatamente o que este arquivo traz. São 7,7 KB por
   peso, contra os ~30 KB do subconjunto estendido que ninguém leria. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  /* `swap`: o texto aparece na hora com a fonte de sistema e troca quando a
     Poppins carrega. `block` deixaria a tela em branco — num app de 5
     minutos no celular, meio segundo de nada parece travamento. */
  font-display: swap;
  src: url('/fontes/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fontes/poppins-700.woff2') format('woff2');
}

:root {
  /* ─── A PALETA APROVADA (§23.1) ───
     Ele pediu "pastel, tecnológico e elegante". Pastel sozinho fica
     infantil; pastel sobre tinta escura fica tecnológico. A regra que
     mantém isso de pé: gastar cor num lugar só. */
  --sco-tinta: #141A2B;        /* o fundo — ou preto puro, que é o da logo real */
  --sco-tinta-2: #1E2438;      /* superfície sobre a tinta */
  --sco-papel: #F7F5F2;        /* o texto, e o contorno do vidro */
  --sco-papel-fraco: #A8B0C4;  /* texto secundário */

  /* Pervinca é a cor da ÁREA Languages, e é ela que vira o filamento.
     Cada área futura entra aqui com a sua, no mesmo vidro e na mesma rosca. */
  --sco-pervinca: #A9B8F2;

  /* Pêssego é a cor da CASA — já existe na logo real, na rosca da lâmpada.
     Ela não muda quando a área muda. */
  --sco-pessego: #F2CB92;
  --sco-pessego-claro: #F8DFB8;
  --sco-pessego-fundo: #D9A868;

  /* Guardadas para as próximas áreas. Declaradas aqui para que ninguém
     invente um verde diferente quando a segunda área nascer. */
  --sco-menta: #A9E5C8;
  --sco-quartzo: #E8C4D8;

  --sco-fonte: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sco-fonte-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
   O LOCKUP

   ⚠️ HORIZONTAL, não vertical. A proposta anterior punha a palavra embaixo
   da lâmpada e estava errada: na logo real o wordmark fica AO LADO, em duas
   linhas — "Solutian" em cima, "& Co" embaixo.

   ⚠️ E ELE É CSS, não um arquivo .svg. Um `<text font-family="Poppins">`
   dentro de um .svg carregado como imagem não enxerga o @font-face desta
   folha: o navegador usaria a fonte do sistema, e o wordmark sairia em outra
   letra — que é exatamente o defeito que estamos consertando.

   A marca é **Solutian & Co.**; Languages é o nome da ÁREA, como "Apple ·
   Music" (decidido em 10/08/2026, §23.8). Por isso a área entra numa linha
   fina abaixo, e nunca do mesmo tamanho do wordmark.
   ═══════════════════════════════════════════════════════════════════════ */
.sco-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  font-family: var(--sco-fonte);
  line-height: 1;
  /* Sem `color` fixo: a marca herda o texto de onde estiver. Em fundo claro
     ela precisa escurecer, e uma cor chumbada aqui a deixaria invisível. */
  color: inherit;
  text-decoration: none;
}

.sco-marca__simbolo {
  width: 2.6em;
  height: 2.6em;
  flex: none;
  display: block;
}

.sco-marca__texto {
  display: flex;
  flex-direction: column;
  /* O wordmark tem duas linhas coladas: é assim na logo real. */
  gap: 0.04em;
}

.sco-marca__nome {
  font-weight: 700;
  font-size: 1em;
  letter-spacing: -0.015em;
}

/* A área, na linha fina. Nunca do tamanho do nome — ela descreve o produto,
   não a casa. */
.sco-marca__area {
  font-weight: 400;
  font-size: 0.56em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sco-pervinca);
  margin-top: 0.35em;
}

/* Uma linha só, para cabeçalho apertado: "Solutian & Co." corrido. */
.sco-marca--linha .sco-marca__texto { flex-direction: row; align-items: baseline; gap: 0.3em; }
.sco-marca--linha .sco-marca__area { margin-top: 0; }

@media (max-width: 380px) {
  /* No celular estreito, a área sai antes do nome: perder "LANGUAGES" é
     menos ruim que quebrar "Solutian & Co." no meio. */
  .sco-marca__area { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   🔴 O TEMA CLARO ESTÁ DESLIGADO (12/08/2026)

   Tudo daqui para baixo continua escrito e **não está no ar**. Todo seletor
   do claro exige `[data-tema="claro"]`, e nada no app grava esse valor: o
   seletor saiu do menu ☰ e o `menu-aluno.js` apaga a escolha antiga.

   POR QUÊ. O professor pediu o tema em 11/08. Entreguei, passei dois dias
   remendando, e ele disse: *"ainda tá ruim as cores — foi assim quando eu
   pedi os temas claro e escuro, aí estragou muita coisa."* Medindo textos
   ilegíveis por página:

                    no escuro     no claro
       EN/BASE          2            46      ← 41% da página
       EN/TRAVEL        1            33
       EN/BUSINESS      1            32
       FR/BASE          1            29
       casca do app     8            85

   As 336 páginas foram DESENHADAS para fundo escuro, cada uma com dezenas
   de cores escritas à mão. Um tema claro por cima disso não é troca de
   paleta: é redesenho de 336 telas.

   ⚠️ NÃO APAGUEI NADA, de propósito. O trabalho está aqui e volta a valer
   quando medir bem. O caminho está em `marca/MANUAL.md`, §"Tema claro":
   ligar de volta é trocar `[data-tema="claro"]` por
   `:not([data-tema="escuro"])` dentro dos `@media` — e o critério é o
   `afinar-contraste.mjs` apontar menos de 5 ilegíveis por página.

   ─────────────────────────────────────────────────────────────────────

   O registro original, de 11/08/2026: *"algo também como claro e escuro no
   tema seria bom."*

   ⚠️ POR QUE A REGRA É `:root:root`, E NÃO `:root`.
   Cada tela declara a própria paleta no `<style>` dela, e esse `<style>`
   vem DEPOIS deste arquivo no `<head>`. Com a mesma especificidade, quem
   vem por último vence — e o tema claro nunca apareceria. Repetir o seletor
   dobra a especificidade (0,2,0 contra 0,1,0) e a ordem deixa de importar.

   É feio de ler e é a alternativa a editar 14 arquivos de novo — e cada
   edição em massa nas telas é uma chance de repetir o §20.23.

   ─── AS DUAS FONTES DA ESCOLHA, NESTA ORDEM ───

     1. o SISTEMA operacional (`prefers-color-scheme`) — o padrão, e é o
        certo: quem põe o celular em modo claro à noite já disse o que quer
     2. o BOTÃO no menu ☰, que grava `data-tema` no <html> e vence o sistema

   ⚠️ O tema claro NÃO é o escuro com as cores invertidas. Texto quase-preto
   sobre branco puro cansa mais que sobre papel; e a pervinca, que brilha
   sobre tinta, some sobre branco — no claro ela precisa escurecer para
   continuar sendo um link legível.
   ═══════════════════════════════════════════════════════════════════════ */

/* O escuro é o padrão do projeto e não precisa ser redeclarado aqui: ele já
   é o que as páginas trazem. Este bloco descreve só o CLARO. */
@media (prefers-color-scheme: light) {
  :root:root[data-tema="claro"] {
    --bg-deep: #F7F5F2;          /* papel, não branco puro: branco cansa */
    --bg: #F7F5F2;
    --card-glass: #FFFFFF;
    --card: #FFFFFF;
    --card-border: #E3DFD8;
    --borda: #E3DFD8;
    --text-main: #1B2033;
    --texto: #1B2033;
    --text-muted: #5A6076;
    --muted: #5A6076;
    /* 🔴 Era #858B9E e media 3,12:1 sobre papel — abaixo dos 4,5:1 do
       mínimo legível. É a cor do "Not started" e das datas: texto pequeno,
       cinza, e o que ele apontou primeiro. Discreto é hierarquia, não é
       apagado. #696F82 dá 4,60:1 no papel e continua um degrau abaixo do
       texto principal. */
    --text-subtle: #696F82;
    --sutil: #696F82;
    /* A pervinca escurece: sobre papel, o tom claro deixaria de ser link. */
    /* 🔴 A PERVINCA CLARA PASSOU A SAIR DA FICHA (13/08/2026).
       Ela estava escrita aqui como #5566C4, e este bloco tem seletor
       `:root:root` (0,2,0) — ele VENCE o bloco das fichas, que é
       `:root` (0,1,0). Resultado: a ficha do acento claro (#4A5AB0)
       nunca chegava à tela, e os três casos de fronteira que estavam
       abertos desde 12/08 (.header-badge 4,44 · .xp-badge 4,48) eram
       todos este mesmo #5566C4, medido em 207 lugares.

       ⚠️ Eu procurei o defeito nas 338 páginas antes de olhar aqui, e
       cheguei a trocar 100 arquivos sem mover o contraste um décimo. A
       passada melhorou a própria métrica e não o contraste — que é o
       sinal clássico de estar medindo o intermediário em vez do fim.

       Lendo a ficha, os dois blocos passam a dizer a mesma coisa. */
    --accent-blue: var(--sco-acento, #5566C4);
    --azul: var(--sco-acento, #5566C4);
    --accent-purple: #7B5FC0;
    --success: #2E8B62;
    --ok: #2E8B62;
  }
}

/* A escolha manual vence o sistema, nas duas direções. */
:root:root[data-tema="claro"] {
  --bg-deep: #F7F5F2; --bg: #F7F5F2;
  --card-glass: #FFFFFF; --card: #FFFFFF;
  --card-border: #E3DFD8; --borda: #E3DFD8;
  --text-main: #1B2033; --texto: #1B2033;
  --text-muted: #5A6076; --muted: #5A6076;
  --text-subtle: #696F82; --sutil: #696F82;
  --accent-blue: var(--sco-acento, #5566C4); --azul: var(--sco-acento, #5566C4);
  --accent-purple: #7B5FC0;
  --success: #2E8B62; --ok: #2E8B62;
}

/* ⚠️ NO CLARO, O QUE ERA VIDRO PRECISA VIRAR PAPEL.
   As telas usam `backdrop-filter: blur()` sobre fundo escuro translúcido —
   um efeito que só funciona quando há escuridão atrás. Sobre papel ele vira
   uma mancha cinza suja. E o gradiente de fundo, pensado para brilhar no
   escuro, some. */
@media (prefers-color-scheme: light) {
  :root:root[data-tema="claro"] body { background-image: none; }
  :root:root[data-tema="claro"] .cartao,
  :root:root[data-tema="claro"] .header-panel,
  :root:root[data-tema="claro"] .form-card {
    backdrop-filter: none;
    background: #FFFFFF;
  }
  /* O título com `-webkit-text-fill-color: transparent` some no claro: o
     gradiente dele é branco sobre branco. */
  :root:root[data-tema="claro"] .header-title {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-main);
  }
}
:root:root[data-tema="claro"] body { background-image: none; }
:root:root[data-tema="claro"] .cartao,
:root:root[data-tema="claro"] .header-panel,
:root:root[data-tema="claro"] .form-card {
  backdrop-filter: none;
  background: #FFFFFF;
}
:root:root[data-tema="claro"] .header-title {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-main);
}

/* ═══════════════════════════════════════════════════════════════════════
   🔴 O MESMO TÍTULO SUMIDO, EM 100 PÁGINAS QUE NINGUÉM TINHA OLHADO

   O conserto logo acima nomeia `.header-title` — e só ela. As 100 aulas de
   FR/HOBBIES usam OUTRO nome para a mesma coisa (`.hero-title`), com o
   mesmo gradiente `#fff → #cbd5e1`. No tema claro isso é branco sobre
   papel: **1,09:1**. O título da aula simplesmente não está lá.

   ⚠️ E O MEDIDOR NÃO PODIA VER ISSO — por dois motivos ao mesmo tempo, que
   é por isso que durou tanto:

     1. havia uma exceção para pular texto recortado, e ela nunca disparava:
        procurava a palavra `transparent`, e o valor computado é
        `rgba(0, 0, 0, 0)`. Nunca casou. Então o título ERA medido —
     2. …medido pela cor HERDADA (`--text-main`, escura no claro), que dá
        14,83:1 e passa folgado. A cor que aparece na tela é o gradiente, e
        ninguém estava olhando para ele.

   Um caso que passa por um motivo errado é pior que um caso que falha:
   ninguém vai procurar o que o medidor jurou estar certo.

   ⚠️ O `!important` NÃO É DESCUIDO. O banner do Speechling, nas mesmas 100
   páginas, traz `-webkit-text-fill-color:#fff` **em atributo `style`** —
   branco cravado no elemento. Estilo inline vence qualquer folha, e sem o
   `!important` o conserto valeria para o título da página e deixaria o do
   banner invisível. A alternativa seria editar 100 arquivos para tirar uma
   declaração que existe por um bom motivo no tema escuro.

   O bloco vale só sob `[data-tema="claro"]`: no escuro o gradiente continua
   exatamente como está, que é onde ele foi desenhado para funcionar. */
:root:root[data-tema="claro"] .hero-title {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-main, var(--sco-texto, #1B2033));
}

/* ═══════════════════════════════════════════════════════════════════════
   🔴 AS SUPERFÍCIES CHUMBADAS, NO TEMA CLARO

   O professor, em 11/08/2026: *"no tema branco, a cor do Professor de Bolso,
   parcelas e pagamento, marcar horário — aquele cinza não caiu muito bem."*

   Ele apontou exatamente os cartões de atalho. A causa: eles não usam
   variável. O fundo deles é `rgba(15,23,42,.55)` escrito à mão — um
   azul-quase-preto TRANSLÚCIDO. Sobre tinta ele vira uma superfície um
   degrau acima do fundo, que é o efeito desejado; sobre papel ele vira
   exatamente o que ele viu: **uma mancha cinza suja**.

   ⚠️ É o limite conhecido da repintura por variável, e estava documentado:
   `var(...)` alcança tudo que passa por variável, e nada do que foi escrito
   à mão. Aqui o conserto é por elemento, e por isso a lista é explícita —
   um seletor genérico do tipo `[style*="rgba(15"]` pegaria coisas que não
   são superfície e quebraria em silêncio.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:root[data-tema="claro"] .atalho,
  :root:root[data-tema="claro"] .trilha,
  :root:root[data-tema="claro"] .revisao-item,
  :root:root[data-tema="claro"] .chave,
  :root:root[data-tema="claro"] .trilha-link,
  :root:root[data-tema="claro"] .meu,
  :root:root[data-tema="claro"] .ofensiva,
  :root:root[data-tema="claro"] .s-neutro,
  :root:root[data-tema="claro"] .hist-item.aberto,
  :root:root[data-tema="claro"] .sco-pgto.pg-neutro {
    background: #FFFFFF;
    border-color: #E3DFD8;
  }
  /* O trilho da barra de progresso: no claro, cinza translúcido some. */
  :root:root[data-tema="claro"] .barra,
  :root:root[data-tema="claro"] .of-dia i {
    background: #EAE6DF;
  }
  /* Os campos de formulário eram vidro escuro; no claro, papel com borda. */
  :root:root[data-tema="claro"] input,
  :root:root[data-tema="claro"] select,
  :root:root[data-tema="claro"] textarea {
    background: #FFFFFF;
    border-color: #DCD7CE;
    color: var(--text-main);
  }
}

:root:root[data-tema="claro"] .atalho,
:root:root[data-tema="claro"] .trilha,
:root:root[data-tema="claro"] .revisao-item,
:root:root[data-tema="claro"] .chave,
:root:root[data-tema="claro"] .trilha-link,
:root:root[data-tema="claro"] .meu,
:root:root[data-tema="claro"] .ofensiva,
:root:root[data-tema="claro"] .s-neutro,
:root:root[data-tema="claro"] .hist-item.aberto,
:root:root[data-tema="claro"] .sco-pgto.pg-neutro {
  background: #FFFFFF;
  border-color: #E3DFD8;
}
:root:root[data-tema="claro"] .barra,
:root:root[data-tema="claro"] .of-dia i { background: #EAE6DF; }
:root:root[data-tema="claro"] input,
:root:root[data-tema="claro"] select,
:root:root[data-tema="claro"] textarea {
  background: #FFFFFF;
  border-color: #DCD7CE;
  color: var(--text-main);
}

/* ═══════════════════════════════════════════════════════════════════════
   🔴 AS 28 VARIÁVEIS QUE O TEMA CLARO NUNCA TROCAVA

   O professor, em 12/08/2026, com duas capturas: *"tem bastante lugar que
   não dá pra ver o que tá escrito, porque ou o fundo é claro, ou as letras a
   cor é igual — aí ninguém vê nada. Revise isso globalmente."*

   Ele estava vendo o mesmo defeito em muitos lugares, e a causa era uma só.
   Contei: as páginas declaram **52 variáveis** e o bloco claro trocava **24**.
   As 28 restantes ficavam com o valor do escuro, e o resultado é literalmente
   o que ele descreveu:

     `--card-bg`   em 120 páginas — o CARTÃO continuava escuro enquanto o
                   texto virava escuro. `.quiz-btn` media **1,40:1**
     `--text-sub`  em 200 páginas — a letra secundária continuava clara sobre
                   papel. `.card-pt` media **2,66:1**

   ⚠️ NÃO É "MAIS UMA COR PARA AJUSTAR": é a diferença entre o tema claro
   funcionar e não funcionar. Meia paleta virando e meia não é pior que não
   ter tema claro nenhum — vira texto invisível em vez de texto feio.

   ─── 🔴 O QUE NÃO ENTRA AQUI, E POR QUÊ ───

   `--paper`, `--navy`, `--slate`, `--slate-light`, `--border`, `--crimson`
   são as 100 páginas do **FR/PROVAS**, que já é uma família CLARA por
   desenho (papel de prova). Trocá-las "para o claro" inverteria uma tela que
   já está certa — o erro simétrico do que estamos consertando, e mais difícil
   de enxergar porque a página continuaria parecendo intencional.

   A regra: só entra aqui variável cujo valor de origem foi pensado para
   fundo ESCURO.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:root[data-tema="claro"] {
    /* As superfícies que continuavam escuras */
    --card-bg: #FFFFFF;
    --bg-main: #F7F5F2;
    --primary: #F7F5F2;
    --card-hover-border: #5566C4;
    /* O gradiente radial do Loisirs é um poço de luz no escuro; sobre papel
       ele vira uma mancha cinza no meio da tela. */
    --bg-gradient: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #F9F7F4 70%, #F7F5F2 100%);

    /* 🔴 A letra secundária de 200 páginas: #A8B0C4 dava 2,00:1 sobre papel */
    --text-sub: #696F82;

    /* Status: os tons de alerta foram escolhidos para brilhar no escuro */
    --error: #B3261E;
    --warning-red: #B3261E;
    --crimson-light: #B3261E;
    --warning-orange: #9A4A11;
    --accent-warning: #8A5A00;

    /* ⚠️ Os "glow" são FUNDO translúcido, não texto. Sobre papel eles viram
       um tingimento pálido — o que já é o certo. O que muda é a MATIZ: um
       brilho vermelho pensado para o escuro fica alaranjado sobre branco. */
    --error-glow: rgba(179, 38, 30, 0.10);
    --warning-glow: rgba(154, 74, 17, 0.10);
    --success-glow: rgba(31, 122, 82, 0.10);
    --accent-glow: rgba(85, 102, 196, 0.10);
  }
}
:root:root[data-tema="claro"] {
  --card-bg: #FFFFFF;
  --bg-main: #F7F5F2;
  --primary: #F7F5F2;
  --card-hover-border: #5566C4;
  --bg-gradient: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #F9F7F4 70%, #F7F5F2 100%);
  --text-sub: #696F82;
  --error: #B3261E;
  --warning-red: #B3261E;
  --crimson-light: #B3261E;
  --warning-orange: #9A4A11;
  --accent-warning: #8A5A00;
  --error-glow: rgba(179, 38, 30, 0.10);
  --warning-glow: rgba(154, 74, 17, 0.10);
  --success-glow: rgba(31, 122, 82, 0.10);
  --accent-glow: rgba(85, 102, 196, 0.10);
}

/* ═══════════════════════════════════════════════════════════════════════
   🔴 A PALETA PASTEL NÃO SOBREVIVE AO PAPEL

   O professor, em 11/08/2026, com a tela das trilhas no claro: *"tema claro
   ainda ruim"*. Na captura, os títulos das aulas — "Airport Check-in &
   Flight Delays" — estavam brancos sobre cartão branco.

   Fui medir e o título era a ponta. As telas usam PASTEL para status, que é
   a escolha certa sobre fundo escuro e a errada sobre papel. Contra o branco
   do cartão, com o mínimo legível em 4,5:1:

       #f1f5f9  título da aula     1,10:1  →  #1B2033  16,14:1
       #6ee7b7  concluído          1,52:1  →  #1F7A52   5,30:1
       #fca5a5  erro               1,90:1  →  #B3261E   6,54:1
       #fcd34d  aviso              1,44:1  →  #8A5A00   5,93:1
       #fed7aa  atenção            1,35:1  →  #9A4A11   6,25:1

   ⚠️ ESTAS VARIÁVEIS SÓ EXISTEM NO CLARO, DE PROPÓSITO. No escuro cada uso
   é `var(--ok-texto, #6ee7b7)` — sem definição, vale o fallback, que é a cor
   de hoje. O tema escuro não muda um pixel, e isso é verificável em vez de
   prometido. Definir um valor escuro aqui só criaria uma segunda cópia da
   mesma cor para alguém esquecer de atualizar depois.

   Quem faz a troca nos 117 arquivos é `marca/afinar-status.mjs`, e o
   `test_contraste` mede o resultado renderizado.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:root[data-tema="claro"] {
    --texto-cartao: #1B2033;
    --ok-texto: #1F7A52;
    --erro-texto: #B3261E;
    --aviso-texto: #8A5A00;
    --aviso-suave: #8A5A00;
    --aviso-forte: #8A5A00;
    --atencao-texto: #9A4A11;
    /* Os dois botões de áudio das lições: azul-céu e lilás pastel, que sobre
       papel davam 1,53:1 e 1,67:1 — o aluno via o ícone e não o rótulo. */
    --audio-normal: #0477AE;
    --audio-lento: #6D28D9;
  }
}
:root:root[data-tema="claro"] {
  --texto-cartao: #1B2033;
  --ok-texto: #1F7A52;
  --erro-texto: #B3261E;
  --aviso-texto: #8A5A00;
  --aviso-suave: #8A5A00;
  --aviso-forte: #8A5A00;
  --atencao-texto: #9A4A11;
  /* ⚠️ Estes dois quase ficaram só no bloco acima (o do sistema operacional).
     A escolha MANUAL do tema tem o seu próprio bloco, e esquecer um deles
     entrega metade do conserto: o aluno que aperta "claro" no ☰ continuaria
     sem enxergar o rótulo dos botões de áudio. */
  --audio-normal: #0477AE;
  --audio-lento: #6D28D9;
}

/* ═══════════════════════════════════════════════════════════════════════
   AS SUPERFÍCIES DA GRADE DE AULAS

   Na mesma captura, o cartão do EN-T-011 (o único concluído) aparecia
   CINZA-ESCURO no meio dos brancos. O fundo dele é
   `linear-gradient(135deg, var(--success-glow), rgba(30,41,59,0.7))` — o
   segundo tom é chumbado, e sobre papel ele vira a mancha que ele já tinha
   reclamado nos atalhos.

   ⚠️ O CONCLUÍDO PRECISA CONTINUAR SE DISTINGUINDO. Pintar de branco igual
   aos outros consertaria a cor e apagaria a informação: o aluno perde a
   única marca visual de "esta eu já fiz". No claro ele vira verde-papel com
   borda verde — mesmo recado, no material certo.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:root[data-tema="claro"] .card.completed {
    background: #EEF7F1;
    border-color: #A9D5BE;
  }
  /* A pílula do filtro (All / A2-B1 / B1) era vidro escuro. */
  :root:root[data-tema="claro"] .filter-btn {
    background: #FFFFFF;
    border-color: #DCD7CE;
  }
  :root:root[data-tema="claro"] .filter-btn:hover {
    color: var(--text-main);
    border-color: #5566C4;
  }
  /* O trilho e a etiqueta de nível eram branco translúcido: some no branco. */
  :root:root[data-tema="claro"] .progress-track,
  :root:root[data-tema="claro"] .card-level {
    background: #EAE6DF;
  }
  :root:root[data-tema="claro"] .progress-wrap {
    background: #FFFFFF;
  }
}
:root:root[data-tema="claro"] .card.completed {
  background: #EEF7F1;
  border-color: #A9D5BE;
}
:root:root[data-tema="claro"] .filter-btn {
  background: #FFFFFF;
  border-color: #DCD7CE;
}
:root:root[data-tema="claro"] .filter-btn:hover {
  color: var(--text-main);
  border-color: #5566C4;
}
:root:root[data-tema="claro"] .progress-track,
:root:root[data-tema="claro"] .card-level { background: #EAE6DF; }
:root:root[data-tema="claro"] .progress-wrap { background: #FFFFFF; }

/* ═══════════════════════════════════════════════════════════════════════
   TIRAR O "QUADRADO"

   O professor, em 11/08/2026: *"tá muito quadrado, não tá vivo... parece que
   tô vendo um vídeo de resolução 240, não tá tão agradável aos olhos."*

   "Parece baixa resolução" quase nunca é resolução. São quatro causas, e
   todas estavam presentes:

     1. CANTOS DUROS — raios pequenos e todos iguais. O olho lê borda dura
        como pixel, e um raio de 8px num cartão de 400px de largura é quase
        um canto reto.
     2. BORDA DE 1px CINZA EM TUDO — ela desenha o retângulo em vez de
        sugerir a superfície. Cinza médio sobre fundo escuro é a linha que
        mais chama atenção, e ela chama para a caixa, não para o conteúdo.
     3. NENHUMA PROFUNDIDADE — sem sombra, tudo vive no mesmo plano e a tela
        vira um mosaico de retângulos empilhados.
     4. NENHUM MOVIMENTO — sem transição, cada toque é um corte seco. É
        literalmente o que faz uma interface parecer "travada".

   ⚠️ TUDO AQUI É ADITIVO E SEGURO. Nenhuma regra mexe em `display`, largura,
   posição ou fluxo — só em raio, sombra, transição e no que a página já
   pinta. É o oposto de repintar as 320 lições, que continua fora de escopo.
   ═══════════════════════════════════════════════════════════════════════ */

/* Um raio maior e PROPORCIONAL. Cartão grande com raio pequeno é o que mais
   pesa na sensação de "quadrado". */
.cartao, .header-panel, .form-card, .atalho, .trilha,
.situacao, .aviso, .caixa, .sco-pgto {
  border-radius: 18px;
}

/* A borda deixa de desenhar o retângulo. Ela continua existindo — some de
   vez e os cartões se fundem no fundo —, mas em 1/3 do contraste, e a
   superfície passa a ser sugerida pela sombra. */
.cartao, .header-panel, .form-card, .atalho, .trilha {
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 24px -12px rgba(0, 0, 0, 0.45);
}

/* Movimento. 160ms é o ponto em que o olho percebe continuidade sem sentir
   lentidão — abaixo disso parece corte, acima parece preguiça. */
.atalho, .trilha, .btn, .vaga, .dia-btn, .seta, .sco-item, .sco-linha, .quiz-option {
  transition: transform .16s ease, border-color .16s ease,
              background-color .16s ease, box-shadow .16s ease;
}

/* O toque responde. Um alvo que não afunda ao ser tocado é o que dá a
   sensação de tela congelada no celular, onde não existe `:hover`. */
.atalho:active, .trilha:active, .btn:active, .vaga:active, .quiz-option:active {
  transform: scale(.985);
}
.atalho:hover, .trilha:hover {
  transform: translateY(-1px);
  border-color: rgba(169, 184, 242, 0.34);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 14px 30px -14px rgba(0, 0, 0, 0.55);
}

/* ⚠️ A tipografia é metade da sensação de nitidez, e ela estava por conta do
   navegador. `-webkit-font-smoothing` é o que tira o peso borrado das fontes
   claras sobre fundo escuro no Mac e no iPhone — exatamente o "240p" que ele
   descreveu. E `text-rendering` liga o kerning de verdade. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Título grande com espaçamento de texto pequeno é o que faz a tipografia
   parecer "esticada". O ajuste é negativo e proporcional. */
h1, .header-title, .saudacao, .titulo { letter-spacing: -0.022em; }
h2, h3 { letter-spacing: -0.012em; }

/* ⚠️ QUEM PEDIU MENOS MOVIMENTO NÃO RECEBE MOVIMENTO. Não é acessibilidade
   decorativa: enjoo de movimento é real, e o sistema operacional já sabe a
   resposta — basta perguntar. */
@media (prefers-reduced-motion: reduce) {
  .atalho, .trilha, .btn, .vaga, .dia-btn, .seta, .sco-item, .sco-linha, .quiz-option {
    transition: none;
  }
  .atalho:active, .trilha:active, .btn:active, .vaga:active,
  .quiz-option:active, .atalho:hover, .trilha:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   A SAÍDA — nenhuma tela pode ser um beco

   O professor, em 11/08/2026: *"o que corrigimos das páginas não terem um
   voltar ou acesso aos 3 barrinhas, tudo isso deve ser visto globalmente."*

   A auditoria das 336 páginas mediu onde faltava, e o resultado foi curto:
   as 320 lições e os 8 hubs estavam cobertos; **as quatro sem saída nenhuma
   estavam todas na raiz** — `acesso`, `admin`, `gerador` e o `index`, que é
   só um redirecionamento e por isso está certo.

   ⚠️ Fica em `_marca.css` porque as 336 páginas já o carregam: nenhuma
   edição em massa, que é onde este projeto já se machucou duas vezes.
   ═══════════════════════════════════════════════════════════════════════ */
.sco-sair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-family: var(--sco-fonte);
  font-size: 0.8rem;
}

.sco-sair a {
  color: var(--sco-pervinca);
  text-decoration: none;
  font-weight: 600;
  /* 40px de alvo sem engordar a linha — o mesmo cuidado da barra das aulas:
     abaixo disso o dedo erra, e errar um link de saída leva para longe. */
  padding: 8px 2px;
}
.sco-sair a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   A MARCA D'ÁGUA DE IMPRESSÃO

   O professor, em 11/08/2026: *"algo que impeça réplica sem meus créditos."*

   ─── POR QUE SÓ NA IMPRESSÃO ───

   É onde a réplica de fato acontece. Ninguém redistribui um webapp: ele mora
   num endereço que exige código. O que circula é o **PDF** — "imprimir →
   salvar como PDF" e mandar no grupo. Esse arquivo saía anônimo.

   Na tela, marca d'água só atrapalharia quem pagou, e é a mesma troca já
   escrita no `api/ficha.js`: material marcado demais pune o cliente certo.

   ─── POR QUE EM CSS, E NÃO NO HTML ───

   As 336 páginas já carregam este arquivo. Fazer aqui custa **zero edição**
   nelas — e cada edição em massa nas lições é uma chance de repetir o §20.23,
   que já quebrou o layout duas vezes no mesmo dia.

   ⚠️ `position: fixed` tira o pseudo-elemento do fluxo, então ele NÃO vira um
   segundo item de flex nos `body { display:flex }` do projeto. Era a única
   armadilha real aqui, e é por isso que não é `absolute` nem estático.
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  body::before {
    content: "Solutian & Co. · Languages";
    position: fixed;
    top: 42%;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--sco-fonte);
    font-size: 46pt;
    font-weight: 700;
    letter-spacing: -0.02em;
    /* ~4%: some enquanto se lê, e não sai sem reeditar o arquivo. */
    color: rgba(20, 26, 43, 0.05);
    transform: rotate(-30deg);
    pointer-events: none;
    z-index: 9999;
  }

  body::after {
    content: "Solutian & Co. · Languages — Prof. Ian · material de uso pessoal do aluno, não redistribuir";
    position: fixed;
    bottom: 4px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--sco-fonte);
    font-size: 7.5pt;
    color: #64748b;
    pointer-events: none;
    z-index: 9999;
  }

  /* O que não faz sentido no papel some, e abre espaço para o conteúdo:
     navegação impressa é tinta gasta. */
  .sco-abrir, .sco-menu, .sco-fundo, .sco-barra, .scoNav, .aula-topo { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   A ARTE DAS TRILHAS — papel de parede, tinta e traço

   Usada em DOIS lugares desde 12/08/2026: em cada linha de trilha na Home,
   e no cabeçalho dos 8 hubs ("queria que aparecesse lá em cima do cardzão
   quando abre pra fazer a trilha também"). Por isso mora aqui, e não no
   `inicio.html`: nove cópias do mesmo desenho é oito lugares para esquecer.
   O JavaScript que a monta está em `/trilha-arte.js`.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   O PAPEL DE PAREDE DA TRILHA

   Mesmo tratamento das bandeiras — inclinado, à direita, sangrando em
   cima e embaixo, com fade curto. A diferença é que aqui é TRAÇO: o
   `stroke` sai de `--traco`, que muda com o tema, então não existe uma
   segunda paleta para manter em sincronia.

   ⚠️ `vector-effect: non-scaling-stroke`: sem ele a espessura estica junto
   com o `viewBox` e o desenho engorda no celular.

   ⚠️ 40% de largura, e não 70% como as bandeiras: a linha da trilha é bem
   mais baixa que a capa do idioma, e um desenho largo aqui passaria por
   baixo do nome. Em 360px cai para 34%. */
/* ⚠️ `display:block` DITO, mesmo sendo redundante. Um elemento
   `position:absolute` é blocificado pelo navegador, então tecnicamente
   esta linha não muda nada hoje. Ela existe porque a capa do idioma
   quebrou hoje de manhã exatamente por confiar num `display` implícito —
   lá era `position:relative`, que NÃO blocifica, e a diferença entre os
   dois casos não está escrita em lugar nenhum do arquivo. Uma palavra a
   mais custa menos que a próxima pessoa (ou eu) ter de lembrar disso. */
.trilha-papel{display:block;
  position:absolute;top:-16px;bottom:-16px;right:-6px;width:40%;
  transform:rotate(-4deg);pointer-events:none;
  -webkit-mask-image:linear-gradient(96deg,transparent 0%,#000 10%);
  mask-image:linear-gradient(96deg,transparent 0%,#000 10%)}
.trilha-papel svg{display:block;width:100%;height:100%}
.trilha-papel svg *{fill:none;stroke:var(--traco,rgba(239,242,249,.30));
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.trilha-papel svg .cheio{fill:var(--traco,rgba(239,242,249,.30));stroke:none}



/* ─── A tinta de cada trilha ───
   Mesma lei da tinta do idioma: o ESCURO é o padrão, no seletor sem
   condição; o claro é a exceção com `[data-tema="claro"]`. Dessaturadas a
   ponto de o nome continuar em mais de 10:1 — medido em
   `testes/test_contraste_painel.mjs`. */
.trilha.t-en-base{--tinta-t:#16261F}
.trilha.t-en-travel{--tinta-t:#141F2C}
.trilha.t-en-business{--tinta-t:#1B2138}
.trilha.t-en-grammar{--tinta-t:#231C33}
.trilha.t-fr-base{--tinta-t:#2A1E28}
.trilha.t-fr-hobbies{--tinta-t:#2A2119}
.trilha.t-fr-provas{--tinta-t:#182034}
.trilha.t-fr-grammaire{--tinta-t:#242219}
:root[data-tema="claro"] .trilha.t-en-base{--tinta-t:#E8F0EC}
:root[data-tema="claro"] .trilha.t-en-travel{--tinta-t:#E6F0F8}
:root[data-tema="claro"] .trilha.t-en-business{--tinta-t:#ECEDF6}
:root[data-tema="claro"] .trilha.t-en-grammar{--tinta-t:#F2ECF6}
:root[data-tema="claro"] .trilha.t-fr-base{--tinta-t:#FBEEF0}
:root[data-tema="claro"] .trilha.t-fr-hobbies{--tinta-t:#FAF0E6}
:root[data-tema="claro"] .trilha.t-fr-provas{--tinta-t:#EAEEF7}
:root[data-tema="claro"] .trilha.t-fr-grammaire{--tinta-t:#F1EFEA}
/* O traço herda a luminosidade do tema, e é só isto que ele precisa. */
/* 🔴 O TRAÇO É DEFINIDO ONDE O DESENHO APARECE — E SÃO DOIS LUGARES.

   Ele só existia em `.trilha` (a linha da Home). A capa do hub caía no valor
   de reserva do `svg *`, que é CLARO — e no tema claro isso é traço claro
   sobre tinta clara: invisível. O professor: *"ícones svg das trilhas não
   aparecem no celular."*

   ⚠️ VALOR DE RESERVA NÃO É PALETA. Ele existe para a página não ficar sem
   cor nenhuma se a ficha sumir, e por isso é um valor só — não pode servir
   aos dois temas. Onde o desenho aparece, o token tem de ser DITO.

   ⚠️ E é a mesma armadilha do §23.31, uma camada abaixo: lá era uma segunda
   paleta em paralelo ao tema; aqui é uma paleta que simplesmente não chegou.
   As duas terminam igual — uma cor que não sabe em que tema está. */
/* ⚠️ E OS DOIS TEMAS PRECISAM DA MESMA FORÇA, não do mesmo NÚMERO.
   Com 30% nos dois, o desenho media 2,54:1 no escuro e **1,90:1 no claro** —
   um terço mais fraco, porque tinta clara perdoa menos um traço translúcido.
   Copiar a opacidade parecia simetria e era desequilíbrio.

   Medido contra a tinta mais clara de cada tema: 38% no escuro dá 3,27:1 e
   45% no claro dá 2,79:1 — perto o bastante para o olho ler os dois como o
   mesmo peso.

   ⚠️ 3:1 aqui NÃO é a regra da WCAG. Ela vale para o que precisa ser lido ou
   operado, e um papel de parede é explicitamente isento. O piso aqui é outro
   e é honesto dizer qual: ser PERCEPTÍVEL sem competir com o nome da trilha,
   que fica em 14:1 por cima. */
.trilha,
.trilha-capa{--traco:rgba(239,242,249,.38)}
:root[data-tema="claro"] .trilha,
:root[data-tema="claro"] .trilha-capa{--traco:rgba(23,26,38,.45)}

/* ─── A CAPA DA TRILHA, no topo do hub (opção C, escolhida em 12/08/2026) ───

   Ele: *"eu queria o ícone no card maior quando você abre pra ter acesso às
   trilhas."* Quatro posições foram prototipadas; ele escolheu a capa larga.

   🔴 Ela é O MESMO CARTÃO DA HOME, CRESCIDO — mesma tinta, mesmo desenho,
   mesmo fade curto. É isso que faz o aluno reconhecer onde está: ele toca no
   cartão do Travel na Home e chega no mesmo cartão, maior, aqui.

   ⚠️ A tinta vem das mesmas classes `t-*` da linha de trilha, lá em cima.
   Uma segunda paleta para a capa seria a armadilha do §23.31 outra vez. */
.trilha-capa{position:relative;overflow:hidden;border-radius:15px;
  border:1px solid var(--sco-borda,var(--borda,rgba(255,255,255,.08)));
  background:var(--tinta-t,var(--sco-superficie,rgba(15,23,42,.55)));
  padding:20px 18px;margin-bottom:16px;min-height:112px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px}

/* ⚠️ 38% e não 30%: a capa é mais alta que a linha de trilha, e um desenho
   estreito ficaria perdido nela. O fade continua curto — foi correção dele. */
.trilha-capa-arte{position:absolute;top:-18px;bottom:-18px;right:-6px;width:38%;
  transform:rotate(-4deg);pointer-events:none;
  -webkit-mask-image:linear-gradient(96deg,transparent 0%,#000 12%);
  mask-image:linear-gradient(96deg,transparent 0%,#000 12%)}

/* Tudo que é conteúdo sobe para cima do desenho. Sem isto, um filho sem
   `position` fica no mesmo plano do absoluto e o desenho atravessa o texto. */
.trilha-capa > *:not(.trilha-capa-arte){position:relative}

/* O selo e o título vêm MOVIDOS do painel; aqui eles só mudam de tamanho.
   ⚠️ `!important` porque cada um dos 8 hubs tem o próprio `<style>` com
   `.header-title`, e o `<style>` da página vence esta folha na cascata. É a
   única forma de a capa valer nos oito sem editar oito arquivos. */
.trilha-capa .header-badge{font-size:.62rem !important;font-weight:800 !important;
  letter-spacing:.09em !important;text-transform:uppercase;
  color:var(--sco-texto-2,#A8B0C4) !important;margin:0 0 4px !important;
  background:none !important;border:0 !important;padding:0 !important}
.trilha-capa .header-title{font-size:1.5rem !important;font-weight:800 !important;
  letter-spacing:-.6px !important;line-height:1.12 !important;margin:0 !important;
  color:var(--sco-texto,#F7F5F2) !important}
.trilha-capa-sub{font-size:.76rem;font-weight:600;margin:4px 0 0;
  color:var(--sco-texto-2,#A8B0C4)}

/* ─── O SELO: o símbolo ao lado do nome ───
   O papel de parede é atmosfera; este é o ÍCONE. Ele: *"tinha um svg ao lado
   de travel na tela pra ver as atividades."*

   ⚠️ AQUI O TRAÇO TEM A FORÇA DO TEXTO, e não a do papel de parede. O selo
   tem 52px e fundo próprio: com traço translúcido ele viraria uma mancha que
   ninguém identifica. Atmosfera se dilui; ícone não. */
.trilha-capa-linha{display:flex;align-items:center;gap:14px}
.trilha-capa-textos{min-width:0;flex:1}
.trilha-selo{flex:none;width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--sco-realce,rgba(255,255,255,.07));
  border:1px solid var(--sco-borda,rgba(255,255,255,.14))}
.trilha-selo svg{display:block;width:36px;height:26px}
.trilha-selo svg *{fill:none;stroke:var(--sco-texto,#F7F5F2);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.trilha-selo svg .cheio{fill:var(--sco-texto,#F7F5F2);stroke:none}

/* ─── A DICA DE ESTUDO, abaixo do "Como usar esta trilha" ───
   Barra à esquerda em vez de moldura fechada: ela é leitura, e mais uma
   caixa disputaria com o guia logo acima dela. */
.trilha-dica{border:1px solid var(--sco-borda,rgba(255,255,255,.08));
  border-left:3px solid var(--sco-acento,#A9B8F2);
  border-radius:4px 14px 14px 4px;padding:15px 17px;margin-bottom:14px;
  background:var(--sco-superficie,rgba(30,41,59,.7))}
.trilha-dica-k{font-size:.61rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sco-acento,#A9B8F2);margin:0 0 8px}
/* ⚠️ Serifa e tamanho maior: é a única coisa da tela que se lê devagar.
   O resto do hub é lista, busca e cartões — coisas que se varrem. */
.trilha-dica-t{font-family:Georgia,"Iowan Old Style",serif;font-size:1.06rem;
  font-weight:400;line-height:1.34;letter-spacing:-.2px;margin:0 0 9px;
  color:var(--sco-texto,#F7F5F2)}
.trilha-dica-p{font-size:.84rem;line-height:1.6;margin:0 0 8px;
  color:var(--sco-texto-2,#A8B0C4)}
.trilha-dica-p:last-child{margin-bottom:0}

@media (max-width:520px){
  /* O selo encolhe junto: 52px ao lado de um título de 1,24rem em 360px
     deixaria o nome com duas linhas. */
  .trilha-selo{width:44px;height:44px;border-radius:12px}
  .trilha-selo svg{width:30px;height:22px}
  .trilha-capa-linha{gap:11px}
  .trilha-dica{padding:13px 14px}
  .trilha-dica-t{font-size:.98rem}
  .trilha-capa{min-height:98px;padding:16px 15px}
  .trilha-capa .header-title{font-size:1.24rem !important}
  /* Em 360px, 38% começariam em cima de "Loisirs & Quotidien". */
  .trilha-capa-arte{width:44%}
}