/* ============================================================
   Sem Marca D'Água — interface v2
   Casca visual nova sobre o mesmo app.js / lib. Direção: "relatório de
   bancada" — papel off-white, tinta quase-preta, dados em mono, hairlines,
   abas numeradas e o verde reservado à confirmação.

   Marca conforme o branding kit "Gota Cifrada": gota de traço contínuo que
   evolui para segmentos cifrados, SEM ponto verde. Paleta oficial: carvão
   #111113, branco gelo #F7F7F8, cinza #6B7280 e âmbar #B45309 como aviso de
   reserva. Não há verde na identidade. Tipografia Inter na interface e
   JetBrains Mono nos dados técnicos, sem webfonts por causa da CSP.
   Assinaturas: lockup horizontal na barra superior, lockup compacto (símbolo
   + SMDA) em telas estreitas e lockup empilhado no rodapé. O símbolo vem dos
   PNG do kit, com a versão negativa no tema escuro; o desenho não é
   redesenhado nem alterado. Sem gradientes, sem sombras pesadas, sem escudos
   ou cadeados, com respiro preservado ao redor do símbolo.

   Dois valores funcionais ficam fora da paleta, por acessibilidade: o cinza
   secundário da interface é #5B6270, porque o #6B7280 do kit fica em 4,5:1
   exatos sobre o fundo claro e reprova em texto pequeno, e o vermelho de erro
   distingue falha de aviso. O #6B7280 permanece na assinatura da marca.
   ============================================================ */

/* ---------- Tokens ---------- */

