/*
 * GIP Suite — site gipsuite.com — componentes e páginas da landing v5 (07/10/2026).
 * Mundo visual: site/DESIGN.md ("Papel branco, tinta navy, prova anotada"). Composição, recortes e anotações:
 * docs/lancamento/landing/conselho/diretor-de-arte-spec-v5-2026-10-07.md.
 * CSP: nada de estilo embutido no HTML. Cores, tamanhos de fonte e raios só pelos tokens de tokens.css
 * (transparência via color-mix()). Ícones: Lucide 0.308.0 (ISC; partes MIT do Feather), como <symbol> no HTML.
 * Um significado por cor: verde-500 preenchido = ação; navy = tinta, estrutura e anotação; vermelho = erro;
 * a cor de cada portfólio = só o ícone do portfólio e a marca de 3 px da aba ativa.
 */

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--navy-400) transparent;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--f-texto);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-synthesis: none;
}
body > main {
  flex: 1 0 auto;
}
h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
}
img,
svg {
  display: block;
}
img {
  max-width: 100%;
  height: auto;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--navy-200);
  color: var(--navy-900);
}
a {
  color: var(--navy-900);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) {
  a:hover {
    text-decoration-thickness: 1.5px;
  }
}
input,
textarea {
  caret-color: var(--navy-900);
}
:focus-visible {
  outline: 2px solid var(--foco, var(--navy-900));
  outline-offset: 2px;
}
.nw {
  white-space: nowrap;
}
.num {
  font-variant-numeric: tabular-nums;
}
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.container {
  width: min(var(--conteiner), 100% - 2 * var(--margem));
  margin-inline: auto;
}
[id] {
  scroll-margin-top: calc(var(--cabecalho) + 16px);
}
/* Parágrafos sem palavra sozinha na última linha (títulos usam balance) */
p {
  text-wrap: pretty;
}

/* Texto e imagem por largura: celular (< 768) × computador; rótulo curto (< 1024) × longo */
@media (max-width: 767px) {
  .so-desk {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .so-cel {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .so-largo {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .so-estreito {
    display: none !important;
  }
}
@media (max-width: 1279px) {
  .so-1280 {
    display: none !important;
  }
}
@media (min-width: 1280px) {
  .ate-1279 {
    display: none !important;
  }
}

/* Ir para o conteúdo: primeiro foco da página */
.pular {
  position: absolute;
  left: 8px;
  top: -200px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-controle);
  background: var(--navy-900);
  color: var(--branco);
  font-weight: 600;
  text-decoration: none;
}
.pular:focus-visible {
  top: 8px;
}

/* ---------- Tipos (escala fechada da v5) ---------- */
.display,
.headline,
.headline-apoio {
  font-family: var(--f-titulo);
  font-weight: 700;
  color: var(--navy-900);
  text-wrap: balance;
}
.display {
  font-size: var(--fs-display);
  line-height: 1.03;
  letter-spacing: -0.037em;
}
.headline {
  font-size: var(--fs-headline);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.headline-apoio {
  font-size: var(--fs-headline-apoio);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.lead {
  max-width: 64ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--tinta-2);
}
.fato__titulo,
.regra__termo,
.modulos__titulo,
.passos__titulo,
.estado__titulo,
.fio__rotulo,
.aba__nome,
.faq__item summary {
  font-family: var(--f-titulo);
  font-weight: 650;
  font-size: var(--fs-subtitulo-s);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}

/* ---------- Botão "Agendar demonstração" (a única ação): plano, sem sombra ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--verde-700);
  border-radius: var(--r-controle);
  background: var(--verde-500);
  color: var(--branco);
  font-family: var(--f-texto);
  font-size: var(--fs-button);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) {
  .btn:hover {
    background: var(--verde-hover);
  }
}
.btn:active {
  background: var(--verde-ativo);
  transform: translateY(1px);
}
.btn__seta {
  width: 17px;
  height: 17px;
  flex: none;
}
.btn__girando {
  display: none;
  width: 18px;
  height: 18px;
  flex: none;
}
.btn[aria-busy='true'] .btn__girando {
  display: block;
}
.btn[aria-busy='true'] .btn__seta {
  display: none;
}
.btn[disabled] {
  cursor: progress;
}
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition:
      background-color 150ms var(--saida),
      border-color 150ms var(--saida),
      transform 80ms var(--saida);
  }
  .btn__seta {
    transition: transform 150ms var(--saida);
  }
  @media (hover: hover) {
    .btn:hover {
      border-color: var(--verde-800);
      transform: translateY(-1px);
    }
    .btn:hover .btn__seta {
      transform: translateX(3px);
    }
  }
  .btn[aria-busy='true'] .btn__girando {
    animation: girar 800ms linear infinite;
  }
}
@keyframes girar {
  to {
    transform: rotate(1turn);
  }
}
.btn--cabecalho {
  height: 44px;
  padding: 0 14px;
  font-size: var(--fs-small);
}
@media (min-width: 768px) {
  .btn--cabecalho {
    padding: 0 18px;
    font-size: var(--fs-label);
  }
}

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--cabecalho);
  background: var(--branco);
  border-bottom: 1px solid var(--filete);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cabecalho {
      animation: filete-cabecalho linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 64px;
    }
  }
}
@keyframes filete-cabecalho {
  0%,
  12.5% {
    border-bottom-color: transparent;
  }
  100% {
    border-bottom-color: var(--filete);
  }
}
.cabecalho__linha {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 44px;
  min-height: 44px;
  color: var(--marca-onyx);
  text-decoration: none;
}
.marca__simbolo {
  width: 36px;
  height: 36px;
  flex: none;
}
.marca__nome {
  font-family: var(--f-marca);
  font-weight: 600;
  font-size: var(--fs-brand);
  line-height: 1.25;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.marca__nome--complemento {
  color: var(--tinta-fraca);
}
.menu {
  display: none;
}
.btn--cabecalho {
  margin-left: auto;
}
@media (max-width: 389px) {
  .cabecalho .marca__nome {
    display: none;
  }
}
@media (min-width: 1024px) {
  .menu {
    display: block;
    margin-left: auto;
  }
  .menu ul {
    display: flex;
    gap: 28px;
    list-style: none;
  }
  .menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--navy-700);
    font-size: var(--fs-label);
    font-weight: 500;
    text-decoration: none;
  }
  @media (hover: hover) {
    .menu a:hover {
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 4px;
    }
  }
  .btn--cabecalho {
    margin-left: 28px;
  }
}
/* Abaixo de 1024 px, com JS: o botão do cabeçalho some enquanto o da abertura está na tela.
   visibility + opacity: o espaço fica reservado (nenhum salto) e o botão sai da ordem do Tab. */
@media (max-width: 1023px) {
  .cabecalho--sem-acao .btn--cabecalho {
    visibility: hidden;
    opacity: 0;
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .cabecalho--transicao .btn--cabecalho {
    transition:
      opacity 150ms var(--saida),
      visibility 0s linear 0s;
  }
  .cabecalho--transicao.cabecalho--sem-acao .btn--cabecalho {
    transition:
      opacity 150ms var(--saida),
      visibility 0s linear 150ms;
  }
}

/* ---------- Menu do celular (abaixo de 1024 px): <details> nativo, abre e fecha sem JS ----------
   O painel (absolute) e o véu (fixed) ficam fora do fluxo: o cabeçalho continua com 56/64 px e nada da página se
   move. O véu é o ::before do próprio <summary>: tocar fora fecha o menu, com ou sem JS. Nenhum movimento. */
.menu-cel {
  flex: none;
  margin-right: -16px; /* o alvo de 44 px avança 16 px na margem da página; o traço do ícone fica na borda do texto */
}
.menu-cel__botao {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-controle);
  color: var(--navy-900);
  list-style: none;
  cursor: pointer;
}
.menu-cel__botao::-webkit-details-marker {
  display: none;
}
.menu-cel__icone {
  width: 24px;
  height: 24px;
}
.menu-cel__icone--fechar,
.menu-cel[open] .menu-cel__icone--abrir {
  display: none;
}
.menu-cel[open] .menu-cel__icone--fechar {
  display: block;
}
.menu-cel[open] > .menu-cel__botao::before {
  content: '';
  position: fixed;
  inset: var(--cabecalho) 0 0;
  background: color-mix(in srgb, var(--navy-950) 40%, transparent);
}
.menu-cel__painel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--cabecalho));
  max-height: calc(100dvh - var(--cabecalho));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--margem) 24px;
  background: var(--branco);
  border-top: 1px solid var(--filete);
}
.menu-cel__lista {
  list-style: none;
}
.menu-cel__lista a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--filete);
  font-family: var(--f-titulo);
  font-size: var(--fs-subtitulo-s);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy-900);
  text-decoration: none;
}
.menu-cel__acao {
  display: flex;
  width: 100%;
  margin-top: 24px;
}
/* Menu aberto: o botão do cabeçalho cede o lugar ao do painel (uma ação à vista, sem salto) */
.cabecalho:has(.menu-cel[open]) .btn--cabecalho {
  visibility: hidden;
}
/* Páginas sem botão no cabeçalho (/obrigado/ e as falhas): o CTA é quem empurra o menu para a direita */
.menu-cel--sem-acao {
  margin-left: auto;
}
@media (hover: hover) {
  .menu-cel__botao:hover {
    background: var(--navy-50);
  }
  .menu-cel__lista a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
}
@media (max-width: 599px) {
  .btn--cabecalho {
    padding: 0 12px;
  }
}
@media (min-width: 600px) {
  .menu-cel__acao {
    width: fit-content;
  }
}
@media (max-width: 1023px) {
  .cabecalho__linha {
    gap: 8px;
  }
}
/* Sem botão no cabeçalho há folga: a marca por extenso volta de 380 a 389 px, como era antes do menu */
@media (min-width: 380px) and (max-width: 389px) {
  .cabecalho:has(.menu-cel--sem-acao) .marca__nome {
    display: inline;
  }
}
@media (min-width: 1024px) {
  .menu-cel {
    display: none;
  }
}

