/* Estilos do NeuroLógica.
   Todas as cores, espaçamentos e raios vêm de css/tokens.css — nada de valor
   hexadecimal solto aqui, com uma exceção anotada adiante (data URIs de SVG, que
   não enxergam variáveis CSS). */

/* ============================================================== base ===== */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  /* `clip` em vez de `hidden`: impede que um popover posicionado perto da borda
     crie rolagem horizontal, sem transformar o body num contêiner de rolagem —
     o que quebraria o `position: sticky` do cabeçalho. */
  overflow-x: clip;
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: var(--fonte-serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.carregando { overflow: hidden; }

/* Grão de papel sobre a página inteira. Um único ruído SVG repetido, sem peso de
   imagem e sem requisição. É o que tira o "chapado" das superfícies e dá a
   sensação de impresso. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grao-opacidade, 0.05);
  mix-blend-mode: var(--grao-mistura, multiply);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--fonte-sans);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
  line-height: 1.16;
  margin: 0 0 var(--esp-base);
  letter-spacing: -0.018em;
}
h1 { font-size: clamp(31px, 5.4vw, 54px); }
h2 { font-size: clamp(25px, 3.6vw, 36px); }
h3 { font-size: 19px; letter-spacing: -0.01em; }
h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cor-suave); }

p { margin: 0 0 var(--esp-base); }
strong { color: var(--cor-tinta); font-weight: var(--peso-forte); }
em { font-style: italic; }

a { color: var(--cor-primaria-forte); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
  border-radius: var(--raio-xs);
}

.envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--esp-base);
}
@media (min-width: 720px) { .envelope { padding: 0 var(--esp-2xl); } }

/* Barras de rolagem discretas onde elas ainda são necessárias (log, fórmula
   longa). O padrão do Windows é grosso e cinza, e destoava do resto. */
.rolagem-discreta { scrollbar-width: thin; scrollbar-color: var(--cor-borda) transparent; }
.rolagem-discreta::-webkit-scrollbar { width: 7px; height: 7px; }
.rolagem-discreta::-webkit-scrollbar-track { background: transparent; }
.rolagem-discreta::-webkit-scrollbar-thumb {
  background-color: var(--cor-borda);
  border-radius: var(--raio-pilula);
}
.rolagem-discreta::-webkit-scrollbar-thumb:hover { background-color: var(--cor-borda-forte); }

/* ============================================================== marca ===== */

/* O nome é composto por duas vozes tipográficas: "Neuro" na sans, sólido e
   técnico; "Lógica" na serifa itálica, em verde. A ideia é que a própria palavra
   mostre a junção que dá nome ao projeto. No tamanho do cabeçalho, "Lógica" usa o
   verde de texto (o verde puro não tem contraste para texto pequeno). */
.marca-nome {
  font-size: 19px;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.marca-neuro {
  font-family: var(--fonte-sans);
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
}
.marca-logica {
  font-family: var(--fonte-serif);
  font-style: italic;
  font-weight: var(--peso-forte);
  color: var(--cor-primaria-forte);
  margin-left: 0.04em;
}

.marca-nome--grande { font-size: clamp(34px, 7vw, 52px); }
/* Na versão grande (só na abertura) "Lógica" usa o verde puro e ganha um sublinhado
   ondulado. O sublinhado é uma máscara pintada com currentColor — e não uma imagem com
   a cor embutida — para acompanhar o tema sem valor hexadecimal fixo. */
.marca-nome--grande .marca-logica {
  position: relative;
  color: var(--cor-primaria);
  padding-bottom: 0.12em;
}
.marca-nome--grande .marca-logica::after {
  content: '';
  position: absolute;
  left: 0.02em;
  right: -0.04em;
  bottom: -0.02em;
  height: 0.3em;
  background-color: currentColor;
  opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1.5 4.2 C 22 1.4, 41 5.6, 61 3.1 S 86 1.6, 98.5 3.9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M3 5 C 24 2.6, 44 5.9, 63 4 S 88 2.8, 97 4.6' fill='none' stroke='black' stroke-width='0.8' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1.5 4.2 C 22 1.4, 41 5.6, 61 3.1 S 86 1.6, 98.5 3.9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M3 5 C 24 2.6, 44 5.9, 63 4 S 88 2.8, 97 4.6' fill='none' stroke='black' stroke-width='0.8' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

/* ================================================ tela de carregamento ==== */

/* "O caderno abre": papel com uma retícula pontilhada que se apaga nas bordas, um anel
   de órbita riscado à mão, colchetes de mira e uma cota, e o logotipo sendo desenhado
   traço a traço (a animação está em js/carregamento.js). */
.carregamento {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background-color: var(--cor-superficie);
  background-image:
    radial-gradient(ellipse at center, transparent 0%, transparent 28%, var(--cor-superficie) 72%),
    radial-gradient(circle, color-mix(in srgb, var(--cor-primaria) 30%, transparent) 1px, transparent 1.4px);
  background-size: 100% 100%, 22px 22px;
  background-position: center, center;
  transition: opacity var(--transicao-lenta), visibility var(--transicao-lenta);
}
.carregamento--saindo { opacity: 0; visibility: hidden; }
.carregamento-conteudo { text-align: center; padding: var(--esp-xl); }

/* Até o JavaScript preparar os estados iniciais da animação, o conteúdo fica oculto —
   senão o logotipo apareceria pronto por um quadro e só então "sumiria" para ser
   desenhado. O caminho de movimento reduzido marca a tela como preparada na hora. */
@media (prefers-reduced-motion: no-preference) {
  .carregamento:not(.carregamento--preparado) .carregamento-conteudo { opacity: 0; }
}

.carregamento-marca {
  position: relative;
  width: clamp(236px, 64vw, 300px);
  height: clamp(236px, 64vw, 300px);
  margin: 0 auto var(--esp-lg);
  display: grid;
  place-items: center;
}
.carregamento-anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.anel-traco { stroke: var(--cor-primaria); }
.anel-traco--duplo { stroke: var(--cor-primaria-profunda); opacity: 0.45; }
.anel-traco--interno { stroke: var(--cor-primaria-fraca); opacity: 0.8; }
.anel-mira { stroke: var(--cor-tinta); opacity: 0.7; }
.anel-cota { stroke: var(--cor-suave); opacity: 0.8; }
.anel-cota-texto {
  font-family: var(--fonte-mono);
  font-size: 8.5px;
  fill: var(--cor-suave);
}
.anel-cota-fundo { fill: var(--cor-superficie); }

.carregamento-logo {
  position: relative;
  width: 60%;
  height: 60%;
  color: var(--cor-tinta);
  overflow: visible;
}
.carregamento-logo .logo-soma { fill: var(--cor-primaria); }
.carregamento-logo .logo-soma-hachura { stroke: var(--cor-primaria); }
.carregamento-logo .logo-soma-contorno { stroke: var(--cor-primaria-profunda); }

/* A folga interna garante que a máscara que "escreve" o nome não corte a inclinação
   do itálico nem o sublinhado ondulado. */
.carregamento-nome { display: block; padding: 0 0.12em 0.22em; }

.carregamento-progresso {
  display: block;
  width: 190px;
  height: 12px;
  margin: var(--esp-md) auto 0;
  overflow: visible;
}
.carregamento-progresso path { stroke: var(--cor-primaria); }
.carregamento-status {
  font-family: var(--fonte-sans);
  font-size: 14px;
  color: var(--cor-texto);
  margin-top: var(--esp-sm);
  min-height: 1.3em;
}
.carregamento-legenda {
  font-family: var(--fonte-sans);
  font-size: 14px;
  color: var(--cor-suave);
  margin-top: var(--esp-xs);
}
.carregamento--simples .carregamento-conteudo { animation: aparecer 0.4s ease-out; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================ cabeçalho === */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--cor-superficie-tom);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao-media), box-shadow var(--transicao-media);
}
.cabecalho--rolado {
  border-bottom-color: var(--cor-borda);
  box-shadow: var(--sombra-cartao);
}
.cabecalho-interno {
  max-width: var(--largura-max);
  margin: 0 auto;
  height: var(--altura-cabecalho);
  padding: 0 var(--esp-base);
  display: flex;
  align-items: center;
  gap: var(--esp-base);
}
@media (min-width: 720px) { .cabecalho-interno { padding: 0 var(--esp-2xl); } }

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-sm);
  color: var(--cor-tinta);
  text-decoration: none;
  margin-right: auto;
}
.marca:hover { text-decoration: none; }
.marca-logo { width: 30px; height: 30px; flex-shrink: 0; }
.marca-logo .logo-soma { fill: var(--cor-primaria); }

