/* Guia da Concretagem: o único arquivo de estilo do site.
   Conceito e sistema em DESIGN.md (nota da betoneira: ficha com canhoto, nota do pedido,
   caminhões enchendo). Movimento: "encher a fôrma", tudo sobe de baixo e para nivelado.
   Raio 3px, sem sombra, sem degradê de cor (as faixas de hover são cor sólida).
   Âmbar só em ação; verde do WhatsApp só no botão dele.
   Fontes servidas pelo próprio site (nenhuma chamada a Google Fonts ou CDN). */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fontes/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fontes/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fontes/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fontes/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fontes/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  /* Cores (contraste medido no DESIGN.md) */
  /* Tema escuro (22/10/2026): os nomes ficaram, as cores inverteram (DESIGN.md §6). */
  --concreto:    #141719;   /* fundo: concreto à noite */
  --papel:       #1c2023;   /* superfície: ficha, nota, prancha, formulário */
  --grafite:     #edebe6;   /* tinta: texto, traço e o enchimento claro dos hovers */
  --cimento:     #a6acb0;   /* texto secundário (7,2:1 no papel) */
  --linha:       rgba(237, 235, 230, .14);
  --linha-forte: rgba(237, 235, 230, .32);
  --borda-campo: #6d757a;   /* 3,5:1 no papel */
  --ambar:       #e8932a;   /* só ação */
  --ambar-claro: #f0a445;   /* botão com o mouse em cima (o âmbar claro sobe) */
  --ambar-fundo: #cf7c1d;   /* botão apertado (texto escuro 5,9:1) */
  --claro-no-escuro: #c9ccce;
  --escuro:      #121416;   /* texto sobre âmbar e sobre o verde do WhatsApp */
  --realce:      #22272b;   /* linha da lista com o mouse em cima (título claro por cima) */
  --branco:      #fbfaf7;   /* título na linha realçada */
  --campo:       #101315;   /* fundo dos campos */
  --rodape:      #0b0d0e;
  --whatsapp:    #1faa52;   /* só o botão do WhatsApp */
  --whatsapp-claro: #3dbd6b;
  --whatsapp-fundo: #19964a; /* apertado (texto escuro 4,8:1) */

  /* Tipo */
  --f-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --f-texto:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dado:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-mega: clamp(2.75rem, 1rem + 7.2vw, 7rem);
  --t-xl:   clamp(2.25rem, 1.2rem + 4.2vw, 4.75rem);
  --t-l:    clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem);
  --t-m:    clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  --t-texto: 1.0625rem;
  --t-s:    0.9375rem;
  --t-rotulo: 0.75rem;

  /* Grade e ritmo */
  --largura: 1320px;
  --margem:  clamp(16px, 4vw, 56px);
  --vao:     clamp(16px, 2vw, 28px);
  --ritmo-apertado: 24px;
  --ritmo-normal:   56px;
  --ritmo-largo:    clamp(72px, 9vw, 128px);

  /* Forma e movimento */
  --raio: 3px;
  --nivelar: cubic-bezier(.22, 1, .36, 1);
  --t-hover: 260ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--concreto);
  color: var(--grafite);
  font: 400 var(--t-texto)/1.55 var(--f-texto);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
::selection { background: var(--ambar); color: var(--escuro); }
:focus-visible { outline: 2px solid var(--grafite); outline-offset: 3px; }
[hidden] { display: none !important; }
section[tabindex="-1"]:focus { outline: none; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-xl); line-height: .95; letter-spacing: -.035em; margin-left: -.04em; }
h2 { font-size: var(--t-l); line-height: 1.05; letter-spacing: -.025em; }
h3 { font-size: var(--t-m); line-height: 1.15; letter-spacing: -.015em; }
p { margin: 0 0 1rem; }
code { font-family: var(--f-dado); font-size: .92em; }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.faixa { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--vao); }
.grade > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 600px) { .grade { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grade { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.pular { position: fixed; left: -9999px; top: 2px; }
.pular:focus { left: var(--margem); z-index: 100; background: var(--ambar); color: var(--escuro); font-weight: 600; padding: 6px 12px; border-radius: var(--raio); outline: 2px solid var(--grafite); outline-offset: 2px; }

/* Texto miúdo e notas */
.nota { font-size: var(--t-s); color: var(--cimento); }
.lead { font-size: clamp(1.125rem, 1.02rem + .4vw, 1.3125rem); line-height: 1.5; max-width: 34rem; }

/* Links dentro de texto: sublinhado em repouso; no hover a faixa âmbar sobe (cor sólida). */
.texto a, .lead a, .nota a, .trilha a, .vazio a, .pagina-404 p a {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--ambar), var(--ambar)), linear-gradient(currentColor, currentColor);
  background-size: 100% 0, 100% 1px; background-position: 0 calc(100% - 3px), 0 calc(100% - 3px); background-repeat: no-repeat;
  padding-block: 3px; /* área de toque maior, sem mudar a linha */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--t-hover) var(--nivelar);
}
@media (hover: hover) {
  .texto a:hover, .lead a:hover, .nota a:hover, .trilha a:hover,
  .vazio a:hover, .pagina-404 p a:hover { background-size: 100% 2px, 100% 1px; color: var(--ambar); }
}
.texto a:focus-visible, .lead a:focus-visible, .nota a:focus-visible, .trilha a:focus-visible,
.vazio a:focus-visible, .pagina-404 p a:focus-visible { background-size: 100% 2px, 100% 1px; color: var(--ambar); }

/* Papel em cima do concreto */
.papel { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
/* Rótulo de campo impresso (só dentro do papel) */
.campo-impresso { font-family: var(--f-dado); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cimento); }

/* ---------- Faixa de rascunho (só enquanto site.rascunho = true) ---------- */
.aviso-rascunho {
  background: var(--grafite); color: var(--papel);
  font-family: var(--f-dado); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px var(--margem); text-align: center; line-height: 1.5;
}
/* No celular a faixa fica numa linha só (cada cartão de exemplo já diz que é fictício). */
@media (max-width: 599px) { .aviso-extra { display: none; } }

/* ---------- Topo ---------- */
.topo { border-bottom: 1px solid var(--linha-forte); view-transition-name: topo; }
.topo .faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 16px; }
.marca { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-height: 44px; }
/* A marca é uma fôrma com o nível do concreto; no hover o nível sobe até encher. */
.marca-forma { position: relative; flex: none; width: 26px; height: 26px; border: 2px solid var(--grafite); border-radius: var(--raio); overflow: hidden; }
.marca-forma::after { content: ""; position: absolute; inset: 0; background: var(--grafite); transform: scaleY(.5); transform-origin: bottom; transition: transform 420ms var(--nivelar); }
.marca-textos { display: flex; flex-direction: column; }
.marca-nome { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.05; }
.marca-regiao { font-family: var(--f-dado); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cimento); }
@media (hover: hover) { .marca:hover .marca-forma::after { transform: scaleY(1); } }
.marca:focus-visible .marca-forma::after { transform: scaleY(1); }

.topo-nav { display: flex; gap: 4px 28px; font-size: var(--t-s); font-weight: 600; }
.topo-nav a { position: relative; isolation: isolate; color: inherit; text-decoration: none; padding: 10px 2px; }
/* Faixa âmbar que sobe da linha de base (a página atual fica com ela cheia). */
.topo-nav a::after { content: ""; position: absolute; z-index: -1; left: -2px; right: -2px; bottom: 6px; height: 3px; background: var(--ambar); transform: scaleY(0); transform-origin: bottom; transition: transform var(--t-hover) var(--nivelar); }
@media (hover: hover) { .topo-nav a:hover::after { transform: scaleY(1); } }
.topo-nav a:focus-visible::after { transform: scaleY(1); }
/* Página atual: barra grafite fixa embaixo (diferente da faixa âmbar do hover). */
.topo-nav a[aria-current]::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 3px; background: var(--grafite); }
@media (max-width: 599px) {
  .topo .faixa { padding-block: 12px 0; }
  .topo-nav { width: calc(100% + 2 * var(--margem)); margin-inline: calc(-1 * var(--margem)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linha); }
  .topo-nav a { text-align: center; padding: 13px 4px; font-size: .875rem; }
  .topo-nav a + a { border-left: 1px solid var(--linha); }
  .topo-nav a::after { left: 22%; right: 22%; bottom: 12px; }
  .topo-nav a[aria-current]::before { left: 0; right: 0; bottom: -1px; }
}

main { display: block; }

/* ---------- Botões principais: a fôrma enche (a mesma cor, mais clara, sobe de baixo) ---------- */
/* O botão nunca muda de cor de família: âmbar fica âmbar, o verde do WhatsApp fica verde.
   Texto sempre escuro. Apertado, escurece; com o teclado, ganha o contorno claro. */
.botao-acao, .botao-whats {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 28px;
  font: 600 1.0625rem/1.2 var(--f-texto); text-align: center; text-decoration: none; cursor: pointer;
  color: var(--escuro); border: 0; border-radius: var(--raio);
  transition: background-color 120ms linear;
}
.botao-acao { background: var(--ambar); --enche: var(--ambar-claro); }
.botao-whats { background: var(--whatsapp); --enche: var(--whatsapp-claro); }
.botao-acao::before, .botao-whats::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--enche);
  transform: scaleY(0); transform-origin: bottom; transition: transform 320ms var(--nivelar);
}
@media (hover: hover) {
  .botao-acao:hover::before, .botao-whats:hover::before { transform: scaleY(1); }
}
.botao-acao:focus-visible::before, .botao-whats:focus-visible::before { transform: scaleY(1); }
.botao-acao:focus-visible, .botao-whats:focus-visible { outline: 2px solid var(--grafite); outline-offset: 3px; }
.botao-acao:active { background: var(--ambar-fundo); }
.botao-whats:active { background: var(--whatsapp-fundo); }
.botao-acao:active::before, .botao-whats:active::before { transform: scaleY(0); transition: none; }

/* Toque no WhatsApp (SPEC R6): enquanto o celular troca de aplicativo, o botão enche devagar, como
   concreto na fôrma, e o balão da betoneira gira ao lado do texto (as listras andam, como no
   desenho da obra). O JS põe .abrindo e o balão; com movimento reduzido, fica tudo parado. */
/* Enche sempre do zero, mesmo com o mouse em cima ou o foco do teclado (que já tinham enchido o botão). */
.botao-whats.abrindo::before { transform: scaleY(1); animation: encher-botao 1600ms var(--nivelar) both; }
@keyframes encher-botao { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* No canhoto do PC o botão é estreito: no toque, menos folga dos lados pro balão caber junto do texto.
   Se a pessoa usa letra maior no navegador, quebra a linha em vez de cortar o texto. */
.canhoto .botao-whats.abrindo { gap: 5px; padding-inline: 8px; white-space: normal; }
.balao { flex: none; width: 28px; height: 16px; }
.balao-forma, .balao-listras { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.balao-forma { stroke-width: 1.6; }
.balao-listras { stroke-width: 2.2; animation: girar-balao-mini 800ms linear infinite; }
/* 68 = o espaço entre duas listras (no desenho): a volta emenda sem pular. */
@keyframes girar-balao-mini { to { transform: translateX(68px); } }

/* Entrada ao rolar (SPEC R2): quem está abaixo da 1ª tela espera aqui até chegar nela. Só o
   JavaScript põe esta classe, e nunca com movimento reduzido. */
.espera-entrar { opacity: 0; transform: translateY(10px); }
@media print { .espera-entrar { opacity: 1; transform: none; } }

/* ---------- Campos ---------- */
.campo-rotulo { display: block; font-size: var(--t-s); font-weight: 600; margin: 0 0 6px; }
.campo {
  display: block; width: 100%;
  font: inherit; font-size: 1.0625rem; color: var(--grafite);
  background: var(--campo); border: 1px solid var(--borda-campo); border-radius: var(--raio);
  min-height: 50px; padding: 11px 14px;
}
.campo::placeholder { color: #8b9296; }
.campo:focus-visible { outline: 2px solid var(--grafite); outline-offset: 1px; border-color: var(--grafite); }
/* Setinha do select feita com borda (sem imagem, sem ícone pronto). */
.escolha { position: relative; display: block; }
.escolha select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; }
.escolha::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--grafite); border-bottom: 2px solid var(--grafite); transform: rotate(45deg); pointer-events: none; }
.campo-linha { margin-bottom: 18px; min-width: 0; }
.erro { color: var(--grafite); background: var(--papel); border-left: 4px solid var(--ambar); padding: 10px 14px; font-weight: 600; }

/* ---------- Cadastro de fornecedor ("Sou fornecedor", lib/cadastro.js) ---------- */
.cadastro { margin: 28px 0 8px; padding: clamp(16px, 3vw, 28px); }
.cadastro fieldset { border: 0; padding: 0; margin-inline: 0; }
.cadastro legend { padding: 0; }
.cadastro .nota { margin: 6px 0 0; }
.cadastro textarea.campo { min-height: 96px; resize: vertical; }
.cadastro .botao-acao { width: 100%; margin-top: 8px; }
.cadastro-opcoes { display: flex; flex-wrap: wrap; gap: 0 22px; }
/* Caixa e bolinha nativas, do tamanho do dedo; a cor é a da tinta (o âmbar fica só no botão). */
.cadastro-opcao { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.cadastro-opcao input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--grafite); }
.cadastro-outra { margin-top: 10px; }
/* A isca contra robô: fora da tela e do leitor de tela (aria-hidden no HTML). Pessoa nenhuma preenche. */
.cadastro-isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cadastro-erros { margin: 0 0 8px; }
.cadastro-erros ul { margin: 0; padding-left: 1.2rem; }
@media (min-width: 720px) { .cadastro .botao-acao { width: auto; } }

/* ---------- Início: abertura (título + buscador) ---------- */
.abertura { padding-block: clamp(28px, 4vw, 56px) clamp(20px, 2.4vw, 32px); }
.abertura-texto { row-gap: 20px; align-items: end; }
.abertura h1 { font-size: clamp(2.6rem, 1rem + 4.6vw, 5.25rem); line-height: .94; letter-spacing: -.045em; margin-left: -.05em; }
.abertura .lead { margin: 0; }
@media (min-width: 960px) {
  .abertura h1 { grid-column: 1 / 8; }
  .abertura .lead { grid-column: 8 / 13; }
}
/* Buscador: um papel com as duas perguntas e o botão. */
.buscador { margin-top: clamp(20px, 2.4vw, 32px); padding: clamp(16px, 2vw, 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 20px; align-items: end; }
.buscador .botao-acao { width: 100%; }
/* O aviso fala com quem procura: o que ainda não tem, o que já tem e, por último, o convite. */
.buscador-aviso { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-left: 4px solid var(--ambar); background: var(--concreto); }
.buscador-aviso p { margin: 0; }
.buscador-aviso .aviso-titulo { font-weight: 600; }
.buscador-aviso .aviso-ja { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 4px; }
.buscador-aviso .aviso-convite { margin-top: 6px; font-size: var(--t-s); color: var(--cimento); }
.buscador-aviso .aviso-convite .link-linha { color: var(--grafite); }
@media (min-width: 720px) {
  .buscador { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; }
  .buscador .botao-acao { width: auto; }
}
/* No celular não tem buscador: logo depois do título vêm as 9 categorias (a cidade se escolhe
   na página da categoria). */
@media (max-width: 719px) { .buscador { display: none; } }

/* Link de linha (seta que anda): "Sou fornecedor", "Ver a lista" */
.link-linha { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: inherit; text-decoration: none; padding: 6px 0; }
.link-linha::after { content: ""; position: absolute; z-index: -1; left: -2px; right: -2px; bottom: 2px; height: 3px; background: var(--ambar); transform: scaleY(0); transform-origin: bottom; transition: transform var(--t-hover) var(--nivelar); }
.seta { display: inline-block; transition: transform var(--t-hover) var(--nivelar); }
@media (hover: hover) { .link-linha:hover::after { transform: scaleY(1); } .link-linha:hover .seta { transform: translateX(4px); } }
.link-linha:focus-visible::after { transform: scaleY(1); }
.link-linha:focus-visible .seta { transform: translateX(4px); }

/* ---------- Início: a prancha (desenho da obra + legenda numerada) ---------- */
.prancha { padding-block: 0 var(--ritmo-largo); scroll-margin-top: 16px; }
.prancha-folha { padding: clamp(10px, 2vw, 24px); }
.prancha-desenho { margin: 0; }
.prancha-dica { display: none; }
/* Duas cópias do desenho: a do PC (etiquetas com o nome inteiro) e a do celular (etiquetas com o
   nome curto, perto de cada parte). Só uma aparece. */
.prancha-desenho .desenho.cel { display: none; }
/* No celular o desenho fica com umas 2 telas de largura, numa faixa que a pessoa arrasta pro lado
   (a página não rola). Vem logo depois do título, antes da lista das 9 categorias. */
@media (max-width: 719px) {
  .prancha-desenho .desenho { display: none; }
  .prancha-desenho .desenho.cel { display: block; width: clamp(720px, 195vw, 1100px); max-width: none; }
  .prancha-desenho { overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(-1 * clamp(10px, 2vw, 24px)); padding-bottom: 4px; }
  .prancha-dica { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
}
.prancha-desenho:focus-visible { outline-offset: -2px; }
.legenda { list-style: none; margin: clamp(12px, 2vw, 20px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; border-top: 2px solid var(--grafite); }
.legenda-item { border-bottom: 1px solid var(--linha); }
/* A prancha que anda com a rolagem (docs/SPEC.md R11), só com a classe "historia" (o troca.js põe, se o navegador
   tem IntersectionObserver; sem JavaScript, a prancha fica como antes): o desenho e o contador ficam presos na
   tela enquanto as 9 linhas passam, numa coluna só, e cada linha tem a altura da vez dela no meio da tela (38vh).
   Abaixo de 1024 px, presos no topo, com o papel por baixo (as linhas passam embaixo) e no máximo 45vh de
   desenho. A linha da vez encosta no desenho: o conteúdo dela fica no pé da linha. */
.prancha-contador { display: none; margin: 8px 0 0; font-family: var(--f-dado); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cimento); }
.prancha-contador [data-contador-num] { color: var(--grafite); }
.historia .prancha-contador { display: block; }
.historia .prancha-palco { position: sticky; top: 0; z-index: 1; background: var(--papel); padding-top: 8px; }
.historia .prancha-palco .desenho { max-height: 45vh; }
.historia .legenda { grid-template-columns: minmax(0, 1fr); }
.historia .legenda-item { min-height: 38vh; display: flex; flex-direction: column; justify-content: flex-end; border-left: 3px solid transparent; }
/* A linha da vez: a borda e o número na cor de ação, sem animação de entrada. */
.legenda-item.ativa { border-left-color: var(--ambar); }
.legenda-item.ativa .legenda-num { border-color: var(--ambar); color: var(--ambar); }
/* O Shift+Tab rola a linha de volta pra tela pelo mínimo: sem a margem, ela fica por baixo do palco preso (45vh de desenho + contador, que quebra em 2 linhas a 360 px). */
@media (max-width: 1023px) { .historia a.legenda-linha { scroll-margin-top: calc(45vh + 5rem); } }
/* No papel não tem rolagem: a legenda volta a ser uma lista corrida. */
@media print { .historia .legenda-item { min-height: 0; } }
/* De 1024 px pra cima, lado a lado: o desenho (3/5) preso no meio da altura da tela, e a legenda (2/5). O
   9.5rem é mais ou menos metade da altura do desenho com o contador, de 1024 a 1440 px (de 257 a 322 px, medido). */
@media (min-width: 1024px) {
  .historia .prancha-folha { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--vao); align-items: start; }
  .historia .prancha-palco { top: max(16px, calc(50vh - 9.5rem)); padding-top: 0; }
  .historia .prancha-palco .desenho { max-height: calc(100vh - 5rem); }
  .historia .legenda { margin-top: 0; }
  .historia .legenda-item { justify-content: center; }
  .historia .prancha-fatos { grid-column: 1 / -1; }
}
/* Cada categoria com o mesmo peso: número, nome, o que é e a situação (fornecedores ou "Em cadastro"). */
.legenda-linha {
  position: relative; isolation: isolate; color: inherit; text-decoration: none;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 2px 14px;
  min-height: 68px; padding: 12px 10px 12px 8px;
}
.legenda-num { grid-row: 1 / 4; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--raio); border: 1.5px solid var(--borda-campo); color: var(--grafite); font-family: var(--f-dado); font-weight: 500; transition: background-color var(--t-hover) var(--nivelar), color var(--t-hover) var(--nivelar), border-color var(--t-hover) var(--nivelar); }
.legenda-nome { grid-column: 2; font-family: var(--f-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -.01em; line-height: 1.15; padding-top: 3px; transition: color var(--t-hover) var(--nivelar); }
.legenda-desc { grid-column: 2; font-size: var(--t-s); line-height: 1.35; color: var(--cimento); }
.legenda-contagem { grid-column: 2; margin-top: 3px; font-family: var(--f-dado); font-size: .875rem; color: var(--grafite); }
.legenda-vazia .legenda-contagem { color: var(--cimento); }
.legenda-linha .seta { grid-column: 3; grid-row: 1 / 4; align-self: center; font-size: 1.25rem; color: var(--ambar); }
/* Hover e foco: a linha escurece de baixo pra cima, o título fica branco e o número âmbar;
   a parte acende no desenho (JS). */
.legenda-linha::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--realce); transform: scaleY(0); transform-origin: bottom; transition: transform 340ms var(--nivelar); }
@media (hover: hover) {
  a.legenda-linha:hover::before { transform: scaleY(1); }
  a.legenda-linha:hover .legenda-nome { color: var(--branco); }
  a.legenda-linha:hover .legenda-num { background: var(--ambar); border-color: var(--ambar); color: var(--escuro); }
  a.legenda-linha:hover .seta { transform: translateX(4px); }
}
a.legenda-linha:focus-visible { outline-offset: -2px; }
a.legenda-linha:focus-visible::before, a.legenda-linha:active::before { transform: scaleY(1); }
a.legenda-linha:focus-visible .legenda-nome { color: var(--branco); }
a.legenda-linha:focus-visible .legenda-num { background: var(--ambar); border-color: var(--ambar); color: var(--escuro); }
.legenda-item.aceso .legenda-num { background: var(--ambar); color: var(--escuro); border-color: var(--ambar); }
@media (min-width: 600px) { .legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .legenda { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prancha-fatos { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 16px 0 0; }
.prancha-fatos dd { margin: 2px 0 0; font-family: var(--f-dado); font-size: var(--t-s); }
.prancha .nota { max-width: 46rem; margin: 12px 0 0; }
.convite-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 24px 0 0; font-weight: 600; }

/* ---------- Início: calculadora + nota do pedido ---------- */
.calc { padding-block: 0 var(--ritmo-largo); row-gap: 20px; align-items: start; scroll-margin-top: 16px; }
.calc-cabeca p { max-width: 34rem; margin: 16px 0 0; }
.calc-form { padding: clamp(18px, 3vw, 28px); }
.calc-form .campo-linha:first-child { margin-bottom: 8px; }
.grupo { border: 0; border-top: 2px dashed var(--linha-forte); margin: 20px 0 0; padding: 18px 0 0; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); column-gap: 16px; }
.grupo legend { float: left; grid-column: 1 / -1; width: 100%; padding: 0; margin: 0 0 14px; font-family: var(--f-dado); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cimento); }
.grupo > .nota, .grupo > .subgrupo { grid-column: 1 / -1; }
/* Escolha (select) ocupa a linha inteira: sem casa vazia do lado. */
.grupo > .campo-linha:has(select) { grid-column: 1 / -1; }
.grupo > .nota { margin: -6px 0 16px; }
.subgrupo { font-weight: 600; margin: 4px 0 10px; }
.calc-form > .grupo + .campo-linha { border-top: 2px dashed var(--linha-forte); padding-top: 18px; margin-top: 2px; }
.calc-form .botao-acao { width: 100%; margin-top: 4px; }
.calc-form .erro { margin: 4px 0 16px; }
@media (min-width: 600px) { .calc-form .botao-acao { width: auto; } }
@media (min-width: 960px) {
  .calc-cabeca { grid-column: 1 / 8; grid-row: 1; }
  .calc-form { grid-column: 1 / 8; grid-row: 2; }
  /* A 3ª linha (1fr) absorve a altura da nota: o formulário não se afasta do título. */
  .calc { grid-template-rows: auto auto 1fr; }
  .calc .pedido { grid-column: 9 / 13; grid-row: 1 / 4; position: sticky; top: 24px; }
}

