/* Aprovato, base: fontes, reset, tipografia, utilidades mínimas. */

@font-face { font-family: "Lufga"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/lufga-light.woff2") format("woff2"); }
@font-face { font-family: "Lufga"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/lufga-regular.woff2") format("woff2"); }
@font-face { font-family: "Lufga"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/lufga-medium.woff2") format("woff2"); }
@font-face { font-family: "Lufga"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/lufga-semibold.woff2") format("woff2"); }
@font-face { font-family: "Lufga"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/lufga-bold.woff2") format("woff2"); }

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

html { -webkit-text-size-adjust: 100%; height: 100%; overflow-y: scroll; scrollbar-gutter: stable; touch-action: manipulation; }
/* Sem zoom por gesto ou por foco em campo (comportamento de aplicativo, 12/09/2026). Campos com 16px evitam o zoom automático do iOS. */
@media (max-width: 720px) { input, select, textarea, [contenteditable] { font-size: 16px; } } /* barra de rolagem sempre reservada: telas curtas e longas ficam com a mesma largura */

/* Rolagem discreta em toda a plataforma, incluindo o chat. */
* { scrollbar-color: var(--apr-verde) transparent; scrollbar-width: thin; }
/* Nas engines que permitem largura em pixels, evita a precedência das propriedades padrão. */
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-color: auto; scrollbar-width: auto; }
  ::-webkit-scrollbar { width: 3px; height: 3px; background: transparent; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--apr-verde); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--apr-verde-600); }
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--apr-fonte);
  font-size: var(--apr-corpo);
  line-height: 1.6;
  color: var(--apr-tinta);
  background: var(--apr-fundo);
  -webkit-font-smoothing: antialiased;
  transition: background var(--apr-trans-lenta), color var(--apr-trans-lenta);
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--apr-verde); outline-offset: 2px; border-radius: var(--apr-raio-chip); }
::selection { background: var(--apr-verde-100); color: var(--apr-grafite); }
[hidden] { display: none !important; }

/* Tipografia */
.display { font-size: var(--apr-display); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.h1 { font-size: var(--apr-h1); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.h2 { font-size: var(--apr-h2); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.h3 { font-size: var(--apr-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.small { font-size: var(--apr-small); }
.label { font-size: var(--apr-label); font-weight: 600; letter-spacing: 0.01em; color: var(--apr-tinta-3); }
.tinta-2 { color: var(--apr-tinta-2); }
.tinta-3 { color: var(--apr-tinta-3); }
.verde { color: var(--apr-verde-texto); }
/* Vermelho de texto: o --apr-erro puro só tem 3,2:1 sobre fundo claro; no tema escuro ele funciona. */
.erro-texto { color: #C62828; }
[data-tema="escuro"] .erro-texto { color: #FF7A7A; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.centro { text-align: center; }
.direita { text-align: right; }

/* Números de painel: Light 300 com a unidade menor em neutro */
.numero { font-size: 56px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.numero__unidade { font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--apr-tinta-3); margin-left: 4px; }

/* Layout */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--apr-e-6); }
/* Só vertical: o atalho "padding: X 0 Y" zerava o respiro lateral do .container, porque toda tela é
   <section class="pagina container">, no desktop sobrava espaço pela largura máxima, mas no celular colava na borda. */
.pagina { padding-top: var(--apr-e-8); padding-bottom: var(--apr-e-24); }
.pagina__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--apr-e-4); flex-wrap: wrap; margin-bottom: var(--apr-e-6); }
.pagina__titulo { display: flex; flex-direction: column; gap: var(--apr-e-1); }
.grade { display: grid; gap: var(--apr-e-4); }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Um campo que ocupa a linha inteira dentro da grade. Existe porque um bloco alto (uma lista de
   caixas de seleção, por exemplo) numa das colunas estica a outra e joga o campo vizinho para baixo. */
.grade__cheio { grid-column: 1 / -1; }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Cards da mesma natureza (mapas, simulados, bancas) com a MESMA altura no conjunto inteiro, não só dentro da linha:
   grid-auto-rows: 1fr iguala todas as faixas pela mais alta. O conteúdo curto ganha espaço embaixo, e não um card menor. */
.grade--igual { grid-auto-rows: 1fr; }
.grade--igual > .card { height: 100%; }
.grade--igual > .card.coluna > :last-child { margin-top: auto; }
.linha { display: flex; align-items: center; gap: var(--apr-e-3); flex-wrap: wrap; }
.linha--entre { justify-content: space-between; }
.linha--fim { justify-content: flex-end; }
.coluna { display: flex; flex-direction: column; gap: var(--apr-e-3); }
.cresce { flex: 1 1 auto; min-width: 0; }
.mt-2 { margin-top: var(--apr-e-2); } .mt-4 { margin-top: var(--apr-e-4); } .mt-6 { margin-top: var(--apr-e-6); } .mt-8 { margin-top: var(--apr-e-8); }
.mb-2 { margin-bottom: var(--apr-e-2); } .mb-4 { margin-bottom: var(--apr-e-4); } .mb-6 { margin-bottom: var(--apr-e-6); }
.largura-estreita { max-width: 560px; }
.largura-media { max-width: 820px; }
.rolagem-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.so-mobile { display: none; }

@media (max-width: 960px) {
  .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  /* Também só vertical: o atalho com "0" no meio matava o respiro lateral justamente no celular,
     que é onde ele faz falta (o espaço extra embaixo é a barra de navegação fixa). */
  .pagina { padding-top: var(--apr-e-6); padding-bottom: calc(var(--apr-e-16) + 56px + env(safe-area-inset-bottom)); }
  /* No celular a barra de rolagem é sobreposta: reservar espaço para ela só deixava a margem direita
     11px maior que a esquerda. O reserva-espaço continua valendo no desktop, onde evita o pulo de layout. */
  html { scrollbar-gutter: auto; }
  /* Título da página no celular: 34px fixos faziam um título de duas palavras ("Montar planejamento") ocupar a linha
     inteira e encostar na borda, comendo o respiro lateral de 20px que o resto da tela tem. Agora ele acompanha a
     largura da tela e nunca passa do tamanho do token: no aparelho largo continua 34px, e no estreito diminui o
     suficiente para sobrar margem. */
  .pagina__titulo .h1 { font-size: min(var(--apr-h1), 8.2vw); }
  /* E uma folga de 8px à direita do bloco do título: sem ela, um título que cabe por 4px na linha fica colado na
     borda em vez de quebrar. Com ela, quebra em duas linhas e respira. */
  .pagina__titulo { padding-right: 8px; }
  .grade--2, .grade--3, .grade--4 { grid-template-columns: minmax(0, 1fr); }
  .so-desktop { display: none !important; }
  .carta__face { font-size: 20px; padding: var(--apr-e-12) var(--apr-e-6); }
  .so-mobile { display: initial; }
  .numero { font-size: 44px; }
}

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

/* Só para leitor de tela: o texto existe na árvore de acessibilidade e não ocupa espaço.
   Estava definida só dentro de .comunidade, e o blog e o editor usavam sem estilo nenhum. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }