/* ===========================================================
   ErySensei — folha de estilo única
   Tema "washi": papel, tinta e selo vermelho.
   Tudo em variáveis CSS — trocar a paleta = trocar o :root.
   =========================================================== */

/* ===========================================================================
   ⭐⭐ A MARCA — Ery Mizushima (11/08)

   As cores abaixo são as DELA, tiradas do kit que ela mandou: o logo (montanha
   + sol + reflexo na água) e os elementos que ela batizou de **Ao** (青, azul),
   **Midori** (緑, verde) e **Pinku** (rosa). Antes disto a paleta era inventada
   por nós ("washi": bege, marrom e selo vermelho) — bonita, e de outra pessoa.

   ⚠️⚠️ A DESCOBERTA QUE MUDOU O DESENHO, e que veio de medir e não de olhar:
   **a paleta dela é de ILUSTRAÇÃO, não de texto.** Medidos contra o creme de
   fundo pelo contraste da WCAG, os NOVE acentos dela reprovam:

       Pinku #E29CA3 → 2.12:1     Ao #ADD7F6 → 1.46:1     Midori #ABE188 → 1.46:1
       (o mínimo para texto é 4.5:1; o nosso selo antigo dava 5.22:1)

   Jogar o Pinku direto no `--selo` — que são 59 usos, quase todos texto, link e
   botão — deixaria o site ilegível, e ilegível de um jeito que só quem tem
   pouca visão ou está no sol reclama. Ou seja: ninguém reclamaria, e estaria
   quebrado.

   ⭐ A SAÍDA: cada cor dela vira DUAS. O tom da marca fica intacto para
   PREENCHER (faixa, cartão, borda, ilustração), e ganha um irmão mais escuro,
   de mesmo matiz, para ESCREVER. Assim o site continua com a cara dela e
   continua legível — não se escolhe entre as duas coisas.
   =========================================================================== */
:root {
  /* ---- os tons da marca, como ela mandou. Para PREENCHER, nunca escrever --- */
  --pinku:        #E29CA3;   /* o rosa do logo                */
  --pinku-claro:  #ECBEC3;
  --pinku-palido: #FBDCDA;
  --ao:           #ADD7F6;   /* 青  — o azul dos elementos     */
  --ao-medio:     #8AC2F0;
  --ao-palido:    #DFEFFB;
  --midori:       #ABE188;   /* 緑  — o verde                  */
  --midori-claro: #CFEEBB;
  --creme:        #FDFBEE;   /* o fundo dela                   */

  /* =======================================================================
     ⚠️ Daqui para baixo, cada valor aparece UMA VEZ.

     Antes, esta paleta estava escrita QUATRO vezes no arquivo — `:root`,
     `@media (prefers-color-scheme: dark)`, `[data-tema="claro"]` e
     `[data-tema="escuro"]` — com os hexes copiados entre elas. É a segunda
     verdade, o defeito que este projeto já cometeu meia dúzia de vezes em
     outros lugares, morando no CSS: trocar uma cor exigia acertar quatro
     blocos, e errar um só se descobre no tema que você não estava olhando.

     ⭐ Agora os literais moram aqui, e os blocos lá embaixo só APONTAM.
     ======================================================================= */
  --c-papel:       var(--creme);
  --c-papel-2:     #FFFFFF;
  --c-papel-3:     #F5F1DC;
  --c-tinta:       #131313;       /* a tinta dela: 17.9:1 sobre o creme */
  --c-tinta-media: #5f5a4e;
  --c-tinta-suave: #746f61;       /* ⚠️ 4.82:1 — a olho eu tinha posto #7d786b,
                                     que dá 4.24:1 e reprova; o guarda pegou */
  --c-linha:       #E9E4CE;
  /* ⭐⭐ A tinta que vai EM CIMA de um acento cheio (botão, etiqueta sólida).
     Antes ela estava escrita `color: #fff` direto na regra do botão, e isso
     era invisível enquanto o acento foi escuro nos dois temas. Deixou de ser:
     no tema escuro o selo virou rosa CLARO (#dd949a, que é o que dá contraste
     sobre fundo preto) — e branco sobre rosa claro dá **2.39:1**. O botão
     principal do site ficaria com o texto sumindo, e passando em todos os
     testes, porque nenhum deles olhava para dentro de um botão. */
  --c-tinta-cheia: #ffffff;
  --c-selo:        #a34d58;       /* ⭐ Pinku para escrever — 5.38:1  */
  --c-selo-fundo:  #FAE6E4;
  --c-indigo:      #3276ae;       /* ⭐ Ao para escrever     — 4.66:1  */
  --c-musgo:       #487e25;       /* ⭐ Midori para escrever — 4.71:1  */
  --c-sombra:      0 1px 2px rgba(19,19,19,.04), 0 8px 24px -12px rgba(19,19,19,.16);
  --c-sombra-alta: 0 2px 4px rgba(19,19,19,.05), 0 20px 40px -18px rgba(19,19,19,.26);

  /* ⚠️ No escuro os papéis se invertem: o mesmo matiz precisa CLAREAR para
     passar em contraste, não escurecer. Por isso são valores próprios e não
     um filtro — `invert()` num rosa dá verde. */
  --e-papel:       #14140f;
  --e-papel-2:     #1d1d16;
  --e-papel-3:     #26261c;
  --e-tinta:       #ece9d9;
  --e-tinta-media: #b0ac96;
  --e-tinta-suave: #8a8674;
  --e-linha:       #333228;
  --e-tinta-cheia: #1a1210;       /* ⚠️ tinta escura sobre acento claro */
  --e-selo:        #dd949a;       /* Pinku claro  — 7.80:1 sobre o escuro */
  --e-selo-fundo:  #2e1e20;
  --e-indigo:      #6fb4e6;       /* Ao claro     */
  --e-musgo:       #8fce5f;       /* Midori claro */
  --e-sombra:      0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  --e-sombra-alta: 0 2px 4px rgba(0,0,0,.35), 0 20px 40px -18px rgba(0,0,0,.7);

  /* ---- o tema em vigor (padrão: claro) ---- */
  --papel:        var(--c-papel);
  --papel-2:      var(--c-papel-2);
  --papel-3:      var(--c-papel-3);
  --tinta:        var(--c-tinta);
  --tinta-media:  var(--c-tinta-media);
  --tinta-suave:  var(--c-tinta-suave);
  --linha:        var(--c-linha);
  --tinta-cheia:  var(--c-tinta-cheia);
  --selo:         var(--c-selo);
  --selo-fundo:   var(--c-selo-fundo);
  --indigo:       var(--c-indigo);
  --musgo:        var(--c-musgo);
  --sombra:       var(--c-sombra);
  --sombra-alta:  var(--c-sombra-alta);

  /* --- tipografia --- */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Songti SC", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* ======================================================================= */
  /*  ⭐⭐ A ESCALA TIPOGRÁFICA (11/08)                                       */
  /*                                                                         */
  /*  ⚠️ Ela nasceu de uma medição, não de gosto: as telas tinham **35        */
  /*  valores distintos de `font-size`** espalhados em 184 `style=` inline —  */
  /*  `.78`, `.8`, `.82`, `.85`, `.88`, `.9`, `.92`… sete tamanhos entre      */
  /*  .78 e .92rem fazendo o mesmo trabalho. Isso não é decisão de design, é  */
  /*  sedimento de quem escreveu cada tela num dia diferente.                 */
  /*                                                                         */
  /*  ⭐ O efeito prático: a COR já era um bloco só (zero `#hex` nas          */
  /*  páginas), e agora o TAMANHO também é. Mexer na régua de tipografia      */
  /*  deixa de ser caçar 184 lugares.                                         */
  /*                                                                         */
  /*  ⚠️ Os degraus foram escolhidos POR FREQUÊNCIA do que já existia, não    */
  /*  por uma razão matemática bonita: trocar .88 por .875 "porque a escala   */
  /*  pede" mudaria centenas de telas para nada. O objetivo aqui é UNIFICAR,  */
  /*  não redesenhar — o redesenho vem depois, mexendo nestes 8 valores.      */
  /* ======================================================================= */
  --t-xs:   .78rem;   /* etiqueta, rodapé de cartão, dica            */
  --t-sm:   .85rem;   /* texto de apoio, legenda                     */
  --t-md:   .9rem;    /* o mais usado: corpo dentro de cartão        */
  --t-base: 1rem;     /* corpo normal                                */
  --t-lg:   1.15rem;  /* subtítulo, destaque dentro do bloco         */
  --t-xl:   1.35rem;  /* título de seção                             */
  --t-2xl:  1.7rem;   /* título de página                            */
  --t-3xl:  clamp(1.8rem, 4vw, 2.6rem);   /* o título grande, fluido */
  --t-kana: 1.9rem;   /* ⚠️ o japonês precisa de corpo maior que o
                            latino para a mesma legibilidade — kanji
                            tem traço interno que some em corpo 1rem  */

  /* ═══════════════════════════ os degraus de DISPLAY (14/08) ═══════════════
     ⚠️⚠️ Acima do `--t-kana` não é texto: é DESENHO. Tentei encaixar estes
     valores na escala de cima e a conta acusou o disparate — o `4.5rem` da
     face da carta viraria `--t-kana` com **41,6px a menos**, e o `6.5rem` com
     **73,6px a menos**. Uma escala de texto aplicada a display não unifica
     nada: destrói. 📌 Medir o tamanho do risco antes de escolher o peso.

     Então display ganha os próprios degraus, nomeados pelo PAPEL.

     ⚠️⚠️ E CADA UM PRESERVA O VALOR QUE JÁ ESTAVA NA TELA. A primeira versão
     destes tokens tentou UNIFICAR display — juntar valores parecidos num
     degrau só — e a conferência achou três estragos meus: o código "N5" do
     cartão de nível saltou de 32px para 49,6px, a marca-d'água do cartão de
     ferramenta cresceu 23%, e o caractere do QUADRO DE TREINO — que é o que o
     aluno encara para responder — encolheu de 96px para 72px.

     📌 O trabalho aqui era DAR NOME ao que existe, não redesenhar. São coisas
     diferentes, e misturá-las transforma uma faxina em mudança de projeto que
     ninguém pediu e ninguém revisou. Redesenhar display pode vir depois, de
     olho na tela e uma decisão de cada vez. */
  --t-hero:    clamp(2rem, 5vw, 3.1rem);      /* o título do hero da vitrine */
  --t-secao:   clamp(1.5rem, 3.2vw, 2.1rem);  /* o h2 de seção               */
  --t-cod:     2rem;         /* o código N5…N1 no cartão de nível            */
  --t-glifo:   3rem;         /* o kanji apagado do estado vazio e da porta   */
  --t-cel:     clamp(1.5rem, 4.2vw, 2.1rem);  /* a sílaba na tabela do alfabeto */
  --t-carta:   clamp(4.5rem, 22vw, 8rem);     /* a face da carta em treino   */
  --t-carta-k: clamp(4rem, 20vw, 7rem);       /* idem, kanji (traço maior)   */
  --t-carta-t: clamp(4rem, 14vw, 6rem);       /* idem, dentro do quadro      */
  --t-carta-m: clamp(3rem, 12vw, 4.5rem);     /* a face menor, no resumo     */
  --t-marca-p: 4.5rem;       /* marca-d'água atrás do cartão de nível        */
  --t-marca-g: 6.5rem;       /* marca-d'água atrás do cartão de ferramenta   */

  --raio:   10px;
  --raio-g: 16px;
  --largura: 1120px;
}

/* ⚠️ `:not([data-tema="claro"])` e não só `:root`: sem isso, quem forçou o tema
   claro no botão veria o sistema operacional em modo escuro sobrescrever a
   escolha dele em telas cuja regra viesse depois. O botão tem de ganhar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: var(--e-papel);            --papel-2: var(--e-papel-2);
    --papel-3: var(--e-papel-3);        --tinta: var(--e-tinta);
    --tinta-media: var(--e-tinta-media); --tinta-suave: var(--e-tinta-suave);
    --linha: var(--e-linha);            --selo: var(--e-selo);
    --tinta-cheia: var(--e-tinta-cheia);
    --selo-fundo: var(--e-selo-fundo);  --indigo: var(--e-indigo);
    --musgo: var(--e-musgo);            --sombra: var(--e-sombra);
    --sombra-alta: var(--e-sombra-alta);
  }
}

/* o botão do cabeçalho força o tema, contra o que o sistema pedir.
   ⚠️ Aqui não há hex nenhum: estes blocos só apontam para os valores do topo.
   Um guarda em `ferramentas/lint.js` confere que os dois listam exatamente as
   mesmas propriedades — é a única duplicação que o CSS não deixa remover
   (não se pode reaproveitar um bloco dentro de uma media query), então a
   máquina vigia. */
