/* Melhore com IA
   Identidade: a planta do processo. Azul de planta de engenharia, traço branco, folhas de papel
   e um único acento laranja para o que importa: onde medir e onde alguém aprova.
   Fonte: TikTok Sans (SIL Open Font License 1.1, ver fonts/OFL-TikTokSans.txt). */

@font-face {
  font-family: "TikTok Sans";
  src: url("fonts/tiktok-sans-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Reserva A"; src: local("Segoe UI"); font-weight: 300 700; size-adjust: 96%; }
@font-face { font-family: "Reserva A"; src: local("Segoe UI Bold"), local("Segoe UI"); font-weight: 701 900; size-adjust: 94%; }
@font-face { font-family: "Reserva B"; src: local("Roboto"); font-weight: 300 600; size-adjust: 95%; }
@font-face { font-family: "Reserva B"; src: local("Roboto Bold"), local("Roboto"); font-weight: 601 900; size-adjust: 100%; }
@font-face { font-family: "Reserva C"; src: local("Arial"); font-weight: 300 900; size-adjust: 94.5%; }

:root {
  --azul: #1236D8;
  --azul-fundo: #0B25A8;
  --noite: #06135C;
  --tinta: #081A66;
  --papel: #FFFFFF;
  --laranja: #FF7A1A;
  --laranja-claro: #FFC08F;
  --laranja-papel: #FFE0C7;
  --telha: #A6400A;
  --azul-claro: #D6DDFF;
  --foco: #FFFFFF;
  --fonte: "TikTok Sans", "Reserva A", "Reserva B", "Reserva C", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --grade: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--azul); color: #fff; font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.55; overflow-wrap: break-word; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

h1, h2, h3 { font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 1.2rem + 4.4vw, 4.25rem); line-height: .98; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem); max-width: 22ch; }
h3 { font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em; }

.largura { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(18px, 4.5vw, 44px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.junto { white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 12px 16px; background: #fff; color: var(--tinta); font-weight: 700; }
.pular:focus { top: 12px; }

.cota { font-family: var(--mono); font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--laranja-claro); }
.cota + h2 { margin-top: 12px; }
.rotulo { display: block; font-family: var(--mono); font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--azul-claro); }
.aviso-regra { max-width: 62ch; font-size: .875rem; line-height: 1.5; color: var(--azul-claro); }

/* Topo */
.topo { position: relative; z-index: 2; }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.marca { display: inline-flex; align-items: center; min-height: 48px; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.marca span { color: var(--laranja-claro); margin-left: .28em; }
.menu { display: none; gap: 4px; }
.menu a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 12px; font-weight: 500; text-decoration: none; }
.menu a:hover { text-decoration: underline; }

/* Botões: cantos retos, sombra dura de desenho técnico */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px;
  border: 2px solid var(--laranja); background: var(--laranja); color: var(--tinta);
  font-weight: 800; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.botao:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--foco); }
