@charset "utf-8";
/* ==========================================================================
   Central da Equipe — Moraes Insurance
   Os tokens de cor sao injetados em :root pelo construir.py, direto do
   _scripts/paleta.py, que mede o contraste antes de deixar publicar.
   Nao escreva HEX aqui. Se precisar de uma cor nova, ela nasce no paleta.py.
   ========================================================================== */

/* ---------------------------------------------------------------- fonte
   Poppins e a fonte do DNA da marca. Servida pelo proprio hub (28 KB nos 3
   pesos) para funcionar sem internet. font-display:swap para o texto
   aparecer na hora e nao piscar em branco.                                */
@font-face {
  font-family: 'Poppins';
  src: url('../fonte/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonte/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonte/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --fonte: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  /* escala 8pt. Nada de valor solto no meio do arquivo. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  --r-p: 8px; --r-m: 12px; --r-g: 16px; --r-tudo: 999px;

  --sombra-1: 0 1px 2px rgb(23 25 48 / .06), 0 1px 3px rgb(23 25 48 / .04);
  --sombra-2: 0 2px 4px rgb(23 25 48 / .06), 0 8px 20px rgb(23 25 48 / .08);
  --sombra-3: 0 12px 32px rgb(23 25 48 / .16);

  --topo-h: 56px;
  --lateral-l: 268px;
  --leitura: 68ch;
  --transicao: 160ms cubic-bezier(.2, .8, .3, 1);
}
@media (min-width: 900px) { :root { --topo-h: 64px; } }

/* ------------------------------------------------------------- alicerce */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--canvas);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { color: var(--ink-900); line-height: 1.25; margin: 0 0 var(--e3); font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.05rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.18rem, 1.05rem + .55vw, 1.4rem); letter-spacing: -.01em; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p  { margin: 0 0 var(--e4); text-wrap: pretty; }
a  { color: var(--blue-600); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-800); }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--ink-100); margin: var(--e6) 0; }
code {
  font-family: var(--mono); font-size: .875em; background: var(--ink-50);
  border: 1px solid var(--ink-100); border-radius: 5px; padding: .1em .35em;
  color: var(--ink-800); word-break: break-word;
}
strong { font-weight: 600; color: var(--ink-900); }
:focus-visible {
  outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 4px;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: fixed; left: var(--e3); top: -100px; z-index: 100;
  background: var(--blue-800); color: #fff; padding: var(--e3) var(--e4);
  border-radius: var(--r-p); font-weight: 600; text-decoration: none;
  transition: top var(--transicao);
}
.pular:focus { top: var(--e3); color: #fff; }

.ic { width: 1.15em; height: 1.15em; flex: none; }

/* ⚠️ O atributo `hidden` do HTML e so `display:none` na folha do NAVEGADOR, e
   qualquer `display` escrito aqui vence. Sem esta linha, `.btn-limpar` e
   `.aviso-copia` (que sao display:flex) ficam VISIVEIS com hidden ligado —
   o X de limpar busca aparecia com o campo vazio, e o aviso "Copiado!" ficava
   invisivel mas presente por cima do rodape. Visto em 25/08 no print do ar. */
[hidden] { display: none !important; }

/* sem JS: mostra tudo empilhado, em vez de uma pagina em branco */
.sem-js .pagina[hidden] { display: block !important; }
.sem-js .pagina[data-pagina="busca"] { display: none !important; }
.sem-js .busca, .sem-js .btn-menu, .sem-js .btn-copiar { display: none !important; }

/* ------------------------------------------------------------------ topo */
.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--e3);
  height: var(--topo-h); padding: 0 var(--e3);
  background: var(--branco);
  border-bottom: 1px solid var(--ink-100);
}
@media (min-width: 900px) { .topo { padding: 0 var(--e5); gap: var(--e5); } }

.btn-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: calc(var(--e2) * -1);
  border: 0; border-radius: var(--r-p); background: none;
  color: var(--ink-700); cursor: pointer;
}
.btn-menu:hover { background: var(--ink-50); }
.btn-menu .ic { width: 22px; height: 22px; }
.btn-menu .ic-fechar { display: none; }
.btn-menu[aria-expanded="true"] .ic-menu { display: none; }
.btn-menu[aria-expanded="true"] .ic-fechar { display: block; }
@media (min-width: 900px) { .btn-menu { display: none; } }

.marca { display: flex; align-items: center; gap: var(--e3); text-decoration: none;
  flex: 0 1 auto; min-width: 0; }
/* ⚠️ Especificidade: `.marca img` e 0-1-1 e venceria `.marca-mini` (0-1-0).
   Por isso as duas variantes sao escritas com o MESMO peso — senao a logo
   aparece duas vezes no cabecalho (aconteceu em 25/08). */
.marca img.marca-cheia { display: block; height: 21px; width: auto; }
.marca img.marca-mini  { display: none;  width: 26px; height: 26px; }
@media (max-width: 460px) {
  /* Tela estreita: o cabecalho e da busca. A marca fica so no coracao —
     recortado do PNG do proprio dono, nunca redesenhado. */
  .marca img.marca-cheia { display: none; }
  .marca img.marca-mini  { display: block; }
}
.marca-produto {
  display: none; font-size: .8rem; font-weight: 600; color: var(--ink-500);
  padding-left: var(--e3); border-left: 1px solid var(--ink-200);
  white-space: nowrap;
}
@media (min-width: 1100px) { .marca-produto { display: block; } }

.busca {
  position: relative; display: flex; align-items: center;
  flex: 1 1 auto; max-width: 560px;
  /* min-width:0 e o que deixa o flex encolher. Sem isso o cabecalho
     estoura 22px em 390px e a pagina inteira rola de lado. */
  min-width: 0;
}
.busca input { min-width: 0; }
.busca .ic-busca {
  position: absolute; left: var(--e3); width: 18px; height: 18px;
  color: var(--ink-400); pointer-events: none;
}
.busca input {
  /* 44px: a busca e o atalho mais usado do hub e precisa ser tocavel. */
  width: 100%; height: 44px; padding: 0 var(--e8) 0 40px;
  font: inherit; font-size: .925rem; color: var(--ink-800);
  background: var(--canvas);
  border: 1px solid var(--ink-200); border-radius: var(--r-tudo);
  transition: border-color var(--transicao), background var(--transicao);
}
.busca input::placeholder { color: var(--ink-400); }
.busca input:focus {
  background: var(--branco); border-color: var(--blue-600);
  outline: 2px solid var(--blue-600); outline-offset: -1px;
}
.busca input::-webkit-search-cancel-button { display: none; }
.btn-limpar {
  position: absolute; right: var(--e2); width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-tudo); background: var(--ink-100);
  color: var(--ink-600); cursor: pointer;
}
.btn-limpar:hover { background: var(--ink-200); }
.atalho-tecla {
  position: absolute; right: var(--e3); font-family: var(--mono); font-size: .7rem;
  color: var(--ink-400); border: 1px solid var(--ink-200); border-radius: 5px;
  padding: 1px 6px; background: var(--branco); pointer-events: none;
}
.busca:focus-within .atalho-tecla { display: none; }
@media (max-width: 620px) { .atalho-tecla { display: none; } }

.topo-fim { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
.btn-lang {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--e3);
  font-size: .8rem; font-weight: 600; color: var(--ink-700); text-decoration: none;
  border: 1px solid var(--ink-200); border-radius: var(--r-tudo); background: var(--branco);
}
.btn-lang:hover { border-color: var(--ink-400); color: var(--ink-900); background: var(--ink-50); }
.btn-lang .ic { width: 16px; height: 16px; }

/* --------------------------------------------------------------- quadro */
.quadro { display: flex; align-items: flex-start; }

.lateral {
  position: fixed; inset: var(--topo-h) auto 0 0; z-index: 35;
  width: min(86vw, var(--lateral-l)); height: calc(100dvh - var(--topo-h));
  display: flex; flex-direction: column;
  padding: var(--e4) var(--e3) var(--e4);
  background: var(--ink-900); color: var(--ink-200);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%); transition: transform var(--transicao);
}
.lateral.aberta { transform: none; box-shadow: var(--sombra-3); }
@media (min-width: 900px) {
  .lateral { position: sticky; top: var(--topo-h); transform: none; flex: none; width: var(--lateral-l); }
}

.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.menu a {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 48px; padding: var(--e2) var(--e3);
  color: var(--ink-200); text-decoration: none;
  border-radius: var(--r-m); border: 1px solid transparent;
  transition: background var(--transicao), color var(--transicao);
}
.menu a:hover { background: var(--ink-800); color: var(--branco); }
.menu a .ic { width: 20px; height: 20px; color: var(--ink-300); transition: color var(--transicao); }
.menu a:hover .ic { color: var(--branco); }
.menu-txt { display: grid; line-height: 1.3; }
.menu-txt strong { font-size: .925rem; font-weight: 600; color: inherit; }
.menu-txt small { font-size: .75rem; color: var(--ink-300); }
.menu a[aria-current="page"] {
  background: var(--blue-800); color: var(--branco); border-color: var(--blue-600);
}
.menu a[aria-current="page"] .ic,
.menu a[aria-current="page"] small { color: var(--branco); }

.lateral-pe {
  margin-top: auto; padding: var(--e4) var(--e3) 0;
  border-top: 1px solid var(--ink-800); font-size: .8rem; color: var(--ink-300);
}
.lateral-pe p { margin: 0 0 var(--e2); }
.lateral-pe a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--branco); font-weight: 600; text-decoration: none;
}
.lateral-pe a:hover { text-decoration: underline; }
.lateral-pe .ic { width: 15px; height: 15px; }
.lateral-pe .miudo { color: var(--ink-300); }

.veu {
  position: fixed; inset: var(--topo-h) 0 0; z-index: 34;
  background: rgb(23 25 48 / .5); backdrop-filter: blur(2px);
}
@media (min-width: 900px) { .veu { display: none !important; } }

/* ------------------------------------------------------------- conteudo */
.conteudo {
  flex: 1 1 auto; min-width: 0;
  padding: var(--e5) var(--e4) var(--e8);
}
@media (min-width: 900px) { .conteudo { padding: var(--e6) var(--e6) var(--e8); } }
.conteudo:focus { outline: none; }
.pagina { max-width: 940px; margin: 0 auto; }
.pagina[hidden] { display: none; }

.capa { margin-bottom: var(--e6); }
.capa-ola { font-size: .875rem; color: var(--ink-500); margin: 0 0 var(--e1); font-weight: 600; }
.capa-t { margin: 0 0 var(--e2); }
.capa-sub { font-size: 1.05rem; color: var(--ink-500); margin: 0; max-width: var(--leitura); }

.pag-t { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); }
.pag-t .ic { width: 1.1em; height: 1.1em; color: var(--red-600); }
.pag-sub { color: var(--ink-500); max-width: var(--leitura); margin-bottom: var(--e5); }
.contagem { font-size: .825rem; color: var(--ink-500); margin: calc(var(--e5) * -1 + var(--e2)) 0 var(--e5); }
.origem { max-width: var(--leitura); }
.acoes-topo { margin-bottom: var(--e5); }

.secao { margin: 0 0 var(--e7); }
.secao-t {
  display: flex; align-items: center; gap: var(--e3);
  margin-bottom: var(--e4);
}
.secao-t .ic { width: 20px; height: 20px; flex: none; color: var(--red-600); }
.secao-t > span { display: grid; line-height: 1.3; }
.secao-t small { font-size: .8rem; font-weight: 400; color: var(--ink-500); }
.secao-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.secao-link .ic { width: 14px; height: 14px; color: currentColor; }
.dupla { display: grid; gap: var(--e4); }
@media (min-width: 780px) { .dupla { grid-template-columns: 1fr 1fr; align-items: start; } }

/* --------------------------------------------------------------- cartao */
.cartao {
  background: var(--branco); border: 1px solid var(--ink-100);
  border-radius: var(--r-g); padding: var(--e5); box-shadow: var(--sombra-1);
}
.cartao > :last-child { margin-bottom: 0; }
.cartao-destaque { border-color: var(--blue-100); background: var(--blue-100); }
.cartao-destaque .secao-t .ic { color: var(--blue-800); }
.cartao-destaque h2 { color: var(--blue-800); }
.cartao-perigo { border-color: var(--red-100); background: var(--red-100); }
.cartao-perigo .secao-t .ic { color: var(--red-700); }
.cartao-contato p { margin-bottom: var(--e2); }
/* 44px porque o telefone daqui e para TOCAR e ligar, nao so para ler.
   Media a 390px dava 26px. (Samuel, 27/08) */
.cartao-contato a { display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; font-weight: 600; text-decoration: none; }
.cartao-contato a:hover { text-decoration: underline; }
.cartao-plano { background: var(--ink-50); border-color: var(--ink-100); box-shadow: none; }

details.dobra, details.porque, details.pergunta {
  background: var(--branco); border: 1px solid var(--ink-100);
  border-radius: var(--r-m); margin-bottom: var(--e3);
}
details.dobra { padding: 0; margin-bottom: var(--e6); }
details.dobra > summary, details.porque > summary, details.pergunta > summary {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4); cursor: pointer; list-style: none; min-height: 48px;
  font-weight: 600; color: var(--ink-900);
}
summary::-webkit-details-marker { display: none; }
details > summary:hover { background: var(--ink-50); border-radius: var(--r-m); }
.ic-abrir { margin-left: auto; color: var(--ink-400); transition: transform var(--transicao); }
details[open] > summary .ic-abrir { transform: rotate(90deg); }
details.dobra > summary .secao-t { margin: 0; }
details.dobra > *:not(summary) { padding: 0 var(--e4); }
details.dobra > *:last-child { padding-bottom: var(--e4); }
details.porque { background: var(--ink-50); border-color: var(--ink-100); margin-top: var(--e3); }
details.porque > summary { font-size: .875rem; font-weight: 600; color: var(--ink-600); min-height: 44px; }
details.porque .ic { width: 16px; height: 16px; color: var(--warn-700); }
details.porque p { padding: 0 var(--e4) var(--e4); margin: 0; font-size: .9rem; color: var(--ink-600); }

/* ---------------------------------------------------------------- mural */
.mural { display: grid; gap: var(--e3); }
@media (min-width: 780px) { .mural { grid-template-columns: repeat(2, 1fr); } }
.aviso {
  background: var(--branco); border: 1px solid var(--ink-100);
  border-left: 4px solid var(--ink-300);
  border-radius: var(--r-m); padding: var(--e4); box-shadow: var(--sombra-1);
}
.aviso h3 { font-size: .975rem; margin-bottom: var(--e2); }
.aviso p { font-size: .9rem; margin: 0; color: var(--ink-600); }
.aviso-data { margin-top: var(--e3) !important; font-size: .75rem !important; color: var(--ink-400) !important; }
.aviso-regra { border-left-color: var(--blue-600); }
.aviso-regra h3 { color: var(--blue-800); }
.aviso-atencao { border-left-color: var(--warn-700); background: var(--warn-100); border-color: var(--warn-100); }
.aviso-atencao h3 { color: var(--warn-700); }
.aviso-novo { border-left-color: var(--red-600); }
.aviso-novo h3 { color: var(--red-700); }
.vazio { color: var(--ink-500); font-style: italic; }

/* -------------------------------------------------------------- atalhos */
.atalhos { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.atalho-caixa { position: relative; }
.atalho {
  display: flex; align-items: center; gap: var(--e4);
  min-height: 84px; height: 100%; padding: var(--e4);
  background: var(--branco); border: 1px solid var(--ink-200);
  border-radius: var(--r-g); text-decoration: none; color: var(--ink-900);
  box-shadow: var(--sombra-1);
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.atalho:hover { border-color: var(--red-600); box-shadow: var(--sombra-2); transform: translateY(-2px); color: var(--ink-900); }
.atalho-ic {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--r-m); background: var(--blue-100); color: var(--blue-800);
}
.atalho:hover .atalho-ic { background: var(--red-100); color: var(--red-700); }
.atalho-ic .ic { width: 22px; height: 22px; }
.atalho-txt { display: grid; gap: 2px; line-height: 1.35; min-width: 0; }
.atalho-txt strong { font-size: .975rem; }
.atalho-txt span { font-size: .8rem; color: var(--ink-500); }
.atalho-fora { margin-left: auto; align-self: flex-start; color: var(--ink-400); }
.atalho-fora .ic { width: 15px; height: 15px; }
/* Atalho que tem botao Copiar reserva a faixa de baixo para ele. Sem isso o
   botao deita em cima do subtitulo e come metade da frase (visto em 25/08 nos
   dois formularios). A classe vem do construir.py — nada de :has() aqui, para
   a regra valer com certeza. */
.atalho-copiavel .atalho { padding-bottom: 52px; }
.atalho-caixa .btn-copiar.mini { position: absolute; right: var(--e3); bottom: var(--e3); }

.regras { margin: 0; padding-left: 1.35em; display: grid; gap: var(--e2); }
.regras li { font-size: .9rem; color: var(--ink-600); }
.regras li::marker { color: var(--red-600); font-weight: 700; }

/* --------------------------------------------------------------- botoes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e4);
  font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none;
  border-radius: var(--r-p); border: 1px solid transparent; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.btn .ic { width: 17px; height: 17px; }
.btn-forte { background: var(--red-600); color: var(--branco); }
.btn-forte:hover { background: var(--red-700); color: var(--branco); }
.btn-fraco { background: var(--branco); color: var(--ink-700); border-color: var(--ink-200); }
.btn-fraco:hover { background: var(--ink-50); border-color: var(--ink-400); color: var(--ink-900); }

.btn-copiar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--e3);
  font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--ink-700); background: var(--branco);
  border: 1px solid var(--ink-200); border-radius: var(--r-p); cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn-copiar:hover { border-color: var(--blue-600); color: var(--blue-800); background: var(--blue-100); }
.btn-copiar .ic { width: 15px; height: 15px; }
.btn-copiar.copiou { background: var(--ok-100); border-color: var(--ok-700); color: var(--ok-700); }
.btn-copiar.falhou { background: var(--red-100); border-color: var(--red-600); color: var(--red-700); }

/* -------------------------------------------------------------- copiavel */
.copiavel { position: relative; margin: 0 0 var(--e3); }
.copiavel .btn-copiar { position: absolute; top: var(--e2); right: var(--e2); z-index: 2; }
.texto-pronto {
  margin: 0; padding: var(--e5) var(--e4) var(--e4);
  font-family: var(--fonte); font-size: .925rem; line-height: 1.6;
  color: var(--ink-800); background: var(--ink-50);
  border: 1px solid var(--ink-100); border-left: 3px solid var(--blue-600);
  border-radius: var(--r-m);
  white-space: pre-wrap; word-break: break-word;
}
@media (min-width: 560px) { .texto-pronto { padding-top: var(--e4); padding-right: 108px; } }

.copy { margin-bottom: var(--e6); }
.copy-t { font-size: 1rem; margin-bottom: var(--e2); }
.copy-quando, .copy-botoes { font-size: .85rem; color: var(--ink-500); margin-bottom: var(--e3); }
.rot-mini {
  display: inline-block; margin-right: var(--e2);
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-400);
}
.chip {
  display: inline-block; margin: 0 var(--e2) var(--e1) 0; padding: 3px 10px;
  font-size: .78rem; font-weight: 600; color: var(--blue-800);
  background: var(--blue-100); border-radius: var(--r-tudo);
}
.chips { margin: 0; }

.etq {
  display: block; padding: var(--e3) var(--e4); margin: 0 0 var(--e4);
  font-size: .875rem; border-radius: var(--r-m); border-left: 3px solid;
}
.etq-atencao { background: var(--warn-100); border-color: var(--warn-700); color: var(--warn-700); }
.etq-atencao strong { color: var(--warn-700); }
.etq-regra { background: var(--blue-100); border-color: var(--blue-600); color: var(--blue-800); }
.etq-regra strong { color: var(--blue-800); }

/* ---------------------------------------------------------------- aulas */
.grade-aulas {
  list-style: none; margin: 0 0 var(--e7); padding: 0;
  display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  counter-reset: aula;
}
.aula-cartao {
  display: flex; flex-direction: column; height: 100%;
  background: var(--branco); border: 1px solid var(--ink-200);
  border-radius: var(--r-g); overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--sombra-1);
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.aula-cartao:hover { border-color: var(--red-600); box-shadow: var(--sombra-2); transform: translateY(-2px); color: inherit; }
/* faixa 3:1: no 16/9 a imagem comia 52% da altura do cartao e o cartao virava
   um bloco de cor. Medido em 27/08 a pedido do Samuel. */
.aula-capa { display: block; aspect-ratio: 3 / 1; overflow: hidden; background: var(--ink-50); border-bottom: 1px solid var(--ink-100); }
.aula-capa img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.aula-capa-vazia { display: grid; place-items: center; }
.aula-capa-vazia .ic { width: 32px; height: 32px; color: var(--ink-300); }
.aula-corpo { display: grid; gap: var(--e1); padding: var(--e4); align-content: start; flex: 1; }
.aula-num {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--red-600);
}
.aula-corpo strong { font-size: .975rem; line-height: 1.35; }
.aula-res { font-size: .85rem; color: var(--ink-500); line-height: 1.5; }
.aula-min { margin-top: var(--e2); font-size: .75rem; color: var(--ink-400); }

/* --- o banner no topo da pagina da aula -------------------------------------
   Mesma faixa de cor da capa do cartao, mas em TEXTO: traduz sozinho, fica
   nitido em qualquer tela e nunca corta (a capa em imagem e 16:9 fixo; aqui a
   altura segue o titulo). A cor vem do _fonte/aulas.json, via --aula-cor. */
.aula-topo {
  display: flex; align-items: stretch; gap: 0;
  margin: 0 0 var(--e6); max-width: var(--leitura); border-radius: var(--r-g); overflow: hidden;
  border: 1px solid var(--ink-200); background: var(--branco);
}
.aula-topo-num {
  flex: 0 0 96px; display: grid; place-items: center;
  background: var(--aula-cor, var(--blue-600)); color: #fff;
  font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.aula-topo-txt { display: grid; gap: 6px; align-content: center; padding: var(--e4) var(--e5); }
.aula-topo-rot {
  display: flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--aula-cor, var(--blue-600));
}
.aula-topo-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }
.aula-topo h1 { margin: 0; font-size: 1.45rem; line-height: 1.2; text-wrap: balance; }
.aula-topo p { margin: 0; font-size: .9rem; color: var(--ink-500); line-height: 1.5; }

@media (max-width: 560px) {
  .aula-topo-num { flex-basis: 68px; font-size: 1.9rem; }
  .aula-topo-txt { padding: var(--e3) var(--e4); }
  .aula-topo h1 { font-size: 1.2rem; }
}

/* A aula em video (28/08/2026): logo abaixo da faixa, na largura de leitura. */
.aula-video { margin: 0 0 var(--e6); max-width: var(--leitura); }
.aula-video video {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--r-g); border: 1px solid var(--ink-200);
}
.aula-video figcaption {
  display: grid; gap: 2px; margin-top: 8px;
  font-size: .85rem; line-height: 1.4; color: var(--ink-500);
}
.aula-video figcaption strong { color: inherit; font-weight: 700; }


/* A volta de uma tela filha. Alvo de 44px e a palavra "Voltar" legivel:
   quem usa o hub nao e quem construiu, e no celular este botao e a UNICA
   saida (o menu fica atras do hamburguer). Pedido do Samuel, 27/08. */
.voltar {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e4) 0 var(--e3);
  border: 1.5px solid var(--ink-200); border-radius: var(--r-tudo);
  background: var(--branco); color: var(--ink-700);
  font-family: var(--fonte); font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.voltar .ic { width: 18px; height: 18px; color: var(--blue-600); }
.voltar:hover { border-color: var(--blue-600); background: var(--blue-100); }
.voltar:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.pagina > .voltar { margin-bottom: var(--e4); }
.busca-sair-linha { margin: var(--e5) 0 0; }

.migalha { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; font-size: .825rem; color: var(--ink-500); margin-bottom: var(--e4); }
.migalha a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.migalha a:hover { text-decoration: underline; }
.migalha .ic { width: 14px; height: 14px; }
.migalha-sep { color: var(--ink-300); }

.nav-aula {
  display: flex; justify-content: space-between; gap: var(--e3);
  margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--ink-100);
}

/* ---------------------------------------------------------------- prosa */
.prosa { max-width: var(--leitura); }
.prosa > h2 {
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: 1px solid var(--ink-100);
}
.prosa > h2:first-of-type { margin-top: var(--e5); }
.prosa > h1 { border: 0; padding: 0; }
.prosa h3 { margin-top: var(--e5); color: var(--ink-800); }
.prosa ul, .prosa ol { margin: 0 0 var(--e4); padding-left: 1.35em; }
.prosa li { margin-bottom: var(--e2); }
.prosa li::marker { color: var(--ink-400); }

.nota {
  margin: 0 0 var(--e4); padding: var(--e4);
  background: var(--ink-50); border: 1px solid var(--ink-100);
  border-left: 3px solid var(--ink-300); border-radius: var(--r-m);
  color: var(--ink-600); font-size: .925rem;
}
.nota > :last-child { margin-bottom: 0; }
.nota h3, .nota h4 { font-size: .95rem; margin-top: 0; }
.nota-frase { background: var(--blue-100); border-color: var(--blue-100); border-left-color: var(--blue-600); color: var(--blue-800); font-size: 1rem; }
.nota-frase strong { color: var(--blue-800); }
.nota-atencao { background: var(--warn-100); border-color: var(--warn-100); border-left-color: var(--warn-700); color: var(--warn-700); }
.nota-atencao strong, .nota-atencao h3 { color: var(--warn-700); }
.nota-regra { background: var(--red-100); border-color: var(--red-100); border-left-color: var(--red-600); color: var(--red-700); }
.nota-regra strong, .nota-regra h3 { color: var(--red-700); }

figure.print { margin: var(--e5) 0; }
figure.print img {
  width: 100%; border: 1px solid var(--ink-200); border-radius: var(--r-m);
  box-shadow: var(--sombra-1); background: var(--branco);
}

/* --------------------------------------------------------------- tabela */
.rolagem-tabela {
  overflow-x: auto; margin: 0 0 var(--e5);
  border: 1px solid var(--ink-100); border-radius: var(--r-m); background: var(--branco);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 380px; }
thead th {
  text-align: left; font-weight: 600; color: var(--ink-900);
  background: var(--ink-50); padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--ink-200); white-space: nowrap;
}
td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--ink-100); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--ink-50); }
.td-btn { text-align: right; white-space: nowrap; }
.td-n { width: 2.5em; color: var(--ink-400); font-weight: 700; }
.tab-q .q-critica td { background: var(--red-100); }
.tab-q .q-critica strong { color: var(--red-700); }
.tab-merge code { white-space: nowrap; }

/* ------------------------------------------------------------------ FAQ */
.perguntas { display: grid; gap: var(--e2); }
.pergunta > summary { font-weight: 400; }
.pergunta-t { font-weight: 600; color: var(--ink-900); }
.resposta { padding: 0 var(--e4) var(--e4); color: var(--ink-600); font-size: .925rem; }
.resposta > :last-child { margin-bottom: 0; }

.tela {
  display: grid; gap: var(--e4); margin-bottom: var(--e5);
  background: var(--branco); border: 1px solid var(--ink-100);
  border-radius: var(--r-g); padding: var(--e4); box-shadow: var(--sombra-1);
}
@media (min-width: 820px) { .tela { grid-template-columns: 320px 1fr; align-items: start; } }
.tela-img { display: block; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--ink-200); }
.tela-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.tela-txt h3 { margin-bottom: var(--e1); }
.tela-menu {
  display: flex; align-items: center; gap: 4px; margin-bottom: var(--e3);
  font-family: var(--mono); font-size: .78rem; color: var(--ink-500);
}
.tela-menu .ic { width: 13px; height: 13px; }
.tela-txt p { font-size: .9rem; }
.marcas { margin: 0 0 var(--e3); padding-left: 1.2em; font-size: .875rem; color: var(--ink-600); }
.marcas li { margin-bottom: var(--e2); }
.marcas li::marker { color: var(--red-600); }

/* ---------------------------------------------------------------- links */
.links { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* Escolher a SUA tabela e uma lista de nomes, nao uma grade de links: em
   3 colunas o quarto nome caia sozinho numa linha orfa. Uma coluna so,
   como no desenho que o Samuel aprovou (27/08). */
.links-lista { grid-template-columns: 1fr; max-width: 720px; }
.link-caixa { position: relative; display: flex; }
.link {
  display: flex; align-items: center; gap: var(--e3); flex: 1;
  min-height: 62px; padding: var(--e3) var(--e4);
  background: var(--branco); border: 1px solid var(--ink-100); border-radius: var(--r-m);
  text-decoration: none; color: var(--ink-900);
  transition: border-color var(--transicao), background var(--transicao);
}
.link:hover { border-color: var(--blue-600); background: var(--blue-100); color: var(--ink-900); }
.link .ic { width: 15px; height: 15px; color: var(--ink-400); margin-left: auto; flex: none; }
.link:hover .ic { color: var(--blue-800); }
.link-txt { display: grid; gap: 1px; line-height: 1.35; min-width: 0; }
.link-txt strong { font-size: .9rem; }
.link-txt span { font-size: .78rem; color: var(--ink-500); }
.link-forte .link { border-color: var(--ink-200); border-left: 3px solid var(--red-600); }
.link-caixa .btn-copiar.mini { position: absolute; right: var(--e2); bottom: var(--e2); z-index: 2; }
.link-forte .link { padding-bottom: 52px; }

.consulta { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--e4); }
.consulta h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); margin-bottom: var(--e2); }

/* ---------------------------------------------------------- treinamento */
.passo { scroll-margin-top: calc(var(--topo-h) + var(--e4)); }
.fala {
  margin: 0 0 var(--e4); padding: var(--e4) var(--e5);
  background: var(--blue-100); border-left: 3px solid var(--blue-600);
  border-radius: var(--r-m); color: var(--blue-800); font-size: 1.02rem; line-height: 1.6;
}
.fala strong { color: var(--blue-800); }
.lista-fala, .ordem { margin: 0 0 var(--e4); padding-left: 1.4em; }
.lista-fala li, .ordem li { margin-bottom: var(--e2); }
.ordem li::marker { color: var(--red-600); font-weight: 700; }
.miudo { font-size: .85rem; color: var(--ink-500); }
.bloco-rot { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); margin: var(--e4) 0 var(--e2); }
.objecao { margin-bottom: var(--e5); }
.objecao-t {
  display: flex; align-items: flex-start; gap: var(--e2);
  font-size: .95rem; color: var(--red-700); margin-bottom: var(--e3);
}
.objecao-t .ic { width: 17px; height: 17px; margin-top: 3px; flex: none; }

.checklist { background: var(--branco); border: 1px solid var(--ink-200); border-radius: var(--r-g); padding: var(--e5); }
.check { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e1); counter-reset: c; }
.check label {
  display: flex; align-items: center; gap: var(--e3); min-height: 48px;
  padding: var(--e2) var(--e3); border-radius: var(--r-p); cursor: pointer;
  font-size: .925rem;
}
.check label:hover { background: var(--ink-50); }
.check input { width: 20px; height: 20px; flex: none; accent-color: var(--red-600); cursor: pointer; }
.check input:checked + span { color: var(--ink-400); text-decoration: line-through; }
.item-peso span { font-weight: 600; }
.item-peso span::after { content: ' ●'; color: var(--red-600); font-size: .7em; vertical-align: middle; }
.check-placar { font-size: 1.6rem; font-weight: 700; color: var(--ink-900); margin: 0 0 var(--e2); }
.check-fecho { font-size: .9rem; color: var(--ink-600); }

.lista-solta { margin: 0 0 var(--e4); padding-left: 1.35em; }
.lista-solta li { margin-bottom: var(--e2); }
.lista-nao { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.lista-nao li { margin-bottom: var(--e2); font-size: .925rem; }
.guia { margin-top: var(--e8); padding-top: var(--e6); border-top: 2px solid var(--ink-100); }
.guia h3 { margin-top: var(--e5); }

.selo {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-tudo);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.selo-pronto { background: var(--ok-100); color: var(--ok-700); }
.selo-falta { background: var(--ink-100); color: var(--ink-600); }
.selo-aviso { background: var(--warn-100); color: var(--warn-700); }
.tab-mat td:first-child { min-width: 220px; }

/* --------------------------------------------------------------- busca */
.resultado {
  display: block; padding: var(--e4); margin-bottom: var(--e2);
  background: var(--branco); border: 1px solid var(--ink-100); border-radius: var(--r-m);
  text-decoration: none; color: inherit;
  transition: border-color var(--transicao);
}
.resultado:hover { border-color: var(--blue-600); color: inherit; }
.resultado-secao {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--red-600); display: block; margin-bottom: var(--e1);
}
.resultado-t { font-size: .975rem; font-weight: 600; color: var(--ink-900); margin: 0 0 var(--e1); }
.resultado-x { font-size: .875rem; color: var(--ink-500); margin: 0; }
.resultado mark { background: var(--warn-100); color: var(--warn-700); padding: 0 2px; border-radius: 3px; font-weight: 600; }
.vazio-busca { padding: var(--e6) 0; }
.vazio-busca q { color: var(--red-700); font-style: normal; }

/* ------------------------------------------------------- aviso de copia */
.aviso-copia {
  position: fixed; left: 50%; bottom: var(--e5); z-index: 60;
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e5);
  background: var(--ink-900); color: var(--branco);
  border-radius: var(--r-tudo); box-shadow: var(--sombra-3);
  font-size: .875rem; font-weight: 600;
  transform: translate(-50%, 12px); opacity: 0;
  transition: opacity var(--transicao), transform var(--transicao);
}
.aviso-copia.aparece { opacity: 1; transform: translate(-50%, 0); }
.aviso-copia .ic { width: 17px; height: 17px; color: var(--ok-100); }
.aviso-copia.erro .ic { color: var(--red-100); }

/* -------------------------------------------------------------- imprimir
   Serve a folha do roteiro de ligacao, que e para ficar na mesa.          */
@media print {
  .topo, .lateral, .veu, .aviso-copia, .pular, .acoes-topo,
  .btn-copiar, .nav-aula, .btn, .secao-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .quadro { display: block; }
  .conteudo { padding: 0; }
  .pagina { max-width: none; }
  .pagina[hidden] { display: none !important; }
  .secao, .passo { break-inside: avoid; margin-bottom: 14pt; }
  .cartao, .checklist, .aviso, .tela { box-shadow: none; border: 1pt solid #999; }
  .texto-pronto { padding: 8pt; border: 1pt solid #999; }
  .fala { background: #f2f2f2; border-left: 2pt solid #000; color: #000; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }
  .check input { -webkit-appearance: none; appearance: none; border: 1pt solid #000; }
  table { font-size: 9.5pt; }
}

/* ------------------------------------------------- alvo de toque no dedo
   No dedo, o alvo cresce. O botao Copiar e a acao principal do hub: no
   celular ele passa a 44px, o piso da casa. No mouse 36px basta e o texto
   respira mais.                                                          */
@media (pointer: coarse) {
  .btn-copiar { min-height: 44px; padding: 0 var(--e4); }
  .btn-lang { height: 44px; }
  .btn-limpar { width: 36px; height: 36px; }
  .marca { min-height: 44px; }
  .lateral-pe a { min-height: 44px; }
  .secao-link { min-height: 44px; align-items: center; }
}
/* A logo e o caminho de volta para o Inicio, e o seletor de idioma
   troca a lingua do hub inteiro: os dois sao alvo de toque. */
.marca { min-height: 44px; }
.btn-lang { height: 44px; }
/* o telefone da casa e para TOCAR e ligar: 44px como os outros */
.lateral-pe a { min-height: 44px; }

/* ------------------------------------------------------------- mapa EUA
   Base CC0 do Wikimedia (dominio publico), pintada com os tokens da marca.
   Estado atendido em azul; o resto em cinza claro, so para dar o contorno
   do pais. As classes .fl .ga .nj .oh .tx .ut sao ligadas pelo construir.py,
   a partir do JSON — nao repita a lista aqui.                            */
.estados {
  display: grid; gap: var(--e5); align-items: start; margin-bottom: var(--e5);
}
@media (min-width: 860px) { .estados { grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr); } }

.mapa-caixa {
  margin: 0; padding: var(--e4);
  background: var(--branco); border: 1px solid var(--ink-100);
  border-radius: var(--r-g);
}
.mapa-eua { display: block; width: 100%; height: auto; }
.mapa-eua .state { fill: var(--ink-100); }
/* O estado atendido ganha a classe .atendido no build, vinda do JSON.
   Regra que casa direto no <path> vence a herdada do <g class="state">. */
.mapa-eua .atendido { fill: var(--blue-600); }
.mapa-eua .borders { stroke: var(--branco); stroke-width: 1; }
.mapa-eua .separator1 { stroke: var(--ink-200); stroke-width: 2; fill: none; }
.mapa-eua .dc { fill: var(--ink-100); }

.mapa-rotulo {
  fill: var(--branco); font-family: var(--fonte); font-weight: 600; font-size: 17px;
  paint-order: stroke; stroke: var(--blue-800); stroke-width: 3px; stroke-linejoin: round;
  dominant-baseline: middle;
}
/* rotulo que saiu do estado (New Jersey nao cabe: tem 23px de largura) */
.mapa-rotulos text[text-anchor="start"] {
  fill: var(--ink-800); stroke: var(--branco);
}
.mapa-chamada { stroke: var(--ink-400); stroke-width: 1.5; }

/* No celular o mapa fica com ~350px: o nome do estado sairia com menos de 6px
   e ninguem leria. Quem responde ali e a LISTA, que existe em toda largura. */
@media (max-width: 720px) {
  .mapa-rotulos { display: none; }
}

.mapa-legenda {
  margin: var(--e3) 0 0; font-size: .8rem; color: var(--ink-500); text-align: center;
}

.estados-lista h3 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-500); margin-bottom: var(--e3);
}
.lista-uf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.lista-uf li {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--branco); border: 1px solid var(--ink-100);
  border-left: 3px solid var(--blue-600); border-radius: var(--r-p);
  font-size: .925rem; font-weight: 600; color: var(--ink-900);
}
.uf {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 26px; border-radius: 5px;
  background: var(--blue-600); color: var(--branco);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}

/* ------------------------------------------------- selo de origem do texto
   O atendente precisa saber se o texto e o que o Joao manda hoje ou uma
   proposta da casa. Sem o selo, os dois viram a mesma coisa na cabeca de
   quem le — e ele acabaria mandando proposta como se fosse padrao.       */
.selo-origem {
  display: inline-block; margin-left: var(--e3); vertical-align: middle;
  padding: 2px 9px; border-radius: var(--r-tudo);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.selo-joao { background: var(--blue-100); color: var(--blue-800); }
.selo-casa { background: var(--ink-100); color: var(--ink-600); }

/* --------------------------------------------- mapa na Home (mais compacto) */
.estados-home { gap: var(--e4); }
@media (min-width: 860px) {
  .estados-home { grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); }
}
.estados-home .mapa-caixa { padding: var(--e3); }
.estados-home .lista-uf { gap: var(--e1); }
.estados-home .lista-uf li { padding: 6px var(--e3); font-size: .875rem; }

/* ------------------------------------------------------------------ cofre
   Secao trancada por PIN. O conteudo chega CIFRADO no HTML — a porta abaixo
   e so a tela de entrada, nao um `display:none` por cima do texto.        */
.cofre-porta {
  max-width: 460px; margin: var(--e8) auto; padding: var(--e6) var(--e5);
  text-align: center;
  background: var(--branco); border: 1px solid var(--ink-200);
  border-radius: var(--r-g); box-shadow: var(--sombra-1);
}
.cofre-porta .ic-cofre { width: 40px; height: 40px; color: var(--red-600); margin-bottom: var(--e3); }
.cofre-porta h1 { font-size: 1.25rem; margin-bottom: var(--e2); }
.cofre-porta p { color: var(--ink-500); font-size: .925rem; }
.cofre-form { display: flex; gap: var(--e2); margin-top: var(--e5); }
.cofre-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 var(--e4);
  font: inherit; font-size: 1rem; color: var(--ink-900);
  background: var(--canvas); border: 1px solid var(--ink-200);
  border-radius: var(--r-p); text-align: center; letter-spacing: .12em;
}
.cofre-form input:focus { background: var(--branco); border-color: var(--blue-600); }
.cofre-erro {
  margin: var(--e3) 0 0; padding: var(--e2) var(--e3);
  font-size: .875rem; color: var(--red-700);
  background: var(--red-100); border-radius: var(--r-p);
}

/* -------------------------------------------------- baixar o PDF da aula */
.baixar-pdf {
  display: inline-flex; align-items: center; gap: var(--e3);
  margin-top: var(--e6); padding: var(--e3) var(--e4); height: auto; min-height: 56px;
  text-align: left;
}
.baixar-pdf .ic { width: 22px; height: 22px; color: var(--red-600); }
.baixar-pdf span { display: grid; gap: 1px; line-height: 1.3; }
.baixar-pdf small { font-size: .78rem; font-weight: 400; color: var(--ink-500); }

/* ------------------------------------------------------------------- FAQ
   Filtros por modulo e por etiqueta. Alvo de 44px medido a 390px: o portao
   reprova abaixo disso, e foi o campo de busca que o pegou em 27/08.
   Sem scroll-snap de proposito — ele ja quebrou a rolagem suave uma vez.  */
.faq-busca {
  position: relative; display: flex; align-items: center;
  margin: 0 0 var(--e4);
}
.faq-busca .ic {
  position: absolute; left: var(--e3); width: 20px; height: 20px;
  color: var(--ink-400); pointer-events: none;
}
.faq-busca input {
  width: 100%; min-height: 44px; padding: var(--e2) var(--e4) var(--e2) var(--e7);
  font: inherit; font-size: 1rem; color: var(--ink-900);
  background: var(--branco); border: 1px solid var(--ink-200);
  border-radius: var(--r-tudo);
}
.faq-busca input::placeholder { color: var(--ink-400); }
.faq-busca input:focus-visible {
  outline: 3px solid var(--blue-600); outline-offset: 1px; border-color: var(--blue-600);
}

.faq-filtros { margin: 0 0 var(--e5); }
.faq-filtro-t {
  margin: var(--e3) 0 var(--e2); font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500);
}
.faq-chips {
  display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e2);
  -webkit-overflow-scrolling: touch;
}
.faq-chips::-webkit-scrollbar { height: 6px; }
.faq-chips::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: var(--r-tudo); }
@media (min-width: 820px) { .faq-chips { flex-wrap: wrap; overflow-x: visible; } }

.chip {
  display: inline-flex; align-items: center; gap: var(--e2); flex: 0 0 auto;
  min-height: 44px; padding: 0 var(--e3); cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 600; white-space: nowrap;
  color: var(--ink-700); background: var(--branco);
  border: 1px solid var(--ink-200); border-radius: var(--r-tudo);
  transition: background var(--transicao), border-color var(--transicao);
}
.chip .ic { width: 16px; height: 16px; color: var(--ink-400); }
.chip:hover { border-color: var(--blue-600); background: var(--blue-100); }
.chip:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.chip-n {
  min-width: 20px; padding: 0 var(--e1); text-align: center;
  font-size: .6875rem; font-weight: 700; color: var(--ink-500);
  background: var(--ink-50); border-radius: var(--r-tudo);
}
.chip.on {
  color: var(--blue-800); background: var(--blue-100); border-color: var(--blue-600);
}
.chip.on .ic, .chip.on .chip-n { color: var(--blue-800); }
.chip.on .chip-n { background: var(--branco); }

.btn-limpar-f {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; margin-top: var(--e3); padding: 0 var(--e4); cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--red-700);
  background: var(--red-100); border: 1px solid var(--red-600);
  border-radius: var(--r-tudo);
}
.btn-limpar-f .ic { width: 16px; height: 16px; }
.btn-limpar-f:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

.faq-grupo {
  margin: var(--e6) 0 var(--e3); font-size: 1rem; font-weight: 700;
  color: var(--ink-800);
}
.faq-grupo:first-child { margin-top: 0; }

.faq-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin: var(--e4) 0 0; padding-top: var(--e3);
  border-top: 1px solid var(--ink-100);
}
.etq-mini {
  min-height: 44px; padding: 0 var(--e3); cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 600; color: var(--ink-600);
  background: var(--ink-50); border: 1px solid var(--ink-200);
  border-radius: var(--r-tudo);
}
.etq-mini:hover { color: var(--blue-800); background: var(--blue-100); border-color: var(--blue-600); }
.etq-mini:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.faq-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e3);
  font-size: .75rem; font-weight: 600; color: var(--blue-800);
  border: 1px solid var(--blue-100); border-radius: var(--r-tudo);
}
.etq-artigos {
  margin-left: auto; padding: 0 var(--e2); font-size: .6875rem; font-weight: 600;
  color: var(--ink-500); white-space: nowrap;
}
.faq-vazio {
  padding: var(--e6) var(--e4); text-align: center; color: var(--ink-500);
  background: var(--ink-50); border-radius: var(--r-g);
}
.faq-vazio b { color: var(--ink-800); }
.secao-nao-usamos { margin-top: var(--e7); }
.secao-nao-usamos .pergunta-t { color: var(--ink-700); }

/* no celular o rodape do cartao respira melhor empilhado */
@media (max-width: 480px) {
  .etq-artigos { margin-left: 0; width: 100%; padding: var(--e1) 0 0; }
}

/* a busca do FAQ no topo da tela (Samuel, 04/09): e a primeira coisa da area,
   antes do titulo. Um pouco maior, porque e ela que a pessoa procura. */
.faq-busca-topo { margin: 0 0 var(--e5); }
.faq-busca-topo input {
  min-height: 52px; font-size: 1.0625rem;
  background: var(--branco); border-color: var(--ink-300); box-shadow: var(--sombra-1);
}
.faq-busca-topo .ic { width: 22px; height: 22px; color: var(--blue-600); }

/* as duvidas do dia a dia, na home: lista de links diretos para a resposta */
.duvidas { display: grid; gap: var(--e2); }
@media (min-width: 820px) { .duvidas { grid-template-columns: 1fr 1fr; } }
.duvida {
  display: flex; align-items: center; gap: var(--e3); min-height: 44px;
  padding: var(--e2) var(--e4); font-size: .875rem; font-weight: 600;
  color: var(--ink-800); background: var(--branco);
  border: 1px solid var(--ink-100); border-radius: var(--r-m);
}
.duvida .ic { margin-left: auto; width: 16px; height: 16px; color: var(--ink-400); flex: 0 0 auto; }
.duvida:hover { border-color: var(--blue-600); background: var(--blue-100); color: var(--blue-800); }
.duvida:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

/* "voce quis dizer": zero resultado sem saida e o pior desfecho da busca */
.faq-sugestoes { display: grid; gap: var(--e2); margin: var(--e4) 0 0; }
.faq-sugestao-t { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--ink-600); }
.faq-sugestao {
  display: flex; align-items: center; min-height: 44px; padding: var(--e2) var(--e4);
  font-size: .875rem; font-weight: 600; color: var(--blue-800);
  background: var(--blue-100); border: 1px solid var(--blue-600); border-radius: var(--r-m);
}
.faq-sugestao:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

/* --------------------------------------------------------------- CARTAO
   O cartao do FAQ (05/09). Deixou de ser <details> para a etiqueta poder
   ficar visivel com o cartao fechado sem virar botao dentro de botao.
   Tres zonas sempre visiveis (pergunta, mini-explicacao, etiquetas) e a
   resposta, que abre embaixo.                                            */
.cartao {
  background: var(--branco); border: 1px solid var(--ink-100);
  border-radius: var(--r-m); margin-bottom: var(--e3);
  padding: var(--e2) var(--e4) var(--e3);
  transition: border-color var(--transicao);
}
.cartao.aberto { border-color: var(--ink-300); box-shadow: var(--sombra-1); }

.cartao-p { margin: 0; font-size: 1rem; }
.cartao-abrir {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  min-height: 44px; padding: var(--e2) 0; cursor: pointer; text-align: left;
  font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink-900);
  background: none; border: 0;
}
.cartao-abrir:hover { color: var(--blue-800); }
.cartao-abrir:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.cartao-abrir .ic {
  margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px;
  color: var(--ink-400); transition: transform var(--transicao);
}
.cartao.aberto .cartao-abrir .ic { transform: rotate(90deg); color: var(--blue-600); }

.cartao-resumo {
  margin: 0 0 var(--e3); font-size: .875rem; line-height: 1.5;
  color: var(--ink-600);
}

.cartao-etqs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin: 0;
}
/* o titulo do grupo leva ao filtro daquele modulo */
.faq-grupo-l {
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: none;
}
.faq-grupo-l:hover { color: var(--blue-800); text-decoration: underline; }
.faq-grupo-l:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

.cartao .resposta { padding: var(--e3) 0 0; margin-top: var(--e3);
  border-top: 1px solid var(--ink-100); }
.cartao .resposta > :last-child { margin-bottom: 0; }
.cartao .faq-pe { border-top: 0; margin-top: var(--e3); padding-top: 0; }

.cartao-etqs { margin-top: var(--e2); }

/* ------------------------------------------------- INDICE DE MODULOS
   Sem filtro, o FAQ mostra os modulos em vez das 284 perguntas. Medido em
   05/09: com o resumo no cartao, a lista inteira ficou com 83 telas de
   celular. Google e o help center do GoHighLevel tambem dividem antes de
   listar.                                                                */
.faq-modulos { display: grid; gap: var(--e2); margin: var(--e3) 0 var(--e4); }
@media (min-width: 640px) { .faq-modulos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .faq-modulos { grid-template-columns: repeat(3, 1fr); } }

.faq-modulo {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 56px; padding: var(--e2) var(--e4);
  font-size: .9375rem; font-weight: 600; color: var(--ink-800);
  background: var(--branco); border: 1px solid var(--ink-100);
  border-radius: var(--r-m); text-decoration: none;
}
.faq-modulo .ic { width: 20px; height: 20px; color: var(--blue-600); flex: 0 0 auto; }
.faq-modulo-n { flex: 1 1 auto; }
.faq-modulo-c {
  min-width: 26px; padding: 0 var(--e2); text-align: center;
  font-size: .75rem; font-weight: 700; color: var(--ink-600);
  background: var(--ink-50); border-radius: var(--r-tudo);
}
.faq-modulo:hover {
  border-color: var(--blue-600); background: var(--blue-100); color: var(--blue-800);
}
.faq-modulo:hover .faq-modulo-c { background: var(--branco); }
.faq-modulo:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

/* saida escrita por extenso, nunca so a seta (Samuel, 27/08) */
.faq-saida {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--e3); font-size: .875rem; font-weight: 600;
  color: var(--blue-800); border-radius: var(--r-p);
}
.faq-saida:hover { background: var(--blue-100); }
.faq-saida:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

/* ---------------------------------------------------- BARRA DE FILTRO
   Diz o que esta sendo mostrado e deixa tirar um filtro por vez. Antes o
   filtro mudava e a tela nao avisava: a lista encolhia e parecia sumico.  */
.faq-filtrando {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin: 0 0 var(--e4);
}
.faq-filtrando-r {
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-500);
}
.faq-ficha-ativa {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e3); cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--blue-800); background: var(--blue-100);
  border: 1px solid var(--blue-600); border-radius: var(--r-tudo);
}
.faq-ficha-ativa:hover { background: var(--branco); }
.faq-ficha-ativa:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }