/* ==========================================================================
   HORUS CONTROL — site da marca (horuscontrol.com.br)
   Especificação: docs/site-2026-10/especificacao-final.md
   --------------------------------------------------------------------------
   Regras que este arquivo cumpre e que a `test:site` confere:
   · escuro por identidade (o logotipo some no claro): só `color-scheme: dark`;
     o claro existe só como PAPEL (o Dia 1º);
   · nada de 100vh (regra 19): o herói usa svh com teto e só o elemento PRESO
     usa svh, e só no computador;
   · sem backdrop-filter, sem sombra colorida, sem brilho atrás de bloco;
   · anima só transform, opacity e stroke-dashoffset.
   v4 (17/10/2026, rodada 3 das críticas):
   · O METAL VIROU LINGUAGEM: fios e réguas em degradê prata (--fio-metal), borda
     cromada nos aparelhos e nos palcos (--borda-metal), botão em azul escovado com a
     aresta de luz no chanfro, o H1 inteiro em cromo (antes só "não para.", que a 1x
     parecia texto desabilitado), e a faísca passa uma vez no logotipo do cabeçalho;
   · PALCO: celular e tablet num painel escuro com borda de metal e a legenda ao lado;
     tela e texto ocupam a largura toda (texto 4 colunas, palco 8);
   · três escalas de título: virada (até 96 px), leitura (44) e compacto (32);
   · a troca de tela troca a legenda junto, e a tela velha sai antes de a nova entrar;
   · celular: a vitrine aparece depois dos três caminhos; o desenho do "antes" é
     uma lista vertical em HTML; a barra do WhatsApp some no fechamento e no rodapé
     e o foco do teclado nunca fica embaixo dela (scroll-padding-bottom).
   v5 (17/10/2026, RODADA HUMANA — pedido do Paulo: textos de gente para gente, as simulações
   rodando no CELULAR, efeitos mais modernos): o bloco "v5" no fim deste arquivo traz as cinco
   SIMULAÇÕES (ponto pelo rosto, portal por zonas, detector de mão, câmera corporal e a noite),
   o botão redondo do WhatsApp no celular (a barra larga tapava a legenda das cenas), o herói
   sem o logotipo grande no celular, a linha do dia que enche ao rolar, a faísca no fio dos
   títulos e as legendas em 15 px. O v4 continua publicado, intocado (test:site nº 9).
   v6 (18/10/2026, VITRINE — pedido do Paulo: a inicial tinha ~15.200 px no celular): a inicial
   fica com o herói, a dor em uma frase, a cena do ponto, três CARTÕES (operação, eventos,
   locação), o "um motor, várias marcas" curto, cinco perguntas e o fechamento; o resto mudou-se
   para as páginas próprias. O menu do celular virou um <dialog> de tela cheia (foco preso, Esc
   fecha, a página não rola por baixo). O v5 continua publicado, intocado (test:site nº 9).
   ========================================================================== */

/* ---------- fontes (guardadas aqui; cortadas nos eixos usados — fontes/LEIA-ME.txt) ---------- */
@font-face { font-family: "Saira"; src: url("fontes/saira-latin.v2.woff2") format("woff2");
  font-weight: 400 620; font-stretch: 92% 112%; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fontes/archivo-latin.v2.woff2") format("woff2");
  font-weight: 400 620; font-stretch: 100% 104%; font-display: swap; }
/* reserva com métrica aproximada: a troca de fonte não empurra a página */
@font-face { font-family: "Saira-reserva"; src: local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Archivo-reserva"; src: local("Arial"); size-adjust: 100%; ascent-override: 90%; descent-override: 22%; }

/* ---------- tokens (§2.1) ---------- */
:root {
  color-scheme: dark;

  --fundo:        #070B11;
  --superficie:   #0C131D;
  --superficie-2: #121C2A;
  --moldura:      #1A1D24;
  --moldura-luz:  #363C4A;
  --linha:        rgb(193 192 198 / .10);
  --linha-forte:  rgb(193 192 198 / .22);

  --texto:   #E8ECF2;
  --texto-2: #A3A6AE;
  --texto-3: #8A8D96;

  --azul-900: #0C2648;
  --azul-800: #0E4775;
  --azul-700: #13487E;
  --azul-600: #1A61A4;
  --azul-500: #297FBF;
  --azul-400: #389DD3;
  --ciano:    #51D1F6;
  --prata:    #C1C0C6;

  --ok:      #3DB88A;
  --atencao: #E0A33A;
  --falha:   #E5675B;

  /* O METAL (v4): as mesmas paradas do C cromado e do anel do logotipo */
  --metal: linear-gradient(90deg, #6E7380 0%, #F3F3F4 38%, #A0A0A6 58%, #DBDBDC 80%, #8C909A 100%);
  --fio-metal: linear-gradient(90deg, rgb(193 192 198 / .06), rgb(193 192 198 / .34) 16%, rgb(243 243 244 / .55) 48%, rgb(160 160 166 / .30) 78%, rgb(193 192 198 / .06));
  --borda-metal: linear-gradient(145deg, rgb(243 243 244 / .50), rgb(110 115 128 / .22) 26%, rgb(193 192 198 / .10) 52%, rgb(219 219 220 / .38) 82%, rgb(140 144 154 / .28));
  --casca-metal: linear-gradient(150deg, #E6E7EA 0%, #7A7F8C 22%, #2E333D 48%, #8C909A 74%, #F3F3F4 100%);
  /* revisão 2 (crítica técnica): o meio do botão media 4,35:1 com o texto branco — os dois
     primeiros pontos escureceram (≥ 4,5:1 em toda a altura do texto), e o hover também */
  --azul-escovado: linear-gradient(180deg, #2F86C8 0%, #1F6AAE 34%, #1A61A4 58%, #144E86 100%);
  --azul-escovado-luz: linear-gradient(180deg, #3489CB 0%, #2370B4 34%, #1C64A8 58%, #165290 100%);
  /* a assinatura de movimento das cenas: UMA curva de entrada e UMA de saída (revisão 2) */
  --sim-entra: cubic-bezier(.16, .84, .3, 1);
  --sim-sai: cubic-bezier(.5, 0, .75, .2);
  --palco-fundo: radial-gradient(120% 90% at 30% 0%, #10233B 0%, #0A1422 55%, #080D15 100%);

  /* o papel (Dia 1º): a única superfície clara do site */
  --papel: #F4F6F9; --papel-fundo: #E6EBF1; --tinta: #0C1522; --tinta-2: #4E5765;
  --azul-papel: #13487E; --fio-papel: #CDD5DF;

  --inclinacao: 13deg;
  --raio-ui: 6px;
  --chanfro: 11px;

  /* tipografia (§3.2). v4: TRÊS escalas de título — virada, leitura e compacto */
  --f-titulo: "Saira", "Saira-reserva", system-ui, sans-serif;
  --f-texto: "Archivo", "Archivo-reserva", system-ui, sans-serif;
  --t-h1: clamp(2.5rem, 1.25rem + 5.62vw, 7rem);
  --t-virada: clamp(1.75rem, .35rem + 5.6vw, 6rem);
  --t-h2: clamp(1.5rem, 1.1rem + 1.9vw, 2.75rem); /* mínimo 1.5rem: H2 em ≤ 2 linhas a 360–390 (§3.2) */
  --t-compacto: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --t-h3: clamp(1.25rem, 1.08rem + .6vw, 1.625rem);
  --t-hora: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);
  --t-lead: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --t-corpo: 1.0625rem;
  --t-apoio: .9375rem;
  --t-legenda: .875rem;
  --t-dado: .875rem;
  --t-botao: 1rem;

  /* grade (§4.1) */
  --margem: 16px;
  --calha: 16px;
  --colunas: 4;
  --secao: clamp(48px, 4.4vw, 64px);
  --topo-altura: 64px;
  --barra-altura: 0px;

  --curva: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px) { :root { --margem: 32px; --calha: 20px; --colunas: 8; } }
@media (min-width: 1024px) { :root { --margem: 48px; --calha: 24px; --colunas: 12; --t-corpo: 1.125rem; --topo-altura: 80px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-altura) + 16px); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--barra-altura);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-family: var(--f-titulo); text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
button { font: inherit; color: inherit; }
::selection { background: var(--azul-700); color: #fff; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; border-radius: 2px; }
/* no papel claro o ciano dá ~1,6:1 — lá o anel é azul-escuro (8,6:1) */
.faixa-papel :focus-visible, .papel :focus-visible { outline-color: var(--azul-papel); }

.so-leitor {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--azul-600); color: #fff; padding: 12px 16px; border-radius: var(--raio-ui);
  text-decoration: none; font-weight: 600;
}
.pular:focus-visible { top: 8px; }

/* ---------- layout ---------- */
.conteudo {
  width: 100%;
  max-width: calc(1320px + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}
.grade {
  display: grid;
  grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  column-gap: var(--calha);
}
.grade > * { grid-column: 1 / -1; min-width: 0; }
.secao { padding-block: var(--secao); position: relative; overflow-x: clip; }
.secao.alterna { background: var(--superficie); }
/* a régua entre seções é um FIO DE METAL (v4), não uma linha cinza chapada */
.secao + .secao::before, .grupo + .grupo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fio-metal); pointer-events: none;
}
.faixa-papel::before, .faixa-papel + .secao::before, .ponte::before, .ponte + .secao::before { display: none; }

/* ---------- tipografia ---------- */
.t-h1 {
  font-size: var(--t-h1); font-weight: 600; line-height: 1.05; letter-spacing: -.025em;
  font-stretch: 92%; color: var(--texto);
}
@media (min-width: 768px) { .t-h1 { font-stretch: 100%; line-height: 1; } }
@media (min-width: 1200px) { .t-h1 { font-stretch: 104%; } }
.t-h2 { font-size: var(--t-h2); font-weight: 580; line-height: 1.08; letter-spacing: -.015em; font-stretch: 94%; }
@media (min-width: 768px) { .t-h2 { font-stretch: 100%; } }
@media (min-width: 1024px) { .t-h2 { font-stretch: 108%; } }
/* virada (ponte, Dia 1º, fechamento) e compacto (confiança, como começar, perguntas) */
.t-h2.t-virada { font-size: var(--t-virada); font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.t-h2.t-compacto { font-size: var(--t-compacto); font-weight: 560; line-height: 1.12; letter-spacing: -.01em; font-stretch: 100%; }
.t-h3 { font-size: var(--t-h3); font-weight: 560; line-height: 1.18; letter-spacing: -.01em; }
.t-hora {
  font-family: var(--f-titulo); font-size: var(--t-hora); font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.t-lead { font-size: var(--t-lead); line-height: 1.55; color: var(--texto-2); }
.t-apoio { font-size: var(--t-apoio); line-height: 1.55; color: var(--texto-2); }
.t-legenda { font-size: var(--t-legenda); font-weight: 450; line-height: 1.45; color: var(--texto-3); }
.t-dado { font-size: var(--t-dado); font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.cabeca-secao { display: grid; gap: 14px; margin-bottom: 36px; max-width: 46rem; justify-items: start; }
.cabeca-secao .t-apoio { font-size: var(--t-lead); }

/* sobretítulo: Saira 13 px + um fio de METAL a 13° (v4: só em metade das seções) */
.sobretitulo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-titulo); font-size: 13px; font-weight: 560; letter-spacing: .08em; line-height: 1.2;
  color: var(--azul-400); font-variant-numeric: tabular-nums;
}
.sobre-fio { width: 26px; height: 2px; background: var(--metal); transform: rotate(calc(var(--inclinacao) * -1)); flex: none; }

/* o CROMO (v4): o H1 inteiro, cada linha com o mesmo metal (box-decoration: clone). A faixa
   do meio desce só a #B4BCC8 (11:1 sobre o fundo) — antes descia a #8F97A4 e lia como cinza. */
.cromo { color: var(--texto); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cromo {
    background-image: linear-gradient(180deg, #FFFFFF 8%, #EEF1F5 40%, #B4BCC8 53%, #DDE2E9 66%, #FFFFFF 90%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    color: transparent;
  }
}

.link {
  color: var(--azul-400); text-decoration: none; font-weight: 600; position: relative;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  background: currentColor;
  clip-path: polygon(0 100%, 2px 0, 100% 0, calc(100% - 2px) 100%);
  transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--curva);
}
.link:hover::after, .link:focus-visible::after, .link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- botão principal: azul ESCOVADO, com a aresta de luz prata no chanfro (v4) ---------- */
.botao-foco { position: relative; display: inline-flex; }
.botao-foco::after {
  content: ""; position: absolute; inset: -5px; border-radius: 4px; pointer-events: none;
  outline: 2px solid transparent;
}
.botao-foco:has(.botao:focus-visible)::after { outline-color: var(--ciano); }
.botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px 0 20px;
  background: var(--azul-escovado); color: #fff;
  border: 0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .30), inset 0 -1px 0 rgb(4 12 24 / .35);
  font-family: var(--f-texto); font-size: var(--t-botao); font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, 0 100%);
}
.botao::after {
  /* a aresta de luz: um fio prata sobre a diagonal do chanfro (metade fica dentro do recorte) */
  content: ""; position: absolute; top: -1.5px; left: calc(100% - var(--chanfro));
  width: calc(var(--chanfro) * 1.4143 + 2px); height: 3px; pointer-events: none;
  background: linear-gradient(90deg, #F3F3F4, #DBDBDC 45%, #8C909A);
  transform-origin: 0 50%; transform: rotate(45deg);
}
.botao:hover { background: var(--azul-escovado-luz); }
.botao:focus-visible { outline: none; }
.botao svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* botão discreto (demonstrações): borda de metal */
.botao-2 {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  color: var(--texto); border: 1px solid transparent;
  background: linear-gradient(var(--superficie-2), var(--superficie-2)) padding-box, var(--borda-metal) border-box;
  border-radius: var(--raio-ui); font-size: var(--t-apoio); font-weight: 600; cursor: pointer;
}
.botao-2:hover { background: linear-gradient(#17243A, #17243A) padding-box, var(--borda-metal) border-box; }
.botao-2[hidden] { display: none; }
.so-js { display: none !important; }
.js .so-js { display: revert !important; }
.js .so-js.botao-2 { display: inline-flex !important; }
.js .so-js[hidden] { display: none !important; }
.js .sem-js { display: none !important; }

/* ---------- cabeçalho ----------
   100% opaco; no celular some ao rolar para baixo e volta ao subir (horus.v5.js).
   v4: a marca é o que fica na tela o tempo todo — monograma de 54 px e letreiro de 120 px
   no computador (44 e 96 no celular), e a faísca passa uma vez ao carregar. */
.topo {
  position: sticky; top: 0; z-index: 50;
  height: var(--topo-altura);
  background: var(--fundo);
  transition: transform 240ms var(--curva);
}
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fio-metal); }
.topo.recolhido { transform: translateY(-100%); }
.topo-faixa { height: 100%; display: flex; align-items: center; gap: 24px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; min-height: 44px; }
.marca-mono-casca { position: relative; width: 44px; height: 44px; flex: none; }
.marca-mono { width: 100%; height: 100%; view-transition-name: marca; }
.marca-letreiro { width: 96px; height: auto; }
@media (min-width: 1024px) {
  .marca { gap: 12px; }
  .marca-mono-casca { width: 54px; height: 54px; }
  .marca-letreiro { width: 120px; }
}

.nav { display: none; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.entrar { color: var(--texto); text-decoration: none; font-weight: 600; font-size: var(--t-botao); min-height: 44px; display: inline-flex; align-items: center; padding-inline: 4px; }
.entrar:hover { color: var(--azul-400); }
.topo .botao { min-height: 42px; padding: 0 22px 0 16px; font-size: .9375rem; }
@media (min-width: 1024px) {
  .nav { display: flex; gap: 28px; margin-left: 28px; }
  .nav a { color: var(--texto-2); font-weight: 500; }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--texto); }
  .nav .link::after { background: var(--metal); }
  .menu { display: none; }
  .topo.recolhido { transform: none; }
}
@media (max-width: 1023.98px) {
  .topo-direita .entrar, .topo-direita .botao-foco { display: none; }
}
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; border: 1px solid transparent; border-radius: var(--raio-ui); font-weight: 600;
  background: linear-gradient(var(--fundo), var(--fundo)) padding-box, var(--borda-metal) border-box;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-icone { width: 18px; height: 12px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.menu[open] .menu-icone .m-meio { opacity: 0; }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(280px, calc(100vw - 32px));
  list-style: none; border: 1px solid transparent;
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--borda-metal) border-box;
  border-radius: var(--raio-ui); padding: 8px;
}
.menu-lista a { display: block; padding: 12px; text-decoration: none; border-radius: 4px; font-weight: 500; }
.menu-lista a:hover, .menu-lista a[aria-current="page"] { background: var(--superficie-2); }
.menu-lista a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--azul-500); text-underline-offset: 6px; }
.menu-lista li + li { border-top: 1px solid var(--linha); }
.menu-lista .menu-zap { margin-top: 8px; border-top: 0; }
.menu-lista .menu-zap a { background: var(--azul-escovado); color: #fff; font-weight: 600; }

/* ---------- herói ----------
   No computador, o texto nas colunas 1–7 e a MARCA nas 8–12 (monograma dentro do trilho das
   24 h, e o letreiro embaixo); os três caminhos inteiros. v4: a altura deixa o topo da
   vitrine aparecer acima da dobra (crítica do cliente), e o texto vem antes no código
   (o leitor de tela lê o título primeiro; a marca do herói tem alt vazio). */
.heroi { min-height: min(calc(100svh - var(--topo-altura) - 96px), 760px); display: flex; align-items: center; padding-block: 20px 28px; }
.heroi .grade { row-gap: 20px; align-items: center; }
.heroi-texto { display: grid; gap: 18px; align-content: start; }
.heroi-texto .t-lead { max-width: 34rem; color: var(--texto); }
.heroi-detalhe { color: var(--texto-2); max-width: 34rem; }
.heroi-visual { display: flex; align-items: center; gap: 16px; order: -1; }
.mostrador { position: relative; width: 104px; aspect-ratio: 1; margin: 0; flex: none; }
.mostrador-svg { display: none; }
.mostrador-mono { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; }
.mostrador-mono img { width: 100%; height: 100%; object-fit: contain; }
.heroi-letreiro { width: 132px; }
.mostrador-agora { display: none; }
@media (max-width: 1023.98px) {
  .heroi-texto .acoes { order: 3; }
  .heroi-detalhe { order: 4; font-size: var(--t-apoio); }
}
@media (min-width: 1024px) {
  .heroi { padding-block: 24px 32px; }
  .heroi .grade { row-gap: 36px; }
  .heroi-texto { grid-column: 1 / 8; grid-row: 1; gap: 22px; }
  .heroi-visual { grid-column: 8 / 13; grid-row: 1; flex-direction: column; gap: 10px; order: 0; }
  .mostrador { width: min(410px, 100%); }
  .mostrador-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .mostrador-mono { width: 74%; height: 74%; }
  .heroi-letreiro { width: 240px; }
  .mostrador-agora { display: block; color: var(--texto-3); text-align: center; }
}
.m-trilho { fill: none; stroke: url(#g-trilho); stroke-width: 1.2; }
.m-tique { stroke: var(--texto-3); stroke-width: 1; }
.m-tique.maior { stroke: var(--prata); stroke-width: 2; }
.m-ponteiro { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(104.5deg); } /* 06:58: a primeira pintura é sempre a mesma */
.m-ponteiro-halo { fill: none; stroke: var(--ciano); stroke-width: 1.5; opacity: .45; }
.m-ponteiro-ponta { fill: var(--ciano); }

/* os três caminhos: inteiros na primeira tela, com o fio de metal por cima */
.caminhos { list-style: none; display: grid; gap: 0; grid-column: 1 / -1; }
.caminhos li { background: var(--fio-metal) top / 100% 1px no-repeat; }
.caminhos a {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center;
  padding: 14px 0; text-decoration: none; min-height: 44px;
}
.caminhos b { font-family: var(--f-titulo); font-weight: 560; font-size: 1.25rem; line-height: 1.2; }
.caminhos span { grid-column: 1; color: var(--texto-2); font-size: var(--t-apoio); }
.caminhos .seta { grid-row: 1 / 3; grid-column: 2; width: 20px; height: 20px; stroke: var(--azul-400); fill: none; stroke-width: 1.5; transition: transform 180ms var(--curva); }
.caminhos a:hover .seta, .caminhos a:focus-visible .seta { transform: translateX(4px); }
.caminhos a:hover b { color: #fff; }
@media (min-width: 1024px) {
  .caminhos { grid-template-columns: repeat(3, 1fr); column-gap: var(--calha); grid-row: 2; }
}

/* ---------- a vitrine (v4): a escala no computador e o checklist no celular, retos e legíveis.
   No celular, só o celular, grande, logo depois dos três caminhos. ---------- */
.vitrine {
  position: relative; padding-block: 28px 0; overflow-x: clip;
  background: radial-gradient(70% 90% at 50% 0%, #0E2A4E 0%, #0A1A30 42%, var(--fundo) 80%);
}
.vitrine::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fio-metal); }
.vitrine-palco { display: grid; justify-items: center; }
.vitrine figure { margin: 0; }
.vit-computador { display: none; }
.vit-celular { width: min(300px, 82vw); }
.vit-rotulo { margin-top: 12px; text-align: center; color: var(--texto-2); font-size: var(--t-apoio); }
.vit-rotulo b { display: block; color: var(--texto); font-weight: 600; }
@media (min-width: 768px) {
  .vitrine { padding-top: 40px; }
  .vitrine-palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 270px); align-items: start; column-gap: 0; justify-items: stretch; }
  .vit-computador { margin-top: 56px; }
  .vit-computador { display: block; position: relative; z-index: 1; }
  .vit-celular { width: auto; position: relative; z-index: 2; margin-left: -64px; margin-bottom: -2px; }
  .vit-rotulo { text-align: left; }
  .vit-celular .vit-rotulo { padding-left: 16px; }
}
@media (min-width: 1280px) {
  .vitrine-palco { grid-template-columns: minmax(0, 960px) 290px; justify-content: center; }
}
.fatos-lista { list-style: none; display: grid; gap: 0; padding-block: 18px 16px; margin-top: 20px; background: var(--fio-metal) top / 100% 1px no-repeat; }
.fatos-lista li { color: var(--texto-2); font-size: var(--t-apoio); padding: 8px 0; }
.fatos-lista li + li { border-top: 1px solid var(--linha); }
@media (min-width: 1024px) {
  .fatos-lista { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-block: 22px 20px; }
  .fatos-lista li { padding: 0; display: flex; align-items: center; }
  .fatos-lista li + li { border: 0; }
  .fatos-lista li + li::before {
    content: ""; width: 1px; height: 14px; background: var(--metal); margin-inline: 20px;
    transform: skewX(calc(var(--inclinacao) * -1));
  }
}

/* ---------- o problema (§8.3) ---------- */
.antes-texto { display: grid; gap: 20px; align-content: start; }
.antes-lista { list-style: none; display: grid; gap: 0; }
.antes-lista li { padding: 10px 0; background: var(--fio-metal) top / 100% 1px no-repeat; color: var(--texto-2); }
.antes-lista li::before { content: "— "; color: var(--texto-3); }
.passagem { font-family: var(--f-titulo); font-weight: 560; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.25; color: var(--texto); max-width: 30ch; }
.antes-desenho { margin-top: 40px; display: grid; gap: 24px; }
/* no celular, a lista vertical em HTML (v4: o SVG encolhido deixava 7 px de letra) */
.antes-svg { display: none; }
.antes-vertical { list-style: none; display: grid; gap: 0; position: relative; padding-left: 28px; }
.antes-vertical::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 28px; width: 2px; background: linear-gradient(180deg, #F3F3F4, #6E7380 40%, #DBDBDC 70%, #8C909A); }
.av-no { position: relative; display: grid; gap: 2px; padding-bottom: 22px; }
.av-no::before { content: ""; position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--azul-500); box-shadow: 0 0 0 3px var(--fundo); }
.av-no b { font-family: var(--f-titulo); font-weight: 600; font-size: 1.375rem; line-height: 1.1; }
.av-no span { color: var(--texto-2); font-size: 1rem; }
.av-saidas ul { list-style: none; display: grid; gap: 8px; }
.av-saidas li { position: relative; font-size: 1.0625rem; font-weight: 500; padding: 8px 12px; border-radius: 6px; border: 1px solid transparent;
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--borda-metal) border-box; }
.av-saidas li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 18px; height: 1px; background: var(--prata); opacity: .6; }
@media (min-width: 768px) {
  .antes-svg { display: block; width: 100%; height: auto; }
  .antes-vertical { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@media (min-width: 1024px) {
  .antes-texto { grid-column: 1 / 6; }
  .antes-desenho { grid-column: 6 / 13; margin-top: 0; align-self: center; padding-left: 24px; }
}
.d-linha { fill: none; stroke: var(--azul-500); stroke-width: 2.5; stroke-linecap: round; }
.d-ramo { fill: none; stroke: var(--prata); stroke-width: 1.6; stroke-opacity: .75; }
.d-no { fill: var(--azul-500); stroke: var(--fundo); stroke-width: 3; }
.d-ponta { fill: var(--prata); }
.d-rotulo { font-family: var(--f-texto); font-size: 17px; font-weight: 500; fill: var(--texto); }
.d-rotulo-forte { font-family: var(--f-titulo); font-size: 22px; font-weight: 600; fill: var(--texto); }
.d-rotulo-apoio { font-family: var(--f-texto); font-size: 14px; fill: var(--texto-3); }
.d-ramo-g { transition: opacity 300ms ease; }
/* os ramos acendem um a um na rolagem; sem movimento, o estado final é o padrão */
.js.movimento .antes-desenho:not(.tocou) .d-linha { stroke-dashoffset: 320; }
.js.movimento .antes-desenho:not(.tocou) .d-ramo-g, .js.movimento .antes-desenho:not(.tocou) .d-no-g { opacity: 0; }
.js.movimento .d-linha { stroke-dasharray: 320; transition: stroke-dashoffset 700ms var(--curva) 100ms; }
.js.movimento .d-no-g { transition: opacity 300ms ease 200ms; }
.js.movimento .d-ramo-g:nth-of-type(1) { transition-delay: 800ms; }
.js.movimento .d-ramo-g:nth-of-type(2) { transition-delay: 1000ms; }
.js.movimento .d-ramo-g:nth-of-type(3) { transition-delay: 1200ms; }
.js.movimento .d-ramo-g:nth-of-type(4) { transition-delay: 1400ms; }

/* ---------- a hora e a régua da noite: UM componente nas duas páginas (v4) ---------- */
.hora-regua { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.noite { width: 200px; height: 40px; flex: none; overflow: visible; }
.noite-larga { width: 100%; max-width: 560px; height: auto; }
.noite-base { stroke: var(--linha-forte); stroke-width: 2; stroke-linecap: round; }
.noite-feito { stroke: var(--azul-400); stroke-width: 3; stroke-linecap: round; }
.noite-tique { stroke: var(--texto-3); stroke-width: 1; }
.noite-tique.noite-zero { stroke: var(--prata); stroke-width: 2; }
.noite-rotulo { font-family: var(--f-texto); font-size: 13px; font-weight: 500; fill: var(--texto-2); }
.noite-rotulo.noite-zero { fill: var(--texto); font-weight: 600; }
.noite-ponta { fill: var(--texto); stroke: var(--azul-400); stroke-width: 2; }
.js.movimento .noite-meianoite .noite-feito, .js.movimento .palco-virada .noite-feito { stroke-dasharray: var(--noite-comp, 200); stroke-dashoffset: var(--noite-comp, 200); transition: stroke-dashoffset 900ms var(--curva) 150ms; }
.js.movimento .noite-meianoite.visto .noite-feito, .js.movimento .palco-virada.visto .noite-feito { stroke-dashoffset: 0; }

/* ---------- O PALCO (v4): a tela num painel escuro com borda de metal e a legenda ao lado ---------- */
.palco {
  margin: 0; position: relative; display: grid; gap: 18px; align-items: center; justify-items: center;
  padding: clamp(14px, 2.2vw, 28px); border-radius: 14px; border: 1px solid transparent;
  background: var(--palco-fundo) padding-box, var(--borda-metal) border-box;
}
.palco > .aparelho, .palco .troca-telas { width: 100%; }
.palco-legenda { justify-self: stretch; display: grid; gap: 10px; align-content: start; }
.palco-legenda .destaques-lista { margin-top: 0; }
.palco-celular .celular { max-width: 300px; }
.palco-tablet .tablet { max-width: 860px; }
@media (min-width: 1024px) {
  /* celular e tablet de porta: a legenda AO LADO, nunca embaixo de uma caixa estreita */
  .palco-celular, .porta-palco, .palco-campo { grid-template-columns: minmax(0, auto) minmax(0, 1fr); justify-items: start; column-gap: clamp(24px, 3vw, 48px); }
  .palco-celular > .aparelho { width: 300px; }
  .palco-celular .palco-legenda, .porta-palco .palco-legenda { max-width: 26rem; }
}

/* ---------- molduras de aparelho: a casca é CROMADA (v4) ---------- */
.aparelho { margin: 0; }
.aparelho-casca { position: relative; background: var(--casca-metal); padding: 1.5px; }
.aparelho-tela { position: relative; background: var(--moldura); }
.aparelho-vidro { position: relative; overflow: hidden; background: #fff; }
.aparelho-vidro img { width: 100%; }
.tablet .aparelho-casca { border-radius: 19px 0 19px 19px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.tablet .aparelho-tela { padding: 10px; border-radius: 18px 0 18px 18px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.tablet .aparelho-vidro { border-radius: 8px; background: #05070D; }
.tablet.porta { max-width: 420px; }
.celular { max-width: 300px; }
.celular .aparelho-casca { border-radius: 29px 0 29px 29px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.celular .aparelho-tela { padding: 8px; border-radius: 28px 0 28px 28px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.celular .aparelho-vidro { border-radius: 20px; }
.computador .aparelho-casca { border-radius: 9px 0 9px 9px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.computador .aparelho-tela { padding: 0; border-radius: 8px 0 8px 8px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.computador .aparelho-tela::before {
  content: ""; display: block; height: 22px;
  background:
    radial-gradient(circle at 14px 11px, var(--moldura-luz) 3px, transparent 3.5px),
    radial-gradient(circle at 28px 11px, var(--moldura-luz) 3px, transparent 3.5px),
    radial-gradient(circle at 42px 11px, var(--moldura-luz) 3px, transparent 3.5px);
}
.computador .aparelho-vidro { border-radius: 0 0 8px 8px; }
/* o RECORTE ampliado: um pedaço da tela, com borda de metal e sem moldura de aparelho */
.recorte { max-width: 460px; }
.palco-recorte .recorte { max-width: 760px; }
.recorte .aparelho-casca { border-radius: 12px; }
.recorte .aparelho-tela { border-radius: 11px; background: transparent; }
.recorte .aparelho-vidro { border-radius: 10.5px; }

/* destaques numerados: o número fica FORA do contorno (lado calculado por
   scripts/site-imagens.py, no bloco gerado no fim deste arquivo) */
.dq {
  position: absolute; border: 1.5px solid var(--azul-400); border-radius: 4px; pointer-events: none;
}
.dq::before {
  content: attr(data-n); position: absolute; left: 0; top: -26px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul-600); color: #fff; font: 600 13px/1 var(--f-texto);
  box-shadow: 0 0 0 2px #fff;
}
/* no celular, a tela de computador e de tablet vem no recorte "-cel" (outro enquadramento):
   ali o contorno não casaria, e fica só a lista, com um traço */
@media (max-width: 767.98px) {
  .dq::before { width: 18px; height: 18px; font-size: 11px; }
  .aparelho:is(.tablet, .computador) .dq { display: none; }
  .palco:is(.palco-tablet, .palco-computador) .destaques-lista li > span[aria-hidden="true"] { width: 10px; height: 2px; border-radius: 1px; font-size: 0; background: var(--azul-400); transform: translateY(-5px); }
  .palco-recorte.palco-fatura .dq { display: none; }
  .palco-recorte.palco-fatura .destaques-lista li > span[aria-hidden="true"] { width: 10px; height: 2px; border-radius: 1px; font-size: 0; background: var(--azul-400); transform: translateY(-5px); }
}
.destaques-lista { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.destaques-lista li { display: flex; gap: 10px; align-items: baseline; font-size: var(--t-apoio); color: var(--texto-2); line-height: 1.45; }
.destaques-lista li > span[aria-hidden="true"] {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul-600); color: #fff; font: 600 13px/1 var(--f-texto); transform: translateY(4px);
}

/* ---------- a troca de tela (v4): a legenda troca JUNTO, e a tela velha sai antes de a nova
   entrar (sem dupla exposição). Sem JS ou com movimento reduzido: as duas fases empilhadas. ---------- */
.troca-telas, .troca-legendas { display: grid; gap: 16px; }
.troca-fase-titulo { font-family: var(--f-titulo); font-weight: 560; font-size: 1.0625rem; color: var(--texto); }
.troca-leg { display: grid; gap: 8px; align-content: start; }
.troca-repetir { justify-self: start; }
.js .troca:not(.troca-empilhada) .troca-telas, .js .troca:not(.troca-empilhada) .troca-legendas { gap: 0; }
.js .troca:not(.troca-empilhada) :is(.troca-fase, .troca-leg) { grid-area: 1 / 1; }
.js .troca:not(.troca-empilhada) :is(.troca-antes, .troca-leg-antes) { opacity: 1; visibility: visible; transition: opacity 320ms ease 240ms, visibility 0s linear 240ms; }
.js .troca:not(.troca-empilhada) :is(.troca-depois, .troca-leg-depois) { opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.js .troca.trocou:not(.troca-empilhada) :is(.troca-antes, .troca-leg-antes) { opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.js .troca.trocou:not(.troca-empilhada) :is(.troca-depois, .troca-leg-depois) { opacity: 1; visibility: visible; transition: opacity 320ms ease 240ms, visibility 0s linear 240ms; }
.js .troca:not(.trocou) .troca-repetir, .troca.troca-empilhada .troca-repetir { visibility: hidden; }

/* ---------- um dia de operação (§8.4) ---------- */
.cenas { display: grid; gap: clamp(56px, 6vw, 88px); }
.cena { row-gap: 20px; }
.cena .hora-regua::after { content: ""; flex: 1; height: 1px; background: var(--fio-metal); }
.cena-corpo { display: grid; gap: 14px; }
.cena-corpo p { max-width: 64ch; }
.registro { font-size: var(--t-apoio); color: var(--texto-2); padding-top: 12px; background: var(--fio-metal) top / 100% 1px no-repeat; max-width: 64ch; }
.registro b { color: var(--texto); font-weight: 600; }
.cena-tela { margin-top: 20px; }
.ver-tudo { margin-top: 28px; }
.cenas-indice { display: none; }
@media (min-width: 1024px) {
  .cena .com-regua { grid-column: 1 / 4; }
  .cena .com-conteudo { grid-column: 4 / 13; }
  .cena .hora-regua { position: sticky; top: calc(var(--topo-altura) + 32px); }
}

/* cenas presas (cenas.v4.js põe .presa no computador capaz). A cena muda por CLASSE (.ativa),
   com transição de 350 ms. v4: 65svh de rolagem por cena (a 23svh uma rolagem normal pulava
   três cenas) e o índice CLICÁVEL. */
.operacao-palco.presa { height: calc(var(--alto-cenas, 640px) + var(--passos, 4) * 65svh); }
.operacao-palco.presa .cenas {
  position: sticky; top: max(calc(var(--topo-altura) + 8px), calc((100svh + var(--topo-altura) - var(--alto-cenas, 600px)) / 2));
  display: grid; gap: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr;
  column-gap: var(--calha);
}
.operacao-palco.presa .cenas-indice {
  display: grid; grid-column: 1 / 5; grid-row: 1; align-self: start; gap: 0; list-style: none;
  position: relative; z-index: 1; border-left: 1px solid transparent;
  border-image: linear-gradient(180deg, #F3F3F4, #6E7380 50%, #DBDBDC) 1;
}
.cenas-indice li { position: relative; }
.cenas-indice button {
  display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 44px; padding: 6px 0 6px 20px;
  background: none; border: 0; color: var(--texto-3); font-size: var(--t-apoio); text-align: left; cursor: pointer;
  transition: color 240ms ease;
}
.cenas-indice button:hover { color: var(--texto-2); }
.cenas-indice button b { font-family: var(--f-titulo); font-weight: 500; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: inherit; min-width: 3.2em; transition: font-size 240ms var(--curva); }
.cenas-indice li::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--azul-400); transform: scaleY(0); transition: transform 240ms var(--curva); }
.cenas-indice li.ativa button { color: var(--texto); }
.cenas-indice li.ativa button b { font-size: 1.75rem; }
.cenas-indice li.ativa::before { transform: scaleY(1); }
.operacao-palco.presa .cena {
  grid-column: 1 / -1; grid-row: 1 / 3;
  grid-template-columns: subgrid; grid-template-rows: subgrid;
  align-items: start; row-gap: 0;
  opacity: 0; pointer-events: none; transform: translateY(16px);
  transition: opacity 350ms ease, transform 350ms var(--curva);
}
.operacao-palco.presa .cena.ativa { opacity: 1; pointer-events: auto; transform: none; }
.operacao-palco.presa .cena .com-regua { display: none; }
.operacao-palco.presa .cena .com-conteudo { display: contents; }
.operacao-palco.presa .cena-corpo { grid-column: 1 / 5; grid-row: 2; padding: 28px 0 0 20px; }
.operacao-palco.presa .cena-tela { grid-column: 5 / 13; grid-row: 1 / 3; align-self: center; margin: 0; }
.operacao-palco.presa .cena-corpo p { font-size: 1rem; }
.operacao-palco.presa .palco { padding: 18px; }
@supports not (grid-template-rows: subgrid) {
  .operacao-palco.presa .cena { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto; }
  .operacao-palco.presa .cena-corpo { grid-row: 1; padding-top: calc(var(--alto-indice, 260px) + 28px); }
  .operacao-palco.presa .cena-tela { grid-row: 1; }
}
/* cada tela no tamanho que cabe na janela sem rolar dentro da cena */
.operacao-palco.presa #h0658 .tablet { max-width: min(680px, calc((100svh - 380px) * 1.72)); margin-inline: auto; }
.operacao-palco.presa #h0715 .aparelho { max-width: min(720px, calc((100svh - 300px) * 1.27)); }
.operacao-palco.presa #h0610 .aparelho { max-width: min(780px, calc((100svh - 300px) * 1.46)); }
.operacao-palco.presa #h2331 .cerca-mapa { max-width: min(600px, calc((100svh - 360px) * 1.33)); }
/* os destaques acendem um a um quando a cena entra */
.operacao-palco.presa .cena .dq { opacity: 0; transition: opacity 200ms ease; }
.operacao-palco.presa .cena.ativa .dq { opacity: 1; }
.operacao-palco.presa .cena.ativa .dq:nth-of-type(2) { transition-delay: 160ms; }
.operacao-palco.presa .cena.ativa .dq:nth-of-type(3) { transition-delay: 320ms; }

/* 10:40: um celular reto e o posto ampliado ao lado, no mesmo palco */
.campo-par { display: grid; gap: 20px; align-items: center; width: 100%; }
.campo-celular { display: none; }
@media (min-width: 768px) {
  .campo-par { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 28px; }
  .campo-celular { display: block; }
}
@media (min-width: 1024px) { .palco-campo { grid-template-columns: 1fr; } }

/* ---------- a cerca (§9.4) ---------- */
.cerca { max-width: 100%; }
.cerca-mapa { position: relative; width: 100%; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 10px; overflow: hidden; touch-action: pan-y; }
.cerca-mapa > svg { width: 100%; height: auto; }
.q-quadra { fill: var(--superficie-2); stroke: var(--linha); stroke-width: 1; }
.q-percurso { fill: none; stroke: var(--azul-400); stroke-width: 2; stroke-dasharray: 6 5; }
.q-ponto { fill: var(--ok); }
.q-ok { fill: none; stroke: var(--fundo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.q-num { font-family: var(--f-texto); font-size: 11px; font-weight: 600; fill: var(--texto-2); }
.q-cerca { fill: rgb(41 127 191 / .10); stroke: var(--azul-500); stroke-width: 1.5; transition: fill 240ms ease, stroke 240ms ease; }
/* o ponto 6: um alvo CHEIO com o número dentro (v4: o anel vazio lia como lupa) */
.q-ponto-alvo { fill: var(--azul-600); stroke: #fff; stroke-width: 1.5; transition: fill 240ms ease; }
.q-alvo-num { font-family: var(--f-texto); font-size: 12px; font-weight: 700; fill: #fff; pointer-events: none; }
.cerca.dentro .q-cerca { fill: rgb(61 184 138 / .14); stroke: var(--ok); }
.cerca.dentro .q-ponto-alvo { fill: var(--ok); }
/* o vigilante: um alfinete de ~22 px com pulso (3 vezes, WCAG 2.2.2) e o rótulo "arraste" */
.vigilante {
  position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0;
  left: calc(var(--vx, 262) / 400 * 100%); top: calc(var(--vy, 128) / 300 * 100%);
  background: transparent; border: 0; border-radius: 50%; cursor: grab; touch-action: none;
  display: grid; place-items: center; z-index: 1;
}
.vigilante:active { cursor: grabbing; }
.vigilante::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid var(--ciano); opacity: 0;
}
.js.movimento .cerca:not(.movido) .vigilante::before { animation: pulso 1.6s ease-out 3; }
@keyframes pulso { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.vigilante svg { width: 22px; height: 28px; transform: translateY(-13px); }
.vigilante svg path { fill: var(--azul-500); stroke: #fff; stroke-width: 1.8; }
.vigilante svg circle { fill: #fff; }
.vigilante-rotulo {
  position: absolute; right: calc(100% - 8px); top: -16px; padding: 2px 8px; border-radius: 4px;
  background: var(--fundo); border: 1px solid var(--linha-forte); color: var(--texto);
  font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.cerca.movido .vigilante-rotulo, .cerca.dentro .vigilante-rotulo { display: none; }
.vigilante:focus-visible { outline: 2px solid var(--ciano); outline-offset: 0; }
.cerca-estado {
  display: flex; align-items: center; gap: 8px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ok);
}
.cerca-estado.longe { color: var(--texto-2); }
.cerca-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
@media (min-width: 1024px) {
  .palco-cerca { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; column-gap: 28px; }
}

/* ---------- Dia 1º (§8.5) — virada 2: PAPEL claro e o "1º" grande ---------- */
.papel { background: var(--papel); color: var(--tinta); }
.faixa-papel { background: var(--papel-fundo); color: var(--tinta); }
.faixa-papel .t-h2 { color: var(--tinta); }
.faixa-papel .t-apoio { color: var(--tinta-2); }
.faixa-papel .sobretitulo, .faixa-papel .link { color: var(--azul-papel); }
.mes-numeral {
  font-family: var(--f-titulo); font-weight: 600; font-size: clamp(5rem, 2rem + 12vw, 13.5rem);
  line-height: .78; letter-spacing: -.05em; color: var(--azul-700); margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
  .mes-numeral { grid-column: 1 / 4; margin: 0; align-self: start; }
  .mes-cabeca { grid-column: 4 / 13; max-width: none; }
}
.folhas { list-style: none; display: grid; gap: 16px; grid-column: 1 / -1; }
@media (min-width: 768px) { .folhas { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1024px) { .folhas { grid-template-columns: repeat(4, 1fr); } }
.folha {
  border-radius: 8px; padding: 18px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px;
  background: #fff; border: 1px solid var(--fio-papel);
}
.folha h3 { font-family: var(--f-titulo); font-weight: 580; font-size: 1.25rem; line-height: 1.2; color: var(--tinta); }
.folha p { font-size: var(--t-apoio); color: var(--tinta-2); line-height: 1.5; }
/* o trecho (v4): o ELEMENTO com respiro em volta, numa proporção comum (3:1), cantos arredondados */
.trecho { aspect-ratio: 3 / 1; border: 1px solid var(--fio-papel); border-radius: 8px; overflow: hidden; background: #fff; }
.trecho picture { display: block; width: 100%; height: 100%; }
.trecho img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tela-inteira {
  justify-self: start; font-size: var(--t-legenda); font-weight: 600; color: var(--azul-papel);
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none;
}
.tela-inteira::after { content: "↗"; font-weight: 600; }
.tela-inteira:hover { text-decoration: underline; text-underline-offset: 4px; }
.mes-final { grid-column: 1 / -1; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--fio-papel); color: var(--tinta-2); display: grid; gap: 4px; }
.mes-final p:first-child { max-width: 68ch; }
.js.movimento .folhas.revela-lista .folha { opacity: 0; transform: translateY(16px); transition: opacity 400ms ease, transform 400ms var(--curva); }
.js.movimento .folhas.revela-lista.visto .folha { opacity: 1; transform: none; }
.js.movimento .folhas.revela-lista .folha:nth-child(2) { transition-delay: 80ms; }
.js.movimento .folhas.revela-lista .folha:nth-child(3) { transition-delay: 160ms; }
.js.movimento .folhas.revela-lista .folha:nth-child(4) { transition-delay: 240ms; }

/* ---------- ponte (virada 3): azul profundo, as horas grandes e o corte de 13° em metal ---------- */
.ponte {
  text-align: center; padding-block: clamp(56px, 7vw, 112px);
  background: linear-gradient(180deg, #091830 0%, var(--azul-900) 55%, #091830 100%);
}
.ponte-faixa { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 72px); margin-bottom: clamp(28px, 4vw, 48px); }
.ponte-lado { display: grid; gap: 10px; justify-items: center; }
.ponte-hora {
  font-family: var(--f-titulo); font-weight: 600; font-size: clamp(3.1rem, .5rem + 11vw, 11rem); line-height: .86;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--texto);
}
.ponte-lugar { color: #A9BCD4; font-size: var(--t-apoio); line-height: 1.35; }
.ponte-corte {
  width: clamp(6px, .8vw, 12px); height: clamp(72px, 13vw, 200px); flex: none;
  background: var(--metal);
  transform: skewX(calc(var(--inclinacao) * -1));
}
.ponte-texto { display: grid; gap: 16px; justify-items: center; max-width: 60rem; margin-inline: auto; }
.ponte-texto .t-apoio { color: #B9C7D8; font-size: var(--t-lead); max-width: 40rem; }
.ponte .sobretitulo { color: var(--ciano); }

/* ---------- uma noite de show (v4): os 4 momentos numa linha e UMA tela, a central ao vivo ---------- */
.noite-grade { row-gap: 32px; align-items: start; }
.noite-linha { list-style: none; display: grid; gap: 0; }
.noite-linha > li { padding: 22px 0 20px; background: var(--fio-metal) top / 100% 1px no-repeat; display: grid; gap: 8px; }
.noite-linha > li:first-child { padding-top: 4px; background: none; }
.noite-linha .hora-regua { margin-bottom: 4px; }
.noite-linha p { color: var(--texto-2); }
.noite-direita { min-width: 0; }
@media (min-width: 1024px) {
  .noite-linha { grid-column: 1 / 6; }
  .noite-direita { grid-column: 6 / 13; position: sticky; top: calc(var(--topo-altura) + 32px); }
}
.fecho { margin-top: clamp(40px, 4vw, 56px); display: grid; gap: 20px; }
.fecho-frase { font-family: var(--f-titulo); font-weight: 560; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.15; }

/* ---------- um motor (v4): as peças → o motor → os sistemas ---------- */
.motor-cabeca { row-gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); align-items: end; }
.motor-titulo { display: grid; gap: 14px; justify-items: start; }
.motor-texto { color: var(--texto-2); max-width: 38rem; }
@media (min-width: 1024px) {
  .motor-titulo { grid-column: 1 / 7; }
  .motor-texto { grid-column: 7 / 13; }
}
.motor-desenho { display: grid; gap: 28px; position: relative; }
.motor-rotulo { font-family: var(--f-titulo); font-size: 13px; font-weight: 560; letter-spacing: .08em; color: var(--azul-400); margin-bottom: 12px; }
.motor-pecas, .motor-marcas { list-style: none; display: grid; gap: 10px; }
.motor-pecas li {
  position: relative; padding: 12px 16px; border-radius: 8px; border: 1px solid transparent; font-weight: 500;
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--borda-metal) border-box;
}
.motor-marcas li > a, .motor-marcas li.motor-outra {
  display: grid; gap: 2px; padding: 16px 18px; border-radius: 10px; border: 1px solid transparent; text-decoration: none;
  background: linear-gradient(#0D1F36, #0B1829) padding-box, var(--borda-metal) border-box;
}
.motor-marcas b { font-family: var(--f-titulo); font-weight: 580; font-size: 1.25rem; line-height: 1.2; }
.motor-marcas span { color: var(--ok); font-size: var(--t-legenda); font-weight: 600; }
.motor-marcas li > a:hover b { color: #fff; }
.motor-marcas li.motor-outra { background: transparent; border: 1px dashed var(--linha-forte); }
.motor-marcas li.motor-outra span { color: var(--texto-3); }
.motor-nucleo { display: grid; place-items: center; }
.motor-anel {
  width: 184px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 6px;
  background: conic-gradient(from 210deg, #F3F3F4, #6E7380 18%, #DBDBDC 34%, #8C909A 52%, #F3F3F4 66%, #5D6270 82%, #F3F3F4);
}
.motor-anel > span {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; gap: 4px;
  background: radial-gradient(80% 80% at 35% 25%, #16365E 0%, #0B1A2E 60%, #070B11 100%);
}
.motor-anel b { font-family: var(--f-titulo); font-weight: 600; font-size: 1.5rem; line-height: 1; }
.motor-anel small { color: var(--texto-2); font-size: 12px; max-width: 10em; line-height: 1.3; }
@media (max-width: 1023.98px) {
  /* no celular, de cima para baixo, com um fio de metal ligando as três partes */
  .motor-nucleo { position: relative; }
  .motor-nucleo::before { content: ""; position: absolute; top: -28px; bottom: -28px; left: 50%; width: 2px; background: linear-gradient(180deg, transparent, #DBDBDC 30%, #6E7380 70%, transparent); z-index: -1; }
}
@media (min-width: 1024px) {
  .motor-desenho { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); align-items: center; column-gap: 0; }
  /* os fios: das peças ao motor e do motor aos sistemas */
  /* cada peça desce um fio até um barramento vertical; do barramento, um fio só vai ao anel
     (e do anel, outro barramento abre para os sistemas) */
  .motor-pecas { position: relative; }
  .motor-pecas li::after { content: ""; position: absolute; left: 100%; top: 50%; width: 64px; height: 1px; background: linear-gradient(90deg, rgb(219 219 220 / .55), rgb(160 160 166 / .35)); }
  .motor-pecas::after { content: ""; position: absolute; right: -64px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(180deg, #8C909A, #F3F3F4 50%, #8C909A); }
  .motor-marcas { position: relative; }
  .motor-marcas li { position: relative; }
  .motor-marcas li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 56px; height: 1px; background: linear-gradient(90deg, rgb(160 160 166 / .35), rgb(219 219 220 / .55)); }
  .motor-marcas::before { content: ""; position: absolute; left: -56px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, #8C909A, #F3F3F4 50%, #8C909A); }
  .motor-nucleo { position: relative; align-self: stretch; }
  .motor-nucleo::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, #DBDBDC, #6E7380 50%, #DBDBDC); }
  .motor-anel { position: relative; }
  .motor-desenho > .motor-col { align-self: center; }
  .motor-anel { width: 210px; }
  .motor-col:last-child { padding-left: 56px; }
  .motor-col:first-child { padding-right: 64px; }
}
.motor-marca { margin-top: clamp(48px, 6vw, 80px); row-gap: 24px; align-items: center; }
@media (min-width: 1024px) {
  .motor-marca .marca-palco { grid-column: 1 / 8; }
  .motor-marca .motor-marca-texto { grid-column: 8 / 13; padding-left: 16px; }
}
.marca-palco .computador { max-width: 680px; }
.motor-marca-texto { display: grid; gap: 14px; align-content: center; justify-items: start; }

/* ---------- locação (§8.9) — desenho técnico em linha fina ---------- */
.locacao .grade { row-gap: 32px; align-items: center; }
.locacao-texto { display: grid; gap: 20px; align-content: start; justify-items: start; }
.locacao-itens { list-style: none; display: grid; width: 100%; }
.locacao-itens li { padding: 14px 0; background: var(--fio-metal) top / 100% 1px no-repeat; font-weight: 600; }
.locacao-itens li:last-child { border-bottom: 1px solid var(--linha); }
.locacao-itens span { color: var(--texto-3); font-weight: 450; }
.locacao-arte, .cena-uso .arte {
  background-color: var(--superficie);
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  border: 1px solid var(--linha-forte); border-radius: 12px;
}
.locacao-arte { margin: 0; padding: 20px 16px 14px; }
.locacao-arte .arte { width: 100%; height: auto; }
.locacao-arte figcaption { margin-top: 10px; text-align: center; }
@media (min-width: 1024px) {
  .locacao-texto { grid-column: 1 / 7; }
  .locacao-arte { grid-column: 7 / 13; }
}
.tec-linha { fill: none; stroke: var(--azul-400); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tec-fino { fill: none; stroke: #7F94AD; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tec-prata { fill: none; stroke: var(--prata); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tec-luz { fill: var(--ciano); }
.tec-chamada { fill: none; stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 3 3; }
.tec-no { fill: var(--texto-2); }
.tec-rotulo { font-family: var(--f-texto); font-size: 14px; font-weight: 500; fill: var(--texto-2); }
.tec-grade { stroke: var(--linha-forte); stroke-width: 1; }
.tec-varre { fill: none; stroke: var(--azul-500); stroke-width: 1.5; stroke-dasharray: 4 7; }
.cenas-uso { display: grid; gap: 24px; }
@media (min-width: 768px) { .cenas-uso { grid-template-columns: 1fr 1fr; } }
.cena-uso { margin: 0; display: grid; gap: 14px; align-content: start; }
.cena-uso .arte { width: 100%; height: auto; }
.cena-uso figcaption { color: var(--texto-2); font-size: var(--t-apoio); max-width: 52ch; }
.cena-uso figcaption b { color: var(--texto); }

/* ---------- seções COMPACTAS (v4): título à esquerda, conteúdo à direita ---------- */
.secao.compacta, .grupo.compacta { padding-block: clamp(44px, 5vw, 72px); }
.lateral-cabeca { display: grid; gap: 12px; align-content: start; justify-items: start; margin-bottom: 24px; }
.lateral-corpo { min-width: 0; display: grid; gap: 28px; justify-items: start; }
.lateral-corpo > * { justify-self: stretch; }
.lateral-corpo > .botao-foco, .lateral-corpo > .acoes { justify-self: start; }
@media (min-width: 1024px) {
  .lateral-cabeca { grid-column: 1 / 5; margin: 0; position: sticky; top: calc(var(--topo-altura) + 32px); align-self: start; padding-right: 24px; }
  .lateral-corpo { grid-column: 5 / 13; }
}

/* ---------- confiança, diário, começar, perguntas ---------- */
.lista-regua { list-style: none; display: grid; }
.lista-regua > li { padding: 16px 0; background: var(--fio-metal) top / 100% 1px no-repeat; display: grid; gap: 4px; align-content: start; }
.lista-regua b { font-weight: 600; color: var(--texto); }
.lista-regua .frase { color: var(--texto-2); }
@media (min-width: 1024px) {
  .lista-2col { grid-template-columns: 1fr 1fr; column-gap: calc(var(--calha) * 2); align-items: start; }
  @supports (grid-template-rows: subgrid) {
    .lista-2col > li { grid-row: span 2; grid-template-rows: subgrid; row-gap: 4px; }
  }
}
.depois-lista { margin-top: 24px; }
.diario { list-style: none; display: grid; }
.diario li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 16px; padding: 14px 0; background: var(--fio-metal) top / 100% 1px no-repeat; }
.diario time { color: var(--texto-3); font-variant-numeric: tabular-nums; font-weight: 500; font-size: var(--t-dado); padding-top: 3px; }
.diario span { color: var(--texto-2); }
/* como começar: os números em CROMO, grandes, com um fio prata entre os passos (v4) */
.passos { list-style: none; display: grid; gap: 0; }
.passos li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; background: var(--fio-metal) top / 100% 1px no-repeat; align-items: start; align-content: start; }
.passos .n {
  display: block; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(3rem, 2.2rem + 2.4vw, 4.5rem); line-height: .9;
  font-variant-numeric: tabular-nums; color: var(--prata);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .passos .n { background-image: linear-gradient(180deg, #FFFFFF 10%, #E3E7EC 42%, #9EA6B2 55%, #D8DDE4 70%, #FFFFFF 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.passos b { display: block; font-weight: 600; margin-bottom: 4px; font-size: 1.125rem; }
.passos p { color: var(--texto-2); }
@media (min-width: 1024px) {
  .passos { grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--calha) * 2); }
  .passos li { grid-template-columns: 1fr; background: none; padding-top: 0; }
  /* o fio prata que liga um número ao próximo */
  .passos li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 72px; right: calc(var(--calha) * -2 + 8px); height: 1px; background: var(--fio-metal); }
}
.perguntas { display: grid; }
.perguntas details { background: var(--fio-metal) top / 100% 1px no-repeat; }
.perguntas details:last-child { border-bottom: 1px solid var(--linha); }
.perguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 18px 0; font-weight: 600; font-size: 18px; min-height: 44px;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--prata), var(--prata)) center / 100% 1.5px no-repeat,
              linear-gradient(var(--prata), var(--prata)) center / 1.5px 100% no-repeat;
  transition: transform 180ms var(--curva);
}
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details > div { padding: 0 0 20px; color: var(--texto-2); max-width: 64ch; display: grid; gap: 8px; }
.perguntas-contato {
  margin-top: 32px; padding: 24px; border: 1px solid transparent; border-radius: 10px; display: grid; gap: 12px; align-content: start; justify-items: start;
  background: linear-gradient(var(--superficie-2), var(--superficie-2)) padding-box, var(--borda-metal) border-box;
}
.perguntas-contato-titulo { font-family: var(--f-titulo); font-weight: 560; font-size: 1.375rem; line-height: 1.2; color: var(--texto); }
.perguntas-contato p:not(.perguntas-contato-titulo) { color: var(--texto-2); }
@media (min-width: 1024px) {
  #perguntas .perguntas { grid-column: 5 / 10; }
  #perguntas .perguntas-contato { grid-column: 10 / 13; margin-top: 0; align-self: start; position: sticky; top: calc(var(--topo-altura) + 24px); }
}

/* ---------- fechamento (virada) ---------- */
.fim { text-align: center; }
.fim-marca { position: relative; width: min(200px, 52vw); margin: 0 auto 24px; }
.fim-marca img { width: 100%; }
.fim-texto { display: grid; gap: 20px; justify-items: center; max-width: 64rem; margin-inline: auto; }
.fim-cima { font-family: var(--f-titulo); font-weight: 500; font-size: 20px; color: var(--texto-2); }
.fim .acoes { justify-content: center; }
.fim .ja-cliente { color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; }

/* ---------- a faísca (§5.3) — metal "vivo" sem repintura ---------- */
.faisca {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: url("logo/hc-monograma-96.v1.webp"); mask-image: url("logo/hc-monograma-96.v1.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* revisão 1 (crítica técnica): a máscara do logotipo vertical (62 KB) só é pedida quando o
   fechamento chega perto da tela (o JavaScript põe .perto); antes vinha na carga do celular */
.faisca.vertical { -webkit-mask-image: none; mask-image: none; }
/* revisão 2: a máscara usa a versão de 260 px (só o alfa importa; a de 520 já vinha no <img>) */
.faisca.vertical.perto { -webkit-mask-image: url("logo/hc-vertical-260.v1.webp"); mask-image: url("logo/hc-vertical-260.v1.webp"); }
.faisca i {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgb(243 243 244 / .55) 45%, rgb(81 209 246 / .35) 55%, transparent);
  mix-blend-mode: screen;
  transform: translateX(-130%) skewX(-13deg);
  opacity: 0;
}

/* ---------- rodapé: a empresa por extenso (v4) ---------- */
.rodape { position: relative; padding-block: 48px 40px; color: var(--texto-2); font-size: var(--t-apoio); }
.rodape::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fio-metal); }
.rodape .grade { row-gap: 24px; }
.rodape-marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 48px; }
.rodape-marca img { width: 44px; height: 44px; }
.rodape-marca .rodape-letreiro { width: 120px; height: auto; }
.rodape-empresa { color: var(--texto); font-weight: 600; font-size: var(--t-apoio); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.rodape-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; }
.rodape-links a { color: var(--texto-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; }
.rodape-links a:hover { color: var(--texto); }
.rodape .t-legenda { margin-top: 4px; }
@media (min-width: 1024px) {
  .rodape-esq { grid-column: 1 / 6; }
  .rodape-dir { grid-column: 7 / 13; }
}
.rodape-esq, .rodape-dir { display: grid; gap: 12px; align-content: start; justify-items: start; }

/* ---------- barra do WhatsApp no celular ----------
   v4: some quando o fechamento ou o rodapé estão na tela, e o foco do teclado nunca fica
   embaixo dela (WCAG 2.2, 2.4.11): a rolagem deixa a altura da barra livre embaixo. */
.barra-zap { display: none; }
@media (max-width: 1023.98px) {
  :root { --barra-altura: calc(64px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(var(--barra-altura) + 16px); }
  .barra-zap {
    display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: var(--barra-altura); padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--fundo);
    transition: transform 240ms var(--curva);
  }
  .barra-zap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fio-metal); }
  .barra-zap .botao-foco, .barra-zap .botao { width: 100%; }
  .js .barra-zap:not(.barra-visivel) { transform: translateY(110%); }
}

/* ---------- revelação ---------- */
.js.movimento [data-revela]:not(.visto) { opacity: 0; transform: translateY(16px); }
.js.movimento [data-revela] { transition: opacity 400ms ease, transform 400ms var(--curva); }
.js.movimento [data-revela].ja { transition: none; }

/* ---------- páginas internas (§16) ---------- */
.pagina-topo { position: relative; padding-block: clamp(36px, 5vw, 80px) clamp(40px, 5vw, 72px); overflow-x: clip; }
.pagina-topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fio-metal); }
.pagina-topo .grade { row-gap: 40px; align-items: center; }
.pagina-topo-texto { display: grid; gap: 20px; align-content: start; justify-items: start; }
.pagina-topo .t-h1 { font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.25rem); line-height: 1.02; }
.pagina-topo-texto > p:not(.t-lead):not(.sobretitulo) { color: var(--texto-2); max-width: 60ch; }
.pagina-topo-texto .t-lead { color: var(--texto); }
.pagina-topo-visual { min-width: 0; }
@media (min-width: 1024px) {
  .pagina-topo-texto { grid-column: 1 / 6; }
  .pagina-topo-visual { grid-column: 6 / 13; }
}
.grupo { position: relative; padding-block: clamp(56px, 7vw, 96px); }
.grupo.alterna { background: var(--superficie); }
.grupo .fecho { grid-column: auto; }
.fecho-pagina .conteudo { display: grid; gap: 20px; justify-items: start; }
.itens { list-style: none; display: grid; }
/* item COM tela: texto em 4 colunas, palco em 8 (a largura inteira, sem faixa vazia) */
.item { padding: 28px 0; background: var(--fio-metal) top / 100% 1px no-repeat; row-gap: 20px; align-items: start; }
.itens > li:first-child { background: none; padding-top: 0; }
.item-texto { display: grid; gap: 10px; align-content: start; justify-items: start; }
.item-texto p { color: var(--texto-2); max-width: 60ch; }
.item-tela { min-width: 0; }
.ressalva { font-size: var(--t-legenda); color: var(--texto-3); border-left: 2px solid var(--linha-forte); padding-left: 10px; margin-top: 4px; }
@media (min-width: 1024px) {
  .item-texto { grid-column: 1 / 5; position: sticky; top: calc(var(--topo-altura) + 32px); padding-right: 12px; }
  .item-tela { grid-column: 5 / 13; }
}
/* itens SEM tela (v4): lista EDITORIAL — o título à esquerda, o texto à direita, sem ícone em caixa */
.editorial-casca { padding: 8px 0 0; }
.itens > .editorial-casca:not(:first-child) { padding-top: 28px; }
.editorial { list-style: none; display: grid; }
.editorial > li { display: grid; gap: 6px; padding: 18px 0; background: var(--fio-metal) top / 100% 1px no-repeat; }
.editorial h3 { font-family: var(--f-titulo); font-weight: 560; font-size: 1.25rem; line-height: 1.25; }
.editorial p { color: var(--texto-2); max-width: 64ch; }
@media (min-width: 1024px) {
  .editorial > li { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }
  .editorial > li > h3 { grid-column: 1 / 5; }
  .editorial > li > div { grid-column: 5 / 13; }
}
.papel-solo { border-radius: 6px; padding: 10px; width: 100%; }
.papel-solo img { width: 100%; border-radius: 2px; }
.palco-papel { padding: clamp(16px, 2.4vw, 32px); }
/* a linha da noite grande (00:00 em /eventos) */
.virada { width: 100%; display: grid; gap: 14px; justify-items: start; padding: 8px 4px; }
.virada-hora { font-family: var(--f-titulo); font-weight: 600; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.virada-nota { color: var(--texto-2); max-width: 46ch; }
.palco-virada { justify-items: stretch; }
/* os aplicativos */
.apps { list-style: none; display: grid; gap: 0 calc(var(--calha) * 2); grid-template-columns: 1fr; }
.apps li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 16px 0; background: var(--fio-metal) top / 100% 1px no-repeat; }
.app-icone { width: 64px; height: 64px; border-radius: 14px; border: 1px solid transparent; display: grid; place-items: center;
  background: linear-gradient(var(--superficie-2), var(--superficie-2)) padding-box, var(--borda-metal) border-box; }
.app-icone svg { width: 36px; height: 36px; fill: none; stroke: var(--azul-400); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.apps b { display: block; font-weight: 600; }
.apps span { color: var(--texto-2); font-size: var(--t-apoio); }
@media (min-width: 768px) { .apps { grid-template-columns: 1fr 1fr; } }
/* o que ainda não fazemos (v4): recolhido e menor — honesto, sem o peso do resto */
.ainda-nao-caixa summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 600; color: var(--azul-400);
}
.ainda-nao-caixa summary::-webkit-details-marker { display: none; }
.ainda-nao-caixa summary::after { content: "+"; }
.ainda-nao-caixa[open] summary::after { content: "−"; }
.ainda-nao-caixa .lista-regua { margin-top: 12px; font-size: var(--t-apoio); }
.ainda-nao li b { color: var(--texto); }

/* /plataforma: a RÉPLICA do painel na cor de cada empresa (v4: maior, com o escudo do
   logotipo e um documento trocando de cor junto) */
.marca-demo-figura { width: 100%; }
.replica {
  --cor-cliente: #1A61A4; --cor-menu: #0B1F33;
  width: 100%; display: grid; grid-template-columns: 32% 1fr; min-height: 380px;
  border-radius: 10px; overflow: hidden; background: #F4F6F9; color: #0C1522;
}
.replica-menu { background: var(--cor-menu); color: #C9D6E6; padding: 18px 12px; display: grid; gap: 6px; align-content: start; font-size: 14px; transition: background-color 200ms ease; }
.replica-marca { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.replica-logo { position: relative; width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
.replica-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.replica-escudo { fill: var(--cor-cliente); stroke: rgb(255 255 255 / .7); stroke-width: 1.2; transition: fill 200ms ease; }
.replica-logo span { position: relative; color: #fff; font: 700 14px var(--f-titulo); }
.replica-item { padding: 8px 10px; border-radius: 6px; }
.replica-item.ativo { background: var(--cor-cliente); color: #fff; transition: background-color 200ms ease; }
.replica-corpo { padding: 18px; display: grid; gap: 14px; align-content: start; }
.replica-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; }
.replica-botao { padding: 8px 14px; border-radius: 6px; background: var(--cor-cliente); color: #fff; font-weight: 600; font-size: 13px; transition: background-color 200ms ease; }
.replica-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.replica-cartao { display: grid; gap: 2px; padding: 10px; background: #fff; border: 1px solid #DCE2EA; border-radius: 6px; }
.replica-cartao small { font-size: 13px; color: #555D6A; }
.replica-cartao b { font-size: 20px; font-variant-numeric: tabular-nums; }
.replica-barra { height: 8px; border-radius: 4px; background: #DCE2EA; overflow: hidden; }
.replica-barra i { display: block; width: 72%; height: 100%; background: var(--cor-cliente); transition: background-color 200ms ease; }
.replica-doc { display: grid; gap: 10px; padding: 12px; background: #fff; border: 1px solid #DCE2EA; border-radius: 6px; }
.replica-doc-topo { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 3px solid var(--cor-cliente); transition: border-color 200ms ease; }
.replica-doc-topo i { width: 18px; height: 18px; border-radius: 4px; background: var(--cor-cliente); transition: background-color 200ms ease; }
.replica-doc-topo b { font-size: 13px; }
.replica-doc-topo small { margin-left: auto; font-size: 13px; color: #555D6A; }
.replica-doc-linhas { display: grid; gap: 6px; }
.replica-doc-linhas i { display: block; height: 6px; border-radius: 3px; background: #E3E8EF; }
.replica-doc-linhas i:nth-child(2) { width: 86%; } .replica-doc-linhas i:nth-child(3) { width: 64%; }
.amostras { display: flex; gap: 12px; flex-wrap: wrap; }
.amostra { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: var(--raio-ui); border: 1px solid transparent;
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--borda-metal) border-box; cursor: pointer; font-weight: 600; }
.amostra::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.amostra[aria-pressed="true"] { background: linear-gradient(var(--superficie-2), var(--superficie-2)) padding-box, var(--metal) border-box; }
.amostra-alfa { --c: #1A61A4; } .amostra-brisa { --c: #1F8A70; } .amostra-cobre { --c: #B5532B; }
.replica.cor-alfa { --cor-cliente: #1A61A4; --cor-menu: #0B1F33; }
.replica.cor-brisa { --cor-cliente: #1F8A70; --cor-menu: #0D2A24; }
.replica.cor-cobre { --cor-cliente: #B5532B; --cor-menu: #2A160E; }

/* ---------- transição entre páginas ---------- */
@view-transition { navigation: auto; }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  .link::after { transform: scaleX(1); transition: none; }
  .caminhos .seta, .perguntas summary::after { transition: none; }
  .barra-zap, .topo { transition: none; }
}

/* ==========================================================================
   v5 — RODADA HUMANA (17/10/2026)
   Plano: docs/site-2026-10/rodada-humana/plano.md (c) e (d).
   ========================================================================== */

/* legendas: 15 px em --texto-2 (contraste 8,1:1), nunca --texto-3 pequeno */
.t-legenda { font-size: var(--t-apoio); color: var(--texto-2); }

/* ---------- herói: no celular o logotipo grande saiu (repetia o do cabeçalho) ---------- */
.heroi-quem { color: var(--texto-2); font-size: 1rem; max-width: 36rem; }
.heroi-texto .t-lead { color: var(--texto); font-size: clamp(1.125rem, 1.04rem + .32vw, 1.3125rem); max-width: 36rem; }
.caminhos-titulo { grid-column: 1 / -1; font-family: var(--f-titulo); font-weight: 560; font-size: 1.125rem; line-height: 1.3; color: var(--texto-2); }
@media (max-width: 1023.98px) {
  .heroi-visual { display: none; }
  .heroi { min-height: 0; padding-block: 28px 12px; }
}
@media (min-width: 1024px) {
  .caminhos-titulo { grid-row: 2; margin-bottom: -20px; }
  .caminhos { grid-row: 3; }
}
/* os três caminhos (c.10): sobem 2 px e o fio de metal acende — no toque também */
.caminhos li { position: relative; }
.caminhos a { position: relative; transition: transform 180ms var(--curva); }
.caminhos a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--metal);
  transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--curva);
}
.caminhos a:is(:hover, :active, :focus-visible)::before { transform: scaleX(1); }
@media (hover: hover) { .caminhos a:hover { transform: translateY(-2px); } }
.caminhos a:active { transform: translateY(-2px); }

/* ---------- a vitrine sai do celular: a cena do ponto ocupa o lugar dela ---------- */
@media (max-width: 767.98px) {
  .vitrine { padding-top: 0; background: none; }
  .vitrine::before { display: none; }
  .vitrine-palco { display: none; }
  .fatos-lista { margin-top: 0; }
}

/* ---------- o fio de metal sob os títulos das seções com cena, com a faísca (c.7) ---------- */
.fio-titulo { display: block; position: relative; width: 72px; height: 2px; background: var(--metal); overflow: hidden; }
.fio-titulo i {
  position: absolute; top: -2px; bottom: -2px; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  transform: translateX(-130%) skewX(-13deg); opacity: 0;
}

/* ---------- o ponto funcionando (#ver-ponto) ---------- */
.ver-ponto .cabeca-secao { margin-bottom: 24px; }
.ver-ponto-rodape { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* ==========================================================================
   AS SIMULAÇÕES (b) — <figure data-sim>, motor em horus.v5.js (iniciarSims)
   Rodam em QUALQUER largura (test:site nº 21). Sem JavaScript, o quadro-chave e a lista
   inteira de passos; com movimento reduzido, o quadro-chave e "Ver acontecer".
   Revisão 2: atalhos clicáveis no lugar dos pontinhos; o brilho que corre no contorno de metal
   quando a cena começa; UMA curva de entrada e UMA de saída (--sim-entra / --sim-sai);
   `contain` no palco (a troca de quadro não recalcula a página inteira).
   ========================================================================== */
.sim { margin: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "palco" "texto" "legenda"; }
.sim-palco {
  grid-area: palco; position: relative; width: 100%; max-width: 600px; justify-self: center;
  padding: 58px 10px 12px; border-radius: 14px; border: 1px solid transparent;
  background: var(--palco-fundo) padding-box, var(--borda-metal) border-box;
  contain: layout paint;
}
html:not(.js) .sim-palco { padding-top: 12px; }
.sim-svg { width: 100%; height: auto; aspect-ratio: 360 / 300; overflow: visible; }
.sim-svg text { font-family: var(--f-texto); }
/* o brilho que corre UMA vez pelo contorno de metal quando a cena começa a tocar */
.sim-brilho {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sim-brilho i {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(243 243 244 / .95) 45%, rgb(81 209 246 / .8) 55%, transparent);
  transform: translateX(-120%) skewX(-13deg);
}
.sim.brilhou .sim-brilho i { animation: sim-brilho 1.4s var(--sim-entra) both; }
@keyframes sim-brilho { 0% { opacity: 0; transform: translateX(-120%) skewX(-13deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(320%) skewX(-13deg); } }
/* os controles moram no ALTO do palco: embaixo é onde fica o botão do WhatsApp */
.sim-controles { position: absolute; top: 8px; left: 10px; right: 10px; align-items: center; justify-content: space-between; gap: 8px; }
.js .sim-controles.so-js { display: flex !important; }
.sim-setas { display: flex; gap: 6px; }
.sim-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px;
  padding: 0 14px; border-radius: 22px; border: 1px solid var(--linha-forte); background: rgb(7 11 17 / .72);
  color: var(--texto); font-size: .9375rem; font-weight: 600; cursor: pointer; line-height: 1;
}
.sim-botao:hover { border-color: rgb(193 192 198 / .55); }
.sim-seta { padding: 0; width: 44px; font-size: 1.375rem; }
.sim-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sim-ic-tocar { display: none; fill: currentColor; stroke: none; }
.sim-pausa[aria-pressed="true"] .sim-ic-pausa { display: none; }
.sim-pausa[aria-pressed="true"] .sim-ic-tocar { display: block; }
/* os ATALHOS (revisão 2, pedido do Paulo e das duas críticas): o que a cena mostra fica escrito
   e à vista desde o primeiro segundo, e um toque leva ao momento — ninguém espera 21 s */
.sim-atalhos { flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.js .sim-atalhos.so-js { display: flex !important; }
.sim-atalho {
  position: relative; min-height: 40px; padding: 8px 14px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--linha-forte); background: rgb(7 11 17 / .6); color: var(--texto-2);
  font: 600 .875rem/1.2 var(--f-texto); cursor: pointer; transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.sim-atalho::after {
  /* o trilho do progresso: um fio azul que enche sob o atalho ativo */
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 1px;
  background: var(--azul-400); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--sim-entra);
}
.sim-atalho:hover { color: var(--texto); border-color: rgb(193 192 198 / .55); }
.sim-atalho.ativo { color: var(--texto); border-color: var(--azul-400); background: rgb(26 97 164 / .22); }
.sim-atalho.ativo::after { transform: scaleX(1); }
.sim-atalho:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }

.sim-texto { grid-area: texto; display: grid; gap: 8px; align-content: start; justify-items: start; min-width: 0; }
.sim-contador { font-size: .875rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.sim-contador b { color: var(--texto); font-weight: 600; }
.sim-passos { list-style: none; display: grid; width: 100%; }
.sim-passos li { padding: 10px 0; color: var(--texto-2); font-size: 1.0625rem; line-height: 1.5; }
.sim-passos li b { color: var(--texto); font-weight: 600; }
.sim-barra { display: none; height: 2px; margin-bottom: 10px; background: var(--linha); border-radius: 1px; overflow: hidden; }
.js .sim-barra { display: block; }
.sim-barra i { display: block; height: 100%; background: var(--azul-400); transform: scaleX(0); transform-origin: left; }
.sim-passos li.feito .sim-barra i { transform: scaleX(1); opacity: .35; }
.sim-passos li.ativo { color: var(--texto); }
/* o texto que muda a cada volta (a cena do ponto alterna a falta e o atraso) */
.sim[data-v="a"] [data-volta="b"], .sim[data-v="b"] [data-volta="a"] { display: none; }
.sim-ver { justify-self: start; }
.sim-ver[hidden] { display: none !important; }
.sim-legenda { grid-area: legenda; font-size: var(--t-apoio); color: var(--texto-2); line-height: 1.45; }

/* celular (com JavaScript): só o passo ativo, embaixo do palco, em 17 px. Os passos ficam
   EMPILHADOS na mesma célula — a altura é a do maior, e a página não pula quando o texto
   troca. Os outros ficam transparentes, mas continuam para o leitor de tela.
   O texto velho SAI rápido (120 ms) e o novo só ENTRA depois. A cena do TOPO das páginas
   internas (.sim-heroi) é assim em qualquer largura: o palco em cima, um passo embaixo. */
@media (max-width: 1023.98px) {
  .js .sim-passos li { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
  .js .sim-passos li.ativo { opacity: 1; pointer-events: auto; transition: opacity 260ms ease 130ms; }
  .js .sim-passos li.feito .sim-barra i { transform: scaleX(0); }
}
.js .sim-heroi .sim-passos li { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.js .sim-heroi .sim-passos li.ativo { opacity: 1; pointer-events: auto; transition: opacity 260ms ease 130ms; }
.js .sim-heroi .sim-passos li.feito .sim-barra i { transform: scaleX(0); }
/* computador: o palco à esquerda, a lista inteira ao lado com o passo ativo aceso */
@media (min-width: 1024px) {
  .sim:not(.sim-heroi) { grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "palco texto" "palco legenda"; column-gap: clamp(24px, 3vw, 44px); align-items: start; }
  .sim:not(.sim-heroi) .sim-palco { justify-self: start; }
  .sim:not(.sim-heroi) .sim-passos li { padding: 8px 0 10px; font-size: 1rem; color: var(--texto-3); transition: color 240ms ease; }
  .sim:not(.sim-heroi) .sim-passos li.ativo { color: var(--texto); }
  .sim:not(.sim-heroi) .sim-passos li.ativo b, .sim:not(.sim-heroi) .sim-passos li b { color: inherit; }
  .sim:not(.sim-heroi) .sim-legenda { align-self: end; }
  /* no topo das páginas internas: a cena ocupa a coluna da direita, ao lado do título */
  .sim-heroi .sim-palco { max-width: 560px; }
  .sim-heroi .sim-texto, .sim-heroi .sim-legenda { max-width: 560px; justify-self: center; width: 100%; }
}

/* ---------- a mecânica: [data-em] aparece no quadro dele (classe "on") ----------
   A saída é rápida e sem atraso; a entrada espera a saída acabar (nunca dois quadros um por
   cima do outro). Revisão 2: as duas usam a curva da casa. */
.sim [data-em] { opacity: 0; transition: opacity 120ms var(--sim-sai); }
.sim [data-em].on { opacity: 1; transition: opacity 320ms var(--sim-entra) 130ms; }
.sim .sobe[data-em].on { animation: sim-sobe 460ms var(--sim-entra) 130ms both; }
.sim .s-pilula.sobe.on { animation-delay: 380ms; }
@keyframes sim-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sim-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes sim-sai { from { opacity: 1; } to { opacity: 0; } }
@keyframes sim-traca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sim-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes sim-salta { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
/* pausado: tudo congela no lugar; parado (antes de tocar e depois das voltas), sem animação
   nenhuma — o quadro-chave inteiro, como sem JavaScript */
.sim.pausado * { animation-play-state: paused !important; }
.sim:is(.parado, .sim-reduzido, .sim-leve) .sim-svg * { animation: none !important; }
.sim:is(.sim-reduzido, .sim-leve) .sim-svg * { transition-property: opacity !important; }
.sim.sim-leve [data-em] { transition-duration: 160ms !important; }
.sim:is(.parado, .sim-reduzido, .sim-leve) .so-anima { display: none; }
/* o que só existe DURANTE a animação some na hora em que o quadro sai */
.sim [data-em]:not(.on) .so-anima, .sim .so-anima[data-em]:not(.on) { opacity: 0; transition: none; }
html:not(.js) .sim * { animation: none !important; }
html:not(.js) .sim .so-anima { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sim * { animation: none !important; transition-property: opacity !important; }
  .sim .so-anima { display: none; }
}

/* ---------- as cores da cena (só classe: a CSP proíbe style="").
   O azul e o prata da marca entram no desenho — contorno prata nos aparelhos (atributo
   stroke="url(#…-prata)", que a classe NÃO sobrescreve), luz de leitura e varredura no azul,
   verde e âmbar só no RESULTADO, e sempre como BORDA e realce sobre fundo escuro (revisão 3: o
   painel verde inteiro dominava o quadro). Letra do desenho: 13,5 ou mais. ---------- */
.s-txt { fill: var(--texto); font-size: 15px; font-weight: 500; }
.s-txt-2 { fill: var(--texto-2); font-size: 14px; font-weight: 500; }
.s-txt-p { fill: var(--texto); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.s-txt-forte { fill: var(--texto); font-size: 15px; font-weight: 600; }
.s-txt-menor { font-size: 13.5px; }
.s-txt-maior { font-size: 17px; }
.s-txt-ok { fill: #7FE0BA; font-size: 14px; font-weight: 600; }
.s-txt-atencao { fill: #F3C26C; font-size: 15px; font-weight: 600; }
.s-txt-atencao-p { fill: #F3C26C; font-size: 13.5px; font-weight: 600; }
.s-txt-falha { fill: #F39A90; font-size: 14px; font-weight: 600; }
.s-txt-azul { fill: var(--azul-400); font-size: 14px; font-weight: 600; }
.s-txt-mapa { fill: #CFE3F5; font-size: 13.5px; font-weight: 600; }
.sim-svg :is(.s-hora, .s-hora-m, .s-hora-g), .heroi-quiosque .s-hora { font-family: var(--f-titulo); fill: var(--texto); font-weight: 560; font-variant-numeric: tabular-nums; }
.s-hora { font-size: 24px; } .s-hora-m { font-size: 26px; } .s-hora-g { font-size: 32px; }
.heroi-quiosque .s-hora-heroi { font-size: 34px; }
.s-etiqueta { fill: rgb(10 18 30 / .92); stroke: var(--linha-forte); }
.s-chao { fill: none; stroke: var(--linha-forte); stroke-width: 1.5; }
.s-chao-fio { fill: none; stroke: var(--linha); stroke-width: 1.2; }
.s-parede { fill: #0E1826; stroke: var(--linha); }
.s-porta { fill: #0A121E; stroke: var(--linha-forte); }
.s-macaneta { fill: #8C909A; }
.s-pedestal { fill: none; stroke: #8C909A; stroke-width: 4; stroke-linecap: round; }
.s-aparelho { fill: #10151D; stroke-width: 2.2; }
.s-tela { fill: #0A1424; }
.s-tela-pilula { fill: rgb(5 11 20 / .72); stroke: rgb(255 255 255 / .22); }
.s-leitura-linha { fill: #C9F1FF; }
/* o registro: fundo escuro, borda e realce verdes */
.s-tela-reg { fill: #0B1A24; stroke: var(--ok); stroke-width: 1.6; }
.s-tela-reg-topo { fill: var(--ok); }
.s-check-anel-ok { fill: rgb(61 184 138 / .14); stroke: var(--ok); stroke-width: 2; }
.s-lente { fill: var(--prata); }
.s-check { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-check-claro { fill: none; stroke: #F2FFF9; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-wifi-off { fill: none; stroke: var(--atencao); stroke-width: 2.2; stroke-linecap: round; }
.s-monitor { fill: #0A1424; stroke-width: 1.6; }
.s-monitor-on { fill: #13487E; }
.s-monitor-off { stroke: #5A606C; }
.s-monitor-pe { fill: none; stroke: #8C909A; stroke-width: 2; stroke-linecap: round; }
.s-fio-on { fill: none; stroke: var(--azul-400); stroke-width: 2; stroke-linecap: round; }
.s-fio-brilho { fill: none; stroke: var(--azul-400); stroke-width: 7; stroke-linecap: round; opacity: .22; }
.s-fio-off { fill: none; stroke: #5A606C; stroke-width: 2; stroke-dasharray: 4 5; stroke-linecap: round; }
.s-fio-luz { fill: none; stroke: #C9F1FF; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 18 140; stroke-dashoffset: 18; opacity: 0; }
.s-corte { fill: none; stroke: var(--atencao); stroke-width: 2.4; stroke-linecap: round; }
.s-envelope { fill: #1A61A4; stroke: #CFE6F6; stroke-width: 1.4; }
.s-envelope-aba { fill: none; stroke: #CFE6F6; stroke-width: 1.4; stroke-linejoin: round; }
.s-envelope-selo { fill: var(--atencao); stroke: #070B11; stroke-width: 1.5; }
.s-envelope-n { fill: #1B1204; font-family: var(--f-texto); font-size: 12px; font-weight: 700; }
.s-selo-central { fill: var(--ok); stroke: #070B11; stroke-width: 1.5; }
.s-selo-n { fill: #04251A; font-family: var(--f-texto); font-size: 11px; font-weight: 700; }
.s-faixa-tela { fill: #050B14; opacity: .9; }
.s-papel-escuro { fill: #0C1828; stroke-width: 1.6; }
.s-fundo-rotulo { fill: #1E1708; stroke: var(--atencao); stroke-width: 1.2; }
.escurece { fill: rgb(4 8 14 / .7); }
/* a moldura da captura: guia tracejado, o anel que fecha e o anel verde do "reconhecido" */
.s-oval-guia { fill: none; stroke: rgb(255 255 255 / .38); stroke-width: 1.4; stroke-dasharray: 4 5; }
.s-oval-anel { fill: none; stroke: var(--ciano); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.s-oval-ok { fill: none; stroke: var(--ok); stroke-width: 3.4; opacity: 0; }
.ok-fixo .s-oval-ok { opacity: 1; }
.ok-fixo :is(.s-oval-anel, .s-oval-guia) { display: none; }

/* ---------- GENTE (revisão 3): um personagem só, com pele, cabelo e roupa; cada pessoa num
   figurino (o leitor distingue quem é quem). O vigilante: colete com faixa refletiva e boné. */
.pessoa, .rosto-cam, .mao-cel { --pele: #B98A6E; --pele-escura: #94694F; --roupa: #3A4A63; --calca: #1B2433; --cabelo: #17120F; --sapato: #0B0F15; --colete: #142033; --bone: #13213A; }
.q-carlos, .q-vigia { --pele: #A87458; --pele-escura: #835840; --roupa: #2A4268; --calca: #172338; --colete: #0E1726; }
.q-marina { --pele: #D6AD8E; --pele-escura: #B48868; --roupa: #4F6E92; --calca: #1C2738; --cabelo: #2B1C14; }
.q-rui { --pele: #8C5E45; --pele-escura: #6B4533; --roupa: #2F5A5C; --calca: #2A3242; --cabelo: #0F0C0A; }
.q-patricia { --pele: #C79473; --pele-escura: #A47457; --roupa: #5E4C78; --cabelo: #3A2418; }
.q-igor { --pele: #9A6A50; --pele-escura: #7A513C; --roupa: #34465E; --calca: #1A1F29; --cabelo: #110D0A; }
.q-pub1 { --pele: #7E543D; --pele-escura: #62402E; --roupa: #643F4C; --calca: #2A3140; --cabelo: #120D0B; }
.q-pub2 { --pele: #D2A88A; --pele-escura: #B08667; --roupa: #4C5A70; --calca: #253248; --cabelo: #5A3B22; }
.q-pub3 { --pele: #B07B5C; --pele-escura: #8C5E44; --roupa: #4E7480; --calca: #2B2B36; --cabelo: #1E140F; }
.q-pub4 { --pele: #C99877; --pele-escura: #A6765A; --roupa: #3F6290; --calca: #22272F; --cabelo: #26180F; }
.q-revistado { --pele: #B5835F; --pele-escura: #8E6246; --roupa: #627494; --calca: #26303F; --cabelo: #1A120D; }
.g-pele { fill: var(--pele); }
.g-pele-escura { fill: var(--pele-escura); }
.g-pele-traco { fill: none; stroke: var(--pele); stroke-linecap: round; }
.g-roupa { fill: var(--roupa); stroke: rgb(255 255 255 / .16); stroke-width: .8; stroke-linejoin: round; }
.g-roupa-traco { fill: none; stroke: var(--roupa); stroke-linecap: round; }
.g-calca { fill: var(--calca); }
.g-calca-traco { fill: none; stroke: var(--calca); stroke-linecap: round; }
.g-sapato { fill: var(--sapato); stroke: rgb(255 255 255 / .2); stroke-width: .8; }
.g-cabelo { fill: var(--cabelo); }
.g-dedo { fill: none; stroke: var(--pele-escura); stroke-width: 1.3; stroke-linecap: round; }
.g-olho { fill: #1A1310; }
.g-bone { fill: var(--bone); stroke: rgb(255 255 255 / .22); stroke-width: .8; }
.g-bone-aba { fill: none; stroke: var(--bone); stroke-width: 3.2; stroke-linecap: round; }
.g-bone-aba-f { fill: #0B1424; stroke: rgb(255 255 255 / .18); stroke-width: .6; }
.g-colete { fill: var(--colete); }
.g-faixa { fill: #AEB6C2; }
.g-cinto { fill: none; stroke: #090C11; stroke-width: 2.2; }
.g-gola { fill: none; stroke: rgb(0 0 0 / .35); stroke-width: 1.4; }
.g-mochila { fill: #2B3A52; stroke: rgb(255 255 255 / .14); stroke-width: .8; }
.g-alca { fill: none; stroke: #1E2A3C; stroke-width: 2.6; stroke-linecap: round; }
.lado-tras { opacity: .72; }
.rc-sobrancelha { fill: none; stroke: #2A1C14; stroke-width: 2.4; stroke-linecap: round; }
.rc-nariz { fill: none; stroke: var(--pele-escura); stroke-width: 2; stroke-linecap: round; }
.rc-boca { fill: none; stroke: #6A3E33; stroke-width: 2.2; stroke-linecap: round; }
.s-sombra { fill: rgb(0 0 0 / .45); }
.pessoa :is(.coxa, .canela, .braco, .antebraco, .tronco, .corpo) { transform-box: view-box; transform-origin: 0 0; }
.rosto-cam .rc-olhos { transform-box: fill-box; transform-origin: 50% 50%; }
.rosto-cam .rc-feicoes { transform-box: view-box; transform-origin: 0 0; }
/* o objeto de metal de cada caso: prata, com o halo âmbar em volta */
.s-metal-obj { fill: #C9CED6; stroke: #4A505C; stroke-width: 1; }
.s-metal-brilho { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; opacity: .8; }
.s-metal-aro, .s-metal-chave { fill: none; stroke: #D3D7DE; stroke-linecap: round; }
.s-metal-cel { fill: #0A1424; stroke: #C9CED6; stroke-width: 1.2; }
.s-metal-tela { fill: #2A6FAE; }
.s-bolso { fill: var(--roupa); stroke: rgb(0 0 0 / .4); stroke-width: 1; stroke-linejoin: round; }
.s-halo { fill: rgb(224 163 58 / .12); stroke: var(--atencao); stroke-width: 2; }
.s-pilula rect { stroke-width: 1.2; }
.s-pilula text { font-family: var(--f-texto); font-size: 14px; font-weight: 600; }
.s-pilula-ok rect { fill: rgb(10 30 24 / .9); stroke: var(--ok); } .s-pilula-ok text { fill: #93E7C6; }
.s-pilula-atencao rect { fill: rgb(34 26 10 / .9); stroke: var(--atencao); } .s-pilula-atencao text { fill: #F6CB7C; }
.s-pilula-neutro rect { fill: var(--superficie-2); stroke: rgb(193 192 198 / .6); } .s-pilula-neutro text { fill: var(--texto); }
.s-painel { fill: #0C1828; stroke: var(--linha-forte); }
.s-fio { fill: none; stroke: var(--linha-forte); }
.s-ok-f { fill: var(--ok); } .s-falha-f { fill: var(--falha); } .s-atencao-f { fill: var(--atencao); } .s-espera-f { fill: #5A606C; }
.s-mapa { fill: #12233A; }
.s-mapa-rua { fill: none; stroke: #1C3350; stroke-width: 7; }
.s-cerca { fill: rgb(56 157 211 / .12); stroke: var(--azul-400); stroke-width: 1.6; stroke-dasharray: 4 3; }
.s-cerca-ok { fill: rgb(61 184 138 / .18); stroke: var(--ok); stroke-width: 2.2; }
.s-eu { fill: var(--azul-400); stroke: #fff; stroke-width: 2; }
.s-eu-halo { fill: var(--azul-400); opacity: .28; }
.s-chega { fill: var(--ciano); opacity: 0; }
.s-visor { fill: #05080D; stroke-width: 1.6; }
.s-visor-alerta { fill: none; stroke: var(--atencao); stroke-width: 2; opacity: 0; }
.s-portal { fill: #1A1F28; stroke-width: 1.6; }
.s-portal-base { fill: #6E7380; }
.s-faixa-div { fill: none; stroke: var(--linha-forte); stroke-width: 1.2; }
.s-led { fill: #232A36; }
.s-led-azul { fill: var(--azul-400); }
.s-led-ok { fill: var(--ok); }
.s-zona-acesa { fill: #F3B94C; }
.s-plano { fill: rgb(81 209 246 / .12); opacity: 0; }
.s-varre { fill: #C9F1FF; opacity: 0; }
.s-detector { fill: #20252E; stroke-width: 1.5; }
.s-detector-cabo { fill: #15181E; stroke: #5A606C; stroke-width: 1; }
.s-detector-area { fill: none; stroke: #7F94AD; stroke-width: 1.2; }
.s-detector-luz { fill: #3A4250; }
.s-detector-alerta { fill: var(--atencao); }
.s-onda { fill: none; stroke: var(--atencao); stroke-width: 2.2; stroke-linecap: round; }
.s-marca-cintura { fill: rgb(224 163 58 / .1); stroke: var(--atencao); stroke-width: 2.2; stroke-dasharray: 4 3; }
.s-tempo { fill: none; stroke: var(--linha-forte); stroke-width: 2; stroke-linecap: round; }
.s-tique { fill: none; stroke: var(--texto-3); }
.s-marcador { fill: var(--texto); stroke: var(--azul-400); stroke-width: 2.5; }
.s-marcador-brilho { fill: var(--azul-400); opacity: .25; }
.s-bolha { fill: #163050; }
.s-bolha-aviso { fill: #261E0F; stroke: var(--atencao); stroke-width: 1.2; }
.s-chat-topo { fill: #13243A; }
.s-chat-avatar { fill: #2C5A86; stroke: #9FC7EA; stroke-width: 1; }
.s-vaga { fill: none; stroke: rgb(193 192 198 / .35); stroke-width: 1.6; stroke-dasharray: 3 3; }
.s-vaga-ok { fill: #165A45; stroke: var(--ok); stroke-width: 1.4; }
.s-link { fill: rgb(56 157 211 / .12); stroke: var(--azul-400); }
.s-barra-fundo { fill: #1B2431; } .s-barra-ok { fill: var(--ok); }
.s-assinatura { fill: none; stroke: var(--azul-400); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* a linha de leitura do rosto: desce SÓ dentro do oval (o clipPath está no desenho) */
.leitura, .leitura-cel { opacity: 0; }
@keyframes sim-leitura-oval { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(var(--desce, 120px)); opacity: 0; } }
@keyframes sim-anel { 0%, 18% { stroke-dashoffset: 1; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sim-depois { 0%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sim-antes { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sim-pisca { 0%, 40%, 52%, 72%, 84%, 100% { transform: none; } 46%, 78% { transform: scaleY(.12); } }
@keyframes sim-vira { 0%, 50%, 100% { transform: none; } 62%, 80% { transform: translateX(5px); } }
@keyframes sim-brilho-curto { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- b.1 o ponto pelo rosto ---------- */
/* CUIDADO: ".on" de um ANCESTRAL não serve para disparar animação — o grupo da portaria fica
   "on" do quadro 1 ao 5. Dispare pelo grupo do PRÓPRIO quadro ([data-em="5"].on > …) ou pelo
   data-q da figura com um NOME de animação próprio do quadro (o mesmo nome não reinicia). */
.sim-ponto .fundo { transition: transform 1.9s var(--sim-entra); }
.sim-ponto:is([data-q="1"], [data-q="4"]):not(.parado) .fundo { animation: sim-fundo 1.9s var(--sim-entra) both; }
@keyframes sim-fundo { from { transform: translateX(10px); } to { transform: none; } }
/* quem chega anda de verdade: entra pela porta, a passada gerada (css_anda) nas juntas */
@keyframes sim-chega { from { transform: translateX(-132px); } to { transform: none; } }
@keyframes sim-chega-sai { 0% { transform: translateX(-132px); opacity: 1; } 50% { transform: none; } 66% { transform: none; opacity: 1; } 100% { transform: translateX(80px); opacity: 0; } }
@keyframes sim-vai-embora { 0% { transform: none; opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(90px); opacity: 0; } }
.sim-ponto[data-q="1"] .mv-carlos { animation: sim-chega 1.95s cubic-bezier(.3, .5, .5, 1) both; }
.sim-ponto[data-q="4"] .mv-marina { animation: sim-chega 1.95s cubic-bezier(.3, .5, .5, 1) .2s both; }
.sim-ponto[data-q="4"] .mv-marina-b { animation: sim-chega-sai 3.9s cubic-bezier(.3, .5, .5, 1) .2s both; }
.sim-ponto[data-q="4"] .mv-rui { animation: sim-chega 1.95s cubic-bezier(.3, .5, .5, 1) 3.6s both; }
.sim-ponto[data-q="5"] .mv-sai { animation: sim-vai-embora 1.17s linear both; }
/* q2: a câmera CHEGA PERTO do tablet (e volta quando o quadro sai) */
.sim-ponto .perto { transform-box: view-box; transform-origin: 180px 158px; transform: translate(99px, -23px) scale(.465);
  transition: opacity 260ms var(--sim-sai) 140ms, transform 420ms var(--sim-sai); }
.sim-ponto .perto.on { transform: none; transition: opacity 200ms var(--sim-entra), transform 620ms var(--sim-entra); }
.sim-ponto .perto .leitura { --desce: 128px; }
.sim-ponto .perto.on .leitura { animation: sim-leitura-oval 1.05s ease-in-out .8s 2 both; }
.sim-ponto .perto .s-oval-ok { opacity: 1; }
.sim-ponto .perto.on .s-oval-anel { animation: sim-anel 3.1s linear both; }
.sim-ponto .perto.on .s-oval-ok { animation: sim-depois 3.15s linear both; }
.sim-ponto .perto.on .rc-olhos { animation: sim-pisca 3s linear both; }
.sim-ponto .perto.on .rc-feicoes { animation: sim-vira 3s ease-in-out both; }
.sim-ponto .perto.on .nome-faixa { animation: sim-depois 3.3s linear both; }
/* q3: o registro, com um brilho curto atrás do tablet */
.sim-ponto .brilho-reg { opacity: 0; }
.sim-ponto .brilho-reg.on { animation: sim-brilho-curto 1.3s ease .25s both; }
/* q4: o relógio vira 06:59 → 07:12 na volta do atraso; a tela acompanha quem bateu */
.sim-ponto [data-em="4"].on .relogio-sai { animation: sim-sai 200ms ease 4.9s both; }
.sim-ponto [data-em="4"].on .relogio-entra { animation: sim-entra 200ms ease 4.9s both; }
.sim-ponto [data-em="4"].on [data-volta="a"] > text:not(.s-txt-atencao-p) { animation: sim-entra 250ms ease 2.1s both; }
.sim-ponto [data-em="4"].on .tela-marina-b { animation: sim-entra 250ms ease 2.1s both, sim-sai 200ms ease 3.1s forwards; }
.sim-ponto [data-em="4"].on .tela-rui-b { animation: sim-entra 250ms ease 5.5s both; }
/* q5: os minutos ROLAM (06:59 → 07:15), o fio acende de novo, a central abre ao lado, a batida
   corre, o contador sobe e as linhas da central MUDAM quando ela chega */
.sim-ponto .rola { opacity: 0; transform-box: view-box; }
@keyframes sim-rola { 0% { opacity: 0; transform: translateY(14px); } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } }
.sim-ponto [data-em="5"].on .rola { animation: sim-rola 170ms linear both; }
.sim-ponto [data-em="5"].on .r0 { animation-delay: .15s; } .sim-ponto [data-em="5"].on .r1 { animation-delay: .29s; }
.sim-ponto [data-em="5"].on .r2 { animation-delay: .43s; } .sim-ponto [data-em="5"].on .r3 { animation-delay: .57s; }
.sim-ponto [data-em="5"].on .r4 { animation-delay: .71s; }
.sim-ponto [data-em="5"].on .rola-fim { animation: sim-sobe-rola 220ms var(--sim-entra) .85s both; }
@keyframes sim-sobe-rola { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sim-ponto .acende-fio { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sim-ponto .fio-volta.on .acende-fio { animation: sim-acende-fio 600ms ease-out 1.05s both; }
@keyframes sim-acende-fio { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sim-ponto [data-em="5"].on .tela-sem-sinal { animation: sim-sai 200ms ease 1.05s both; }
.sim-ponto [data-em="5"].on .tela-sinal { animation: sim-entra 260ms ease 1.15s both; }
.sim-ponto [data-em="5"].on .enviando { animation: sim-pulso 700ms ease-in-out 1.4s 3, sim-sai 150ms ease 3.3s forwards; }
.sim-ponto [data-em="5"].on .enviado { animation: sim-depois 3.5s linear both; }
.sim-ponto .painel.on { animation: sim-painel 520ms var(--sim-entra) 1s both; }
@keyframes sim-painel { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.sim-ponto .painel .depois { opacity: 1; }
.sim-ponto .painel .antes { opacity: 0; }
.sim-ponto .painel.on .depois { animation: sim-depois 3.6s linear both; }
.sim-ponto .painel.on .antes { animation: sim-antes 3.6s linear both; }
/* o ENVELOPE: com internet corre na hora (q3); sem ela, espera na boca do fio com o número (q4);
   com o sinal de volta, corre pelo fio com o rastro de luz e o contador da central sobe (q5) */
.sim-ponto .envelope { transform-box: fill-box; transform-origin: 50% 50%; }
.sim-ponto [data-em="3"].on .env-vai { animation: sim-envelope-vai 1.4s cubic-bezier(.45, .05, .35, 1) .9s both; }
.sim-ponto [data-em="5"].on .env-vai { animation: sim-envelope-vai 1.7s cubic-bezier(.45, .05, .35, 1) 1.55s both; }
.sim-ponto [data-em="3"].on > .s-fio-luz { animation: sim-fio-luz 1.1s ease-in-out 1.2s both; }
.sim-ponto [data-em="5"].on > .s-fio-luz { animation: sim-fio-luz 1.3s ease-in-out 1.95s both; }
@keyframes sim-fio-luz { 0% { stroke-dashoffset: 18; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.sim-ponto [data-em="4"].on .env-espera { animation: sim-salta 420ms var(--sim-entra) 2.4s both; }
.sim-ponto [data-em="4"].on .n-1 { animation: sim-sai 150ms ease 5.6s both; }
.sim-ponto [data-em="4"].on .n-2 { animation: sim-salta 360ms var(--sim-entra) 5.7s both; }
.sim-ponto .selo-central { transform-box: fill-box; transform-origin: 50% 50%; }
.sim-ponto .selo-central.on { animation: sim-salta 380ms var(--sim-entra) 2.3s both; }
.sim-ponto [data-em="5"].selo-central.on { animation-delay: 3.25s; }
.sim-ponto [data-em="5"].s-pilula.on { animation-delay: 3.3s; }
.sim-ponto:is(.parado, .sim-reduzido, .sim-leve) :is(.env-vai, .s-fio-luz) { opacity: 0; }
/* q6: o celular — primeiro o rosto (a câmera da frente), depois o mapa com a cerca; a pilha final
   (rosto conferido, dentro do posto, entrada, nome) fica */
@keyframes sim-fase-1 { 0%, 86% { opacity: 1; } 100% { opacity: 0; } }
.sim-ponto [data-em="6"].on .cel-rosto { animation: sim-fase-1 2.75s ease both; }
.sim-ponto .leitura-cel { --desce: 112px; }
.sim-ponto [data-em="6"].on .leitura-cel { animation: sim-leitura-oval 900ms ease-in-out .3s 2 both; }
.sim-ponto [data-em="6"].on .oval-cel .s-oval-anel { animation: sim-anel 2s linear both; }
.sim-ponto [data-em="6"] .oval-cel .s-oval-ok { opacity: 1; }
.sim-ponto [data-em="6"].on .oval-cel .s-oval-ok { animation: sim-depois 2.05s linear both; }
.sim-ponto [data-em="6"].on .rc-patricia .rc-olhos { animation: sim-pisca 2s linear both; }
.sim-ponto [data-em="6"].on .cel-mapa { animation: sim-entra 400ms ease 2.55s both; }
.sim-ponto .eu { transform-box: view-box; }
.sim-ponto [data-em="6"].on .eu { animation: sim-entra-cerca 1.1s cubic-bezier(.3, .6, .4, 1) 2.85s both; }
@keyframes sim-entra-cerca { from { transform: translate(46px, 34px); } to { transform: none; } }
.sim-ponto [data-em="6"].on .s-cerca-ok { animation: sim-depois 3.85s linear both; }
.sim-ponto [data-em="6"].on .cel-pilha .cp1 { animation: sim-sobe 380ms var(--sim-entra) 2s both; }
.sim-ponto [data-em="6"].on .cel-pilha .cp2 { animation: sim-sobe 380ms var(--sim-entra) 3.95s both; }
.sim-ponto [data-em="6"].on .cel-pilha .cp3 { animation: sim-sobe 380ms var(--sim-entra) 4.3s both; }
.sim-ponto [data-em="6"].on .cel-pilha .cp4 { animation: sim-sobe 380ms var(--sim-entra) 4.55s both; }
/* q7: o espelho, as linhas chegando uma a uma, como batidas */
.sim-ponto .linha-espelho { transform-box: view-box; }
.sim-ponto [data-em="7"].on .linha-espelho { animation: sim-chega-linha 420ms var(--sim-entra) both; }
@keyframes sim-chega-linha { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.sim-ponto [data-em="7"].on .s-chega { animation: sim-brilho-curto 700ms ease both; animation-delay: inherit; }
.sim-ponto [data-em="7"] .traco { stroke-dasharray: 264; }
.sim-ponto [data-em="7"].on .traco { animation: sim-risca 600ms var(--sim-entra) both; }
@keyframes sim-risca { from { stroke-dashoffset: 264; } to { stroke-dashoffset: 0; } }
.sim-ponto [data-em="7"].on .e1 { animation-delay: 200ms; }
.sim-ponto [data-em="7"].on .e2 { animation-delay: 550ms; }
.sim-ponto [data-em="7"].on .e3 { animation-delay: 900ms; }
.sim-ponto [data-em="7"].on .e4 { animation-delay: 1250ms; }
.sim-ponto [data-em="7"].on .e5 { animation-delay: 1750ms; }

/* ---------- b.2 o portal por zonas (revisão 3: o MOMENTO físico) ----------
   A pessoa vem de trás e cruza o plano do portal; a luz de leitura sobe pelo corpo; a coluna
   enche de baixo para cima como um medidor e TRAVA na faixa do metal (pulso âmbar); a câmera
   aproxima a faixa (o nome de animação é do QUADRO, gerado — o mesmo nome não reiniciaria);
   só então o rótulo aparece. Sem metal: a pessoa sai pelo vão, vindo para quem olha. */
.sim-portal .atravessa { transform-box: view-box; transform-origin: 180px 270px; }
@keyframes sim-atravessa { 0% { transform: translateY(-40px) scale(.5); opacity: 0; } 8% { opacity: 1; } 58% { transform: none; } 100% { transform: translateY(10px) scale(1.07); opacity: 1; } }
@keyframes sim-atravessa-sai { 0% { transform: translateY(-40px) scale(.5); opacity: 0; } 8% { opacity: 1; } 50% { transform: none; opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(92px) scale(1.95); opacity: 0; } }
.sim-portal .atravessa.on { animation: sim-atravessa 2.7s cubic-bezier(.3, .45, .5, 1) both; }
.sim-portal .atravessa.sai.on { animation: sim-atravessa-sai 3.6s cubic-bezier(.35, .3, .6, 1) both; }
.sim-portal .atravessa .metal { opacity: 1; }
.sim-portal .atravessa.on .metal { animation: sim-entra 200ms ease 2.25s both; }
.sim-portal .atravessa.on .s-halo { animation: sim-entra 200ms ease 2.25s both, sim-pulso 900ms ease-in-out 2.45s infinite; }
.sim-portal .resultado.on .s-plano { animation: sim-plano 1.1s ease 1.05s both; }
@keyframes sim-plano { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
.sim-portal .s-varre { transform-box: view-box; }
.sim-portal .resultado.on .s-varre { animation: sim-varre 800ms cubic-bezier(.4, 0, .6, 1) 1.25s both; }
@keyframes sim-varre { 0% { opacity: 0; transform: none; } 12% { opacity: .95; } 88% { opacity: .95; } 100% { opacity: 0; transform: translateY(-210px); } }
/* a coluna enche (os atrasos de cada segmento saem do gerador) */
.sim-portal .led-sobe { opacity: 0; }
.sim-portal .enche-ok .led-sobe { opacity: 1; }
.sim-portal .resultado.on .led-sobe { animation: sim-led-enche 180ms ease both; }
@keyframes sim-led-enche { from { opacity: 0; } to { opacity: 1; } }
.sim-portal .resultado.on .enche:not(.enche-ok) { animation: sim-esvazia 450ms ease 2.3s both; }
@keyframes sim-esvazia { from { opacity: 1; } to { opacity: .12; } }
.sim-portal .resultado.on .enche-ok { animation: sim-pulso 900ms ease-in-out 2.3s 2; }
/* a TRAVA: a faixa do metal acende âmbar com um pulso */
.sim-portal .trava { transform-box: fill-box; transform-origin: 50% 50%; }
.sim-portal .resultado.on .trava { animation: sim-trava 520ms var(--sim-entra) 2.3s both; }
@keyframes sim-trava { 0% { opacity: 0; transform: scale(1.35, 1); } 45% { opacity: 1; transform: scale(1.12, 1.06); } 100% { opacity: 1; transform: none; } }
.sim-portal .resultado.on .s-zona-brilho { animation: sim-trava 520ms var(--sim-entra) 2.3s both, sim-pulso 1s ease-in-out 2.9s infinite; }
.sim-portal .rotulo-aceso { transform-box: fill-box; }
.sim-portal .resultado.on .rotulo-aceso { animation: sim-sobe 380ms var(--sim-entra) 2.95s both; }
.sim-portal .camera { transform-box: view-box; }
/* o visor: "Passe pelo portal" → "Lendo…" → o resultado (com a borda âmbar piscando) */
.sim-portal .visor-espera { fill: var(--texto-3); }
.sim-portal .visor-lendo { opacity: 0; }
.sim-portal .resultado.on .visor-espera { animation: sim-sai 150ms ease 1.05s both; }
.sim-portal .resultado.on .visor-lendo { animation: sim-entra 150ms ease 1.2s both, sim-sai 120ms ease 2.25s forwards; }
.sim-portal .resultado.on .visor-lendo tspan { animation: sim-pulso 600ms ease-in-out 1.2s infinite; }
.sim-portal .resultado.on .visor-lendo .r2 { animation-delay: 1.4s; }
.sim-portal .resultado.on .visor-lendo .r3 { animation-delay: 1.6s; }
.sim-portal .resultado.on .visor-texto { animation: sim-entra 250ms ease 2.35s both; }
.sim-portal:is([data-q="1"], [data-q="2"], [data-q="3"]) .s-visor-alerta { opacity: 1; }
.sim-portal:not(.parado, .sim-reduzido, .sim-leve):is([data-q="1"], [data-q="2"], [data-q="3"]) .s-visor-alerta { animation: sim-depois 2.4s linear both; }
.sim-portal .resultado:not(.on) :is(.trava, .visor-texto, .rotulo-aceso, .led-sobe, .s-zona-brilho) { opacity: 0; transition: none; }

/* ---------- b.3 o detector de mão: as poses (agachar, inclinar, ombro, cotovelo, detector) e o
   rastro saem do gerador (cinemática inversa); aqui, o aviso e as marcas ---------- */
.sim-mao .rastro { opacity: 0; }
.sim-mao .rastro.on { opacity: 1; }
.sim-mao .ondas :is(.s-onda, .s-detector-alerta) { opacity: 0; }
.sim-mao .ondas.on :is(.s-onda, .s-detector-alerta) { opacity: 1; }
.sim-mao .ondas.on .s-detector-alerta { animation: sim-entra 160ms ease var(--aviso, 0s) both, sim-pulso 800ms ease-in-out calc(var(--aviso, 0s) + .2s) infinite; }
.sim-mao .ondas.on .s-onda { animation: sim-entra 200ms ease var(--aviso, 0s) both; }
.sim-mao .ondas.on .o2 { animation-delay: calc(var(--aviso, 0s) + .12s); }
.sim-mao .ondas.on .o3 { animation-delay: calc(var(--aviso, 0s) + .24s); }
.sim-mao .visitante .metal { opacity: 0; }
.sim-mao:is([data-q="2"], [data-q="3"]) .visitante .metal { opacity: 1; }
.sim-mao[data-q="2"] .visitante .metal { animation: sim-entra 250ms ease 1.2s both; }
.sim-mao[data-q="3"] .s-marca-cintura.on { animation: sim-pulso 1s ease-in-out infinite; }

/* ---------- b.4 a noite ---------- */
.sim-noite .marcador { transition: transform 800ms var(--sim-entra); }
.sim-noite .etiqueta-noite { transition: fill 300ms ease; }
.sim-noite[data-q="5"] .etiqueta-noite { fill: #fff; }
.sim-noite [data-em="5"].on .vira-sai { animation: sim-vira-sai 220ms var(--sim-sai) 900ms both; }
.sim-noite [data-em="5"].on .vira-entra { animation: sim-vira-entra 280ms var(--sim-entra) 1130ms both; }
@keyframes sim-vira-sai { to { opacity: 0; transform: translateY(-12px); } }
@keyframes sim-vira-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* a lista de confirmados enche: 3, 9 e 12 (cada número só entra DEPOIS de o anterior sair) */
.sim-noite .vaga-cheia { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.sim-noite[data-q="2"] .vaga-cheia { opacity: 1; }
.sim-noite[data-q="2"] .vc1 { animation: sim-salta 320ms var(--sim-entra) .5s both; }
.sim-noite[data-q="2"] .vc2 { animation: sim-salta 320ms var(--sim-entra) 1.2s both; }
.sim-noite[data-q="2"] .vc3 { animation: sim-salta 320ms var(--sim-entra) 1.9s both; }
.sim-noite [data-em="2"].on .conta-1 { animation: sim-entra 120ms ease 500ms both, sim-sai 100ms ease 1150ms forwards; }
.sim-noite [data-em="2"].on .conta-2 { animation: sim-entra 120ms ease 1200ms both, sim-sai 100ms ease 1850ms forwards; }
.sim-noite [data-em="2"].on .conta-3 { animation: sim-entra 120ms ease 1900ms both; }
.sim-noite .bolha-13.on { animation: sim-sobe 460ms var(--sim-entra) 2300ms both; }
/* o Igor chega andando; às 04:08, sai */
.sim-noite .mv { transform-box: view-box; }
@keyframes sim-chega-noite { from { transform: translateX(-150px); } to { transform: none; } }
@keyframes sim-sai-noite { 0% { transform: none; opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(-140px); opacity: 0; } }
.sim-noite[data-q="4"] .mv-igor { animation: sim-chega-noite 1.56s cubic-bezier(.3, .5, .5, 1) .15s both; }
.sim-noite[data-q="6"] .mv-sai-noite { animation: sim-sai-noite 1.56s linear .6s both; }
.sim-noite .tela-checkin.on { animation: sim-entra 300ms ease 1.75s both; }
.sim-noite [data-em="7"].on .s-assinatura { animation: sim-traca 1.3s ease 300ms both; }
.sim-noite .s-marcador-brilho { animation: sim-pulso 1.6s ease-in-out infinite; }
.sim-noite:is(.parado, .sim-reduzido, .sim-leve) .s-marcador-brilho { animation: none; }


/* ---------- o herói da principal: um recorte VIVO do ponto. No CELULAR, a vista da câmera do
   tablet (o rosto entra na moldura, o anel fecha, o "no horário" aparece); no COMPUTADOR, a
   pessoa e o tablet de perto. Só CSS (as chaves saem do gerador); toca UMA vez. ---------- */
.heroi-palco {
  position: relative; margin: 0; padding: 14px; border-radius: 14px; border: 1px solid transparent;
  background: var(--palco-fundo) padding-box, var(--borda-metal) border-box;
}
.heroi-quiosque { display: block; width: 100%; height: auto; overflow: visible; }
.heroi-quiosque text { font-family: var(--f-texto); }
.heroi-quiosque .hq { opacity: 0; }
.heroi-quiosque .hq-registro1 { opacity: 1; }
.heroi-quiosque :is(.hq-rosto2, .hq-p2) { opacity: 0; }
.heroi-quiosque :is(.hq-rosto1, .hq-rosto2, .hq-p1, .hq-p2) { transform-box: view-box; }
.heroi-quiosque .leitura { --desce: 140px; }
@media (prefers-reduced-motion: no-preference) {
  .js .heroi-quiosque :is(.hq-leitura1, .hq-leitura2) .leitura { animation: sim-leitura-oval 1.1s ease-in-out infinite; }
  .js .heroi-quiosque-alto .leitura { --desce: 92px; }
}
.heroi-legenda { margin-top: 10px; font-size: var(--t-apoio); color: var(--texto-2); line-height: 1.45; }
.heroi-faixa { margin: 0; }
.heroi-faixa .heroi-palco { padding: 8px; }
@media (min-width: 1024px) {
  .heroi-faixa { display: none; }
  .heroi-visual .heroi-palco { width: min(500px, 100%); margin-inline: auto; }
}

/* o H1 da principal diz o GANHO (revisão 1: "Sistemas para a operação que não para" virou o
   sobretítulo — "qualquer um diz", nas três personas). Frase mais longa, letra um passo menor. */
.heroi .t-h1.h1-ganho { font-size: clamp(2.375rem, 1.25rem + 3.5vw, 4.6rem); line-height: 1.04; }
@media (max-width: 1023.98px) { .heroi-quem { order: 5; } }
.confianca-link { margin-top: 18px; }

/* >>> simulações: GERADO por scripts/site-paginas.py (de site_simulacoes.py) — não editar à mão */
@keyframes anda-coxa { 0% { transform: rotate(-20deg); } 15% { transform: rotate(-11deg); } 35% { transform: rotate(5deg); } 50% { transform: rotate(18deg); } 65% { transform: rotate(9deg); } 82% { transform: rotate(-13deg); } 100% { transform: rotate(-20deg); } }
@keyframes anda-canela { 0% { transform: rotate(3deg); } 15% { transform: rotate(13deg); } 35% { transform: rotate(4deg); } 50% { transform: rotate(9deg); } 65% { transform: rotate(44deg); } 82% { transform: rotate(27deg); } 100% { transform: rotate(3deg); } }
@keyframes anda-braco { 0% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } 100% { transform: rotate(15deg); } }
@keyframes anda-antebraco { 0% { transform: rotate(-8deg); } 50% { transform: rotate(-24deg); } 100% { transform: rotate(-8deg); } }
@keyframes anda-sobe { 0%, 50%, 100% { transform: none; } 22%, 72% { transform: translateY(-1.6px); } }
@keyframes frente-perna { 0%, 50%, 100% { transform: none; } 25% { transform: translateY(-5px) scaleY(.9); } }
@keyframes frente-braco { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.sim-mao .vig-corpo, .sim-mao .vig-tronco, .sim-mao .vig-braco, .sim-mao .vig-antebraco, .sim-mao .vig-detector, .sim-mao .vig-coxa, .sim-mao .vig-canela { transform-box: view-box; transform-origin: 0 0; }
.sim-mao .rastro { transform-box: view-box; transform-origin: 0 97.2px; }
.sim-mao[data-q="1"] .vig-corpo { transform: translateY(0.00px); }
@keyframes vig-corpo-1 { 0% { transform: translateY(51.15px); } 16.1% { transform: translateY(0.00px); } 32.9% { transform: translateY(0.00px); } 49.7% { transform: translateY(0.00px); } 66.5% { transform: translateY(0.00px); } 83.2% { transform: translateY(0.00px); } 100.0% { transform: translateY(0.00px); } }
.sim-mao[data-q="1"] .vig-corpo { animation: vig-corpo-1 3.10s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="1"] .vig-tronco { transform: rotate(4.0deg); }
@keyframes vig-tronco-1 { 0% { transform: rotate(40.0deg); } 16.1% { transform: rotate(18.0deg); } 32.9% { transform: rotate(6.0deg); } 49.7% { transform: rotate(2.0deg); } 66.5% { transform: rotate(0.0deg); } 83.2% { transform: rotate(0.0deg); } 100.0% { transform: rotate(4.0deg); } }
.sim-mao[data-q="1"] .vig-tronco { animation: vig-tronco-1 3.10s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="1"] .vig-braco { transform: rotate(-49.7deg); }
@keyframes vig-braco-1 { 0% { transform: rotate(-35.5deg); } 16.1% { transform: rotate(-142.1deg); } 32.9% { transform: rotate(-109.4deg); } 49.7% { transform: rotate(-86.1deg); } 66.5% { transform: rotate(-70.0deg); } 83.2% { transform: rotate(-60.8deg); } 100.0% { transform: rotate(-49.7deg); } }
.sim-mao[data-q="1"] .vig-braco { animation: vig-braco-1 3.10s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="1"] .vig-antebraco { transform: rotate(-43.9deg); }
@keyframes vig-antebraco-1 { 0% { transform: rotate(-41.8deg); } 16.1% { transform: rotate(-32.8deg); } 32.9% { transform: rotate(-34.6deg); } 49.7% { transform: rotate(-43.4deg); } 66.5% { transform: rotate(-43.0deg); } 83.2% { transform: rotate(-38.3deg); } 100.0% { transform: rotate(-43.9deg); } }
.sim-mao[data-q="1"] .vig-antebraco { animation: vig-antebraco-1 3.10s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="1"] .vig-detector { transform: rotate(-0.5deg); }
@keyframes vig-detector-1 { 0% { transform: rotate(-52.7deg); } 16.1% { transform: rotate(66.9deg); } 32.9% { transform: rotate(47.9deg); } 49.7% { transform: rotate(37.5deg); } 66.5% { transform: rotate(23.0deg); } 83.2% { transform: rotate(9.0deg); } 100.0% { transform: rotate(-0.5deg); } }
.sim-mao[data-q="1"] .vig-detector { animation: vig-detector-1 3.10s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="1"] .vig-coxa { transform: rotate(0.0deg); }
@keyframes vig-coxa-1 { 0% { transform: rotate(-77.0deg); } 16.1% { transform: rotate(0.0deg); } 32.9% { transform: rotate(0.0deg); } 49.7% { transform: rotate(0.0deg); } 66.5% { transform: rotate(0.0deg); } 83.2% { transform: rotate(0.0deg); } 100.0% { transform: rotate(0.0deg); } }
.sim-mao[data-q="1"] .vig-coxa { animation: vig-coxa-1 3.10s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="1"] .vig-canela { transform: rotate(0.0deg); }
@keyframes vig-canela-1 { 0% { transform: rotate(154.0deg); } 16.1% { transform: rotate(0.0deg); } 32.9% { transform: rotate(0.0deg); } 49.7% { transform: rotate(0.0deg); } 66.5% { transform: rotate(0.0deg); } 83.2% { transform: rotate(0.0deg); } 100.0% { transform: rotate(0.0deg); } }
.sim-mao[data-q="1"] .vig-canela { animation: vig-canela-1 3.10s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="1"] .rastro { transform: scaleY(0.405); }
@keyframes rastro-1 { 0% { transform: scaleY(.001); } 16.1% { transform: scaleY(.001); } 16.1% { transform: scaleY(0.045); } 32.9% { transform: scaleY(0.117); } 49.7% { transform: scaleY(0.196); } 66.5% { transform: scaleY(0.274); } 83.2% { transform: scaleY(0.340); } 100.0% { transform: scaleY(0.405); } }
.sim-mao[data-q="1"] .rastro { animation: rastro-1 3.10s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="2"] .vig-corpo { transform: translateY(0.64px); }
@keyframes vig-corpo-2 { 0.0% { transform: translateY(0.00px); } 33.3% { transform: translateY(0.00px); } 66.7% { transform: translateY(0.00px); } 100.0% { transform: translateY(0.64px); } }
.sim-mao[data-q="2"] .vig-corpo { animation: vig-corpo-2 1.30s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="2"] .vig-tronco { transform: rotate(22.0deg); }
@keyframes vig-tronco-2 { 0.0% { transform: rotate(4.0deg); } 33.3% { transform: rotate(8.0deg); } 66.7% { transform: rotate(16.0deg); } 100.0% { transform: rotate(22.0deg); } }
.sim-mao[data-q="2"] .vig-tronco { animation: vig-tronco-2 1.30s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="2"] .vig-braco { transform: rotate(-38.7deg); }
@keyframes vig-braco-2 { 0.0% { transform: rotate(-49.7deg); } 33.3% { transform: rotate(-45.7deg); } 66.7% { transform: rotate(-38.7deg); } 100.0% { transform: rotate(-38.7deg); } }
.sim-mao[data-q="2"] .vig-braco { animation: vig-braco-2 1.30s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="2"] .vig-antebraco { transform: rotate(-36.0deg); }
@keyframes vig-antebraco-2 { 0.0% { transform: rotate(-43.9deg); } 33.3% { transform: rotate(-36.0deg); } 66.7% { transform: rotate(-41.7deg); } 100.0% { transform: rotate(-36.0deg); } }
.sim-mao[data-q="2"] .vig-antebraco { animation: vig-antebraco-2 1.30s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="2"] .vig-detector { transform: rotate(-37.3deg); }
@keyframes vig-detector-2 { 0.0% { transform: rotate(-0.5deg); } 33.3% { transform: rotate(-16.3deg); } 66.7% { transform: rotate(-25.6deg); } 100.0% { transform: rotate(-37.3deg); } }
.sim-mao[data-q="2"] .vig-detector { animation: vig-detector-2 1.30s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="2"] .vig-coxa { transform: rotate(-8.0deg); }
@keyframes vig-coxa-2 { 0.0% { transform: rotate(0.0deg); } 33.3% { transform: rotate(0.0deg); } 66.7% { transform: rotate(0.0deg); } 100.0% { transform: rotate(-8.0deg); } }
.sim-mao[data-q="2"] .vig-coxa { animation: vig-coxa-2 1.30s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="2"] .vig-canela { transform: rotate(16.0deg); }
@keyframes vig-canela-2 { 0.0% { transform: rotate(0.0deg); } 33.3% { transform: rotate(0.0deg); } 66.7% { transform: rotate(0.0deg); } 100.0% { transform: rotate(16.0deg); } }
.sim-mao[data-q="2"] .vig-canela { animation: vig-canela-2 1.30s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="2"] .rastro { transform: scaleY(0.582); }
@keyframes rastro-2 { 0.0% { transform: scaleY(0.405); } 33.3% { transform: scaleY(0.470); } 66.7% { transform: scaleY(0.529); } 100.0% { transform: scaleY(0.582); } }
.sim-mao[data-q="2"] .rastro { animation: rastro-2 1.30s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="3"] .vig-corpo { transform: translateY(51.15px); }
@keyframes vig-corpo-3 { 0.0% { transform: translateY(0.64px); } 20.0% { transform: translateY(8.28px); } 40.0% { transform: translateY(18.52px); } 60.0% { transform: translateY(30.05px); } 80.0% { transform: translateY(42.35px); } 100.0% { transform: translateY(51.15px); } }
.sim-mao[data-q="3"] .vig-corpo { animation: vig-corpo-3 2.60s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="3"] .vig-tronco { transform: rotate(40.0deg); }
@keyframes vig-tronco-3 { 0.0% { transform: rotate(22.0deg); } 20.0% { transform: rotate(30.0deg); } 40.0% { transform: rotate(36.0deg); } 60.0% { transform: rotate(38.0deg); } 80.0% { transform: rotate(38.0deg); } 100.0% { transform: rotate(40.0deg); } }
.sim-mao[data-q="3"] .vig-tronco { animation: vig-tronco-3 2.60s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="3"] .vig-braco { transform: rotate(-35.5deg); }
@keyframes vig-braco-3 { 0.0% { transform: rotate(-38.7deg); } 20.0% { transform: rotate(-38.3deg); } 40.0% { transform: rotate(-35.4deg); } 60.0% { transform: rotate(-35.8deg); } 80.0% { transform: rotate(-35.9deg); } 100.0% { transform: rotate(-35.5deg); } }
.sim-mao[data-q="3"] .vig-braco { animation: vig-braco-3 2.60s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="3"] .vig-antebraco { transform: rotate(-41.8deg); }
@keyframes vig-antebraco-3 { 0.0% { transform: rotate(-36.0deg); } 20.0% { transform: rotate(-34.3deg); } 40.0% { transform: rotate(-41.2deg); } 60.0% { transform: rotate(-40.6deg); } 80.0% { transform: rotate(-40.4deg); } 100.0% { transform: rotate(-41.8deg); } }
.sim-mao[data-q="3"] .vig-antebraco { animation: vig-antebraco-3 2.60s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="3"] .vig-detector { transform: rotate(-52.7deg); }
@keyframes vig-detector-3 { 0.0% { transform: rotate(-37.3deg); } 20.0% { transform: rotate(-47.3deg); } 40.0% { transform: rotate(-49.4deg); } 60.0% { transform: rotate(-51.6deg); } 80.0% { transform: rotate(-51.7deg); } 100.0% { transform: rotate(-52.7deg); } }
.sim-mao[data-q="3"] .vig-detector { animation: vig-detector-3 2.60s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="3"] .vig-coxa { transform: rotate(-77.0deg); }
@keyframes vig-coxa-3 { 0.0% { transform: rotate(-8.0deg); } 20.0% { transform: rotate(-29.0deg); } 40.0% { transform: rotate(-44.0deg); } 60.0% { transform: rotate(-57.0deg); } 80.0% { transform: rotate(-69.0deg); } 100.0% { transform: rotate(-77.0deg); } }
.sim-mao[data-q="3"] .vig-coxa { animation: vig-coxa-3 2.60s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="3"] .vig-canela { transform: rotate(154.0deg); }
@keyframes vig-canela-3 { 0.0% { transform: rotate(16.0deg); } 20.0% { transform: rotate(58.0deg); } 40.0% { transform: rotate(88.0deg); } 60.0% { transform: rotate(114.0deg); } 80.0% { transform: rotate(138.0deg); } 100.0% { transform: rotate(154.0deg); } }
.sim-mao[data-q="3"] .vig-canela { animation: vig-canela-3 2.60s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="3"] .rastro { transform: scaleY(1.000); }
@keyframes rastro-3 { 0.0% { transform: scaleY(0.582); } 20.0% { transform: scaleY(0.680); } 40.0% { transform: scaleY(0.771); } 60.0% { transform: scaleY(0.856); } 80.0% { transform: scaleY(0.935); } 100.0% { transform: scaleY(1.000); } }
.sim-mao[data-q="3"] .rastro { animation: rastro-3 2.60s cubic-bezier(.45,.05,.55,.95) both; }
.sim-mao[data-q="2"] .ondas.on { --aviso: 1.20s; }
.sim-noite[data-q="2"] .marcador { transform: translateX(7.7px); }
.sim-noite[data-q="3"] .marcador { transform: translateX(153.7px); }
.sim-noite[data-q="4"] .marcador { transform: translateX(154.1px); }
.sim-noite[data-q="5"] .marcador { transform: translateX(208px); }
.sim-noite[data-q="6"] .marcador { transform: translateX(303.5px); }
.sim-noite[data-q="7"] .marcador { transform: translateX(304.3px); }
.sim-noite[data-q="4"] .mv-igor .corpo { animation: anda-sobe 0.390s linear 0.150s 4; }
.sim-noite[data-q="4"] .mv-igor .coxa-f { animation: anda-coxa 0.780s linear 0.150s 2, assenta-coxa--200 280ms ease-out 1.710s forwards; }
.sim-noite[data-q="4"] .mv-igor .canela-f { animation: anda-canela 0.780s linear 0.150s 2, assenta-canela-30 280ms ease-out 1.710s forwards; }
.sim-noite[data-q="4"] .mv-igor .braco-f { animation: anda-braco 0.780s linear -0.240s 2.5, assenta-braco--150 280ms ease-out 1.710s forwards; }
.sim-noite[data-q="4"] .mv-igor .antebraco-f { animation: anda-antebraco 0.780s linear -0.240s 2.5, assenta-antebraco--240 280ms ease-out 1.710s forwards; }
.sim-noite[data-q="4"] .mv-igor .coxa-t { animation: anda-coxa 0.780s linear -0.240s 2.5, assenta-coxa-180 280ms ease-out 1.710s forwards; }
.sim-noite[data-q="4"] .mv-igor .canela-t { animation: anda-canela 0.780s linear -0.240s 2.5, assenta-canela-90 280ms ease-out 1.710s forwards; }
.sim-noite[data-q="4"] .mv-igor .braco-t { animation: anda-braco 0.780s linear 0.150s 2, assenta-braco-150 280ms ease-out 1.710s forwards; }
.sim-noite[data-q="4"] .mv-igor .antebraco-t { animation: anda-antebraco 0.780s linear 0.150s 2, assenta-antebraco--80 280ms ease-out 1.710s forwards; }
.sim-noite[data-q="6"] .mv-sai-noite .corpo { animation: anda-sobe 0.390s linear 0.600s 4; }
.sim-noite[data-q="6"] .mv-sai-noite .coxa-f { animation: anda-coxa 0.780s linear 0.600s 2, assenta-coxa--200 280ms ease-out 2.160s forwards; }
.sim-noite[data-q="6"] .mv-sai-noite .canela-f { animation: anda-canela 0.780s linear 0.600s 2, assenta-canela-30 280ms ease-out 2.160s forwards; }
.sim-noite[data-q="6"] .mv-sai-noite .braco-f { animation: anda-braco 0.780s linear 0.210s 2.5, assenta-braco--150 280ms ease-out 2.160s forwards; }
.sim-noite[data-q="6"] .mv-sai-noite .antebraco-f { animation: anda-antebraco 0.780s linear 0.210s 2.5, assenta-antebraco--240 280ms ease-out 2.160s forwards; }
.sim-noite[data-q="6"] .mv-sai-noite .coxa-t { animation: anda-coxa 0.780s linear 0.210s 2.5, assenta-coxa-180 280ms ease-out 2.160s forwards; }
.sim-noite[data-q="6"] .mv-sai-noite .canela-t { animation: anda-canela 0.780s linear 0.210s 2.5, assenta-canela-90 280ms ease-out 2.160s forwards; }
.sim-noite[data-q="6"] .mv-sai-noite .braco-t { animation: anda-braco 0.780s linear 0.600s 2, assenta-braco-150 280ms ease-out 2.160s forwards; }
.sim-noite[data-q="6"] .mv-sai-noite .antebraco-t { animation: anda-antebraco 0.780s linear 0.600s 2, assenta-antebraco--80 280ms ease-out 2.160s forwards; }
@keyframes sim-envelope-vai { 0% { transform: none; opacity: 1; } 22% { transform: translate(23px, 4.4px); opacity: 1; } 32% { transform: translate(24.2px, 1.4px) scale(1.00); opacity: 1; } 42% { transform: translate(27.5px, -1px) scale(1.00); opacity: 1; } 51% { transform: translate(32.1px, -2.8px) scale(1.00); opacity: 1; } 61% { transform: translate(37.4px, -4.4px) scale(1.00); opacity: 1; } 71% { transform: translate(42.7px, -6.1px) scale(1.00); opacity: 1; } 80% { transform: translate(47.3px, -7.9px) scale(0.92); opacity: 1; } 90% { transform: translate(50.6px, -10.3px) scale(0.74); opacity: 0.83; } 100% { transform: translate(51.9px, -13.3px) scale(0.55); opacity: 0.0; } }
.sim-ponto[data-q="1"] .mv-carlos .corpo { animation: anda-sobe 0.390s linear 0.000s 5; }
.sim-ponto[data-q="1"] .mv-carlos .coxa-f { animation: anda-coxa 0.780s linear 0.000s 2.5, assenta-coxa-180 280ms ease-out 1.950s forwards; }
.sim-ponto[data-q="1"] .mv-carlos .canela-f { animation: anda-canela 0.780s linear 0.000s 2.5, assenta-canela-90 280ms ease-out 1.950s forwards; }
.sim-ponto[data-q="1"] .mv-carlos .braco-f { animation: anda-braco 0.780s linear -0.390s 3, assenta-braco-150 280ms ease-out 1.950s forwards; }
.sim-ponto[data-q="1"] .mv-carlos .antebraco-f { animation: anda-antebraco 0.780s linear -0.390s 3, assenta-antebraco--80 280ms ease-out 1.950s forwards; }
.sim-ponto[data-q="1"] .mv-carlos .coxa-t { animation: anda-coxa 0.780s linear -0.390s 3, assenta-coxa--200 280ms ease-out 1.950s forwards; }
.sim-ponto[data-q="1"] .mv-carlos .canela-t { animation: anda-canela 0.780s linear -0.390s 3, assenta-canela-30 280ms ease-out 1.950s forwards; }
.sim-ponto[data-q="1"] .mv-carlos .braco-t { animation: anda-braco 0.780s linear 0.000s 2.5, assenta-braco--150 280ms ease-out 1.950s forwards; }
.sim-ponto[data-q="1"] .mv-carlos .antebraco-t { animation: anda-antebraco 0.780s linear 0.000s 2.5, assenta-antebraco--240 280ms ease-out 1.950s forwards; }
.sim-ponto[data-q="4"] .mv-marina .corpo { animation: anda-sobe 0.390s linear 0.200s 5; }
.sim-ponto[data-q="4"] .mv-marina .coxa-f { animation: anda-coxa 0.780s linear 0.200s 2.5, assenta-coxa-180 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina .canela-f { animation: anda-canela 0.780s linear 0.200s 2.5, assenta-canela-90 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina .braco-f { animation: anda-braco 0.780s linear -0.190s 3, assenta-braco-150 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina .antebraco-f { animation: anda-antebraco 0.780s linear -0.190s 3, assenta-antebraco--80 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina .coxa-t { animation: anda-coxa 0.780s linear -0.190s 3, assenta-coxa--200 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina .canela-t { animation: anda-canela 0.780s linear -0.190s 3, assenta-canela-30 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina .braco-t { animation: anda-braco 0.780s linear 0.200s 2.5, assenta-braco--150 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina .antebraco-t { animation: anda-antebraco 0.780s linear 0.200s 2.5, assenta-antebraco--240 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina-b .corpo { animation: anda-sobe 0.390s linear 0.200s 5; }
.sim-ponto[data-q="4"] .mv-marina-b .coxa-f { animation: anda-coxa 0.780s linear 0.200s 2.5, assenta-coxa-180 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina-b .canela-f { animation: anda-canela 0.780s linear 0.200s 2.5, assenta-canela-90 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina-b .braco-f { animation: anda-braco 0.780s linear -0.190s 3, assenta-braco-150 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina-b .antebraco-f { animation: anda-antebraco 0.780s linear -0.190s 3, assenta-antebraco--80 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina-b .coxa-t { animation: anda-coxa 0.780s linear -0.190s 3, assenta-coxa--200 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina-b .canela-t { animation: anda-canela 0.780s linear -0.190s 3, assenta-canela-30 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina-b .braco-t { animation: anda-braco 0.780s linear 0.200s 2.5, assenta-braco--150 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-marina-b .antebraco-t { animation: anda-antebraco 0.780s linear 0.200s 2.5, assenta-antebraco--240 280ms ease-out 2.150s forwards; }
.sim-ponto[data-q="4"] .mv-rui .corpo { animation: anda-sobe 0.390s linear 3.600s 5; }
.sim-ponto[data-q="4"] .mv-rui .coxa-f { animation: anda-coxa 0.780s linear 3.600s 2.5, assenta-coxa-180 280ms ease-out 5.550s forwards; }
.sim-ponto[data-q="4"] .mv-rui .canela-f { animation: anda-canela 0.780s linear 3.600s 2.5, assenta-canela-90 280ms ease-out 5.550s forwards; }
.sim-ponto[data-q="4"] .mv-rui .braco-f { animation: anda-braco 0.780s linear 3.210s 3, assenta-braco-150 280ms ease-out 5.550s forwards; }
.sim-ponto[data-q="4"] .mv-rui .antebraco-f { animation: anda-antebraco 0.780s linear 3.210s 3, assenta-antebraco--80 280ms ease-out 5.550s forwards; }
.sim-ponto[data-q="4"] .mv-rui .coxa-t { animation: anda-coxa 0.780s linear 3.210s 3, assenta-coxa--200 280ms ease-out 5.550s forwards; }
.sim-ponto[data-q="4"] .mv-rui .canela-t { animation: anda-canela 0.780s linear 3.210s 3, assenta-canela-30 280ms ease-out 5.550s forwards; }
.sim-ponto[data-q="4"] .mv-rui .braco-t { animation: anda-braco 0.780s linear 3.600s 2.5, assenta-braco--150 280ms ease-out 5.550s forwards; }
.sim-ponto[data-q="4"] .mv-rui .antebraco-t { animation: anda-antebraco 0.780s linear 3.600s 2.5, assenta-antebraco--240 280ms ease-out 5.550s forwards; }
.sim-ponto[data-q="5"] .mv-sai .corpo { animation: anda-sobe 0.390s linear 0.000s 3; }
.sim-ponto[data-q="5"] .mv-sai .coxa-f { animation: anda-coxa 0.780s linear 0.000s 1.5, assenta-coxa-180 280ms ease-out 1.170s forwards; }
.sim-ponto[data-q="5"] .mv-sai .canela-f { animation: anda-canela 0.780s linear 0.000s 1.5, assenta-canela-90 280ms ease-out 1.170s forwards; }
.sim-ponto[data-q="5"] .mv-sai .braco-f { animation: anda-braco 0.780s linear -0.390s 2, assenta-braco-150 280ms ease-out 1.170s forwards; }
.sim-ponto[data-q="5"] .mv-sai .antebraco-f { animation: anda-antebraco 0.780s linear -0.390s 2, assenta-antebraco--80 280ms ease-out 1.170s forwards; }
.sim-ponto[data-q="5"] .mv-sai .coxa-t { animation: anda-coxa 0.780s linear -0.390s 2, assenta-coxa--200 280ms ease-out 1.170s forwards; }
.sim-ponto[data-q="5"] .mv-sai .canela-t { animation: anda-canela 0.780s linear -0.390s 2, assenta-canela-30 280ms ease-out 1.170s forwards; }
.sim-ponto[data-q="5"] .mv-sai .braco-t { animation: anda-braco 0.780s linear 0.000s 1.5, assenta-braco--150 280ms ease-out 1.170s forwards; }
.sim-ponto[data-q="5"] .mv-sai .antebraco-t { animation: anda-antebraco 0.780s linear 0.000s 1.5, assenta-antebraco--240 280ms ease-out 1.170s forwards; }
.sim-portal .resultado.on .l0 { animation-delay: 1.450s; }
.sim-portal .resultado.on .l1 { animation-delay: 1.525s; }
.sim-portal .resultado.on .l2 { animation-delay: 1.600s; }
.sim-portal .resultado.on .l3 { animation-delay: 1.675s; }
.sim-portal .resultado.on .l4 { animation-delay: 1.750s; }
.sim-portal .resultado.on .l5 { animation-delay: 1.825s; }
.sim-portal .resultado.on .l6 { animation-delay: 1.900s; }
.sim-portal .resultado.on .l7 { animation-delay: 1.975s; }
.sim-portal .resultado.on .l8 { animation-delay: 2.050s; }
.sim-portal .resultado.on .l9 { animation-delay: 2.125s; }
@keyframes sim-zoom-1 { from { transform: none; } to { transform: scale(1.14); } }
.sim-portal[data-q="1"] .camera { transform-origin: 180px 252px; animation: sim-zoom-1 900ms cubic-bezier(.3, .6, .3, 1) 2.45s both; }
@keyframes sim-zoom-2 { from { transform: none; } to { transform: scale(1.14); } }
.sim-portal[data-q="2"] .camera { transform-origin: 180px 180px; animation: sim-zoom-2 900ms cubic-bezier(.3, .6, .3, 1) 2.45s both; }
@keyframes sim-zoom-3 { from { transform: none; } to { transform: scale(1.14); } }
.sim-portal[data-q="3"] .camera { transform-origin: 180px 144px; animation: sim-zoom-3 900ms cubic-bezier(.3, .6, .3, 1) 2.45s both; }
@keyframes assenta-antebraco--240 { from { transform: rotate(-24.0deg); } to { transform: none; } }
@keyframes assenta-antebraco--80 { from { transform: rotate(-8.0deg); } to { transform: none; } }
@keyframes assenta-braco--150 { from { transform: rotate(-15.0deg); } to { transform: none; } }
@keyframes assenta-braco-150 { from { transform: rotate(15.0deg); } to { transform: none; } }
@keyframes assenta-canela-30 { from { transform: rotate(3.0deg); } to { transform: none; } }
@keyframes assenta-canela-90 { from { transform: rotate(9.0deg); } to { transform: none; } }
@keyframes assenta-coxa--200 { from { transform: rotate(-20.0deg); } to { transform: none; } }
@keyframes assenta-coxa-180 { from { transform: rotate(18.0deg); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
@keyframes hq-faixa-espera1 { 0% { opacity: 1; } 6.00% { opacity: 1; } 7.67%, 100% { opacity: 0; } }
.js .heroi-quiosque-faixa .hq-espera1 { animation: hq-faixa-espera1 15s linear 0.40s 1 both; }
@keyframes hq-faixa-leitura1 { 0%, 6.67% { opacity: 0; } 8.67% { opacity: 1; } 24.67% { opacity: 1; } 26.33%, 100% { opacity: 0; } }
.js .heroi-quiosque-faixa .hq-leitura1 { animation: hq-faixa-leitura1 15s linear 0.40s 1 both; }
@keyframes hq-faixa-registro1 { 0%, 25.33% { opacity: 0; } 27.33% { opacity: 1; } 50.00% { opacity: 1; } 51.67%, 100% { opacity: 0; } }
.js .heroi-quiosque-faixa .hq-registro1 { animation: hq-faixa-registro1 15s linear 0.40s 1 both; }
@keyframes hq-faixa-rosto1 { 0%, 0.00% { transform: translate(0, 40px); opacity: 0; } 4.67% { transform: none; opacity: 1; } 48.00% { transform: none; opacity: 1; } 50.67%, 100% { transform: translate(-50px, 0); opacity: 0; } }
.js .heroi-quiosque-faixa .hq-rosto1 { animation: hq-faixa-rosto1 15s cubic-bezier(.2,.7,.2,1) 0.40s 1 both; }
@keyframes hq-faixa-anel1 { 0%, 7.33% { stroke-dashoffset: 1; opacity: 1; } 24.00% { stroke-dashoffset: 0; opacity: 1; } 26.00%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.js .heroi-quiosque-faixa .hq-oval1 .s-oval-anel { animation: hq-faixa-anel1 15s linear 0.40s 1 both; }
@keyframes hq-faixa-pisca1 { 0%, 15.07% { transform: none; } 15.67% { transform: scaleY(.12); } 16.40%, 100% { transform: none; } }
.js .heroi-quiosque-faixa .hq-rosto1 .rc-olhos { animation: hq-faixa-pisca1 15s linear 0.40s 1 both; }
@keyframes hq-faixa-espera2 { 0%, 50.67% { opacity: 0; } 52.67% { opacity: 1; } 55.33% { opacity: 1; } 57.00%, 100% { opacity: 0; } }
.js .heroi-quiosque-faixa .hq-espera2 { animation: hq-faixa-espera2 15s linear 0.40s 1 both; }
@keyframes hq-faixa-leitura2 { 0%, 56.00% { opacity: 0; } 58.00% { opacity: 1; } 72.67% { opacity: 1; } 74.33%, 100% { opacity: 0; } }
.js .heroi-quiosque-faixa .hq-leitura2 { animation: hq-faixa-leitura2 15s linear 0.40s 1 both; }
@keyframes hq-faixa-registro2 { 0%, 73.33% { opacity: 0; } 75.33% { opacity: 1; } 100% { opacity: 1; } }
.js .heroi-quiosque-faixa .hq-registro2 { animation: hq-faixa-registro2 15s linear 0.40s 1 both; }
@keyframes hq-faixa-rosto2 { 0%, 50.67% { transform: translate(0, 40px); opacity: 0; } 55.33% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
.js .heroi-quiosque-faixa .hq-rosto2 { animation: hq-faixa-rosto2 15s cubic-bezier(.2,.7,.2,1) 0.40s 1 both; }
@keyframes hq-faixa-anel2 { 0%, 56.67% { stroke-dashoffset: 1; opacity: 1; } 72.00% { stroke-dashoffset: 0; opacity: 1; } 74.00%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.js .heroi-quiosque-faixa .hq-oval2 .s-oval-anel { animation: hq-faixa-anel2 15s linear 0.40s 1 both; }
@keyframes hq-faixa-pisca2 { 0%, 63.80% { transform: none; } 64.40% { transform: scaleY(.12); } 65.13%, 100% { transform: none; } }
.js .heroi-quiosque-faixa .hq-rosto2 .rc-olhos { animation: hq-faixa-pisca2 15s linear 0.40s 1 both; }
@keyframes hq-alto-espera1 { 0% { opacity: 1; } 6.00% { opacity: 1; } 7.67%, 100% { opacity: 0; } }
.js .heroi-quiosque-alto .hq-espera1 { animation: hq-alto-espera1 15s linear 2.40s 1 both; }
@keyframes hq-alto-leitura1 { 0%, 6.67% { opacity: 0; } 8.67% { opacity: 1; } 24.67% { opacity: 1; } 26.33%, 100% { opacity: 0; } }
.js .heroi-quiosque-alto .hq-leitura1 { animation: hq-alto-leitura1 15s linear 2.40s 1 both; }
@keyframes hq-alto-registro1 { 0%, 25.33% { opacity: 0; } 27.33% { opacity: 1; } 50.00% { opacity: 1; } 51.67%, 100% { opacity: 0; } }
.js .heroi-quiosque-alto .hq-registro1 { animation: hq-alto-registro1 15s linear 2.40s 1 both; }
@keyframes hq-alto-rosto1 { 0%, 0.00% { transform: translate(0, 40px); opacity: 0; } 4.67% { transform: none; opacity: 1; } 48.00% { transform: none; opacity: 1; } 50.67%, 100% { transform: translate(-50px, 0); opacity: 0; } }
.js .heroi-quiosque-alto .hq-rosto1 { animation: hq-alto-rosto1 15s cubic-bezier(.2,.7,.2,1) 2.40s 1 both; }
@keyframes hq-alto-anel1 { 0%, 7.33% { stroke-dashoffset: 1; opacity: 1; } 24.00% { stroke-dashoffset: 0; opacity: 1; } 26.00%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.js .heroi-quiosque-alto .hq-oval1 .s-oval-anel { animation: hq-alto-anel1 15s linear 2.40s 1 both; }
@keyframes hq-alto-pisca1 { 0%, 15.07% { transform: none; } 15.67% { transform: scaleY(.12); } 16.40%, 100% { transform: none; } }
.js .heroi-quiosque-alto .hq-rosto1 .rc-olhos { animation: hq-alto-pisca1 15s linear 2.40s 1 both; }
@keyframes hq-alto-espera2 { 0%, 50.67% { opacity: 0; } 52.67% { opacity: 1; } 55.33% { opacity: 1; } 57.00%, 100% { opacity: 0; } }
.js .heroi-quiosque-alto .hq-espera2 { animation: hq-alto-espera2 15s linear 2.40s 1 both; }
@keyframes hq-alto-leitura2 { 0%, 56.00% { opacity: 0; } 58.00% { opacity: 1; } 72.67% { opacity: 1; } 74.33%, 100% { opacity: 0; } }
.js .heroi-quiosque-alto .hq-leitura2 { animation: hq-alto-leitura2 15s linear 2.40s 1 both; }
@keyframes hq-alto-registro2 { 0%, 73.33% { opacity: 0; } 75.33% { opacity: 1; } 100% { opacity: 1; } }
.js .heroi-quiosque-alto .hq-registro2 { animation: hq-alto-registro2 15s linear 2.40s 1 both; }
@keyframes hq-alto-rosto2 { 0%, 50.67% { transform: translate(0, 40px); opacity: 0; } 55.33% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
.js .heroi-quiosque-alto .hq-rosto2 { animation: hq-alto-rosto2 15s cubic-bezier(.2,.7,.2,1) 2.40s 1 both; }
@keyframes hq-alto-anel2 { 0%, 56.67% { stroke-dashoffset: 1; opacity: 1; } 72.00% { stroke-dashoffset: 0; opacity: 1; } 74.00%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.js .heroi-quiosque-alto .hq-oval2 .s-oval-anel { animation: hq-alto-anel2 15s linear 2.40s 1 both; }
@keyframes hq-alto-pisca2 { 0%, 63.80% { transform: none; } 64.40% { transform: scaleY(.12); } 65.13%, 100% { transform: none; } }
.js .heroi-quiosque-alto .hq-rosto2 .rc-olhos { animation: hq-alto-pisca2 15s linear 2.40s 1 both; }
.js .heroi-quiosque-alto .hq-p1 .corpo { animation: anda-sobe 0.390s linear 0.400s 4; }
.js .heroi-quiosque-alto .hq-p1 .coxa-f { animation: anda-coxa 0.780s linear 0.400s 2, assenta-coxa--200 280ms ease-out 1.960s forwards; }
.js .heroi-quiosque-alto .hq-p1 .canela-f { animation: anda-canela 0.780s linear 0.400s 2, assenta-canela-30 280ms ease-out 1.960s forwards; }
.js .heroi-quiosque-alto .hq-p1 .braco-f { animation: anda-braco 0.780s linear 0.010s 2.5, assenta-braco--150 280ms ease-out 1.960s forwards; }
.js .heroi-quiosque-alto .hq-p1 .antebraco-f { animation: anda-antebraco 0.780s linear 0.010s 2.5, assenta-antebraco--240 280ms ease-out 1.960s forwards; }
.js .heroi-quiosque-alto .hq-p1 .coxa-t { animation: anda-coxa 0.780s linear 0.010s 2.5, assenta-coxa-180 280ms ease-out 1.960s forwards; }
.js .heroi-quiosque-alto .hq-p1 .canela-t { animation: anda-canela 0.780s linear 0.010s 2.5, assenta-canela-90 280ms ease-out 1.960s forwards; }
.js .heroi-quiosque-alto .hq-p1 .braco-t { animation: anda-braco 0.780s linear 0.400s 2, assenta-braco-150 280ms ease-out 1.960s forwards; }
.js .heroi-quiosque-alto .hq-p1 .antebraco-t { animation: anda-antebraco 0.780s linear 0.400s 2, assenta-antebraco--80 280ms ease-out 1.960s forwards; }
.js .heroi-quiosque-alto .hq-p2 .corpo { animation: anda-sobe 0.390s linear 8.600s 4; }
.js .heroi-quiosque-alto .hq-p2 .coxa-f { animation: anda-coxa 0.780s linear 8.600s 2, assenta-coxa--200 280ms ease-out 10.160s forwards; }
.js .heroi-quiosque-alto .hq-p2 .canela-f { animation: anda-canela 0.780s linear 8.600s 2, assenta-canela-30 280ms ease-out 10.160s forwards; }
.js .heroi-quiosque-alto .hq-p2 .braco-f { animation: anda-braco 0.780s linear 8.210s 2.5, assenta-braco--150 280ms ease-out 10.160s forwards; }
.js .heroi-quiosque-alto .hq-p2 .antebraco-f { animation: anda-antebraco 0.780s linear 8.210s 2.5, assenta-antebraco--240 280ms ease-out 10.160s forwards; }
.js .heroi-quiosque-alto .hq-p2 .coxa-t { animation: anda-coxa 0.780s linear 8.210s 2.5, assenta-coxa-180 280ms ease-out 10.160s forwards; }
.js .heroi-quiosque-alto .hq-p2 .canela-t { animation: anda-canela 0.780s linear 8.210s 2.5, assenta-canela-90 280ms ease-out 10.160s forwards; }
.js .heroi-quiosque-alto .hq-p2 .braco-t { animation: anda-braco 0.780s linear 8.600s 2, assenta-braco-150 280ms ease-out 10.160s forwards; }
.js .heroi-quiosque-alto .hq-p2 .antebraco-t { animation: anda-antebraco 0.780s linear 8.600s 2, assenta-antebraco--80 280ms ease-out 10.160s forwards; }
@keyframes hq-alto-p1 { 0%, 0.00% { transform: translateX(-120px); opacity: 0; } 1.67% { opacity: 1; } 10.40% { transform: none; opacity: 1; } 49.33% { transform: none; opacity: 1; } 53.33%, 100% { transform: translateX(-40px); opacity: 0; } }
.js .heroi-quiosque-alto .hq-p1 { animation: hq-alto-p1 15s cubic-bezier(.3,.6,.4,1) .4s 1 both; }
@keyframes hq-alto-p2 { 0%, 54.67% { transform: translateX(-120px); opacity: 0; } 56.33% { opacity: 1; } 65.07% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
.js .heroi-quiosque-alto .hq-p2 { animation: hq-alto-p2 15s cubic-bezier(.3,.6,.4,1) .4s 1 both; }
}

/* <<< simulações */

/* o palco que viaja entre páginas (c.8): a cena do ponto da principal vira a do topo de
   /operacao, e a da noite vira a de /eventos (as transições de documento já estão ligadas) */
.vt-ponto .sim-palco { view-transition-name: sim-ponto; }
.vt-noite .sim-palco { view-transition-name: sim-noite; }

/* ---------- a troca de tela (v5): em laço enquanto está na tela; com movimento reduzido,
   empilhada e com "Ver acontecer" ---------- */
.troca .troca-repetir { display: none !important; }
.js .troca.troca-reduzida .troca-repetir { display: inline-flex !important; visibility: visible; }

/* ---------- a linha do dia no celular (c.4): um trilho à esquerda das cinco cenas, que
   enche conforme se rola, e a hora de cada cena acende quando ela aparece ---------- */
@media (max-width: 1023.98px) {
  .operacao-palco .cenas { position: relative; padding-left: 26px; }
  .operacao-palco .cenas::before, .operacao-palco .cenas::after { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px; }
  .operacao-palco .cenas::before { background: var(--linha-forte); }
  .operacao-palco .cenas::after { background: linear-gradient(180deg, var(--azul-400), var(--prata)); transform-origin: top; transform: scaleY(var(--trilho, 0)); transition: transform 500ms var(--curva); }
  .operacao-palco .cena .hora-regua { position: relative; }
  .operacao-palco .cena .hora-regua::before {
    content: ""; position: absolute; left: -26px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
    background: var(--fundo); border: 2px solid var(--linha-forte); transition: background-color 300ms ease, border-color 300ms ease;
  }
  .operacao-palco .cena.vista .hora-regua::before { background: var(--azul-400); border-color: var(--azul-400); }
}
@supports (animation-timeline: view()) {
  @media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    .operacao-palco .cenas::after { transition: none; animation: sim-trilho linear both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
  }
}
@keyframes sim-trilho { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .operacao-palco .cenas::after { transform: scaleY(1); } }

/* ---------- Dia 1º no celular: UMA tela de amostra (a do espelho); os outros três ficam
   com o título, o texto e "Ver a tela inteira" ---------- */
@media (max-width: 767.98px) {
  .folha:not(:first-child) .trecho { display: none; }
  .folha { gap: 10px; }
}

/* ---------- a ponte no celular: uma linha só ---------- */
.ponte-cel { display: none; }
@media (max-width: 767.98px) {
  .ponte { padding-block: 32px; }
  .ponte-faixa { display: none; }
  .ponte-texto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .ponte-cel { display: block; font-family: var(--f-titulo); font-weight: 560; font-size: 1.25rem; line-height: 1.3; max-width: 24ch; margin-inline: auto; color: var(--texto); }
}

/* ---------- a tecnologia na principal: uma linha ---------- */
.motor-linha .conteudo { display: grid; gap: 8px; justify-items: start; }
.motor-linha-texto { font-family: var(--f-titulo); font-weight: 520; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.3; max-width: 46ch; color: var(--texto); }

/* ---------- locação (principal) ---------- */
.locacao .locacao-sim { min-width: 0; }
@media (min-width: 1024px) {
  .locacao .locacao-texto { grid-column: 1 / 6; }
  .locacao .locacao-sim { grid-column: 6 / 13; }
  /* na principal a cena divide a largura com o texto: palco em cima, passos embaixo, para o
     portal não ficar espremido numa coluna de ~360 px */
  .locacao .locacao-sim .sim { grid-template-columns: minmax(0, 1fr); grid-template-areas: "palco" "texto" "legenda"; }
  /* revisão 3 (crítica de arte): esticado, o palco media 979 px de altura a 1440×900 — mais que a
     janela. A largura sai da altura disponível, e a cena inteira (controles, portal, passo e
     legenda) cabe numa tela */
  .locacao .locacao-sim .sim-palco { justify-self: center; max-width: min(520px, calc((min(64svh, 590px) - 130px) * 1.2 + 22px)); }
  .locacao .locacao-sim :is(.sim-texto, .sim-legenda) { width: 100%; max-width: min(520px, calc((min(64svh, 590px) - 130px) * 1.2 + 22px)); justify-self: center; }
}
/* /locacao (revisão 1): o portal é o pedido central — sai do herói e ganha a largura do conteúdo */
.pagina-topo.sem-visual .pagina-topo-texto { grid-column: 1 / -1; max-width: 46rem; }
/* revisão 1: a cena do topo de /operacao e /eventos desce para a largura do conteúdo (no herói,
   dividindo 7 colunas com a lista de passos, o palco ficava com ~300 px) */
.porta-locacao { margin-top: 8px; }
.na-mesma-porta .conteudo { display: grid; gap: 10px; justify-items: start; }
.na-mesma-porta p { max-width: 60ch; }

/* ---------- /operacao: para quem cuida do RH e do DP ---------- */
.lista-rh { list-style: none; display: grid; gap: 0; }
.lista-rh li { position: relative; padding: 12px 0 12px 30px; background: var(--fio-metal) top / 100% 1px no-repeat; color: var(--texto); }
.lista-rh li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
@media (min-width: 1024px) { .lista-rh { grid-template-columns: 1fr 1fr; column-gap: calc(var(--calha) * 2); } }

/* ---------- /plataforma: o selo do aplicativo ---------- */
.selo { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--linha-forte); color: var(--texto-2); font-size: .8125rem; font-weight: 600; vertical-align: 2px; }
/* revisão 1: o "Aplicativo para Android" parecia um botão de baixar e não fazia nada. Virou
   uma nota com o ícone de informação, ligada à pergunta que explica como o aplicativo chega */
.ver-ponto-nota { display: flex; align-items: flex-start; gap: 8px; color: var(--texto-2); font-size: var(--t-apoio); line-height: 1.45; }
.ver-ponto-nota svg { margin-top: 2px; }
.ver-ponto-nota svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--azul-400); stroke-width: 1.8; stroke-linecap: round; }
.ver-ponto-nota .link-nota { min-height: 0; display: inline; text-decoration: underline; text-underline-offset: 3px; }
.ver-ponto-nota .link-nota::after { display: none; }

/* ---------- WhatsApp no celular: um botão REDONDO de 56 px no canto (v5). A barra larga
   cobria a base da tela, exatamente onde ficam a legenda e os passos das cenas. ---------- */
.zap-redondo svg { width: 28px; height: 28px; fill: currentColor; }
@media (max-width: 1023.98px) {
  :root { --barra-altura: 0px; }
  html { scroll-padding-bottom: 88px; }
  main { padding-bottom: 76px; }
  .barra-zap { left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); height: auto; padding: 0; background: none; }
  .barra-zap::before { display: none; }
  .zap-redondo {
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; text-decoration: none;
    background: var(--azul-escovado); box-shadow: 0 6px 18px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .3);
  }
  .zap-redondo:active { background: var(--azul-escovado-luz); }
  .js .barra-zap:not(.barra-visivel) { transform: translateY(calc(100% + 40px)); }
}

/* ---------- o texto do destaque que muda com o recorte do celular ---------- */
.so-estreito { display: none; }
@media (max-width: 767.98px) { .so-largo { display: none; } .so-estreito { display: inline; } }

/* ---------- a central ao vivo, abaixo da noite (principal) ---------- */
.noite-central { margin-top: clamp(36px, 4vw, 56px); row-gap: 20px; align-items: center; }
.noite-central-texto { display: grid; gap: 10px; align-content: start; }
.noite-central-texto p { color: var(--texto-2); max-width: 48ch; }
@media (min-width: 1024px) {
  .noite-central-texto { grid-column: 1 / 5; }
  .noite-central .noite-direita { grid-column: 5 / 13; position: static; }
}
.aviso-pagina { margin-top: 14px; }

/* >>> destaques: GERADO por scripts/site-imagens.py — não editar à mão */
/* Posição dos destaques numerados, em % da imagem RECORTADA (recalculada do telas.json),
   e o lado do número (fora do contorno, onde houver espaço). */
.dq-01-posto-registro-1{left:35.51%;top:29.24%;width:28.98%;height:10.63%}.dq-01-posto-registro-1::before{left:0;top:-26px}
.dq-01-posto-registro-2{left:30.35%;top:38.90%;width:39.30%;height:9.66%}.dq-01-posto-registro-2::before{left:0;top:-26px}
.dq-01-posto-registro-3{left:37.09%;top:61.35%;width:25.80%;height:23.30%}.dq-01-posto-registro-3::before{left:0;top:-26px}
.dq-02-posto-prova-1{left:34.38%;top:44.02%;width:31.23%;height:10.63%}.dq-02-posto-prova-1::before{left:0;top:-26px}
.dq-02-posto-prova-2{left:24.27%;top:54.65%;width:51.45%;height:10.63%}.dq-02-posto-prova-2::before{left:0;top:-26px}
.dq-20-porta-confirma-1{left:12.39%;top:5.66%;width:75.25%;height:76.92%}.dq-20-porta-confirma-1::before{left:0;top:-26px}
.dq-20-porta-confirma-3{left:3.31%;top:89.76%;width:93.41%;height:9.89%}.dq-20-porta-confirma-3::before{left:0;top:-26px}
.dq-07-central-1{left:4.20%;top:7.95%;width:51.18%;height:5.11%}.dq-07-central-1::before{left:-26px;top:0}
.dq-07-central-2{left:0.39%;top:87.39%;width:99.61%;height:7.71%}.dq-07-central-2::before{left:auto;right:6px;top:calc(50% - 11px)}
.dq-13-campo-posto-2{left:3.08%;top:19.17%;width:93.85%;height:23.35%}.dq-13-campo-posto-2::before{left:auto;right:6px;top:calc(50% - 11px)}
.dq-13-campo-posto-3{left:71.12%;top:6.76%;width:25.81%;height:11.67%}.dq-13-campo-posto-3::before{left:-26px;top:0}
.dq-16-portal-2{left:12.05%;top:27.41%;width:86.61%;height:10.50%}.dq-16-portal-2::before{left:0;top:-26px}
.dq-16-portal-4{left:1.68%;top:82.74%;width:96.66%;height:17.26%}.dq-16-portal-4::before{left:0;top:-26px}
.dq-04-excecoes-2{left:0.00%;top:13.38%;width:100.00%;height:31.25%}.dq-04-excecoes-2::before{left:0;top:-26px}
.dq-04-excecoes-3{left:0.00%;top:70.12%;width:100.00%;height:29.88%}.dq-04-excecoes-3::before{left:0;top:-26px}
.dq-19-presenca-3{left:7.36%;top:40.83%;width:90.78%;height:7.82%}.dq-19-presenca-3::before{left:0;top:-26px}
.dq-19-presenca-4{left:7.36%;top:70.66%;width:90.78%;height:7.82%}.dq-19-presenca-4::before{left:0;top:-26px}
.dq-12-rota-1{left:2.56%;top:8.16%;width:68.63%;height:22.41%}.dq-12-rota-1::before{left:0;top:calc(100% + 4px)}
.dq-11-ronda-2{left:0.00%;top:50.21%;width:100.00%;height:46.79%}.dq-11-ronda-2::before{left:0;top:-26px}
.dq-11-ronda-4{left:28.23%;top:14.64%;width:13.60%;height:20.00%}.dq-11-ronda-4::before{left:-26px;top:0}
.dq-45-portal-visitas-1{left:3.94%;top:15.66%;width:54.41%;height:3.62%}.dq-45-portal-visitas-1::before{left:0;top:-26px}
.dq-45-portal-visitas-4{left:3.50%;top:75.83%;width:93.00%;height:8.97%}.dq-45-portal-visitas-4::before{left:0;top:-26px}
.dq-06-previa-pessoas-2{left:67.67%;top:29.57%;width:17.61%;height:15.75%}.dq-06-previa-pessoas-2::before{left:0;top:-26px}
.dq-06-previa-pessoas-4{left:85.28%;top:29.57%;width:14.72%;height:15.75%}.dq-06-previa-pessoas-4::before{left:0;top:-26px}
.dq-22-ao-vivo-1{left:47.16%;top:0.00%;width:47.51%;height:37.21%}.dq-22-ao-vivo-1::before{left:-26px;top:0}
.dq-22-ao-vivo-2{left:7.35%;top:84.30%;width:27.84%;height:10.47%}.dq-22-ao-vivo-2::before{left:0;top:-26px}
.dq-27-eventos-convite-2{left:8.72%;top:43.83%;width:82.56%;height:31.45%}.dq-27-eventos-convite-2::before{left:0;top:-26px}
.dq-27-eventos-convite-3{left:8.72%;top:75.79%;width:82.56%;height:10.56%}.dq-27-eventos-convite-3::before{left:auto;right:-11px;top:calc(50% - 11px)}
.dq-23-termo-1{left:6.52%;top:8.61%;width:90.94%;height:54.26%}.dq-23-termo-1::before{left:0;top:-26px}
.dq-23-termo-2{left:6.52%;top:67.41%;width:90.94%;height:27.22%}.dq-23-termo-2::before{left:-26px;top:0}
.dq-25-fatura-1{left:0.00%;top:26.47%;width:97.49%;height:18.60%}.dq-25-fatura-1::before{left:0;top:-26px}
.dq-25-fatura-2{left:2.49%;top:63.09%;width:95.00%;height:36.91%}.dq-25-fatura-2::before{left:0;top:-26px}
/* <<< destaques */

/* ---------- /eventos: quem faz o quê (revisão 2 — o "você" mudava de pessoa) ---------- */
.quem-faz-colunas { display: grid; gap: 24px; }
.quem-faz-colunas h3 { font-family: var(--f-titulo); font-weight: 560; font-size: 1.125rem; line-height: 1.3; color: var(--texto); margin-bottom: 8px; }
.quem-faz-colunas ul { list-style: none; display: grid; }
.quem-faz-colunas li { position: relative; padding: 10px 0 10px 22px; background: var(--fio-metal) top / 100% 1px no-repeat; color: var(--texto-2); }
.quem-faz-colunas li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--azul-400); }
@media (min-width: 768px) { .quem-faz-colunas { grid-template-columns: 1fr 1fr; column-gap: calc(var(--calha) * 2); } }

/* ==========================================================================
   RODADA HUMANA, REVISÃO 3 (18/10/2026) — os três críticos, terceira passada
   ========================================================================== */
/* movimento reduzido: UM controle só para ver a cena andar — o "Ver acontecer" embaixo da
   legenda; o "Tocar" do palco fazia a mesma coisa */
.sim.sim-reduzido .sim-pausa { display: none !important; }
/* o palco nunca passa da janela (crítica de arte: a 1440×900 o portal da principal media 979 px e
   o "Pausar" ficava sob o cabeçalho). A largura sai da altura disponível: 300/360 do desenho +
   os controles em cima e os atalhos embaixo (~130 px) */
@media (min-width: 1024px) {
  .sim-palco { max-width: min(600px, calc((min(74svh, 680px) - 130px) * 1.2 + 22px)); }
  /* a cena que mora num bloco de página (o detector de mão em /locacao): o palco grande em cima
     e os passos colados embaixo, em vez de espremida entre o texto e a lista */
  .item-tela .sim:not(.sim-heroi) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "palco" "texto" "legenda"; }
  .item-tela .sim:not(.sim-heroi) .sim-palco { justify-self: start; max-width: min(600px, calc((min(74svh, 680px) - 130px) * 1.2 + 22px)); }
  .item-tela .sim:not(.sim-heroi) .sim-passos li { color: var(--texto-3); }
  .item-tela .sim:not(.sim-heroi) .sim-passos li.ativo { color: var(--texto); }
}
/* o botão redondo do WhatsApp (56 px, canto de baixo à direita) não cobre o fim das linhas que
   encostam no canto: legenda das cenas, o aviso do Android, os links e as perguntas */
@media (max-width: 1023.98px) {
  .sim-legenda, .ver-ponto-rodape, .confianca-link, .perguntas summary { padding-right: 72px; }
  .ver-ponto-rodape { flex-direction: column; align-items: flex-start; }
}
/* as seções abaixo da dobra só são montadas quando chegam perto da tela (num Android modesto, a
   abertura gastava 0,35 s de layout e 0,33 s de estilo na página inteira) */
main > section:not(:first-of-type):not(#ver-ponto):not(#dia) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* as sanfonas do celular: "Também no sistema" e "Por que dá para confiar" */
.sanfona > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-weight: 600; color: var(--texto); }
.sanfona > summary::-webkit-details-marker { display: none; }
.sanfona > summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--texto-2); }
.sanfona[open] > summary::after { content: "−"; }
.faixa-papel .sanfona > summary { color: var(--tinta, inherit); }
@media (min-width: 1024px) {
  .sanfona > summary { pointer-events: none; min-height: 0; }
  .sanfona > summary::after { display: none; }
  #confianca .sanfona > summary { display: none; }
}
/* /eventos, 00:00: a lista da noite que continua a de sábado */
.virada-lista { list-style: none; width: 100%; max-width: 30rem; display: grid; border: 1px solid var(--linha-forte); border-radius: 10px; background: rgb(10 18 30 / .6); }
.virada-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linha); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.virada-lista li:first-child { border-top: 0; }
.virada-lista .vl-topo { color: var(--texto); }
.virada-lista .vl-topo span { color: #7FE0BA; font-weight: 600; }
.virada-lista .vl-mais { justify-content: flex-start; font-size: var(--t-apoio); }
/* a cena num bloco ou ao lado do texto mostra UM passo por vez (como o topo das páginas internas):
   a lista inteira empurrava a legenda para fora da janela */
.js :is(.locacao-sim, .item-tela) .sim-passos li { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.js :is(.locacao-sim, .item-tela) .sim-passos li.ativo { opacity: 1; pointer-events: auto; transition: opacity 260ms ease 130ms; }
.js :is(.locacao-sim, .item-tela) .sim-passos li.feito .sim-barra i { transform: scaleX(0); }

/* ==========================================================================
   v6 — A VITRINE (18/10/2026)
   ========================================================================== */
/* ---------- o menu do celular: botão "Menu" + <dialog> de tela cheia ----------
   Com JavaScript: o botão abre o diálogo (showModal: o resto da página fica inerte), o foco fica
   preso dentro, Esc e "Fechar" fecham e devolvem o foco ao botão, e a página não rola por baixo
   (html.menu-aberto). Sem JavaScript: o mesmo "Menu" é um link para a lista do rodapé. */
.menu-botao {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--raio-ui); font-weight: 600; text-decoration: none; color: var(--texto);
  background: linear-gradient(var(--fundo), var(--fundo)) padding-box, var(--borda-metal) border-box;
}
.js .menu-botao.so-js { display: inline-flex !important; }
@media (min-width: 1024px) {
  .menu-botao, .js .menu-botao.so-js { display: none !important; }
  .menu-painel { display: none !important; }
}
html.menu-aberto, html.menu-aberto body { overflow: hidden; }
.menu-painel {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: 0 var(--margem) calc(24px + env(safe-area-inset-bottom)); border: 0;
  background: var(--fundo); color: var(--texto); overflow-y: auto; overscroll-behavior: contain;
}
.menu-painel[open] { display: flex; flex-direction: column; }
.menu-painel::backdrop { background: var(--fundo); }
.menu-painel-topo { display: flex; align-items: center; justify-content: space-between; min-height: var(--topo-altura); position: relative; }
.menu-painel-topo::after { content: ""; position: absolute; left: calc(var(--margem) * -1); right: calc(var(--margem) * -1); bottom: 0; height: 1px; background: var(--fio-metal); }
.menu-painel-titulo { font-family: var(--f-titulo); font-weight: 560; font-size: 1.125rem; color: var(--texto-2); }
.menu-fechar {
  min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 0 12px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--raio-ui); font-weight: 600;
  background: linear-gradient(var(--fundo), var(--fundo)) padding-box, var(--borda-metal) border-box;
}
.menu-fechar svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.menu-painel .menu-lista { position: static; width: auto; list-style: none; border: 0; background: none; padding: 8px 0 0; }
.menu-painel .menu-lista a { display: flex; align-items: center; min-height: 56px; padding: 0 4px; font-family: var(--f-titulo); font-size: 1.375rem; font-weight: 560; text-decoration: none; border-radius: 0; }
.menu-painel .menu-lista a:hover { background: none; color: #fff; }
.menu-painel .menu-lista a[aria-current="page"] { background: none; text-decoration: underline; text-decoration-color: var(--azul-500); text-underline-offset: 8px; }
.menu-painel .menu-lista li + li { border-top: 1px solid var(--linha); }
.menu-painel .menu-zap { margin-top: 24px; }
.menu-painel .menu-zap .botao { width: 100%; justify-content: center; }

/* ---------- a dor em uma frase ---------- */
.dor { padding-block: 28px; }
.dor-frase { font-family: var(--f-titulo); font-weight: 520; font-size: var(--t-h3); line-height: 1.35; max-width: 44rem; color: var(--texto); }
.dor-link { margin-top: 12px; }
@media (min-width: 1024px) { .dor { padding-block: 40px; } .dor-frase { font-size: 1.75rem; } }

/* ---------- a linha do dia, no fim da cena do ponto ---------- */
.dia-resumo { margin-top: 24px; padding-top: 16px; background: var(--fio-metal) top / 100% 1px no-repeat; color: var(--texto-2); font-size: var(--t-apoio); line-height: 1.7; }
.dia-resumo-rotulo { color: var(--texto); font-weight: 600; }
.dia-momento { white-space: nowrap; }
.dia-momento + .dia-momento::before { content: "·"; margin: 0 8px 0 2px; color: var(--texto-3); }
.dia-momento b { color: var(--texto); font-variant-numeric: tabular-nums; font-weight: 600; }
.dia-resumo .link { margin-left: 6px; white-space: nowrap; }
@media (max-width: 767.98px) { .dia-momento { white-space: normal; } .dia-resumo { padding-right: 72px; } }

/* ---------- os três cartões ---------- */
.frentes .cabeca-secao { margin-bottom: 24px; }
.cartoes { list-style: none; display: grid; gap: 16px; }
@media (min-width: 768px) { .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--calha); } }
.cartao {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 16px; border: 1px solid transparent; border-radius: 10px;
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--borda-metal) border-box;
}
.cartao-moldura { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--palco-fundo); margin-bottom: 4px; }
.cartao-mini { width: 100%; height: 100%; object-fit: cover; }
.cartao p { color: var(--texto-2); font-size: var(--t-apoio); flex: 1; }
.cartao-ir { align-self: flex-start; margin-top: 4px; text-decoration: none; }

/* ---------- um motor, várias marcas (curto) ---------- */
.motor-texto { display: grid; gap: 14px; max-width: 44rem; }
.motor-texto p { color: var(--texto-2); }
.motor-texto .acoes { margin-top: 2px; }
.motor-fatos { margin-top: 20px; }
@media (min-width: 1024px) {
  .motor-texto { grid-column: 1 / 8; }
  .motor-fatos { grid-column: 8 / 13; display: grid; margin-top: 0; align-self: center; justify-content: stretch; padding-block: 0; background: none; }
  .motor-fatos li { display: block; padding: 10px 0; }
  .motor-fatos li + li { border-top: 1px solid var(--linha); }
  .motor-fatos li + li::before { display: none; }
}

/* ---------- perguntas: o link para as demais, e o fechamento ---------- */
.perguntas details:last-of-type { border-bottom: 1px solid var(--linha); }
.perguntas-mais { margin-top: 16px; color: var(--texto-2); font-size: var(--t-apoio); }
.perguntas-mais + .perguntas-mais { margin-top: 10px; }
.fim-comecar { color: var(--texto-2); font-size: var(--t-apoio); }

/* o cartão da inicial que leva à /sistema (vitrine: um cartão só, largo e baixo) */
.cartao-tudo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 16px; padding: 16px 18px; border: 1px solid transparent; border-radius: 10px; text-decoration: none; color: var(--texto);
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--borda-metal) border-box; }
.cartao-tudo-txt { display: grid; gap: 4px; flex: 1 1 26rem; min-width: 0; }
.cartao-tudo-txt b { font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 600; }
.cartao-tudo-txt > span:not(.cartao-tudo-ics) { color: var(--texto-2); font-size: var(--t-apoio); }
/* crítica do cliente r2 (nº 6) e de arte (nº 9b): o único cartão sem desenho e sem botão parecia nota de rodapé. O MESMO
   botão dos vizinhos ("Ver como funciona") e uma fileira de dez pictogramas, um por módulo, com 20 px */
.cartao-tudo-ics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cartao-tudo-ic { width: 20px; height: 20px; fill: none; stroke: var(--azul-400); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cartao-tudo-ir { white-space: nowrap; }
.cartao-tudo:hover .cartao-tudo-ir, .cartao-tudo:focus-visible .cartao-tudo-ir { background: linear-gradient(#17243A, #17243A) padding-box, var(--borda-metal) border-box; }
/* o menu ganhou "O sistema" (cinco páginas): entre 1024 e 1279 px ele aperta o espaço, nunca quebra a linha */
@media (min-width: 1024px) { .nav a, .topo-direita .botao { white-space: nowrap; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .nav { gap: 16px; margin-left: 16px; } .nav a { font-size: .9375rem; } .entrar { font-size: .9375rem; } .topo-direita .botao-foco .botao { padding-inline: 14px; } }