/* ---------- Palco (fundo do tema escuro do produto) e moldura da tela real ---------- */
.palco {
  position: relative;
  overflow: hidden;
  overflow: clip; /* recorta sem virar área rolável (scrollIntoView, busca e foco não deslocam a tela) */
  border-radius: var(--r-superficie);
  background: linear-gradient(
    165deg,
    var(--navy-800) 0%,
    var(--navy-900) 52%,
    var(--navy-950) 100%
  );
  box-shadow: var(--sombra-palco);
}
/* O único palco com brilho: a aurora da abertura (assinatura aprovada pelo PM; sem significado) */
.palco--abertura {
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  background-image:
    radial-gradient(
      58% 82% at 6% 104%,
      color-mix(in srgb, var(--verde-500) 46%, transparent),
      transparent 62%
    ),
    radial-gradient(
      52% 78% at 98% -4%,
      color-mix(in srgb, var(--azul-600) 70%, transparent),
      transparent 64%
    ),
    radial-gradient(
      40% 55% at 62% 78%,
      color-mix(in srgb, var(--violeta-600) 30%, transparent),
      transparent 72%
    ),
    linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 52%, var(--navy-950) 100%);
}
/* Filete de registro: dá ao palco da prova uma profundidade legível mesmo parado. */
.palco--abertura::before {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--branco) 22%, transparent);
  border-radius: var(--r-tela);
  pointer-events: none;
}
/* A moldura de prova só existe na entrada: mede o espaço da tela antes de a anotação fixar o saldo. */
.palco--abertura::after {
  content: '';
  position: absolute;
  inset: 12px;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--branco) 42%, transparent);
  border-radius: var(--r-tela);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.moldura {
  position: relative;
  overflow: hidden;
  overflow: clip; /* recorta sem virar área rolável (scrollIntoView, busca e foco não deslocam a tela) */
  border-radius: var(--r-tela);
  background: var(--tela-produto);
  box-shadow: var(--sombra-tela);
}
.moldura__img {
  position: relative;
}
.moldura__img img {
  width: 100%;
  height: auto;
}
.moldura__img video {
  display: block;
  width: 100%;
  height: auto;
}

/* Legenda + chip "Dados fictícios" (fora do palco, 16 px abaixo) */
.legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 6px 8px;
  margin-top: 16px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tinta-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pilula);
  background: var(--navy-100);
  color: var(--navy-700);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-pilula);
  background: var(--navy-500);
}

/* ---------- Anotação navy (a assinatura do site): contorno de 2 px + rótulo navy com texto branco ---------- */
.anotacao {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.anota {
  position: absolute;
}
.anota__borda {
  position: absolute;
  inset: 0;
  border: 2px solid var(--navy-900);
  border-radius: var(--r-controle);
}
.anota__rotulo {
  position: absolute;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--r-rotulo);
  background: var(--navy-900);
  color: var(--branco);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* Cor de cada portfólio: só no ícone e na marca da aba ativa */
.pilar-clientes {
  --p-cor: var(--azul-600);
}
.pilar-contratos {
  --p-cor: var(--verde-700);
}
.pilar-projetos {
  --p-cor: var(--violeta-600);
}
.pilar-recursos {
  --p-cor: var(--ambar-600);
}

/* ---------- 1. Abertura (v5.1, spec §9.1) ---------- */
.abertura {
  padding-top: 40px;
}
.abertura__titulo {
  max-width: 900px;
}
/* O H1 quebra por frase: cada frase numa linha quando cabe; se não couber, quebra dentro dela */
.abertura__titulo .frase {
  display: inline-block;
}
.abertura__sub {
  margin-top: 18px;
  max-width: 64ch;
}
.abertura__acao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.abertura__acao .btn {
  width: 100%;
}
.abertura__micro {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tinta-2);
}
.abertura__figura {
  margin-top: 28px;
}
/* A abertura apresenta primeiro a promessa e então a prova: uma única sequência curta, sem ocultar conteúdo
   quando o navegador não anima. A tela sobe pelo próprio recorte, antes de a anotação apontar o saldo. */
@media (prefers-reduced-motion: no-preference) {
  .abertura__titulo,
  .abertura__sub,
  .abertura__acao {
    animation: abertura-texto-entra 500ms var(--saida) both;
  }
  .abertura__sub {
    animation-delay: 80ms;
  }
  .abertura__acao {
    animation-delay: 160ms;
  }
  .abertura__figura {
    animation: abertura-prova-entra 640ms var(--saida) 180ms both;
  }
  .palco--abertura::after {
    animation: abertura-mede-prova 460ms var(--saida) 300ms both;
  }
}
@keyframes abertura-texto-entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes abertura-prova-entra {
  from {
    opacity: 0;
    clip-path: inset(8% 0 10% 0 round var(--r-superficie));
    transform: translateY(16px);
  }
}
@keyframes abertura-mede-prova {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 0;
    clip-path: inset(0);
  }
}
/* Celular (S, só o bloco do Saldo, 304 × 98): palco de borda a borda com respiro de 12; moldura com respiro de 8 */
.palco--abertura {
  margin-inline: calc(-1 * var(--margem));
  border-radius: 0;
  padding: 12px;
}
.moldura--abertura {
  max-width: 396px;
  margin-inline: auto;
  padding: 8px;
}
.chip--palco {
  display: none;
}
@media (min-width: 600px) {
  .abertura__acao .btn {
    width: auto;
    align-self: flex-start;
  }
}
/* 768 a 1023 (A1′, a faixa em 2 colunas do produto): o palco sai do contêiner até 16 px da borda da janela */
@media (min-width: 768px) {
  .abertura__figura {
    margin-top: 36px;
  }
  .palco--abertura {
    margin-inline: calc(16px - var(--margem));
    border-radius: var(--r-superficie);
    padding: 24px 0;
  }
  .moldura--abertura {
    width: min(100%, 1104px);
    max-width: none;
    padding: 16px;
  }
}
@media (min-width: 900px) {
  .abertura__acao {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
}
/* A partir de 1024: 2 colunas, o texto à esquerda e o item (A2′, 304 × 292) à direita, a 1,15 e a 1,43 vez */
@media (min-width: 1024px) {
  .abertura {
    padding-top: 56px;
  }
  .abertura__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    align-items: center;
  }
  .abertura__sub {
    margin-top: 24px;
  }
  .abertura__acao {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 36px;
  }
  .abertura__figura {
    margin-top: 0;
  }
  .palco--abertura {
    margin-inline: 0;
    padding: 48px 24px 24px;
  }
  .moldura--abertura {
    width: 382px; /* 350 + 2 × 16 */
  }
  /* O chip sobe para dentro do palco; o da legenda sai (o texto da legenda fica) */
  .chip--palco {
    display: inline-flex;
    position: absolute;
    top: 14px;
    left: 24px;
  }
  .abertura .legenda .chip {
    display: none;
  }
}
/* No ponteiro fino, a prova responde como uma peça física: pouco deslocamento, sem flutuar nem perder a leitura. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .palco--abertura {
    transform: rotateX(var(--hero-tilt-y)) rotateY(var(--hero-tilt-x));
    transform-origin: center;
    transition: transform 280ms var(--saida);
  }
  .palco--abertura:hover {
    --hero-tilt-x: 4deg;
    --hero-tilt-y: -2.8deg;
    transform: translateY(-8px) rotateX(var(--hero-tilt-y)) rotateY(var(--hero-tilt-x));
  }
}
@media (min-width: 1200px) {
  .abertura__grade {
    column-gap: 48px;
  }
  .moldura--abertura {
    width: 467px; /* 435 + 2 × 16 */
  }
}

/* A prova se acende: c1 (Contratado) e c2 (Realizado + em andamento) passam; c3 (Saldo) e o rótulo ficam.
   Estado-base = final. Posições em % da IMAGEM (a camada cobre só a imagem; o que passa de 0–100% cai no respiro). */
.anota--a1,
.anota--a2 {
  opacity: 0;
}
/* Celular (S): só c3 e o rótulo, por dentro de c3, à direita */
.anota--a1,
.anota--a2 {
  display: none;
}
.anota--a3 {
  left: -1.97%;
  top: 4.08%;
  width: 103.95%;
  height: 101.02%;
}
.anota__rotulo--abertura {
  right: calc(10px - 1.97%);
  top: 58%;
  max-width: 170px;
  transform: translateY(-50%);
}
/* 768 a 1023 (A1′, 752 × 208): o rótulo por fora de c3, na 4ª célula da grade, vazia */
@media (min-width: 768px) {
  .anota--a1,
  .anota--a2 {
    display: block;
  }
  .anota--a1 {
    left: -0.8%;
    top: 4.81%;
    width: 50%;
    height: 47.12%;
  }
  .anota--a2 {
    left: 50.8%;
    top: 4.81%;
    width: 50%;
    height: 47.12%;
  }
  .anota--a3 {
    left: -0.8%;
    top: 53.85%;
    width: 50%;
    height: 49.04%;
  }
  .anota__rotulo--abertura {
    right: auto;
    left: calc(49.2% + 8px);
    top: 82.13%;
    max-width: none;
    white-space: nowrap;
  }
}
/* A partir de 1024 (A2′, 304 × 292): o rótulo por dentro de c3, à direita, centrado em "640 Horas" e no valor */
@media (min-width: 1024px) {
  .anota--a1 {
    left: -1.97%;
    top: 3.77%;
    width: 103.95%;
    height: 26.71%;
  }
  .anota--a2 {
    left: -1.97%;
    top: 32.53%;
    width: 103.95%;
    height: 32.88%;
  }
  .anota--a3 {
    left: -1.97%;
    top: 67.47%;
    width: 103.95%;
    height: 34.25%;
  }
  .anota__rotulo--abertura {
    left: auto;
    right: calc(10px - 1.97%);
    top: 87.27%;
    font-size: var(--fs-body);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .anota--a1 {
    animation: anota-vida 1150ms linear 760ms both;
  }
  .anota--a1 .anota__borda {
    animation: anota-desenha 380ms var(--saida) 760ms both;
  }
  .anota--a2 {
    animation: anota-vida 1150ms linear 1460ms both;
  }
  .anota--a2 .anota__borda {
    animation: anota-desenha 380ms var(--saida) 1460ms both;
  }
  /* Celular: só o Saldo, depois de a tela ser medida; o rótulo confirma a evidência. */
  .anota--a3 .anota__borda {
    animation: anota-desenha 380ms var(--saida) 760ms both;
  }
  .anota__rotulo--abertura {
    animation: anota-aparece 180ms var(--saida) 1080ms both;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .anota--a3 .anota__borda {
    animation-delay: 2160ms;
  }
  .anota__rotulo--abertura {
    animation-delay: 2480ms;
  }
}
@keyframes anota-vida {
  0% {
    opacity: 1;
  }
  81.5% {
    opacity: 1;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anota-desenha {
  from {
    clip-path: inset(-40px calc(100% + 40px) -40px -40px);
  }
  to {
    clip-path: inset(-40px);
  }
}
@keyframes anota-aparece {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apresentação: a transparência do vídeo deixa a tela flutuar diretamente no papel da landing. */
.abertura__figura--video {
  min-width: 0;
}
.abertura__video-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  color: var(--branco);
  text-decoration: none;
  cursor: pointer;
}
.abertura__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.abertura__video-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r-controle);
  background: var(--navy-900);
  color: var(--branco);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--navy-900) 22%, transparent);
}
.abertura__video-icone {
  width: 18px;
  height: 18px;
  flex: none;
}
@media (hover: hover) {
  .abertura__video-link:hover .abertura__video-hint {
    background: var(--navy-800);
  }
}
@media (max-width: 599px) {
  .abertura__figura--video {
    width: calc(100% + 2 * var(--margem));
    margin-inline: calc(-1 * var(--margem));
  }
}
@media (min-width: 1024px) {
  .abertura__grade {
    grid-template-columns: minmax(0, 1fr);
  }
  .abertura__figura--video {
    margin-top: 28px;
  }
}
@media (min-width: 1100px) {
  .abertura__grade {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.2fr);
    column-gap: 24px;
  }
  .abertura__titulo {
    font-size: clamp(2.5rem, 3.3vw, 3rem);
  }
  .abertura__figura--video {
    margin-top: 0;
  }
}

.video-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 12px;
  border: 0;
  background: var(--navy-950);
  color: var(--branco);
}
.video-modal[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.video-modal::backdrop {
  background: color-mix(in srgb, var(--navy-950) 92%, transparent);
}
.video-modal__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 12px;
  font-weight: 600;
}
.video-modal__fechar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--branco) 38%, transparent);
  border-radius: var(--r-controle);
  background: transparent;
  color: var(--branco);
  cursor: pointer;
}
.video-modal__fechar svg {
  width: 20px;
  height: 20px;
}
.video-modal__video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.video-modal :focus-visible {
  outline-color: var(--branco);
}

/* ---------- 2. Faixa de fatos ---------- */
.fatos {
  margin-top: 48px;
  background: var(--navy-50);
  border-block: 1px solid var(--navy-100);
}
.chamada + .fatos {
  margin-top: 0;
}
.fatos__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}
.fatos__lista li {
  padding: 22px 16px 22px 0;
  border-bottom: 1px solid var(--navy-200);
}
.fatos__lista li:nth-child(2n) {
  padding-left: 16px;
  border-left: 1px solid var(--navy-200);
}
.fatos__lista li:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.fato__titulo {
  font-size: var(--fs-subtitulo-s);
}
.fato__linha {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tinta-2);
}
@media (min-width: 768px) {
  .fatos {
    margin-top: 64px;
  }
}
@media (min-width: 1024px) {
  .fatos__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .fatos__lista li,
  .fatos__lista li:nth-child(2n) {
    padding: 30px 24px;
    border-bottom: 0;
    border-left: 0;
  }
  .fatos__lista li:nth-child(n + 2) {
    border-left: 1px solid var(--navy-200);
  }
  .fatos__lista li:first-child {
    padding-left: 0;
  }
}

/* ---------- Seções: um respiro só (128 px no computador, 80 no celular), de conteúdo a conteúdo ---------- */
.secao {
  padding-block: var(--secao);
}
.secao + .secao {
  padding-top: 0;
}
.secao__sub {
  margin-top: 20px;
  max-width: 64ch;
}

/* ---------- 3. Os quatro portfólios ---------- */
.secao--antes-da-chamada {
  padding-bottom: 48px;
}
.abas {
  margin-top: 40px;
}
.abas__lista {
  display: none;
  scroll-margin-top: calc(var(--cabecalho) + 16px);
}
/* Painel: bloco no celular e sem JS; painel de aba no computador com JS */
.painel {
  position: relative;
  overflow: hidden;
  overflow: clip; /* recorta sem virar área rolável (scrollIntoView, busca e foco não deslocam a tela) */
  padding: 24px;
  border: 1px solid var(--navy-200);
  border-radius: var(--r-superficie);
  background: var(--navy-50);
}
.painel + .painel {
  margin-top: 24px;
}
.painel__titulo {
  display: block;
}
.painel__ganho {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--fs-subtitulo-l);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy-900);
  text-wrap: balance;
}
/* Linha de contexto ABAIXO do título (nada acima de título): ícone na cor do portfólio, texto navy */
.painel__contexto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--f-texto);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--navy-700);
}
.painel__icone {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--p-cor);
}
.painel__frase {
  margin-top: 12px;
  max-width: 58ch;
  color: var(--tinta);
}
.painel__figura {
  margin-top: 16px;
}
/* Celular: vídeo inteiro, proporcional à largura, no mesmo palco do computador. */
.palco--pilar {
  margin-inline: -24px;
  border-radius: 0;
  padding: 16px 12px 0;
}
.moldura--pilar {
  max-height: none;
  border-radius: var(--r-tela) var(--r-tela) 0 0;
}
/* A animação cabe inteira também nas telas menores. */
.moldura--pilar .moldura__img {
  width: 100%;
}
/* --min-cel: largura mínima da tela no celular (escala 0,8); --w-tela: largura do recorte do computador */
#clientes {
  --min-cel: 272px;
  --w-tela: 712px;
}
#contratos {
  --w-tela: 783px;
}
#projetos {
  --min-cel: 304px;
  --w-tela: 730px;
}
#recursos {
  --w-tela: 818px;
}
.painel .legenda {
  margin-top: 12px;
}
@media (min-width: 768px) {
  .painel {
    padding: 32px;
  }
}
/* 768 a 1023: blocos com a tela do computador INTEIRA dentro do palco (sem sangria, 4 cantos de 16) */
@media (min-width: 768px) and (max-width: 1023px) {
  .palco--pilar {
    margin-inline: -32px;
    padding: 16px;
  }
  .moldura--pilar {
    width: min(100%, var(--w-tela));
    max-height: none;
    margin-inline: auto;
    border-radius: var(--r-tela);
  }
  .moldura--pilar .moldura__img {
    width: 100%;
  }
}
/* A partir de 1024: painel do computador (sem JS, os quatro empilhados; com JS, um por aba) */
@media (min-width: 1024px) {
  .secao--antes-da-chamada {
    padding-bottom: 64px;
  }
  .abas {
    margin-top: 48px;
  }
  .painel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 48px 0 0 48px;
  }
  .painel__texto {
    padding-right: 48px;
  }
  .painel__figura {
    display: contents;
  }
  .painel .legenda {
    grid-row: 2;
    margin-top: 20px;
    padding-right: 48px;
  }
  /* A tela sangra pela largura do palco e embaixo (não sobra faixa navy à direita) */
  .palco--pilar {
    grid-row: 3;
    height: 480px;
    margin: 32px 0 0;
    border-radius: var(--r-tela) 0 0 0;
    padding: 32px 0 0 32px;
  }
  /* 1024 a 1199: a tela cresce com o palco até 848 px (com a largura toda, o contorno do IDP/IDC sairia do palco) */
  .moldura--pilar {
    width: min(max(734px, 100%), 848px);
    max-width: none;
    max-height: none;
    border-radius: var(--r-tela) var(--r-tela) 0 0;
  }
  .moldura--pilar .moldura__img {
    width: 100%;
  }
}
/* A partir de 1200: texto (340 px) centrado na altura, à esquerda; palco de 480 px à direita */
@media (min-width: 1200px) {
  .painel {
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr 48px;
    column-gap: 40px;
  }
  .painel__texto {
    grid-column: 1;
    grid-row: 2;
    padding-right: 0;
  }
  .painel__frase {
    margin-top: 16px;
  }
  .painel .legenda {
    grid-column: 1;
    grid-row: 3;
    padding-right: 0;
  }
  .palco--pilar {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
  }
  .moldura--pilar {
    width: auto;
    border-radius: var(--r-tela) 0 0 0;
  }
  .moldura--pilar .moldura__img {
    width: max(734px, 100%);
  }
}

/* Abas (só com JavaScript e a partir de 1024 px): ícone à esquerda do nome, 73 px; a ativa fica colada ao painel */
.aba {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  min-height: 44px;
  padding: 15px 20px 14px;
  border: 1px solid var(--navy-100);
  border-bottom: 0;
  border-radius: var(--r-tela) var(--r-tela) 0 0;
  background: var(--branco);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aba__icone {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
  color: var(--p-cor);
}
.aba__nome {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  color: var(--navy-700);
}
.aba__papel {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--navy-600);
}
@media (hover: hover) {
  .aba:hover {
    background: var(--navy-50);
  }
  .aba:hover .aba__nome {
    color: var(--navy-900);
  }
}
.aba[aria-selected='true'] {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding-top: 13px;
  border-color: var(--navy-200);
  border-top: 3px solid var(--p-cor);
  background: var(--navy-50);
}
.aba[aria-selected='true'] .aba__nome {
  color: var(--navy-900);
}
.aba[aria-selected='true'] .aba__papel {
  color: var(--navy-700);
}
@media (prefers-reduced-motion: no-preference) {
  .aba,
  .aba__nome {
    transition:
      background-color 150ms var(--saida),
      color 150ms var(--saida);
  }
  .aba__icone {
    transition: transform 150ms var(--saida);
  }
  @media (hover: hover) {
    .aba:hover .aba__icone {
      transform: translateY(-1px);
    }
  }
}
@media (min-width: 1024px) {
  .abas-prontas .abas__lista {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding-inline: 28px;
  }
  .abas-prontas .painel + .painel {
    margin-top: 0;
  }
  /* Nas abas, o nome e o papel ficam dentro da aba: o painel não repete */
  .abas-prontas .painel__contexto {
    display: none;
  }
  /* Salto nativo para #clientes etc.: para com a lista de abas (≈ 106 px) à vista, abaixo do cabeçalho */
  .abas-prontas .painel {
    scroll-margin-top: calc(var(--cabecalho) + 16px + 106px);
  }
}
/* 1024 a 1199: abas mais justas (recuo 20, vão 4, ícone 18 + 6) e os 4 painéis com a mesma altura (a frase de
   Projetos tem 3 linhas; as outras, 2) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .abas-prontas .abas__lista {
    gap: 4px;
    padding-inline: 20px;
  }
  .aba {
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 6px;
    padding-inline: 10px;
  }
  .aba__icone {
    width: 18px;
    height: 18px;
  }
  .abas-prontas .painel__frase {
    min-height: calc(3 * 1.6em);
  }
}
/* Troca de aba: o painel entra com opacidade e a tela sobe 8 px */
@media (prefers-reduced-motion: no-preference) {
  .abas-prontas .painel:not([hidden]) {
    animation: painel-entra 220ms ease-out;
  }
  .abas-prontas .painel:not([hidden]) .moldura {
    animation: tela-sobe 260ms var(--saida);
  }
}
@keyframes painel-entra {
  from {
    opacity: 0;
  }
}
@keyframes tela-sobe {
  from {
    transform: translateY(8px);
  }
}

/* Contornos parados dos portfólios (% da imagem) */
/* T2: a coluna Saldo, com 11 px de folga dos lados (a 0,94 vez, 6 px encostavam no texto) */
.anota--t2 {
  left: 76.88%;
  top: 11%;
  width: 13.67%;
  height: 84.73%;
}
/* T3: medido no pixel sobre o recorte de 730 × 587 (cartões IDP e IDC + 6 px) */
.anota--t3 {
  left: 44.66%;
  top: 45.14%;
  width: 49.59%;
  height: 12.35%;
}
.anota--t4 {
  left: 77.75%;
  top: 33%;
  width: 19.07%;
  height: 6.2%;
}
.anota--c4 {
  left: 29.17%;
  top: 60.07%;
  width: 41.9%;
  height: 11.2%;
}
/* Recursos no celular: o rótulo na faixa vazia acima do trecho vermelho, encostado no contorno */
.anota__rotulo--c4 {
  left: 29.17%;
  bottom: calc(39.93% + 8px);
  white-space: nowrap;
}
@media (max-width: 379px) {
  .anota__rotulo--c4 {
    max-width: 150px;
    white-space: normal;
  }
}

/* ---------- 4. Chamada: uma linha de fecho logo depois dos portfólios ---------- */
.chamada__linha {
  display: grid;
  gap: 24px;
  padding-top: 40px;
  border-top: 1px solid var(--navy-200);
}
.chamada__frase {
  margin-top: 12px;
}
.chamada .btn {
  width: 100%;
}
@media (min-width: 600px) {
  .chamada .btn {
    width: auto;
    justify-self: start;
  }
}
@media (min-width: 1024px) {
  .chamada__linha {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: 24px;
    align-items: center;
  }
  .chamada .btn {
    justify-self: end;
  }
}

/* ---------- 5. O fio que liga os quatro (vertical em todas as larguras) ---------- */
.fio-grade {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}
.fio {
  position: relative;
  list-style: none;
}
.fio__etapa {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  padding-bottom: 24px;
}
.fio__etapa:last-child {
  padding-bottom: 0;
}
/* Trilho navy-200 e traço navy-900: um trecho por etapa, do centro deste marcador ao centro do próximo */
.fio__etapa:not(:last-child)::before,
.fio__etapa:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 16px;
  width: 2px;
  height: 100%;
}
.fio__etapa:not(:last-child)::before {
  background: var(--navy-200);
}
.fio__etapa:not(:last-child)::after {
  background: var(--navy-900);
  transform-origin: top;
}
/* Marcador: o ícone do módulo no produto sobre um disco branco, que só interrompe a linha */
.fio__marca {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pilula);
  background: var(--branco);
}
.fio__icone {
  width: 20px;
  height: 20px;
  color: var(--p-cor, var(--navy-600));
}
.fio__texto {
  padding-top: 4px;
}
.fio__rotulo {
  display: block;
}
.fio__linha2 {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tinta-2);
}
.fio__figura--video {
  min-width: 0;
}
.fio__video {
  display: block;
  width: 100%;
  height: clamp(240px, 28vw, 350px);
  aspect-ratio: 1280 / 900;
  object-fit: contain;
  background: transparent;
}
@media (min-width: 768px) {
  .fio-grade {
    margin-top: 48px;
    gap: 48px;
  }
}
/* A partir de 1200: etapas em 4 colunas e vídeo em 8, sem cortar a composição. */
@media (min-width: 1200px) {
  .fio-grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: center;
  }
  .fio {
    grid-column: 1 / span 4;
  }
  .fio__figura {
    grid-column: 5 / span 8;
  }
}
/* O traço se desenha com a rolagem (CSS, sem JS) e os marcadores acendem. Sem suporte ou com movimento reduzido:
   tudo inteiro. O texto das etapas não esmaece (contraste). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fio {
      view-timeline: --fio block;
    }
    .fio__etapa:not(:last-child)::after {
      animation: fio-traco linear both;
      animation-timeline: --fio;
    }
    .fio__icone {
      animation: fio-acende linear both;
      animation-timeline: --fio;
    }
    .fio__etapa:nth-child(1):not(:last-child)::after {
      animation-range: cover 22% cover 30%;
    }
    .fio__etapa:nth-child(2):not(:last-child)::after {
      animation-range: cover 30% cover 38%;
    }
    .fio__etapa:nth-child(3):not(:last-child)::after {
      animation-range: cover 38% cover 46%;
    }
    .fio__etapa:nth-child(4):not(:last-child)::after {
      animation-range: cover 46% cover 54%;
    }
    .fio__etapa:nth-child(1) .fio__icone {
      animation-range: cover 18% cover 22%;
    }
    .fio__etapa:nth-child(2) .fio__icone {
      animation-range: cover 26% cover 30%;
    }
    .fio__etapa:nth-child(3) .fio__icone {
      animation-range: cover 34% cover 38%;
    }
    .fio__etapa:nth-child(4) .fio__icone {
      animation-range: cover 42% cover 46%;
    }
    .fio__etapa:nth-child(5) .fio__icone {
      animation-range: cover 50% cover 54%;
    }
  }
}
@keyframes fio-traco {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes fio-acende {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
/* Anotação do fio: F2 (celular) só com o contorno; F1 com contorno e rótulo em 2 linhas */
/* O contorno cerca a linha de custo inteira ("Custo … · margem … · 107 h"): é o único jeito de não encostar
   em letra em nenhuma largura (spec §9.2). Rótulo só a partir de 1280, 8 px à direita do traço. */
.anota--fio {
  left: 5.48%;
  top: 66.54%;
  width: 66.71%;
  height: 18.01%;
}
.anota__rotulo--fio {
  left: calc(45.09% + 8px);
  top: 69.1%;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .anota--fio {
    left: 3.77%;
    top: 69.1%;
    width: 41.32%;
    height: 15.63%;
  }
}

/* ---------- 6. Governança: a sala navy (lisa) é o palco; a tela fica direto nela ---------- */
.governanca {
  --foco: var(--branco);
}
.governanca__sala {
  padding-block: 80px;
  background: linear-gradient(
    165deg,
    var(--navy-800) 0%,
    var(--navy-900) 52%,
    var(--navy-950) 100%
  );
  box-shadow: var(--sombra-palco);
}
.governanca__titulo {
  color: var(--branco);
}
.governanca__figura {
  margin-top: 32px;
}
.governanca__cena {
  min-width: 0;
  padding: clamp(12px, 2vw, 24px);
  border-radius: var(--r-superficie);
  background: var(--branco);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--navy-950) 45%, transparent);
}
.governanca__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1360 / 690;
  border-radius: var(--r-tela);
  background: var(--branco);
}
.moldura--gov .moldura__img {
  width: max(100%, 341px);
}
.legenda--navy {
  position: relative; /* pinta por cima da sombra da tela, que a moldura projeta para baixo */
  color: var(--navy-200);
}
.anota--gov {
  left: 0.7%;
  top: 5.83%;
  width: 98.12%;
  height: 58.01%;
}
/* Rótulo 8 px abaixo do contorno, no rodapé vazio do diálogo (à esquerda de "Cancelar") */
.anota__rotulo--gov {
  left: 4.49%;
  top: calc(59.01% + 8px);
  white-space: nowrap;
}
.governanca__regras {
  margin-top: 32px;
}
.regra {
  padding-block: 20px;
  border-top: 1px solid color-mix(in srgb, var(--branco) 12%, transparent);
}
.regra:first-child {
  padding-top: 0;
  border-top: 0;
}
.regra:last-child {
  padding-bottom: 0;
}
.regra__termo {
  color: var(--branco);
}
.regra p {
  margin-top: 6px;
  max-width: 58ch;
  color: var(--navy-100);
}
.governanca .btn {
  width: 100%;
  margin-top: 40px;
}
@media (min-width: 600px) {
  .governanca .btn {
    width: auto;
  }
}
@media (min-width: 768px) {
  .moldura--gov {
    width: 690px;
    max-width: 100%;
  }
  .moldura--gov .moldura__img {
    width: 690px;
  }
}
@media (min-width: 1024px) {
  .governanca {
    padding-inline: 20px;
  }
  .governanca__sala {
    padding-block: 120px 128px;
    border-radius: var(--r-superficie);
  }
}
@media (min-width: 1200px) {
  .governanca__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 690px;
    column-gap: 48px;
    align-items: start;
  }
  .governanca__titulo {
    grid-column: 1 / -1;
  }
  .governanca__figura {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin-top: 56px;
  }
  .governanca__regras {
    grid-column: 1;
    grid-row: 2;
    margin-top: 56px;
  }
}
@media (min-width: 768px) {
  .anota--gov {
    left: 4.49%;
    top: 5.41%;
    width: 60.58%;
    height: 53.6%;
  }
}

/* ---------- 7 e 8. Título fixo ao lado de uma lista (Módulos e Perguntas) ---------- */
.lateral {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .lateral {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .lateral__titulo {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--cabecalho) + 32px);
  }
  .lateral__corpo {
    grid-column: 5 / span 8;
  }
}

/* ---------- 7. Módulos: 3 grupos ---------- */
.modulos__intro {
  max-width: 58ch;
  color: var(--tinta);
}
.modulos__intro + .modulos__grupo,
.modulos__grupo + .modulos__grupo {
  margin-top: 40px;
}
.modulos__lista {
  display: grid;
  column-gap: 32px;
  margin-top: 8px;
  list-style: none;
}
.modulo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--navy-100);
}
.modulo:first-child {
  border-top: 0;
}
.modulo__icone {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--p-cor, var(--navy-600));
}
.modulo__nome {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-900);
}
/* Nome sem dois-pontos na tela (o ":" fica só para leitor de tela e cópia); descrição começa em maiúscula */
.modulo__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tinta-2);
}
.modulo__desc::first-letter {
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .modulos__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .modulo:nth-child(2) {
    border-top: 0;
  }
}

/* ---------- 8. Perguntas frequentes ---------- */
.faq__item {
  border-bottom: 1px solid var(--filete);
}
.faq__item:first-child {
  border-top: 1px solid var(--filete);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
@media (hover: hover) {
  .faq__item summary:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }
}
.faq__seta {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--navy-600);
}
.faq__item[open] .faq__seta {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
  .faq__seta {
    transition: transform 150ms var(--saida);
  }
}
.faq__item p {
  max-width: 56ch; /* 56ch = 65 a 75 caracteres medidos na linha (58ch passava de 75) */
  padding-bottom: 20px;
}

/* ---------- 9. Formulário: título → como funciona o pedido → cartão ---------- */
.formulario {
  padding-block: var(--secao);
  background: var(--navy-50);
  border-top: 1px solid var(--navy-100);
}
.passos-bloco {
  margin-top: 32px;
}
.passos {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  list-style: none;
}
.passos li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  color: var(--tinta);
}
.passos__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--navy-300);
  border-radius: var(--r-pilula);
  color: var(--navy-900);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.passos__num--feito {
  border-color: var(--navy-900);
  background: var(--navy-900);
  color: var(--branco);
}
.passos__num svg {
  width: 16px;
  height: 16px;
}
.cartao-form {
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--r-tela);
  background: var(--branco);
  box-shadow: var(--sombra-cartao);
}
.form-resumo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: var(--r-controle);
  background: var(--vermelho-50);
  color: var(--vermelho-700);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.45;
}
.form-revisar {
  margin: 24px 0 0;
}
.form-resumo__ico {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}
.campos {
  display: grid;
  gap: 20px;
}
.cartao-form[aria-busy='true'] .campos {
  opacity: 0.6;
}
.campo label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
}
.campo__dica {
  max-width: 58ch;
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tinta-2);
}
.campo input:not([type='checkbox']),
.campo textarea {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--borda-campo);
  border-radius: var(--r-controle);
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--fs-body);
  line-height: 1.4;
}
@media (prefers-reduced-motion: no-preference) {
  .campo input:not([type='checkbox']),
  .campo textarea {
    transition: border-color 150ms var(--saida);
  }
}
.campo textarea {
  height: auto;
  min-height: 112px;
  resize: vertical;
}
.campo input:not([type='checkbox']):focus-visible,
.campo textarea:focus-visible {
  border-color: var(--navy-900);
}
.campo [aria-invalid='true'] {
  border-color: var(--vermelho-700) !important;
  box-shadow: inset 0 0 0 1px var(--vermelho-700);
}
.campo__erro {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--vermelho-700);
}
.campo__erro-ico {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}
/* Contador do horário (a partir de 100 dos 120 caracteres). No limite: navy-900 600, nunca vermelho (não é erro). */
.campo__contador {
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tinta-2);
  text-align: right;
}
.campo__contador--limite {
  color: var(--navy-900);
  font-weight: 600;
}
/* Caixa de novidades: nativa estilizada, alvo de 44 px na linha toda */
.campo .caixa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-top: 4px;
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.5;
  color: var(--tinta);
  cursor: pointer;
}
.caixa input {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  border: 1px solid var(--borda-campo);
  border-radius: var(--r-caixa);
  background: var(--branco);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.caixa input:checked {
  border-color: var(--navy-900);
  background: var(--navy-900);
}
.caixa input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--branco);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .caixa input {
    transition:
      background-color 150ms var(--saida),
      border-color 150ms var(--saida),
      transform 100ms var(--saida);
  }
  .caixa input:active {
    transform: scale(0.92);
  }
  .caixa input:checked::after {
    animation: marca-caixa-entra 150ms var(--saida);
  }
}
@keyframes marca-caixa-entra {
  from {
    opacity: 0;
    transform: rotate(45deg) scale(0.6);
  }
}
.armadilha {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-linha {
  max-width: 58ch;
  margin-top: 24px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tinta-2);
}
.btn--enviar {
  width: 100%;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .cartao-form {
    padding: 40px;
  }
  .btn--enviar {
    width: auto;
    min-width: 260px;
  }
}
@media (min-width: 1024px) {
  .formulario__grade {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
  }
  .formulario__titulo {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
  .passos-bloco {
    grid-column: 1 / span 4;
    grid-row: 2;
  }
  .cartao-form {
    grid-column: 6 / span 7;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* ---------- 10. Rodapé ---------- */
.rodape {
  padding: 56px 0 40px;
  background: var(--navy-950);
  color: var(--navy-100);
  font-size: var(--fs-small);
  line-height: 1.45;
  --foco: var(--branco);
}
.rodape a {
  color: var(--navy-100);
}
.marca--clara {
  color: var(--branco);
}
.marca--clara .marca__nome--complemento {
  color: inherit;
}
.rodape__marca p {
  max-width: 44ch;
  margin-top: 12px;
  color: var(--navy-100);
}
.rodape__faixa1 {
  display: grid;
  gap: 24px;
}
.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  list-style: none;
}
.rodape__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.rodape a.rodape__acao {
  color: var(--verde-400);
}
.rodape__faixa2 {
  display: grid;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--branco) 8%, transparent);
}
.rodape__enc {
  color: var(--navy-400);
}
.rodape__enc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.rodape__legal {
  font-size: var(--fs-micro);
  color: var(--navy-400);
}
@media (min-width: 1024px) {
  .rodape__faixa1 {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .rodape__links {
    justify-content: flex-end;
  }
}

/* ---------- /obrigado/, páginas de falha e /privacidade/ ---------- */
.pagina {
  padding-block: 80px 128px;
  background: var(--branco);
}
.estado {
  max-width: 640px;
}
/* Sucesso em navy (verde é só ação); falha em vermelho (erro) */
.estado__ico {
  width: 32px;
  height: 32px;
  color: var(--navy-900);
}
.estado--falha .estado__ico {
  color: var(--vermelho-700);
}
.estado .headline {
  margin-top: 16px;
}
.estado__lead {
  max-width: 58ch;
  margin-top: 16px;
  color: var(--tinta);
}
.estado__texto {
  max-width: 58ch;
  margin-top: 12px;
}
.estado__email {
  font-weight: 600;
  color: var(--navy-900);
  overflow-wrap: anywhere;
}
.estado__titulo {
  margin-top: 32px;
}
.estado__titulo:first-of-type {
  margin-top: 40px;
}
.passos--estado {
  margin-top: 16px;
}
.estado__btn {
  margin-top: 32px;
}
.estado__nota {
  margin-top: 16px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tinta-2);
}
.estado__voltar {
  margin-top: 32px;
}
.estado__voltar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
}
.prosa {
  max-width: 56ch;
}
.prosa .headline {
  margin-bottom: 32px;
}
.prosa p + p {
  margin-top: 16px;
}
.prosa strong {
  font-weight: 600;
  color: var(--navy-900);
}

/* ---------- Movimento reduzido: nada se move; o estado final já está visível ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}