/* Hallmark · shape: scroll story with a pinned radar, then a long document · genre: atmospheric · theme: custom (locked by DESIGN.md) · job: book · idea: "o radar acha os concorrentes e depois acende você" · vibe: "radar ligado numa sala escura, preciso"
 * paper: #0B1116 · accent: #1FA866 · display: Space Grotesk 600 · body: Space Grotesk 400 · hero: text on columns 1 to 7, the radar pinned on 8 to 12 from the hero through "como funciona" · nav: the logo and the one booking button, nothing else · footer: a statement footer with the entity sentence and the legal lines · imagery: the product (the live ChatGPT test, the robots.txt of this page) plus two slots for real captures · signature: the ChatGPT test in the hero, real, with the radar lighting three grey points and then the green one
 * axes: dark/grotesk-sans/chromatic-green · posture: pinned stage · surface: absolute (DESIGN.md on-surface #FFFFFF) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E5 S4 R4 V4 · weakest: P, the client's copy runs past the word budget; kept verbatim and set in a narrow measure with calm blocks between */
/* Hallmark · copy: verbatim · COPY.md is the client's confirmed text (briefing fechado 2026-11-03) */
/* Hallmark · waive 42 · DESIGN.md nav-bar: logo left, small booking button right · the locked system names this nav */
/* Hallmark · waive 7b · DESIGN.md on-surface #FFFFFF, measured 18,99:1 on #0B1116 · the approved system locks pure white for text */
/* Hallmark · waive 38iii · the dashed box is a missing-fact placeholder (patterns: a fact the prompt did not give) · the real vacancy count replaces it */
/* Hallmark · waive 80 · the radar is the logo's own symbol, named as the motion signature in MOTION.md · it closes the page as the brand mark, not as illustration */
/* Hallmark · dismissed F18 · the slot script ships as ./slots.js, external so the CSP stays without inline script */
/* Hallmark · waive 79 · the gap under the hero is filled by the test card, its own section, whose heading and fields show at 1440x900 · the test is block 1 proof in COPY.md */
/* Hallmark · dismissed 54 · the small h1 above the headline is placed by COPY.md ("H1 discreto, acima da headline") and carries the main search term · it stays first in the DOM for search */

/* Hallmark · dismissed 49 · the one booking label is verbatim from COPY.md; full-width and wrapping on phones, one line from 40rem up */
@import url("./tokens.css");
@import url("./base.css");

:root { --gutter: 48px; }
@media (max-width: 60rem) { :root { --gutter: 32px; --section-gap: 96px; } }
@media (max-width: 40rem) { :root { --gutter: 20px; --section-gap: 72px; } }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
body { font-size: var(--text-md); line-height: 1.6; }
@media (max-width: 60rem) { html { scroll-padding-bottom: 88px; } }

/* --- pular, links, foco ------------------------------------------------ */
.pular { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-sticky-nav); padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-outline); border-radius: var(--radius-input); }
.pular:focus-visible { top: var(--space-md); }
.link { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.link:hover { text-decoration-thickness: 2px; }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* --- botão (um só recipe: verde com texto quase preto) -------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1.25 var(--font-body); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn[aria-busy="true"] { cursor: progress; }
.btn:disabled { cursor: not-allowed; }
.btn { white-space: normal; }
@media (min-width: 40.0625rem) { .btn { white-space: nowrap; } }
.btn--sm { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); font-weight: 500; }
.btn--quieto { background: transparent; color: var(--color-ink); border-color: var(--color-outline); }
.btn--quieto:hover { background: var(--color-paper-2); border-color: var(--color-ink-2); }
.btn--cheio { width: 100%; }
@media (max-width: 40rem) { .btn { width: 100%; padding-inline: var(--space-sm); font-size: 0.9375rem; } }
@media (max-width: 26rem) { .btn:not(.btn--quieto) { white-space: nowrap; padding-inline: var(--space-xs); font-size: clamp(0.75rem, 3.75vw, 0.875rem); } }

/* --- navegação ------------------------------------------------------------ */
.topo-nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.topo-nav__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--nav-h); }
.marca { display: inline-flex; align-items: center; min-height: var(--touch); border-radius: 4px; }
.marca:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.marca img { width: 133px; height: auto; }
@media (max-width: 40rem) { .topo-nav .btn { display: none; } .topo-nav__linha { min-height: 60px; } }

/* --- a grade contínua: duas linhas verticais finas atravessam a página ---- */
main { position: relative; }
main::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; max-width: calc(var(--container) + 2px); margin-inline: auto; border-inline: 1px solid var(--color-rule); }
@media (max-width: 75rem) { main::before { display: none; } }
main > * { position: relative; z-index: var(--z-base); }

/* --- blocos e texto -------------------------------------------------------- */
.bloco { padding-block: var(--section-gap) 0; }
.bloco--largo { border-top: 1px solid var(--color-rule); margin-top: var(--section-gap); padding-block: var(--section-gap) 0; }
.bloco--fim { padding-bottom: var(--section-gap); }
.h1-discreto { max-width: 46ch; font: 500 var(--text-sm)/1.5 var(--font-body); color: var(--color-ink-2); letter-spacing: 0; }
.display { margin-top: var(--space-lg); max-width: 15ch; font: 600 var(--text-display)/1.02 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.lede { margin-top: var(--space-lg); max-width: 46ch; font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink-2); }
.secao { max-width: 22ch; font: 600 var(--text-section)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
h3 { margin: 0; font: 600 var(--text-xl)/1.3 var(--font-display); color: var(--color-ink); }
.sub { margin-top: var(--space-md); max-width: 46ch; font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink-2); }
.corpo { margin-top: var(--space-xl); display: grid; gap: var(--space-md); max-width: 60ch; }
.corpo p, .corpo-p { color: var(--color-ink); }
.corpo-p { margin-top: var(--space-lg); max-width: 60ch; }
.acao { margin-top: var(--space-xl); display: grid; justify-items: start; gap: var(--space-sm); }
.micro { max-width: 48ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.rotulo { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink-2); }
.fill { padding: 0 0.25em; border: 1px dashed var(--color-outline); border-radius: 3px; color: var(--color-ink-2); font-weight: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* --- a história com o radar fixo (blocos 1 a 4) ----------------------------- */
.historia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
.historia__texto { min-width: 0; }
.bloco--topo { padding-top: var(--space-2xl); }

.historia__palco { position: relative; }
.palco { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); height: calc(100dvh - var(--nav-h) - var(--space-3xl)); max-height: 560px; display: grid; place-items: center; padding-top: var(--space-2xl); }
@media (max-width: 60rem) {
  .historia { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .historia__palco { order: 0; grid-row: 2; }
  .historia__texto { display: contents; }
  .historia__texto > .bloco--topo { grid-row: 1; }
  .historia__texto > .bloco:not(.bloco--topo) { grid-row: auto; }
  .palco { position: relative; top: auto; height: auto; max-height: none; padding-top: var(--space-2xl); }
  .palco .radar { width: min(100%, 360px); }
}

/* --- o radar ------------------------------------------------------------- */
.radar { width: 100%; max-width: 480px; height: auto; overflow: visible; }
.radar__grade { fill: none; stroke: var(--color-rule); stroke-width: 1; }
.radar__feixe { fill: var(--color-accent-beam); }
.radar__anel { fill: var(--color-rule); }
.radar__giro { transform-box: view-box; transform-origin: 0 0; }
.ponto circle { fill: var(--color-scan); }
.ponto text, .centro__rotulo { font: 400 11px/1 var(--font-data); fill: var(--color-muted); }
.centro__rotulo { fill: var(--color-accent); }
.centro__apagado { fill: none; stroke: var(--color-outline); stroke-width: 1.5; stroke-dasharray: 4 5; }
.centro__aceso { fill: var(--color-accent); }

/* sem script: o radar mostra o estado final (três pontos e o ponto verde) */
.js .ponto { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.js .ponto:nth-child(2) { transition-delay: 450ms; }
.js .ponto:nth-child(3) { transition-delay: 900ms; }
.js .centro__aceso, .js .centro__rotulo { opacity: 0; transform: scale(0.6); transform-box: fill-box; transform-origin: center; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .centro__aceso--fixo { opacity: 1; transform: none; }
.js .palco[data-etapa="problema"] .ponto, .js .palco[data-etapa="como"] .ponto { opacity: 1; }
.js .palco[data-etapa="como"] .centro__aceso, .js .palco[data-etapa="como"] .centro__rotulo { opacity: 1; transform: none; }
.js .palco[data-etapa="como"] .centro__apagado { opacity: 0; }
.js .radar__giro { animation: abertura 2.4s var(--ease-out) both, giro 18s linear 2.4s infinite; }
.js .radar__giro--lento { animation: giro 28s linear infinite; }
@keyframes abertura { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .js .radar__giro { animation: none; }
  .js .ponto { opacity: 1; transition: none; }
  .js .centro__aceso, .js .centro__rotulo { opacity: 1; transform: none; transition: none; }
  .js .centro__apagado { opacity: 0; }
}

/* --- o teste no ChatGPT ------------------------------------------------------ */
.bloco--teste { padding-top: var(--space-xl); }
.teste { max-width: 600px; padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.teste__titulo { font: 600 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.teste__campos { margin-top: var(--space-md); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-md); }
@media (max-width: 40rem) { .teste__campos { grid-template-columns: minmax(0, 1fr); } }
.teste__pergunta { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-input); font: 400 var(--text-sm)/1.5 var(--font-data); color: var(--color-ink); overflow-wrap: anywhere; }
.teste__live { font: 400 var(--text-xs)/1.6 var(--font-data); letter-spacing: 0.02em; color: var(--color-accent); white-space: nowrap; }
.teste__botoes { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.teste__botoes .link { display: inline-flex; align-items: center; min-height: var(--touch); }
.teste__nota { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* --- campos -------------------------------------------------------------- */
.campo { display: grid; gap: var(--space-2xs); align-content: start; }
.campo label, .seg legend { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink-2); }
.campo input { min-height: 48px; width: 100%; min-width: 0; padding: 0 var(--space-sm); background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-outline); border-radius: var(--radius-input); outline: 2px solid transparent; outline-offset: 1px; transition: border-color var(--dur-short) var(--ease-out); }
.teste .campo input { background: var(--color-paper); }
.campo input::placeholder { color: var(--color-muted); opacity: 1; }
.campo input:hover { border-color: var(--color-ink-2); }
.campo input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-focus); }
.campo input[aria-invalid="true"] { border-color: var(--color-error); }
.campo__erro { min-height: 1lh; font-size: var(--text-sm); line-height: 1.5; color: var(--color-error); }
.campo--duplo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.campo--duplo > div { display: grid; gap: var(--space-2xs); align-content: start; }
@media (max-width: 40rem) { .campo--duplo { grid-template-columns: minmax(0, 1fr); } }
.seg { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg legend { width: 100%; margin-bottom: var(--space-xs); padding: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-md); border: 1px solid var(--color-outline); border-radius: var(--radius-input); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.seg label:hover { border-color: var(--color-ink-2); }
.seg input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* --- capturas reais (slots) ---------------------------------------------- */
.captura { margin: var(--space-2xl) 0 0; aspect-ratio: 16 / 10; max-width: 640px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.captura--larga { max-width: none; }
@media (max-width: 40rem) { .captura { aspect-ratio: 4 / 3; } }
.captura__vazio { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-xs); padding: var(--space-lg); text-align: center; color: var(--color-ink-2); font-size: var(--text-sm); }
.captura__vazio .fill { justify-self: center; max-width: 40ch; }
/* captura publicada: a figura assume a proporção da imagem, com legenda abaixo */
.captura--img, .captura--img:where(*) { aspect-ratio: auto; background: none; border: 0; }
.captura--img img { display: block; width: 100%; height: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.captura__legenda { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }

/* --- como funciona ------------------------------------------------------- */
.passos { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-left: 1px solid var(--color-outline); }
.passo { position: relative; padding: 0 0 var(--space-xl) var(--space-xl); }
.passo::before { content: ""; position: absolute; left: -5px; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--color-paper); border: 1px solid var(--color-outline); }
.passo__n { display: block; margin-bottom: var(--space-2xs); font: 400 var(--text-xs)/1.6 var(--font-data); color: var(--color-muted); }
.passo p { margin-top: var(--space-xs); max-width: 54ch; color: var(--color-ink-2); }
.chegada { display: inline-flex; align-items: baseline; gap: var(--space-xs); margin-left: calc(var(--space-xl) * -0); padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); font: 400 var(--text-sm)/1.5 var(--font-data); color: var(--color-ink); }

/* --- duas colunas (quem faz, fundador, fim) ------------------------------ */
.duas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
@media (max-width: 60rem) { .duas { grid-template-columns: minmax(0, 1fr); } }
.pendentes { margin: var(--space-xl) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.pendentes li { display: grid; gap: var(--space-2xs); justify-items: start; }
.codigo__titulo { font-size: var(--text-sm); color: var(--color-ink-2); }
.codigo__caixa { margin: var(--space-xs) 0 0; padding: var(--space-md); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); font: 400 var(--text-xs)/1.7 var(--font-data); color: var(--color-ink-2); overflow-x: auto; white-space: pre; }
.codigo__caixa:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* --- oferta ------------------------------------------------------------------ */
.oferta { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
@media (max-width: 60rem) { .oferta { grid-template-columns: minmax(0, 1fr); } }
.oferta__preco { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
@media (max-width: 60rem) { .oferta__preco { position: static; } }
.metrica { display: grid; gap: var(--space-2xs); }
.metrica__pre { font-size: var(--text-sm); color: var(--color-ink-2); }
.metrica .num { font: 500 var(--text-data-lg)/1.1 var(--font-data); letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.oferta__h { margin-top: var(--space-xl); font-size: var(--text-lg); }
.oferta__h:first-child { margin-top: 0; }
.oferta__itens > p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 60ch; }
.lista { margin: var(--space-sm) 0 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 62ch; }
.lista li { padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-rule); position: relative; color: var(--color-ink); }
.lista li::before { content: ""; position: absolute; left: 2px; top: 1.2em; width: 10px; height: 1px; background: var(--color-outline); }

/* --- vagas de fundador ------------------------------------------------------- */
.duas--fundador { align-items: center; }
.vagas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); max-width: 360px; justify-self: center; width: 100%; }
.vaga { aspect-ratio: 1; border: 1px dashed var(--color-outline); border-radius: 50%; }
.vaga--livre { background: var(--color-accent); border-color: var(--color-accent); }
.secao .fill { font-weight: 500; }
.js .vagas.pulsa .vaga--livre { animation: pulso 1.2s var(--ease-out) 1; }
@keyframes pulso { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* --- FAQ ------------------------------------------------------------------- */
.faq-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
@media (max-width: 60rem) { .faq-grade { grid-template-columns: minmax(0, 1fr); } }
.faq details { border-top: 1px solid var(--color-rule); }
.faq details:last-child { border-bottom: 1px solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: var(--touch); padding: var(--space-lg) 0; font: 600 var(--text-lg)/1.35 var(--font-display); color: var(--color-ink); cursor: pointer; list-style: none; border-radius: 4px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 var(--text-lg)/1 var(--font-data); color: var(--color-ink-2); transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-ink-2); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding: 0 0 var(--space-lg); max-width: 62ch; color: var(--color-ink-2); }

/* --- fechamento e formulário ------------------------------------------- */
.duas--fim { align-items: start; }
.radar--fim { margin-top: var(--space-2xl); max-width: 280px; }
@media (max-width: 60rem) { .radar--fim { display: none; } }
.agenda { display: grid; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.agenda .campo input { background: var(--color-paper); }
.agenda__titulo { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.agenda .btn { margin-top: var(--space-sm); }
.agenda__aviso { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink); }
.turnstile:empty { display: none; }

/* --- rodapé ------------------------------------------------------------------ */
.rodape { border-top: 1px solid var(--color-rule); padding-block: var(--space-2xl); }
.rodape__grade { display: grid; gap: var(--space-md); justify-items: start; }
.rodape__entidade { max-width: 70ch; color: var(--color-ink-2); }
.rodape__legal { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .rodape { padding-bottom: calc(var(--space-2xl) + 80px); } }

/* --- barra fixa no celular --------------------------------------------------- */
.barra { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--color-paper); border-top: 1px solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.js .barra.fora { transform: translateY(100%); opacity: 0; pointer-events: none; }
@media (min-width: 60.0625rem) { .barra { display: none; } }

/* --- teste ao vivo (resposta da IA dentro da página) ----------------------- */
.campo--largo { grid-column: 1 / -1; }
.opcional { color: var(--color-muted); font-weight: 400; }
.teste__turnstile { margin-top: var(--space-md); }
.teste__turnstile:empty { display: none; }
.teste__status { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.teste__status:empty { display: none; }
.teste__status--erro { color: var(--color-error); }
.aovivo { padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.aovivo__pergunta { width: fit-content; max-width: 85%; margin-left: auto; padding: var(--space-xs) var(--space-md); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-input); font: 400 var(--text-sm)/1.5 var(--font-data); color: var(--color-ink); overflow-wrap: anywhere; }
.aovivo__resumo { margin-top: var(--space-md); color: var(--color-ink); }
.aovivo__carregando { margin-top: var(--space-md); color: var(--color-ink-2); }
.aovivo__carregando::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; border-radius: 50%; background: var(--color-accent); vertical-align: 0.05em; animation: aovivo-pulso 1.2s var(--ease-out) infinite; }
@keyframes aovivo-pulso { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .aovivo__carregando::before { animation: none; } }
.aovivo__lista { margin-top: var(--space-md); list-style: none; padding: 0; counter-reset: aovivo; }
.aovivo__lista li { counter-increment: aovivo; display: grid; grid-template-columns: 2ch minmax(0, 1fr); gap: 0 var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.aovivo__lista li::before { content: counter(aovivo) "."; grid-row: span 3; color: var(--color-muted); font-family: var(--font-data); }
.aovivo__nome { font-weight: 600; color: var(--color-ink); }
.aovivo__bairro, .aovivo__motivo { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink-2); }
.aovivo__veredito { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-weight: 600; }
.aovivo__veredito--nao { color: var(--color-warning); }
.aovivo__veredito--sim { color: var(--color-accent-hover); }
.aovivo .btn { margin-top: var(--space-md); }
.captura--img.ao-vivo > img { display: none; }
/* --- página de texto legal ------------------------------------------------- */
.legal { padding-block: var(--space-2xl) var(--space-3xl, 6rem); }
.legal__coluna { max-width: 72ch; }
.legal__voltar { margin-bottom: var(--space-lg); }
.legal__data { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.legal h2 { margin-top: var(--space-2xl); font: 600 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.legal p, .legal li { margin-top: var(--space-sm); color: var(--color-ink-2); line-height: 1.65; }
.legal strong { color: var(--color-ink); font-weight: 600; }
.legal ul { padding-left: 1.2em; list-style: disc; }
.legal__tabela { margin-top: var(--space-sm); overflow-x: auto; }
.legal__tabela:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.legal table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--text-sm); }
.legal th, .legal td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: top; color: var(--color-ink-2); }
.legal th { color: var(--color-ink); font-weight: 600; }