.navegacao { display: none; gap: var(--esp-lg); }
@media (min-width: 900px) { .navegacao { display: flex; } }
.navegacao a {
  font-family: var(--fonte-serif);
  font-size: 16px;
  color: var(--cor-tinta);
  position: relative;
  padding: var(--esp-xs) 0;
}
/* Risco ondulado sob o link: aparece no hover e marca a seção em que o leitor está
   (aria-current, posto por js/navegacao.js). É uma máscara pintada com a cor do
   acento, então acompanha o tema. */
.navegacao a::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: -4px;
  height: 6px;
  background-color: var(--cor-primaria);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1.5 3.8 C 20 1.6, 38 5.4, 58 3 S 86 1.8, 98.5 3.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1.5 3.8 C 20 1.6, 38 5.4, 58 3 S 86 1.8, 98.5 3.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao-media);
}
.navegacao a:hover { text-decoration: none; }
.navegacao a:hover::after,
.navegacao a[aria-current]::after { transform: scaleX(1); }
.navegacao a[aria-current] { color: var(--cor-primaria-forte); }
/* Número do ato: só aparece no menu do telefone. */
.navegacao-numero { display: none; }

/* ---- Menu do telefone ----
   Abaixo de 900px os links saem do cabeçalho e o botão de menu abre um painel logo
   abaixo dele. O cabeçalho continua com 68px; o painel flutua por cima da página. */
/* .botao-icone.botao-menu (e não só .botao-menu): a regra genérica de .botao-icone vem
   depois neste arquivo e, com a mesma especificidade, mostraria o botão no computador. */
.botao-icone.botao-menu { display: none; }
.menu-traco {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--transicao-media), opacity var(--transicao-rapida);
}
@media (max-width: 899px) {
  .botao-icone.botao-menu { display: grid; }
  .cabecalho--menu-aberto .menu-traco--1 { transform: translateY(4.9px) rotate(42deg); }
  .cabecalho--menu-aberto .menu-traco--2 { opacity: 0; }
  .cabecalho--menu-aberto .menu-traco--3 { transform: translateY(-4.9px) rotate(-42deg); }

  .cabecalho--menu-aberto .navegacao {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--esp-xs) var(--esp-base) var(--esp-base);
    background-color: var(--cor-superficie-tom);
    border-bottom: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-cartao);
    animation: menu-abrir 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cabecalho--menu-aberto .navegacao a {
    display: flex;
    align-items: center;
    gap: var(--esp-md);
    align-self: flex-start;
    font-size: 19px;
    padding: var(--esp-md) var(--esp-xs);
    min-height: 48px;
  }
  .cabecalho--menu-aberto .navegacao a::after { left: 38px; bottom: 8px; }
  .navegacao-numero {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-family: var(--fonte-mono);
    font-size: 12px;
    opacity: 0.8;
  }
}
@keyframes menu-abrir {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.botao-icone {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background-color: var(--cor-superficie);
  color: var(--cor-tinta);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transicao-rapida), border-color var(--transicao-rapida);
}
.botao-icone:hover { border-color: var(--cor-borda-forte); background-color: var(--cor-superficie-tom); }
.botao-icone svg { width: 19px; height: 19px; fill: currentColor; }
.botao-icone .icone-escuro { display: none; }
:root[data-tema='escuro'] .botao-icone .icone-claro { display: none; }
:root[data-tema='escuro'] .botao-icone .icone-escuro { display: block; }

/* ================================================================= hero === */

.hero {
  position: relative;
  overflow: clip;
  padding: clamp(var(--esp-3xl), 9vw, 122px) 0 var(--esp-4xl);
}
/* Arte do topo, em duas versões:
   - .hero-arte (vertical) fica na faixa livre ao lado do texto, em telas largas. O
     tamanho e a posição são calculados por js/decoracao.js a partir das linhas de texto
     reais, para ficar o MAIOR possível sem encostar em nada; se não couber, ela some.
   - .hero-arte-movel (horizontal) é o padrão: fica no fluxo, abaixo dos botões. É a
     que aparece no telefone e em qualquer tela onde a lateral não comporta a outra. */