:root /* tema:claro */ {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #eff0f2;
  --ink: #111113;
  --ink-2: #2b2d33;
  --muted: #5b6270;
  --line: #e3e5e9;
  --line-strong: #c9ccd3;
  --control-line: #767c88;
  --musgo: #556b2f;
  --accent: #111113;
  --on-accent: #f7f7f8;
  --simbolo: url("assets/brand/gota-cifrada-simbolo.png");
  --cifra-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='308'%3E%3Cpath d='M0 17.5h48M58 17.5h45M113 17.5h52M175 17.5h28M212 17.5h29M252 17.5h44M309 17.5h23M344 17.5h55M411 17.5h49M471 17.5h56M0 73.5h19M31 73.5h20M63 73.5h66M139 73.5h30M178 73.5h65M254 73.5h41M310 73.5h40M363 73.5h22M396 73.5h51M460 73.5h62M0 129.5h21M33 129.5h20M64 129.5h57M133 129.5h62M207 129.5h23M244 129.5h32M286 129.5h65M363 129.5h37M411 129.5h60M483 129.5h33M0 185.5h43M55 185.5h26M92 185.5h48M150 185.5h25M185 185.5h64M259 185.5h32M303 185.5h22M336 185.5h36M386 185.5h26M423 185.5h31M464 185.5h61M0 241.5h41M52 241.5h26M92 241.5h53M157 241.5h59M228 241.5h19M259 241.5h37M305 241.5h59M376 241.5h74M462 241.5h71M0 297.5h65M80 297.5h65M154 297.5h50M218 297.5h20M251 297.5h45M310 297.5h24M343 297.5h51M408 297.5h19M441 297.5h38M489 297.5h22' fill='none' stroke='%23b9bec7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --cifra-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='308'%3E%3Cpath d='M0 45.5h32M41 45.5h33M86 45.5h55M154 45.5h45M212 45.5h52M276 45.5h74M362 45.5h27M399 45.5h24M435 45.5h68M515 45.5h28M0 101.5h51M63 101.5h35M109 101.5h38M162 101.5h34M209 101.5h44M264 101.5h44M322 101.5h48M384 101.5h24M420 101.5h56M491 101.5h27M0 157.5h53M66 157.5h68M148 157.5h65M223 157.5h20M255 157.5h71M336 157.5h59M406 157.5h53M474 157.5h56M0 213.5h29M42 213.5h48M101 213.5h44M159 213.5h35M206 213.5h56M273 213.5h30M315 213.5h36M363 213.5h65M442 213.5h43M496 213.5h29M0 269.5h57M72 269.5h68M151 269.5h35M199 269.5h31M241 269.5h21M275 269.5h29M314 269.5h23M350 269.5h29M394 269.5h34M443 269.5h47M503 269.5h14' fill='none' stroke='%23b9bec7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --cifra-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='308'%3E%3Cpath d='M96 52v-8h8M394 72h8v8M228 120v8h-8M46 184h8v8M470 220v-8h8M316 260v8h-8M168 100h10M356 156h8M122 240h12M512 296h9' fill='none' stroke='%23b9bec7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --cifra-min: 0.03;
  --cifra-max: 0.2;
  --cifra-parado: 0.13;
  --confirma: #111113;
  --confirma-soft: #eceef1;
  --warn: #b45309;
  --warn-text: #b45309;
  --warn-soft: #fbf3e6;
  --err: #b91c1c;
  --err-soft: #fbecec;
  --score-base: #6b7280;
  --score-duvidoso: #b45309;
  --score-medio: #9a3412;
  --score-alto: #6b2810;
  --overlay: rgba(17, 17, 19, 0.6);
  --ponto-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23d3d6dc'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235b6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) /* tema:escuro */ {
    --bg: #0b0c0e;
    --surface: #15171b;
    --surface-2: #1c1f24;
    --ink: #ecedee;
    --ink-2: #c9ccd3;
    --muted: #a1a7b3;
    --line: #2a2e35;
    --line-strong: #3a3f48;
    --control-line: #6b727e;
    --musgo: #9cb37a;
    --accent: #ecedee;
    --on-accent: #111113;
    --simbolo: url("assets/brand/gota-cifrada-simbolo-negativo.png");
    --cifra-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='308'%3E%3Cpath d='M0 17.5h48M58 17.5h45M113 17.5h52M175 17.5h28M212 17.5h29M252 17.5h44M309 17.5h23M344 17.5h55M411 17.5h49M471 17.5h56M0 73.5h19M31 73.5h20M63 73.5h66M139 73.5h30M178 73.5h65M254 73.5h41M310 73.5h40M363 73.5h22M396 73.5h51M460 73.5h62M0 129.5h21M33 129.5h20M64 129.5h57M133 129.5h62M207 129.5h23M244 129.5h32M286 129.5h65M363 129.5h37M411 129.5h60M483 129.5h33M0 185.5h43M55 185.5h26M92 185.5h48M150 185.5h25M185 185.5h64M259 185.5h32M303 185.5h22M336 185.5h36M386 185.5h26M423 185.5h31M464 185.5h61M0 241.5h41M52 241.5h26M92 241.5h53M157 241.5h59M228 241.5h19M259 241.5h37M305 241.5h59M376 241.5h74M462 241.5h71M0 297.5h65M80 297.5h65M154 297.5h50M218 297.5h20M251 297.5h45M310 297.5h24M343 297.5h51M408 297.5h19M441 297.5h38M489 297.5h22' fill='none' stroke='%233f4550' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --cifra-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='308'%3E%3Cpath d='M0 45.5h32M41 45.5h33M86 45.5h55M154 45.5h45M212 45.5h52M276 45.5h74M362 45.5h27M399 45.5h24M435 45.5h68M515 45.5h28M0 101.5h51M63 101.5h35M109 101.5h38M162 101.5h34M209 101.5h44M264 101.5h44M322 101.5h48M384 101.5h24M420 101.5h56M491 101.5h27M0 157.5h53M66 157.5h68M148 157.5h65M223 157.5h20M255 157.5h71M336 157.5h59M406 157.5h53M474 157.5h56M0 213.5h29M42 213.5h48M101 213.5h44M159 213.5h35M206 213.5h56M273 213.5h30M315 213.5h36M363 213.5h65M442 213.5h43M496 213.5h29M0 269.5h57M72 269.5h68M151 269.5h35M199 269.5h31M241 269.5h21M275 269.5h29M314 269.5h23M350 269.5h29M394 269.5h34M443 269.5h47M503 269.5h14' fill='none' stroke='%233f4550' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --cifra-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='308'%3E%3Cpath d='M96 52v-8h8M394 72h8v8M228 120v8h-8M46 184h8v8M470 220v-8h8M316 260v8h-8M168 100h10M356 156h8M122 240h12M512 296h9' fill='none' stroke='%233f4550' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --cifra-min: 0.025;
    --cifra-max: 0.17;
    --cifra-parado: 0.11;
    --confirma: #ecedee;
    --confirma-soft: #23262c;
    --warn: #f59e0b;
    --warn-text: #f59e0b;
    --warn-soft: #2a2010;
    --err: #f87171;
    --err-soft: #2c1616;
    --score-base: #9ca3af;
    --score-duvidoso: #fcd34d;
    --score-medio: #f59e0b;
    --score-alto: #d97706;
    --overlay: rgba(0, 0, 0, 0.68);
    --ponto-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23262a31'/%3E%3C/svg%3E");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23a1a7b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

:root[data-theme="escuro"] /* tema:escuro-forcado */ {
    --bg: #0b0c0e;
    --surface: #15171b;
    --surface-2: #1c1f24;
    --ink: #ecedee;
    --ink-2: #c9ccd3;
    --muted: #a1a7b3;
    --line: #2a2e35;
    --line-strong: #3a3f48;
    --control-line: #6b727e;
    --musgo: #9cb37a;
    --accent: #ecedee;
    --on-accent: #111113;
    --simbolo: url("assets/brand/gota-cifrada-simbolo-negativo.png");
    --cifra-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='308'%3E%3Cpath d='M0 17.5h48M58 17.5h45M113 17.5h52M175 17.5h28M212 17.5h29M252 17.5h44M309 17.5h23M344 17.5h55M411 17.5h49M471 17.5h56M0 73.5h19M31 73.5h20M63 73.5h66M139 73.5h30M178 73.5h65M254 73.5h41M310 73.5h40M363 73.5h22M396 73.5h51M460 73.5h62M0 129.5h21M33 129.5h20M64 129.5h57M133 129.5h62M207 129.5h23M244 129.5h32M286 129.5h65M363 129.5h37M411 129.5h60M483 129.5h33M0 185.5h43M55 185.5h26M92 185.5h48M150 185.5h25M185 185.5h64M259 185.5h32M303 185.5h22M336 185.5h36M386 185.5h26M423 185.5h31M464 185.5h61M0 241.5h41M52 241.5h26M92 241.5h53M157 241.5h59M228 241.5h19M259 241.5h37M305 241.5h59M376 241.5h74M462 241.5h71M0 297.5h65M80 297.5h65M154 297.5h50M218 297.5h20M251 297.5h45M310 297.5h24M343 297.5h51M408 297.5h19M441 297.5h38M489 297.5h22' fill='none' stroke='%233f4550' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --cifra-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='308'%3E%3Cpath d='M0 45.5h32M41 45.5h33M86 45.5h55M154 45.5h45M212 45.5h52M276 45.5h74M362 45.5h27M399 45.5h24M435 45.5h68M515 45.5h28M0 101.5h51M63 101.5h35M109 101.5h38M162 101.5h34M209 101.5h44M264 101.5h44M322 101.5h48M384 101.5h24M420 101.5h56M491 101.5h27M0 157.5h53M66 157.5h68M148 157.5h65M223 157.5h20M255 157.5h71M336 157.5h59M406 157.5h53M474 157.5h56M0 213.5h29M42 213.5h48M101 213.5h44M159 213.5h35M206 213.5h56M273 213.5h30M315 213.5h36M363 213.5h65M442 213.5h43M496 213.5h29M0 269.5h57M72 269.5h68M151 269.5h35M199 269.5h31M241 269.5h21M275 269.5h29M314 269.5h23M350 269.5h29M394 269.5h34M443 269.5h47M503 269.5h14' fill='none' stroke='%233f4550' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --cifra-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='308'%3E%3Cpath d='M96 52v-8h8M394 72h8v8M228 120v8h-8M46 184h8v8M470 220v-8h8M316 260v8h-8M168 100h10M356 156h8M122 240h12M512 296h9' fill='none' stroke='%233f4550' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --cifra-min: 0.025;
    --cifra-max: 0.17;
    --cifra-parado: 0.11;
    --confirma: #ecedee;
    --confirma-soft: #23262c;
    --warn: #f59e0b;
    --warn-text: #f59e0b;
    --warn-soft: #2a2010;
    --err: #f87171;
    --err-soft: #2c1616;
    --score-base: #9ca3af;
    --score-duvidoso: #fcd34d;
    --score-medio: #f59e0b;
    --score-alto: #d97706;
    --overlay: rgba(0, 0, 0, 0.68);
    --ponto-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23262a31'/%3E%3C/svg%3E");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23a1a7b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: dark;
}

:root {
  --font-ui: Inter, "Inter Variable", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --topbar-h: 60px;
  --gutter: clamp(16px, 4vw, 40px);
  --secao: clamp(64px, 9vw, 120px);
  --ticks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M25 0v10M50 0v10M75 0v10' stroke='rgba(128,128,128,0.55)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}
@media (min-width: 721px) {
  html { scroll-padding-top: calc(var(--topbar-h) + 16px); }
}

html { background-color: var(--bg); }

body {
  margin: 0;
  background-color: transparent;
  color: var(--ink);
  font: 16px/1.6 var(--font-ui);
  font-feature-settings: "tnum" 1, "cv11" 1;
}

:where(button, a, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

button, input, select, summary, [role="button"] { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
button, input, select { font-family: inherit; }
code { font-family: var(--font-mono); font-size: 0.92em; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 14px;
  border-radius: var(--r-2);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus-visible { top: 10px; }

.mono, .eyebrow, .secao-num, .passo-num, .extra-k, .trust-k, .formatos, .rodape-dados dt,
.result-file, .chip, .status, .tour-contador, .formatos-tabela th, .stats-total b {
  font-family: var(--font-mono);
}

/* ---------- Fundo: escrita oculta ----------
   Três camadas empilhadas de linhas mascaradas e colchetes cifrados. Cada uma
   respira em seu próprio ritmo, longo e defasado, dando a impressão de texto
   sendo escrito, esvanecendo e voltando. Só opacidade e transform animam, para
   o trabalho ficar no compositor. A intensidade vem da opacidade, não da cor. */

.cifra {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.cifra span {
  position: absolute;
  inset: -80px;
  display: block;
  background-repeat: repeat;
  opacity: var(--cifra-min);
}

.cifra span:nth-child(1) {
  background-image: var(--cifra-a);
  animation: cifra-escreve 21s ease-in-out 0s infinite;
}
.cifra span:nth-child(2) {
  background-image: var(--cifra-b);
  animation: cifra-escreve 26s ease-in-out -13s infinite;
}
.cifra span:nth-child(3) {
  background-image: var(--cifra-c);
  animation: cifra-glifos 33s ease-in-out -22s infinite;
}

@keyframes cifra-escreve {
  0%   { opacity: var(--cifra-min); transform: translate3d(0, 0, 0); }
  18%  { opacity: var(--cifra-max); transform: translate3d(0, -2px, 0); }
  44%  { opacity: var(--cifra-max); transform: translate3d(0, -4px, 0); }
  70%  { opacity: var(--cifra-min); transform: translate3d(0, -3px, 0); }
  100% { opacity: var(--cifra-min); transform: translate3d(0, 0, 0); }
}

@keyframes cifra-glifos {
  0%   { opacity: var(--cifra-min); transform: translate3d(0, 0, 0); }
  26%  { opacity: var(--cifra-max); transform: translate3d(2px, -2px, 0); }
  60%  { opacity: var(--cifra-min); transform: translate3d(1px, -3px, 0); }
  100% { opacity: var(--cifra-min); transform: translate3d(0, 0, 0); }
}

/* ---------- Barra superior ---------- */

.topbar {
  position: static;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease);
}
.topbar.scrolled { border-bottom-color: var(--line); }

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  min-height: 44px;
}
.marca-simbolo {
  width: 20px; height: 28px;
  flex: none;
  display: block;
  background: var(--simbolo) center / contain no-repeat;
}

/* Assinatura curta do kit: sigla com o ponto verde proprietário. */
.marca-sigla {
  display: none;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.topnav {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}
.topnav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: var(--r-2);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 120ms var(--ease), background-color 120ms var(--ease);
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); }

.topbar-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tema {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--control-line);
  border-radius: var(--r-2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}
.tema:hover { border-color: var(--ink); background: var(--surface-2); }
.tema-icone { width: 20px; height: 20px; grid-area: 1 / 1; display: none; }
.tema[data-tema="claro"] .tema-icone-sol,
.tema[data-tema="escuro"] .tema-icone-lua,
.tema[data-tema="sistema"] .tema-icone-auto,
.tema:not([data-tema]) .tema-icone-auto { display: block; }

.btn-tour { white-space: nowrap; }

.btn-marca { white-space: nowrap; padding-inline: 14px; }
/* Sem ícone, esconder o rótulo deixaria um botão vazio. Em tela estreita entra
   a forma curta, que continua sendo o nome acessível do botão porque a outra
   sai da árvore por display:none. */
.btn-marca-curto { display: none; }
@media (max-width: 899px) {
  .btn-marca { padding-inline: 12px; }
  .btn-marca-rotulo { display: none; }
  .btn-marca-curto { display: inline; }
}

/* ---------- Página ---------- */

.pagina {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--secao);
}
@media (min-width: 900px) {
  .pagina, .rodape-inner { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: clamp(28px, 5vw, 64px) 0 0;
}

.hero-copy { position: relative; z-index: 1; max-width: 58ch; }
.hero-drop { position: relative; z-index: 1; }
.hero-mais { max-width: 58ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.45;
}
.eyebrow .dot,
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--confirma);
  flex: none;
  display: inline-block;
}