/* A nota do pedido */
.pedido-cabeca { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--linha); margin: 0; }
.pedido-corpo { padding: 18px 20px 20px; }
.pedido-vazio-texto { margin: 0 0 18px; color: var(--cimento); max-width: 26rem; }
.pedido-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.pedido-campos dd, .resultado-numeros dd { margin: 2px 0 0; }
.pedido-campos dd { font-weight: 600; }
.volume-pedir { margin: 0 0 6px; }
.volume-numero { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 1.6rem + 4vw, 4.75rem); line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin: 0 0 14px; }
.resultado-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; padding: 12px 0; border-block: 1px solid var(--linha); }
.resultado-numeros dd { font-family: var(--f-dado); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.resultado-caminhao { font-size: var(--t-s); color: var(--cimento); margin: 12px 0 0; }
.picote { border: 0; border-top: 2px dashed var(--linha-forte); margin: 20px -20px; }
.memoria { font-family: var(--f-dado); font-size: .8125rem; line-height: 1.55; color: var(--grafite); margin: 8px 0 16px; padding-left: 1.5rem; }
.memoria li { margin-bottom: 6px; }
/* O próximo passo depois da conta: quem entrega o concreto (e a bomba, se marcou bomba). */
.pedido-proximo { display: grid; gap: 10px; margin-top: 18px; }
.pedido-proximo:empty { display: none; }
.pedido-proximo .botao-acao { width: 100%; }
.pedido-proximo p { margin: 0; font-size: var(--t-s); color: var(--cimento); }
/* Memória de cálculo: fechada no celular ("Ver a conta"), aberta no PC (o JS abre). */
.conta summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.conta summary::-webkit-details-marker { display: none; }
.conta-abrir { font-weight: 600; font-size: var(--t-s); display: inline-flex; align-items: center; gap: 8px; }
.conta-abrir::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.conta[open] .conta-abrir { display: none; }
.pedido .nota { margin: 0; }
/* No celular a nota vazia não ocupa a tela: ela aparece depois de Calcular. */
@media (max-width: 959px) { .pedido[data-estado="vazio"] { display: none; } }

/* Caminhões: cada um é uma fôrma de 8 m³ com o nível da carga. */
/* --colunas vem do JS: quantos caminhões cabem lado a lado (até 4), pra encherem a largura da nota. */
.caminhoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); gap: 14px 10px; }
.pedido-vazio .caminhoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pagina-404 .caminhoes { grid-template-columns: 110px; }
/* Caminhão esperando a conta: borda tracejada, sem carga. */
.caminhao-espera .caminhao-forma { border-style: dashed; border-color: var(--borda-campo); background: transparent; }
.caminhao-espera .caminhao-carga { color: var(--cimento); }
.caminhao { display: grid; gap: 6px; }
.caminhao-forma { position: relative; display: block; height: clamp(76px, 7vw, 104px); border: 2px solid var(--grafite); border-radius: var(--raio); overflow: hidden; background: var(--papel); }
.caminhao-nivel { position: absolute; inset: 0; background: var(--cimento); transform: scaleY(var(--nivel, 0)); transform-origin: bottom; }
.caminhao-carga { order: 2; font-family: var(--f-dado); font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.caminhao-nome { order: 3; margin-top: -4px; font-family: var(--f-dado); font-size: .6875rem; letter-spacing: .04em; color: var(--cimento); white-space: nowrap; }
.caminhao-mais { align-self: end; font-family: var(--f-dado); font-size: .8125rem; color: var(--cimento); padding-bottom: 28px; }

/* ---------- Página de categoria ---------- */
.trilha { font-size: var(--t-s); color: var(--cimento); padding-top: clamp(24px, 4vw, 48px); }
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 0; }
.trilha a { display: inline-block; padding-block: 8px; background-position: 0 calc(100% - 8px), 0 calc(100% - 8px); }
.trilha li + li::before { content: "/"; margin-right: 8px; color: var(--linha-forte); }
.trilha [aria-current] { color: var(--grafite); }
.cabecalho-categoria { padding-block: 20px var(--ritmo-normal); row-gap: 24px; align-items: end; }
.cabecalho-categoria .lead { margin: 0; }
.cabecalho-categoria .filtro { width: min(100%, 22rem); }
.categoria-desenho { margin: 0; padding: 12px; }
@media (max-width: 599px) { .categoria-desenho { display: none; } }
.categoria-desenho figcaption { margin-top: 8px; }
@media (min-width: 960px) {
  .com-desenho h1 { grid-column: 1 / 8 !important; }
  .com-desenho .lead { grid-column: 1 / 7 !important; }
  .com-desenho .filtro { grid-column: 1 / 6 !important; justify-self: start !important; }
  .com-desenho .categoria-desenho { grid-column: 8 / 13; grid-row: 1 / 4; align-self: end; }
}
@media (min-width: 960px) {
  .cabecalho-categoria h1 { grid-column: 1 / 10; }
  .cabecalho-categoria .lead { grid-column: 1 / 7; }
  .cabecalho-categoria .filtro { grid-column: 9 / 13; justify-self: end; }
}
.lista-categoria { padding-bottom: var(--ritmo-largo); }
.contagem { font-family: var(--f-dado); font-size: var(--t-s); color: var(--cimento); border-bottom: 2px solid var(--grafite); padding-bottom: 10px; margin-bottom: 20px; }
.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ficha article { display: grid; grid-template-columns: minmax(0, 1fr); }
.ficha-corpo { padding: 20px 20px 18px; min-width: 0; }
.ficha-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.ficha-nome { font-size: var(--t-m); }
.ficha-faz { font-size: 1.125rem; line-height: 1.45; margin: 0 0 16px; max-width: 40rem; }
/* Carimbo "EXEMPLO": cinza, como carimbo em documento */
.carimbo {
  font-family: var(--f-dado); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cimento); border: 2px solid var(--cimento); border-radius: var(--raio); padding: 1px 8px;
}
.ficha-aviso { font-size: var(--t-s); color: var(--cimento); margin-bottom: 10px; }
/* De onde vem o contato da concreteira ("Atende: ..." ou o contato do site oficial): nota de rodapé de documento, cor neutra */
.ficha-origem { font-size: var(--t-s); border-left: 3px solid var(--cimento); padding-left: 12px; margin-bottom: 14px; max-width: 46rem; }
.ficha-dados { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; border-top: 1px solid var(--linha); }
.ficha-dados div { padding: 10px 0 8px; border-bottom: 1px solid var(--linha); min-width: 0; }
.ficha-dados .largo { grid-column: 1 / -1; }
.ficha-dados dd { margin: 2px 0 0; }
/* Concreteira: o quadro "Antes de pagar, confira" (site oficial e nomes do Pix), depois dos dados. O endereço é
   texto, nunca link; quebra em qualquer ponto pra não abrir rolagem pro lado. */
.ficha-conferir { margin-top: 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 12px 14px; max-width: 46rem; font-size: var(--t-s); }
.ficha-conferir-titulo { font-family: var(--f-display); font-weight: 700; font-size: var(--t-s); line-height: 1.3; margin: 0 0 8px; }
.ficha-conferir dl { margin: 0 0 8px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; }
.ficha-conferir dt { grid-column: 1; color: var(--cimento); }
.ficha-conferir dd { grid-column: 2; margin: 0; font-family: var(--f-dado); word-break: break-word; overflow-wrap: anywhere; }
.ficha-conferir p { margin: 0; }
.canhoto { border-top: 2px dashed var(--linha-forte); padding: 16px 20px 20px; display: grid; gap: 14px; align-content: center; }
.canhoto .botao-whats, .canhoto .botao-ligar { width: 100%; white-space: nowrap; padding-inline: 16px; }
.ficha-canal { margin: 0; font-size: var(--t-s); }
.ficha-telefone { margin: 0; font: 600 1.125rem/1.2 var(--f-dado); word-break: break-word; overflow-wrap: anywhere; }
/* No celular a ficha fica curta: nome, o que faz, o botão e só depois os dados (em 2 colunas).
   O corpo vira "contents" só pra o botão do canhoto poder subir pro meio dele. */