:root[data-tema="escuro"] {
  --papel: var(--e-papel);            --papel-2: var(--e-papel-2);
  --papel-3: var(--e-papel-3);        --tinta: var(--e-tinta);
  --tinta-media: var(--e-tinta-media); --tinta-suave: var(--e-tinta-suave);
  --linha: var(--e-linha);            --selo: var(--e-selo);
    --tinta-cheia: var(--e-tinta-cheia);
  --selo-fundo: var(--e-selo-fundo);  --indigo: var(--e-indigo);
  --musgo: var(--e-musgo);            --sombra: var(--e-sombra);
  --sombra-alta: var(--e-sombra-alta);
}

/* ----------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  /* textura sutil de papel: duas camadas de gradiente, sem imagem externa */
  background-image:
    radial-gradient(circle at 15% 12%, rgba(178,58,47,.035), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(47,72,88,.035), transparent 46%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
/* ⚠️⚠️ DUAS VERDADES para o tamanho do título, achadas medindo em 14/08: o
   `h1` daqui valia `clamp(2rem,5vw,3.1rem)` = 49,6px a 1440, e `--t-3xl`
   valia `clamp(1.8rem,4vw,2.6rem)` = 41,6px. Toda tela com `.topo-pagina`
   usava o token; a home e o "sobre" ficavam com o padrão do elemento — e eu
   cheguei a ler os 49,6px como "tamanho de hero deliberado". Não era: era o
   padrão que ninguém tinha sobrescrito.
   ⭐ Agora o `h1` nu É o título de página, e quem quer maior pede `--t-hero`
   por nome. Um tamanho que ninguém escolheu não pode ser o padrão. */
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-secao); }
h3 { font-size: var(--t-lg); }

p { margin: 0 0 1em; }

a { color: var(--selo); text-decoration-color: color-mix(in srgb, var(--selo) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

hr { border: 0; border-top: 1px solid var(--linha); margin: 2.5rem 0; }

code { font-family: var(--mono); font-size: .9em; background: var(--papel-3); padding: .1em .35em; border-radius: 4px; }

img { max-width: 100%; }

/* japonês em serifada, sempre */
.jp { font-family: var(--serif); }

/* ⚠️ O japonês NÃO tem espaço entre palavras, então o navegador se acha livre
   para quebrar em QUALQUER caractere — e `あたらしい` partido em `あたらし` /
   `い` deixa de ser a palavra. Esta classe é para RÓTULO CURTO: palavra de
   vocabulário, kana numa célula de tabela, etiqueta.
   ⚠️⚠️ NÃO use em frase longa. Em japonês corrido a quebra em qualquer ponto
   é o comportamento certo, e o `nowrap` faria a frase estourar o layout em
   vez de descer de linha. */
.jp-junto { white-space: nowrap; }

/* ----------------------------------------------------------- layout */

.envolve {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 20px;
}

.secao { padding: 3.5rem 0; }
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.secao-titulo h2 { margin: 0; }
.secao-titulo p { margin: 0; color: var(--tinta-suave); font-size: var(--t-md); }

/* ═════════════════════════════════════════════ o TOPO DE PÁGINA (14/08) ══
   ⭐⭐ Chapéu + título + subtítulo, um componente só, montado por
   `UI.topoDaPagina()`. Antes cada tela desenhava o seu à mão, e o resultado
   medido foi: o mesmo <h1> em SEIS tamanhos (25,6 · 27,2 · 28,8 · 30,4 e
   32 px) com cinco margens diferentes, nenhum vindo da escala — todos
   digitados. Como o valor certo era digitado igual ao errado, não havia como
   ver, olhando o código, qual deles era deriva.

   🔴 E o chapéu era pior, porque a falha era invisível de propósito: a regra
   morava em `.hero .sobre-titulo`, então só valia nas TRÊS telas de vitrine
   que têm hero. Nas outras nove a classe não fazia absolutamente nada — o
   chapéu saía a 16px, preto, sem caixa alta: um texto solto acima do título,
   que ninguém lê como rótulo. A classe estava lá, escrita, aplicada, e sem
   efeito. 📌 Estilo que não pega é da mesma família do guarda cego: ocupa o
   lugar de um e não faz o trabalho de nenhum. */
.topo-pagina { margin-bottom: 1.75rem; }
.topo-pagina h1 { font-size: var(--t-3xl); margin: 0 0 .35rem; }
.topo-pagina.menor h1 { font-size: var(--t-2xl); }
.topo-pagina-sub { margin: 0; color: var(--tinta-media); max-width: 62ch; }

/* `centro` é para a tela de porta fechada, que vem num quadro centralizado.
   ⚠️ O `margin-inline: auto` não é enfeite: sem ele o `max-width: 62ch` do
   subtítulo prende o parágrafo à ESQUERDA de um quadro centralizado, e o
   texto fica torto em relação ao título logo acima. */
.topo-pagina.centro { text-align: center; }
.topo-pagina.centro .topo-pagina-sub { margin-inline: auto; }

.sobre-titulo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave); margin-bottom: .75rem;
}

.grade { display: grid; gap: 1rem; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ----------------------------------------------------------- cabeçalho */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--linha);
}
.topo-interno { display: flex; align-items: center; gap: 1.25rem; height: 64px; }

/* ========================================================================= */
/*  ⭐⭐ O FUNDO DESENHADO DA VITRINE — o encaixe, esperando o arquivo         */
/*                                                                           */
/*  Ele vai reexportar os fundos dela SEM o logo, para servirem de fundo das  */
/*  páginas do SITE — e não das telas de estudo. Este bloco é o encaixe: para */
/*  ligar, basta soltar o arquivo em `assets/marca/` e escrever UMA linha:    */
/*                                                                           */
/*      :root { --fundo-vitrine: url('../marca/fundo.png'); }                */
/*                                                                           */
/*  Enquanto a variável não existir, `none` vale e nada é pedido à rede —     */
/*  nenhum 404, nenhum quadrado quebrado.                                     */
/*                                                                           */
/*  ⚠️⚠️ O QUE O ARQUIVO PRECISA SER, e por quê:                              */
/*                                                                           */
/*   · **sem logo.** É o item que mais importa. Página web não tem altura     */
/*     fixa: um logo desenhado no canto do arquivo aparece repetido descendo  */
/*     a tela, ou esticado. Sem ele, o desenho vira textura e emenda.         */
/*   · **~1920 de largura**, e altura livre. Ele é fixado na janela           */
/*     (`fixed`), então a altura da página não o estica.                      */
/*   · **as bordas laterais precisam emendar** se for repetir na horizontal.  */
/*   · **claro e de pouco contraste.** Não por gosto: o texto do site tem     */
/*     4,5:1 garantidos contra o creme, e essa garantia morre se um desenho   */
/*     escuro passar por trás. Por isso o `opacity` abaixo, e por isso as     */
/*     seções continuam com fundo próprio — o texto nunca fica sobre a arte,  */
/*     fica sobre papel, com a arte aparecendo nas beiradas.                  */
/*                                                                           */
/*  ⚠️ `z-index: -1` + `position: fixed`: o desenho fica ATRÁS de tudo e não  */
/*  rola junto, então não há como ele passar por cima de um texto.            */
/* ========================================================================= */
/* ⭐ LIGADO em 11/08 com o `Fundo 01` que ela redesenhou sem o logo.
   Os seis arquivos têm o mesmo esqueleto — Fuji embaixo à esquerda, decoração
   nos cantos, miolo creme vazio — e é justamente essa forma que serve: o texto
   fica no meio, sobre creme, e a arte emoldura pelas bordas. */
:root { --fundo-vitrine: url('../marca/fundo-01.png'); }

body[data-camada="vitrine"]::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--fundo-vitrine, none) center center / cover no-repeat;
}

/* ========================================================================= */
/*  ⭐⭐ A FOLHA — por que o conteúdo ganhou fundo próprio                     */
/*                                                                           */
/*  ⚠️⚠️ A ideia óbvia era pôr a arte atrás de tudo e baixar a opacidade até  */
/*  "não atrapalhar". A medição matou essa ideia: o pixel mais escuro do      */
/*  desenho é #101823 (o tronco da árvore), e mesmo a **10% de opacidade** um */
/*  texto em `--tinta-suave` por cima dele dá **3,92:1** — reprova. Não       */
/*  existe opacidade que deixe a arte visível E o texto legível por cima;     */
/*  a 10% a arte já sumiu e o texto ainda não passa.                          */
/*                                                                           */
/*  ⭐ Então o texto não fica por cima. O conteúdo vira uma FOLHA opaca sobre */
/*  o desenho — que é, aliás, a metáfora que o projeto já usava sem imagem    */
/*  nenhuma (papel washi). A arte dela emoldura pelas margens e continua      */
/*  inteira; o texto continua com os 4,5:1 garantidos, porque continua sobre  */
/*  papel liso. Nenhum dos dois cede para o outro.                            */
/*                                                                           */
/*  ⚠️ Vale registrar o motivo de fundo: os arquivos dela são de SLIDE, 16:9, */
/*  e num slide a mancha de texto é estreita — sobra margem para desenho. Uma */
/*  página web usa a largura quase toda. Não é defeito da arte nem do código: */
/*  é a mesma peça em duas geometrias diferentes.                             */
/* ========================================================================= */
body[data-camada="vitrine"] main {
  background: var(--papel);
  max-width: calc(var(--largura) + 7rem);
  margin: 0 auto;
  box-shadow: 0 0 90px -30px rgba(19, 19, 19, .22);
}
/* ⚠️ No telefone a folha ocupa a tela toda e o desenho não teria onde
   aparecer — melhor assumir isso do que deixar uma faixinha de 8px. */
@media (max-width: 900px) {
  body[data-camada="vitrine"] main { max-width: none; box-shadow: none; }
  body[data-camada="vitrine"]::before { display: none; }
}
/* ⚠️ No tema escuro um fundo claro dela viraria uma mancha branca atrás de
   tudo. Baixar mais é o mínimo; se ela fizer uma versão escura, esta linha
   vira outra variável. */
:root[data-tema="escuro"] body[data-camada="vitrine"]::before { opacity: .12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) body[data-camada="vitrine"]::before { opacity: .12; }
}

/* ------------------------------------------------------- o banner (vitrine)
   ⚠️⚠️ `position: sticky` SAI no modo vitrine, e isso não é detalhe de gosto:
   um banner de 2.7:1 grudado no topo comeria um terço da tela em toda rolagem.
   Aqui o cabeçalho rola junto e a barra é alcançada voltando ao topo — que é
   o que se espera de um site, e não de um aplicativo. */
/* ⚠️⚠️ `relative` e não `static`, e a diferença aqui não é de layout — é de
   EMPILHAMENTO. Estava `static`, e **`z-index` não vale em elemento não
   posicionado**: o `z-index: 50` que o `.topo` declara logo acima ficava
   inerte, e o cabeçalho deixava de existir como camada.

   🔴 O sintoma que ele viu: o menu da conta abria ATRÁS do quadro da citação
   na home — dava para ver "Meu perfil" pela metade e não dava para clicar.

   ⚠️ E havia uma segunda causa somando, mais escondida: `.topo-acoes` tem
   `transform: translateY(-50%)`, e **`transform` diferente de `none` cria um
   contexto de empilhamento**. O `z-index: 40` da gaveta ficava preso lá
   dentro, sem alcance para passar por cima de nada da página. Medindo, o
   elemento no ponto do menu era literalmente o `frase-pt` do quadro.

   ⭐ `relative` sem deslocamento não muda um pixel de posição — só devolve ao
   cabeçalho o direito de ter camada. E como ele passa a criar o contexto, a
   gaveta vai junto. `sticky` continua fora de propósito: um banner de 2,7:1
   grudado no topo comeria um terço da tela em toda rolagem. */