.hero-arte {
  position: absolute;
  opacity: var(--arte-opacidade);
  pointer-events: none;
  display: none;
}
.hero--arte-lateral .hero-arte { display: block; }
.hero-arte-movel {
  display: block;
  width: min(360px, 100%);
  height: auto;
  margin: var(--esp-2xl) auto 0;
  opacity: var(--arte-opacidade);
  pointer-events: none;
}
.hero--arte-lateral .hero-arte-movel { display: none; }

.hero-interno { position: relative; z-index: 1; max-width: 920px; }
.hero-etiqueta {
  font-family: var(--fonte-sans);
  font-size: 12px;
  font-weight: var(--peso-caps);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cor-primaria-forte);
  margin-bottom: var(--esp-base);
}
.hero-titulo { margin-bottom: var(--esp-xl); }
.hero-enfase {
  color: var(--cor-primaria);
  font-family: var(--fonte-serif);
  font-style: italic;
  font-weight: var(--peso-forte);
  letter-spacing: -0.01em;
}
.hero-texto {
  font-size: clamp(17px, 2vw, 20px);
  max-width: var(--largura-texto);
  color: var(--cor-texto);
}
.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-md); margin-top: var(--esp-xl); }

.botao-primario, .botao-vazado {
  font-family: var(--fonte-sans);
  font-size: 16px;
  padding: 12px 24px;
  border-radius: var(--raio-md);
  cursor: pointer;
  display: inline-block;
  transition: transform var(--transicao-rapida), background-color var(--transicao-rapida),
              border-color var(--transicao-rapida);
}
.botao-primario {
  background-color: var(--cor-primaria);
  color: var(--cor-sobre-escuro);
  border: 1px solid var(--cor-primaria);
}
.botao-primario:hover {
  background-color: var(--cor-primaria-forte);
  border-color: var(--cor-primaria-forte);
  text-decoration: none;
  transform: translateY(-1px);
}
.botao-vazado {
  background-color: var(--cor-superficie);
  color: var(--cor-tinta);
  border: 1px solid var(--cor-borda);
}
.botao-vazado:hover { border-color: var(--cor-borda-forte); text-decoration: none; transform: translateY(-1px); }

/* ============================================================== seções ==== */

.secao {
  padding: var(--esp-4xl) 0;
  /* o cabeçalho é fixo no topo; sem esta margem, clicar na navegação deixaria o
     título da seção escondido atrás dele */
  scroll-margin-top: calc(var(--altura-cabecalho) + var(--esp-base));
}
.secao--tom {
  background-color: var(--cor-superficie-tom);
  /* A borda continua ocupando 1px (removê-la mudaria a altura da seção); só fica
     invisível, e a linha reta é substituída por uma onda desenhada (ver "Divisores"). */
  border-block: 1px solid transparent;
}
.secao-cabecalho { max-width: 820px; margin-bottom: var(--esp-2xl); }
.secao-resumo { font-size: 18px; color: var(--cor-texto); margin-top: var(--esp-base); }

.etiqueta {
  display: inline-block;
  font-family: var(--fonte-sans);
  font-size: 12px;
  font-weight: var(--peso-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--raio-sm);
  background-color: var(--cor-superficie-areia);
  color: var(--cor-tinta);
  margin-bottom: var(--esp-md);
}
.etiqueta--alerta { background-color: color-mix(in srgb, var(--cor-erro) 16%, transparent); color: var(--cor-erro); }
.etiqueta--sucesso { background-color: color-mix(in srgb, var(--cor-acerto) 20%, transparent); color: var(--cor-acerto); }

.texto-coluna { max-width: var(--largura-texto); margin-bottom: var(--esp-2xl); }

.lista-marcada { padding-left: 0; list-style: none; margin: 0 0 var(--esp-base); }
.lista-marcada li { position: relative; padding-left: var(--esp-xl); margin-bottom: var(--esp-md); }
.lista-marcada li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background-color: var(--cor-primaria);
}

[data-revelar] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transicao-lenta), transform var(--transicao-lenta);
}
[data-revelar].revelado { opacity: 1; transform: none; }

/* ============================================================= cartões ==== */

.cartao-destaque {
  position: relative;
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  padding: var(--esp-xl);
  margin-top: var(--esp-2xl);
  max-width: 860px;
  box-shadow: var(--sombra-cartao);
}
.cartao-destaque--alerta { border-left: 3px solid var(--cor-erro); }

.medicao {
  font-family: var(--fonte-mono);
  font-size: 15px;
  background-color: var(--cor-superficie-tom);
  border-radius: var(--raio-md);
  padding: var(--esp-md) var(--esp-base);
  color: var(--cor-tinta);
  overflow-x: auto;
}

.grade-cartoes { display: grid; gap: var(--esp-lg); grid-template-columns: 1fr; }
@media (min-width: 860px) { .grade-cartoes { grid-template-columns: repeat(3, 1fr); } }
.cartao {
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  padding: var(--esp-xl);
  transition: transform var(--transicao-media), box-shadow var(--transicao-media);
}
.cartao:hover { transform: translateY(-2px); box-shadow: var(--sombra-cartao); }
.cartao ul { padding-left: var(--esp-lg); margin: 0; }
.cartao li { margin-bottom: var(--esp-sm); }
.cartao-nota {
  font-size: 15px;
  color: var(--cor-suave);
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--esp-md);
  margin-bottom: 0;
}

.tabelas { margin-top: var(--esp-base); }
.tabela-verdade { border-collapse: collapse; font-family: var(--fonte-mono); font-size: 14px; }
.tabela-verdade caption {
  font-family: var(--fonte-sans);
  font-size: 12px;
  font-weight: var(--peso-caps);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-suave);
  text-align: left;
  padding-bottom: var(--esp-sm);
}
.tabela-verdade th, .tabela-verdade td {
  border: 1px solid var(--cor-borda);
  padding: var(--esp-sm) var(--esp-md);
  text-align: center;
  color: var(--cor-tinta);
}
.tabela-verdade th { background-color: var(--cor-superficie-tom); font-weight: var(--peso-forte); }
.tabela-verdade .saida-1 { color: var(--cor-classe-1); font-weight: var(--peso-forte); }
.tabela-verdade .saida-0 { color: var(--cor-classe-0); font-weight: var(--peso-forte); }

/* ========================================================= laboratório ==== */

.lab-embrulho { margin-top: var(--esp-xl); }

.laboratorio {
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2xl);
  padding: var(--esp-base);
  box-shadow: var(--sombra-elevada);
}
@media (min-width: 720px) { .laboratorio { padding: var(--esp-xl); } }