@media (max-width: 719px) {
  .ficha article { display: flex; flex-direction: column; padding: 18px 16px 4px; }
  .ficha-corpo { display: contents; }
  .ficha-topo { order: 1; } .ficha-aviso { order: 2; } .ficha-origem { order: 3; } .ficha-faz { order: 4; margin-bottom: 14px; }
  .canhoto { order: 5; border: 0; padding: 0 0 16px; }
  .ficha-dados { order: 6; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-dados div:nth-last-child(-n+2):not(.largo) { border-bottom: 0; }
  .ficha-conferir { order: 7; margin: 0 0 16px; }
  .ficha-dados dd { font-size: .9375rem; }
}
@media (min-width: 720px) {
  .ficha article { grid-template-columns: minmax(0, 1fr) 16rem; }
  /* Folga de 12 px (era 20) dos lados do canhoto: o botão ganha 16 px, e "Abrindo o WhatsApp…" com
     a betoneira cabe numa linha no toque (SPEC R6, medido), sem tirar espaço do corpo da ficha. */
  .canhoto { border-top: 0; border-left: 2px dashed var(--linha-forte); padding-inline: 12px; }
  .ficha-dados { grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr; }
  .ficha-dados .largo { grid-column: auto; }
}
.vazio { padding: 16px 0; }
.aviso-golpe { margin-top: var(--ritmo-normal); background: var(--papel); color: var(--grafite); border: 1px solid var(--linha); border-left: 6px solid var(--grafite); border-radius: var(--raio); padding: clamp(20px, 3vw, 32px); display: grid; gap: 8px 32px; }
.aviso-golpe h2 { font-size: var(--t-m); }
.aviso-golpe p { margin: 0; max-width: 40rem; }
.aviso-golpe a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 960px) { .aviso-golpe { grid-template-columns: 16rem minmax(0, 1fr); align-items: baseline; } }
/* O texto da categoria, depois das fichas e do "Antes de pagar": a letra das páginas de texto (.texto). */
.texto-categoria { padding-bottom: var(--ritmo-largo); }
.texto-categoria .texto > h2 { font-size: var(--t-l); margin: 0 0 8px; }
.texto-categoria h3 { margin: 40px 0 12px; }
/* Página única (/fornecedores/): uma lista por categoria, uma embaixo da outra. A ficha tem h3 ali
   (o h2 é o da categoria), com o mesmo desenho de letra da ficha da página da categoria. */
.pagina-unica { padding-bottom: var(--ritmo-largo); }
.pagina-unica .lista-categoria { padding-bottom: 0; scroll-margin-top: 16px; }
.pagina-unica .lista-categoria + .lista-categoria { margin-top: var(--ritmo-normal); }
.pagina-unica .lista-categoria > h2 { margin-bottom: 12px; }
.pagina-unica .ficha-nome { line-height: 1.05; letter-spacing: -.025em; }

/* ---------- Páginas de texto (regras) ---------- */
.pagina-texto { padding-block: clamp(32px, 6vw, 88px) var(--ritmo-largo); row-gap: 48px; align-items: start; }
.texto { max-width: 40rem; }
.texto h1 { margin-bottom: 32px; }
.doc-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; border-top: 2px solid var(--grafite); padding-top: 12px; margin-bottom: clamp(24px, 4vw, 40px); }
.doc-cabeca p { margin: 0; }
/* Carimbo de rascunho: só aparece com "rascunho": true, com a cor neutra do carimbo EXEMPLO. */
.carimbo-aprovacao { transform: rotate(-2deg); font-family: var(--f-dado); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cimento); border: 2px solid var(--cimento); border-radius: var(--raio); padding: 3px 10px; }
.texto h2 { font-size: var(--t-m); letter-spacing: -.015em; margin: 40px 0 12px; }
.texto ul, .texto ol { padding-left: 1.3rem; }
.texto li { margin-bottom: 8px; }
.texto li::marker { color: var(--cimento); }
mark.pendente { background: var(--ambar); color: var(--escuro); font-family: var(--f-dado); font-size: .88em; padding: 0 3px; border-radius: var(--raio); }
.regras { padding: 6px 0; }
.regras h2 { font-family: var(--f-dado); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cimento); padding: 10px 20px 8px; margin: 0; border-bottom: 1px solid var(--linha); }
.regras ul { list-style: none; margin: 0; padding: 0; }
.regras li + li { border-top: 1px solid var(--linha); }
.regras a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; color: inherit; text-decoration: none; position: relative; isolation: isolate; font-weight: 600; }
.regras a { transition: color var(--t-hover) var(--nivelar); }
.regras a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--realce); transform: scaleY(0); transform-origin: bottom; transition: transform var(--t-hover) var(--nivelar); }
.regras a[aria-current="page"]::after { content: "você está aqui"; font-family: var(--f-dado); font-size: .6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--cimento); }
@media (hover: hover) { .regras a:hover { color: var(--branco); } .regras a:hover::before { transform: scaleY(1); } }
.regras a:focus-visible { color: var(--branco); }
.regras a:focus-visible::before { transform: scaleY(1); }
.regras a:focus-visible { outline-offset: -2px; }
@media (min-width: 960px) {
  .texto { grid-column: 1 / 9; }
  .regras { grid-column: 9 / 13; position: sticky; top: 24px; }
}

/* ---------- 404 ---------- */
.pagina-404 { padding-block: clamp(40px, 7vw, 104px) var(--ritmo-largo); row-gap: 32px; align-items: start; }
.pagina-404 h1 { margin-bottom: 24px; }
.pagina-404 .acoes { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; }
@media (min-width: 960px) {
  .pagina-404 .texto-404 { grid-column: 1 / 8; }
  .pagina-404 .pedido { grid-column: 9 / 13; position: static; }
}

/* ---------- Rodapé (final) ---------- */
.rodape { background: var(--rodape); color: var(--grafite); border-top: 1px solid var(--linha); padding-block: var(--ritmo-largo) 40px; }
.rodape .grade { row-gap: 20px; }
.rodape-frase { font-family: var(--f-display); font-weight: 700; font-size: var(--t-l); line-height: 1.05; letter-spacing: -.025em; margin: 0; max-width: 22ch; text-wrap: balance; }
.rodape-regra { color: var(--claro-no-escuro); margin: 0; max-width: 38rem; }
.rodape a { color: var(--grafite); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color var(--t-hover) var(--nivelar); }
.rodape-regra a { padding-block: 2px; transition: text-decoration-color var(--t-hover) var(--nivelar), text-underline-offset var(--t-hover) var(--nivelar); }
@media (hover: hover) { .rodape-regra a:hover { text-decoration-thickness: 3px; text-decoration-color: var(--ambar); text-underline-offset: 6px; } }
.rodape-regra a:focus-visible { text-decoration-thickness: 3px; text-decoration-color: var(--ambar); text-underline-offset: 6px; }
.rodape :focus-visible { outline-color: var(--grafite); }
.rodape-links { list-style: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(251, 251, 248, .22); display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: var(--t-s); }
.rodape-links a { display: inline-block; padding: 8px 4px; margin-inline: -4px; text-decoration: none; }
/* Rodapé: o âmbar sobe e enche o link (letra grafite), como os outros botões e linhas. */
.rodape-links a, .rodape-regra a { background: linear-gradient(var(--ambar), var(--ambar)) 0 100% / 100% 0 no-repeat; transition: background-size var(--t-hover) var(--nivelar), color var(--t-hover) var(--nivelar); }
@media (hover: hover) { .rodape-links a:hover, .rodape-regra a:hover { background-size: 100% 100%; color: var(--escuro); text-decoration-color: transparent; } }
.rodape-links a:focus-visible, .rodape-regra a:focus-visible { background-size: 100% 100%; color: var(--escuro); }
.rodape-links a:focus-visible, .rodape-links a[aria-current="page"] { text-decoration: underline; }
.rodape-assinatura { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; font-family: var(--f-dado); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--claro-no-escuro); }
.rodape-assinatura .marca-forma { width: 18px; height: 18px; border-color: var(--grafite); }
.rodape-assinatura .marca-forma::after { background: var(--grafite); }
@media (min-width: 960px) {
  .rodape-frase { grid-column: 1 / 9; }
  .rodape-regra { grid-column: 1 / 8; }
}

/* ---------- Desenho técnico da obra (gerador/desenho.js) ---------- */
/* Prancha: traço grafite, concreto cinza, madeira, aço em ferrugem e a terra vermelha da região.
   O concreto enche as peças na ordem da obra (estaca, bloco, baldrame, pilar, laje, piso) e o
   balão do caminhão gira sem parar, como uma betoneira de verdade. Tudo parado com movimento reduzido. */
.desenho {
  --d-concreto: #737b80; --d-madeira: #8d7957; --d-madeira-traco: #d9c49c; --d-aco: #e07a5f; --d-terra: #c08262;
  display: block; width: 100%; height: auto; font-family: var(--f-dado);
}
.desenho .linha { fill: none; stroke: var(--grafite); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.desenho .linha.cheio, .desenho .cheio { fill: var(--papel); }
.desenho .linha-fina { fill: none; stroke: var(--grafite); stroke-width: 1.2; stroke-linecap: round; }
.desenho .vidro { fill: #2f373b; stroke: var(--grafite); stroke-width: 1.5; }
.desenho .pneu { fill: #0b0d0e; stroke: var(--grafite); stroke-width: 1.5; }
.desenho .cubo { fill: var(--papel); stroke: var(--grafite); stroke-width: 1.5; }
.desenho .concreto { fill: var(--d-concreto); stroke: none; }
.desenho .solo { stroke: none; }
.desenho .solo-risco { stroke: var(--d-terra); stroke-width: 1.4; opacity: .42; }
.desenho .chao { stroke: var(--grafite); stroke-width: 2.5; }
.desenho .madeira { fill: var(--d-madeira); stroke: var(--d-madeira-traco); stroke-width: 1.2; }
.desenho .madeira-fina { stroke: var(--d-madeira-traco); stroke-width: 1.4; stroke-dasharray: 7 5; }
.desenho .aco { fill: none; stroke: var(--d-aco); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.desenho .aco-fino { stroke: var(--d-aco); stroke-width: 1.1; }
.desenho .lanca { fill: none; stroke: var(--grafite); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.desenho .lanca-miolo { fill: none; stroke: var(--papel); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.desenho .cilindro { stroke: var(--grafite); stroke-width: 4; stroke-linecap: round; }
.desenho .junta { fill: var(--papel); stroke: var(--grafite); stroke-width: 2; }
.desenho .mangote { fill: none; stroke: var(--grafite); stroke-width: 5; stroke-linecap: round; }
.desenho .jorro { fill: none; stroke: var(--d-concreto); stroke-width: 6; stroke-linecap: round; }
.desenho .listra { stroke: #4c5459; stroke-width: 8; }
.desenho .cabo { stroke: var(--grafite); stroke-width: 1.2; }
.desenho .furo { fill: none; stroke: var(--grafite); stroke-width: 1.4; stroke-dasharray: 6 4; }
.desenho .haste { stroke: var(--grafite); stroke-width: 5; stroke-linecap: round; }
.desenho .trado { fill: none; stroke: var(--grafite); stroke-width: 2; stroke-linejoin: round; }
.desenho .aro { fill: none; stroke: var(--grafite); stroke-width: 4; stroke-dasharray: 2 3; }
.desenho .areia { stroke: #c2aa83; stroke-width: 1.5; }
.desenho .grao { fill: #c9b08a; }
.desenho .brita { stroke: #a9b0b4; stroke-width: 1.5; }
.desenho .pedra { fill: #5c646a; stroke: #b4babe; stroke-width: .8; }
.desenho .chamada { stroke: var(--grafite); stroke-width: 1.3; }
.desenho .ponto { fill: var(--grafite); }
.desenho .marcador-caixa { fill: var(--papel); stroke: var(--grafite); stroke-width: 1.6; }
.desenho .marcador-num { fill: var(--grafite); }
.desenho .marcador-n { fill: var(--papel); font-size: 20px; font-weight: 500; }
.desenho .marcador-rotulo { fill: var(--grafite); font-size: 15px; font-weight: 500; letter-spacing: .08em; }
.desenho .marcador { cursor: pointer; }
.desenho .marcador .marcador-num, .desenho .marcador .marcador-n, .desenho .parte { transition: fill var(--t-hover) var(--nivelar), opacity var(--t-hover) var(--nivelar); }
.desenho .carimbo-titulo { font-family: var(--f-display); font-weight: 700; font-size: 17px; fill: var(--grafite); letter-spacing: -.01em; }
.desenho .carimbo-texto { font-size: 13px; fill: var(--cimento); letter-spacing: .06em; }
/* Destaque: a parte apontada fica, o resto apaga (o JS marca .foco e .aceso). */
.desenho.foco .parte { opacity: .22; }
.desenho.foco .parte.aceso { opacity: 1; }
.desenho .marcador.aceso .marcador-num { fill: var(--ambar); }
.desenho .marcador.aceso .marcador-n { fill: var(--escuro); }
@media (hover: hover) {
  .desenho .marcador:hover .marcador-num { fill: var(--ambar); }
  .desenho .marcador:hover .marcador-n { fill: var(--escuro); }
}
/* Encher a fôrma: cada peça de concreto sobe de baixo, na ordem da obra. */
.desenho .concreto { transform-box: fill-box; transform-origin: 50% 100%; animation: encher-peca 760ms var(--nivelar) both; }
.desenho .o1 { animation-delay: .25s; } .desenho .o2 { animation-delay: .6s; } .desenho .o3 { animation-delay: .9s; }
.desenho .o4 { animation-delay: 1.2s; } .desenho .o5 { animation-delay: 1.55s; } .desenho .o6 { animation-delay: 1.9s; }
.desenho .o7 { animation-delay: 2.15s; }
@keyframes encher-peca { from { transform: scaleY(0); } }
/* Na impressão, o desenho sai cheio, em qualquer cópia (no papel largo sai a do PC, até no celular).
   Duração e atraso zerados, e não "animation: none": trocar o nome recriaria as peças, e o desenho que
   espera a rolagem perderia a espera (2ª revisão). Assim, de volta à tela, tudo fica como estava. */
@media print { .desenho .concreto { animation-delay: 0s; animation-duration: 0s; } }
/* O balão do caminhão gira sem parar (as listras andam pro lado). */
.desenho .giro { animation: girar-balao 3.4s linear infinite; }
@keyframes girar-balao { to { transform: translateX(34px); } }
/* Máquina trabalhando (docs/SPEC-maquinas.md): apontar a parte faz a máquina dela trabalhar UM ciclo
   (o JS põe .trabalha e tira no fim). O mesmo ciclo pras 9, pra nenhuma categoria chamar mais atenção.
   O "ciclo-maquina" não muda nada na tela: só marca, pro JS, a hora em que o ciclo acaba.
   Cada máquina faz o trabalho dela e está de volta no repouso até 90% do ciclo (2,7 s), e a animação de
   cada peça acaba junto com o movimento dela (2,7 s, ou antes): peça animada, mesmo parada, o navegador
   desenha com outro serrilhado, e o desenho mudaria sozinho no fim do ciclo, com tudo parado (DESIGN §9).
   Só transform, opacidade e tracejado. Curvas: a de motor, cubic-bezier(.45,0,.55,1), arranca e para
   suave (lança, lata, mesa, tambor, bailarina); a nivelar assenta; o que gira tem arranque, trecho reto e
   parada com a mesma velocidade nas emendas. O que gira sem voltar anda um número inteiro de passos do
   desenho (listra 34, dente 5 e 8): no fim, voltar ao zero não aparece. */
.desenho .parte.trabalha { animation: ciclo-maquina 3s linear; }
@keyframes ciclo-maquina { to { visibility: visible; } }
/* No toque, o iPhone pisca um retângulo cinza em quem responde ao clique (o Chrome, só em link e na mãozinha).
   Na máquina (a da bomba vai do caminhão até a laje) e no desenho da página da categoria, não: quem responde é
   a máquina, trabalhando. */
.desenho .parte, .categoria-desenho { -webkit-tap-highlight-color: transparent; }
/* Na impressão, sai no repouso. Duração e atraso zerados, e não "animation: none": "none" desfaz as
   animações, e de volta à tela elas recomeçariam do zero, com a máquina trabalhando sozinha. */
@media print { .desenho .trabalha, .desenho .trabalha * { animation-duration: 0s !important; animation-delay: 0s !important; } }
/* Peças que só aparecem trabalhando. No repouso, nem são desenhadas (visibility: hidden): com animação na
   página (o balão gira sempre), uma peça a mais, mesmo com opacidade 0, faz o navegador desenhar tudo por
   outro caminho, e a borda de todo traço fino muda um pouco (medido na 2ª revisão: até 90 de 255). O
   "visible" e o tracejado delas vão dentro da animação e só valem enquanto ela mexe: um traço tracejado (o
   dos grãos de areia, com 8 traços) também troca o caminho. Assim, acabam junto com a peça (medido: deixado
   até o fim do ciclo, o desenho todo mudava aos 3 s, com tudo parado).
   Escondidas, elas não recebem o mouse: senão o lugar vazio da pedra faria a máquina trabalhar. */
.desenho .massa, .desenho .carga, .desenho .escorre, .desenho .rola { opacity: 0; visibility: hidden; pointer-events: none; }
.desenho .massa { fill: none; stroke: var(--d-concreto); stroke-width: 6; stroke-linecap: round; }
.desenho .carga { fill: var(--d-concreto); }
.desenho .escorre { fill: none; stroke: #c9b08a; stroke-width: 2.8; stroke-linecap: round; }
/* Fixa a caixa do tambor (o centro dela é o centro do bojo). Nunca aparece; a caixa conta mesmo escondida. */
.desenho .eixo { fill: none; stroke: none; visibility: hidden; }
/* Pivôs: a caixa da própria peça (fill-box). */
.desenho .ponta { transform-box: fill-box; transform-origin: 0 0; }               /* P2, o cotovelo da lança */
.desenho .prumo, .desenho .cabo { transform-box: fill-box; transform-origin: 50% 0; } /* topo do mangote; a polia */
.desenho .barras, .desenho .poste { transform-box: fill-box; transform-origin: 50% 100%; } /* o pé */
.desenho .tambor, .desenho .rola { transform-box: fill-box; transform-origin: 50% 50%; }

/* 1 Caminhão betoneira: o balão acelera no mesmo sentido (mais 2 listras, 68) e o concreto desce pela bica.
   A descarga para em 2,4 s, e o último bolo some em 2,52 s. */
.desenho .trabalha .descarga { animation: descarregar 2.4s linear; }
@keyframes descarregar {
  0% { transform: translateX(-68px); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  25% { transform: translateX(-56.67px); animation-timing-function: linear; }
  75% { transform: translateX(-11.33px); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  100% { transform: translateX(0); }
}
.desenho .trabalha .massa { animation: escorrer-massa 2.52s linear; }
@keyframes escorrer-massa {
  0%, 100% { stroke-dasharray: 8 22; visibility: visible; }
  0%, 26.19% { opacity: 0; stroke-dashoffset: 0; }
  33.33%, 90.48% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -90px; }
}
/* 2 Bomba: a ponta da lança sobe 10° em volta de P2 e o mangote gira o contrário: fica no prumo. */
.desenho .trabalha .ponta { animation: erguer-lanca 2.7s; }
.desenho .trabalha .prumo { animation: aprumar-mangote 2.7s; }
@keyframes erguer-lanca {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40% { transform: rotate(-10deg); }
  57.78% { transform: rotate(-10deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: rotate(0deg); }
}
@keyframes aprumar-mangote {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40% { transform: rotate(10deg); }
  57.78% { transform: rotate(10deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: rotate(0deg); }
}
/* 3 Ferragem: as esperas de cada pilar entram 14 no pilar e voltam, um pilar de cada vez. */
.desenho .trabalha .barras { animation: afundar-espera 750ms; }
.desenho .trabalha .ganchos { animation: descer-gancho 750ms; }
.desenho .trabalha .barras.vez2, .desenho .trabalha .ganchos.vez2 { animation-delay: .65s; }
.desenho .trabalha .barras.vez3, .desenho .trabalha .ganchos.vez3 { animation-delay: 1.3s; }
.desenho .trabalha .barras.vez4, .desenho .trabalha .ganchos.vez4 { animation-delay: 1.95s; }
@keyframes afundar-espera {
  0% { transform: scaleY(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  36% { transform: scaleY(.6818); }
  52% { transform: scaleY(.6818); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100% { transform: scaleY(1); }
}
@keyframes descer-gancho {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  36% { transform: translateY(14px); }
  52% { transform: translateY(14px); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100% { transform: translateY(0); }
}
/* 4 Madeira: uma escora de cada vez desce 10 (a cunha solta) e volta a apertar a laje; o calço fica. */
.desenho .trabalha .poste { animation: soltar-escora 900ms; }
.desenho .trabalha .cabeca { animation: descer-cabeca 900ms; }
.desenho .trabalha .poste.vez2, .desenho .trabalha .cabeca.vez2 { animation-delay: .75s; }
.desenho .trabalha .poste.vez3, .desenho .trabalha .cabeca.vez3 { animation-delay: 1.5s; }
@keyframes soltar-escora {
  0% { transform: scaleY(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  27% { transform: scaleY(.9398); }
  47% { transform: scaleY(.9398); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100% { transform: scaleY(1); }
}
@keyframes descer-cabeca {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  27% { transform: translateY(10px); }
  47% { transform: translateY(10px); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100% { transform: translateY(0); }
}
/* 5 Piseiro: a bailarina desliza 28 pra direita e volta (à esquerda, o calço da escora não deixa). */
.desenho .trabalha .alisadora { animation: deslizar-alisadora 2.7s; }
@keyframes deslizar-alisadora {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40% { transform: translateX(28px); }
  57.78% { transform: translateX(28px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: translateX(0); }
}
/* 6 Areia e brita: a areia escorre pela encosta, depois uma pedra rola na brita (sem escorregar:
   giro = caminho ÷ raio) e para perto do pé. As duas aparecem e somem: é o que fecha no repouso.
   No celular, a pedra é 1,6 vez maior (como a trama de lá): no mesmo trecho da encosta, roda menos.
   A areia para em 1,5 s (e o tracejado dela sai junto), com a pedra rolando. */
.desenho .trabalha .escorre { animation: escorrer-areia 1.5s linear; }
@keyframes escorrer-areia {
  0%, 100% { stroke-dasharray: .5 4 .5 4 .5 4 .5 60; visibility: visible; }
  0%, 24% { opacity: 0; stroke-dashoffset: 16px; }
  26%, 92% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -44px; }
}
.desenho .trabalha .rola { animation: rolar-pedra 2.7s linear; }
.desenho.cel .trabalha .rola { animation-name: rolar-pedra-cel; }
.desenho.cel .rola { stroke-width: 1.28; } /* 0,8 × 1,6: a trama do celular engrossa o traço das pedras junto */
@keyframes rolar-pedra {
  0%, 100% { visibility: visible; }
  0%, 44.44% { opacity: 0; }
  47.78%, 91.11% { opacity: 1; }
  100% { opacity: 0; }
  0% { transform: translate(0, 0) rotate(0deg); }
  47.78% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  57.04% { transform: translate(7.3px, 2.1px) rotate(83deg); animation-timing-function: linear; }
  59.44% { transform: translate(10.9px, 3.7px) rotate(127deg); }
  61.85% { transform: translate(14.4px, 5.6px) rotate(170deg); }
  64.26% { transform: translate(17.6px, 7.7px) rotate(214deg); }
  66.67% { transform: translate(20.7px, 10.1px) rotate(257deg); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  77.78%, 100% { transform: translate(27.4px, 16.3px) rotate(357deg); }
}
@keyframes rolar-pedra-cel {
  0%, 100% { visibility: visible; }
  0%, 44.44% { opacity: 0; }
  47.78%, 91.11% { opacity: 1; }
  100% { opacity: 0; }
  0% { transform: translate(0, 0) rotate(0deg); }
  47.78% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  57.04% { transform: translate(7.3px, 1.1px) rotate(51deg); animation-timing-function: linear; }
  59.44% { transform: translate(10.9px, 2.2px) rotate(77deg); }
  61.85% { transform: translate(14.4px, 3.6px) rotate(103deg); }
  64.26% { transform: translate(17.9px, 5.3px) rotate(129deg); }
  66.67% { transform: translate(21.2px, 7.3px) rotate(156deg); animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  77.78%, 100% { transform: translate(28.2px, 12.5px) rotate(216deg); }
}
/* 7 Betoneira de obra: a coroa gira (16 dentes) e o tambor vira 105° em volta do bojo, com a boca indo
   de pra cima até pra baixo (despejando), e volta. A 105°, sobram 7,7 entre a boca e a roda, de borda a borda
   (6,7 na cópia do celular, de traço mais grosso). */
.desenho .trabalha .tambor { animation: virar-tambor 2.7s; }
@keyframes virar-tambor {
  0%, 17.78% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  44.44%, 64.44% { transform: rotate(105deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  91.11%, 100% { transform: rotate(0deg); }
}
.desenho .trabalha .aro { animation: girar-coroa 2.7s; }
@keyframes girar-coroa {
  0% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  11.11% { stroke-dashoffset: -5px; animation-timing-function: linear; }
  88.89% { stroke-dashoffset: -75px; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  100% { stroke-dashoffset: -80px; }
}
/* 8 Guincho: a lata sobe cheia até a laje (236), esvazia lá em cima e desce. O cabo encurta junto, pela
   escala a partir da polia: 22 ÷ 258 (o que sobra do cabo ÷ o cabo inteiro), com a mesma curva da lata. */
.desenho .trabalha .lata { animation: subir-lata 2.7s; }
.desenho .trabalha .cabo { animation: encurtar-cabo 2.7s; }
.desenho .trabalha .carga { animation: encher-lata 2.7s linear; }
@keyframes subir-lata {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40% { transform: translateY(-236px); }
  57.78% { transform: translateY(-236px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: translateY(0); }
}
@keyframes encurtar-cabo {
  0% { transform: scaleY(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40% { transform: scaleY(.08527); }
  57.78% { transform: scaleY(.08527); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: scaleY(1); }
}
@keyframes encher-lata { 0%, 100% { visibility: visible; } 0% { opacity: 0; } 6.67%, 40% { opacity: 1; } 53.33%, 100% { opacity: 0; } }
/* 9 Perfuratriz: a mesa desce 48 empurrando e a hélice desce junto, parafusando (2 passos); depois as 2
   sobem juntas, com o trado saindo do furo. Sem pulo no fim: a hélice volta pro lugar andando. */
.desenho .trabalha .mesa, .desenho .trabalha .trado { animation: furar 2.7s; }
@keyframes furar {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40% { transform: translateY(48px); }
  57.78% { transform: translateY(48px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: translateY(0); }
}
/* A cópia do celular fica com uns 760 px (40% do desenho original): o traço engrossa um pouco pra
   não sumir e as etiquetas usam letra de 36 (≈ 14 px na tela). */
.desenho.cel .linha { stroke-width: 3; }
.desenho.cel .linha-fina { stroke-width: 1.8; }
.desenho.cel .vidro, .desenho.cel .pneu, .desenho.cel .cubo, .desenho.cel .junta { stroke-width: 2.4; }
.desenho.cel .chao { stroke-width: 3.6; }
.desenho.cel .madeira { stroke-width: 1.8; }
.desenho.cel .madeira-fina { stroke-width: 2.2; stroke-dasharray: 11 7; }
.desenho.cel .aco { stroke-width: 3; }
.desenho.cel .aco-fino { stroke-width: 1.8; }
.desenho.cel .lanca { stroke-width: 18; }
.desenho.cel .lanca-miolo { stroke-width: 11; }
.desenho.cel .cilindro { stroke-width: 6; }
.desenho.cel .mangote { stroke-width: 6.5; }
.desenho.cel .jorro { stroke-width: 8; }
.desenho.cel .listra { stroke-width: 10; }
.desenho.cel .cabo { stroke-width: 1.8; }
.desenho.cel .furo { stroke-width: 2.2; stroke-dasharray: 9 6; }
.desenho.cel .haste { stroke-width: 6.5; }
.desenho.cel .trado { stroke-width: 3; }
.desenho.cel .aro { stroke-width: 6; stroke-dasharray: 3.5 4.5; }
.desenho.cel .areia, .desenho.cel .brita { stroke-width: 2.4; }
.desenho.cel .chamada { stroke-width: 2.2; }
.desenho.cel .marcador-caixa { stroke-width: 2.2; }
.desenho.cel .marcador-n { font-size: 26px; }
.desenho.cel .marcador-rotulo { font-size: 36px; letter-spacing: 0; }

/* ---------- Painel (/painel/, só do Willian): tabelas simples, sem biblioteca de gráfico ---------- */
.painel { padding-block: clamp(32px, 6vw, 88px) var(--ritmo-largo); }
.painel .lead { margin: 16px 0 28px; }
.painel-controle { max-width: 16rem; margin-bottom: 16px; }
.painel-situacao { font-family: var(--f-dado); font-size: var(--t-s); }
.painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--ritmo-normal) var(--vao); margin-top: var(--ritmo-normal); align-items: start; }
.painel-secao h2 { font-size: var(--t-m); margin-bottom: 12px; }
.painel-destaque { font-weight: 600; }
.painel-tabela { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: var(--t-s); background: var(--papel); border: 1px solid var(--linha); }
.painel-tabela caption { text-align: left; color: var(--cimento); padding-bottom: 6px; }
.painel-tabela th, .painel-tabela td { padding: 8px 12px; text-align: left; border-top: 1px solid var(--linha); word-break: break-word; overflow-wrap: anywhere; }
.painel-tabela th { font-family: var(--f-dado); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cimento); border-top: 0; }
.painel-tabela th:last-child, .painel-tabela td:last-child { text-align: right; font-family: var(--f-dado); white-space: nowrap; }
.painel-tabela td[colspan] { text-align: left; color: var(--cimento); font-family: inherit; }
/* Cadastros (estatico/js/painel.js): um cartão por cadastro esperando. O âmbar só no Aprovar; o verde, nos avisos. */
.painel-cadastros { margin-bottom: var(--ritmo-normal); }
.painel-cadastros h2 { font-size: var(--t-m); margin-bottom: 8px; }
.cadastro-cartao { padding: clamp(16px, 3vw, 24px); margin-top: 16px; max-width: 46rem; }
.cadastro-cartao h3 { margin: 0 0 12px; word-break: break-word; overflow-wrap: anywhere; }
.cadastro-dados { margin: 0 0 8px; font-size: var(--t-s); }
.cadastro-dados dt { font-weight: 600; margin-top: 8px; }
.cadastro-dados dd { margin: 0; word-break: break-word; overflow-wrap: anywhere; }
.cadastro-conferencias { border: 0; padding: 0; margin: 16px 0 0; }
.cadastro-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.botao-linha { min-height: 52px; padding: 12px 22px; font: 600 1rem/1.2 var(--f-texto); color: var(--grafite); background: transparent; border: 1px solid var(--grafite); border-radius: var(--raio); cursor: pointer; }
.botao-linha:focus-visible { outline: 2px solid var(--grafite); outline-offset: 3px; }
.botao-acao:disabled, .botao-linha:disabled { opacity: .5; cursor: not-allowed; }
.cadastro-confirma { margin-top: 16px; }
.cadastro-confirma .botao-linha + .botao-linha { margin-left: 12px; }
.cadastro-aviso { margin: 12px 0 0; font-weight: 600; white-space: pre-line; word-break: break-word; overflow-wrap: anywhere; }
/* Vazio, não ocupa lugar, mas continua na página: com display: none, o leitor de tela pode não anunciar o aviso que chega. */
.cadastro-aviso:empty { margin: 0; }
.cadastro-trecho { overflow-x: auto; font-family: var(--f-dado); font-size: var(--t-s); background: var(--campo); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; }
.cadastro-pedido { word-break: break-word; overflow-wrap: anywhere; }

/* ---------- Troca de página: a página nova sobe de baixo; o topo fica parado ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 240ms ease-in both sair; }
::view-transition-new(root) { animation: 520ms cubic-bezier(.65, 0, .35, 1) both encher; }
@keyframes sair { to { opacity: 0; } }
@keyframes encher { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Movimento reduzido: tudo parado, os estados continuam visíveis ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .espera-entrar { opacity: 1 !important; transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}