.topo-vitrine {
  position: relative; z-index: 50;
  background: var(--papel-2); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ⚠️⚠️ A ARITMÉTICA QUE MANDA AQUI, e que explica a queixa dele ("o banner
   ficou muito grande, tá estranho"): a capa é **2,7 : 1**. Largura cheia numa
   tela de 1280px dá **474px de altura** — quase meia tela só de cabeçalho,
   antes de qualquer conteúdo. Trocar o arquivo não muda isso: a capa do
   LinkedIn tem a MESMA proporção da do YouTube.

   ⭐ Então a altura é fixada e a peça é cortada — não tem terceira saída para
   uma imagem 2,7:1 que precisa medir 220px. O que dá para escolher é ONDE
   cortar, e a capa do LinkedIn aguenta melhor: o texto dela é centralizado com
   folga em cima e embaixo, então some céu e sobra a mensagem.

   ⚠️ `object-position: center 58%` puxa o corte para BAIXO de propósito — é
   onde estão o logo e a colina. Centralizado puro, o logo ficava fora. */
/* ⭐ O CORTE NÃO FOI ESCOLHIDO A OLHO. Contei, linha a linha, quantos pixels
   escuros existem em cada altura da capa — é isso que revela onde está o
   conteúdo e onde está só céu:

       0–30%   céu vazio
      33–41%   "Aulas de Japonês Online"
      51–56%   "Online Japanese Lessons"
      58–79%   vazio
      81–92%   o logo e os galhos

   Ou seja: o que importa vive entre 33% e 92% — **59% da altura**, centrado
   em 62%. Daí saem os dois números abaixo, e não de tentativa e erro.

   ⭐ `aspect-ratio` em vez de `clamp(…vw…)`: como o render natural cresce com
   a largura na mesma proporção que a altura declarada, o enquadramento fica
   IDÊNTICO em qualquer tela — 1,44 : 1 do original, que é 4,55 : 1 na tela.
   Com `vw` isso só valeria por acidente, e quebraria no primeiro `clamp`. */
/* ⚠️⚠️ SEGUNDA MEDIÇÃO, porque a primeira estava incompleta: eu tinha contado
   só os pixels ESCUROS, e o logo dela é rosa claro — ele não apareceu na
   conta. Contando o rosa separado, a peça é:

       0–30%   céu vazio
      33–41%   "Aulas de Japonês Online"
      51–56%   "Online Japanese Lessons"
      76–86%   o logo (rosa — invisível para a primeira medição)

   Conteúdo real: 33% a 86%. Centro em 59,5%.

   ⚠️⚠️ E O QUE DE FATO CORTAVA O LOGO era o `max-height: 320px` que eu pus
   "por segurança". `aspect-ratio` garante o enquadramento em qualquer largura;
   `max-height` o atropela em silêncio assim que a tela passa de ~1456px:

        1280px → mostra 59% da peça (32%–92%)   cabe
        1600px → mostra 54%          (35%–89%)   corta
        1920px → mostra 45%          (40%–85%)   corta o logo E o título

   Duas regras mandando na mesma altura, e a que eu escrevi para proteger é a
   que estragava. Saiu.

   ⭐ E o banner passou a ser CONTIDO na largura do conteúdo, não sangrando de
   ponta a ponta. Três motivos, nesta ordem:
     · a altura fica FIXA (≈232px) em qualquer monitor, em vez de crescer com
       a tela — que era a queixa original ("ficou muito grande");
     · o arquivo tem 851px de largura; esticar até 1920 borra o texto, e até
       1120 quase não;
     · ⭐ ele vai trocar os fundos das páginas da vitrine. Com o banner contido,
       o desenho de fundo DELE aparece em volta — o que era limitação vira
       moldura. Quando chegar uma capa larga de verdade, voltar a sangrar é
       tirar o `max-width` daqui. */
/* ⭐⭐ A CAPA FEITA PARA O SITE (11/08) — 2560×400, 6,4:1.
   Ela reexportou a peça na proporção certa, e isso muda TUDO aqui: a regra
   deixou de ser um jogo de cortes e virou três linhas.

   ⚠️ O enquadramento seguro desta peça é o INVERSO do da capa antiga, e vale
   registrar porque é contraintuitivo:

       VERTICAL  → conteúdo de 8,3% a 93,5% da altura. Sobra 8% em cima e
                   6,5% embaixo. **Cortar altura aqui é proibido** — não há
                   folga. (Na capa do LinkedIn era o contrário: 30% de céu
                   vazio em cima pedindo para ser cortado.)
       HORIZONTAL→ texto e logo vivem entre 29% e 70% da largura; o resto é
                   céu, colina e sakura. **Cortar lateral é livre.**

   ⭐ Daí a regra: altura AUTOMÁTICA (nunca corta em cima nem embaixo) com um
   `min-height` que só entra em tela estreita — e aí o `object-fit: cover`
   corta pelos LADOS, que é onde há folga. Sem media query: a troca acontece
   sozinha quando a largura cai abaixo de ~830px, e mesmo num telefone de
   375px o corte mostra de 27% a 72% da peça — o texto inteiro cabe.

   ⚠️ Sangra de ponta a ponta e sem canto arredondado, a pedido dele: capa de
   site é faixa, não cartão. */
.banner { display: block; line-height: 0; background: var(--ao); }
.banner img {
  display: block; width: 100%;
  height: auto;          /* ⚠️ derruba o height="400" do atributo */
  /* ⭐ `min-height` só age em tela estreita, e aí o `cover` corta pelos lados.
     ⚠️ O número saiu de conta, não de gosto — e MENOR aqui significa cortar
     MENOS, o que é contraintuitivo: uma altura menor reduz a escala, então
     cabe mais peça na mesma largura. Num telefone de 360px:

         130px → mostra de 28,4% a 71,6% da peça   (texto em 29–70%: 0,6% de folga)
         120px → mostra de 26,6% a 73,4%           (2,4% de folga)  ⭐

     Ficou 120: 0,6% de margem é cabe-por-acidente, e basta ela mexer no
     tamanho do título numa próxima versão para virar corte. */
  min-height: 120px;
  object-fit: cover; object-position: center;
}

/* ⚠️ Sem a marca à esquerda, `margin-left:auto` no `.nav` empurrava tudo para
   a direita e deixava dois terços da barra vazios. Na vitrine a navegação é o
   único conteúdo da barra — então ela ocupa o centro.

   ⭐⭐ …e os TRÊS CONTROLES vão para a borda direita (pedido dele em 11/08).
   Isso não sai de `justify-content`: num flex, `margin-left:auto` no último
   item come TODO o espaço livre, e aí não sobra nada para o `center`
   distribuir — os links voltariam a ficar colados à esquerda. As duas coisas
   ao mesmo tempo (links no centro DA PÁGINA e ações na borda) só existem se as
   ações saírem do fluxo.

   ⚠️ Por isso o `position: absolute`, e por isso ele é desfeito no telefone —
   lá a barra vira coluna empilhada, e um bloco flutuando sairia da tela. */
.topo-vitrine .topo-interno { justify-content: center; position: relative; }
.topo-vitrine .nav { margin-left: 0; }
@media (min-width: 861px) {
  .topo-vitrine .topo-acoes {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    margin-left: 0;
  }
  /* ⚠️⚠️ A folga precisa ser DOS DOIS LADOS, e é isso que alinha a barra com o
     banner. A primeira versão tinha só `padding-right: 12rem`, para os links
     não passarem por baixo das ações — e folga de um lado só desloca o centro
     pela metade dela: os links ficavam **96px à esquerda** do centro da
     página, enquanto o título e o logo do banner estão no centro exato. Era
     sutil o bastante para eu não ver e claro o bastante para ele ver.

     ⭐ Simétrica, a folga continua fazendo o serviço (o menu não encosta nas
     ações) e o centro volta a ser o centro. Como o `.envolve` e a imagem do
     banner são ambos centrados na janela, os dois passam a dividir o mesmo
     eixo — que é o que ele pediu. */
  .topo-vitrine .nav { padding-left: 12rem; padding-right: 12rem; }

  /* ⚠️ ESTA RESERVA JÁ FOI INSUFICIENTE, e a história vale para quem mexer
     aqui depois: enquanto a barra logada mostrava seis peças soltas (idioma,
     tema, nível, faixa, nome, sair), elas mediam **352px** contra os 192px
     reservados — e os links passavam por baixo. Eu remendei tirando a barra
     logada do centro.

     ⭐ O menu de conta resolveu na RAIZ: as seis peças viraram uma, ~130px,
     que cabe folgado. O remendo saiu junto — 📌 conserto que torna um remendo
     desnecessário e deixa o remendo no código produz duas regras discordando
     sobre a mesma coisa, que é como este projeto colhe bug há duas semanas. */
}


/* --------------------------------------------------------------- a marca
   ⚠️ O `fill` mora AQUI, não no SVG. É esse o motivo de o símbolo ser vetor
   embutido em vez de um PNG: o rosa da marca (#E29CA3) tem 2.12:1 sobre o
   creme e não serve para desenhar linha fina legível — no claro ele precisa
   escurecer, no escuro precisa clarear. Um PNG ficaria fixo nos dois. */
.marca { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--serif); font-weight: 600; font-size: var(--t-lg); color: var(--tinta); text-decoration: none; white-space: nowrap; }
.marca:hover { color: var(--tinta); }
.marca:hover .marca-monte { fill: var(--selo); }
.marca-simbolo { height: 2.1rem; width: auto; flex: none; overflow: visible; }
.marca-monte   { fill: var(--selo); transition: fill .2s; }
/* ⚠️ o reflexo é decoração, não informação: ele pode (e deve) ter contraste
   baixo — é água. Se um dia carregar texto, tem de sair daqui. */
.marca-reflexo { fill: color-mix(in srgb, var(--selo) 30%, transparent); }
.marca-nome    { letter-spacing: .01em; }

.selo {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  background: var(--selo); color: var(--tinta-cheia);
  border-radius: 6px;
  font-family: var(--serif); font-size: 17px; line-height: 1;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--selo) 45%, transparent);
}

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
/* ⚠️⚠️ `:not(.btn)` — e esta é a linha que finalmente deixou o "Entrar"
   legível. Ele é um `<a class="btn btn-selo">` DENTRO do `<nav class="nav">`,
   e `.nav a` (especificidade 0,1,1) ganha de `.btn-selo` (0,1,0). O botão
   pedia `color: var(--tinta-cheia)` — branco — e recebia o cinza dos links de
   navegação: **1,23:1 sobre o rosa**. Praticamente invisível, no botão mais
   importante da página.

   ⭐⭐ E é o defeito mais instrutivo do dia, porque o guarda de contraste do
   `lint.js` estava CERTO e mesmo assim não viu: ele mede os VALORES que as
   variáveis têm (`--tinta-cheia` sobre `--selo` dá 5,59:1 ✔). O que ele não
   sabe é qual regra ganha a cascata na tela de verdade. Medir a paleta não é
   medir a página — são duas perguntas, e eu só tinha resposta para a
   primeira. Quem pegou esta foi ampliar um print. */
.nav a:not(.btn) {
  color: var(--tinta-media); text-decoration: none;
  padding: .45rem .7rem; border-radius: var(--raio);
  font-size: var(--t-md); white-space: nowrap;
}
.nav a:not(.btn):hover { background: var(--papel-3); color: var(--tinta); }
.nav a:not(.btn)[aria-current="page"] { color: var(--tinta); font-weight: 600; background: var(--papel-3); }
.nav .so-sensei, .nav .so-aluno { display: none; }

/* ------------------------------------------------- a gaveta de uma camada
   ⚠️ `<details>` cru: sem JavaScript nenhum, abre por clique e por teclado,
   e sobrevive a um erro de script em qualquer outra parte da página. */
.nav-grupo { position: relative; }
.nav-grupo > summary {
  list-style: none; cursor: pointer;
  color: var(--tinta-media);
  padding: .45rem .7rem; border-radius: var(--raio);
  font-size: var(--t-md); white-space: nowrap;
  border: 1px solid transparent;
}
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo > summary::after { content: ' ⌄'; opacity: .55; }
.nav-grupo > summary:hover { background: var(--papel-3); color: var(--tinta); }
.nav-grupo[open] > summary { background: var(--papel-3); color: var(--tinta); border-color: var(--linha); }
/* a camada da página em que você está fica marcada mesmo fechada */
.nav-grupo-atual > summary { color: var(--tinta); font-weight: 600; }

/* ⚠️ `left: 0` e não `right: 0`. Com `right: 0` a gaveta crescia para a
   ESQUERDA a partir da borda direita do botão — como ela é mais larga que o
   rótulo, o resultado era uma caixa desalinhada, começando antes do botão que
   a abriu. É o "tá bem torto" do print dele. Alinhada pela esquerda, ela
   parece sair do botão.
   ⚠️ `min-width: 100%` garante que nunca fique mais ESTREITA que o rótulo — o
   outro jeito de ficar torto. */
.nav-gaveta {
  position: absolute; top: calc(100% + .45rem); left: 0; z-index: 40;
  display: grid; gap: 1px; min-width: max(100%, 11rem);
  background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: .3rem;
  box-shadow: var(--sombra-alta);
}
/* ⚠️ `white-space: nowrap` + padding menor: os itens ("Alfabeto", "Cartas")
   são rótulos curtos, e o espaçamento de lista longa deixava a gaveta com
   cara de página. Menu é lista compacta. */
.nav-gaveta a { display: block; padding: .42rem .6rem; white-space: nowrap; font-size: var(--t-md); }

/* ⚠️ No telefone a barra inteira já vira uma coluna empilhada: uma gaveta
   flutuando ali dentro sairia da tela. Aqui ela é só um bloco recuado. */
@media (max-width: 860px) {
  .nav-grupo > summary { font-weight: 600; color: var(--tinta); }
  .nav-gaveta {
    position: static; box-shadow: none; border: 0; padding: 0 0 .3rem .7rem;
    background: transparent; border-left: 2px solid var(--linha);
    margin-left: .7rem; border-radius: 0;
  }
}

/* ========================================================================= */
/*  ⭐⭐ OS CONTROLES DO TOPO — uma altura só                                 */
/*                                                                           */
/*  ⚠️ A queixa dele ("os botões do nav... dar uma melhorada, principalmente  */
/*  no botão de entrar... tá bem torto") tem uma causa medível: ali havia     */
/*  TRÊS alturas lado a lado. `.btn-tema` e `.btn-idioma` mediam 34px          */
/*  fixos; o `.btn-pequeno` do "Entrar" saía de padding e dava ~31px; e a     */
/*  etiqueta de faixa, quando logado, ~22px. Cada um nasceu num dia, nenhum   */
/*  sabia do outro, e o olho lê isso como desalinhado mesmo sem saber por quê.*/
/*                                                                           */
/*  ⭐ Uma variável, e a régua passa a existir: quem entrar nesta barra       */
/*  depois herda a mesma altura em vez de inventar a sua.                     */
/* ========================================================================= */
:root { --altura-controle: 36px; }

.topo-acoes { display: flex; align-items: center; gap: .45rem; margin-left: .75rem; }
/* ⚠️⚠️ `:not(details)` — 24/08/2026. A régua vale para os CONTROLES, que têm
   tamanho fixo. Um `<details>` também é filho direto daqui (o menu da conta) e
   ele PRECISA crescer quando abre: travado em 36px, a gaveta transborda.
   Acima de 860px ninguém via, porque a gaveta é `position: absolute` e sai do
   fluxo — um `<details>` de 36px é o certo ali. Abaixo de 860px a gaveta vira
   `static`, entra no fluxo de um pai travado, escapa do painel `.nav` (que é
   quem tem o fundo opaco) e a lista aparece FLUTUANDO E TRANSPARENTE sobre a
   página. Medido: details h=36 com filho h=284, vazando 268px.
   ⭐ Quem precisa da régua no `<details>` é o `> summary`, e ele já a tem por
   conta própria (`.menu-conta > summary`). Todo `<details>` que entrar nesta
   barra deve fazer o mesmo: altura no summary, nunca no details. */
.topo-acoes > *:not(details) { height: var(--altura-controle); }
.topo-acoes .btn,
.topo-acoes .etiqueta { display: inline-flex; align-items: center; }
/* ⚠️ a etiqueta é pílula (raio 999px) e os botões são cantos de 10px — com a
   mesma altura, misturar os dois raios fica pior, não melhor */
.topo-acoes .etiqueta { border-radius: var(--raio); padding: 0 .6rem; }

/* ⭐ O "Entrar" é o único botão cheio da barra: é ele que tem de puxar o olho.
   ⚠️ O que o deixava sujo era a sombra COLORIDA que ele herdava do `.btn-selo`
   — um halo rosa embaixo de um botão rosa, sobre creme, vira borrão. Numa
   barra fina a sombra não separa nada de nada: o que separa já é a cor. */
.topo-acoes .btn-selo {
  box-shadow: none; font-weight: 600; padding: 0 1.1rem;
}
.topo-acoes .btn-selo:hover { background: color-mix(in srgb, var(--selo) 85%, var(--tinta)); }
.topo-acoes .btn-linha { padding: 0 .8rem; }

.btn-tema {
  width: var(--altura-controle); height: var(--altura-controle); flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--linha);
  border-radius: var(--raio); cursor: pointer; color: var(--tinta-media);
  font-size: 14px;
}
.btn-tema:hover { background: var(--papel-3); color: var(--tinta); }

.menu-alternar { display: none; }

@media (max-width: 860px) {
  .menu-alternar {
    display: grid; place-items: center; margin-left: auto;
    width: 34px; height: 34px; background: transparent;
    border: 1px solid var(--linha); border-radius: var(--raio);
    cursor: pointer; color: var(--tinta); font-size: 16px;
  }
  .nav {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papel); border-bottom: 1px solid var(--linha);
    padding: .5rem 20px 1rem; margin-left: 0;
    box-shadow: var(--sombra);
  }
  .nav:not(.aberto) { display: none; }
  .nav a { padding: .7rem .5rem; }
  .topo-acoes { margin-left: 0; padding-top: .5rem; border-top: 1px solid var(--linha); }
}

/* ----------------------------------------------------------- botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.3rem;
  border: 1px solid transparent; border-radius: var(--raio);
  font: inherit; font-size: var(--t-md); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-selo { background: var(--selo); color: var(--tinta-cheia); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--selo) 55%, transparent); }
.btn-selo:hover { background: color-mix(in srgb, var(--selo) 88%, var(--tinta)); color: var(--tinta-cheia); }
/* a resposta CERTA de um exercício — verde, e sempre marcada mesmo quando o
   aluno errou: ver o certo ao lado do que ele marcou é o que ensina */
.btn-musgo { background: var(--musgo); color: var(--tinta-cheia); border-color: var(--musgo); }
.btn-musgo:hover { background: color-mix(in srgb, var(--musgo) 88%, var(--tinta)); color: var(--tinta-cheia); }
.btn-linha { background: transparent; border-color: var(--linha); color: var(--tinta); }
.btn-linha:hover { background: var(--papel-3); border-color: var(--tinta-suave); color: var(--tinta); }
.btn-suave { background: var(--papel-3); color: var(--tinta); }
.btn-suave:hover { background: var(--linha); color: var(--tinta); }
.btn-pequeno { padding: .4rem .8rem; font-size: var(--t-sm); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------- cartões */

.cartao {
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 1.25rem;
  box-shadow: var(--sombra);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.cartao { text-decoration: none; color: inherit; display: block; }
a.cartao:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--selo) 30%, var(--linha)); }

.cartao h3 { margin: .35rem 0 .35rem; font-size: var(--t-lg); }
.cartao p { margin: 0; color: var(--tinta-media); font-size: var(--t-md); }
.cartao-rodape { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--linha); font-size: var(--t-sm); color: var(--tinta-suave); }

/* cartão de nível (N5…N1) */
.cartao-nivel { position: relative; overflow: hidden; }
.cartao-nivel .cod {
  font-family: var(--serif); font-size: var(--t-cod); font-weight: 600;
  color: var(--selo); line-height: 1;
}
.cartao-nivel .kanji {
  position: absolute; right: -.15em; bottom: -.35em;
  font-family: var(--serif); font-size: var(--t-marca-p); line-height: 1;
  color: var(--tinta); opacity: .06; pointer-events: none; user-select: none;
}

/* ----------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .55rem;
  border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--linha); background: var(--papel-3); color: var(--tinta-media);
  white-space: nowrap;
}
.etiqueta-selo   { background: var(--selo-fundo); border-color: color-mix(in srgb, var(--selo) 25%, transparent); color: var(--selo); }
.etiqueta-indigo { background: color-mix(in srgb, var(--indigo) 12%, transparent); border-color: color-mix(in srgb, var(--indigo) 28%, transparent); color: var(--indigo); }
.etiqueta-musgo  { background: color-mix(in srgb, var(--musgo) 14%, transparent); border-color: color-mix(in srgb, var(--musgo) 30%, transparent); color: var(--musgo); }

/* ⭐ Link de tela trancada: ele CONTINUA na barra, apagado e com cadeado.
   Sumir com o link esconde que a coisa existe — e o que a pessoa não sabe
   que existe ela não assina. Clicar leva ao mapa dos planos, não a um erro. */
.nav-trancado { opacity: .5; }
.nav-trancado:hover { opacity: .85; }

/* o mapa dos planos: uma coluna por faixa, a sua em destaque */
.faixas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.faixa-col { border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.1rem; background: var(--papel-2); }
.faixa-col.minha { border-color: var(--selo); box-shadow: 0 0 0 1px var(--selo); }
.faixa-col h3 { margin: 0 0 .2rem; font-size: var(--t-base); }
.faixa-col .preco { font-size: var(--t-xs); color: var(--tinta-suave); margin: 0 0 .8rem; }
.faixa-col ul { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); }
.faixa-col li { padding: .3rem 0; border-top: 1px dashed var(--linha); color: var(--tinta-media); }
.faixa-col li:first-child { border-top: 0; }
.faixa-col li.nao { opacity: .35; }

/* tabela simples de leitura (o mapa dos planos). Fica dentro de um
   contêiner com overflow-x, senão o celular rola a página inteira de lado. */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.tabela td { padding: .6rem .7rem; border-top: 1px solid var(--linha); vertical-align: top; }
.tabela tr:first-child td { border-top: 0; }
.tabela td:nth-child(2) { color: var(--tinta-media); }
.tabela code { font-size: var(--t-sm); background: var(--papel-3); padding: .1rem .35rem; border-radius: 4px; }

.etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ----------------------------------------------------------- hero */

.hero { padding: 4.5rem 0 3rem; position: relative; }
.hero-grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .hero-grade { grid-template-columns: 1fr; gap: 2rem; } }

.hero .sobre-titulo { margin-bottom: 1rem; }
/* ⭐ `balance` distribui as linhas do título em vez de encher a primeira e
   jogar o resto na última — é o que impede a palavra órfã sozinha embaixo.
   ⚠️ Onde não houver suporte, o texto simplesmente quebra como sempre quebrou:
   é melhoria que degrada sozinha, não dependência. */
.hero h1 { font-size: var(--t-hero); margin-bottom: .5rem; text-wrap: balance; }
.topo-pagina h1 { text-wrap: balance; }
.hero h1 .jp { display: block; font-size: .48em; color: var(--selo); letter-spacing: .08em; margin-bottom: .35rem; font-weight: 500; }
.hero .chamada { font-size: var(--t-lg); color: var(--tinta-media); max-width: 46ch; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* painel decorativo do hero: "caderno" com uma frase de exemplo */
.hero-quadro {
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 1.75rem;
  box-shadow: var(--sombra-alta);
  position: relative;
  overflow: hidden;   /* para o filete de cor acompanhar o canto arredondado */
}
/* ⚠️ Aqui havia um 印 vermelho colado no canto do quadro — resto do selo
   inventado que servia de logo antes de a marca dela existir. Com o símbolo
   real no cabeçalho, esse quadradinho virou uma segunda marca competindo com
   a primeira, e das duas a falsa era a mais chamativa. ⭐ No lugar dele, um
   traço fino na cor da marca: acento sem fingir ser identidade. */
.hero-quadro::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--pinku), var(--ao) 55%, var(--midori));
}
.frase-jp { font-family: var(--serif); font-size: var(--t-2xl); line-height: 2.1; margin: 0 0 .25rem; }
.frase-jp ruby rt { font-size: .45em; color: var(--tinta-suave); }
.frase-pt { color: var(--tinta-suave); font-size: var(--t-md); margin: 0; }
.frase-nota { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--linha); font-size: var(--t-md); color: var(--tinta-media); }