.lab-controles { margin-bottom: var(--esp-base); }
.lab-controles-linha--principal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-base);
}
.lab-transporte { display: flex; align-items: center; gap: var(--esp-sm); }

.botao-tocar {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: none;
  background-color: var(--cor-primaria);
  color: var(--cor-sobre-escuro);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--transicao-rapida), background-color var(--transicao-rapida);
}
.botao-tocar:hover { background-color: var(--cor-primaria-forte); transform: scale(1.04); }
.botao-tocar svg { width: 26px; height: 26px; fill: currentColor; }
.botao-tocar .icone-pausar { display: none; }
.laboratorio--rodando .botao-tocar .icone-tocar { display: none; }
.laboratorio--rodando .botao-tocar .icone-pausar { display: block; }

.botao-secundario {
  width: 42px; height: 42px;
  border-radius: var(--raio-md);
  border: 1px solid var(--cor-borda);
  background-color: var(--cor-superficie);
  color: var(--cor-tinta);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transicao-rapida), background-color var(--transicao-rapida);
}
.botao-secundario:hover { border-color: var(--cor-borda-forte); background-color: var(--cor-superficie-tom); }
.botao-secundario svg { width: 19px; height: 19px; fill: currentColor; }

.lab-campos { display: flex; flex-wrap: wrap; gap: var(--esp-md); flex: 1; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 104px; }
.campo-rotulo {
  font-family: var(--fonte-sans);
  font-size: 12px;
  font-weight: var(--peso-caps);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-suave);
}
.campo-controle {
  font-family: var(--fonte-sans);
  font-size: 15px;
  color: var(--cor-tinta);
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: 9px var(--esp-md);
  min-height: 42px;
  cursor: pointer;
}
.campo-controle:hover { border-color: var(--cor-borda-forte); }

.lab-aviso {
  border-radius: var(--raio-lg);
  padding: var(--esp-md) var(--esp-base);
  font-size: 15px;
  margin-bottom: var(--esp-base);
  border: 1px solid var(--cor-borda);
  background-color: var(--cor-superficie-tom);
}
.lab-aviso--atencao {
  border-color: color-mix(in srgb, var(--cor-erro) 35%, transparent);
  background-color: color-mix(in srgb, var(--cor-erro) 8%, transparent);
}

.lab-grade { display: grid; gap: var(--esp-lg); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .lab-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--esp-calha); }
}
.lab-coluna { min-width: 0; }
.lab-coluna--grafico { display: flex; flex-direction: column; gap: var(--esp-base); }

.lab-plano-embrulho { display: flex; justify-content: center; }
.lab-plano { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; }
.plano-decisao { position: relative; }
.plano-canvas, .plano-svg { position: absolute; inset: 0; border-radius: var(--raio-lg); }
.plano-canvas { border: 1px solid var(--cor-borda); }
.plano-rotulo-eixo { font-family: var(--fonte-mono); font-size: 12px; }
.ponto-rotulo { font-family: var(--fonte-mono); font-size: 12px; font-weight: 700; }
.ponto-halo { transition: r var(--transicao-rapida), opacity var(--transicao-rapida); }

.lab-erro { width: 100%; height: 130px; }
.lab-secao-titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  font-family: var(--fonte-sans);
  font-size: 12px;
  font-weight: var(--peso-caps);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-suave);
  margin-bottom: var(--esp-sm);
}

.lab-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-base);
  margin-top: var(--esp-base);
  padding-top: var(--esp-base);
  border-top: 1px solid var(--cor-borda);
  font-family: var(--fonte-sans);
  font-size: 14px;
  color: var(--cor-tinta);
}
.estado-chave {
  font-size: 12px;
  font-weight: var(--peso-caps);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-suave);
  margin-right: 4px;
}
.estado-pilula {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: var(--raio-pilula);
  font-size: 13px;
  font-weight: var(--peso-forte);
}
.estado--pronto { background-color: var(--cor-superficie-areia); color: var(--cor-tinta); }
/* "treinando" não pode ser verde: verde é o "convergiu". Contorno por box-shadow
   interno para não mudar o tamanho do selo. */
.estado--treinando { background-color: transparent; color: var(--cor-tinta); box-shadow: inset 0 0 0 1px var(--cor-tinta); }
.estado--sucesso { background-color: color-mix(in srgb, var(--cor-acerto) 22%, transparent); color: var(--cor-acerto); }
.estado--falha { background-color: color-mix(in srgb, var(--cor-erro) 15%, transparent); color: var(--cor-erro); }

/* ==================================================== painel algoritmo ==== */

.painel-algoritmo { display: flex; flex-direction: column; gap: var(--esp-base); }
.painel-bloco { min-width: 0; }
.painel-rotulo {
  font-family: var(--fonte-sans);
  font-size: 12px;
  font-weight: var(--peso-caps);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-suave);
  margin-bottom: var(--esp-sm);
}
.painel-equacao {
  background-color: var(--cor-superficie-tom);
  border-radius: var(--raio-lg);
  padding: var(--esp-base);
  overflow-x: auto;
  color: var(--cor-tinta);
  min-height: 62px;
  display: flex;
  align-items: center;
  scrollbar-width: thin;
  scrollbar-color: var(--cor-borda) transparent;
}
.painel-equacao::-webkit-scrollbar { height: 6px; }
.painel-equacao::-webkit-scrollbar-track { background: transparent; }
.painel-equacao::-webkit-scrollbar-thumb { background-color: var(--cor-borda); border-radius: var(--raio-pilula); }
.painel-equacao .katex { font-size: 1.02em; }

.painel-pesos { display: flex; flex-wrap: wrap; gap: var(--esp-sm); }
.peso-chip {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background-color: var(--cor-superficie-tom);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: 6px var(--esp-md);
  transition: border-color var(--transicao-rapida), background-color var(--transicao-rapida);
}
.peso-chip--mudou {
  border-color: var(--cor-primaria);
  background-color: color-mix(in srgb, var(--cor-primaria) 10%, transparent);
}
.peso-nome { font-family: var(--fonte-mono); font-size: 12px; color: var(--cor-suave); }
.peso-valor {
  font-family: var(--fonte-mono);
  font-size: 14px;
  color: var(--cor-tinta);
  font-variant-numeric: tabular-nums;
}
.peso-resumo { display: flex; flex-wrap: wrap; gap: var(--esp-base); font-size: 14px; color: var(--cor-texto); }
.peso-resumo strong { color: var(--cor-tinta); }

/* ---- gavetas (pseudocódigo e log) ---- */

.gaveta {
  background-color: var(--cor-superficie-tom);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.gaveta-resumo {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  padding: 10px var(--esp-md);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--transicao-rapida);
}
.gaveta-resumo::-webkit-details-marker { display: none; }
.gaveta-resumo:hover { background-color: var(--cor-superficie-areia); }
.gaveta-seta {
  width: 0; height: 0;
  border-left: 5px solid var(--cor-suave);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--transicao-rapida);
  flex-shrink: 0;
}
.gaveta[open] > .gaveta-resumo .gaveta-seta { transform: rotate(90deg); }
.gaveta-titulo {
  font-family: var(--fonte-sans);
  font-size: 12px;
  font-weight: var(--peso-caps);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-suave);
}
/* mostra o passo atual mesmo com a gaveta fechada */
.gaveta-pista {
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  color: var(--cor-primaria-forte);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gaveta[open] > .gaveta-resumo .gaveta-pista { opacity: 0; }

.painel-pseudocodigo {
  list-style: none;
  margin: 0;
  padding: 0 var(--esp-md) var(--esp-md);
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  line-height: 1.75;
}
.pseudo-linha {
  white-space: pre-wrap;
  padding: 1px var(--esp-sm);
  border-left: 2px solid transparent;
  border-radius: var(--raio-xs);
  color: var(--cor-texto);
  transition: background-color var(--transicao-rapida), color var(--transicao-rapida);
}
.pseudo-linha--ativa {
  background-color: color-mix(in srgb, var(--cor-primaria) 14%, transparent);
  border-left-color: var(--cor-primaria);
  color: var(--cor-tinta);
}

.painel-log {
  height: 168px;
  overflow-y: auto;
  padding: 0 var(--esp-md) var(--esp-md);
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--cor-texto);
  scrollbar-width: thin;
  scrollbar-color: var(--cor-borda) transparent;
}
.painel-log::-webkit-scrollbar { width: 7px; }
.painel-log::-webkit-scrollbar-track { background: transparent; }
.painel-log::-webkit-scrollbar-thumb { background-color: var(--cor-borda); border-radius: var(--raio-pilula); }
.log-linha { white-space: pre-wrap; }
.log-linha--mudou { color: var(--cor-tinta); }
.log-linha--epoca { color: var(--cor-suave); font-style: italic; }
.log-linha--sucesso { color: var(--cor-acerto); font-weight: 700; }
.log-linha--falha { color: var(--cor-erro); font-weight: 700; }
.log-linha--reinicio { color: var(--cor-primaria-forte); }

/* ======================================================= rede (ato 3) ===== */

.lab-rede-embrulho { margin-bottom: var(--esp-lg); }
.lab-legenda-conexoes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--peso-normal);
}
.amostra { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-left: var(--esp-sm); }
.amostra--positiva { background-color: var(--cor-classe-1); }
.amostra--negativa { background-color: var(--cor-classe-0); }

.rede-visual {
  position: relative;
  background-color: var(--cor-superficie-tom);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  padding: var(--esp-base) var(--esp-sm) var(--esp-md);
  /* Sem rolagem: o SVG abaixo tem viewBox e se ajusta sozinho à largura
     disponível, por maior que fique a rede. */
}

.rede-barra-camadas { display: flex; justify-content: center; margin-bottom: var(--esp-sm); }

/* Faixa onde ficam os controles de cada camada. Eles são posicionados por
   JavaScript, em cima da coluna correspondente do SVG. */
.rede-barra-colunas { position: relative; height: 30px; }
.rede-controle-camada {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.rede-desenho {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.rede-no {
  cursor: pointer;
  /* `fill-box` faz o transform-origin usar a caixa do próprio nó, o que permite
     ampliar em torno do centro dele sem calcular translações à mão. */
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--transicao-media);
}
.rede-no--selecionado { transform: scale(2.35); }
@media (hover: hover) {
  .rede-no:hover { transform: scale(1.32); }
  .rede-no--selecionado:hover { transform: scale(2.35); }
}
.rede-no-moldura { transition: stroke var(--transicao-rapida); }
.rede-no--selecionado .rede-no-moldura { stroke: var(--cor-primaria); stroke-width: 1.5; }
.rede-no-rotulo { font-family: var(--fonte-mono); pointer-events: none; }

.contador { display: inline-flex; align-items: center; gap: var(--esp-sm); }
.contador-botao {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background-color: var(--cor-superficie);
  color: var(--cor-tinta);
  font-size: 17px;
  line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color var(--transicao-rapida), border-color var(--transicao-rapida),
              transform var(--transicao-rapida);
}
.contador-botao:hover {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-sobre-escuro);
  transform: scale(1.08);
}
.contador-rotulo {
  font-family: var(--fonte-sans);
  font-size: 13px;
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
  white-space: nowrap;
}
.contador--compacto { gap: 5px; }
.contador--compacto .contador-botao { width: 26px; height: 26px; font-size: 14px; }
.rede-coluna-titulo {
  font-family: var(--fonte-sans);
  font-size: 13px;
  font-weight: var(--peso-forte);
  color: var(--cor-tinta);
  /* largura fixa para que o controle não mude de tamanho — e portanto não
     desloque o alinhamento com a coluna — ao passar de 9 para 10 neurônios */
  min-width: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ============================================================== ajuda ===== */

.ajuda { position: relative; display: inline-flex; }
.ajuda-botao {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda-forte);
  background-color: transparent;
  color: var(--cor-suave);
  font-family: var(--fonte-sans);
  font-size: 11px;
  font-weight: var(--peso-caps);
  line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color var(--transicao-rapida), color var(--transicao-rapida);
}
.ajuda-botao:hover, .ajuda--aberta .ajuda-botao {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-sobre-escuro);
}
.ajuda-balao {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: min(280px, 74vw);
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-elevada);
  padding: var(--esp-md);
  font-family: var(--fonte-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cor-texto);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--peso-normal);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao-rapida), transform var(--transicao-rapida), visibility var(--transicao-rapida);
}
.ajuda-balao strong {
  display: block;
  font-family: var(--fonte-sans);
  font-size: 13px;
  color: var(--cor-tinta);
  margin-bottom: 4px;
}
.ajuda--aberta .ajuda-balao { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ============================================================== rodapé ==== */

.rodape {
  background-color: var(--cor-tinta);
  color: var(--cor-sobre-escuro);
  padding: var(--esp-4xl) 0 var(--esp-2xl);
  margin-top: var(--esp-4xl);
}
.rodape-interno { display: grid; gap: var(--esp-xl); grid-template-columns: 1fr; }
@media (min-width: 760px) { .rodape-interno { grid-template-columns: 2fr 1fr 1fr; gap: var(--esp-calha); } }
.marca-nome--rodape { display: block; margin-bottom: var(--esp-md); font-size: 24px; }
.rodape .marca-neuro { color: var(--cor-sobre-escuro); }
.rodape .marca-logica { color: var(--cor-primaria-fraca); }
.rodape p { color: var(--cor-suave-clara); font-size: 15px; margin-bottom: var(--esp-xs); }
.rodape h4 { color: var(--cor-suave-clara); margin-bottom: var(--esp-md); }
.rodape-marca p { max-width: 46ch; }

/* ======================================================= responsividade === */

@media (max-width: 720px) {
  /* Controles em duas faixas: transporte numa linha própria, campos numa grade
     de duas colunas. Deixá-los no mesmo flex-wrap do desktop empurrava os botões
     para o meio dos seletores. */
  .lab-controles-linha--principal { flex-direction: column; align-items: stretch; }
  .lab-transporte { justify-content: center; }
  .lab-campos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-md);
  }
  .campo { min-width: 0; }

  /* No telefone o gráfico vem antes do algoritmo: a fronteira de decisão é o que
     prende a atenção, e o texto fica logo abaixo em vez de empurrá-la para fora
     da tela. */
  .lab-coluna--grafico { order: -1; }

  .painel-log { height: 138px; }
  .painel-equacao { font-size: 13px; min-height: 54px; }
  .lab-estado { font-size: 13px; }
  .estado-pilula { margin-left: 0; }
  .laboratorio { border-radius: var(--raio-xl); }
  .rede-visual { padding: var(--esp-md) var(--esp-xs) var(--esp-sm); }
  .contador-rotulo { font-size: 12px; }

  /* No telefone o balão vira uma faixa presa ao rodapé da tela. Além de resolver
     o estouro de largura (um popover de 280px não cabe ancorado junto à borda),
     é mais fácil de ler e de fechar com o polegar. */
  .ajuda-balao {
    position: fixed;
    top: auto;
    bottom: var(--esp-base);
    left: var(--esp-base);
    right: var(--esp-base);
    width: auto;
    max-width: none;
    transform: translateY(8px);
    font-size: 15px;
  }
  .ajuda--aberta .ajuda-balao { transform: translateY(0); }
}

/* ============================================= escopo de cor dos gráficos ==== */

/* Os gráficos mantêm a paleta ANTIGA (laranja-terracota, azul e os mesmos cinzas),
   enquanto a interface ficou verde. O código dos gráficos lê as cores das variáveis
   CSS no contêiner onde cada gráfico é desenhado (getComputedStyle(contêiner)); como
   variáveis CSS são herdadas, basta redeclará-las AQUI, só dentro desses contêineres,
   apontando para a paleta antiga (--grafico-* em tokens.css). O código dos gráficos
   não muda. --cor-classe-1/0 nem precisam: elas simplesmente não mudaram de valor. */
.lab-plano,
.lab-erro {
  --cor-primaria: var(--grafico-destaque);
  --cor-tinta: var(--grafico-tinta);
  --cor-suave: var(--grafico-suave);
  --cor-superficie: var(--grafico-superficie);
  --cor-borda: var(--grafico-borda);
}
/* Na rede, --cor-primaria fica de fora de propósito: o código da rede não a lê, e o
   hover dos botões +/- e (?) — que moram dentro deste mesmo contêiner — tem de
   continuar verde. */
.rede-visual {
  --cor-tinta: var(--grafico-tinta);
  --cor-suave: var(--grafico-suave);
  --cor-superficie: var(--grafico-superficie);
  --cor-borda-forte: var(--grafico-borda-forte);
}
/* ...e os controles dentro da rede voltam aos neutros da interface, lidos dos aliases
   --tema-*, que guardam o valor do tema resolvido no :root. */
.rede-barra-camadas,
.rede-barra-colunas {
  --cor-tinta: var(--tema-tinta);
  --cor-suave: var(--tema-suave);
  --cor-superficie: var(--tema-superficie);
  --cor-borda-forte: var(--tema-borda-forte);
}

/* ===================================================== ajuda: exceção H ==== */

/* Os botões (?) do cabeçalho da rede ficam perto das bordas; centralizado, o balão
   seria cortado em telas entre 721 e ~900px. Por isso cada um abre alinhado ao lado
   de dentro. No telefone vale a faixa presa ao rodapé, definida acima. */
@media (min-width: 721px) {
  .ajuda--alinhada-direita .ajuda-balao {
    left: auto;
    right: -6px;
    transform: translateY(-4px);
  }
  .ajuda--alinhada-esquerda .ajuda-balao {
    left: -6px;
    transform: translateY(-4px);
  }
  .ajuda--alinhada-direita.ajuda--aberta .ajuda-balao,
  .ajuda--alinhada-esquerda.ajuda--aberta .ajuda-balao { transform: translateY(0); }
}
/* Os dois botões restaurados vivem numa linha de rótulo de 12px; a margem negativa
   impede que os 20px do botão aumentem a altura dessa linha (o layout não pode mudar). */
.lab-rede-embrulho .lab-secao-titulo .ajuda { margin-block: -4px; }

/* No telefone não há largura sobrando nessa linha: com os botões, a legenda quebraria
   em duas linhas e empurraria tudo para baixo. Então, até 720px, os dois botões saem do
   fluxo e vão para os cantos de cima do painel da rede — um vazio que já existe dos
   dois lados do controle de camadas, que é centralizado. A conta do topo é: fim da linha
   do título + 8px de margem + 1px de borda + 12px de respiro do painel + 6px para
   centralizar os 20px do botão nos 32px do controle. */
@media (max-width: 720px) {
  .lab-rede-embrulho .lab-secao-titulo { position: relative; }
  .lab-rede-embrulho .lab-secao-titulo .ajuda {
    position: absolute;
    top: calc(100% + 27px);
    margin: 0;
    z-index: 3;
  }
  .lab-rede-embrulho .lab-secao-titulo > .ajuda { left: 3px; }
  .lab-rede-embrulho .lab-legenda-conexoes .ajuda { right: 3px; }
}

/* ================================================= camada decorativa ======== */

/* Tudo daqui para baixo é DECORAÇÃO: fica fora do fluxo, atrás do conteúdo e longe
   dos gráficos. Nenhuma regra abaixo mexe em tamanho ou posição de conteúdo.
   Estilo "caderno de laboratório futurista, feito à mão": traços com o tremido do
   filtro #rascunho, contorno duplo, hachura e instrumentos (órbita, mira, cota). */

/* A seção vira um contexto de empilhamento (sem mudar a geometria), para que a
   decoração com z-index: -1 fique atrás do texto, mas na frente do fundo da seção. */
.secao--decorada { position: relative; z-index: 0; }

/* Arte de cada ato. O padrão é ficar NO FLUXO, no alto da seção, como ilustração de
   abertura do capítulo — é assim no telefone, que é onde o site mais vai ser visto.
   Em telas largas, js/decoracao.js procura o maior quadrado livre ao lado do texto
   (medindo as linhas reais, com folga) e, se couber, passa a arte para a lateral com a
   classe --lateral; se não couber, ela continua no fluxo. */
.arte-margem {
  display: block;
  position: relative;
  width: min(270px, 74vw);
  height: auto;
  margin: calc(-1 * var(--esp-lg)) auto var(--esp-lg);
  pointer-events: none;
  opacity: var(--arte-opacidade);
}
.arte-margem--lateral {
  position: absolute;
  z-index: -1;
  margin: 0;
}
/* A arte entra com a mesma revelação do texto, mas sem o deslizamento vertical, que a
   desalinharia do lugar calculado. */
.arte-margem[data-revelar] { transform: none; }

/* Paleta dos traços: tinta, verde e verde suave. Nunca laranja e azul — são as cores
   dos dados nos gráficos, e a decoração não pode sugerir outro código de cores. */
.arte-tinta { stroke: var(--cor-tinta); stroke-width: calc(2.4px * var(--arte-giz)); }
.arte-verde { stroke: var(--cor-primaria); stroke-width: calc(1.6px * var(--arte-giz)); }
.arte-profunda { stroke: var(--cor-primaria-profunda); stroke-width: calc(1.2px * var(--arte-giz)); opacity: 0.45; }
.arte-suave { stroke: var(--cor-primaria-fraca); stroke-width: calc(1px * var(--arte-giz)); }
.arte-fina { stroke: var(--cor-tinta); stroke-width: calc(1.2px * var(--arte-giz)); opacity: 0.75; }
.arte-cheio { fill: var(--cor-tinta); }
.arte-cheio-verde { fill: var(--cor-primaria); }
.arte-vazado { fill: var(--cor-superficie); stroke: var(--cor-tinta); stroke-width: calc(1.6px * var(--arte-giz)); }
.arte-hachura-traco { stroke: var(--cor-primaria-fraca); stroke-width: 1.1px; }
.arte-hachura-verde { stroke: var(--cor-primaria); stroke-width: 1.3px; }
.arte-nota {
  fill: var(--cor-suave);
  font-family: var(--fonte-serif);
  font-style: italic;
  font-size: 17px;
}
.arte-mono {
  fill: var(--cor-suave);
  font-family: var(--fonte-mono);
  font-size: 10px;
}
/* :where() zera a especificidade: assim .arte-cheio num grupo ainda vence o fill: none. */
:where(.arte-margem, .hero-arte, .hero-arte-movel) g { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Desenhar-se: cada traço tem pathLength="1", então tracejado 1 + deslocamento 1
   escondem o traço inteiro, e levar o deslocamento a 0 o "risca" na tela. Na arte do
   topo o gatilho é o fim da tela de carregamento; nas margens, a revelação do texto. */
.traco {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 110ms + 150ms);
}
.aparece {
  opacity: 0;
  transition: opacity 500ms ease-out;
  transition-delay: calc(var(--i, 0) * 110ms + 150ms);
}
body:not(.carregando) .hero-arte .traco,
body:not(.carregando) .hero-arte-movel.revelado .traco,
.arte-margem.revelado .traco { stroke-dashoffset: 0; }
body:not(.carregando) .hero-arte .aparece,
body:not(.carregando) .hero-arte-movel.revelado .aparece,
.arte-margem.revelado .aparece { opacity: 1; }

/* Tremido de lápis: o grupo alterna entre três variações do mesmo filtro a ~8 quadros
   por segundo, como em animação desenhada à mão. Só em decoração, e parado quando o
   sistema pede menos movimento. */