.botao:active { transform: none; box-shadow: none; }
.botao:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.botao[hidden], .repetir[hidden] { display: none; }
.botao-linha { background: transparent; border-color: currentColor; color: inherit; }
.botao-grande { min-height: 60px; padding-inline: 28px; font-size: 1.1875rem; }
.botao-topo { min-height: 44px; padding: 8px 16px; background: transparent; border-color: #fff; color: #fff; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.repetir { min-height: 44px; padding: 0; border: 0; background: none; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Opções de ramo e processo: palavras sublinhadas, não pílulas */
.opcoes { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 2px; }
.opcoes button { min-height: 44px; padding: 8px 0 6px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--azul-claro); font-weight: 500; cursor: pointer; }
.opcoes button:hover { color: #fff; }
.opcoes button[aria-pressed="true"] { border-bottom-color: var(--laranja); color: #fff; font-weight: 800; }

/* A bancada: primeira tela */
.bancada {
  position: relative; overflow-x: clip; margin-top: -76px; padding: 96px 0 clamp(48px, 7vw, 88px);
  background: radial-gradient(620px circle at var(--mx, 72%) var(--my, 28%), rgba(255,255,255,.05), transparent 62%), var(--grade), var(--azul);
  background-size: auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto;
}
.bancada-grade { display: grid; gap: 28px; }
.bancada-grade > * { min-width: 0; }
.abertura > * + * { margin-top: 16px; }
.nome-vivo { color: var(--laranja); overflow-wrap: anywhere; caret-color: #fff; cursor: text; text-decoration: underline dashed rgba(255,255,255,.75); text-decoration-thickness: 3px; text-underline-offset: .12em; }
.nome-vivo:empty::before { content: attr(data-vazio); border-right: .07em solid #fff; animation: piscar 1.1s steps(1) infinite; }
.nome-vivo:focus:empty::before { border-right-color: transparent; animation: none; }
/* o nome da empresa é um campo: caixa tracejada, rótulo pequeno em cima, letra grande dentro */
.campo-nome { display: block; width: fit-content; max-width: 100%; margin-bottom: .18em; padding: .1em .22em .14em; border: 3px dashed #fff; font-size: clamp(2.125rem, 1.2rem + 4.4vw, 4.25rem); font-weight: 800; line-height: .98; letter-spacing: -0.04em; }
.campo-rotulo { display: block; margin-bottom: .35em; font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; color: var(--laranja-claro); }
.campo-nome .nome-vivo { display: block; min-width: 6ch; padding-block: 0; text-decoration: none; }
.campo-nome:focus-within { border-style: solid; background: rgba(255,255,255,.08); }
.abertura h1 { margin-top: 0; font-size: clamp(1.19rem, .672rem + 2.464vw, 2.38rem); line-height: 1.1; letter-spacing: -0.025em; }
.nome-vivo { padding-block: 9px; }
.nome-vivo:focus-visible { outline-offset: 2px; }
.sub { max-width: 46ch; font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); color: #E7EBFF; }
.ajuste { display: grid; gap: 8px; align-content: start; }
.ajuste .rotulo + .opcoes { margin-top: -4px; }
.aviso-bancada { margin-top: 28px; }
/* sem JavaScript, o que só funciona com ele não aparece: nada de botão morto */
html:not(.js) .ajuste, html:not(.js) .controles, html:not(.js) .palavras, html:not(.js) #planta-dica { display: none; }

/* A máquina: três estações num trilho, com um pedido que anda */
.maquina { position: relative; }
.estacoes { position: relative; display: grid; gap: 22px; padding-left: 38px; }
.estacoes::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: rgba(255,255,255,.55); }
.pacote { position: absolute; left: -5px; top: -9px; z-index: 2; width: 34px; height: 34px; border: 3px solid var(--laranja); pointer-events: none; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.estacao { position: relative; display: grid; gap: 12px; justify-items: start; transition: opacity .35s ease-out; }
.estacao h2 { max-width: none; font-family: var(--mono); font-size: .875rem; font-weight: 700; letter-spacing: .09em; line-height: 24px; text-transform: uppercase; }
.estacao h2 span { position: absolute; left: -38px; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #fff; background: var(--azul); font-size: .8125rem; letter-spacing: 0; }
.folha { position: relative; justify-self: stretch; padding: 14px 16px 16px; background: var(--papel); color: var(--tinta); box-shadow: 5px 5px 0 var(--noite); }
.folha p, .folha li { line-height: 1.4; }
.folha-de { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #3A4A99; }
.folha-de b { font-weight: 700; }
/* Voz do Dante: o botão de ligar fica na linha do passo 1 (não gasta altura); ligada, cada parte ganha um "Ouvir"; a legenda aparece junto da parte que fala, só enquanto a voz fala */
.ouvir { position: absolute; right: 8px; top: 0; height: 44px; padding: 0 0 0 16px; border: 0; background: none; color: var(--azul); font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ouvir::before { content: ""; position: absolute; left: 2px; top: 50%; translate: 0 -50%; border-left: 9px solid var(--laranja); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ouvir[hidden] { display: none; }
.ouvir-barra { position: relative; right: auto; top: auto; height: auto; min-height: 44px; margin-left: 6px; color: #fff; vertical-align: middle; }
.com-voz .folha-pilha, .com-voz .folha-rascunho, .com-voz .portao-vez { cursor: pointer; }
.com-voz .folha-pilha > .folha-de, .com-voz .folha-rascunho > .folha-de { padding-right: 70px; }
.narrar { position: absolute; right: 0; top: -10px; min-height: 44px; padding: 0 0 0 24px; border: 0; background: none; color: #fff; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.narrar::before { content: ""; position: absolute; left: 6px; top: 50%; translate: 0 -50%; border-left: 10px solid var(--laranja); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.narrar[aria-pressed="true"]::before { width: 10px; height: 10px; border: 0; background: var(--laranja); }
.narrar[hidden], .legenda-voz[hidden] { display: none; }
.legenda-voz { margin-top: 8px; padding: 6px 10px; border-left: 4px solid var(--laranja); background: var(--noite); color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.maquina .folha p.legenda-voz { min-height: 0; }
.folha-pilha { max-width: 520px; box-shadow: 5px 5px 0 #C5CEFF, 10px 10px 0 #8E9DF0, 15px 15px 0 var(--noite); margin-bottom: 10px; font-weight: 500; }
.par { display: grid; gap: 14px; justify-self: stretch; align-items: start; }
.par > *, .estacoes > li, .estacao > * { min-width: 0; }
.js .maquina[data-estado="fila"] .folha-pilha { animation: surgir .5s ease-out both; }
.folha-regras summary { position: relative; display: block; min-height: 44px; margin: -12px 0 0; padding: 14px 28px 6px 0; list-style: none; cursor: pointer; }
.folha-regras summary::-webkit-details-marker { display: none; }
.folha-regras summary::after { content: "+"; content: "+" / ""; position: absolute; right: 0; top: 11px; font-size: 1.25rem; line-height: 1; }
.folha-regras[open] summary::after { content: "−"; content: "−" / ""; }
.folha-regras ol { display: grid; gap: 4px; counter-reset: r; font-size: .9375rem; }
.folha-regras li { padding: 3px 6px 3px 26px; position: relative; counter-increment: r; transition: background-color .3s ease-out; }
.folha-regras li::before { content: counter(r); position: absolute; left: 6px; font-family: var(--mono); font-size: .75rem; color: #3A4A99; top: 5px; }
.folha-regras .grifo { background: var(--laranja-papel); }
.folha-regras .trava { background: var(--laranja); font-weight: 800; }
.folha-rascunho p:not(.barrado) { min-height: 9.4em; font-weight: 500; }
.erro { display: block; margin-top: 10px; color: var(--telha); font-size: 1.3125rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.erro.riscado { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--laranja); }
.barrado { margin-top: 10px; padding: 8px 10px; border-left: 5px solid var(--laranja); background: var(--laranja-papel); font-size: .9375rem; font-weight: 700; }
.barrado b { display: block; width: fit-content; margin: -2px 0 6px -2px; padding: 0 14px; border: 3px solid var(--tinta); background: var(--laranja); font-size: clamp(1.75rem, 8.6vw, 2.5rem); font-weight: 900; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; rotate: -3deg; }
.assinatura { display: block; width: fit-content; max-width: 100%; margin-top: 8px; padding: 0 6px; background: var(--laranja-papel); font-weight: 800; overflow-wrap: anywhere; animation: surgir .35s ease-out both; }
.assinatura::before { content: "— "; }
.js .maquina[data-estado="barrado"] .barrado b { animation: bater .28s cubic-bezier(.2,1.2,.4,1) both; }
.desfecho { display: grid; gap: 10px; justify-items: start; font-size: 1.125rem; font-weight: 700; max-width: 34ch; }
.desfecho[hidden] { display: none; }
.desfecho:focus { outline: none; }
/* Depois de aprovar: a resposta limpa, sem a frase barrada */
.folha-final { max-width: 520px; font-weight: 500; box-shadow: 5px 5px 0 var(--laranja); }
.folha-final[hidden] { display: none; }
.js .folha-final { animation: surgir .45s ease-out both; }
.conta { margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--azul-claro); font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: #3A4A99; }
.carimbo { display: inline-block; padding: 0 14px; border: 3px solid var(--tinta); background: #fff; color: var(--tinta); font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 900; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; rotate: -5deg; box-shadow: 4px 4px 0 var(--laranja); }

/* O portão: no celular ele fica preso ao pé da tela enquanto a máquina está à vista, para o polegar */
.portao { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 10px; margin: 22px 0 0 38px; padding: 12px 0 14px; border-top: 2px solid #fff; background: var(--azul); }
.portao-vez { font-weight: 700; }
.selo-sim { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid currentColor; font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; }
/* Com JavaScript, cada estação acende na sua vez; o espaço de tudo já está reservado, nada pula */
.js .maquina[data-estado="fila"] .e-prepara, .js .maquina[data-estado="fila"] .e-confere,
.js .maquina[data-estado="lendo"] .e-confere, .js .maquina[data-estado="rascunho"] .e-confere, .js .maquina[data-estado="barrado"] .e-confere { opacity: .3; }
.js .maquina[data-estado="fila"] .barrado, .js .maquina[data-estado="lendo"] .barrado, .js .maquina[data-estado="rascunho"] .barrado,
.js .maquina[data-estado="fila"] .portao, .js .maquina[data-estado="lendo"] .portao, .js .maquina[data-estado="rascunho"] .portao, .js .maquina[data-estado="barrado"] .portao { visibility: hidden; }
.maquina[data-estado="aprovado"] .portao, .maquina[data-estado="recusado"] .portao, .maquina:not([data-estado]) .portao, .maquina:not([data-estado]) .pacote { display: none; }
.maquina[data-estado="recusado"] .carimbo { box-shadow: 4px 4px 0 var(--noite); }

/* Dante ao vivo e privacidade (páginas de teste, fora do menu) */
.vivo-coluna { display: grid; gap: 18px; max-width: 720px; justify-items: start; }
.vivo-coluna h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); }
.vivo-texto { max-width: 58ch; font-size: 1.125rem; }
.vivo-exemplo { max-width: 58ch; font-family: var(--mono); font-size: .875rem; color: var(--laranja-claro); }
.secao.vivo .aviso-regra { color: var(--azul-claro); }
.desfecho ~ #cena-dante { margin-top: 8px; }
.vivo-aviso, .vivo-fim, .privacidade { display: grid; gap: 10px; max-width: 600px; }
.vivo-aviso[hidden], .vivo-fim[hidden], .vivo-conversa[hidden], .vivo-passo[hidden] { display: none; }
.vivo-fim:focus { outline: none; }
.vivo-aviso a, .privacidade a { color: var(--azul); font-weight: 700; }
.vivo-conversa { display: grid; gap: 12px; justify-self: stretch; max-width: 600px; }
.vivo-estado { font-family: var(--mono); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--laranja-claro); }
.vivo-relogio { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; }
.vivo-fala p { min-height: 2.8em; font-weight: 500; }
.vivo-voce { box-shadow: 5px 5px 0 var(--laranja); }
.vivo-nojs a, .vivo .aviso-regra a { color: #fff; font-weight: 700; }
.privacidade h2 { margin-top: 8px; font-size: 1.125rem; }
/* A planta do processo */
.planta { padding-block: clamp(56px, 8vw, 104px); background: var(--grade), var(--azul-fundo); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto; }
.planta h2 span, .contato h2 span { overflow-wrap: anywhere; }
.planta h2 span { color: var(--laranja); }
.controles { display: grid; gap: 16px; margin-top: 28px; }
.dor { margin-top: 20px; max-width: 46ch; font-size: 1.1875rem; font-weight: 500; }
.trilho { position: relative; display: grid; margin-top: 32px; }
.trilho::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 28px; width: 2px; background: rgba(255,255,255,.6); transform-origin: top left; }
.no { position: relative; display: grid; gap: 3px; width: 100%; min-height: 64px; padding: 4px 0 22px 50px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.no-n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid #fff; background: var(--azul-fundo); font-family: var(--mono); font-size: .8125rem; }
.no-t { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.no-q { font-family: var(--mono); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--azul-claro); }
.no-ia .no-q { color: var(--laranja-claro); }
.no-ia .no-n { border-color: var(--laranja-claro); border-style: dashed; }
.no-aprova .no-q { justify-self: start; padding: 2px 8px; background: var(--laranja); color: var(--tinta); font-weight: 700; }
.no-aprova .no-n { border-radius: 50%; border-color: var(--laranja); background: var(--laranja); color: var(--tinta); font-weight: 700; }
.no-m { font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--laranja-claro); }
.uma-faixa .no-t { overflow-wrap: break-word; hyphens: auto; }
.trilho-caixa { position: relative; }
.fio { display: none; }
.trilho li { position: relative; z-index: 1; }
div.no { cursor: default; }
.no:hover .no-t { text-decoration: underline; text-underline-offset: 3px; }
.no[aria-pressed="true"] .no-n { background: #fff; color: var(--tinta); font-weight: 700; }
.no[aria-pressed="true"]::after { content: "espera aqui"; justify-self: start; margin-top: 2px; padding: 2px 8px; border: 2px solid var(--laranja); font-family: var(--mono); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: #fff; }
.dica { margin-top: 8px; max-width: 58ch; color: #E7EBFF; }
.limite { margin-top: 10px; max-width: 58ch; font-weight: 700; }
.limite[hidden] { display: none; }
.palavras { margin-top: 24px; max-width: 640px; }
.palavras summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.palavras > * + * { margin-top: 10px; }
.ditado { display: grid; gap: 8px; justify-items: start; }
.ditado [hidden] { display: none; }
.palavras textarea { display: block; width: 100%; padding: 12px 14px; border: 0; border-radius: 0; background: #fff; color: var(--tinta); font-size: 1rem; line-height: 1.45; resize: vertical; box-shadow: 5px 5px 0 var(--noite); }
.legenda { display: grid; margin-top: 32px; border: 2px solid #fff; font-family: var(--mono); font-size: .875rem; }
.legenda > div { padding: 10px 14px; border-bottom: 2px solid #fff; min-width: 0; }
.legenda small { display: block; font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: var(--azul-claro); }
.legenda span { overflow-wrap: anywhere; }
.legenda-acoes { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 0 !important; }
.legenda-acoes .botao { font-family: var(--fonte); flex: 1 1 240px; }
.legenda-acoes .aviso { flex-basis: 100%; margin-top: 0; font-family: var(--fonte); }
.legenda-acoes .aviso:empty { margin-top: -10px; }
.legenda + .aviso-regra { margin-top: 14px; }
.aba { display: inline-block; animation: virar .45s cubic-bezier(.3,.7,.2,1) both; transform-origin: 50% 60%; white-space: pre; }

/* Seções de papel: tinta azul sobre branco quadriculado */
.secao { --foco: var(--tinta); padding-block: clamp(56px, 8vw, 104px); background: linear-gradient(rgba(18,54,216,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(18,54,216,.07) 1px, transparent 1px), #fff; background-size: 24px 24px, 24px 24px, auto; color: var(--tinta); }
.secao .cota { color: var(--azul); }
.secao .aviso-regra { color: #33407F; }
.secao-azul { --foco: #fff; background: var(--grade), var(--azul); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, auto; color: #fff; }
.secao-azul .cota { color: var(--laranja-claro); }
.etapas { display: grid; gap: 36px; margin-top: 44px; counter-reset: e; }
.etapas li { position: relative; padding-top: 22px; border-top: 2px solid var(--tinta); counter-increment: e; }
.etapas li::before { content: counter(e); position: absolute; top: -17px; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--tinta); background: #fff; font-family: var(--mono); font-size: .875rem; font-weight: 700; }
.etapas li:last-child::before { background: var(--laranja); }
.etapas p { margin-top: 8px; color: #33407F; font-size: 1rem; }
.franqueza { display: grid; gap: 10px; margin-top: 48px; padding: 20px 22px; border: 2px solid var(--tinta); background: #fff; }
.franqueza p { max-width: 62ch; }
.travas { display: grid; gap: 0; margin-top: 36px; border-top: 2px solid #fff; }
.travas li { display: grid; gap: 12px; padding: 28px 0; border-bottom: 1.5px solid rgba(255,255,255,.6); justify-items: start; }
.mini { position: relative; display: grid; gap: 4px; justify-self: stretch; max-width: 460px; margin-bottom: 18px; padding: 12px 16px 40px; background: #fff; color: var(--tinta); box-shadow: 5px 5px 0 var(--noite); }
.mini-rotulo { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #3A4A99; }
.mini-frase { max-width: 22ch; font-size: 1.25rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.mini-risco { color: var(--telha); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--laranja); }
.mini-carimbo { position: absolute; right: 12px; bottom: -12px; padding: 0 12px; border: 3px solid var(--tinta); background: var(--laranja); font-size: 1.25rem; font-weight: 900; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; rotate: -4deg; }
.travas h3 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); max-width: 24ch; }
.trava-resposta { max-width: 56ch; font-size: 1.125rem; font-weight: 500; }
.trava-resposta b { display: inline-block; margin-right: 6px; padding: 1px 8px; background: var(--laranja); color: var(--tinta); font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.trava-caso { max-width: 62ch; font-size: .9375rem; color: var(--azul-claro); }
.trava-caso summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 2px solid #fff; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; list-style: none; }
.trava-caso summary::-webkit-details-marker { display: none; }
.trava-caso summary::after { content: "+"; font-family: var(--mono); font-size: 1.25rem; font-weight: 400; }
.trava-caso[open] summary::after { content: "−"; }
.trava-caso[open] summary { margin-bottom: 10px; }
.trava-caso p { padding-bottom: 6px; }
.nota { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -14px -10px -14px -8px; vertical-align: middle; text-decoration: none; color: inherit; }
.nota span { min-width: 1.6em; padding: 1px 4px; border: 1px solid currentColor; font-family: var(--mono); font-size: .75rem; line-height: 1.3; text-align: center; }
.nota:hover span { background: #fff; color: var(--azul); }
.rever { min-height: 44px; padding: 0; border: 0; background: none; color: var(--laranja-claro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rever[hidden] { display: none; }
.mercado-aviso { margin-top: 14px; max-width: 56ch; font-size: 1.125rem; font-weight: 500; }
.medidas { display: grid; gap: 0; margin-top: 36px; border-top: 2px solid var(--tinta); }
.medidas li { padding: 20px 0 22px; border-bottom: 1.5px solid var(--tinta); }
.medida-n { font-size: clamp(2.75rem, 1.8rem + 4.6vw, 4.75rem); font-weight: 900; line-height: .95; letter-spacing: -0.05em; white-space: nowrap; }
.medida-alerta { color: var(--telha); }
.medidas li p + p { margin-top: 10px; max-width: 40ch; color: #33407F; font-size: 1rem; }
.mercado-fecho { margin-top: 28px; max-width: 62ch; font-size: 1.125rem; font-weight: 500; }
.secao .nota:hover span { background: var(--tinta); color: #fff; }
.perguntas-grade { display: grid; gap: 28px; }
.perguntas { border-top: 2px solid var(--tinta); }
.perguntas details { border-bottom: 1.5px solid var(--tinta); }
.perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 14px; font-weight: 700; line-height: 1.3; cursor: pointer; list-style: none; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.perguntas details[open] summary::after { content: "−"; }
.perguntas details p { max-width: 62ch; padding-bottom: 18px; color: #33407F; }

/* Contato: o laranja inteiro */
.contato { background: var(--laranja); color: var(--tinta); }
.contato .cota { color: var(--tinta); }
.contato h2 { max-width: 18ch; font-size: clamp(2rem, 1.2rem + 3.8vw, 4rem); letter-spacing: -0.04em; }
.contato-texto { margin-top: 16px; max-width: 44ch; font-size: 1.125rem; font-weight: 500; }
.endereco { margin-top: 12px; }
.endereco a { display: inline-block; padding-block: 13px; font-size: clamp(.9375rem, 4.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.contato .acoes { margin-top: 10px; }
.contato .botao { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.contato .botao-linha { background: transparent; color: var(--tinta); }
.contato .aviso-regra { margin-top: 14px; color: var(--tinta); }
.aviso { min-height: 1.5em; margin-top: 8px; font-weight: 700; }
.aviso:empty { min-height: 0; margin-top: 0; }

/* Rodapé */
.rodape { padding-block: 40px 28px; background: var(--noite); font-size: 1rem; }
.fontes { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.3); }
.fontes h2 { max-width: none; font-family: var(--mono); font-size: .875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.fontes p { margin-top: 8px; max-width: 70ch; font-size: .9375rem; color: var(--azul-claro); }
.fontes ol { display: grid; gap: 8px; margin-top: 14px; counter-reset: f; font-size: .9375rem; }
.fontes li { position: relative; max-width: 86ch; padding: 6px 0 6px 34px; counter-increment: f; scroll-margin-top: 24px; }
.fontes li::before { content: counter(f); position: absolute; left: 0; top: 7px; min-width: 1.6em; padding: 1px 4px; border: 1px solid currentColor; font-family: var(--mono); font-size: .75rem; line-height: 1.3; text-align: center; }
.fontes li:target { background: rgba(255,255,255,.12); }
.fontes a { display: block; width: fit-content; padding-block: 11px 12px; font-weight: 700; }
.rodape-linha { display: grid; gap: 22px; }
.rodape b { font-size: 1.25rem; letter-spacing: -0.03em; }
.rodape nav { display: grid; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.rodape-fim { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.3); font-size: .9375rem; color: var(--azul-claro); }

/* Página 404 */
.perdida { display: grid; align-content: center; min-height: 100vh; }
.bancada.perdida { margin-top: 0; }
.perdida > .largura > * + * { margin-top: 20px; }

/* Movimento */
@keyframes virar { from { transform: rotateX(-88deg); opacity: 0; } }
@keyframes surgir { from { opacity: 0; transform: translateY(10px); } }
@keyframes riscar-v { from { transform: scaleY(0); } }
@keyframes carimbar { from { opacity: 0; scale: .6; } }
@keyframes bater { from { opacity: 0; scale: .5; rotate: 6deg; } }
@keyframes piscar { 50% { border-right-color: transparent; } }
.desenha::before { animation: riscar-v .8s ease-out both; }
.desenha li { animation: surgir .4s ease-out both; }
.desenha li:nth-child(2) { animation-delay: .1s; } .desenha li:nth-child(3) { animation-delay: .2s; } .desenha li:nth-child(4) { animation-delay: .3s; }
.desenha li:nth-child(5) { animation-delay: .4s; } .desenha li:nth-child(6) { animation-delay: .5s; } .desenha li:nth-child(n+7) { animation-delay: .6s; }
.desfecho .carimbo { animation: carimbar .3s cubic-bezier(.2,1.4,.4,1) both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 479px) {
  .portao { margin-left: 34px; }
  .bancada { padding-top: 84px; }
  .bancada-grade { gap: 20px; }
  .abertura > * + * { margin-top: 12px; }
  .estacoes { padding-left: 34px; }
  .estacao h2 span { left: -34px; }
    .botao-grande { width: 100%; }
}
/* Celular: o caderno de regras e o rascunho ocupam o mesmo lugar e se revezam, para a frase barrada caber na primeira tela */
@media (max-width: 639px) {
  h1 { font-size: 1.875rem; }
  .campo-nome { font-size: 1.875rem; margin-bottom: 0; }
  .abertura h1 { margin-top: -5px; font-size: 1.05rem; }
  .topo-linha { padding-block: 8px; }
  .bancada { margin-top: -64px; padding-top: 68px; }
  .campo-nome { width: 100%; }
  .folha-regras summary { margin: -10px 0 -12px; }
  .folha-regras summary::after { top: 9px; line-height: normal; }
  .folha-regras[open] summary { margin-bottom: 0; }
  .e-confere h2 { display: none; }
  .e-confere { gap: 0; }
  .barrado { margin-top: 6px; padding: 5px 10px 6px; font-size: .875rem; line-height: 1.3; }
  .erro { margin-top: 4px; font-size: 1.1875rem; }
  .folha { padding: 10px 12px 12px; }
  .folha-de { margin-bottom: 4px; }
  .estacoes { gap: 10px; }
  .estacao { gap: 8px; }
  .folha-rascunho p:not(.barrado) { min-height: 0; font-size: .9375rem; }
  .desfecho .botao { width: 100%; }
  .abertura { display: contents; }
  .abertura .sub { order: 3; }
  .ajuste { order: 4; }
  .bancada-grade { gap: 10px; }
  .maquina { margin-top: 6px; }
  .js .maquina .e-prepara, .js .maquina .e-chega { opacity: 1; }
  .folha-pilha { max-width: none; box-shadow: 4px 4px 0 #C5CEFF, 8px 8px 0 var(--noite); }
  .folha-pilha p { font-size: .9375rem; }
  .js .folha-rascunho { order: -1; }
  .estacoes { gap: 14px; }
  .folha-pilha { margin-bottom: 6px; }
  .portao { gap: 6px; margin-top: 10px; padding: 8px 0 4px; }
  .portao-vez { font-size: .9375rem; }
  .portao .acoes { flex-wrap: nowrap; gap: 8px; }
  .portao .botao { flex: 1 1 0; width: auto; min-height: 48px; padding-inline: 8px; font-size: 1.0625rem; }
  /* o passo 3 no celular é a própria barra: o número fica nela, com a moldura laranja do passo da vez */
  .portao::before { content: "3"; position: absolute; left: -38px; top: -2px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #fff; outline: 3px solid var(--laranja); outline-offset: 2px; background: var(--azul); font-family: var(--mono); font-size: .8125rem; font-weight: 700; line-height: 1; }
  .maquina[data-estado="portao"] .pacote, .maquina[data-estado="aprovado"] .pacote, .maquina[data-estado="recusado"] .pacote { display: none; }
  .folha-final { max-width: none; margin: 10px 0 14px; }
}
@media (max-width: 479px) { .portao::before { left: -34px; } }
/* Tela baixa (celular com a barra do navegador à vista): a barra do Aprovar entra no fluxo, para não cobrir o carimbo */
@media (max-width: 639px) and (max-height: 779px) { .portao { position: relative; } .js .maquina[data-estado="lendo"] .folha-regras { order: -2; } }
@media (min-width: 640px) {
  .par { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .controles { grid-template-columns: auto auto; justify-content: start; gap: 40px; }
  .etapas { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
  .medidas { grid-template-columns: repeat(2, 1fr); column-gap: 36px; }
  .franqueza { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; align-items: baseline; }
  .legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legenda > div:nth-child(odd):not(.legenda-acoes) { border-right: 2px solid #fff; }
  .legenda-acoes { grid-column: 1 / -1; }
  .rodape-linha { grid-template-columns: 1fr auto; }
  .rodape-fim { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .menu { display: flex; }
  .bancada-grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 28px; align-items: start; }
  .maquina { grid-column: 2; grid-row: 1 / 3; }
  .abertura { padding-top: 12px; }
  .trilho { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); column-gap: 18px; row-gap: 26px; }
  .trilho::before { display: none; }
  .fio { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .fio path { stroke: #fff; stroke-width: 2; }
  .trilho li { grid-row: 1; }
  .trilho.uma-faixa { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 30px; }
  .trilho.uma-faixa li:nth-child(n) { grid-column: auto; grid-row: auto; }
  .trilho.uma-faixa li::before { content: ""; position: absolute; left: 0; right: -18px; top: 15px; height: 2px; background: rgba(255,255,255,.6); }
  .trilho.uma-faixa li:last-child::before, .trilho.uma-faixa li:nth-child(4n)::before { right: 0; }
  .trilho li:nth-child(1) { grid-column: 1; } .trilho li:nth-child(2) { grid-column: 2; } .trilho li:nth-child(3) { grid-column: 3; } .trilho li:nth-child(4) { grid-column: 4; }
  .trilho li:nth-child(5) { grid-column: 5; } .trilho li:nth-child(6) { grid-column: 6; } .trilho li:nth-child(7) { grid-column: 7; } .trilho li:nth-child(8) { grid-column: 8; }
  .no { padding: 46px 0 8px; align-content: start; }
  .etapas { grid-template-columns: repeat(4, 1fr); }
  .medidas { grid-template-columns: repeat(4, 1fr); column-gap: 28px; }
  .medidas li { border-bottom: 0; }
  .travas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .travas li { align-content: start; }
  .perguntas-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 56px; }
  .legenda { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .legenda > div:not(.legenda-acoes) { border-right: 2px solid #fff; }
  .legenda > div:nth-child(4) { border-right: 0; }
}

@media (min-width: 960px) and (max-height: 840px) {
  .bancada { padding-top: 84px; }
  .estacoes { gap: 12px; }
  .estacao { gap: 8px; }
  .folha { padding: 10px 14px 12px; }
  .folha-pilha { margin-bottom: 6px; }
  .portao { margin-top: 12px; padding: 8px 0 10px; gap: 6px; }
  .barrado b { font-size: 1.75rem; }
}

/* Impressão: só a planta, em tinta sobre papel */
@media print {
  body { background: #fff; color: #000; }
  .topo, .bancada, .secao, .rodape, .controles, .palavras, .legenda-acoes, .dica, .pular { display: none !important; }
  .planta { background: #fff; color: #000; padding: 0; }
  .planta h2 span, .cota, .no, .no-q, .no-m, .legenda small, .aviso-regra { color: #000 !important; }
  .trilho::before, .no-n { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .trilho::before { background: #000; } .fio path { stroke: #000; } .no-n { border-color: #000 !important; background: #fff !important; color: #000 !important; }
  .no[aria-pressed="true"]::after { border-color: #000; color: #000; } .no-aprova .no-q { background: #fff; border: 1px solid #000; color: #000; }
  .legenda, .legenda > div { border-color: #000 !important; }
}