/* ----------------------------------------------------------- faixa de estatística */

.faixa { display: flex; flex-wrap: wrap; gap: 2.5rem; padding: 1.5rem 0; border-block: 1px solid var(--linha); }
.faixa div { display: flex; flex-direction: column; }
.faixa .num { font-family: var(--serif); font-size: var(--t-2xl); color: var(--tinta); line-height: 1.1; }
.faixa .rot { font-size: var(--t-sm); color: var(--tinta-suave); }

/* ----------------------------------------------------------- filtros */

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1.5rem; }
.filtro {
  padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--papel-2);
  color: var(--tinta-media); font: inherit; font-size: var(--t-sm); cursor: pointer;
}
.filtro:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.filtro[aria-pressed="true"] { background: var(--selo); border-color: var(--selo); color: var(--tinta-cheia); }
.filtros-rotulo { font-size: var(--t-xs); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; margin-right: .35rem; }

.busca {
  flex: 1; min-width: 200px;
  padding: .5rem .9rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-2); color: var(--tinta); font: inherit; font-size: var(--t-md);
}
.busca:focus { outline: 2px solid color-mix(in srgb, var(--selo) 40%, transparent); outline-offset: 1px; border-color: var(--selo); }

/* ----------------------------------------------------------- cadeado / bloqueio */

.bloqueado { position: relative; }
.bloqueado .cartao-corpo { opacity: .55; }

.aviso-bloqueio {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--selo-fundo);
  border: 1px dashed color-mix(in srgb, var(--selo) 35%, transparent);
  border-radius: var(--raio-g);
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}
.aviso-bloqueio .txt { flex: 1; min-width: 240px; }
.aviso-bloqueio strong { display: block; font-family: var(--serif); font-size: var(--t-base); }
.aviso-bloqueio p { margin: .15rem 0 0; font-size: var(--t-md); color: var(--tinta-media); }

/* ----------------------------------------------------------- progresso */

.barra { height: 7px; background: var(--papel-3); border-radius: 999px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--selo); border-radius: 999px; transition: width .4s ease; }
.barra.musgo span { background: var(--musgo); }

.linha-progresso { display: flex; align-items: center; gap: .75rem; }
.linha-progresso .barra { flex: 1; }
.linha-progresso .pct { font-size: var(--t-sm); color: var(--tinta-suave); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* ----------------------------------------------------------- tabela */

.rolagem-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-md); min-width: 620px; }
table.tabela th, table.tabela td { text-align: left; padding: .8rem .75rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.tabela th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); font-weight: 600; }
table.tabela tbody tr:hover { background: var(--papel-2); }

.aluno-nome { display: flex; align-items: center; gap: .7rem; }
.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papel-3); border: 1px solid var(--linha);
  font-family: var(--serif); font-size: var(--t-md); color: var(--tinta-media);
}

/* ----------------------------------------------------------- lição */

.licao-cabeca { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--linha); }
.migalha { font-size: var(--t-sm); color: var(--tinta-suave); margin-bottom: .75rem; }
.migalha a { color: var(--tinta-suave); }

.licao-grade { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 3rem; padding: 2.5rem 0; align-items: start; }
@media (max-width: 940px) { .licao-grade { grid-template-columns: 1fr; gap: 2rem; } }

.lateral { position: sticky; top: 84px; display: grid; gap: 1rem; }

.ponto {
  background: var(--papel-2); border: 1px solid var(--linha);
  border-left: 3px solid var(--selo);
  border-radius: var(--raio); padding: 1rem 1.15rem; margin-bottom: .85rem;
}
.ponto .forma { font-family: var(--serif); font-size: var(--t-lg); margin-bottom: .2rem; }
.ponto .uso { font-size: var(--t-md); color: var(--tinta-media); margin: 0 0 .6rem; }
.ponto .ex { font-family: var(--serif); font-size: var(--t-base); margin: 0; }
.ponto .ex-pt { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0; }

.nota-sensei {
  background: color-mix(in srgb, var(--indigo) 7%, var(--papel-2));
  border: 1px solid color-mix(in srgb, var(--indigo) 22%, transparent);
  border-radius: var(--raio-g); padding: 1.2rem 1.35rem;
}
.nota-sensei .quem { display: flex; align-items: center; gap: .55rem; font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--indigo); margin-bottom: .5rem; }
.nota-sensei p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- exercícios */

.exercicio { border: 1px solid var(--linha); background: var(--papel-2); border-radius: var(--raio-g); padding: 1.35rem; margin-bottom: 1rem; }
.exercicio .enunciado { font-family: var(--serif); font-size: var(--t-lg); margin-bottom: .9rem; }
.opcoes { display: grid; gap: .5rem; }
.opcao {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .9rem; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); cursor: pointer; font: inherit; text-align: left; color: var(--tinta);
  transition: border-color .12s ease, background .12s ease;
}
.opcao:hover { border-color: var(--tinta-suave); }
.opcao .letra { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--papel-3); font-size: var(--t-xs); color: var(--tinta-suave); }
.opcao[data-estado="certo"] { border-color: var(--musgo); background: color-mix(in srgb, var(--musgo) 12%, var(--papel)); }
.opcao[data-estado="certo"] .letra { background: var(--musgo); color: var(--tinta-cheia); }
.opcao[data-estado="errado"] { border-color: var(--selo); background: color-mix(in srgb, var(--selo) 10%, var(--papel)); }
.opcao[data-estado="errado"] .letra { background: var(--selo); color: var(--tinta-cheia); }
.opcao:disabled { cursor: default; }
.retorno { margin-top: .8rem; font-size: var(--t-md); color: var(--tinta-media); display: none; }
.retorno.visivel { display: block; }

/* ----------------------------------------------------------- formulário */

.campo { display: grid; gap: .35rem; margin-bottom: 1rem; }
.campo label { font-size: var(--t-sm); color: var(--tinta-media); font-weight: 500; }
.campo input, .campo select, .campo textarea {
  padding: .65rem .85rem; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-2); color: var(--tinta); font: inherit; font-size: var(--t-md); width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--selo) 35%, transparent); outline-offset: 1px; border-color: var(--selo);
}

.caixa-central { max-width: 420px; margin: 4rem auto; }

/* ----------------------------------------------------------- diversos */

.vazio { text-align: center; padding: 3rem 1rem; color: var(--tinta-suave); }
/* ⚠️⚠️ Esta regra era `.vazio .kanji-grande`, presa ao estado vazio — e o
   MESMO desenho aparece em mais seis lugares (as portas "só a sensei", o
   curso vazio, o aviso de chave), todos com
   `style="font-size:var(--t-glifo);opacity:.25;display:block"` DIGITADO à mão. Um deles
   já escrevia `class="kanji-grande"` e repetia o estilo por cima, porque a
   classe não pegava fora do `.vazio`.
   📌 É o mesmo defeito do `.hero .sobre-titulo`: a regra existia, o nome
   existia, e o seletor a trancava onde ninguém ia usá-la. Agora é solta. */
.kanji-grande { font-family: var(--serif); font-size: var(--t-glifo); opacity: .25; display: block; margin-bottom: .5rem; }

/* ========================================================================= */
/*  ⭐⭐ OS ELEMENTOS DELA — a serra no rodapé                                */
/*                                                                           */
/*  Ele perguntou se dava para usar os 6 "fundos" que ela desenhou. A         */
/*  resposta honesta é: não como fundo de página. Aqueles arquivos são        */
/*  MODELOS DE SLIDE — 1920×1080 fixos, com o logo dela já desenhado num      */
/*  canto e o Fuji noutro. Uma página da web não tem altura fixa: repetindo,  */
/*  o logo dela apareceria empilhado quatro vezes descendo a tela; esticando, */
/*  a montanha deformaria. E qualquer desenho ATRÁS de texto derruba o        */
/*  contraste que o guarda em `testes/lint.js` acabou de garantir.            */
/*                                                                           */
/*  ⭐ O que serve são os ELEMENTOS soltos, que ela mandou em PNG             */
/*  transparente: `montanhas.png` é uma silhueta de 2716×268 feita para       */
/*  repetir na horizontal — exatamente uma faixa. Aqui ela fecha o rodapé,    */
/*  que é o único lugar da página sem texto de leitura por baixo.             */
/*                                                                           */
/*  ⚠️ `pointer-events: none` porque é decoração: os links do rodapé passam   */
/*  por baixo dela e continuam clicáveis.                                     */
/* ========================================================================= */
.rodape {
  border-top: 1px solid var(--linha);
  padding: 4.5rem 0 2rem; margin-top: 3rem;
  color: var(--tinta-suave); font-size: var(--t-sm);
  position: relative; overflow: hidden;
}
.rodape::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60px;
  pointer-events: none;
  background: url('../marca/montanhas.png') repeat-x bottom center;
  background-size: auto 100%;
  opacity: .5;
}
/* ⚠️ No tema escuro a silhueta é preta sobre fundo preto: some. Inverter e
   baixar a opacidade devolve a forma sem virar um borrão claro. */
:root[data-tema="escuro"] .rodape::before { filter: invert(1); opacity: .16; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .rodape::before { filter: invert(1); opacity: .16; }
}

/* Grid com colunas explícitas: o flex antigo distribuía sobra com
   space-between e as colunas caíam desalinhadas ao quebrar. */
.rodape-grade {
  display: grid;
  align-items: start;
  gap: 2.25rem 2rem;
  grid-template-columns: 1.5fr repeat(4, minmax(110px, 1fr));
}

/* a partir daqui a marca ocupa a linha inteira e as colunas viram uma grade
   regular — nada de coluna órfã do lado do texto da marca */
@media (max-width: 1000px) {
  .rodape-grade { grid-template-columns: repeat(4, 1fr); }
  .rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 720px) { .rodape-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .rodape-grade { grid-template-columns: 1fr; } }

.rodape h4 { font-family: var(--sans); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); margin: 0 0 .7rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.rodape a { color: var(--tinta-media); text-decoration: none; }
.rodape a:hover { color: var(--selo); }

.rodape-marca .marca { margin-bottom: .75rem; }
.rodape .credito { max-width: 38ch; margin: 0; }

/* faixa legal: separada, largura de leitura, e o nome do arquivo pode quebrar */
.rodape-legal {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  display: grid; gap: .6rem;
  max-width: 78ch;
  font-size: var(--t-xs); line-height: 1.6;
}
.rodape-legal p { margin: 0; }
.rodape-legal code { font-size: .95em; overflow-wrap: anywhere; }

/* ═══════════════════════════════ as PORTAS entre as duas casas (14/08) ═══
   ⭐ São duas, e de peso deliberadamente diferente:

   `.porta-estudo` — da vitrine para a plataforma. É BOTÃO, porque é a ação
   que a vitrine inteira existe para provocar.
   `.porta-site` — da plataforma de volta para o site. É LINK discreto, porque
   quem está estudando não deve ser convidado a sair a cada tela. Ela existe
   para não prender ninguém, não para ser usada.

   📌 Duas portas com o mesmo peso visual seriam duas saídas — e aí a
   separação viraria só mais uma barra com tudo, que é de onde a gente veio. */
.porta-site {
  font-size: var(--t-sm); color: var(--tinta-suave); text-decoration: none;
  white-space: nowrap;
}
.porta-site:hover { color: var(--tinta); text-decoration: underline; }

/* ─── o rodapé de dentro: marca, uma porta e a atribuição de licença ───
   ⚠️ GRADE e não flex, e o motivo é uma armadilha real: a atribuição tem
   `max-width: 78ch` para continuar legível, e no flex o `max-width` LIMITA o
   tamanho hipotético que o algoritmo usa para decidir a quebra de linha —
   então `flex-basis: 100%` ficava aplicado e não quebrava nada. Medido: o
   bloco declarava base 100% e desenhava 613px, ao lado dos outros dois.
   Na grade a coluna inteira é dita, e a largura de leitura continua valendo. */
.rodape-enxuto {
  display: grid; grid-template-columns: 1fr auto;
  gap: 1rem 1.25rem; align-items: center; padding-block: .5rem;
}
.rodape-enxuto .rodape-marca { min-width: 0; }
.rodape-enxuto .rodape-marca .credito { margin: .4rem 0 0; max-width: 44ch; }
/* a atribuição do KanjiVG é obrigação de licença (CC BY-SA), não enfeite:
   ela ocupa a linha inteira em vez de disputar espaço com a única ação daqui */