.hero-title {
  margin: 0;
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.tagline {
  margin: 18px 0 0;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
}

.sub {
  margin: 0;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  color: var(--muted);
  max-width: 54ch;
}

.trust {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.trust li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}
.trust-k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.trust-v { color: var(--ink-2); }

/* ---------- Área de envio (#drop) ---------- */

.drop {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 300px;
  padding: 44px 28px 36px;
  background: var(--surface);
  background-image: var(--ponto-tile);
  background-size: 18px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), transform 160ms var(--ease);
}
.drop:hover { border-color: var(--ink); }
.drop:hover .canto { transform: translate(var(--cx, 0), var(--cy, 0)) scale(1.05); }
.drop.over {
  border-color: var(--ink);
  background-color: var(--surface-2);
  background-image: none;
  transform: scale(1.01);
}
.drop.over .drop-simbolo { transform: translateY(-4px) scale(1.06); opacity: 1; }
.drop.over .drop-title { color: var(--ink); }

.canto {
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--ink);
  transition: transform 160ms var(--ease);
  pointer-events: none;
}
.canto-tl { top: 10px; left: 10px; border-top-width: 1.5px; border-left-width: 1.5px; --cx: -2px; --cy: -2px; }
.canto-tr { top: 10px; right: 10px; border-top-width: 1.5px; border-right-width: 1.5px; --cx: 2px; --cy: -2px; }
.canto-bl { bottom: 10px; left: 10px; border-bottom-width: 1.5px; border-left-width: 1.5px; --cx: -2px; --cy: 2px; }
.canto-br { bottom: 10px; right: 10px; border-bottom-width: 1.5px; border-right-width: 1.5px; --cx: 2px; --cy: 2px; }
.drop.over .canto { transform: translate(calc(var(--cx) * -3), calc(var(--cy) * -3)); }

.drop-simbolo {
  width: 46px; height: 64px;
  display: block;
  margin-bottom: 6px;
  background: var(--simbolo) center / contain no-repeat;
  opacity: 0.9;
  transition: transform 160ms var(--ease), opacity 160ms var(--ease);
}

.drop-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}

.drop-hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.formatos { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.formatos span {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--bg);
  color: var(--ink-2);
}
.drop-hint-texto { font-size: 13px; }

/* ---------- Status ---------- */

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 13px;
  color: var(--muted);
  border-left: 2px solid var(--line-strong);
  background: var(--surface);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}
.status.error {
  color: var(--err);
  border-left-color: var(--err);
  background: var(--err-soft);
}

.spin {
  display: inline-block;
  width: 14px; height: 14px;
  flex: none;
  border: 2px solid var(--line-strong);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Painel de resultado (gerado pelo app.js) ---------- */

.result {
  position: relative;
  margin-top: 40px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--confirma);
  border-radius: var(--r-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  animation: surgir 320ms var(--ease) both;
}
.result:focus { outline: none; }
.result:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.result > * { min-width: 0; }

.result::before,
.detector-card::before,
.rewrite-card::before {
  position: absolute;
  top: -1px; left: 18px;
  transform: translateY(-50%);
  padding: 0 8px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
  white-space: nowrap;
}
.result::before { content: "01 · Limpeza"; top: -2px; }

.result-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.result-head .check {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--confirma-soft);
  color: var(--confirma);
  border: 1.5px solid var(--confirma);
  font-size: 15px;
  font-weight: 700;
  animation: confirmar 320ms var(--ease) 120ms both;
}

.result-file {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-1);
  font-size: 13px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.stats-total {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}
/* Nada encontrado é um bom resultado, e a cor diz isso. O --musgo já vale
   #556b2f no tema claro e #9cb37a no escuro — verde musgo e verde claro — e já
   é o verde funcional das seções, então não entra cor nova na paleta. Precisa
   vir depois de .stats-total: as duas têm a mesma especificidade e quem vence
   é a última. */
.stats-total-limpo {
  color: var(--musgo);
  font-weight: 700;
}
.stats-total b {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-variant-numeric: tabular-nums;
}
.chip b { color: var(--ink); font-weight: 600; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-variant-emoji: text;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), transform 120ms var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--control-line); }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink); background: var(--surface-2); }

.linklike {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 8px 6px;
  min-height: 44px;
  margin-left: auto;
}
.linklike:hover { color: var(--ink); }

.note {
  margin: 14px 0 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--line-strong);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.note.aviso {
  padding: 10px 12px;
  border-left-color: var(--warn);
  background: var(--warn-soft);
  color: var(--ink-2);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}
.note.error, .error {
  color: var(--err);
}
.note.error {
  padding: 10px 12px;
  border-left-color: var(--err);
  background: var(--err-soft);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}
.note > input {
  display: block;
  width: 100%;
  margin-top: 8px;
}