@keyframes ferver {
  0%, 100% { filter: url(#rascunho); }
  33% { filter: url(#rascunho-b); }
  66% { filter: url(#rascunho-c); }
}
.arte-ferve { filter: url(#rascunho); }
/* Só ferve o desenho que está na tela (.arte--visivel é posta e tirada por um
   IntersectionObserver em js/decoracao.js): refazer o filtro 8 vezes por segundo em
   desenhos fora da tela seria gastar bateria à toa — e o público é principalmente de
   telefone. */
body:not(.carregando) .hero-arte.arte--visivel .arte-ferve,
body:not(.carregando) .hero-arte-movel.revelado.arte--visivel .arte-ferve,
.arte-margem.revelado.arte--visivel .arte-ferve {
  animation: ferver 375ms steps(1, end) infinite;
}
.arte-ferve-fina { filter: url(#rascunho-fino); }
@media (prefers-reduced-motion: reduce) {
  /* A regra global de movimento reduzido encurta as animações, mas mantém a repetição
     infinita — o que faria o tremido piscar sem parar. Aqui ele é desligado. */
  .arte-ferve,
  body:not(.carregando) .hero-arte.arte--visivel .arte-ferve,
  body:not(.carregando) .hero-arte-movel.revelado.arte--visivel .arte-ferve,
  .arte-margem.revelado.arte--visivel .arte-ferve {
    animation: none !important;
  }
}

/* ---- Divisores: a linha reta entre seções vira uma onda riscada à mão ---- */
.secao--decorada.secao--tom::before,
.secao--decorada.secao--tom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--cor-borda-forte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 14'%3E%3Cpath d='M0 7 C 20 4.2, 38 4, 58 6.6 S 96 10.4, 122 8.1 S 160 3.6, 186 5.8 S 228 10.2, 250 8.4 S 296 4.1, 322 6.1 S 350 7.6, 360 7' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M0 8 C 22 5.5, 40 5, 60 7.4 S 98 11, 124 9 S 162 4.6, 188 6.8 S 230 11, 252 9.2 S 298 5, 324 7 S 352 8.4, 360 8' fill='none' stroke='black' stroke-width='0.8' stroke-linecap='round' opacity='0.45'/%3E%3C/svg%3E") repeat-x 0 0 / 360px 14px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 14'%3E%3Cpath d='M0 7 C 20 4.2, 38 4, 58 6.6 S 96 10.4, 122 8.1 S 160 3.6, 186 5.8 S 228 10.2, 250 8.4 S 296 4.1, 322 6.1 S 350 7.6, 360 7' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M0 8 C 22 5.5, 40 5, 60 7.4 S 98 11, 124 9 S 162 4.6, 188 6.8 S 230 11, 252 9.2 S 298 5, 324 7 S 352 8.4, 360 8' fill='none' stroke='black' stroke-width='0.8' stroke-linecap='round' opacity='0.45'/%3E%3C/svg%3E") repeat-x 0 0 / 360px 14px;
}
.secao--decorada.secao--tom::before { top: -8px; }
.secao--decorada.secao--tom::after { bottom: -8px; -webkit-mask-position: 173px 0; mask-position: 173px 0; }

/* ---- Marca-texto: canetinha passada sob uma expressão do título ---- */
.marca-texto { position: relative; }
.marca-texto::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -0.08em;
  right: -0.1em;
  bottom: 0.14em;
  height: 0.42em;
  background-color: var(--cor-marca-texto);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1.5 4.2 C 18 2.2, 42 3.4, 64 2.6 S 92 2.4, 98.6 3.4 L 99.2 9.4 C 80 10.8, 58 9.6, 36 10.6 S 8 10.2, 0.8 9.6 Z' fill='black'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1.5 4.2 C 18 2.2, 42 3.4, 64 2.6 S 92 2.4, 98.6 3.4 L 99.2 9.4 C 80 10.8, 58 9.6, 36 10.6 S 8 10.2, 0.8 9.6 Z' fill='black'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 450ms;
}
body:not(.carregando) .revelado .marca-texto::before { transform: scaleX(1); }

/* ---- Rodapé: a borda de cima vira uma linha de horizonte ondulada ---- */
.rodape { position: relative; }
.rodape::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  height: 12px;
  pointer-events: none;
  background-color: var(--cor-tinta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 12'%3E%3Cpath d='M0 7 C 30 3, 60 3.5, 90 6 S 150 11, 180 8.5 S 240 3, 270 5 S 330 9, 360 7 L 360 12 L 0 12 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 360px 12px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 12'%3E%3Cpath d='M0 7 C 30 3, 60 3.5, 90 6 S 150 11, 180 8.5 S 240 3, 270 5 S 330 9, 360 7 L 360 12 L 0 12 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 360px 12px;
}

/* ========================================================== acabamento ====== */

/* Títulos equilibrados: evita a última linha com uma palavra só. Parágrafos com
   "pretty": o navegador evita deixar uma palavra órfã no fim. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Seleção de texto na cor de marca-texto do site. */
::selection { background-color: var(--cor-marca-texto); color: var(--cor-tinta); }

/* ---- "Pular para o conteúdo": invisível até receber foco pelo teclado ---- */
.pular-conteudo {
  position: fixed;
  left: var(--esp-base);
  top: var(--esp-md);
  z-index: 50;
  padding: 10px var(--esp-base);
  border-radius: var(--raio-md);
  background-color: var(--cor-tinta);
  color: var(--cor-superficie);
  font-family: var(--fonte-sans);
  font-size: 15px;
  opacity: 0;
  transform: translateY(-200%);
  transition: transform var(--transicao-rapida), opacity var(--transicao-rapida);
}
.pular-conteudo:focus { opacity: 1; transform: none; text-decoration: none; }

/* ---- Seletores do laboratório: seta desenhada no lugar da nativa ----
   O <select> ganha um invólucro (.campo-seletor, criado em laboratorio.js) só para
   ancorar a seta. A seta nativa, cinza e diferente em cada sistema, destoava do resto. */
.campo-seletor { position: relative; display: block; }
.campo-seletor > .campo-controle {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-color: var(--cor-superficie);
}
.campo-seletor::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  pointer-events: none;
  background-color: var(--cor-suave);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.6 C 3 3.2, 4.4 4.9, 6 6.4 C 7.5 4.8, 9 3.1, 10.8 1.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.6 C 3 3.2, 4.4 4.9, 6 6.4 C 7.5 4.8, 9 3.1, 10.8 1.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transition: background-color var(--transicao-rapida);
}
.campo-seletor:hover::after,
.campo-seletor:focus-within::after { background-color: var(--cor-primaria); }
.campo-seletor > .campo-controle:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 1px;
}

/* ---- Termos difíceis: o botão (?) entra no meio do texto sem aumentar a linha ---- */
.termo { text-decoration: underline dotted var(--cor-primaria-fraca); text-underline-offset: 3px; }
.ajuda--termo {
  vertical-align: middle;
  margin: -4px 0 -4px 4px;
}
.ajuda--termo .ajuda-botao { width: 18px; height: 18px; font-size: 10px; }

/* ---- Dica da primeira visita: seta desenhada apontando para o ▶ do Ato 1 ----
   Fica no vão entre o texto e o laboratório (fora do fluxo) e some no primeiro toque em
   tocar ou avançar; a escolha é lembrada no navegador (js/acabamento.js). */
.lab-transporte { position: relative; }
.dica-inicio {
  position: absolute;
  left: 18px;
  bottom: calc(100% + 6px);
  width: 210px;
  height: 58px;
  pointer-events: none;
  color: var(--cor-primaria-forte);
  animation: dica-entrar 600ms cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}
.dica-inicio svg { position: absolute; left: 0; top: 0; width: 72px; height: 58px; overflow: visible; }
.dica-inicio path { fill: none; stroke: currentColor; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; }
.dica-inicio span {
  position: absolute;
  left: 66px;
  top: 2px;
  font-family: var(--fonte-serif);
  font-style: italic;
  font-size: 17px;
  white-space: nowrap;
}
.dica-inicio--saindo { opacity: 0; transition: opacity 300ms ease-out; }
@keyframes dica-entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* anel que pulsa em volta do ▶ enquanto a dica está na tela */
.laboratorio--dica .botao-tocar { animation: pulsar 1.8s ease-out 1.6s infinite; }
@keyframes pulsar {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-primaria) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 14px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .laboratorio--dica .botao-tocar { animation: none !important; }
}
@media (max-width: 720px) {
  /* no telefone os botões de transporte ficam centralizados */
  .dica-inicio { left: calc(50% - 60px); }
}