.rodape-enxuto .rodape-legal { grid-column: 1 / -1; margin-top: .25rem; }
@media (max-width: 620px) {
  .rodape-enxuto { grid-template-columns: 1fr; }
  .rodape-enxuto .porta-site { justify-self: start; }
}

.aviso-proto {
  background: var(--papel-3); border-top: 1px solid var(--linha);
  font-size: var(--t-xs); color: var(--tinta-suave); text-align: center; padding: .55rem 20px;
}

/* ═══════════════════════════════════════════ o que só vale na demonstração ══
   ⭐⭐ `data-so-demo` marca o que é VERDADE apenas quando não há servidor: o
   aviso do rodapé, o quadro "isto grava só neste navegador" da tela dela, a
   dica de "senha em texto puro" e o link "Reiniciar demonstração" — que, com
   servidor, limpava o localStorage, recarregava a página e não tocava em nada.

   ⚠️⚠️ A ORDEM DAS DUAS REGRAS É O PONTO, e não é preferência de estilo:
   nasce ESCONDIDO e só aparece quando `ui.js` confirma que NÃO há servidor.
   O contrário (nasce visível, some depois) faria a plataforma no ar piscar
   "isto é um protótipo" na cara da sensei em toda navegação — e a resposta
   demora justamente quando a rede está ruim, que é quando ela mais duvidaria.
   Errar para o lado de esconder um aviso verdadeiro num protótipo é barato;
   errar para o lado de mostrar um aviso falso em produção é o que já custou. */
[data-so-demo] { display: none; }
body[data-demo="sim"] [data-so-demo] { display: revert; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===========================================================
   Treino de cartas (kana / kanji)
   =========================================================== */

.treino { max-width: 640px; margin: 0 auto; }

.treino-topo { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.treino-topo .contador { font-size: var(--t-sm); color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }

.carta {
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta);
  padding: 2.5rem 1.5rem;
  text-align: center;
  position: relative;
}
.carta[data-veredito="certo"]  { border-color: var(--musgo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--musgo) 18%, transparent), var(--sombra-alta); }
.carta[data-veredito="errado"] { border-color: var(--selo);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--selo) 18%, transparent), var(--sombra-alta); }

.carta-frente {
  font-family: var(--serif);
  font-size: var(--t-carta);
  line-height: 1.1;
  margin: 0 0 .25rem;
  color: var(--tinta);
  user-select: none;
}
.carta-frente.kanji { font-size: var(--t-carta-k); }
.carta-legenda { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 1.5rem; }

.resposta {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit; font-size: var(--t-xl); text-align: center;
  border: 2px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
  letter-spacing: .05em;
}
.resposta:focus { outline: none; border-color: var(--selo); }
.resposta[data-veredito="certo"]  { border-color: var(--musgo); }
.resposta[data-veredito="errado"] { border-color: var(--selo); }

.veredito { min-height: 4.5rem; margin-top: 1rem; font-size: var(--t-md); }
.veredito .cabeca { font-family: var(--serif); font-size: var(--t-lg); margin-bottom: .2rem; }
.veredito .certo  { color: var(--musgo); }
.veredito .errado { color: var(--selo); }
.veredito .dica   { color: var(--tinta-media); font-size: var(--t-md); }
.veredito .par    { color: var(--tinta-suave); font-size: var(--t-md); margin-top: .3rem; }

/* modo flashcard: a resposta fica escondida até revelar */
.verso { display: none; padding-top: 1rem; border-top: 1px dashed var(--linha); margin-top: 1rem; }
.verso.aberto { display: block; }
.verso .leitura { font-family: var(--serif); font-size: var(--t-kana); margin: 0 0 .3rem; }
.verso .sig { color: var(--tinta-media); }

.acoes-carta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }

/* ------------------------------------------------------ seleção de cartas */

.abas { display: flex; gap: .3rem; border-bottom: 1px solid var(--linha); margin-bottom: 1.75rem; flex-wrap: wrap; }
.aba {
  padding: .65rem 1.1rem; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--tinta-suave); font: inherit; font-size: var(--t-md); cursor: pointer;
}
.aba:hover { color: var(--tinta); }
.aba[aria-selected="true"] { color: var(--selo); border-bottom-color: var(--selo); font-weight: 600; }

.familia { margin-bottom: 2rem; }
.familia-cabeca { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.familia-cabeca h3 { margin: 0; font-size: var(--t-base); }
.familia-cabeca p { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.familia-cabeca button { margin-left: auto; }

.grade-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .6rem; }

.grupo {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem; text-align: left;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-2); color: var(--tinta); font: inherit; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.grupo:hover { border-color: var(--tinta-suave); }
.grupo[aria-pressed="true"] { border-color: var(--selo); background: var(--selo-fundo); }
.grupo .amostra { font-family: var(--serif); font-size: var(--t-xl); line-height: 1; color: var(--selo); flex: none; }
.grupo .rot { display: block; font-size: var(--t-md); font-weight: 600; }
.grupo .sub { display: block; font-size: var(--t-xs); color: var(--tinta-suave); }
.grupo[aria-pressed="true"] .sub { color: color-mix(in srgb, var(--selo) 70%, var(--tinta-media)); }

.barra-fixa {
  position: sticky; bottom: 0; z-index: 20;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linha);
  padding: .9rem 0; margin-top: 2rem;
}
.barra-fixa-interno { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.barra-fixa .resumo { font-size: var(--t-md); color: var(--tinta-media); }
.barra-fixa .acoes { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }

/* ===========================================================
   Trilha (roadmap)
   =========================================================== */

.unidade { margin-bottom: 2.5rem; }
.unidade-cabeca { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.unidade-icone {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--selo); color: var(--tinta-cheia);
  font-family: var(--serif); font-size: var(--t-2xl); line-height: 1;
  box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--selo) 50%, transparent);
}
.unidade.trancada .unidade-icone { background: var(--papel-3); color: var(--tinta-suave); box-shadow: none; }
.unidade.completa .unidade-icone { background: var(--musgo); box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--musgo) 50%, transparent); }
.unidade-cabeca h2 { margin: 0 0 .15rem; font-size: var(--t-xl); }
.unidade-cabeca p { margin: 0; font-size: var(--t-md); color: var(--tinta-media); }
.unidade-cabeca .contagem { margin-left: auto; text-align: right; flex: none; font-size: var(--t-sm); color: var(--tinta-suave); }

.passos { display: grid; gap: .6rem; padding-left: 26px; position: relative; }
/* a linha vertical que liga os passos */
.passos::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: var(--linha); border-radius: 2px;
}

/* ---------------------------------------------------------- tela Sobre */

/* ⚠️ A citação é da PROFESSORA, não copy nossa — por isso ela é marcada como
   citação de verdade (`<blockquote>` + o nome), e não só um parágrafo maior.
   A diferença importa: quem lê precisa saber de quem é a frase. */
.citacao { margin: 1.4rem 0; padding-left: 1.1rem; border-left: 3px solid var(--selo); }
.citacao-texto {
  font-family: var(--serif); font-size: var(--t-xl); line-height: 1.45;
  color: var(--tinta); margin: 0;
}
.citacao-quem {
  margin-top: .5rem; font-size: var(--t-sm);
  color: var(--tinta-suave); letter-spacing: .06em; text-transform: uppercase;
}

/* o retrato dela. ⚠️ `aspect-ratio` + `object-fit` para o corte ser sempre o
   mesmo: sem isso, uma foto que ela troque amanhã com outra proporção
   desmonta a coluna inteira. */
.retrato { margin: 0; display: grid; gap: .9rem; justify-items: center; align-items: start; text-align: center; }
/* ⚠️⚠️ `height: auto` é a linha que faz esta foto ser quadrada, e custou duas
   tentativas erradas até eu parar de adivinhar e MEDIR o estilo computado.

   O `<img>` traz `width="640" height="640"` no HTML — atributos que existem
   por um bom motivo (o navegador reserva o espaço antes de a imagem chegar, e
   a página não pula). O que eu não tinha em conta é que esses atributos são
   **dicas de apresentação**: viram CSS de verdade. Como a minha regra definia
   `width` e não definia `height`, sobrava um `height: 640px` vindo do
   atributo — e altura explícita GANHA do `aspect-ratio`. Resultado: 320×640.

   📌 A regra geral, que vale para toda imagem deste projeto: se você mexe na
   largura de um `<img>` pelo CSS, escreva `height: auto` junto. Foi o que o
   `.banner img` já fazia, e por isso ele nunca deu problema.

   ⚠️ As duas hipóteses que testei antes disto estavam erradas: `align-content`
   (que distribui linhas, não dimensiona item) e `align-items` (que dimensiona,
   mas perde para uma altura explícita). Nenhuma das duas era o assunto. */
.retrato img {
  width: min(100%, 20rem); height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--raio-g);
  border: 4px solid var(--papel-2);
  box-shadow: var(--sombra-alta);
}

.convite { text-align: center; display: grid; gap: 1.2rem; justify-items: center; }

/* o número do passo, quando a lista é ordenada e a ordem importa */
.passo-n {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--selo-fundo); color: var(--selo);
  font-family: var(--serif); font-size: var(--t-sm); font-weight: 600;
}

.passo {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1.1rem;
  background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: var(--raio); text-decoration: none; color: inherit;
  position: relative;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.passo::before {
  content: ''; position: absolute; left: -30px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--papel); border: 2px solid var(--linha);
}
.passo[data-estado="liberado"] { border-color: color-mix(in srgb, var(--selo) 40%, var(--linha)); }
.passo[data-estado="liberado"]::before { background: var(--selo); border-color: var(--selo); }
.passo[data-estado="feito"]::before { background: var(--musgo); border-color: var(--musgo); }
.passo[data-estado="trancado"] { opacity: .55; cursor: not-allowed; }
a.passo:hover { transform: translateX(2px); box-shadow: var(--sombra); }

.passo .marca-passo {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: var(--papel-3); color: var(--tinta-media);
  font-family: var(--serif); font-size: var(--t-base);
}
.passo[data-estado="feito"] .marca-passo { background: var(--musgo); color: var(--tinta-cheia); }
.passo[data-estado="liberado"] .marca-passo { background: var(--selo-fundo); color: var(--selo); }
.passo .txt { flex: 1; min-width: 0; }
.passo .txt strong { display: block; font-size: var(--t-base); font-weight: 600; }
.passo .txt span { display: block; font-size: var(--t-sm); color: var(--tinta-suave); }
.passo .fim { flex: none; font-size: var(--t-xs); color: var(--tinta-suave); }

/* ===========================================================
   Seletor de escrita (só kana / furigana / kanji)
   =========================================================== */

.seletor-escrita { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.seletor-escrita .rot { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); margin-right: .25rem; }
.seletor-escrita .filtro { padding: .3rem .6rem; font-size: var(--t-md); line-height: 1.2; }
.seletor-escrita .auto { font-size: var(--t-xs); color: var(--tinta-suave); margin-left: .35rem; }

/* furigana: a leitura por cima, discreta o bastante para não competir */
ruby { ruby-position: over; }
ruby rt { font-size: .5em; color: var(--tinta-suave); font-weight: 400; letter-spacing: 0; }
.ponto .ex ruby rt, .enunciado ruby rt { font-size: .45em; }
/* respiro extra: sem isso a linha com furigana encosta na de cima */
.ponto .ex:has(ruby), .enunciado:has(ruby) { line-height: 2.1; }

/* ===========================================================
   Tabela do alfabeto
   =========================================================== */

.tabela-kana { display: grid; gap: .4rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tabela-kana.estreita { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }

.cel {
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .1rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-2); color: var(--tinta);
  cursor: pointer; font: inherit; padding: .2rem;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cel:hover { transform: translateY(-2px); border-color: var(--selo); background: var(--selo-fundo); }
.cel[aria-pressed="true"] { border-color: var(--selo); background: var(--selo-fundo); box-shadow: 0 0 0 2px color-mix(in srgb, var(--selo) 25%, transparent); }
.cel .car { font-family: var(--serif); font-size: var(--t-cel); line-height: 1.1; }
.cel .rom { font-size: var(--t-xs); color: var(--tinta-suave); letter-spacing: .04em; }
.cel.vazia { border-style: dashed; opacity: .35; cursor: default; }
.cel.vazia:hover { transform: none; border-color: var(--linha); background: var(--papel-2); }

.linha-kana { display: contents; }

.legenda-linha {
  grid-column: 1 / -1; margin-top: .85rem; margin-bottom: .1rem;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave);
}
.legenda-linha:first-child { margin-top: 0; }

