/* ==========================================================================
   Home v2 · protótipo animado · seções HOME-01 a HOME-12
   Desktop: >= 1024 px com ponteiro fino. Celular: < 1024 px.
   Movimento reduzido: html.movimento-reduzido (preferência do sistema ou ?movimento=reduzido).
   ========================================================================== */

.secao { position: relative; padding: var(--secao-y) 0; }
.secao + .secao { border-top: 1px solid var(--linha); }
/* Primeira seção da página: abre abaixo do cabeçalho fixo, como fazem os heros. */
.secao--primeira { padding-top: calc(var(--topo-h) + 56px); }

/* Títulos de seção: entrada por linhas (o JS só age no desktop e com movimento) */
.js [data-titulo] .linha-mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }

/* ==========================================================================
   HOME-01 Hero
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  min-height: max(100svh, 780px);
  padding: calc(var(--topo-h) + 48px) 0 56px;
  display: grid; align-content: center;
}
.hero-fundo {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 46%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 72% 46%, #000 10%, transparent 72%);
  opacity: .55;
}
.hero-in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 76px); align-items: center;
}

.hero-h1 {
  font: 600 clamp(2.3rem, 1.1rem + 3.3vw, 4rem)/1.03 var(--f-disp);
  letter-spacing: -.042em;
}
.h1-l { display: block; }
.h1-b { display: none; text-wrap: balance; }
html[data-h1="B"] .h1-a { display: none; }
html[data-h1="B"] .h1-b { display: block; }

.h1-troca { position: relative; color: var(--azul); }
/* Janela da palavra que alterna: cada item tem 1.4em, para a cedilha da palavra
   vizinha não aparecer na borda; o topo -.18em alinha a linha de base com a do H1. */
.h1-troca-vis {
  position: absolute; left: 0; top: -.18em; height: 1.4em;
  overflow: hidden; opacity: 0; pointer-events: none; white-space: nowrap;
}
.h1-troca-trilho { display: block; }
.h1-troca-trilho > span { display: block; height: 1.4em; line-height: 1.4em; }
.h1-troca.rodando .h1-troca-real { visibility: hidden; }
.h1-troca.rodando .h1-troca-vis { opacity: 1; }

.hero-sub {
  margin-top: 30px; max-width: 54ch;
  font-size: clamp(1.02rem, .95rem + .3vw, 1.17rem); line-height: 1.62; color: var(--txt-2);
}
.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-micro { margin-top: 18px; max-width: 50ch; font-size: .86rem; line-height: 1.55; color: var(--txt-3); }

.hero-fig { margin: 0; }
.hero-cena { position: relative; width: 100%; aspect-ratio: 640 / 560; }
.hero-svg, .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-canvas { opacity: 0; transition: opacity 360ms linear; }
.hero-cena.webgl .hero-canvas { opacity: 1; }
.hero-cena.webgl .hero-svg { opacity: 0; transition: opacity 360ms linear; }
.hs-rot { font: 600 9.5px var(--f-txt); fill: var(--txt); letter-spacing: .02em; }
.hs-tipo { font: 500 10.5px var(--f-txt); fill: var(--txt-3); }
.hs-tipo--ambar { fill: var(--ambar); }
.hero-legenda {
  margin-top: 14px; display: flex; gap: 14px; align-items: baseline;
  font-size: .84rem; line-height: 1.5; color: var(--txt-2); max-width: 62ch;
}
.hero .nota { margin-top: 28px; }