details.preview {
  margin: 18px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 13px;
}
details.preview summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
details.preview summary::-webkit-details-marker { display: none; }
details.preview summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--muted);
  flex: none;
}
details.preview[open] summary::after { content: "−"; }
details.preview summary:hover { background: var(--surface-2); }
details.preview pre {
  margin: 0;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
  tab-size: 2;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* ---------- Sub-painéis: detector e reescrita ---------- */

.detector-card,
.rewrite-card {
  position: relative;
  margin-top: 28px;
  padding: 24px 20px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  min-width: 0;
}
.detector-card::before { content: "02 · Detector"; }
.rewrite-card::before { content: "03 · Reescrita"; }

.rewrite-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.detector-card > .rewrite-title + .note,
.rewrite-card > .rewrite-title + .note { margin-top: 8px; }
.detector-card > .btn,
.rewrite-card > .btn { margin-top: 14px; }
.detector-card > div[aria-live] > *:first-child { margin-top: 16px; }

.inline-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
}
.inline-controls select,
.inline-controls input[type="password"],
.inline-controls input[type="text"],
.note > input[type="password"] {
  appearance: none;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--control-line);
  border-radius: var(--r-1);
  font-size: 14px;
  min-width: min(220px, 100%);
  max-width: 100%;
  transition: border-color 120ms var(--ease);
}
.inline-controls select {
  padding-right: 36px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
.inline-controls input[type="password"],
.inline-controls input[type="text"],
.note > input[type="password"] {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.inline-controls select:hover,
.inline-controls input:hover,
.note > input:hover { border-color: var(--ink); }

.inline-controls input::placeholder,
.note > input::placeholder { color: var(--muted); opacity: 1; }

.inline-controls #rw-provedor { min-width: min(150px, 100%); flex: 0 0 auto; }
.inline-controls #rw-modelo { flex: 1 1 220px; }
.inline-controls #rw-key { flex: 1 1 220px; }

.byok-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.byok-toggle input {
  flex: none;
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--ink);
}

.score-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 12px 0 10px;
  font-size: 14px;
  color: var(--muted);
}
.score-linha b {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.score-bar {
  position: relative;
  height: 10px;
  margin: 0 0 14px;
  background: var(--surface-2);
  background-image: var(--ticks);
  background-size: 100% 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
}
.score-fill {
  height: 100%;
  background: var(--score-base);
  border-radius: 2px;
  transform-origin: left center;
  animation: medir 600ms var(--ease) both;
}
.score-fill.duvidoso { background: var(--score-duvidoso); }
.score-fill.medio { background: var(--score-medio); }
.score-fill.alto { background: var(--score-alto); }

/* ---------- Seções de apresentação ---------- */

.secao-cabeca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: baseline;
  margin: 0 0 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.secao-num {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--line-strong);
  line-height: 1.1;
  align-self: start;
}
.secao-cabeca h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.secao-lead {
  grid-column: 2;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 56ch;
}

/* As seções 01 e 02 são painéis com uma régua de acento no topo: cinza em
   "Como funciona", verde musgo em "Limites da ferramenta". */
.passos {
  margin-top: var(--secao);
  padding: 0 clamp(20px, 3vw, 32px) clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--control-line);
  border-radius: var(--r-3);
}
.passos .secao-cabeca { border-top: 0; padding-top: clamp(20px, 3vw, 28px); margin-bottom: 18px; }

.passos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.passo {
  position: relative;
  padding: 22px 0 22px 56px;
  border-top: 1px solid var(--line);
}
.passo:last-child { border-bottom: 1px solid var(--line); }
.passo-num {
  position: absolute;
  left: 0; top: 24px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.passo h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.passo p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.extras {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
.extra {
  padding: 22px 24px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.extra-k {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.extra h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.extra p:last-child { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.extra strong { color: var(--ink); }

.formatos-tabela { margin-top: 40px; overflow-x: auto; }
.formatos-tabela table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}
.formatos-tabela caption {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-mono);
  padding: 0 0 10px;
}
.formatos-tabela th,
.formatos-tabela td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
.formatos-tabela thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 0;
  padding-top: 0;
}
.formatos-tabela tbody th { font-family: var(--font-ui); font-weight: 600; color: var(--ink); }
.formatos-tabela td { color: var(--ink-2); }
.formatos-tabela tr:last-child th,
.formatos-tabela tr:last-child td { border-bottom: 1px solid var(--line); }
.tabela-nota { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---------- Limites ---------- */

.disclaimer {
  margin-top: var(--secao);
  padding: 0 clamp(20px, 3vw, 32px) clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--musgo);
  border-radius: var(--r-3);
}
.disclaimer .secao-cabeca { border-top: 0; padding-top: clamp(20px, 3vw, 28px); margin-bottom: 18px; }
.disclaimer .secao-num { color: var(--musgo); }
.disclaimer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 74ch;
}
.disclaimer strong { color: var(--ink); }

.faz-nao-faz {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 40px;
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.faz-nao-faz h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-mono);
}
.faz-nao-faz h3 strong { color: var(--ink); }
.faz-nao-faz ul { margin: 0; padding: 0; list-style: none; }
.faz-nao-faz li {
  position: relative;
  padding: 8px 0 8px 18px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.faz-nao-faz li::before {
  content: "";
  position: absolute;
  left: 0; top: 17px;
  width: 8px; height: 1.5px;
  background: var(--line-strong);
}
.faz li::before { background: var(--musgo); }
.faz-nao-faz li strong { color: var(--ink); }
@media (min-width: 720px) {
  .faz-nao-faz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- FAQ ---------- */

.faq { margin-top: var(--secao); }
.faq .secao-cabeca { margin-bottom: 8px; }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  min-height: 56px;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 120ms var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--muted);
  flex: none;
  width: 28px;
  text-align: center;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--muted); }