/* --------- painel de detalhe --------- */

/* O painel do caractere rola POR DENTRO.
   Antes ele era só `sticky`: quando o conteúdo passava da altura da tela, a
   pessoa tinha que rolar a PÁGINA para ler o resto — e aí a sílaba destacada
   no grid saía de vista, que é justamente a referência que ela precisa ver. */
.detalhe {
  max-height: calc(100vh - 104px);   /* 84px do topo grudado + 20px de respiro */
  overflow-y: auto;
  overscroll-behavior: contain;      /* ao chegar no fim, NÃO empurra a página */
  scrollbar-width: thin;
  scrollbar-color: var(--linha) transparent;
}

/* barra de rolagem discreta, no tom do papel (WebKit) */
.detalhe::-webkit-scrollbar { width: 10px; }
.detalhe::-webkit-scrollbar-track { background: transparent; }
.detalhe::-webkit-scrollbar-thumb {
  background: var(--linha); border-radius: 999px;
  border: 3px solid var(--papel-2);   /* afina o polegar sem sumir com ele */
}
.detalhe::-webkit-scrollbar-thumb:hover { background: var(--tinta-suave); }

/* ⭐ o caractere e a leitura ficam presos no topo enquanto o resto rola —
   é a referência que a pessoa consulta lendo "como escrever" */
.detalhe-fixo {
  position: sticky; top: 0; z-index: 2;
  background: var(--papel-2);
  padding-bottom: .85rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--linha);
}

/* empilhado (uma coluna só): o painel volta a fluir com a página */
@media (max-width: 940px) {
  .detalhe { max-height: none; overflow-y: visible; }
  .detalhe-fixo { position: static; border-bottom: 0; padding-bottom: 0; }
}

.quadro-treino {
  width: 100%; max-width: 190px; margin: 0 auto 1rem;
  aspect-ratio: 1; position: relative;
  border: 2px solid var(--linha); border-radius: var(--raio);
  background: var(--papel);
  display: grid; place-items: center;
}
/* as guias tracejadas do caderno de caligrafia (田) */
.quadro-treino::before, .quadro-treino::after {
  content: ''; position: absolute; background: var(--linha);
}
.quadro-treino::before { left: 0; right: 0; top: 50%; height: 1px; }
.quadro-treino::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.quadro-treino .car {
  font-family: var(--serif); font-size: var(--t-carta-t); line-height: 1;
  position: relative; z-index: 1; color: var(--tinta);
}
.quadro-treino.calcar .car { color: var(--tinta); opacity: .18; }

.detalhe-linha { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linha); font-size: var(--t-md); }
.detalhe-linha:last-child { border-bottom: 0; }
.detalhe-linha dt { color: var(--tinta-suave); margin: 0; flex: none; }
.detalhe-linha dd { margin: 0; text-align: right; }

.aviso-escrita {
  background: var(--papel-3); border: 1px dashed var(--linha);
  border-radius: var(--raio); padding: .85rem 1rem;
  font-size: var(--t-sm); color: var(--tinta-media); margin-top: 1rem;
}

/* ===========================================================
   Traçado animado (dados do KanjiVG, CC BY-SA 3.0)
   =========================================================== */

.tracado {
  width: 100%; max-width: 190px; display: block; margin: 0 auto;
  background: var(--papel);
  border: 2px solid var(--linha); border-radius: var(--raio);
}

.tracado-guias rect { fill: none; stroke: var(--linha); stroke-width: 1; }
.tracado-guias line { stroke: var(--linha); stroke-width: 1; stroke-dasharray: 4 4; }

.tracado .traco {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* o traço em curso fica vermelho; ao terminar, vira tinta */
.tracado .traco:not(.pronto) { stroke: var(--selo); }

.tracado-numeros text {
  font-family: var(--sans); font-size: 7px; font-weight: 700;
  fill: var(--selo); opacity: 0;
  transition: opacity .2s ease;
  paint-order: stroke;
  stroke: var(--papel); stroke-width: 2.5px; stroke-linejoin: round;
}
.tracado-numeros text.pronto { opacity: .85; }
.tracado.sem-numeros .tracado-numeros { display: none; }

.tracado-vazio {
  padding: 2rem 1rem; text-align: center;
  color: var(--tinta-suave); font-size: var(--t-md);
  border: 1px dashed var(--linha); border-radius: var(--raio);
}

.tracado-acoes { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: .9rem; }

.credito-licenca {
  font-size: var(--t-xs); color: var(--tinta-suave); line-height: 1.5;
  border-top: 1px solid var(--linha); padding-top: .8rem; margin-top: 1rem;
}
.credito-licenca a { color: var(--tinta-media); }

/* modo calcar: traço clarinho, para o aluno passar por cima no papel */
.tracado.calcar .traco { stroke: var(--tinta); opacity: .16; }
.tracado.calcar .tracado-numeros text { opacity: .35; }

/* o botão "Calcar"/"Números" quando ligado */
.tracado-acoes .btn[aria-pressed="true"] {
  background: var(--selo-fundo);
  border-color: color-mix(in srgb, var(--selo) 40%, transparent);
  color: var(--selo);
}

/* ===========================================================
   Home — blocos reaproveitáveis
   =========================================================== */

.secao-alt { background: var(--papel-2); border-block: 1px solid var(--linha); }

/* cartão de ferramenta: o kanji gigante de fundo é a marca-d'água */
.ferramenta { position: relative; overflow: hidden; padding: 1.6rem; display: flex; flex-direction: column; }
.ferramenta .marca-agua {
  position: absolute; right: -.12em; bottom: -.3em;
  font-family: var(--serif); font-size: var(--t-marca-g); line-height: 1;
  color: var(--tinta); opacity: .055; pointer-events: none; user-select: none;
}
.ferramenta h3 { font-size: var(--t-lg); margin: .65rem 0 .4rem; }
.ferramenta p { flex: 1; margin: 0; color: var(--tinta-media); font-size: var(--t-md); }
.ferramenta .ir {
  display: flex; align-items: center; gap: .4rem;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--linha);
  font-size: var(--t-md); font-weight: 600; color: var(--selo);
}
.ferramenta .ir .seta { margin-left: auto; transition: transform .15s ease; }
a.ferramenta:hover .ir .seta { transform: translateX(3px); }

/* faixa de números como divisor discreto */
.faixa-divisor { border-block: 1px solid var(--linha); background: var(--papel-2); }
.faixa-divisor .faixa { border: 0; justify-content: space-between; }

/* as três frentes, em versão compacta */
.frente { display: flex; gap: .9rem; align-items: flex-start; }
/* ⚠️ Estas quatro regras viviam presas a `.frente`, e por isso o mesmo
   `<span class="glifo musgo">` desenhava um selo verde dentro de um cartão de
   nível e um caractere solto e sem cor em qualquer outro lugar. Não era
   decisão: era o seletor tendo nascido junto com a primeira tela que precisou
   dele. ⭐ Soltas, a classe passa a valer o que o nome dela diz. */
.glifo {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 11px; font-family: var(--serif); font-size: var(--t-lg); line-height: 1;
}
.glifo.selo   { background: var(--selo-fundo); color: var(--selo); box-shadow: none; }
.glifo.indigo { background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo); }
.glifo.musgo  { background: color-mix(in srgb, var(--musgo) 14%, transparent); color: var(--musgo); }
.frente h3 { font-size: var(--t-base); margin: .15rem 0 .25rem; }
.frente p { margin: 0; font-size: var(--t-md); color: var(--tinta-media); }

/* bloco de dois públicos (aluno / sensei) */
.publico { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .publico { grid-template-columns: 1fr; gap: 1.75rem; } }

/* botão de idioma, ao lado do de tema */
.btn-idioma {
  height: var(--altura-controle); padding: 0 .7rem; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--linha);
  border-radius: var(--raio); cursor: pointer; color: var(--tinta-media);
  font: inherit; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
}
.btn-idioma:hover { background: var(--papel-3); color: var(--tinta); border-color: var(--tinta-suave); }

/* Tela baixa (notebook, janela reduzida): o desenho encolhe para o bloco
   preso no topo não engolir a área de leitura do painel. */
@media (max-height: 780px) {
  .detalhe-fixo .tracado { max-width: 132px; }
}
@media (max-height: 640px) {
  .detalhe-fixo .tracado { max-width: 104px; }
  .detalhe-fixo .tracado-acoes { gap: .35rem; }
  .detalhe-fixo .tracado-acoes .btn { padding: .3rem .6rem; font-size: var(--t-xs); }
}

/* ===========================================================
   Voz — botão de pronúncia
   =========================================================== */

.btn-voz {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: none; vertical-align: middle;
  background: transparent; border: 1px solid var(--linha);
  border-radius: 8px; cursor: pointer; color: var(--tinta-media);
  font-size: 13px; line-height: 1; padding: 0;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn-voz:hover { background: var(--selo-fundo); border-color: var(--selo); color: var(--selo); }
.btn-voz.falando { transform: scale(1.12); background: var(--selo); border-color: var(--selo); }
.btn-voz.grande { width: 38px; height: 38px; font-size: 16px; }

.voz-ajustes { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: var(--t-sm); color: var(--tinta-media); }
.voz-ajustes select { padding: .3rem .5rem; font-size: var(--t-sm); }

.voz-indisponivel {
  font-size: var(--t-xs); color: var(--tinta-suave);
  background: var(--papel-3); border: 1px dashed var(--linha);
  border-radius: var(--raio); padding: .6rem .8rem; margin-top: .8rem;
}

/* ajustes de áudio: recolhido por padrão, para não competir com a lição */
.voz-ajustes-caixa { margin-top: 1.1rem; border-top: 1px solid var(--linha); padding-top: .8rem; }
.voz-ajustes-caixa summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--tinta-media);
  list-style: none; user-select: none;
}
.voz-ajustes-caixa summary::-webkit-details-marker { display: none; }
.voz-ajustes-caixa summary::after { content: ' ▾'; color: var(--tinta-suave); }
.voz-ajustes-caixa[open] summary::after { content: ' ▴'; }
.voz-ajustes-caixa summary:hover { color: var(--selo); }
.voz-ajustes { flex-direction: column; align-items: stretch; gap: .55rem; margin-top: .8rem; }
.voz-ajustes label { display: grid; gap: .2rem; font-size: var(--t-xs); color: var(--tinta-suave); }
.voz-ajustes select {
  width: 100%; padding: .35rem .5rem; font: inherit; font-size: var(--t-sm);
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
}
.voz-ajustes .voz-auto { display: flex; align-items: center; gap: .45rem; font-size: var(--t-xs); }
.voz-ajustes .voz-auto input { margin: 0; flex: none; }

/* ===========================================================
   Tarja de aviso (armazenamento bloqueado)
   =========================================================== */

.faixa-aviso {
  background: var(--selo-fundo);
  border-bottom: 1px solid color-mix(in srgb, var(--selo) 35%, transparent);
}
.faixa-aviso-interno {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .85rem 20px; font-size: var(--t-md);
}
.faixa-aviso .ico { flex: none; font-size: var(--t-base); line-height: 1.4; }
.faixa-aviso .txt { flex: 1; display: grid; gap: .15rem; color: var(--tinta-media); }
.faixa-aviso .txt strong { color: var(--selo); font-family: var(--serif); font-size: var(--t-base); }
.faixa-aviso button { flex: none; align-self: center; }
@media (max-width: 640px) {
  .faixa-aviso-interno { flex-wrap: wrap; }
  .faixa-aviso button { align-self: flex-start; }
}

/* ===========================================================
   Lista de vocabulário
   =========================================================== */

.tema-vocab { margin-bottom: 2rem; }
.tema-vocab-cabeca { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.tema-vocab-cabeca h3 { margin: 0; font-size: var(--t-base); }
.tema-vocab-cabeca p { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); flex: 1; min-width: 140px; }