@media (max-width: 1023px) {
  .hero { min-height: 0; padding-top: calc(var(--topo-min) + 44px); padding-bottom: 40px; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-fig { max-width: 600px; }
  .hero-h1 { font-size: clamp(2.15rem, 1.3rem + 4vw, 3.4rem); }
}

/* ==========================================================================
   HOME-01 · versões do hero (A, B e C), trocadas pelo painel do protótipo
   ========================================================================== */

/* a versão C é a principal: aparece também quando o atributo não existe (sem JS) */
html:not([data-hero="a"]) [data-hero-versao="a"],
html:not([data-hero="b"]) [data-hero-versao="b"],
html[data-hero="a"] [data-hero-versao="c"],
html[data-hero="b"] [data-hero-versao="c"] { display: none; }

/* troca do SVG pelo canvas, igual em todas as cenas */
[data-hero-cena] .hero-canvas { opacity: 0; transition: opacity 360ms linear; }
[data-hero-cena].webgl .hero-canvas { opacity: 1; }
[data-hero-cena].webgl .hero-svg { opacity: 0; transition: opacity 360ms linear; }

/* ---------- versão B: processos interligados ---------- */

.hero--b { min-height: max(100svh, 820px); }
.hero-in--b { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
.hero--b .hero-texto { position: relative; z-index: 2; }
.hb-cena {
  position: absolute; top: var(--topo-h); right: 0; height: calc(max(100svh, 820px) - var(--topo-h)); width: 54vw; z-index: 1;
  /* esmaece à esquerda (texto), em cima (menu) e embaixo (legenda) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 13%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 13%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.hb-legenda {
  position: absolute; right: var(--borda); top: calc(max(100svh, 820px) - 128px); z-index: 2;
  display: grid; gap: 10px; justify-items: end; max-width: 52ch;
  font-size: .8rem; line-height: 1.5; color: var(--txt-2); text-align: right;
}
.hb-tipos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 .6rem/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.hb-tipo { display: inline-flex; align-items: center; gap: 7px; }
.hb-tipo::before { content: ""; width: 9px; height: 9px; border-radius: 3px; border: 1.5px solid currentColor; }
.hb-tipo--pessoa::before { color: var(--areia); }
.hb-tipo--sistema::before { color: var(--aco); }
.hb-tipo--agente::before { color: var(--teal); }
.hb-tipo--aprov::before { color: var(--ambar); }
.hero--b > .wrap:last-child { position: relative; z-index: 2; }

/* mapa estático: o processo da palavra do H1 acende */
.hb-svg .hs-zona rect, .hb-svg .hs-zona text, .hb-svg [data-proc] {
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state),
    stroke-opacity calc(var(--dur-base) * var(--motion)) var(--ease-state),
    fill-opacity calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
.hb-svg .hs-zona.foco rect { stroke-opacity: .75; fill-opacity: .07; }
.hb-svg .hs-zona.foco text { fill-opacity: 1; }
.hb-svg.tem-foco .hs-zona:not(.foco) text { fill-opacity: .25; }
.hb-svg .fora { opacity: .35; }

@media (max-width: 1023px) {
  .hero--b { min-height: 0; }
  .hero-in--b { grid-template-columns: 1fr; }
  .hb-cena {
    position: relative; width: auto; height: auto; aspect-ratio: 1 / 1; max-width: 640px;
    margin: 28px var(--gut) 0; -webkit-mask-image: none; mask-image: none;
  }
  .hb-legenda { position: static; top: auto; justify-items: start; text-align: left; margin: 14px var(--gut) 0; }
}

/* ---------- versão C: imersiva, conduzida pela rolagem, em dez momentos ---------- */
/* Desktop com movimento: palco fixo por cerca de 24 telas; o JS acende o H1, troca os
   capítulos e muda a cena. Celular: texto em cards empilhados (CSS). Movimento reduzido:
   quadro final estático e capítulos em lista. */

.hero-c { position: relative; }
.hc-pista { position: relative; }
.hc-palco { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.hc-fundo { position: absolute; inset: 0; }
.hc-veu {
  position: absolute; inset: 0; pointer-events: none;
  /* o lado do texto fica escuro; a cena aparece inteira na metade direita */
  background:
    linear-gradient(180deg, rgba(6, 7, 9, .85) 0%, rgba(6, 7, 9, .35) 24%, rgba(6, 7, 9, 0) 44%),
    linear-gradient(0deg, rgba(6, 7, 9, .9) 0%, rgba(6, 7, 9, 0) 34%),
    linear-gradient(90deg, rgba(6, 7, 9, .95) 0%, rgba(6, 7, 9, .9) 36%, rgba(6, 7, 9, .5) 50%, rgba(6, 7, 9, 0) 62%);
}
.hc-topo { position: relative; z-index: 2; padding-top: calc(var(--topo-h) + 6vh); }
.hc-h1 {
  /* Menor que antes e preso também à altura da janela: em 1530x880, com o
     DevTools aberto, o título de 82px descia até o parágrafo. O 8vh limita o
     corpo quando a janela é baixa para a largura que tem. */
  font: 600 min(clamp(2.4rem, .85rem + 4.1vw, 5.1rem), 8.6vh)/1.0 var(--f-disp); letter-spacing: -.046em;
  /* 15.5ch na Funnel Display dá as mesmas 4 linhas e os mesmos ~700px de caixa
     que 13.5ch davam na Montserrat. A unidade ch muda junto com a fonte. */
  max-width: 15.5ch; text-wrap: balance;
  /* Com entrelinha 1.0 a perna do "j" de "juntas" sai da caixa de linha e
     encosta no que vier embaixo. Esta folga acompanha o corpo do título e
     garante o descanso em qualquer tamanho e em qualquer estado. */
  padding-bottom: .1em;
}
/* O .hc-base é posicionado de forma absoluta e ocupa cerca de 430px fixos a
   partir do rodapé do palco. Em janela baixa o H1 alcançava esse bloco: em
   1280x720 a folga era de -90px. Aqui o título encolhe e o respiro diminui. */
@media (min-width: 1024px) and (max-height: 860px) {
  .hc-topo { padding-top: calc(var(--topo-h) + 2vh); }
  .hc-h1 { font-size: clamp(2.2rem, .8rem + 2.9vw, 4rem); }
}
.hc-h1 .h1-b { display: none; }
html[data-h1="B"] .hc-h1 .h1-a { display: none; }
html[data-h1="B"] .hc-h1 .h1-b { display: inline; }
.hc-g { display: inline; transition: color calc(var(--dur-base) * var(--motion)); }
.hc-pessoas, .hc-ia { transition: color calc(var(--dur-slow) * var(--motion)) var(--ease-state); }
/* "pessoas" no laranja do Cláudio: o areia sumia no peso 400 (Erik, 29/10/2026) */
.hc-pessoas.on { color: var(--azul-claro); }
.hc-ia.on { color: var(--teal); }
.hc-base { position: relative; z-index: 2; margin-top: auto; padding: 40px 0 64px; }
.hc-base .hero-sub { margin-top: 0; max-width: 46ch; color: var(--txt); }
.hc-base .btn--sec { background: rgba(6, 7, 9, .88); }

/* capítulos */
.hc-caps { position: relative; z-index: 2; }
.hc-cap { max-width: 600px; }
.hc-cap-olho { color: var(--azul-claro); margin-bottom: 18px; }
.hc-cap-frase {
  font: 600 clamp(1.9rem, .8rem + 2.3vw, 3.2rem)/1.08 var(--f-disp); letter-spacing: -.035em;
  text-wrap: balance;
}
.hc-cap-frase--media { font-size: clamp(1.5rem, .8rem + 1.5vw, 2.3rem); line-height: 1.18; letter-spacing: -.025em; }
.hc-cap-apoio { margin-top: 22px; max-width: 46ch; font-size: clamp(1rem, .92rem + .3vw, 1.16rem); line-height: 1.6; color: var(--txt-2); }
.hc-cap-apoio b { font-weight: 600; color: var(--txt); }

/* palavras de poder: base leve, destaque pesado, com a cor semântica das cenas.
   A cor acende quando o capítulo entra (classe .on, posta pelo JS), como "pessoas" e "IA" no H1. */
.hc-cap-frase { font-weight: 400; }   /* piso de 400 no site (20/10/2026) */
.hc-cap-frase b { font-weight: 700; color: var(--txt-tit); transition: color calc(var(--dur-slow) * var(--motion)) var(--ease-state); }
.hc-cap-frase .cor-pessoa { color: var(--azul-claro); }   /* era areia; no hero, pessoa fica no laranja (29/10/2026). A cena e o mosaico seguem em areia, onde o laranja é a automação */
.hc-cap-frase .cor-ia { color: var(--teal); }
.hc-cap-frase .cor-sistema { color: #aeb8c8; }
.hc-cap-frase .cor-aprov { color: var(--ambar); }
.hc-cap-frase .cor-auto { color: var(--azul-claro); }
.hc-cap-frase .cor-sinal { color: var(--sinal); }
/* "novidade em IA": o mesmo reflexo prateado das pílulas da quebra */
.hc-cap-frase .cor-brilho {
  background: linear-gradient(100deg, var(--txt) 0%, var(--txt) 38%, #ffc29e 50%, var(--txt) 62%, var(--txt) 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hc-brilho 3.2s var(--ease-state) infinite;
}
@keyframes hc-brilho { from { background-position: 100% 0; } to { background-position: 0 0; } }
html[data-pausa="1"] .hc-cap-frase .cor-brilho { animation-play-state: paused; }
html.movimento-reduzido .hc-cap-frase .cor-brilho { animation: none; background: none; color: var(--txt); }
@media (min-width: 1024px) {
  html.js:not(.movimento-reduzido) .hc-cap:not(.on) .hc-cap-frase b[class^="cor-"]:not(.cor-brilho) { color: var(--txt); }
}
.hc-logos-nota { margin-top: 14px; }

.hc-legenda {
  position: absolute; right: var(--borda); bottom: 30px; z-index: 2; max-width: 44ch;
  display: flex; gap: 12px; align-items: baseline; font-size: .78rem; line-height: 1.5; color: var(--txt-2); text-align: right;
}
.hc-rolar { position: absolute; left: 50%; bottom: 70px; z-index: 2; width: 1px; height: 46px; background: var(--linha-2); overflow: hidden; display: none; }
.hc-rolar span { position: absolute; left: -1px; top: -16px; width: 3px; height: 16px; background: var(--azul); animation: hc-rolar 1.9s var(--ease-state) infinite; }
@keyframes hc-rolar { to { transform: translateY(64px); } }
html[data-pausa="1"] .hc-rolar span { animation-play-state: paused; }

/* navegação pelos capítulos e atalho para sair da introdução.
   Os pontos ficam no extremo direito da tela, de propósito fora do grid. */
.hc-marcos { position: absolute; right: var(--gut); top: 50%; z-index: 3; transform: translateY(-50%); display: none; gap: 6px; }
.hc-marcos button {
  position: relative; display: block; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
}
.hc-marcos button::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 1px solid var(--linha-3);
  transition: background-color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), width calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.hc-marcos button.feito::before { background: rgba(232, 80, 2, .45); border-color: rgba(232, 80, 2, .45); }
.hc-marcos button.ativo::before { background: var(--azul); border-color: var(--azul); width: 9px; height: 9px; }
.hc-marcos button span {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: 500 .62rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt);
  background: rgba(10, 12, 16, .92); border: 1px solid var(--linha-2); border-radius: 6px; padding: 6px 8px;
  opacity: 0; pointer-events: none; transition: opacity calc(var(--dur-micro) * var(--motion));
}
.hc-marcos button:hover span, .hc-marcos button:focus-visible span { opacity: 1; }
.hc-pular {
  position: absolute; left: 50%; bottom: 24px; z-index: 3; transform: translateX(-50%); display: none;
  align-items: center; gap: 8px; font-size: .78rem; font-weight: 500; color: var(--txt-2); text-decoration: none;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linha-2); background: rgba(6, 7, 9, .7);
}
.hc-pular:hover { color: var(--txt); border-color: var(--linha-3); }
.hc-pular svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.nota--hc { position: relative; z-index: 3; margin: 0 0 28px var(--borda); max-width: 600px; font-size: .74rem; }

/* desktop com movimento: palco fixo por CSS (o espaço fica reservado antes do JS) */
@media (min-width: 1024px) {
  /* cerca de duas telas de rolagem por capítulo e o dobro no 3 (cerca de 24 telas no total; js/hero-c.js, RITMO) */
  html:not(.movimento-reduzido) .hc-pista { height: 2520vh; }
  html:not(.movimento-reduzido) .hc-palco { position: sticky; top: 0; height: 100vh; min-height: 640px; display: block; }
  html:not(.movimento-reduzido) .hc-topo { position: absolute; left: 0; right: 0; top: 0; }
  html:not(.movimento-reduzido) .hc-base { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 10vh; }
  html:not(.movimento-reduzido) .hc-caps { position: absolute; inset: 0; display: flex; align-items: center; padding-top: var(--topo-min); pointer-events: none; }
  html:not(.movimento-reduzido) .hc-caps-in { display: grid; }
  html:not(.movimento-reduzido) .hc-cap { grid-area: 1 / 1; align-self: center; }
  html.js:not(.movimento-reduzido) .hc-cap { opacity: 0; }
  html.js:not(.movimento-reduzido) .hc-base { opacity: 0; pointer-events: none; }
  /* o H1 acende por grupos com a rolagem (js/hero-c.js); as duas primeiras linhas já entram acesas */
  html.js:not(.movimento-reduzido) .hc-h1 .hc-g { opacity: .18; }
  html.js:not(.movimento-reduzido) .hc-h1 .h1-a > .hc-linha:not(.hc-troca) > .hc-g,
  html.js:not(.movimento-reduzido) .hc-h1 .h1-b > .hc-g:first-child { opacity: 1; }
  html:not(.movimento-reduzido) .hc-rolar { display: block; }
  html:not(.movimento-reduzido) .hc-marcos { display: grid; }
  html:not(.movimento-reduzido) .hc-pular { display: inline-flex; }
  html:not(.movimento-reduzido) .hc-legenda { bottom: 74px; }
  html:not(.movimento-reduzido) .nota--hc { position: absolute; left: var(--borda); bottom: 28px; margin: 0; max-width: 420px; font-size: .72rem; background: rgba(16, 13, 26, .92); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nota--hc { display: none; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hc-cap-frase { font-size: clamp(1.7rem, .8rem + 1.8vw, 2.6rem); }
  .hc-cap-frase--media { font-size: clamp(1.35rem, .8rem + 1.2vw, 1.9rem); }
  .hc-cap--pausa .hc-cap-frase { font-size: clamp(2rem, .9rem + 2.4vw, 3.1rem); }
  .hc-conta { margin-top: 14px; }
  .hc-conta-horas b { font-size: 4.6rem; }
  .hc-conta-apoio { margin-top: 12px; }
  .hc-calc-nota { margin-top: 8px; }
  .hc-impacto { margin-top: 14px; }
  .hc-impacto li { padding: 10px 0; }
  .hc-clientes li { min-height: 58px; }
  .hc-quem-def { margin-top: 14px; font-size: .86rem; }
  .hc-quem-def + .hc-quem-def { margin-top: 6px; }
  .hc-final-pergunta { margin-top: 18px; }
  .hc-cap--final .hero-ctas { margin-top: 20px; }
}

/* com a versão C, a apresentação da Digital Pixel vive no capítulo 7 (em todas as larguras) */
html:not([data-hero="a"]):not([data-hero="b"]) #home-02 { display: none; }

/* movimento reduzido no desktop: quadro final estático na primeira tela e capítulos em grade */
@media (min-width: 1024px) {
  html.movimento-reduzido .hc-palco { display: grid; grid-template-rows: max(100svh, 760px) auto auto; min-height: 0; }
  html.movimento-reduzido .hc-fundo { inset: 0 0 auto 0; height: max(100svh, 760px); }
  html.movimento-reduzido .hc-veu { inset: 0 0 auto 0; height: max(100svh, 760px); }
  html.movimento-reduzido .hc-topo { grid-area: 1 / 1; align-self: start; }
  html.movimento-reduzido .hc-base { grid-area: 1 / 1; align-self: end; margin: 0; padding-bottom: 40px; }
  html.movimento-reduzido .hc-caps { grid-area: 2 / 1; padding: 72px 0 24px; }
  html.movimento-reduzido .hc-caps-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; }
  html.movimento-reduzido .hc-cap-frase { font-size: clamp(1.5rem, .9rem + 1.2vw, 2.2rem); }
  html.movimento-reduzido .hc-cap--largo { grid-column: 1 / -1; max-width: none; }
  html.movimento-reduzido .nota--hc { grid-area: 3 / 1; }
  html.movimento-reduzido .hc-legenda { bottom: auto; top: calc(var(--topo-h) + 20px); }
}
html.movimento-reduzido .hc-pessoas, html.movimento-reduzido .hc-ia { transition: none; }

/* os capítulos 1 a 4 formam a pilha de cards do celular; no resto, o grupo não existe no layout */
.hc-caps-pilha { display: contents; }
/* a legenda do mosaico só faz sentido onde a cena WebGL aparece */
html.movimento-reduzido .hc-so-cena { display: none; }
@media (max-width: 1023px) { .hc-caps .hc-so-cena { display: none; } }

/* a quebra ("Antes de seguir"): frase grande; a segunda parte acende quando as novidades saem */
.hc-cap--pausa { max-width: 780px; }
.hc-cap--pausa .hc-cap-frase { font-size: clamp(2.3rem, 1rem + 3.2vw, 4.3rem); line-height: 1.04; letter-spacing: -.042em; max-width: 17ch; }
.hc-cap--pausa .hc-cap-apoio { max-width: 50ch; }

/* capítulo 05: a conta pronta, sem campos (29/10/2026). A calculadora pedia
   três estimativas no meio da rolagem; agora o exemplo vem feito, e o
   mosaico da cena se enche com as mesmas 176 horas */
.hc-conta { margin-top: 26px; max-width: 540px; }
.hc-conta-horas { display: flex; align-items: flex-end; gap: 18px; color: var(--txt-2); font-size: 1.05rem; line-height: 1.35; }
.hc-conta-horas b { flex: none; font: 400 clamp(4.6rem, 2rem + 4.6vw, 8rem)/.8 var(--f-shield); letter-spacing: -.06em; color: var(--sinal); font-variant-numeric: tabular-nums; }
.hc-conta-horas strong { display: block; font-weight: 600; color: var(--txt); }
.hc-conta-apoio { margin-top: 18px; max-width: 44ch; font-size: clamp(1rem, .92rem + .3vw, 1.16rem); line-height: 1.6; color: var(--txt-2); }
.hc-conta-apoio b { font-weight: 600; color: var(--txt); }
.hc-conta-cta { margin-top: 22px; max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 599px) {
  .hc-conta-horas { gap: 14px; font-size: .98rem; }
  .hc-conta-horas b { font-size: 3.6rem; }
}
/* o rótulo do botão rola letra a letra e não quebra: abaixo de 380px ele encolhe para caber */
@media (max-width: 379px) {
  .hc-conta-cta { padding-inline: 16px; font-size: .8rem; }
}
.hc-calc-nota { margin-top: 12px; max-width: 52ch; font-size: .8rem; line-height: 1.55; color: var(--txt-3); }

/* capítulo 6: impacto */
.hc-impacto { list-style: none; margin-top: 22px; max-width: 540px; border-top: 1px solid var(--linha-2); }
.hc-impacto li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha-2); }
.hc-imp-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(232, 80, 2, .12); color: var(--azul-claro); }
.hc-impacto li:nth-child(2) .hc-imp-ic { background: rgba(23, 191, 176, .12); color: var(--teal); }
.hc-impacto li:nth-child(3) .hc-imp-ic { background: rgba(255, 181, 71, .14); color: var(--ambar); }
.hc-imp-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hc-imp-tit { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 3px; }
.hc-impacto li p:not(.hc-imp-tit) { color: var(--txt-2); font-size: .93rem; line-height: 1.5; }
.hc-impacto li p b { font-weight: 600; color: var(--txt); }
.hc-legenda-grade { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font: 500 .62rem/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--txt-2); }
.hc-legenda-grade li { display: inline-flex; align-items: center; gap: 8px; }
.hc-legenda-grade li::before { content: ""; width: 11px; height: 11px; border-radius: 3px; }
.hc-legenda-grade .lg-auto::before { background: var(--azul); }
.hc-legenda-grade .lg-agente::before { background: var(--teal); }
.hc-legenda-grade .lg-pessoa::before { background: var(--areia); }

/* capítulo 7: quem faz, com os clientes */
.hc-clientes {
  list-style: none; margin-top: 22px; max-width: 580px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linha-2); border-left: 1px solid var(--linha-2);
}
.hc-clientes li {
  display: grid; place-items: center; min-height: 72px; padding: 10px 12px; text-align: center;
  border-right: 1px solid var(--linha-2); border-bottom: 1px solid var(--linha-2); background: rgba(10, 12, 16, .55);
}
.hc-clientes img { height: 30px; width: auto; max-width: 104px; object-fit: contain; filter: grayscale(1) brightness(1.9); opacity: .82; }
.hc-clientes .logo-txt { font-size: .84rem; font-weight: 600; line-height: 1.25; color: var(--txt-2); white-space: normal; }
.hc-quem-def { margin-top: 20px; max-width: 58ch; font-size: .92rem; line-height: 1.62; color: var(--txt-2); }
.hc-quem-def + .hc-quem-def { margin-top: 10px; }
.hc-quem-def b { font-weight: 600; color: var(--txt); }

/* capítulo 8: a pergunta final */
.hc-cap--final .hc-cap-frase { font-size: clamp(1.9rem, .9rem + 2.1vw, 3rem); max-width: 19ch; }
.hc-final-pergunta {
  position: relative; margin-top: 26px; padding-left: 26px; max-width: 34ch;
  font: 500 clamp(1.15rem, .95rem + .55vw, 1.45rem)/1.4 var(--f-txt); letter-spacing: -.012em; color: var(--txt);
}
.hc-final-pergunta::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--ambar); box-shadow: 0 0 0 0 rgba(255, 181, 71, .55);
  animation: hc-espera 2.4s var(--ease-state) infinite;
}
@keyframes hc-espera { 0% { box-shadow: 0 0 0 0 rgba(255, 181, 71, .55); } 70% { box-shadow: 0 0 0 12px rgba(255, 181, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 181, 71, 0); } }
html[data-pausa="1"] .hc-final-pergunta::before { animation-play-state: paused; }
html.movimento-reduzido .hc-final-pergunta::before { animation: none; }
.hc-cap--final .hc-cap-apoio { margin-top: 14px; }
.hc-cap--final .hero-ctas { margin-top: 28px; }

/* mapa estático da versão C: as fases acendem por classe (f1, f2, f3) */
.hc-svg .hs-no, .hc-svg .hs-aresta, .hc-svg .hs-marca { transition: opacity .6s var(--ease-state); }
.hc-svg .hs-agente, .hc-svg .hs-aprov, .hc-svg .r2, .hc-svg .r3 { opacity: 0; }
.hc-svg.f2 .hs-agente, .hc-svg.f2 .r2, .hc-svg.f3 .hs-aprov, .hc-svg.f3 .r3 { opacity: 1; }
.hc-svg.f3 .q, .hc-svg.f3 .hs-marca { opacity: 0; }
.hc-svg.f3 .elimina { opacity: .18; }
.hc-svg .hs-pessoa .hs-no-in > rect:first-child { transition: stroke .6s; }
.hc-svg.f1 .hs-pessoa .hs-no-in > rect:first-child { stroke: rgba(232, 220, 194, .95); }
.hc-svg .hs-marca-anel { transform-box: fill-box; transform-origin: center; animation: oc-pulsa 2.6s ease-in-out infinite; }
html[data-pausa="1"] .hc-svg .hs-marca-anel { animation-play-state: paused; }
html.movimento-reduzido .hc-svg .hs-marca-anel { animation: none; }
/* celular: o fluxo próprio do hero. Cartões apagados até o pulso chegar; a
   aprovação troca para "aprovado"; no fim do ciclo tudo apaga e recomeça */
.hc-svg.hcm .hs-no { transition: opacity .45s var(--ease-state); }
.hc-svg.hcm .hs-no:not(.on) { opacity: .3; }
.hc-svg.hcm .hs-no.hcm-aceso:not(.on) { opacity: 0; }
.hc-svg.hcm .hcm-trilha { transition: opacity .6s; }
.hc-svg.hcm.apaga .hcm-trilha { opacity: 0; }
.hc-svg.hcm .hcm-pulso { transition: opacity .2s; filter: drop-shadow(0 0 6px rgba(255, 122, 51, .9)); }