.faq-item summary:focus-visible { outline-offset: -3px; }
.faq-item p {
  margin: 0;
  padding: 0 44px 20px 4px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 70ch;
}
.faq-item p b { color: var(--ink); }

/* ---------- Rodapé ---------- */

.rodape {
  border-top: 1px solid var(--line);
}
.rodape-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
}
.rodape-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rodape-marca .marca-simbolo { width: 30px; height: 42px; }
.rodape-nome { margin: 0; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.rodape-tag { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.rodape-dados { margin: 0; }
.rodape-dados div { margin: 0; }
.rodape-dados dt {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rodape-dados dd { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------- Tour guiado (gerado por lib/tour.js) ---------- */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--overlay);
  animation: aparecer 160ms var(--ease) both;
}
.tour-overlay.has-highlight { background: transparent; }

.tour-highlight {
  position: fixed;
  z-index: 9999;
  border-radius: var(--r-3);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 200vmax var(--overlay);
  pointer-events: none;
  transition: top 240ms var(--ease), left 240ms var(--ease), width 240ms var(--ease), height 240ms var(--ease);
}

.tour-balloon {
  position: fixed;
  z-index: 10001;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: 18px 18px 14px;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  animation: surgir 200ms var(--ease) both;
}
.tour-balloon::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  transform: rotate(45deg);
  left: var(--seta-x, 50%);
}
.tour-balloon[data-seta='cima']::after { top: -8px; }
.tour-balloon[data-seta='baixo']::after { bottom: -8px; transform: rotate(225deg); }
.tour-balloon[data-seta='']::after { display: none; }

.tour-titulo {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tour-titulo:focus { outline: none; }
.tour-texto {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.tour-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.tour-contador {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tour-nav { display: flex; gap: 8px; }
.tour-btn {
  width: 44px; height: 44px;
  flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease), opacity 120ms var(--ease);
}
.tour-btn:hover:not(:disabled) { border-color: var(--ink); background: var(--surface-2); }
.tour-btn:disabled { opacity: 0.35; cursor: default; }
.tour-btn-primario { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tour-btn-primario:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); }
.tour-btn-fechar { color: var(--muted); border-color: transparent; }

/* ---------- Movimento ---------- */

@keyframes surgir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes confirmar {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes medir {
  from { transform: scaleX(0); }
  to { transform: none; }
}
@keyframes assentar {
  from { transform: translate(calc(var(--cx, 0px) * -4), calc(var(--cy, 0px) * -4)); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.hero-copy > * { animation: surgir 480ms var(--ease) both; }
.hero-copy > :nth-child(1) { animation-delay: 40ms; }
.hero-copy > :nth-child(2) { animation-delay: 100ms; }
.hero-copy > :nth-child(3) { animation-delay: 160ms; }
.hero-copy > :nth-child(4) { animation-delay: 220ms; }
.hero-copy > :nth-child(5) { animation-delay: 280ms; }
.hero-drop { animation: surgir 520ms var(--ease) 200ms both; }
.hero-mais > * { animation: surgir 480ms var(--ease) both; }
.hero-mais > :nth-child(1) { animation-delay: 300ms; }
.hero-mais > :nth-child(2) { animation-delay: 360ms; }
.canto { animation: assentar 360ms var(--ease) 280ms backwards; }

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.js .reveal.in-view { opacity: 1; transform: none; }

/* ---------- Layout responsivo ---------- */

@media (min-width: 600px) {
  .passos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .passo { padding: 26px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .passo-num { position: static; margin-bottom: 18px; }
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .result { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .result > * { grid-column: 1 / -1; }
  .result > .detector-card { grid-column: 1; align-self: start; }
  .result > .rewrite-card { grid-column: 2; align-self: start; }
  .disclaimer .secao-cabeca { grid-template-columns: auto minmax(0, 1fr); }
  .faq-item p { padding-right: 96px; }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
    gap: 0 clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-drop { grid-column: 2; grid-row: 1 / span 2; padding-top: 6px; }
  .hero-mais { grid-column: 1; grid-row: 2; padding-top: 22px; }
  .drop { min-height: 380px; }
}

/* ---------- Dialog: o que são marcas d’água ---------- */

.dlg {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3, 10px);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.dlg::backdrop { background: var(--overlay); }
.dlg-caixa { display: flex; flex-direction: column; max-height: inherit; }

.dlg-topo {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.dlg-titulo { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.dlg-fechar {
  margin-left: auto; flex: none;
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--control-line);
  border-radius: var(--r-2);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}
.dlg-fechar:hover { border-color: var(--ink); background: var(--surface-2); }
.dlg-fechar svg { width: 18px; height: 18px; }

.dlg-corpo { padding: 18px 20px 24px; overflow-y: auto; overscroll-behavior: contain; }
.dlg-lead { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* Espaço do vídeo. Enquanto não há arquivo, mostra o aviso; com o <video>
   dentro, o aviso sai e a proporção 16:9 permanece. */
.dlg-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 22px;
  display: grid; place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-2);
  background: var(--surface-2) var(--ponto-tile);
}
.dlg-video[data-estado="pronto"] { border-style: solid; border-color: var(--line); background: #000; padding: 0; }
.dlg-video video { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: contain; background: #000; }
.dlg-video[data-estado="pronto"] .dlg-video-aviso { display: none; }
.dlg-video-aviso { margin: 0; padding: 0 20px; max-width: 42ch; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.dlg-tipos { display: grid; gap: 14px; margin-bottom: 22px; }
@media (min-width: 640px) { .dlg-tipos { grid-template-columns: 1fr 1fr; } }
.dlg-tipo { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.dlg-tipo-k {
  margin: 0 0 6px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.dlg-tipo h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.01em; }
.dlg-tipo p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.dlg-tipo-nota { margin: 0 !important; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted) !important; font-size: 13px !important; }

.dlg-fig { margin: 0 0 20px; }
.dlg-diagrama { width: 100%; height: auto; display: block; }
.dlg-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.d-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; fill: var(--muted); letter-spacing: 0.06em; }
.d-rot { font-size: 12.5px; font-weight: 600; fill: var(--ink-2); }
.d-caixa { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.d-caixa-ok { stroke: var(--musgo); }
.d-mono { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); }
.d-marca { font-family: var(--font-mono); font-size: 13px; font-weight: 700; fill: var(--warn); }
.d-leg { font-size: 11.5px; fill: var(--muted); }
.d-leg-ok { fill: var(--musgo); }
.d-seta { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.d-barras rect { fill: var(--score-duvidoso); }
.d-barras-ok rect { fill: var(--musgo); }

.dlg-ressalva {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-2);
  background: var(--warn-soft);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.dlg-ressalva strong { color: var(--warn-text); }

/* ---------- Cadastro de acesso ---------- */

.dlg-acesso { width: min(520px, calc(100vw - 32px)); }

.acesso-abas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 0 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
}
.acesso-aba {
  appearance: none;
  min-height: 42px;
  padding: 9px 12px;
  border: 0; background: transparent;
  color: var(--muted);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.acesso-aba + .acesso-aba { border-left: 1px solid var(--line-strong); }
.acesso-aba:hover { background: var(--surface-2); color: var(--ink); }
.acesso-aba[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }

.acesso-form { display: grid; gap: 14px; }
.campo-dupla { display: grid; gap: 14px; }

.campo { display: grid; gap: 5px; }
.campo > label {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="password"],
.campo select {
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--control-line);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;   /* 16px ou menos em iOS provoca zoom; 15 com min-height basta */
  line-height: 1.3;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.campo select {
  padding-right: 38px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.campo input:focus-visible, .campo select:focus-visible { border-color: var(--ink); }
.campo input[aria-invalid="true"] { border-color: var(--err); }

.campo-dica { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.campo-erro { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--err); font-weight: 600; }

.campo-consent { margin-top: 2px; }
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--accent);
  flex: none; cursor: pointer;
}

.acesso-enviar { width: 100%; margin-top: 2px; }

.acesso-erro {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--err);
  border-left-width: 3px;
  border-radius: var(--r-2);
  background: var(--err-soft);
  color: var(--ink-2);
  font-size: 13.5px; line-height: 1.5;
}

.acesso-nota {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.acesso-nota strong { color: var(--ink-2); }

@media (min-width: 721px) {
  .topbar { position: sticky; }
}

@media (max-width: 720px) {
  .topnav { display: none; }
}

@media (max-width: 480px) {
  .marca-nome { display: none; }
  .marca-sigla { display: inline; }
  .hero { padding-top: 20px; }
  .eyebrow { font-size: 10.5px; }
  .drop { min-height: 250px; padding: 40px 18px 28px; }
  .result { padding: 20px 16px; }
  .actions .btn-primary { flex-basis: 100%; }
  .linklike { margin-left: 0; }
  .trust li { grid-template-columns: 1fr; gap: 4px; }
  .secao-cabeca { grid-template-columns: 1fr; row-gap: 6px; }
  .secao-lead { grid-column: 1; }
  .faq-item p { padding-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .cifra span { animation: none !important; transform: none !important; opacity: var(--cifra-parado); }
  .spin { border-top-color: var(--line-strong); border-right-color: var(--ink); }
}

@media print {
  .topbar, .skip, .canto, .btn-tour, .btn-marca, .tema { display: none !important; }
  .dlg { display: none !important; }
  .cifra { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
}