.lista-vocab { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.lista-vocab li {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .75rem;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--raio);
}
.lista-vocab .pal { font-size: var(--t-lg); min-width: 6.5em; }
.lista-vocab .kanji { color: var(--tinta-suave); font-size: var(--t-base); min-width: 4em; }
.lista-vocab .sig { margin-left: auto; color: var(--tinta-media); font-size: var(--t-md); text-align: right; }
@media (max-width: 560px) {
  .lista-vocab .sig { margin-left: 0; width: 100%; text-align: left; }
  .lista-vocab .pal { min-width: 0; }
}

/* ===========================================================
   Modo escolha (padrão em tela de toque)
   =========================================================== */

.opcoes-carta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .5rem; }
@media (max-width: 380px) { .opcoes-carta { grid-template-columns: 1fr; } }

.opcao-carta {
  padding: .95rem .8rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
  font: inherit; font-size: var(--t-base); cursor: pointer;
  min-height: 52px;                   /* alvo de toque confortável */
  transition: border-color .12s ease, background .12s ease;
}
.opcao-carta:hover:not(:disabled) { border-color: var(--selo); background: var(--selo-fundo); }
.opcao-carta:disabled { cursor: default; }
.opcao-carta[data-estado="certo"] { border-color: var(--musgo); background: color-mix(in srgb, var(--musgo) 14%, var(--papel)); font-weight: 600; }
.opcao-carta[data-estado="errado"] { border-color: var(--selo); background: color-mix(in srgb, var(--selo) 12%, var(--papel)); }

/* ===========================================================
   Ajustes de tela estreita (celular)
   =========================================================== */

@media (max-width: 560px) {
  /* a barra fixa do seletor de cartas ocupava 3 linhas no celular */
  .barra-fixa-interno { gap: .6rem; }
  .barra-fixa .resumo { width: 100%; }
  .barra-fixa .acoes { margin-left: 0; width: 100%; }
  .barra-fixa .acoes .btn { flex: 1; }

  /* grade de sílabas: 5 colunas ficavam apertadas demais para o dedo */
  .tabela-kana { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
  .cel { border-radius: 8px; }
  .cel .rom { font-size: var(--t-xs); }

  /* alvos de toque mínimos */
  .btn-pequeno { min-height: 40px; }
  .filtro { min-height: 38px; }

  /* a carta do treino não precisa de tanto respiro numa tela pequena */
  .carta { padding: 1.5rem 1rem; }
  .treino-topo { gap: .6rem; }
  .treino-topo .contador { font-size: var(--t-xs); }

  /* faixa de números vira duas colunas em vez de fila espremida */
  .faixa { gap: 1rem 1.5rem; }
  .faixa div { min-width: calc(50% - .75rem); }
}

/* evita zoom automático do iOS ao focar um campo (< 16px dispara zoom) */
@media (max-width: 560px) {
  .resposta, .busca, .campo input, .campo select { font-size: 16px; }
}

/* ===========================================================
   Acessibilidade
   =========================================================== */

/* link "pular para o conteúdo": invisível até receber foco */
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: .6rem 1rem; border-radius: var(--raio);
  background: var(--selo); color: var(--tinta-cheia); text-decoration: none;
  font-size: var(--t-md); transition: top .15s ease;
}
.pular:focus { top: 12px; color: var(--tinta-cheia); }

/* foco SEMPRE visível — o navegador some com ele em botão clicado por mouse,
   mas quem navega por teclado precisa enxergar onde está */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--selo) 65%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}
.cel:focus-visible { outline-offset: 1px; }

/* ===========================================================
   Tela de gestão (sensei)
   =========================================================== */

.grade-gestao { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.25rem; align-items: start; }
@media (max-width: 980px) { .grade-gestao { grid-template-columns: 1fr; } }

/* ⭐⭐ `min-width: 0` — a linha que conserta a única tela que não cabia no
   telefone (medido em 14/08: 674px de conteúdo numa janela de 390).

   A causa não estava em nada daqui: `table.tabela` tem `min-width: 620px` DE
   PROPÓSITO, para a tabela poder rolar dentro do `.rolagem-x`. Só que item de
   grid nasce com `min-width: auto`, que quer dizer "nunca menor que o próprio
   conteúdo" — então a coluna se recusava a encolher abaixo de 654px, o cartão
   ia junto, e o `overflow-x: auto` do `.rolagem-x` NUNCA chegava a ser usado.
   O elemento que existia para rolar nunca rolou, porque o pai crescia antes.

   ⚠️ O sintoma enganava: a página inteira deslizava de lado, e o título, as
   abas e o rodapé continuavam nos 390 — parecia que a tabela estava certa e o
   resto quebrado. É o contrário. 📌 E era a tela onde a SENSEI mais trabalha. */
.grade-gestao > * { min-width: 0; }

.grade-gestao form.cartao { position: sticky; top: 84px; }
@media (max-width: 980px) { .grade-gestao form.cartao { position: static; } }

.campo span { font-size: var(--t-sm); color: var(--tinta-media); font-weight: 500; }
.campo textarea { resize: vertical; font-family: inherit; }
/* ⚠️ `align-items: start` não é enfeite: sem ele o grid estica as duas
   colunas até a mais alta, e como `.campo` é grid também, o ESTICO chega no
   input. Um campo com dica de três linhas ao lado de um campo sem dica
   deixava o segundo com uma caixa de digitar de 5 cm de altura — foi assim
   que "Palavra em kana" e "Natureza" apareceram deformados na conferência de
   07/08. Cada campo agora ocupa a altura dele. */
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: start; }

.aviso-demo {
  background: color-mix(in srgb, var(--indigo) 8%, var(--papel-2));
  border: 1px solid color-mix(in srgb, var(--indigo) 28%, transparent);
  border-radius: var(--raio-g); padding: 1rem 1.15rem; max-width: 68ch;
}
.aviso-demo strong { display: block; font-family: var(--serif); color: var(--indigo); margin-bottom: .25rem; }
.aviso-demo p { margin: 0; font-size: var(--t-md); color: var(--tinta-media); }

.aviso-salvo {
  padding: .7rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; font-size: var(--t-md);
  background: color-mix(in srgb, var(--musgo) 14%, var(--papel-2));
  border: 1px solid color-mix(in srgb, var(--musgo) 35%, transparent);
  color: color-mix(in srgb, var(--musgo) 80%, var(--tinta));
}
.aviso-salvo.erro {
  background: var(--selo-fundo);
  border-color: color-mix(in srgb, var(--selo) 35%, transparent);
  color: var(--selo);
}

.contagem-criados { margin-left: auto; align-self: center; font-size: var(--t-xs); color: var(--tinta-suave); }

/* editor de exercícios */
.editor-ex { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.editor-ex h4 { font-family: var(--serif); font-size: var(--t-base); margin: 0 0 .6rem; }
.ex-linha {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .7rem; margin-bottom: .4rem;
  background: var(--papel-3); border-radius: var(--raio);
}
.ex-linha .num {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 6px; background: var(--selo); color: var(--tinta-cheia); font-size: var(--t-xs);
}
.ex-linha .txt { flex: 1; min-width: 0; font-size: var(--t-md); }
.novo-ex {
  margin-top: .9rem; padding: .9rem; border: 1px dashed var(--linha);
  border-radius: var(--raio); background: var(--papel);
}

/* ===========================================================
   Ficha do aluno
   =========================================================== */

.ficha-topo { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.ficha-topo .avatar-g {
  width: 62px; height: 62px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-size: var(--t-2xl);
  background: var(--selo-fundo); color: var(--selo); border: 1px solid color-mix(in srgb, var(--selo) 30%, transparent);
}

.caixas-srs { display: flex; gap: .35rem; align-items: flex-end; height: 76px; margin-top: .6rem; }
.caixa-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; }
.caixa-col .barra-v {
  width: 100%; background: var(--selo); border-radius: 4px 4px 0 0; min-height: 3px;
}
.caixa-col:last-child .barra-v { background: var(--musgo); }
.caixa-col .rot { font-size: var(--t-xs); color: var(--tinta-suave); }
.caixa-col .qtd { font-size: var(--t-xs); color: var(--tinta-media); font-variant-numeric: tabular-nums; }

.erro-questao {
  border-left: 3px solid var(--selo); background: var(--papel-2);
  border-radius: var(--raio); padding: .8rem 1rem; margin-bottom: .6rem;
}
.erro-questao .enun { font-family: var(--serif); font-size: var(--t-base); margin-bottom: .3rem; }
.erro-questao .resp { font-size: var(--t-sm); color: var(--tinta-media); }
.erro-questao .resp .marcou { color: var(--selo); }
.erro-questao .resp .certa { color: var(--musgo); }

.calendario-estudo { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .5rem; }
.dia-estudo { width: 13px; height: 13px; border-radius: 3px; background: var(--papel-3); border: 1px solid var(--linha); }
.dia-estudo.ativo { background: var(--musgo); border-color: var(--musgo); }
.dia-estudo.hoje { outline: 2px solid var(--selo); outline-offset: 1px; }

/* o símbolo no alto da tela de entrar — o 印 inventado sobreviveu aqui até 12/08 */
.marca-entrar { display: block; width: 68px; margin: 0 auto .9rem; }
.marca-entrar .marca-simbolo { height: auto; width: 100%; }

/* ========================================================================= */
/*  ⭐⭐ O MENU DA CONTA (12/08/2026)                                          */
/*                                                                           */
/*  Antes, entrar espalhava seis peças pela barra — idioma, tema, nível,      */
/*  faixa, nome e sair. Agora é uma peça que abre um menu, e o que era        */
/*  INFORMAÇÃO (nível, faixa) virou conteúdo, não comando.                    */
/*                                                                           */
/*  ⚠️ Herda `.nav-grupo`/`.nav-gaveta`, então já fecha ao clicar fora, com   */
/*  Esc, e fecha a gaveta do Espaço do Aluno ao abrir. Comportamento novo     */
/*  seria a segunda verdade de sempre, agora em conduta em vez de em dado.    */
/* ========================================================================= */
.menu-conta > summary {
  display: inline-flex; align-items: center; gap: .5rem;
  height: var(--altura-controle); padding: 0 .7rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  color: var(--tinta);
}
.menu-conta > summary::after { content: ' ⌄'; opacity: .55; }
.avatar-conta {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--selo-fundo); color: var(--selo);
  font-size: var(--t-xs); font-weight: 700;
}
/* ⚠️ o nome some em tela estreita e sobra o avatar — o menu continua
   alcançável, e é o rótulo mais longo da barra que sai primeiro */
/* ⚠️ 1240px era o número de quando a barra estava cheia; com o menu compacto
   o nome cabe muito antes. Some só quando o espaço aperta de verdade. */
@media (max-width: 1000px) { .menu-conta-nome { display: none; } }

.gaveta-conta { right: 0; left: auto; min-width: 15rem; }
.conta-cabeca {
  padding: .5rem .6rem .6rem;
  border-bottom: 1px solid var(--linha); margin-bottom: .25rem;
  display: grid; gap: .4rem;
}
.conta-etiquetas { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ⚠️ Botão e link lado a lado na mesma lista precisam PARECER a mesma coisa —
   senão "Tema" (botão) e "Meu perfil" (link) viram dois tipos de item no que
   é uma lista só. */
.gaveta-conta a, .gaveta-conta button {
  display: block; width: 100%; text-align: left;
  padding: .45rem .6rem; border-radius: var(--raio);
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: var(--t-md); color: var(--tinta-media);
  text-decoration: none; white-space: nowrap;
}
.gaveta-conta a:hover, .gaveta-conta button:hover {
  background: var(--papel-3); color: var(--tinta);
}
/* ⭐ "Sair" é a única ação destrutiva da lista: cor e um risco acima dela */
.conta-sair {
  color: var(--selo) !important;
  border-top: 1px solid var(--linha); margin-top: .25rem; padding-top: .55rem !important;
  border-radius: 0 0 var(--raio) var(--raio) !important;
}

/* lista de dados do perfil — rótulo e valor, alinhados */
.lista-dados { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; margin: 0; }
.lista-dados dt { color: var(--tinta-suave); font-size: var(--t-sm); }
.lista-dados dd { margin: 0; color: var(--tinta); }
@media (max-width: 560px) { .lista-dados { grid-template-columns: 1fr; gap: .1rem 0; }
  .lista-dados dd { margin-bottom: .6rem; } }