/* celular: o texto vem primeiro; a cena ganha uma faixa própria; os capítulos viram cards empilhados (CSS) */
@media (max-width: 1023px) {
  .hc-palco { min-height: 0; padding-bottom: 20px; overflow: visible; }
  .hc-topo { padding-top: calc(var(--topo-min) + 40px); }
  .hc-h1 { max-width: 12ch; }
  .hc-veu { display: none; }
  .hc-base { margin-top: 0; padding: 28px 0 8px; }
  /* o fluxo do celular (svgCelular, em js/hero-c.js) tem proporção própria e cabe inteiro */
  .hc-fundo { position: relative; inset: auto; order: 3; width: min(100%, 440px); height: auto; aspect-ratio: 440 / 552; margin: 18px auto 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
  .hc-legenda { order: 4; position: relative; right: auto; bottom: auto; top: auto; margin: 4px var(--gut) 18px; text-align: left; justify-content: flex-start; }
  .hc-caps { order: 5; padding: 24px 0 8px; }
  .hc-cap {
    position: sticky; top: calc(var(--topo-min) + 14px); max-width: none;
    margin-bottom: 18vh; padding: 24px 22px 26px;
    background: var(--ink-2); border: 1px solid var(--linha-2); border-radius: 16px;
    box-shadow: 0 -24px 40px -18px rgba(0, 0, 0, .85);
  }
  .hc-cap[data-cap="2"] { top: calc(var(--topo-min) + 26px); }
  .hc-cap[data-cap="3"] { top: calc(var(--topo-min) + 38px); }
  .hc-cap[data-cap="4"] { top: calc(var(--topo-min) + 50px); margin-bottom: 18vh; }
  .hc-caps-pilha { display: block; }
  .hc-cap--largo { position: relative; top: auto; margin-bottom: 18px; box-shadow: none; }
  .hc-clientes { grid-template-columns: repeat(2, 1fr); }
  .hc-cap-frase { font-size: 1.45rem; line-height: 1.18; }
  .hc-cap--pausa .hc-cap-frase { font-size: 1.85rem; line-height: 1.1; }
  .hc-cap-apoio { font-size: .98rem; }
  html.movimento-reduzido .hc-cap { position: static; margin-bottom: 14px; }
  html.movimento-reduzido .hc-caps-in { display: block; }
  .nota--hc { order: 6; margin: 18px var(--gut) 8px; max-width: none; }
}

/* ==========================================================================
   HOME-02 Prova imediata
   ========================================================================== */

.prova { padding-top: clamp(72px, 8vw, 128px); }
.prova-in {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 104px); align-items: start;
}
.prova-def {
  font-size: clamp(1.22rem, .98rem + .9vw, 1.66rem); line-height: 1.45; letter-spacing: -.014em;
  color: var(--txt); text-wrap: pretty;
}
.prova-nums { margin: 0; display: grid; }
.prova-num { padding: 18px 0 20px; border-top: 1px solid var(--linha); }
.prova-num:last-child { border-bottom: 1px solid var(--linha); }
.prova-num dt { display: grid; }
.num-pre { font: 500 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 8px; }
.num {
  font: 600 clamp(2.3rem, 1.5rem + 2.4vw, 3.5rem)/1 var(--f-disp); letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.prova-num dd { margin: 10px 0 0; color: var(--txt-2); font-size: .92rem; line-height: 1.5; }

.logos {
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos:focus-visible { outline-offset: -3px; }
.logos-faixa { display: flex; width: max-content; animation: logos-rola 46s linear infinite; }
.logos-lista { list-style: none; display: flex; align-items: center; gap: 76px; padding: 30px 38px; }
.logos-lista img { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) brightness(1.7); opacity: .62; }
.logo-txt { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; color: var(--txt-2); opacity: .75; white-space: nowrap; }
@keyframes logos-rola { to { transform: translateX(-50%); } }
.logos:hover .logos-faixa,
.logos:focus-within .logos-faixa,
.logos:focus .logos-faixa,
html[data-pausa="1"] .logos-faixa { animation-play-state: paused; }
html.movimento-reduzido .logos-faixa { animation: none; width: auto; }
html.movimento-reduzido .logos-lista { flex-wrap: wrap; justify-content: center; gap: 28px 56px; }
html.movimento-reduzido .logos { -webkit-mask-image: none; mask-image: none; }

.prova-apoio { margin-top: 40px; max-width: 62ch; font-size: 1.05rem; color: var(--txt-2); }

@media (max-width: 1023px) {
  .prova-in { grid-template-columns: 1fr; }
  .logos-faixa { animation-duration: 64s; }
  .logos-lista { gap: 52px; }
  .logos-lista img { height: 24px; }
}

/* ==========================================================================
   HOME-03 Duas formas de trabalhar
   ========================================================================== */

.frentes-grade { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.frente {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(28px, 3vw, 44px); border-radius: 18px;
  background: var(--ink-2); border: 1px solid var(--linha-2);
  transition:
    transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy),
    border-color calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.frente:hover, .frente:focus-within { transform: translateY(calc(-4px * var(--motion))); }
.frente--ia:hover, .frente--ia:focus-within { border-color: rgba(23, 191, 176, .6); }
.frente--ss:hover, .frente--ss:focus-within { border-color: rgba(232, 80, 2, .6); }
.frente-desenho { width: 220px; height: 110px; margin: -6px 0 6px auto; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.frente-desenho--fluxo { stroke: var(--teal); }
.frente-desenho--fluxo rect { fill: var(--ink-3); }
.frente-desenho--fluxo .fd-aprov { stroke: var(--ambar); }
.frente-desenho--grade { stroke: var(--azul); }
.frente-desenho--grade .fd-linha { stroke-opacity: .7; }
.frente-desenho--grade .fd-bloco { fill: rgba(232, 80, 2, .14); stroke-opacity: .9; }
.frente-desenho .fd-linha { stroke-dasharray: 1; stroke-dashoffset: 0; }
.frente-desenho .fd-base { stroke-opacity: .16; stroke-dasharray: 3 5; }

/* Desenho no hover e no foco, só com ponteiro fino e movimento */
@media (hover: hover) and (pointer: fine) {
  html:not(.movimento-reduzido) .frente-desenho .fd-linha {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset var(--dur-base) var(--ease-out);
  }
  html:not(.movimento-reduzido) .frente-desenho--grade .fd-linha:nth-of-type(n+5) { transition-delay: 90ms; }
  html:not(.movimento-reduzido) .frente-desenho--grade .fd-bloco { opacity: 0; transition: opacity var(--dur-base) var(--ease-out) 180ms; }
  html:not(.movimento-reduzido) .frente:hover .fd-linha,
  html:not(.movimento-reduzido) .frente:focus-within .fd-linha { stroke-dashoffset: 0; }
  html:not(.movimento-reduzido) .frente:hover .fd-bloco,
  html:not(.movimento-reduzido) .frente:focus-within .fd-bloco { opacity: 1; }
}

.frente-rot { color: var(--txt-3); }
.frente-txt { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.35; letter-spacing: -.016em; font-weight: 500; max-width: 30ch; }
.frente-links { list-style: none; margin-top: 4px; border-top: 1px solid var(--linha); }
.frente-links a {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--txt-2);
}
.frente-links a::after { content: "→"; color: var(--txt-3); transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy); }
.frente-links a:hover { color: var(--txt); }
.frente-links a:hover::after { transform: translateX(3px); color: var(--txt); }
.frente .btn { align-self: flex-start; margin-top: 10px; }

@media (max-width: 767px) {
  .frentes-grade { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HOME-04 O trabalho de hoje
   ========================================================================== */

.trabalho-topo {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
.trabalho-topo .h2 { max-width: 20ch; }
.trabalho-txt { color: var(--txt-2); font-size: 1.05rem; max-width: 46ch; }
.trabalho-corpo {
  --cn-h: clamp(64px, 2.6rem + 4.4vw, 116px);
  position: relative;
  margin-top: 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.cacaniquel { position: relative; }
.cn-janela {
  position: relative; height: calc(var(--cn-h) * 3); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.cn-janela::before, .cn-janela::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--linha-2); z-index: 1;
}
.cn-janela::before { top: var(--cn-h); }
.cn-janela::after { top: calc(var(--cn-h) * 2); }
.cn-rolo { display: flex; flex-direction: column; transform: translateY(var(--cn-h)); will-change: transform; }
.cn-rolo span {
  display: block; height: var(--cn-h);
  font: 700 calc(var(--cn-h) * .7)/var(--cn-h) var(--f-txt); letter-spacing: -.05em;
  color: var(--txt); white-space: nowrap;
  transition: color calc(var(--dur-base) * var(--motion)) var(--ease-state), opacity calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
.cn-contador { margin-top: 16px; color: var(--txt-3); }
.cn-contador [data-cn-n] { color: var(--azul-claro); }
.cn-dica { display: none; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--linha-2); color: var(--txt-3); }

/* o verbo ativo acende junto com a linha da tabela; os vizinhos ficam esmaecidos */
.trabalho-corpo.anima .cn-rolo span { color: var(--txt-3); opacity: .5; }
.trabalho-corpo.anima .cn-rolo span.ativo { color: var(--azul-claro); opacity: 1; }

/* ligação em ângulo reto entre o verbo ativo e a linha da tabela (desenhada pelo JS) */
.cn-liga { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.cn-liga-l { fill: none; stroke: var(--azul-claro); stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: square; }
.cn-liga-a { fill: var(--azul-claro); }
.cn-liga-b { fill: var(--ink); stroke: var(--azul-claro); stroke-width: 1.5; }

.situacoes { width: 100%; }
.situacoes tr { border-top: 1px solid var(--linha); transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state); }
.situacoes tr:last-child { border-bottom: 1px solid var(--linha); }
.situacoes th {
  width: 10.5rem; text-align: left; vertical-align: top; padding: 14px 16px 14px 0;
  font: 500 .72rem/1.9 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-2);
  transition: color calc(var(--dur-base) * var(--motion));
}
.situacoes td { padding: 14px 0; color: var(--txt-2); line-height: 1.5; transition: color calc(var(--dur-base) * var(--motion)); }
.trabalho-corpo.anima .situacoes tr { opacity: .3; }
.trabalho-corpo.anima .situacoes tr.ativa { opacity: 1; }
.situacoes tr.ativa th, .situacoes tr:hover th { color: var(--azul-claro); }
.situacoes tr.ativa td, .situacoes tr:hover td { color: var(--txt); }

/* desktop com movimento: a roda gira sozinha enquanto a seção está na tela.
   Até 21/10/2026 a seção ficava presa por cerca de 3,5 telas (pista de 420vh
   com palco fixo) enquanto a rolagem girava os verbos; foi solta a pedido do
   Cláudio, porque segurava a rolagem por tempo demais. */
@media (min-width: 1024px) {
  html:not(.movimento-reduzido) .trabalho-corpo { margin-top: 56px; }
  html.js:not(.movimento-reduzido) .cn-liga { display: block; }
  html.js:not(.movimento-reduzido) .cn-dica { display: inline; }
  html.js:not(.movimento-reduzido) .cn-janela { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
  html.js:not(.movimento-reduzido) .cn-janela.arrastando { cursor: grabbing; }
  html.js:not(.movimento-reduzido) .situacoes tbody tr { cursor: default; }
}

.trabalho-fecho { margin-top: 80px; max-width: 780px; }
.trabalho-fecho p { font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height: 1.42; letter-spacing: -.016em; font-weight: 500; }
.traco { width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.traco-p { fill: none; stroke: var(--azul); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

html.movimento-reduzido .cacaniquel { display: none; }
html.movimento-reduzido .trabalho-corpo { grid-template-columns: 1fr; }

@media (max-width: 1023px) {
  .trabalho-topo { grid-template-columns: 1fr; gap: 24px; }
  .trabalho-corpo { grid-template-columns: 1fr; margin-top: 44px; }
  .cacaniquel { display: none; }
  .situacoes, .situacoes tbody { display: block; }
  .situacoes tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .situacoes tr { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--linha-2) !important; border-radius: 12px; }
  .situacoes th, .situacoes td { width: auto; padding: 0; display: block; }
  .situacoes td { font-size: .88rem; }
  .trabalho-fecho { margin-top: 48px; }
}
@media (max-width: 479px) {
  .situacoes tbody { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HOME-05 Operação viva
   ========================================================================== */

.operacao-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.selo {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 .64rem/1.35 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-2); border: 1px dashed var(--linha-3); border-radius: 999px; padding: 8px 14px;
}
.selo-ponto {
  width: 8px; height: 8px; border-radius: 2px; flex: none;
  background: repeating-linear-gradient(45deg, var(--txt-2) 0 2px, transparent 2px 4px);
}
.selo--mini { padding: 5px 10px; font-size: .56rem; }

.op-pista { margin-top: 48px; }
.op-grade { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 3vw, 56px); align-items: center; }

.op-progresso { list-style: none; display: flex; gap: 6px; margin-bottom: 24px; }
.op-progresso li {
  flex: 1; padding-top: 9px; border-top: 2px solid var(--linha-2);
  font: 500 .58rem/1.3 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3);
  transition: color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion));
}
.op-progresso li span { margin-right: 6px; }
.op-progresso li.feito { border-color: rgba(232, 80, 2, .45); }
.op-progresso li.ativo { color: var(--txt); border-color: var(--azul); }

.op-batidas { list-style: none; display: grid; }
.op-batida p { font: 600 clamp(1.2rem, .85rem + 1.05vw, 1.75rem)/1.28 var(--f-disp); letter-spacing: -.022em; text-wrap: balance; }
.op-mini, .op-mini-feed { display: none; }

.op-listas { display: grid; margin-top: 26px; }
.op-lista-tit { color: var(--txt-3); margin-bottom: 12px; }
.op-lista ol { list-style: none; counter-reset: op; display: grid; gap: 8px; }
.op-lista li { counter-increment: op; position: relative; padding-left: 28px; font-size: .85rem; line-height: 1.5; color: var(--txt-2); }
.op-lista li::before { content: counter(op, decimal-leading-zero); position: absolute; left: 0; top: 0; font: 500 .6rem/2.3 var(--f-mono); color: var(--txt-3); }
.op-lista b { color: var(--txt); font-weight: 600; }
.op-marca { font: 500 .6rem/1 var(--f-mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: var(--sinal); white-space: nowrap; }

.op-feed { display: none; }
.op-feed-topo { display: flex; justify-content: space-between; align-items: center; color: var(--txt-3); margin-bottom: 10px; }
.op-feed-vivo { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); }
.op-feed-vivo i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: vivo 1.8s ease-in-out infinite; }
@keyframes vivo { 50% { opacity: .25; } }
html[data-pausa="1"] .op-feed-vivo i, html.movimento-reduzido .op-feed-vivo i { animation: none; }
.op-feed-lista { list-style: none; display: grid; gap: 7px; }
.op-feed-lista li {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start;
  padding: 9px 10px; border-radius: 9px; background: rgba(236, 238, 241, .03); border: 1px solid var(--linha);
  font-size: .78rem; line-height: 1.45; color: var(--txt-2);
}
.op-feed-lista li.ok { border-color: rgba(255, 181, 71, .45); }
.fe-hora { font: 500 .62rem/1.9 var(--f-mono); color: var(--txt-3); }
.fe-tipo { display: inline-block; font: 500 .56rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
.fe-tipo--integracao, .fe-tipo--automacao { color: var(--azul-claro); }
.fe-tipo--agente { color: var(--teal); }
.fe-tipo--pessoa { color: var(--areia); }
.st {
  display: inline-block; font: 500 .54rem/1 var(--f-mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 4px; margin-left: 6px; white-space: nowrap; vertical-align: 1px;
}
.st--espera { color: var(--ambar); border: 1px dashed rgba(255, 181, 71, .65); }
.st--ok { color: var(--ambar-ink); background: var(--ambar); }

.op-cena {
  position: relative; border: 1px solid var(--linha-2); border-radius: 18px; overflow: hidden;
  background:
    linear-gradient(var(--linha) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--linha) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--ink-1);
}
.op-cena-topo {
  display: flex; align-items: center; gap: 14px; padding: 11px 16px;
  border-bottom: 1px solid var(--linha); background: rgba(10, 12, 16, .92);
}
.op-cena-tit { font-size: .78rem; color: var(--txt-2); }
.op-cena-topo .selo { margin-left: auto; }
.op-cena-area { position: relative; width: 100%; aspect-ratio: 760 / 560; margin: 0 auto; }
.op-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.op-indicadores {
  position: absolute; left: 2.6%; right: 2.6%; bottom: 3%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; opacity: 0;
}
.op-indicadores div { background: rgba(6, 7, 9, .9); border: 1px solid var(--linha-2); border-radius: 10px; padding: 9px 12px; }
.op-indicadores span { display: block; color: var(--txt-3); font-size: .54rem; margin-bottom: 5px; }
.op-indicadores b { font-weight: 600; font-size: clamp(.8rem, .5rem + .5vw, .98rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-indicadores i { font-style: normal; color: var(--teal); padding: 0 2px; }

/* Textos SVG da cena */
.oc-txt { font: 500 11.5px var(--f-txt); fill: var(--txt); }
.oc-txt--p { font-size: 10.5px; }
.oc-num { font: 500 9px var(--f-mono); fill: var(--txt-3); letter-spacing: .06em; }
.oc-raia-txt { font: 500 9px var(--f-mono); fill: var(--txt-3); letter-spacing: .08em; }
.oc-ex { font: 500 7.5px var(--f-mono); fill: var(--txt-3); letter-spacing: .05em; text-transform: uppercase; }
.oc-marca { font: 500 8.5px var(--f-mono); letter-spacing: .06em; }
.oc-pulso { transform-box: fill-box; transform-origin: center; animation: oc-pulsa 2.8s ease-in-out infinite; }
@keyframes oc-pulsa { 0% { transform: scale(.7); opacity: .9; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
html[data-pausa="1"] .oc-pulso { animation-play-state: paused; }
html.movimento-reduzido .oc-pulso { animation: none; opacity: .5; }

/* Desktop com movimento: palco fixo por CSS (o espaço fica reservado antes do JS) */
@media (min-width: 1024px) {
  html:not(.movimento-reduzido) .op-pista { height: 400vh; }
  html:not(.movimento-reduzido) .op-palco {
    position: sticky; top: var(--topo-min); height: calc(100vh - var(--topo-min));
    display: flex; align-items: center;
  }
  html:not(.movimento-reduzido) .op-cena-area { width: min(100%, calc((100vh - var(--topo-min) - 120px) * 760 / 560)); }
  html.js:not(.movimento-reduzido) .op-batida { grid-area: 1 / 1; opacity: 0; }
  html.js:not(.movimento-reduzido) .op-batida:first-child { opacity: 1; }
  html.js:not(.movimento-reduzido) .op-lista, html.js:not(.movimento-reduzido) .op-feed { grid-area: 1 / 1; align-self: start; }
  html.js:not(.movimento-reduzido) .op-lista--depois { opacity: 0; }
  html.js:not(.movimento-reduzido) .op-listas { min-height: 27.5rem; }
  html.js:not(.movimento-reduzido) .op-batidas { min-height: 6.9em; }
  html.js:not(.movimento-reduzido) .op-feed { display: block; opacity: 0; visibility: hidden; background: var(--ink-2); border: 1px solid var(--linha-2); border-radius: 14px; padding: 14px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .op-lista li { font-size: .8rem; line-height: 1.42; }
  .op-lista ol { gap: 5px; }
  .op-batida p { font-size: clamp(1.1rem, .8rem + .9vw, 1.45rem); }
  .op-progresso { margin-bottom: 16px; }
  .op-listas { margin-top: 18px; }
}

/* Movimento reduzido no desktop: os dois fluxos lado a lado, sem fixar */
html.movimento-reduzido .op-progresso { display: none; }
html.movimento-reduzido .op-batidas { gap: 14px; }
html.movimento-reduzido .op-batida p { font-size: 1.15rem; }
html.movimento-reduzido .op-listas { grid-template-columns: 1fr 1fr; gap: 28px; }
html.movimento-reduzido .op-grade { grid-template-columns: 1fr; }
html.movimento-reduzido .op-cena-area.estatico { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); }
html.movimento-reduzido .op-cena-area.estatico > figure { margin: 0; background: var(--ink-1); padding: 12px; }
html.movimento-reduzido .op-cena-area.estatico figcaption { margin-bottom: 6px; color: var(--txt-3); }
html.movimento-reduzido .op-cena-area.estatico svg { width: 100%; height: auto; }
html.movimento-reduzido .op-indicadores { position: static; opacity: 1; grid-column: 1 / -1; padding: 12px; background: var(--ink-1); }

/* Celular: cards fixos empilhados só com CSS, um por batida */
@media (max-width: 1023px) {
  .op-pista { margin-top: 36px; }
  .op-grade { grid-template-columns: 1fr; }
  .op-cena, .op-progresso { display: none; }
  .op-batidas { display: block; }
  .op-batida {
    position: sticky; top: calc(var(--topo-min) + 14px);
    margin-bottom: 22vh; padding: 22px 20px 20px;
    background: var(--ink-2); border: 1px solid var(--linha-2); border-radius: 16px;
    box-shadow: 0 -24px 40px -18px rgba(0, 0, 0, .85);
  }
  .op-batida:nth-child(2) { top: calc(var(--topo-min) + 26px); }
  .op-batida:nth-child(3) { top: calc(var(--topo-min) + 38px); }
  .op-batida:nth-child(4) { top: calc(var(--topo-min) + 50px); margin-bottom: 0; }
  .op-batida::before { content: "Batida " counter(list-item) " de 4"; display: block; font: 500 .58rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 12px; }
  .op-batida p { font-size: 1.15rem; }
  .op-mini { display: block; width: 100%; height: auto; margin-top: 16px; }
  .op-mini-feed { display: grid; gap: 6px; margin-top: 16px; font-size: .78rem; color: var(--txt-2); }
  .op-mini-feed span { padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; background: rgba(236, 238, 241, .03); }
  .op-mini-feed b { color: var(--txt-3); margin-right: 6px; font-weight: 500; }
  .op-listas { margin-top: 32px; gap: 28px; }
  html.movimento-reduzido .op-listas { grid-template-columns: 1fr; }
  html.movimento-reduzido .op-batida { position: static; margin-bottom: 14px; }
}
.op-mini { fill: none; stroke-linecap: round; }
.op-mini .om-cx rect { fill: var(--ink-3); stroke: var(--linha-3); }
.op-mini .om-cx rect.om-espera { stroke: var(--sinal); }
.op-mini .om-l { stroke: var(--linha-3); stroke-width: 1.4; }
.op-mini .om-anel { stroke: var(--sinal); stroke-width: 1.4; stroke-dasharray: 3 4; }
.op-mini text { font: 500 8.5px var(--f-mono); fill: var(--txt-3); letter-spacing: .05em; stroke: none; }
.op-mini .om-raias rect { fill: rgba(236, 238, 241, .025); stroke: var(--linha); }
.op-mini .om-chips rect { stroke-width: 1.3; fill: var(--ink-3); }
.op-mini .om-auto { stroke: var(--azul); }
.op-mini .om-ia { stroke: var(--teal); }
.op-mini .om-aprov { stroke: var(--ambar); fill: rgba(255, 181, 71, .2) !important; }
.op-mini .om-pessoa { stroke: var(--areia); }

.op-fecho { margin-top: 64px; max-width: 760px; font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem); line-height: 1.45; letter-spacing: -.014em; font-weight: 500; }

/* ==========================================================================
   HOME-06 Árvore de classificação
   ========================================================================== */

.arvore-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.arvore-topo p { color: var(--txt-2); font-size: 1.05rem; max-width: 52ch; }
.arvore-corpo { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); position: relative; }
.arvore-diagrama { position: relative; min-height: 100%; }
.arvore-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.arvore-raiz {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  padding: 16px 20px; border: 1px solid var(--linha-3); border-radius: 12px;
  background: var(--ink-2); color: var(--txt); font-size: .74rem; letter-spacing: .14em;
}
.ar-base { stroke: var(--linha-2); stroke-width: 1.4; }
.ar-luz { stroke: var(--azul); stroke-width: 2; stroke-linecap: round; }
.ar-luz--agente { stroke: url(#ar-grad-agente); stroke-width: 2.4; }
.ar-folha { fill: var(--ink); stroke: var(--linha-3); stroke-width: 1.4; transition: fill calc(var(--dur-base) * var(--motion)), stroke calc(var(--dur-base) * var(--motion)); }
.ar-folha.acesa { fill: var(--azul); stroke: var(--azul); }
.ar-folha--agente.acesa { fill: var(--ambar); stroke: var(--ambar); }
.arvore-tabela { width: 100%; }
.arvore-tabela tr { border-top: 1px solid var(--linha); transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), background-color calc(var(--dur-micro) * var(--motion)); }
.arvore-tabela tr:last-child { border-bottom: 1px solid var(--linha); }
.arvore-tabela th { width: 14rem; text-align: left; vertical-align: top; padding: 17px 16px 17px 18px; font-weight: 600; font-size: .98rem; letter-spacing: -.01em; transition: color calc(var(--dur-micro) * var(--motion)); }
.arvore-tabela td { padding: 17px 16px 17px 0; color: var(--txt-2); font-size: .92rem; line-height: 1.5; }
.arvore-tabela tr[data-ramo="agente"] th { color: var(--ambar); }
.ar-btn {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: default;
}
.ar-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: 4px; }
.arvore-corpo.anima .arvore-tabela tr { opacity: .3; }
.arvore-corpo.anima .arvore-tabela tr.aceso { opacity: 1; }
.arvore-tabela tr:hover, .arvore-tabela tr:focus-visible, .arvore-tabela tr.destaque { background: rgba(232, 80, 2, .06); }
.arvore-tabela tr[data-ramo="agente"]:hover, .arvore-tabela tr[data-ramo="agente"].destaque { background: rgba(255, 181, 71, .07); }
.arvore-tabela tr:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.ar-luz { transition: stroke-dashoffset calc(.45s * var(--motion)) var(--ease-out), stroke-width calc(var(--dur-micro) * var(--motion)); }
.ar-luz.destaque { stroke-width: 3.2; stroke-dashoffset: 0 !important; }
.arvore-corpo.anima .arvore-tabela tr.destaque { opacity: 1; }
.ar-folha.destaque { fill: var(--azul); stroke: var(--azul); }
.ar-folha--agente.destaque { fill: var(--ambar); stroke: var(--ambar); }

html.movimento-reduzido .arvore-corpo { grid-template-columns: 1fr; }
html.movimento-reduzido .arvore-diagrama { display: none; }

@media (max-width: 1023px) {
  .arvore-topo { grid-template-columns: 1fr; gap: 20px; }
  .arvore-corpo { grid-template-columns: 1fr; margin-top: 40px; }
  .arvore-diagrama { display: none; }
  .arvore-tabela, .arvore-tabela tbody, .arvore-tabela tr, .arvore-tabela th, .arvore-tabela td { display: block; width: auto; }
  .arvore-tabela th { padding: 0; }
  .arvore-tabela td { padding: 0 18px 18px; }
  .ar-btn {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: none; border: 0; padding: 17px 18px; cursor: pointer; text-align: left; font-weight: 600; font-size: 1rem; color: inherit;
  }
  .ar-btn::after { content: "+"; font-weight: 400; color: var(--txt-3); font-size: 1.3rem; line-height: 1; }
  .ar-btn[aria-expanded="true"]::after { content: "−"; }
  .arvore-tabela tr.fechado td { display: none; }
}

/* ==========================================================================
   HOME-07 Governança
   ========================================================================== */

.gov-topo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.gov-topo p { color: var(--txt-2); font-size: 1.05rem; max-width: 48ch; }
.gov-matriz-wrap { margin-top: 56px; border: 1px solid var(--linha-2); border-radius: 18px; overflow: hidden; background: var(--ink-1); }
.gov-legenda { display: flex; gap: 14px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--linha); font-size: .84rem; color: var(--txt-2); }
.gov-matriz { width: 100%; table-layout: fixed; }
.gov-matriz th { text-align: left; padding: 20px 22px; font-size: 1rem; font-weight: 600; border-bottom: 1px solid var(--linha-2); }
.gov-matriz td { padding: 18px 22px; border-top: 1px solid var(--linha); color: var(--txt-2); font-size: .95rem; line-height: 1.5; vertical-align: top; }
.gov-matriz th + th, .gov-matriz td + td { border-left: 1px solid var(--linha); }
.gov-matriz td:nth-child(2), .gov-matriz th.gm-aprov { background: rgba(255, 181, 71, .035); }
.gm-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; margin-right: 12px; vertical-align: middle; }
.gm-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.gm-sozinho .gm-ic { color: var(--teal); background: rgba(23, 191, 176, .12); }
.gm-aprov .gm-ic { color: var(--ambar); background: rgba(255, 181, 71, .15); }
.gm-nao .gm-ic { color: var(--sinal); background: rgba(255, 107, 87, .1); }
.cad-alca { transition: transform var(--dur-base) var(--ease-out); }
.gm-cadeado.aberto .cad-alca { transform: translateY(-3.5px); }

.gov-controles { margin-top: 44px; list-style: none; columns: 2; column-gap: 56px; max-width: 920px; }
.gov-controles li { break-inside: avoid; position: relative; padding: 11px 0 11px 24px; border-bottom: 1px solid var(--linha); color: var(--txt-2); }
.gov-controles li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; transform: translateY(-50%); border: 1.5px solid var(--teal); border-radius: 2px; }
.gov-fecho { margin-top: 40px; max-width: 62ch; font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.5; font-weight: 500; }

@media (max-width: 1023px) {
  .gov-topo { grid-template-columns: 1fr; gap: 20px; }
  .gov-matriz, .gov-matriz thead, .gov-matriz tbody, .gov-matriz tr { display: contents; }
  .gov-matriz-wrap { display: grid; }
  .gov-matriz th, .gov-matriz td { display: block; border-left: 0 !important; }
  .gov-matriz th { border-top: 1px solid var(--linha-2); margin-top: 0; }
  .gov-legenda { order: 0; }
  .gov-matriz th:nth-child(1) { order: 1; } .gov-matriz tr td:nth-child(1) { order: 2; }
  .gov-matriz th:nth-child(2) { order: 3; } .gov-matriz tr td:nth-child(2) { order: 4; }
  .gov-matriz th:nth-child(3) { order: 5; } .gov-matriz tr td:nth-child(3) { order: 6; }
  .gov-matriz td { padding: 12px 22px; }
  .gov-controles { columns: 1; }
}

/* ==========================================================================
   HOME-08 Jornada
   ========================================================================== */

.jornada-topo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.jornada-topo p { color: var(--txt-2); font-size: 1.05rem; max-width: 48ch; }
.jor-palco .h2 { font-size: clamp(1.8rem, 1rem + 2vw, 2.75rem); }
.jor-palco { position: relative; }
.jor-linha { position: relative; height: 2px; margin: 0 var(--borda) 34px; background: var(--linha-2); }
.jor-linha-cheia { position: absolute; inset: 0; background: var(--azul); transform-origin: 0 50%; transform: scaleX(0); }
.jor-trilho { padding: 12px var(--borda); will-change: transform; }
.jor-passos { list-style: none; display: flex; gap: 20px; width: max-content; align-items: stretch; }
.jor-passo {
  position: relative; flex: none; width: 360px; padding: 30px 24px 24px;
  border: 1px solid var(--linha-2); border-radius: 16px; background: var(--ink-1);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), border-color calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
.jor-no {
  position: absolute; top: -9px; left: 24px; width: 16px; height: 16px; border-radius: 4px;
  background: var(--ink); border: 2px solid var(--linha-3);
  transition: background-color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion));
}
.jor-num { color: var(--txt-3); margin-bottom: 10px; }
.jor-passo h3 { font-size: 1.2rem; line-height: 1.28; letter-spacing: -.016em; margin-bottom: 12px; }
.jor-passo dl { margin: 6px 0 0; }
.jor-passo dt { font: 500 .58rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); margin-top: 16px; }
.jor-passo dd { margin: 6px 0 0; font-size: .88rem; line-height: 1.5; color: var(--txt-2); }
.jor-passos.anima .jor-passo { opacity: .38; }
.jor-passos.anima .jor-passo[data-passo="1"] { opacity: 1; }
.jor-passos.anima .jor-passo.aceso { opacity: 1; border-color: rgba(232, 80, 2, .5); }
.jor-passo.aceso .jor-no { background: var(--azul); border-color: var(--azul); }
.jor-passo[data-passo="1"] .jor-tag { box-shadow: 0 0 0 4px rgba(232, 80, 2, .12); }

.jor-mapa-item { flex: none; width: 540px; display: flex; align-items: center; }
.mapa {
  margin: 0; width: 100%;
  background: var(--papel); color: var(--papel-txt); border-radius: 12px; padding: 20px 22px 18px;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .9); transform: rotate(-1deg);
}
.mapa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1.5px solid #15171b; padding-bottom: 9px; margin-bottom: 10px; }
.mapa-tit { font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; }
.mapa-sub { color: var(--papel-txt-2); font-size: .52rem; }
.mapa-proc { font-size: .54rem; color: var(--papel-txt-2); margin-bottom: 16px; }
.mapa-fluxo { display: flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.mf-cx {
  position: relative; flex: 1; text-align: center;
  font-size: .6rem; line-height: 1.25; font-weight: 600;
  border: 1.5px solid #15171b; border-radius: 6px; padding: 8px 4px; background: #fff;
}
.mf-sx { font-size: .7rem; color: var(--papel-txt-2); }
.mf-sinal::after {
  content: attr(data-sinal); position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  font: 500 .46rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 4px; border-radius: 3px; background: #e5483a; color: #fff; white-space: nowrap;
}
.mf-sinal[data-sinal="repetição"]::after { background: #b07800; }
.mf-sinal[data-sinal="troca"]::after { background: #b8360f; }
.mapa-sinais { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .48rem; color: var(--papel-txt-2); margin-bottom: 14px; }
.ms { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ms--espera { background: #e5483a; } .ms--repeticao { background: #b07800; } .ms--troca { background: #b8360f; }
.ms--consulta { background: #b83e00; } .ms--decisao { background: #e3a02a; } .ms--risco { background: #6c3bb8; }
.mapa-h { font-size: .52rem; color: var(--papel-txt-2); margin-bottom: 4px; }
.mapa-prio { width: 100%; font-size: .66rem; }
.mapa-prio th, .mapa-prio td { padding: 6px 4px; border-top: 1px solid rgba(21, 23, 27, .14); text-align: left; vertical-align: middle; }
.mapa-prio thead th { font: 500 .46rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--papel-txt-2); border-top: 0; }
.mapa-prio tbody th { font-weight: 600; line-height: 1.3; }
.mp-tipo { display: block; font: 500 .44rem/1.5 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.mp-tipo--auto, .mp-tipo--int { color: #9a3400; } /* 6,3:1 sobre o papel */
.mp-tipo--agente { color: #075f57; }
.mapa-prio td { font-weight: 500; }
.mapa-prio td.alta { font-weight: 700; }
.mapa-prio td.media { color: var(--papel-txt-2); }

.jornada-cta { margin-top: 56px; display: grid; justify-items: start; gap: 16px; }
.jornada-micro { color: var(--txt-2); max-width: 56ch; }
.jornada-cta .link-seta { margin-top: 4px; }

@media (min-width: 1024px) {
  html:not(.movimento-reduzido) .jor-pista { height: 300vh; }
  html:not(.movimento-reduzido) .secao.jornada { padding-top: calc(var(--secao-y) - var(--palco-y)); }
  html:not(.movimento-reduzido) .jor-palco {
    position: sticky; top: var(--topo-min); height: calc(100vh - var(--topo-min));
    overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding-top: var(--palco-y);
  }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .jornada-topo { margin-bottom: 26px; }
  .jor-palco .h2 { font-size: clamp(1.6rem, 1rem + 1.4vw, 2.2rem); }
  .jornada-topo p { font-size: .95rem; }
  .jor-passo { padding: 26px 20px 18px; }
  .jor-passo dd { font-size: .82rem; }
  .jor-passo dt { margin-top: 12px; }
  .mapa { padding: 16px 18px 14px; }
}

html.movimento-reduzido .jor-linha { display: none; }
html.movimento-reduzido .jor-passos { display: grid; grid-template-columns: repeat(3, 1fr); width: auto; }
html.movimento-reduzido .jor-passo { width: auto; }
html.movimento-reduzido .jor-mapa-item { grid-column: 1 / -1; order: 7; width: auto; max-width: 640px; }
html.movimento-reduzido .jor-trilho { padding: 12px var(--gut); max-width: var(--wrap); margin: 0 auto; }

@media (max-width: 1023px) {
  .jornada-topo { grid-template-columns: 1fr; gap: 20px; }
  .jor-pista { margin-top: 0; }
  .jor-linha { display: none; }
  .jor-trilho { padding: 0 var(--gut); }
  .jor-passos, html.movimento-reduzido .jor-passos {
    display: flex; flex-direction: column; width: auto; gap: 18px;
    margin-left: 8px; padding-left: 26px; border-left: 2px solid var(--linha-2);
  }
  .jor-passo { width: auto; }
  .jor-no { left: -36px; top: 30px; }
  .jor-mapa-item, html.movimento-reduzido .jor-mapa-item { width: auto; order: 0; }
  .mapa { transform: none; }
  .mapa-fluxo { flex-wrap: wrap; }
  .mapa-fluxo .mf-sx { display: none; }
  .mf-cx { flex: 1 1 28%; }
}

/* ==========================================================================
   HOME-09 Sites e software (planta técnica)
   ========================================================================== */

.sites .wrap { position: relative; }
.sites-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.sites-topo p { color: var(--txt-2); font-size: 1.05rem; max-width: 46ch; }
.planta {
  position: relative; margin-top: 56px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--linha-2); padding: clamp(24px, 3vw, 44px);
  background:
    linear-gradient(rgba(232, 80, 2, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(232, 80, 2, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    #070b10;
}
.planta-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; overflow: visible; }
.pl-grade { stroke: rgba(232, 80, 2, .22); stroke-width: 1; }
.pl-cota { stroke: rgba(232, 80, 2, .55); stroke-width: 1; }
.pl-cota-txt { font: 500 9px var(--f-mono); fill: rgba(255, 122, 51, .8); letter-spacing: .08em; stroke: none; }
.pl-contorno { stroke: var(--azul); stroke-width: 1.4; }
.pl-cruz { stroke: var(--azul-claro); stroke-width: 1.2; }
.planta-cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.pc { position: relative; padding: 28px 26px 26px; min-height: 360px; }
.pc h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); letter-spacing: -.035em; margin-bottom: 12px; }
.pc > p { color: var(--txt-2); font-size: .95rem; line-height: 1.55; margin-bottom: 22px; }
.pc ul { list-style: none; border-top: 1px solid rgba(232, 80, 2, .25); }
.pc a {
  display: flex; justify-content: space-between; gap: 10px; padding: 12px 0;
  border-bottom: 1px solid rgba(232, 80, 2, .25); text-decoration: none; font-weight: 500;
}
.pc a::after { content: "→"; color: var(--azul-claro); transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy); }
.pc a:hover, .pc a:focus-visible { color: var(--azul-claro); }
.pc a:hover::after { transform: translateX(3px); }
/* hover e foco: a coluna aparece inteira (texto, contorno, cruzes e cota) antes de a rolagem chegar nela */
.pc > * { transition: opacity calc(.35s * var(--motion)) var(--ease-out), transform calc(.35s * var(--motion)) var(--ease-out); }
.pc.foco > * { opacity: 1 !important; transform: none !important; }
.pl-contorno { transition: stroke-dashoffset calc(.45s * var(--motion)) var(--ease-out); }
.pl-contorno.foco { stroke-dashoffset: 0 !important; }
.pl-cruz, .pl-cota-g { transition: opacity calc(.35s * var(--motion)) var(--ease-out); }
.pl-cruz.foco, .pl-cota-g.foco { opacity: 1 !important; }

.sites-base { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.sites-esp { color: var(--txt-2); max-width: 72ch; }
.sites-esp a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; margin-left: 4px; }
.urgencia {
  margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  padding: 16px 20px; border: 1px solid rgba(255, 107, 87, .38); border-radius: 12px; background: rgba(255, 107, 87, .05);
}
.urgencia-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--sinal); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.urgencia p { flex: 1 1 320px; font-weight: 500; }
.urgencia a { font-weight: 600; color: var(--txt); text-underline-offset: 4px; }

.wf-pop {
  position: absolute; z-index: 5; width: 232px; padding: 10px 10px 8px; border-radius: 12px;
  background: var(--ink-3); border: 1px solid rgba(232, 80, 2, .45); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .95);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity calc(var(--dur-micro) * var(--motion)) linear, transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.wf-pop.on { opacity: 1; transform: none; }
.wf-pop svg { width: 100%; height: auto; }
.wf-pop p { margin-top: 8px; font: 500 .54rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.wf-pop p b { color: var(--azul-claro); font-weight: 500; }

@media (max-width: 1023px) {
  .sites-topo { grid-template-columns: 1fr; gap: 20px; }
  .planta-cols { grid-template-columns: 1fr; }
  .pc { min-height: 0; padding: 20px 4px; border-bottom: 1px solid rgba(232, 80, 2, .25); }
  .pc:last-child { border-bottom: 0; }
  .planta-svg { display: none; }
}

/* ==========================================================================
   HOME-10 Cases
   ========================================================================== */

.cases-topo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cases-topo p { color: var(--txt-2); font-size: 1.05rem; max-width: 52ch; }
.cases-rolo {
  --pad: var(--borda);
  margin-top: 48px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--pad);
  padding: 6px 0 26px; scrollbar-width: none; cursor: grab;
}
.cases-rolo::-webkit-scrollbar { display: none; }
.cases-rolo.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.cases-rolo.arrastando a { pointer-events: none; }
.cases-rolo:focus-visible { outline-offset: -2px; }
.cases-lista { list-style: none; display: flex; gap: 20px; width: max-content; padding: 0 var(--pad); }
.cases-lista li { scroll-snap-align: start; display: flex; }
.case {
  display: flex; flex-direction: column; width: 400px; text-decoration: none;
  border-radius: 16px; border: 1px solid var(--linha-2); background: var(--ink-1); overflow: hidden;
  transition: border-color calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.case:hover { border-color: var(--linha-3); transform: translateY(calc(-3px * var(--motion))); }
.case-img { display: block; aspect-ratio: 16 / 10; background: var(--ink-3); overflow: hidden; position: relative; }
.case-img img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: transform var(--dur-slow) var(--ease-out); }
.case:hover .case-img img { transform: scale(calc(1 + .035 * var(--motion))); }
/* thumb em vídeo, como no site atual: aparece por cima da imagem quando começa a tocar */
.case-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s, transform var(--dur-slow) var(--ease-out); }
.case-img video.toca { opacity: 1; }
.case:hover .case-img video { transform: scale(calc(1 + .035 * var(--motion))); }
.case-img--ex {
  background:
    linear-gradient(rgba(232, 80, 2, .08) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(232, 80, 2, .08) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(160deg, #101823, #0a0d12);
}
.case-img--ex::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 16%; bottom: 0;
  border: 1px solid rgba(236, 238, 241, .18); border-bottom: 0; border-radius: 8px 8px 0 0;
  background:
    linear-gradient(rgba(236, 238, 241, .14), rgba(236, 238, 241, .14)) 6% 10% / 30% 6% no-repeat,
    linear-gradient(rgba(232, 80, 2, .5), rgba(232, 80, 2, .5)) 6% 30% / 54% 12% no-repeat,
    linear-gradient(rgba(236, 238, 241, .08), rgba(236, 238, 241, .08)) 6% 58% / 26% 30% no-repeat,
    linear-gradient(rgba(236, 238, 241, .08), rgba(236, 238, 241, .08)) 37% 58% / 26% 30% no-repeat,
    linear-gradient(rgba(236, 238, 241, .08), rgba(236, 238, 241, .08)) 68% 58% / 26% 30% no-repeat,
    rgba(10, 13, 18, .9);
}
.case-img--mapa::before {
  background:
    radial-gradient(circle at 30% 60%, rgba(23, 191, 176, .7) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 40%, rgba(255, 181, 71, .8) 0 4px, transparent 5px),
    radial-gradient(circle at 76% 70%, rgba(23, 191, 176, .7) 0 4px, transparent 5px),
    linear-gradient(115deg, transparent 46%, rgba(236, 238, 241, .25) 46% 48%, transparent 48%),
    rgba(10, 13, 18, .9);
}
.case-img--ex::after {
  content: "imagem de exemplo"; position: absolute; left: 10px; top: 10px;
  font: 500 .54rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: #ddd2ff; border: 1px dashed rgba(183, 156, 255, .6); border-radius: 4px; padding: 4px 6px; background: rgba(16, 13, 26, .8);
}
.case-cli { padding: 20px 22px 0; font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.case-linha { padding: 8px 22px 0; color: var(--txt-2); font-size: .92rem; line-height: 1.5; }
.case-num { margin-top: auto; padding: 18px 22px 20px; font: 500 .62rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--azul-claro); }
.case-linha + .case-num { padding-top: 18px; }
.case > :last-child:not(.case-num) { padding-bottom: 22px; }

.cases-base { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cases-base .link-seta { margin-top: 0; }
.cases-nav { display: flex; gap: 8px; }
.cases-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha-3); background: none; cursor: pointer;
  display: inline-grid; place-items: center; transition: border-color calc(var(--dur-micro) * var(--motion));
}
.cases-nav button:hover { border-color: var(--azul); }
.cases-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

html.movimento-reduzido .cases-rolo { overflow: visible; cursor: auto; }
html.movimento-reduzido .cases-lista { display: grid; grid-template-columns: repeat(3, 1fr); width: auto; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
html.movimento-reduzido .case { width: auto; }
html.movimento-reduzido .cases-nav { display: none; }

@media (max-width: 1023px) {
  .cases-topo { grid-template-columns: 1fr; gap: 20px; }
  .case { width: 66vw; max-width: 400px; }
  .cases-nav { display: none; }
  html.movimento-reduzido .cases-lista { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HOME-11 CTA final
   ========================================================================== */

.final-h2 { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.6rem); max-width: none; letter-spacing: -.045em; }
.final-grade { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.final-col {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(28px, 3vw, 44px); border-radius: 18px; border: 1px solid var(--linha-2); background: var(--ink-1);
}
.final-col h3 { font-size: 1.35rem; line-height: 1.25; letter-spacing: -.02em; max-width: 24ch; }
.final-col p { color: var(--txt-2); max-width: 44ch; }
.final-col .btn { margin-top: 14px; }
.final-wa { margin-top: 30px; color: var(--txt-2); }

/* ---------- Marca X em 3D (js/marca-x.js): monta atrás da HOME-11 e assenta
     como fundo do rodapé. As regras só valem com as classes que o script põe
     no html, e o script só roda na home. ---------- */
.marca-x { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
/* a marca d'água "DIGITAL PIXEL" dá lugar ao X; sem ela, o rodapé precisa de respiro em cima */
html.tem-marca-x .rodape-marca { display: none; }
html.tem-marca-x .rodape { padding-top: clamp(48px, 6vw, 96px); }
/* com o X ativo, o rodapé fica transparente para ele aparecer por trás */
/* rodapé transparente com o X: ver "Tons na home" */
/* e os cartões da HOME-11 viram vidro escuro, como o formulário da ShieldWP,
   para o X aparecer desfocado através deles */
html.marca-x-ativa .final-col {
  background: rgba(10, 12, 16, .55);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
/* movimento reduzido, sem WebGL ou sem rede: o X estático, desenhado no rodapé */
html.marca-x-estatica .rodape::before {
  content: ""; position: absolute; z-index: -1; inset: 6% 8% 14%;
  background: url("../img/marca-x.svg") center / contain no-repeat;
  opacity: .06; pointer-events: none;
}
.final-wa a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 767px) { .final-grade { grid-template-columns: 1fr; } }

/* ==========================================================================
   HOME-12 FAQ
   ========================================================================== */

.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.faq-in .h2 { position: sticky; top: calc(var(--topo-min) + 40px); }
.faq-in .nota { grid-column: 1 / -1; }
.faq-lista { border-top: 1px solid var(--linha-2); }
.faq-lista details { border-bottom: 1px solid var(--linha-2); }
.faq-lista summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px;
  padding: 22px 0; font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em;
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 6px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat;
  transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.faq-lista details[open] summary::after { transform: rotate(45deg); }
.faq-lista summary:hover { color: var(--azul-claro); }
.faq-r { overflow: hidden; }
.faq-r p { padding: 0 0 24px; color: var(--txt); font-weight: 500; max-width: 70ch; line-height: 1.65; }
@media (max-width: 1023px) {
  .faq-in { grid-template-columns: 1fr; gap: 28px; }
  .faq-in .h2 { position: static; }
}

/* ==========================================================================
   Títulos principais da home na identidade da landing da ShieldWP
   (20/10/2026): Familjen Grotesk 400, entrelinha curta e espaçamento
   fechado, com a entrada letra a letra em desfoque (js/titulos-desfoque.js).
   Os tamanhos continuam os da home; a fonte e o desenho vêm de lá.
   ========================================================================== */
.hero-c .hc-h1,
.hero-c .hc-cap-frase,
.pagina-home .h2 {
  font-family: var(--f-shield);
  font-weight: 400;
  font-synthesis: none;
}
/* o H1 no tamanho da ShieldWP (6,0vw, de 40 a 94px), limitado pela altura
   para a janela baixa não empurrar o título sobre o parágrafo; duas linhas
   fixas e a terceira trocando, como lá */
.hero-c .hc-h1 {
  /* com a frase principal em duas linhas, o título tem quatro: o teto pela
     altura desceu de 11,5vh para 9,6vh para o parágrafo não encostar.
     Em 30/10/2026 a segunda linha virou "a operação da sua empresa" e o corpo
     desceu mais 10%: em 1530x880 a linha terminava em 966px e cobria os
     cartões da cena, que começam em 880px, e restavam 8px até o parágrafo.
     Com 8,6vh ela termina em 879px e a folga sobe para 40px. */
  font-size: clamp(40px, min(6.0vw, 8.6vh), 94px);
  line-height: .9; letter-spacing: -.06em; color: #d8d8d8;
}
.hero-c .hc-h1 .hc-linha { display: block; }
.hero-c .hc-h1 .hc-troca { color: var(--txt-tit); }
/* a frase principal ("para pessoas e IA trabalharem juntas.") ocupa duas
   linhas; as outras, uma. A troca reserva as duas linhas para o parágrafo de
   baixo não pular quando entra uma frase curta */
.hero-c .hc-h1 .hc-troca { max-width: 9.4em; min-height: 1.8em; }
/* no celular o mínimo de 40px deixava largura sobrando */
@media (max-width: 1023px) {
  .hero-c .hc-h1 { font-size: clamp(40px, 12vw, 64px); }
}
.pagina-home .h2 { line-height: .96; letter-spacing: -.05em; }
/* frases dos capítulos como o display-2 da ShieldWP: a frase apagada e o
   destaque no branco. As palavras de poder com cor semântica (pessoa, IA,
   sistema, aprovação, automação, espera) e o reflexo de "novidade em IA"
   voltaram em 29/10/2026, a pedido do Erik: elas ligam o texto às cores da
   cena. A fonte, o peso e o tamanho continuam os da ShieldWP. */
.hero-c .hc-cap-frase { letter-spacing: -.045em; color: #7c8089; }
.hero-c .hc-cap-frase b { font-weight: 400; }
.hero-c .hc-cap-frase b:not([class*="cor-"]) { color: #ededed; }
/* as linhas do H1 são explícitas: sem medida em ch */
.hero-c .hc-h1 { max-width: none; }

/* entrada letra a letra: só com o script ativo; sem ele, o texto aparece */
.td-palavra { display: inline-block; white-space: nowrap; }
html.td-ativo .td .td-letra {
  display: inline-block; opacity: 0; filter: blur(12px);
  transition: opacity .9s ease, filter .9s ease; transition-delay: var(--d, 0ms);
}
html.td-ativo .td.td-on .td-letra { opacity: 1; filter: blur(0); }
/* troca da frase final do H1: sai desfocando, entra do mesmo jeito */
html.td-ativo .td.td-on .td-letra.sai { opacity: 0; filter: blur(12px); transition-duration: .7s; }
html.td-ativo .td.td-on .td-letra.pre { opacity: 0; filter: blur(12px); transition: none; }

/* rótulos editoriais da home (ver base.css) */
.hc-cap-olho, .frente-rot, .jor-num {
  font-family: var(--f-rot); font-weight: 500;
  font-size: 11px; letter-spacing: .1em; line-height: 1.3;
}

/* ==========================================================================
   Escala dos títulos da home (20/10/2026): os H2 no display-2 da ShieldWP
   (34 a 66px) e os H3 dos cartões na mesma Familjen, maiores. O H2 da
   HOME-11 continua acima dos outros, porque é o fechamento.
   ========================================================================== */
.pagina-home .h2 { font-size: clamp(34px, 4.6vw, 66px); line-height: .94; }
.pagina-home .h2.final-h2 { font-size: clamp(40px, 6.2vw, 96px); line-height: .92; }
.pagina-home main h3:not(.op-lista-tit) {
  font-family: var(--f-shield); font-weight: 500; font-synthesis: none; letter-spacing: -.03em;
}
.pagina-home .jor-passo h3 { font-size: clamp(1.25rem, 1rem + .6vw, 1.55rem); line-height: 1.12; }
.pagina-home .pc h3 { font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem); line-height: 1; }
.pagina-home .final-col h3 { font-size: clamp(1.5rem, 1.15rem + .9vw, 1.95rem); line-height: 1.08; }

/* ==========================================================================
   Legibilidade (20/10/2026): auditoria do texto renderizado na home.
   Texto de interface (sobretítulos, selos, legendas, rótulos de passo,
   números dos cases) não fica abaixo de 11px. Nas ilustrações, que já são
   aria-hidden, o texto sobe o que cabe sem desmontar o desenho.
   ========================================================================== */
.pagina-home .selo,
.pagina-home .selo--mini,
.pagina-home .op-indicadores .mono,
.pagina-home .op-progresso li,
.pagina-home .op-marca,
.pagina-home .jor-passo dt,
.pagina-home .jor-tag,
.pagina-home .case-num,
.pagina-home .hc-legenda-grade,
.pagina-home .hc-marcos span { font-size: 11px; }
/* miniatura do mapa de prioridades (HOME-08): era de 7 a 8,6px */
.pagina-home .mapa-sub, .pagina-home .mapa-h, .pagina-home .mapa-proc { font-size: 10px; }
.pagina-home .mapa-sinais li, .pagina-home .mapa-prio thead th { font-size: 9.5px; }
.pagina-home .mp-tipo { font-size: 9px; color: #4f4a40; }
.pagina-home .mapa-fluxo .mf-cx, .pagina-home .mapa-prio td { font-size: 11px; }
/* cena da HOME-05 e cotas da planta (HOME-09), em unidades do desenho */
.pagina-home .oc-ex { font-size: 9px; }
.pagina-home .oc-marca { font-size: 9.5px; }
.pagina-home .oc-num, .pagina-home .oc-raia-txt { font-size: 10px; }
.pagina-home .pl-cota-txt { font-size: 10.5px; }

/* ==========================================================================
   Tons na home: dobras escuras com fundo próprio; HOME-11, FAQ e rodapé
   ficam transparentes e o verde vem do fundo da página, que muda quando a
   HOME-11 entra (js/globais.js). Assim o X em 3D, que fica atrás das
   seções, continua aparecendo sobre o verde.
   ========================================================================== */
.pagina-home .hero-c,
.pagina-home .secao:not(.tom-claro) { background-color: var(--ink); }
/* o verde é o padrão (sem JavaScript, ou antes dele, as dobras já ficam
   legíveis); só com o X ativo elas ficam transparentes sobre o fundo verde */
.pagina-home #home-11, .pagina-home #home-12 { background: var(--sage-claro); }
html.marca-x-ativa.fim-verde .pagina-home #home-11,
html.marca-x-ativa.fim-verde .pagina-home #home-12 { background: transparent; }
body { transition: background-color calc(.7s * var(--motion)) var(--ease-state); }
html.fim-verde body { background-color: var(--sage-claro); }
html.marca-x-ativa.fim-verde .pagina-home .rodape { background: transparent; }
/* cartões da HOME-11 em vidro claro sobre o verde */
html.marca-x-ativa .tom-claro .final-col, .tom-claro .final-col {
  background: rgba(255, 255, 255, .34); border-color: rgba(24, 33, 19, .14);
}
/* sobre o verde, o vidro do header escurece: o texto branco do menu sai de
   ~4,8:1 para ~6:1 contra o fundo misturado */
html.fim-verde .topo-in::before { background: rgba(10, 10, 12, .56); }
/* X estático (sem WebGL ou com movimento reduzido): em musgo sobre o pálido */
html.marca-x-estatica .rodape::before { filter: brightness(0); opacity: .05; }

/* ---------- FAQ num painel de vidro claro (20/10/2026) ----------
   O mesmo material do header, na versão clara: o X em 3D segue visível,
   desfocado atrás das perguntas, e o texto fica sobre uma superfície
   uniforme. A refração das bordas vem de js/vidro.js. */
.faq-lista {
  position: relative; isolation: isolate;
  border-top: 0; padding: 6px clamp(20px, 2.6vw, 36px);
  border-radius: 20px;
  background: rgba(239, 241, 232, .62);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(24, 33, 19, .06),
              0 24px 60px -28px rgba(24, 33, 19, .35);
  -webkit-backdrop-filter: blur(18px) saturate(1.6) brightness(1.04);
  backdrop-filter: blur(18px) saturate(1.6) brightness(1.04);
  backdrop-filter: url(#dp-vidro-faq) blur(10px) saturate(1.6) brightness(1.04);
}
.faq-lista details:last-child { border-bottom: 0; }
@media (prefers-reduced-transparency: reduce) {
  .faq-lista { background: #eef0e7; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   HOME-09b · Vídeo em destaque (referência: squared-media.nl, escrito do
   zero). Um palco fixo de 100svh: atrás, "Veja na prática" em letras
   gigantes numa faixa que desliza com a rolagem; na frente, o vídeo num
   cartão que cresce até a tela inteira (js/reel.js, via clip-path).
   ========================================================================== */
/* Sem fundo próprio: o palco fica sobre o ink e o ruído do body, como as
   seções escuras vizinhas, e o vídeo lê como tela acesa no escuro. */
.reel { position: relative; height: 280svh; }
.reel-palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
.reel-faixa {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  display: flex; gap: .35em; white-space: nowrap; will-change: transform;
  font: 400 clamp(88px, 15vw, 260px)/.86 var(--f-shield);
  letter-spacing: -.055em; text-transform: uppercase; color: var(--txt-tit);
}
.reel-video {
  position: absolute; inset: 0; z-index: 1;
  --t: 30%; --l: 30%; --r: 12px;
  clip-path: inset(var(--t) var(--l) var(--t) var(--l) round var(--r));
  will-change: clip-path;
}
.reel-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0c0f; }
.reel-cta {
  position: absolute; left: var(--gut); bottom: clamp(24px, 5vh, 48px);
  max-width: calc(100% - 2 * var(--gut));
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 12px; text-decoration: none;
  font: 600 .95rem/1 var(--f-txt); color: #fff;
  background: rgba(10, 10, 12, .5); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: var(--cta, 0); pointer-events: none; transition: background-color .2s;
}
.reel-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.reel-cta:hover { background: var(--acao); color: var(--acao-ink); border-color: transparent; }
.reel.cheio .reel-cta { pointer-events: auto; }
.reel-dica {
  position: absolute; left: 50%; bottom: clamp(28px, 7vh, 72px); translate: -50% 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font: 600 11px/1 var(--f-txt); letter-spacing: .2em; text-transform: uppercase; color: var(--txt-2);
  opacity: var(--dica, 1);
}
.reel-dica i { width: 7px; height: 7px; border-radius: 50%; background: var(--acao); }
/* sem animação: o vídeo vira um bloco comum, sem palco fixo */
html.movimento-reduzido .reel, .reel.estatico { height: auto; padding: var(--secao-y) 0; }
html.movimento-reduzido .reel-palco, .reel.estatico .reel-palco { position: static; height: auto; display: block; overflow: visible; }
html.movimento-reduzido .reel-faixa, .reel.estatico .reel-faixa,
html.movimento-reduzido .reel-dica, .reel.estatico .reel-dica { display: none; }
html.movimento-reduzido .reel-video, .reel.estatico .reel-video {
  position: relative; inset: auto; clip-path: none; width: calc(min(100%, var(--wrap)) - 2 * var(--gut));
  margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
}
html.movimento-reduzido .reel-cta, .reel.estatico .reel-cta { opacity: 1; pointer-events: auto; }
/* celular: o cartão cobriria o texto inteiro; a faixa sobe e a dica fica
   acima da barra fixa de ações */
@media (max-width: 767px) {
  .reel-faixa { top: 26%; font-size: clamp(64px, 19vw, 96px); }
  .reel-dica { bottom: 112px; }
}
/* sem animação há controles do vídeo embaixo: o link vai para o canto de cima */
html.movimento-reduzido .reel-cta, .reel.estatico .reel-cta { top: 16px; left: 16px; bottom: auto; }
/* o painel de vidro claro do FAQ só faz sentido sobre o sálvia; se um FAQ
   ficar num fundo escuro, ele vira vidro escuro, para o texto não sumir */
:not(.tom-claro) > .wrap > .faq-in .faq-lista,
.secao.faq:not(.tom-claro) .faq-lista {
  background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px -28px rgba(0, 0, 0, .6);
}