/* =============================================================================
   nexta — folha única do site institucional (v2)
   -----------------------------------------------------------------------------
   REGRA DO ACCENT — a linha que impede a erosão:
   o VERDE é o único acento. Branco, ink e cinzas fazem todo o resto.
   Cor nova entra no :root abaixo ou não entra. Nenhum hexadecimal existe fora
   do :root — se você precisou escrever um, o que faltou foi o token, não a cor.
   -----------------------------------------------------------------------------
   Orçamento desta folha (é contrato, não meta):
     <= 1000 linhas · 2 breakpoints · 3 raios · 3 pesos de fonte
     1 token de ritmo vertical, aplicado em 1 seletor (.secao)
   ============================================================================= */

:root {
  /* ---- Cor · superfícies claras ---------------------------------------- */
  --branco:        #FFFFFF;
  --fundo:         #F3F7F4;   /* faixa alternada */
  --verde-suave:   #E4F4EA;   /* pill, chip, selo */
  /* Os dois tons intermediarios do motor do SBCE (verde 20% e 34% sobre o
     branco). Ficam aqui, e nao como color-mix() solto na regra, porque a casa
     inspeciona cor no :root e porque color-mix devolve color(srgb ...) — que
     todo medidor de contraste le errado. */
  --motor-2:       #CEECDB;
  --motor-3:       #ABDFC2;
  --linha:         #D3E7DA;   /* borda no claro */

  /* ---- Cor · texto ------------------------------------------------------ */
  --ink:           #17251F;
  --ink-2:         #5C6B63;   /* secundário — 5,6:1 sobre branco */

  /* ---- Cor · o acento (três papéis do mesmo verde) ---------------------- */
  --verde:         #08A24C;   /* gráfico: ícone, barra, anel de foco */
  --verde-forte:   #07773A;   /* carrega TEXTO: link, botão primário, eyebrow */
  --verde-claro:   #17C55F;   /* acento legível sobre o escuro */

  /* ---- Cor · severidade do SBCE (escala SEMÂNTICA, não acento) ----------
     Três degraus de exposição regulatória. Não é decoração: é a leitura da
     peça — vermelho prepara agora, laranja faz screening, âmbar avalia. Por
     isso convivem com a regra de um acento só, como as cores dos pilares.
     Cada tom carrega TEXTO (>= 4,5 sobre o branco, sobre --fundo e sobre o
     próprio suave), então não existe par claro/escuro aqui: um token só. */
  --sbce-alta:        #C0261C;   /* 5,94 no branco · 5,27 no suave */
  --sbce-alta-suave:  #FDEEEC;
  --sbce-media:       #A85207;   /* 5,42 no branco · 4,95 no suave */
  --sbce-media-suave: #FDF3EA;
  --sbce-baixa:       #7D5600;   /* 6,56 no branco · 5,97 no suave */
  --sbce-baixa-suave: #FBF4E0;
  /* Cronograma do SBCE (23/09): a cor é semântica, não escala de risco.
     Três verdes do mais escuro (entrada mais próxima) ao mais claro, e um
     cinza NEUTRO para o que está fora da sequência. Texto medido: 4,73 no
     branco o verde da terceira etapa; o cinza carrega texto em --ink-2. */
  --prazo-3-txt:   #098540;
  --neutro-suave:  #F3F4F4;
  --neutro-linha:  #DCE0DE;
  --neutro-barra:  #9AA19D;

  /* ---- Cor · superfícies escuras ---------------------------------------- */
  --verde-profundo:   #0A2B22; /* faixa escura */
  --verde-profundo-2: #0F4634; /* cartão sobre a faixa escura */
  --linha-escura:     #1A4E3C;
  --on-deep-2:        #A8CDBB; /* texto secundário sobre o escuro */

  /* ---- Sombra ----------------------------------------------------------- */
  --sombra:      0 1px 2px rgba(10, 43, 34, .05), 0 10px 28px rgba(10, 43, 34, .07);
  --sombra-alta: 0 18px 48px rgba(10, 43, 34, .14);

  /* ---- Tipografia · 4 tokens de título em clamp() + escala fixa ---------- */
  --fonte:   "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1:   clamp(2.25rem, 1.10rem + 2.6vw, 3.25rem);
  --fs-h2:   clamp(1.75rem, 1.30rem + 1.9vw, 2.5rem);
  --fs-h3:   clamp(1.1875rem, 1.10rem + 0.35vw, 1.375rem);
  --fs-lede: clamp(1.0625rem, 1.00rem + 0.35vw, 1.25rem);
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-md:   0.9375rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;

  /* ---- Forma · 3 raios, nada além disso -------------------------------- */
  --r:      14px;
  --r-sm:   8px;
  --r-pill: 999px;

  /* ---- Ritmo vertical · 1 token, vive só em .secao ---------------------- */
  /* 48–70px por lado, 96–140px entre o fim de uma secao e o comeco da outra.
     Era 56–96 por lado (112–192 no total), e a especialista mediu o resultado
     como "quebra de pagina": o branco deixava de ser respiro e virava
     interrupcao. Regra global de 02/09. */
  --ritmo: clamp(3rem, 2.2rem + 2.4vw, 4.375rem);

  /* ---- Medida ----------------------------------------------------------- */
  /* 1180px sobrava margem demais em 1920, que e a tela da maioria. 1440 usa a
     largura sem esticar linha de texto: o corpo continua limitado a 46rem por
     .secao-cabeca, entao quem cresce sao as grades, nao a leitura. */
  --larg: 1440px;
  --pad:  clamp(1.25rem, 1rem + 1.6vw, 2rem);
  --gap:  1.25rem;
  /* Escala CATEGORICA das cinco frentes — decisao do dono, vinda do material
     da especialista. Nao e acento de marca: aqui a cor identifica assunto,
     nao chama pra acao. Por isso convive com a regra de um acento so, e por
     isso mora aqui em vez de solta no meio do arquivo. Cada uma tem par
     claro (grafico) e escuro (texto), porque o claro nao passa contraste.  */
  --pil-gestao: #08A24C;
  --pil-gestao-txt: #05713A;
  --pil-clima: #65489D;
  --pil-clima-txt: #563E88;
  --pil-natureza: #0E9488;
  --pil-natureza-txt: #0A6E65;
  --pil-social: #E2701A;
  --pil-social-txt: #9C4A08;
  --pil-cadeia: #2557C7;
  --pil-cadeia-txt: #1E479F;

  /* Os tres escopos do inventario, na rosca do mock. O desenho da especialista
     usa dois azuis e um verde; aqui sao tres degraus do MESMO verde — a regra
     do acento — e nenhum deles carrega texto (a legenda ao lado e --ink-2).
     Sao apelidos, nao cores novas: zero hexadecimal entra por eles. */
  --esc-1: var(--verde-profundo-2);
  --esc-2: var(--verde-forte);
  --esc-3: var(--verde-claro);
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--branco);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong, b { font-weight: 700; }

:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: var(--r-sm); }
.band-dark :focus-visible { outline-color: var(--verde-claro); }

.pular {
  /* left:-9999px estica a area rolavel do documento — o elemento continua
     ocupando lugar, so que fora da tela. Media 6px de scroll lateral em 1600.
     A tecnica moderna recorta em vez de deslocar: nao ocupa espaco nenhum. */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  z-index: 100; padding: .75rem 1rem;
  background: var(--verde-profundo); color: var(--branco);
}
.pular:focus {
  position: fixed; left: 0; top: 0;
  width: auto; height: auto; clip-path: none;
}

.visual-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Utilitários — o miolo de qualquer bloco sai daqui
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--larg); margin-inline: auto; padding-inline: var(--pad); }
.container-estreito { max-width: 46rem; }

.secao { padding-block: var(--ritmo); }             /* único uso de --ritmo */

.band-alt  { background: var(--fundo); }
.band-dark { background: var(--verde-profundo); color: var(--verde-suave); }
.band-dark .secao-titulo, .band-dark .cta-titulo, .band-dark .hero-titulo,
.band-dark .cartao-titulo, .band-dark .num, .band-dark strong { color: var(--branco); }
.band-dark .secao-lede, .band-dark p { color: var(--on-deep-2); }
.band-dark .eyebrow { color: var(--verde-claro); }
.band-dark a:not(.btn) { color: var(--verde-claro); }

.eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--verde-forte);
}

.secao-cabeca { display: grid; gap: .75rem; max-width: 46rem; margin-bottom: 2.5rem; }
.secao-cabeca-centro { justify-items: center; text-align: center; margin-inline: auto; }

.secao-titulo {
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.12;
  letter-spacing: -.02em; text-wrap: balance;
}
.secao-lede { font-size: var(--fs-lede); color: var(--ink-2); text-wrap: pretty; }
.secao-pe { margin-top: 2rem; max-width: 46rem; }

.pill {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .3125rem .6875rem; border-radius: var(--r-pill);
  background: var(--verde-suave); color: var(--verde-forte);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
}
.band-dark .pill { background: var(--verde-profundo-2); color: var(--verde-claro); }
.pill::before {
  content: ""; width: .4375rem; height: .4375rem;
  border-radius: var(--r-pill); background: currentColor;
}
.pill-limpa::before { display: none; }

.num {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em;
  color: var(--verde-forte); font-variant-numeric: tabular-nums;
}

/* ── As peças que o desenho da especialista repete em toda seção ───────────
   Realce (a segunda metade do título, em verde), régua (o filete curto sob um
   nome) e medalhão (o círculo que carrega o ícone) aparecem em 7 das 9 seções.
   Por isso existem UMA vez aqui, e não uma vez por bloco. */
.realce { color: var(--verde-forte); }
.band-dark .realce { color: var(--verde-claro); }
.regua { display: block; width: 1.75rem; height: 3px; border-radius: 2px; background: var(--verde); }
.medalha {
  display: grid; place-items: center; flex: none;
  width: var(--md, 3.25rem); height: var(--md, 3.25rem); border-radius: var(--r-pill);
  background: var(--verde-suave); color: var(--verde-forte);
}
.medalha svg { width: 45%; height: 45%; }
.medalha-gg { --md: 4.5rem; }
.medalha-quad { border-radius: var(--r-sm); }
.medalha-escura { background: var(--verde-profundo); color: var(--verde-claro); }
.band-dark .medalha { background: var(--verde-profundo-2); color: var(--verde-claro); }
.pill-contorno { background: transparent; color: var(--ink-2); border: 1px solid var(--linha); font-weight: 400; }
.band-dark .pill-contorno { background: transparent; color: var(--on-deep-2); border-color: var(--linha-escura); }
.lista-traco { display: grid; gap: .5rem; }
.lista-traco li { display: flex; gap: .625rem; font-size: var(--fs-md); }
.lista-traco li::before { content: "—"; color: var(--verde); font-weight: 700; }
.fecho { margin-top: 3rem; text-align: center; text-wrap: balance;
         font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; }

/* ── Tira CHEIA: a faixa ocupa a largura da janela ────────────────────────
   As duas faixas escuras da home (o rastro da secao 02 e os elos da 03) eram
   caixas arredondadas dentro do container, e liam como cartao gigante
   flutuando na pagina. Agora sangram de borda a borda, sem raio, e o CONTEUDO
   continua alinhado ao container: o padding lateral e o mesmo calculo que
   posiciona o container, entao o texto de dentro cai na mesma coluna que o
   texto de fora.

   A largura e 100vw e a margem negativa puxa a faixa para a borda; o que
   sobrar (a barra de rolagem, quando ela ocupa espaco) e cortado pela secao,
   com clip e nao hidden, para nao criar contexto de rolagem.

   Ela tambem come o padding de baixo da propria secao: faixa escura seguida de
   um branco de 140px e o "vazio de quebra de pagina" que a regra global
   manda tirar. O respiro fica por conta da secao seguinte. */
/* `.tira.tira-cheia`, e nao `.tira-cheia`: esta regra vem ANTES da .tira no
   arquivo, e com uma classe so a de baixo vencia — o raio e a borda voltavam. */
.tira.tira-cheia {
  border-radius: 0; border: 0;
  width: 100vw; margin-inline: calc(50% - 50vw);
  margin-bottom: calc(-1 * var(--ritmo));
}
/* O padding da faixa cheia mora no FIM do arquivo (ver "Tira cheia · padding"):
   as tiras com rastro e com elos definem o proprio padding depois desta regra
   e com a mesma especificidade, e o texto da faixa saia 4px fora da coluna do
   container. */
.secao:has(.tira-cheia) { overflow-x: clip; }

/* Tira — a faixa que fecha uma seção. Seis usos no desenho dela; uma receita. */
.tira {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem;
  margin-top: 3rem; padding: 1.75rem; border-radius: var(--r); border: 1px solid var(--linha);
}
.tira-lisa { background: var(--fundo); border-color: transparent; }
.tira-selo { flex: 1 1 17rem; display: flex; align-items: center; gap: 1rem; }
.tira-titulo { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; text-wrap: balance; }
.tira-texto { flex: 1 1 17rem; font-size: var(--fs-md); color: var(--ink-2); }
.tira-fio { flex: none; align-self: stretch; width: 1px; background: var(--linha); }
.tira-alta { align-items: flex-start; }
.tira-alta .tira-selo { flex: 0 1 14rem; padding-right: 1.75rem; border-right: 1px solid var(--linha); }
.tira-itens { flex: 1 1 26rem; }
.tira-fecho { flex: 1 1 100%; text-align: center; font-size: var(--fs-lg); font-weight: 600; }
.item-ico { display: flex; align-items: flex-start; gap: .875rem; }
.item-ico .medalha { --md: 2.75rem; }
.item-ico b { display: block; margin-bottom: .25rem; }

/* Destaque — a caixa verde que fecha o texto de abertura da seção 03. */
.destaque {
  display: flex; align-items: center; gap: 1.125rem; margin-top: 1.75rem;
  padding: 1.375rem 1.5rem; border-radius: var(--r); background: var(--verde-suave);
  font-size: var(--fs-lede); line-height: 1.45;
}

/* -----------------------------------------------------------------------------
   Botões — 1 base, 3 variantes + o link. Muda a cor; altura e raio não mudam.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem; padding: 0 1.25rem; border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 700; line-height: 1;
  border: 1px solid transparent; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s ease-out;
}
.btn-primario { background: var(--verde-forte); color: var(--branco); }
.btn-primario:hover { background: var(--verde-profundo); }
.btn-contorno { border-color: var(--linha); color: var(--ink); background: var(--branco); }
.btn-contorno:hover { border-color: var(--verde-forte); color: var(--verde-forte); }
.btn-claro { background: var(--branco); color: var(--verde-profundo); }
.band-dark .btn-contorno { background: transparent; border-color: var(--linha-escura); color: var(--branco); }
.band-dark .btn-contorno:hover { border-color: var(--verde-claro); color: var(--verde-claro); }
.btn-claro:hover { background: var(--verde-suave); }
/* A terceira acao do fecho dela nao e um botao: e um link com altura de botao. */
.btn-texto { color: var(--verde-forte); padding-inline: .5rem; }
.btn-texto:hover { text-decoration: underline; }
.band-dark .btn-texto { color: var(--verde-claro); }
/* Elevacao unica do site: 2px, 150ms. Vale para botao e para cartao. */
.btn:hover { transform: translateY(-2px); }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -----------------------------------------------------------------------------
   Cartão — 1 receita. Tudo o mais é modificador.
   -------------------------------------------------------------------------- */
.cartao {
  display: grid; gap: .625rem; align-content: start;
  padding: 1.5rem; border-radius: var(--r);
  background: var(--branco); border: 1px solid var(--linha);
}
.cartao-titulo { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.cartao-texto  { color: var(--ink-2); font-size: var(--fs-md); }
.cartao-alto   { box-shadow: var(--sombra); border-color: transparent; }
.cartao-alto { transition: transform .15s ease-out, box-shadow .15s ease-out; }
.cartao-alto:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.cartao-liso   { background: var(--fundo); border-color: transparent; }
.cartao-escuro { background: var(--verde-profundo-2); border-color: var(--linha-escura); color: var(--verde-suave); }
.cartao-escuro .cartao-texto { color: var(--on-deep-2); }

/* Cartão dentro de faixa escura JÁ NASCE escuro.
   O .cartao tem fundo branco fixo, e a .band-dark pinta o texto para fundo
   escuro: título em branco, parágrafo em on-deep-2. Juntos davam branco sobre
   branco — contraste 1:1, texto invisível. Nao era teoria: aconteceu no cartao
   do VISION em /v2/plataforma, no ar em 01/09.
   Existia a variante `.cartao-escuro` com exatamente os valores certos, mas ela
   so servia quem lembrasse de pedi-la. Agora a faixa manda no cartao — porque e
   a faixa que ja mandava na cor do texto, e as duas decisoes tem de sair do
   mesmo lugar. */
.band-dark .cartao { background: var(--verde-profundo-2); border-color: var(--linha-escura); color: var(--verde-suave); }
.band-dark .cartao-alto { box-shadow: none; }
.band-dark .cartao-texto { color: var(--on-deep-2); }
.cartao-link   { display: inline-flex; gap: .375rem; font-weight: 700; font-size: var(--fs-md); color: var(--verde-forte); }
.cartao-link:hover { text-decoration: underline; }

.grade { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grade-larga { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grade-media { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.grade-dupla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2rem; }
/* Cartao sozinho nao estica. `auto-fit` distribui a largura toda entre as
   colunas que existem — com UM item isso da um cartao de 1376px, que o olho le
   como faixa e nao como cartao. Acontece na /plataforma, onde o VISION virou um
   ponteiro para o Sobre: ali o cartao precisa parecer um cartao. */
.grade:has(> :only-child) { max-width: 46rem; }

/* O numero de destaque da frente. Grande porque nas paginas de setor ele E o
   argumento — o briefing abre com 118,7 MtCO2e. Fica acima da linha de apoio,
   com o mesmo verde que carrega texto. `tabular-nums` porque quatro numeros
   lado a lado precisam alinhar a virgula. */
.frente-valor {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.02em; color: var(--verde-forte);
  font-variant-numeric: tabular-nums; margin-top: .25rem;
}
.band-dark .frente-valor { color: var(--verde-claro); }

/* -----------------------------------------------------------------------------
   Cabeçalho e menu — dropdown nativo <details>, cresce por lista
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky; top: 0; z-index: 40;
  background: var(--branco); border-bottom: 1px solid var(--linha);
}
.cabecalho-in { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }

/* A marca e o wordmark oficial (SVG), nao o nome escrito. A altura fixa daqui,
   somada ao par width/height na tag, garante que o arquivo nunca passe pelo
   tamanho padrao de 300x150 de um SVG com viewBox — o salto que ja derrubou o
   cabecalho do site atual. width:auto mantem a proporcao exata do viewBox. */
.marca { display: inline-flex; align-items: center; }
.marca img { height: 26px; width: auto; }

.menu { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.menu-lista { display: flex; align-items: center; gap: .125rem; }
.menu-item { position: relative; }

.menu-grupo > summary, .menu-item-solo {
  display: flex; align-items: center; gap: .3125rem;
  padding: .5rem .6875rem; border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 600; list-style: none; cursor: pointer;
}
.menu-grupo > summary::-webkit-details-marker { display: none; }
/* O link solo entra no MESMO seletor do summary (nao numa copia dos valores):
   se um dia o item de menu mudar de tamanho, os dois mudam juntos. Mas a
   setinha de "abre painel" fica so no summary — o solo nao abre nada, e seta
   que nao abre e promessa quebrada. */
.menu-grupo > summary::after {
  content: ""; width: .4375rem; height: .4375rem; margin-top: -.1875rem;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); transition: transform .18s;
}
.menu-grupo > summary:hover, .menu-item-solo:hover { background: var(--fundo); }
.menu-grupo[open] > summary { background: var(--fundo); }
.menu-grupo[open] > summary::after { transform: rotate(-135deg); margin-top: .125rem; }

/* ONDE VOCÊ ESTÁ — o item da página atual (ou da seção em que ela está) fica
   com fundo verde-claro e um sublinhado. Antes o estado ativo usava o MESMO
   cinza do hover, e por isso ninguém distinguia "estou aqui" de "o mouse está
   aqui". Pedido do dono em 11/09.

   O sublinhado é --verde-forte, não --verde: como indicador de estado ele
   precisa de 3:1 contra o fundo em que está (WCAG 1.4.11), e --verde dava
   2,93:1 sobre --verde-suave. --verde-forte dá 4,97:1. Medido, não estimado.

   É ::before porque o ::after do summary já é a setinha do painel. */
.menu-item-solo.is-atual, .menu-grupo.is-atual > summary {
  position: relative; color: var(--ink); background: var(--verde-suave);
}
.menu-item-solo.is-atual::before, .menu-grupo.is-atual > summary::before {
  content: ""; position: absolute; left: .6875rem; right: .6875rem; bottom: .1875rem;
  height: 2px; border-radius: 2px; background: var(--verde-forte);
}

.menu-painel {
  position: absolute; top: calc(100% + .375rem); left: 0; z-index: 41;
  min-width: 15rem; padding: .625rem; border-radius: var(--r);
  background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-alta);
}
.menu-painel-fim { left: auto; right: 0; }
.menu-painel ul { display: grid; gap: .0625rem; }
.menu-painel-2col ul { grid-template-columns: repeat(2, minmax(11rem, 1fr)); }
/* Subtitulo dentro do painel: separa os tres jeitos de chegar em Solucoes (por
   setor, para redes, por necessidade). Nao e link e nao recebe foco — e placa,
   nao porta. O primeiro nao ganha margem em cima porque ja tem o topo do
   painel. */
.menu-sub {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
  margin: 1rem 0 .25rem; padding-top: .75rem; border-top: 1px solid var(--linha);
}
.menu-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.menu-painel a {
  display: block; padding: .5rem .625rem; border-radius: var(--r-sm);
  font-size: var(--fs-md); color: var(--ink);
}
.menu-painel a:hover { background: var(--fundo); color: var(--verde-forte); }
/* A página atual dentro do painel aberto: texto --verde-forte sobre
   --verde-suave dá 4,97:1, acima dos 4,5:1 que texto normal exige. */
.menu-painel a[aria-current="page"] { background: var(--verde-suave); color: var(--verde-forte); font-weight: 600; }
.menu-painel-nota {
  padding: .5rem .625rem 0; margin-top: .25rem; border-top: 1px solid var(--linha);
  font-size: var(--fs-xs); color: var(--ink-2);
}
.menu-cta { margin-left: .5rem; }
.menu-botao { display: none; }
.menu-fechar { display: none; }

/* Seletor de idioma — dropdown na própria barra, não uma faixa nova em cima
   dela. Só existe no HTML quando há mais de um idioma para oferecer, então em
   português puro esta regra não pinta nada.
   A ORDEM é de flex, não de DOM: no desktop ele fecha a direita, depois do
   menu; no celular ele fica antes do botão Menu. A marcação é uma só. */
.idiomas { order: 3; position: relative; }
.menu { order: 2; }
.idiomas > summary {
  display: flex; align-items: center; gap: .375rem;
  padding: .4375rem .5625rem; border-radius: var(--r-sm);
  border: 1px solid var(--linha);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
  color: var(--ink-2); list-style: none; cursor: pointer;
}
.idiomas > summary::-webkit-details-marker { display: none; }
.idiomas > summary::after {
  content: ""; width: .375rem; height: .375rem; margin: -.1875rem 0 0 .0625rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s;
}
.idiomas[open] > summary::after { transform: rotate(-135deg); margin-top: .125rem; }
.idiomas > summary:hover, .idiomas[open] > summary { color: var(--ink); background: var(--fundo); }
.idioma-globo { width: 1rem; height: 1rem; flex: none; }

.idiomas-painel {
  position: absolute; top: calc(100% + .375rem); right: 0; z-index: 41;
  min-width: 10.5rem; padding: .375rem; border-radius: var(--r);
  background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-alta);
}
.idiomas-painel ul { display: grid; gap: .0625rem; }
.idioma {
  display: block; padding: .5rem .625rem; border-radius: var(--r-sm);
  font-size: var(--fs-md); color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.idioma:hover { color: var(--ink); background: var(--fundo); }
/* O idioma corrente é um <span>, não um link para a própria página. */
.idioma.is-atual { color: var(--ink); background: var(--verde-suave); font-weight: 600; cursor: default; }
/* Página que não existe naquele idioma: o item leva à inicial, e a seta diz
   que o destino não é esta mesma página. Sem o sinal, o clique parece quebrado. */
.idioma-so-inicial::after { content: " ↗"; opacity: .55; }

/* -----------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape { background: var(--verde-profundo); color: var(--verde-suave); padding-block: 3.5rem 2rem; }
.rodape .marca img { height: 28px; }
.rodape-topo { display: grid; gap: 2.5rem; grid-template-columns: minmax(11rem, 1fr) 4.5fr; }
.rodape-assinatura { color: var(--on-deep-2); font-size: var(--fs-md); margin-top: .75rem; max-width: 20rem; }
.rodape-grupos { display: grid; gap: 1.75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.rodape-titulo {
  display: block; margin-bottom: .625rem; color: var(--branco);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.rodape-grupo li + li { margin-top: .375rem; }
.rodape-grupo a { font-size: var(--fs-md); color: var(--on-deep-2); }
.rodape-grupo a:hover { color: var(--branco); }
.rodape-base {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha-escura);
  font-size: var(--fs-sm); color: var(--on-deep-2);
}
.rodape-legal { display: flex; flex-wrap: wrap; gap: .5rem .875rem; }

/* -----------------------------------------------------------------------------
   Bloco · hero
   -------------------------------------------------------------------------- */
/* A proporcao e a do desenho da especialista: o TEXTO e a coluna estreita e o
   painel do produto e a larga. Invertido (o v2 tinha 1.2fr/1fr) o mock cabia em
   ~420px, quebrava os quatro KPIs em duas fileiras e crescia o hero em 300px. */
.hero-in { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; }
.hero-texto { display: grid; gap: 1.125rem; align-content: center; }
.hero-titulo { font-size: var(--fs-h1); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.hero-lede { font-size: var(--fs-lede); color: var(--ink-2); max-width: 34rem; text-wrap: pretty; }
.hero-confianca {
  display: flex; flex-wrap: wrap; gap: .5rem 1.125rem;
  padding-top: .375rem; font-size: var(--fs-sm); color: var(--ink-2);
}
.hero-confianca li { display: flex; align-items: center; gap: .4375rem; }
.hero-confianca li::before {
  content: ""; width: .375rem; height: .375rem; border-radius: var(--r-pill); background: var(--verde);
}
.hero-nota { font-size: var(--fs-sm); color: var(--ink-2); max-width: 32rem; }
/* Hero escuro — a composicao dela: o painel branco do produto flutua sobre o
   verde profundo, e e esse contraste que faz a tela parecer solida. */
.hero-escuro { background: radial-gradient(75rem 50rem at 25% 35%, var(--verde-profundo-2), var(--verde-profundo) 62%); }
.band-dark .hero-confianca { color: var(--on-deep-2); }
.band-dark .hero-confianca li::before { background: var(--verde-claro); }

/* -----------------------------------------------------------------------------
   Bloco · entradas (cartões numerados de escolha)
   -------------------------------------------------------------------------- */
/* Os tres cartoes tem massa de conteudo diferente por natureza: o do GHG carrega
   a bifurcacao self-service x especialista, que os outros nao tem. Sem empurrar
   as acoes pra base, os botoes terminavam em tres alturas (405, 585 e 420) e
   sobrava vazio embaixo dos cartoes 01 e 03. Coluna flex + margin-top auto poe
   todos os CTAs na mesma linha, e o respiro passa a ficar ENTRE texto e acao,
   que le como intencao em vez de sobra. */
.entrada { position: relative; padding-top: 1.75rem; display: flex; flex-direction: column; gap: .625rem; }
/* A ilustracao sangra ate a borda do cartao. As tres vem quadradas do v1 e a
   faixa 4/3 descarta 12,5% em cima e embaixo — medi o retangulo de desenho de
   cada uma (o mais alto comeca em 14,9% e termina em 82,3%), entao o corte cai
   inteiro na margem branca e nenhuma perde conteudo. */
.entrada-figura { margin: -1.75rem -1.5rem .25rem; }
.entrada-figura img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r) var(--r) 0 0; background: var(--fundo);
}
.entrada-topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.entrada-acoes { display: grid; gap: .5rem; justify-items: stretch; margin-top: auto; padding-top: .75rem; }
.entrada-acoes .btn { justify-content: center; }
/* Rotulo e texto na mesma linha: empilhados, as duas opcoes do GHG somavam
   quatro linhas e dobravam a altura do cartao. */
.entrada-linha { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.entrada-rotulo { font-weight: 700; color: var(--ink); }
.entrada-rotulo::after { content: " — "; font-weight: 400; }
/* ── As duas PORTAS de entrada (mockup home_page6) ──────────────────────────
   Substituiu a variante "pergunta", que era cartao liso com a ilustracao no pe.
   Cartao fazia as duas entradas lerem como dois produtos de um catalogo, e elas
   sao duas perguntas que a MESMA pessoa pode ter. Sem caixa, sem fundo: o que
   separa os caminhos e um filete com um "ou" no meio.

   ⚰️ A forma antiga (.entrada-pergunta, .entrada-figura-pe) morreu no mesmo
   commit, e as duas paginas que a usavam (home 06 e plataforma 06) passaram
   juntas para esta. */
/* Os arcos sangram para FORA do container, e sem isto a metade que fica fora
   da janela vira 192px de rolagem lateral no documento inteiro. `clip` e nao
   `hidden` de proposito: `hidden` cria um contexto de rolagem e mata qualquer
   `position: sticky` que venha a existir dentro da secao. */
.secao-portas { overflow-x: clip; }
.portas { position: relative; display: grid; gap: 2.5rem; }
.porta { display: flex; flex-direction: column; gap: .75rem; }
.porta-meio { display: flex; flex-direction: column; gap: .75rem; }
/* A pergunta e o elemento maior da secao inteira, e e de proposito: ela e a
   unica coisa que o leitor precisa reconhecer como sua. */
.porta-pergunta {
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3.5rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase;
  text-wrap: balance;
}
.porta-rotulo { display: flex; align-items: flex-start; gap: .625rem; color: var(--verde-forte); }
.porta-rotulo svg { width: 1.5rem; height: 1.5rem; flex: none; margin-top: .0625rem; }
.porta-rotulo b { display: block; font-size: var(--fs-md); font-weight: 700;
                  letter-spacing: .06em; text-transform: uppercase; }
.porta-meta { display: block; font-size: var(--fs-sm); color: var(--ink-2);
              letter-spacing: .06em; text-transform: uppercase; }
.porta .regua { background: var(--verde-forte); width: 2.5rem; margin: .375rem 0 .5rem; }
.porta-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.porta-lista li { display: flex; align-items: center; gap: .875rem;
                  font-size: var(--fs-lg); color: var(--ink); }
.porta-disco {
  display: grid; place-items: center; flex: none;
  width: 2.125rem; height: 2.125rem; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--verde) 35%, transparent);
  color: var(--verde-forte);
}
.porta-disco svg { width: 48%; height: 48%; }
.porta .entrada-acoes { margin-top: 1.5rem; padding-top: 0; }
.porta .btn { justify-content: center; padding-block: .9375rem; }

/* O OU mora ENTRE as duas portas, dentro do filete que as separa. */
.portas-ou {
  display: grid; place-items: center; position: relative;
  font-size: var(--fs-md); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
.portas-ou span {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: var(--r-pill); background: var(--branco); border: 1px solid var(--linha);
}
/* Os ARCOS dao profundidade ao branco sem desenhar caixa. Ficam ATRAS de tudo e
   bem claros: passando disso viram ruido em cima da pergunta, que e o oposto
   do que a secao precisa. */
.portas-arcos {
  position: absolute; top: 50%; z-index: 0;
  width: 27rem; height: 27rem; transform: translateY(-50%);
  color: color-mix(in srgb, var(--verde) 20%, transparent); pointer-events: none;
}
.portas-arcos-esq { left: -14rem; }
.portas-arcos-dir { right: -14rem; }
@media (max-width: 1100px) { .portas-arcos { display: none; } }
.portas > .porta, .portas > .portas-ou { position: relative; z-index: 1; }

.portas-rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--linha);
  font-size: var(--fs-lg); color: var(--ink-2); text-align: center;
}
.portas-rodape .porta-disco { width: 1.875rem; height: 1.875rem; }

@media (min-width: 860px) {
  .portas { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 3.5rem; align-items: start; }
  /* As duas portas dividem as MESMAS faixas horizontais: pergunta, rótulo,
     régua, lista e botão. Sem isso, uma pergunta de duas linhas contra outra de
     uma joga todo o resto da direita para cima, e as duas deixam de se ler
     lado a lado. `subgrid` faz isso sem inventar altura fixa; onde não houver,
     o empilhamento em coluna continua correto. */
  @supports (grid-template-rows: subgrid) {
    .portas { grid-template-rows: auto 1fr auto; }
    .porta, .portas-ou { grid-row: 1 / -1; }
    .porta { display: grid; grid-template-rows: subgrid; gap: 0; }
    /* A pergunta ancora pela BASE, como no mockup: uma pergunta de três linhas
       e outra de duas terminam na mesma altura, e os dois rótulos começam
       juntos. Ancorada pelo topo, a coluna mais curta subiria sozinha. */
    .porta-pergunta { align-self: end; margin-bottom: .75rem; }
  }
  /* O filete acompanha a altura das portas, e o disco do "ou" fica no meio
     dele: e o filete que separa, o disco so nomeia a separacao. */
  .portas-ou { align-self: stretch; }
  .portas-ou::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 1px; background: var(--linha);
  }
  .porta .entrada-acoes { margin-top: auto; padding-top: 1.5rem; }
  .porta { min-height: 100%; }
}

/* -----------------------------------------------------------------------------
   Bloco · argumento (2 ou 3 colunas de texto)
   -------------------------------------------------------------------------- */
/* Variante com imagem: abertura e ilustracao dividem a linha; as colunas seguem
   inteiras embaixo. A faixa 4/3 sobre a arte quadrada corta so margem branca. */
.argumento-topo {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  grid-template-columns: 1.05fr .95fr; align-items: center; margin-bottom: 2.5rem;
}
.argumento-topo .secao-cabeca { margin-bottom: 0; }
/* Abertura estreita + grade larga: e a proporcao das secoes 03, 05 e 08 dela. */
.argumento-topo-larga { grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr); align-items: start; }
/* Quatro cartoes nunca quebram 3+1. Na coluna larga cabiam tres, e o quarto
   descia sozinho numa fileira propria — orfao de linha, que o olho le como
   "faltou alguma coisa aqui" mesmo quando nao falta. Quatro itens sao uma
   matriz 2x2: duas fileiras cheias em vez de uma cheia e uma pela metade.
   Cinco ou mais voltam a se distribuir sozinhos. */
.argumento-topo-larga .grade:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.argumento-figura img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r); background: var(--fundo);
}
.argumento-colunas { display: grid; gap: var(--gap); }
.argumento-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.argumento-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.argumento-item { display: grid; gap: .5rem; align-content: start; }
.argumento-titulo { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; }
.argumento-texto { color: var(--ink-2); }
.band-dark .argumento-texto { color: var(--on-deep-2); }

/* -----------------------------------------------------------------------------
   Bloco · esteira (processo em N etapas conectadas)
   -------------------------------------------------------------------------- */
.esteira { display: grid; gap: 2rem 0; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.esteira-passo { position: relative; padding: 2.25rem .625rem 0; text-align: center; }
.esteira-passo::before {
  content: ""; position: absolute; top: .5rem; left: 0; right: 0; height: 2px; background: var(--linha);
}
.esteira-passo::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 1.125rem; height: 1.125rem;
  margin-left: -.5625rem; border-radius: var(--r-pill);
  background: var(--branco); border: 2px solid var(--verde);
}
.esteira-passo:first-child::before { left: 50%; }
.esteira-passo:last-child::before { right: 50%; }
.esteira-nome { display: block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.esteira-passo .regua { margin: .75rem auto .875rem; }
.esteira-texto { display: block; margin-top: .375rem; font-size: var(--fs-md); color: var(--ink-2); }
.band-alt .esteira-passo::after { background: var(--fundo); }
.band-dark .esteira-passo::before { background: var(--linha-escura); }
.band-dark .esteira-passo::after { background: var(--verde-profundo); border-color: var(--verde-claro); }
.band-dark .esteira-texto { color: var(--on-deep-2); }
/* Com medalhao, a composicao dela: o trilho passa PELO CENTRO do circulo (por
   isso o ponto some e a linha desce), e a etapa ganha nome grande e chips.
   A largura minima de 13rem faz 5 -> 4 -> 3 -> 2 -> 1 coluna sozinha: por isso
   a especificidade dobrada, para vencer as duas media queries do sistema sem
   inventar uma terceira. */
.esteira.esteira-medalha { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 2.5rem 1rem; }
.esteira-medalha .esteira-passo { padding-top: 0; }
/* O trilho so existe quando as cinco etapas cabem numa linha (>=1200px, la
   embaixo). Quebrada em 3+2, a linha sobrava pra fora da segunda fileira e
   apontava pro vazio — foi visto em captura de 768 e de 375, nao suposto. */
.esteira-medalha .esteira-passo::before,
.esteira-medalha .esteira-passo::after { content: none; }
.esteira-medalha .medalha { position: relative; margin: 0 auto 1.125rem; }
.esteira-medalha .esteira-nome { font-size: var(--fs-h3); letter-spacing: .02em; }
.esteira-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin-top: .875rem; }

/* -----------------------------------------------------------------------------
   Bloco · frentes (5 cartões temáticos; tom do MESMO acento por frente)
   -------------------------------------------------------------------------- */
.frentes { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* -----------------------------------------------------------------------------
   Bloco · mock — a tela do produto desenhada em CSS (sem screenshot)
   -----------------------------------------------------------------------------
   A composição é a do desenho da especialista: barra lateral escura com os dez
   módulos, e à direita o painel de Visão geral. A moldura de NAVEGADOR que
   estava aqui (pontinhos + barra de URL) morreu junto: o desenho dela mostra o
   aplicativo, não o browser, e manter as duas era manter duas telas.

   Tudo aqui é em `em`, derivado de UM tamanho de fonte na .mock. É assim que a
   tela inteira escala junto — da coluna estreita do hero à largura cheia — sem
   entrar uma dúzia de tamanhos novos na escala da folha.
   ⚠ Os números do markup são ilustrativos; a regra está em partials/mock.php.
   -------------------------------------------------------------------------- */
.mock {
  display: flex; overflow: hidden; border-radius: var(--r);
  background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-alta);
  font-size: clamp(.5625rem, .4rem + .45vw, .6875rem); line-height: 1.35;
  /* A cor volta ao ink AQUI porque no hero a .mock vive dentro de uma .band-dark:
     sem esta linha os KPIs herdavam o verde-suave do fundo escuro e ficavam
     lavados sobre o branco do proprio painel. */
  color: var(--ink);
}
/* A perspectiva do desenho dela. Vive na .mock e nao no [data-parallax] porque
   o parallax escreve transform naquele elemento — dois transforms se atropelam. */
.mock-inclinado { transform: perspective(140em) rotateX(4deg) rotateY(-7deg); transform-origin: 80% 20%; }
.mock b { font-weight: 700; font-variant-numeric: tabular-nums; }

.mock-nav {
  flex: none; width: 11em; display: grid; align-content: start; gap: .15em;
  padding: 1.1em .8em; background: var(--verde-profundo); color: var(--on-deep-2);
}
.mock-marca { height: 1.7em; width: auto; margin: 0 .4em 1em; }
.mock-nav-item { display: flex; align-items: center; gap: .6em; padding: .55em .8em; border-radius: var(--r-sm); }
.mock-nav-item i { flex: none; width: .8em; height: .8em; border: 1px solid currentColor; border-radius: 2px; opacity: .6; }
.mock-nav-red { border-radius: 50%; }
.mock-nav-item.is-ativo { background: var(--verde-profundo-2); color: var(--branco); font-weight: 700; }
.mock-nav-fim { height: 1em; }

.mock-corpo { flex: 1; min-width: 0; display: grid; align-content: start; gap: .8em; padding: 1.1em; background: var(--fundo); }
.mock-topo { display: flex; align-items: center; gap: .6em; }
.mock-topo > b { flex: 1; min-width: 0; font-size: 1.25em; letter-spacing: -.01em; }
.mock-filtro { flex: none; padding: .4em .7em; border-radius: var(--r-sm); background: var(--branco); border: 1px solid var(--linha); color: var(--ink-2); }
.mock-avatar { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--verde-forte); }

/* As tres grades usam rem, nao em: a quantidade de colunas tem que responder a
   LARGURA real do painel. Em `em` ela ficava congelada (largura e fonte encolhem
   juntas), e o mock de 375px continuava tentando tres colunas de 100px. */
.mock-kpis    { display: grid; gap: .8em; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.mock-grade   { display: grid; gap: .8em; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.mock-grade-3 { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.mock-kpi, .mock-painel {
  display: grid; align-content: start; gap: .5em; padding: .9em;
  border-radius: var(--r-sm); background: var(--branco); border: 1px solid var(--linha);
}
.mock-rotulo { color: var(--ink-2); font-weight: 600; }
.mock-kpi > b { font-size: 1.7em; letter-spacing: -.02em; }
.mock-delta { color: var(--ink-2); }
.mock-delta-ok { color: var(--verde-forte); font-weight: 700; }

.mock-rosca { display: grid; place-items: center; width: 5.5em; height: 5.5em; border-radius: 50%; background: conic-gradient(var(--fatias)); }
.mock-rosca > span { display: grid; place-items: center; width: 68%; height: 68%; border-radius: 50%; background: var(--branco); }
.mock-rosca b { font-size: 1.25em; letter-spacing: -.02em; }
.mock-rosca i { font-style: normal; font-size: .8em; color: var(--ink-2); }
.mock-rosca-nota { --fatias: var(--verde) 0 var(--p), var(--linha) var(--p) 100%; width: 4.4em; height: 4.4em; margin: 0 auto; }
.mock-escopo { display: flex; align-items: center; gap: 1em; }
/* A rosca dos escopos carrega sete digitos no miolo; a da maturidade, dois.
   Sem isto o "128.450" saia cortado pelo furo. */
.mock-escopo .mock-rosca { width: 6.5em; height: 6.5em; }
.mock-escopo .mock-rosca > span { width: 72%; height: 72%; }
.mock-escopo .mock-rosca b { font-size: .95em; }

.mock-lista { display: grid; gap: .5em; flex: 1; min-width: 0; }
.mock-lin { display: flex; align-items: center; gap: .5em; color: var(--ink-2); }
.mock-lin b { margin-left: auto; padding-left: .5em; color: var(--ink); }
.mock-cor { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--c); }
.mock-itens { display: grid; gap: .7em; }
.mock-item { display: flex; align-items: center; gap: .6em; }
.mock-item-txt { flex: 1; min-width: 0; display: grid; }
.mock-item-txt b { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-item-txt i { font-style: normal; font-size: .85em; color: var(--ink-2);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-doc { flex: none; width: .9em; height: 1.1em; border: 1px solid var(--ink-2); border-radius: 2px; }
.mock-pct { flex: none; }
.mock-selo {
  flex: none; padding: .2em .7em; border-radius: var(--r-pill);
  background: var(--verde-suave); color: var(--verde-forte); font-weight: 700; white-space: nowrap;
}
/* O tom de atencao vem da escala de severidade do SBCE — mesma familia, mesmo
   par claro/escuro ja medido. Nome herdado do modulo onde nasceu; se um terceiro
   uso aparecer, ele vira --aviso e o SBCE passa a apelidar. */
.mock-selo-atencao { background: var(--sbce-media-suave); color: var(--sbce-media); }
.mock-ver { color: var(--verde-forte); font-weight: 700; }
.mock-ver-caixa { justify-self: center; padding: .4em .9em; border: 1px solid var(--verde); border-radius: var(--r-sm); }
.mock-valida { align-content: center; justify-items: center; gap: .35em; text-align: center; }
.mock-tique { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid var(--verde); color: var(--verde-forte); font-weight: 700; }
.mock-grande { font-size: 1.9em; letter-spacing: -.02em; }
.mock-legenda { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .875rem; }
.band-dark .mock-legenda { color: var(--on-deep-2); }

/* -----------------------------------------------------------------------------
   Bloco · pessoas (bio com retrato circular)
   -------------------------------------------------------------------------- */
.pessoas { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.pessoa { grid-template-columns: auto 1fr; align-items: start; column-gap: 1.125rem; }
.pessoa-texto { display: grid; gap: .4375rem; align-content: start; }
.pessoa-retrato {
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem; border-radius: var(--r-pill); overflow: hidden;
  background: var(--verde-suave); color: var(--verde-forte);
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: .02em;
}
.pessoa-retrato img { width: 100%; height: 100%; object-fit: cover; }
.pessoa-cargo { font-size: var(--fs-md); font-weight: 700; color: var(--verde-forte); }
.pessoa-credencial { font-size: var(--fs-md); color: var(--ink-2); }
.pessoa-contato { display: flex; flex-wrap: wrap; gap: .375rem .875rem; font-size: var(--fs-sm); }
.pessoa-contato a { color: var(--verde-forte); font-weight: 700; }
.pessoa-contato a:hover { text-decoration: underline; }
/* ── Os fundadores sobre a fotografia (mockup home_page8) ──────────────────
   ⚰️ Substituiu o painel escuro com dois retratos redondos nas pontas. Retrato
   recortado num disco lia "duas fotos de perfil"; a foto dos dois na MESMA
   mesa le "duas pessoas, uma empresa", que e a frase da secao.

   O texto fica no MEIO da foto, entre os dois. O centro dela e livre de
   proposito: e onde a declaracao cabe sem cobrir ninguem. */
.secao-fundadores { padding-block: 0; }
.fund-palco { position: relative; isolation: isolate; overflow: hidden;
              background: var(--verde-profundo); }
.fund-foto { position: absolute; inset: 0; z-index: 0; display: block; }
.fund-foto img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Veu RADIAL, nao linear: escuro no miolo, onde esta o texto, e fraco nas
   pontas, onde estao os rostos. Uniforme e forte o bastante para o texto, ele
   apagaria as duas pessoas — que sao o assunto.

   A tinta e o --ink, nao o --verde-profundo. Com o verde, o veu TINGIA as duas
   pessoas: pele, camisa branca e terno azul saiam esverdeados, e a foto deixava
   de parecer uma foto. O verde da secao entra so nas bordas, de leve. */
.fund-veu {
  /* CLAREADO EM 05/09 a pedido do dono: as duas pessoas apareciam pouco. Os
     três gradientes perderam um quarto da densidade (82→66, 78→66, 46→26) e a
     foto ganhou 35% de luminância média. Não foi no olho: cada camada foi
     composta sobre a fotografia em Python e o contraste medido nas seis
     regiões de texto. O limite é a lede sobre o rosto da esquerda — a 66% ela
     fica em 5,1:1, e a -35% cairia para 4,4:1, abaixo dos 4,5 que texto
     normal exige. Por isso para aqui, e não mais adiante. */
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(56% 76% at 50% 44%,
      color-mix(in srgb, var(--ink) 66%, transparent) 0 30%,
      color-mix(in srgb, var(--ink) 40%, transparent) 60%,
      color-mix(in srgb, var(--ink) 8%, transparent) 100%),
    /* O PE do veu e mais escuro que o resto, e nao e estetica: os nomes das duas
       pessoas ficam nas BORDAS, que e justamente onde o radial e mais fraco.
       Medido, "DAIANE FALLER" em verde-claro dava 2,50:1 sobre a janela clara
       do fundo, contra os 4,5:1 que texto pequeno exige. Hoje, 7,1:1. */
    linear-gradient(0deg,
      color-mix(in srgb, var(--ink) 66%, transparent) 0 18%,
      color-mix(in srgb, var(--ink) 44%, transparent) 42%,
      color-mix(in srgb, var(--ink) 6%, transparent) 66%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--verde-profundo) 26%, transparent),
      color-mix(in srgb, var(--verde-profundo) 5%, transparent) 52%);
}
.fund-conteudo { position: relative; z-index: 2; padding-block: var(--ritmo);
                 display: grid; justify-items: center; gap: 2rem; }
.fund-texto { margin-bottom: 0; max-width: 40rem; }
.fund-texto .secao-titulo { color: var(--branco); }
.fund-texto .secao-titulo .realce { color: var(--verde-claro); }
.fund-texto .eyebrow { color: var(--verde-claro); }
.fund-texto .secao-lede { color: var(--on-deep-2); }

/* A cadeia fica na altura das maos das duas pessoas: MÉTODO aponta da esquerda,
   TECNOLOGIA da direita, e as duas chegam na marca. */
.fund-cadeia {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1rem; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--verde-claro);
}
.fund-cadeia b { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em;
                 text-transform: lowercase; color: var(--branco); }
.fund-seta { color: var(--verde); font-size: var(--fs-md); }

/* Os nomes ficam nas PONTAS, cada um debaixo da sua pessoa. */
.fund-nomes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem;
              width: 100%; text-align: center; }
.fund-nomes b { display: block; font-size: var(--fs-xs); font-weight: 800;
                letter-spacing: .12em; text-transform: uppercase; color: var(--verde-claro); }
.fund-nomes span { font-size: var(--fs-md); color: var(--branco); }
.fund-acao { margin-top: .5rem; }

@media (min-width: 900px) {
  .fund-nomes { grid-template-columns: 1fr 1fr; gap: 0 2rem; }
  .fund-nomes li:first-child { text-align: left; }
  .fund-nomes li:last-child  { text-align: right; }
}
@media (max-width: 899px) {
  /* Estreito, os rostos ficam fora do enquadramento util e o veu passa a
     cobrir tudo: a foto vira textura, e o texto continua legivel.
     AQUI ELE NAO CLAREOU, subiu: medido em 05/09, a 76% o nome em verde-claro
     (12px, bold) ficava em 4,39:1 sobre a janela clara do fundo — abaixo dos
     4,5:1 de texto pequeno. A 80% vai a 4,76:1. O pedido de clarear era sobre
     o desktop, onde os rostos aparecem; no celular a foto ja e textura, e
     clarea-la custaria a leitura dos nomes sem devolver nada. */
  .fund-veu { background: color-mix(in srgb, var(--ink) 80%, transparent); }
  .fund-foto img { object-position: 50% 30%; }
}

/* -----------------------------------------------------------------------------
   Bloco · ficha — o curriculo inteiro de uma pessoa (pagina Sobre)
   -----------------------------------------------------------------------------
   `pessoas` mostra a bio curta; aqui mora o curriculo. A identidade fica parada
   a esquerda enquanto o documento passa a direita — e sao os rotulos dos grupos
   (.eyebrow) que impedem trinta linhas de credencial de virar parede de texto.
   -------------------------------------------------------------------------- */
.ficha { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; }
.ficha-id { position: sticky; top: 5.5rem; display: grid; gap: .5rem; justify-items: start; }
.ficha-foto { width: 100%; max-width: 18rem; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--fundo); }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-corpo { display: grid; gap: 2rem; max-width: 46rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4375rem; }

/* -----------------------------------------------------------------------------
   Bloco · setores — cartão de setor com medalhão
   -----------------------------------------------------------------------------
   No desenho dela cada cartão abre com uma FOTO do setor. Não temos foto de
   setor autorizada, e banco de imagem é o oposto do que a casa faz — então
   fica a metade que sustentamos: o medalhão com o ícone.
   -------------------------------------------------------------------------- */
/* ── Cartão de setor com fotografia (mockup home_page5) ─────────────────────
   O cartão deixou de ser medalhao+titulo+texto e ganhou a fotografia da
   realidade operacional em cima. O padding sai do cartao e vai para o corpo,
   senao a foto nasce com uma moldura branca em volta.

   O MEDALHAO cavalga a borda da foto: metade sobre a imagem, metade sobre o
   branco. E o que costura as duas metades do cartao — sem isso a foto vira
   um banner colado por cima de um cartao antigo. */
/* QUATRO colunas fixas, nao auto-fit. Com auto-fit a home larga cabia cinco, e
   cinco quebra a leitura do mockup: os oito setores deixam de ser 4+4 e viram
   5+3, com os dois cartoes sem foto caindo em linhas diferentes. Aqui a
   quantidade de colunas e composicao, nao sobra de espaco. */
.setores-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .setores-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .setores-grade { grid-template-columns: minmax(0, 1fr); }
  /* Uma coluna, oito cartoes: 3.300px de rolagem so nesta secao. A foto passa
     a 16/9 e a secao encolhe meia tela e meia, sem perder a fotografia — o
     recorte muda, o assunto nao. */
  .setor-foto { aspect-ratio: 16 / 9; }
}
.setor { gap: 0; padding: 0; overflow: hidden; }
.setor-foto { display: block; aspect-ratio: 4 / 3; background: var(--verde-profundo); }
.setor-foto img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Sem foto aprovada: o campo verde ocupa o mesmo lugar e a mesma altura, e nao
   afirma nada sobre o setor. O filete diagonal e o mesmo grafismo do fundo das
   faixas escuras, para nao ler como imagem que falhou ao carregar. */
.setor-foto-vazia {
  background:
    repeating-linear-gradient(135deg, transparent 0 10px,
      color-mix(in srgb, var(--verde-claro) 7%, transparent) 10px 11px),
    linear-gradient(160deg, var(--verde-profundo-2), var(--verde-profundo));
}
.setor-corpo { display: grid; gap: .5rem; align-content: start;
               padding: 0 1.5rem 1.5rem; position: relative; }
.setor-corpo .medalha { margin: -1.75rem 0 .375rem; border: 3px solid var(--branco); }
.setor .cartao-texto { padding-right: 2rem; }
/* A seta mora no canto de baixo, alinhada com o texto. Ela nao e ornamento:
   diz que o cartao leva a algum lugar, e os dois setores sem pagina propria
   nao a tem. */
.setor-seta { position: absolute; right: 1.5rem; bottom: 1.25rem;
              color: var(--verde-forte); font-size: var(--fs-lg); line-height: 1; }
a.setor { transition: transform .15s ease-out, box-shadow .15s ease-out; }
a.setor:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
a.setor:hover .setor-seta { transform: translateX(3px); }
.setor-seta { transition: transform .15s ease-out; }
@media (prefers-reduced-motion: reduce) {
  a.setor, .setor-seta { transition: none; }
  a.setor:hover { transform: none; }
}

/* Cabecalho da secao: titulo a esquerda, explicacao e link a direita. A grade
   desce inteira para baixo dos dois — com oito setores em fotografia, espremer
   a grade em meia largura ao lado do cabecalho devolveria a grade de
   miniaturas que a foto veio desfazer. */
.setores-topo { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.setores-topo .secao-cabeca { margin-bottom: 0; }
.setores-nota { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 900px) {
  .setores-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 3rem;
                  align-items: end; }
  /* O titulo quebra em tres linhas, com o realce na sua. A tese e "ESG na
     pratica" e o destino e "do seu setor" — sao dois movimentos, e emendados
     numa linha so nenhum dos dois e visto. */
  .setores-topo .secao-cabeca { max-width: 26rem; }
  .setores-topo .secao-titulo .realce { display: block; }
}

/* -----------------------------------------------------------------------------
   Bloco · rede — os três modos, e o diagrama âncora → membros → Nexta
   -------------------------------------------------------------------------- */
.rede-modo { padding: 1.625rem 0; border-top: 1px solid var(--linha); }
.rede-modo:last-child { border-bottom: 1px solid var(--linha); }
.rede-modo dt { display: grid; gap: .375rem; margin-bottom: .375rem; }
.rede-modo .regua { display: none; }
.rede-modo-ico { display: none; }

/* ── Fluxo INDIQUE → OPERE → ESCALE (mockup home_page7) ─────────────────────
   Tres movimentos LADO A LADO, ligados por seta tracejada, e nao tres linhas
   empilhadas com filete. O empilhado servia para tres itens que nao tem ordem
   (a /parceiros e a /entidades usam assim, e continuam); aqui a ordem e o
   argumento — indicar nao exige operar, operar nao exige escalar, e quem
   escala ja passou pelos dois.

   As setas sao ::after do proprio modo, e nao elementos: elemento entre os
   itens quebraria a grade em partes desiguais e apareceria empilhado no
   celular, apontando para baixo o que nao desce. */
@media (min-width: 700px) {
  .rede-modos-fluxo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; }
  .rede-modos-fluxo .rede-modo {
    position: relative; padding: 0; border: 0;
    display: grid; align-content: start; gap: .25rem;
  }
  .rede-modos-fluxo .rede-modo:last-child { border-bottom: 0; }
  .rede-modos-fluxo .rede-modo-ico {
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
    border-radius: var(--r-pill); background: var(--verde-suave); color: var(--verde-forte);
    margin-bottom: 1.25rem;
  }
  .rede-modos-fluxo .rede-modo-ico svg { width: 42%; height: 42%; }
  .rede-modos-fluxo .rede-modo .regua {
    display: block; background: var(--verde-forte); width: 1.75rem; margin: .75rem 0 .625rem;
  }
  .rede-modos-fluxo .rede-modo dt { gap: .5rem; margin-bottom: 0; }
  /* A seta nasce na altura do disco, no vao ate o proximo. */
  .rede-modos-fluxo .rede-modo:not(:last-child)::after {
    content: ""; position: absolute; top: 1.75rem; left: 4.25rem; right: -2.25rem; height: 1px;
    background: repeating-linear-gradient(90deg, var(--linha) 0 5px, transparent 5px 10px);
  }
  .rede-modos-fluxo .rede-modo:not(:last-child)::before {
    content: ""; position: absolute; top: 1.4375rem; right: -2.375rem;
    width: .5rem; height: .5rem; border-right: 1.5px solid var(--verde-forte);
    border-top: 1.5px solid var(--verde-forte); transform: rotate(45deg);
  }
}

/* ── O diagrama da rede ─────────────────────────────────────────────────────
   Ancora → empresas → Nexta → visao consolidada. O GARFO e o que faz o desenho
   ler como rede: o fio desce da ancora, abre numa barra e volta a descer, um
   ramo por empresa. Fio reto de caixa em caixa desenharia uma FILA, e fila e o
   oposto do que a secao afirma. */
.rede-mapa { display: grid; justify-items: center; text-align: center; width: 100%; }
.rede-fio { width: 1px; height: 1.75rem; background: var(--linha); }
.rede-pastilha {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--linha);
  background: var(--branco); font-size: var(--fs-sm); color: var(--ink-2);
}
.rede-pastilha svg { width: 1rem; height: 1rem; flex: none; color: var(--verde-forte); }
.rede-ancora {
  padding: .875rem 1.75rem; border-radius: var(--r-pill);
  background: var(--verde-profundo); border-color: var(--verde-profundo); color: var(--branco);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.rede-ancora svg { width: 1.125rem; height: 1.125rem; color: var(--verde-claro); }
.rede-membros { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
                gap: .625rem; width: 100%; }
.rede-membros li { min-width: 0; position: relative; }
/* Cada caixa desenha O SEU ramo, para cima e para baixo. A primeira versao
   punha os ramos no garfo, e o garfo so consegue desenhar as duas pontas — as
   caixas do meio ficavam soltas, ligadas a nada. Quem sabe onde o ramo cai e a
   caixa. */
.rede-membros li::before,
.rede-membros li::after {
  content: ""; position: absolute; left: 50%; width: 1px;
  height: .875rem; background: var(--linha);
}
.rede-membros li::before { top: -.875rem; }
.rede-membros li::after  { bottom: -.875rem; }
.rede-garfo { position: relative; width: 100%; height: 1.75rem; }
/* O tronco desce do meio ate a barra; a barra atravessa do centro do primeiro
   ramo ao centro do ultimo. */
.rede-garfo::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 50%;
  background: var(--linha);
}
.rede-garfo::after {
  content: ""; position: absolute; top: calc(50% - 1px); height: 1px;
  left: calc(50% / var(--ramos)); right: calc(50% / var(--ramos));
  background: var(--linha);
}
.rede-garfo-cima::before { top: 50%; }
.rede-marca { padding: .875rem 3rem; border-radius: var(--r-sm); background: var(--verde-profundo); }
.rede-marca img { height: 1.75rem; width: auto; display: block; }
.rede-visao {
  display: flex; align-items: center; gap: 1rem; text-align: left; width: 100%;
  padding: 1.125rem 1.25rem; border-radius: var(--r); border: 1px solid var(--linha);
  background: var(--branco);
}
.rede-visao-ico { display: grid; place-items: center; flex: none;
                  width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm);
                  background: var(--verde-suave); color: var(--verde-forte); }
.rede-visao-ico svg { width: 48%; height: 48%; }
.rede-visao b { display: block; margin-bottom: .1875rem; }
.rede-visao .cartao-texto { display: block; }

/* O topo do bloco: texto a esquerda, diagrama a direita, e os dois CTAs
   centralizados abaixo dos dois — eles valem para a secao inteira, inclusive
   para quem leu so o diagrama. */
.rede-topo { align-items: start; }
.rede-acoes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--linha);
}
@media (max-width: 699px) {
  /* Estreito, quatro caixas viram duas por linha e o garfo deixa de bater com
     elas: sem os fios, a pilha continua legivel na ordem certa. */
  .rede-membros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem .625rem; }
  /* Em duas colunas, quem liga para CIMA são as duas primeiras e para BAIXO as
     duas últimas. Sem isso sobram quatro fios apontando para o meio da pilha,
     onde não há nada. */
  .rede-garfo::after,
  .rede-membros li:nth-child(n+3)::before,
  .rede-membros li:nth-child(-n+2)::after { display: none; }
  .rede-acoes .btn { width: 100%; }
}

/* -----------------------------------------------------------------------------
   Bloco · numeros (faixa de indicadores)
   -------------------------------------------------------------------------- */
.numeros {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding-block: 1.75rem; border-block: 1px solid var(--linha);
}
.band-dark .numeros { border-color: var(--linha-escura); }
.numero { text-align: center; }
.numero b {
  display: block; font-size: var(--fs-h2); font-weight: 700; line-height: 1.1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.numero span { font-size: var(--fs-md); color: var(--ink-2); }
.band-dark .numero span { color: var(--on-deep-2); }

/* -----------------------------------------------------------------------------
   Bloco · prova (logos · caso · depoimento — ou o estado vazio honesto)
   -------------------------------------------------------------------------- */
.prova-logos {
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center;
  padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--linha);
}
.prova-logo { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; color: var(--ink-2); }
.prova-dupla { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.prova-numero { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.prova-depoimento { font-size: var(--fs-lede); line-height: 1.5; text-wrap: pretty; }
.prova-autor { font-size: var(--fs-md); color: var(--ink-2); }
.prova-normas { display: flex; flex-wrap: wrap; gap: .4375rem; margin-top: .875rem; }

/* -----------------------------------------------------------------------------
   Bloco · faq (<details> nativo, zero JavaScript)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .625rem; max-width: 46rem; margin-inline: auto; }
.faq details { border-radius: var(--r); background: var(--branco); border: 1px solid var(--linha); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; font-size: var(--fs-lg); font-weight: 600;
  list-style: none; cursor: pointer; border-radius: var(--r);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .625rem; height: .625rem; margin-top: -.25rem;
  border-right: 2px solid var(--verde-forte); border-bottom: 2px solid var(--verde-forte);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: .25rem; }
.faq p { padding: 0 1.25rem 1.25rem; color: var(--ink-2); }

/* -----------------------------------------------------------------------------
   Bloco · cta (fecho)
   -------------------------------------------------------------------------- */
.cta-caixa { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.cta-titulo { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.cta-nota { font-size: var(--fs-md); color: var(--ink-2); }
/* O unico degrade do site, e ele existe para dizer que a pagina acabou. */
.regua-degrade {
  width: 13.75rem; height: 2px; margin-bottom: 1.5rem;
  background: linear-gradient(90deg, transparent, var(--verde-claro), var(--verde-forte), transparent);
}
.band-dark .cta-nota { color: var(--on-deep-2); }

/* =============================================================================
   Breakpoint 1 de 2 — o layout de duas colunas vira uma; o menu vira painel
   ============================================================================= */
@media (max-width: 900px) {
  /* minmax(0, 1fr), nao 1fr. `1fr` tem minimo AUTOMATICO = min-content: quando
     o mock passou a ter min-width de 34rem no celular, a coluna inteira esticou
     para 544px e o hero-texto foi junto, empurrando o corpo da pagina a rolar de
     lado. Com minmax(0,...) a faixa pode ser menor que o conteudo, e quem rola
     e a caixa do mock. */
  .hero-in, .rodape-topo, .argumento-topo, .ficha { grid-template-columns: minmax(0, 1fr); }
  /* A perspectiva do mock so faz sentido quando ele e um objeto ao lado do
     texto. Empilhado e ocupando a largura toda, ela vira texto torto. */
  .mock-inclinado { transform: none; }
  .esteira { grid-template-columns: repeat(4, 1fr); }
  .menu-painel-2col ul { grid-template-columns: 1fr; }

  /* O seletor vem antes do botão Menu e é ELE que empurra os dois para a
     direita — com o margin-left:auto no botão, o seletor ficaria colado na
     marca e o par se separaria no meio da barra. */
  .idiomas { order: 2; margin-left: auto; }
  .menu-botao {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: .5rem;
    order: 3;
    padding: .5rem .875rem; border-radius: var(--r-sm);
    border: 1px solid var(--linha); font-size: var(--fs-md); font-weight: 700;
  }
  .menu {
    position: fixed; inset: 0 0 0 auto; z-index: 45;
    display: none; width: min(21rem, 88vw); margin: 0;
    flex-direction: column; align-items: stretch; gap: .25rem;
    padding: 1.25rem; overflow-y: auto;
    background: var(--branco); border-left: 1px solid var(--linha); box-shadow: var(--sombra-alta);
  }
  .menu[data-aberto] { display: flex; }
  .menu-fechar {
    display: block; align-self: flex-end; padding: .5rem .75rem;
    border-radius: var(--r-sm); font-size: var(--fs-md); font-weight: 700; color: var(--ink-2);
  }
  .menu-lista { flex-direction: column; align-items: stretch; gap: .125rem; }
  .menu-grupo > summary, .menu-item-solo { padding: .75rem .625rem; font-size: var(--fs-lg); }
  /* Na gaveta os itens são linhas empilhadas: sublinhado sob a linha inteira
     leria como divisória entre itens. O mesmo sinal vira barra à esquerda. */
  .menu-item-solo.is-atual::before, .menu-grupo.is-atual > summary::before {
    left: 0; right: auto; top: .5rem; bottom: .5rem; width: 3px; height: auto;
  }
  .menu-painel {
    position: static; min-width: 0; padding: .25rem 0 .625rem .625rem;
    border: 0; border-left: 2px solid var(--linha); border-radius: 0; box-shadow: none;
  }
  .menu-cta { margin: .75rem 0 0; }
}

/* =============================================================================
   Breakpoint 2 de 2 — telas estreitas: uma coluna e botões de largura cheia
   ============================================================================= */
@media (max-width: 600px) {
  .esteira { grid-template-columns: repeat(2, 1fr); }
  .pessoa { grid-template-columns: 1fr; row-gap: .875rem; }
  .acoes .btn, .entrada-acoes .btn { width: 100%; }
  /* Barra lateral de 11em em 375px come 40% da tela: some, e o painel fica. */
  .mock-nav { display: none; }
  .tira-alta .tira-selo { padding-right: 0; border-right: 0; }
  .rodape-base { justify-content: flex-start; }
}

/* =============================================================================
   Movimento — entrada por bloco, montagem do mock, parallax contido
   -----------------------------------------------------------------------------
   Contrato deste trecho, nesta ordem de importancia:
   1. Nada aqui esconde conteudo sem JavaScript. Todo estado de PARTIDA vive sob
      html.js-on, e essa classe so existe se o script da cabeca rodou. Sem JS a
      pagina nasce inteira — e continua inteira se o script falhar.
   2. Nada aqui roda para quem pediu menos movimento: o bloco inteiro esta
      dentro de (prefers-reduced-motion: no-preference), entao a preferencia
      desliga o efeito na fonte em vez de acelerar a animacao para 0,01ms.
   3. Distancia curta (14px), duracao curta (340ms), uma coisa por vez.
   ============================================================================= */
@media screen and (prefers-reduced-motion: no-preference) {

  /* Estado de partida do reveal. Esta lista e a MESMA que o nexta.js observa —
     mudou aqui, muda la (GRUPOS e UNIDADES no topo do modulo de movimento). */
  html.js-on .hero-texto > *,
  html.js-on .secao-cabeca > *,
  html.js-on .cta-caixa > *,
  html.js-on .grade > *,
  html.js-on .argumento-colunas > *,
  html.js-on .esteira > *,
  html.js-on .numeros > *,
  html.js-on .faq > *,
  html.js-on .prova-logos > *,
  html.js-on .prova-dupla > *,
  html.js-on .prova-normas > *,
  html.js-on .mock,
  html.js-on .mock-legenda,
  html.js-on .secao-pe { opacity: 0; }

  @keyframes nx-entra {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }
  html.js-on .is-entrando {
    animation: nx-entra .34s cubic-bezier(.22, .61, .36, 1) var(--atraso, 0ms) both;
  }
  /* Entrou: volta a ser um elemento comum. Sem isto o transform do fim da
     animacao continuaria vencendo o hover do cartao. */
  html.js-on .is-visivel { opacity: 1; }

  /* Mock · o selo de status chega depois da linha que ele carimba. As barras
     que cresciam aqui sairam com a moldura de navegador: a tela do desenho
     dela nao tem grafico de barras, e regra sem elemento e regra morta. */
  html.js-on .mock-selo { opacity: 0; }
  html.js-on .mock-itens.is-montando .mock-selo {
    opacity: 1;
    transition: opacity .26s ease-out var(--atraso, 0ms);
  }

  /* Parallax: nao ha regra aqui de proposito. O translate3d que o JS escreve ja
     promove a camada — um will-change em cima disso nao mediu ganho nenhum
     (0,002ms por quadro com e sem), so mais uma media query e uma camada presa
     na memoria no celular, onde o parallax nem roda. */
}

/* =============================================================================
   Movimento — quem pediu menos, recebe menos
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Enumeracao das frentes ────────────────────────────────────────────────
   A lista completa de ferramentas e frameworks por frente. Ela existe porque
   contagem sozinha nao prova cobertura: "40+ capacidades" e uma alegacao, os
   40 nomes sao a evidencia dela.

   Os cartoes tem alturas naturalmente diferentes (13 ferramentas em Gestao ESG
   contra 6 em Clima), e isso fica — igualar produziria cartao oco, que e o
   defeito que o bloco de entradas acabou de perder. O que alinha e o topo. */
.frente-lista { display: grid; gap: .375rem; margin-top: .875rem; }

.frente-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3125rem; }
.frente-lista li {
  position: relative; padding-left: .875rem;
  font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2);
}
.frente-lista li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--pil, var(--verde));
}
.frente-lista li .pill { margin-left: .375rem; vertical-align: 1px; }
/* Com a enumeracao dentro, os cartoes tem conteudo desigual por natureza:
   Gestao ESG tem 19 linhas, Clima tem 12. Esticados pra altura igual, os mais
   curtos ficam com o fundo vazio — o mesmo defeito que o bloco de entradas
   acabou de perder. Aqui NAO ha CTA pra alinhar na base, entao altura natural
   le como indice, e altura igual leria como erro. O que alinha e o topo. */
.grade.frentes { align-items: start; }

/* ── Cores dos pilares e grade de cinco ────────────────────────────────────
   Decisao do dono: manter as cores do site original. Elas vem do material da
   especialista e formam uma escala CATEGORICA — cada frente tem a sua —, o que
   e diferente de acento de marca. Por isso convivem com a regra de um acento
   so: aqui a cor identifica assunto, nao chama pra acao.

   Valores extraidos do styles.css do site atual, nao reinventados. Cada par e
   claro (grafico) + escuro (texto), porque o claro nao passa contraste como
   texto sobre branco. */
.frentes .frente { --pil: var(--pil-gestao); --pil-txt: var(--pil-gestao-txt); }
.frentes .frente:nth-child(2) { --pil: var(--pil-clima); --pil-txt: var(--pil-clima-txt); }
.frentes .frente:nth-child(3) { --pil: var(--pil-natureza); --pil-txt: var(--pil-natureza-txt); }
.frentes .frente:nth-child(4) { --pil: var(--pil-social); --pil-txt: var(--pil-social-txt); }
.frentes .frente:nth-child(5) { --pil: var(--pil-cadeia); --pil-txt: var(--pil-cadeia-txt); }

/* Estava quebrado ate aqui: as duas linhas eram UM seletor descendente
   (".frentes .frentes ..."), que nunca casa — o marcador da lista ficava verde
   em todas as cinco frentes em vez de pegar a cor do pilar. */
.frentes .frente-lista li::before { background: var(--pil); opacity: 1; }

/* Cinco lado a lado, como no original. So a partir de 1200px — abaixo disso
   coluna de 200px com 19 linhas de lista fica ilegivel. O filete que separa as
   frentes tambem so existe aqui: com a grade quebrada em duas linhas, ele
   apareceria solto no comeco da segunda. */
@media (min-width: 1200px) {
  /* --colunas vem do PHP (partials/frentes.php) e vale a contagem real dos
     itens. O 5 de reserva e so para quem esquecer de mandar. */
  .grade.frentes { grid-template-columns: repeat(var(--colunas, 5), minmax(0, 1fr)); gap: 0; }
  .frentes .frente { padding: 0 1.5rem; border-left: 1px solid var(--linha); }
  .frentes .frente:first-child { padding-left: 0; border-left: 0; }
}

/* ── Coluna de frente · a composicao da especialista ───────────────────────
   Ela desenhou coluna, nao cartao: medalhao redondo grande, numero, nome em
   caixa alta, frase imperativa e regua — e um filete separando as cinco. O
   cartao com fundo e borda competia com a lista, que e o conteudo. A COR
   continua sendo a nossa, por pilar: ela identifica o assunto de relance. */
.frentes .frente { display: grid; align-content: start; gap: .25rem; }
/* A MARCA do topo: icone e regua na mesma linha. Substituiu o medalhao redondo
   com numero. O medalhao pesava como botao numa coluna que nao clica, e o
   "01..05" numerava o que nao tem ordem: as cinco frentes sao simultaneas.
   A cor do pilar fica na regua, que e o que identifica a coluna de relance. */
.frentes .frente-marca { display: flex; align-items: center; gap: 1.125rem;
                         margin-bottom: 1.25rem; color: var(--pil-txt); }
/* O peso visual fica no SIMBOLO, nao na linha (especialista, 02/09): icone
   maior, regua mais fina e mais longa — acento grafico, nao barra. */
.frentes .frente-marca svg { width: 2.5rem; height: 2.5rem; flex: none; }
.frentes .frente-marca .regua { background: var(--pil-txt); width: 2.5rem; height: 2px; opacity: .8; }
/* Respiro entre a frase da frente e o primeiro rotulo. Sem ele a tag colorida e
   o "O QUE VOCE OPERA" leem como um paragrafo so, e o rotulo perde a funcao de
   abrir lista. */
.frente-corpo { margin-top: 1.25rem; }
.frente-nome {
  font-size: var(--fs-h3); font-weight: 700; line-height: 1.2;
  letter-spacing: .02em; text-transform: uppercase; margin: 0;
}
.frente-tag { font-size: var(--fs-md); color: var(--pil-txt); }
.frente-bloco + .frente-bloco {
  margin-top: .9375rem; padding-top: .9375rem; border-top: 1px dashed var(--linha);
}
.frente-rotulo {
  margin: 0 0 .625rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pil-txt);
}

/* ── Cabecalho do panorama: titulo a esquerda, regra a direita ───────────────
   A nota diz a regra que governa as cinco colunas ("faca uma vez, conecte ao
   que precisa provar"). Ela estava DEPOIS da enumeracao, e ali chegava tarde:
   quem le 40 capacidades sem ela le 40 tarefas. */
.frentes-topo { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.frentes-topo .secao-cabeca { margin-bottom: 0; }
.frentes-nota { display: flex; gap: 1.5rem; align-items: flex-start; align-self: start; }
.frentes-nota .medalha { --md: 3.5rem; background: var(--fundo); color: var(--verde-forte);
                         border: 1px solid var(--linha); }
.frentes-nota p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.frentes-nota b { display: block; color: var(--ink); }
.band-dark .frentes-nota p { color: var(--on-deep-2); }
.band-dark .frentes-nota b { color: var(--branco); }
@media (min-width: 1000px) {
  /* A coluna da nota e larga o bastante para a frase em NEGRITO caber em uma
     linha: quebrada em duas ela deixa de ser uma regra e vira um paragrafo. */
  .frentes-topo:has(.frentes-nota) { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 0; }
  /* O filete acompanha a ALTURA DA NOTA, nao a do cabecalho: esticado ate
     embaixo ele vira uma segunda coluna de pagina, e a nota nao e coluna. */
  .frentes-nota { padding: .25rem 0 .25rem 3.375rem; border-left: 1px solid var(--linha); }
  .band-dark .frentes-nota { border-left-color: var(--linha-escura); }
}

/* =============================================================================
   SBCE — os dois infográficos como página (sbce-preparacao · sbce-solucoes)
   -----------------------------------------------------------------------------
   O original é 16:9 de projetor. Em pé, três coisas mudam de forma e só elas:
   a sequência com seta (a seta gira 90° e vira coluna), os três grupos de
   exposição (empilham) e a tabela de dez setores (reflui pra um cartão por
   setor, com os quatro campos rotulados). O resto é o sistema que já existia:
   .secao · .container · .band-alt · .band-dark · .cartao · .grade · .btn.
   ============================================================================= */

/* ── Marca do infográfico: wordmark + a linha verde embaixo ──────────────── */
.sbce-marca { display: grid; justify-items: start; gap: .3125rem; margin-bottom: 1.5rem; }
.sbce-marca img { height: 26px; width: auto; }
.sbce-marca > span {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--verde-forte);
}
.band-dark .sbce-marca > span { color: var(--verde-claro); }
.sbce-marca p { max-width: 24rem; margin-top: .5rem; font-size: var(--fs-md); }

/* ── Caixa lateral de referência ─────────────────────────────────────────── */
.sbce-duo { display: grid; gap: 2rem; align-items: start; }
.sbce-caixa {
  padding: 1.125rem 1.25rem; border-radius: var(--r);
  background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--verde);
}
.sbce-caixa-rotulo {
  display: block; margin-bottom: .4375rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--verde-forte);
}
.sbce-caixa p { font-size: var(--fs-md); color: var(--ink-2); }
.sbce-caixa b { color: var(--ink); }

/* ── Selo de severidade — os três degraus da leitura ─────────────────────── */
.sbce-selo {
  display: inline-flex; align-items: center; gap: .4375rem; flex: none;
  padding: .25rem .625rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--sbce-alta-suave); color: var(--sbce-alta);
}
.sbce-selo::before {
  content: ""; flex: none; width: .4375rem; height: .4375rem;
  border-radius: var(--r-pill); background: currentColor;
}
.sbce-selo-media { background: var(--sbce-media-suave); color: var(--sbce-media); }
.sbce-selo-baixa { background: var(--sbce-baixa-suave); color: var(--sbce-baixa); }

/* ── Sequência com seta — linha do tempo, pergunta inicial e o motor ──────
   Uma peça só, três usos. A seta é pseudo-elemento (nunca markup): assim ela
   não é lida por leitor de tela e gira com uma regra em vez de uma classe. */
.sbce-fluxo { display: grid; gap: 2.5rem 1.5rem; }
.sbce-fluxo > li { position: relative; display: grid; gap: .5rem; align-content: start; justify-items: start; }
.sbce-fluxo > li::after {
  content: ""; position: absolute; left: 1.125rem; bottom: -1.5rem;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--verde); border-top: 2px solid var(--verde);
  transform: rotate(135deg);
}
.sbce-fluxo > li:last-child::after { content: none; }
.sbce-fluxo p { font-size: var(--fs-md); color: var(--ink-2); }

.sbce-medalha {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-pill); background: var(--verde-forte); color: var(--branco);
}
/* O verde escurece a cada passo: começa no verde que carrega texto e termina no
   verde profundo. Todo o intervalo mantém o ícone branco acima de 5,6:1. */

.sbce-fluxo .sbce-passo-nome {
  font-size: var(--fs-md); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink);
}

/* ── Os três grupos de exposição ─────────────────────────────────────────── */
.sbce-grupos { display: grid; gap: var(--gap); align-items: start; }
/* min-width:0 e obrigatorio: sem ele o min-content dos grupos 2 e 3 vence a
   fracao e rouba largura do grupo 1, que perde a segunda coluna de cartoes. */
.sbce-grupo { display: grid; gap: .75rem; align-content: start; min-width: 0; }
.sbce-grupo-cabeca {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .625rem;
  padding: .75rem 1rem; border-radius: var(--r-sm);
  background: var(--verde-profundo); color: var(--branco);
}
.sbce-grupo-cabeca h3 {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.sbce-setores { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sbce-pilha   { display: grid; gap: .75rem; }
.sbce-setor {
  display: grid; gap: .4375rem; align-content: start; justify-items: start;
  padding: 1rem; border-radius: var(--r);
  background: var(--branco); border: 1px solid var(--linha);
  border-top: 3px solid var(--sbce-tom, var(--verde));
}
.sbce-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .875rem;
  padding: .875rem 1rem; border-radius: var(--r);
  background: var(--branco); border: 1px solid var(--linha);
  border-left: 3px solid var(--sbce-tom, var(--verde));
}
.sbce-linha-texto { flex: 1 1 9rem; min-width: 0; display: grid; gap: .25rem; }
.sbce-linha .sbce-selo { margin-left: auto; }
.sbce-setor-ico { display: block; color: var(--sbce-tom, var(--verde-forte)); }
.sbce-setor-nome { font-size: var(--fs-md); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; }
.sbce-setor-texto { font-size: var(--fs-sm); color: var(--ink-2); }
.sbce-t-alta  { --sbce-tom: var(--sbce-alta); }
.sbce-t-media { --sbce-tom: var(--sbce-media); }
.sbce-t-baixa { --sbce-tom: var(--sbce-baixa); }
.sbce-setor .btn { margin-top: .375rem; }

.sbce-mini { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .125rem; }
.sbce-mini-item {
  flex: 1 1 4.75rem; display: grid; justify-items: center; gap: .25rem; text-align: center;
  padding: .5rem .375rem; border-radius: var(--r-sm);
  background: var(--sbce-baixa-suave); color: var(--sbce-baixa);
}
.sbce-mini-item span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }

/* ── Faixa: bloco de abertura à esquerda, sequência à direita ────────────── */
.sbce-faixa { display: grid; gap: 1.5rem; align-items: start; }
.sbce-faixa-abre { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; padding: 1.25rem; border-radius: var(--r); background: var(--fundo); }
.sbce-faixa-titulo { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }

/* ── A faixa da pergunta inicial ─────────────────────────────────────────────
   Ela e a unica parte da pagina em que o texto e uma PERGUNTA feita ao leitor,
   e vinha herdando o estilo dos passos do motor: caixa alta, negrito e
   entreletra. "QUAIS FONTES A EMPRESA OPERA?" nao se le como pergunta, se le
   como etiqueta — e pergunta em caixa alta e mais lenta de ler justamente onde
   a leitura precisa ser rapida.

   Caixa normal, corpo maior, e o numero vindo do proprio <ol>: as quatro sao
   uma sequencia (que fontes existem -> quanto emitem -> ha exposicao -> o que
   estruturar), e a numeracao e a informacao que a seta sozinha nao da. */
.sbce-faixa .sbce-fluxo { counter-reset: pergunta; }
.sbce-faixa .sbce-fluxo > li { counter-increment: pergunta; gap: .625rem; }
.sbce-faixa .sbce-passo-nome {
  font-size: var(--fs-base); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ink); text-wrap: balance;
}
.sbce-faixa .sbce-passo-nome::before {
  content: counter(pergunta, decimal-leading-zero);
  display: block; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; color: var(--verde-forte); margin-bottom: .25rem;
  font-variant-numeric: tabular-nums;
}
.sbce-bloco-escuro { padding: 1.25rem; border-radius: var(--r); background: var(--verde-profundo); color: var(--branco); }
.sbce-bloco-escuro h2 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sbce-bloco-escuro p { margin-top: .4375rem; font-size: var(--fs-md); color: var(--on-deep-2); }

/* ── Assinatura da tela 1: screening + inventário + readiness = resultado ── */
.sbce-pe { display: grid; gap: 2rem; align-items: center; }
.sbce-soma { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.125rem; }
.sbce-soma-item { flex: 1 1 11rem; display: grid; gap: .375rem; justify-items: start; }
.sbce-soma-nome { font-size: var(--fs-md); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sbce-soma-item p { font-size: var(--fs-sm); }
.sbce-soma-op { flex: none; font-size: var(--fs-h3); font-weight: 700; color: var(--verde-claro); }
.sbce-soma-fecho {
  flex: 1 1 15rem; padding: 1.125rem 1.25rem; border-radius: var(--r);
  background: var(--verde-profundo-2); border: 1px solid var(--linha-escura);
  font-size: var(--fs-md); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.band-dark .sbce-soma-fecho, .band-dark .sbce-setor-ico { color: var(--branco); }
.sbce-nota { margin-top: 2rem; font-size: var(--fs-xs); }

/* ── Tela 2: a linha verde e o fecho ─────────────────────────────────────── */
.sbce-caixa-alta { text-transform: uppercase; letter-spacing: -.02em; }
.sbce-frase { font-size: var(--fs-lede); font-weight: 700; color: var(--verde-forte); text-wrap: pretty; }
.sbce-fecho { display: flex; justify-content: flex-end; margin-top: var(--gap); }
.sbce-fecho p {
  max-width: 34rem; padding: 1.5rem 1.75rem; border-radius: var(--r);
  background: var(--verde-profundo); color: var(--branco);
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; text-wrap: balance;
}

/* ── A tabela dos dez setores ────────────────────────────────────────────── */
.sbce-tabela { width: 100%; border-collapse: collapse; }
.sbce-tabela th, .sbce-tabela td { text-align: left; vertical-align: top; padding: .875rem 1rem; overflow-wrap: break-word; }
.sbce-tabela thead th {
  background: var(--verde-profundo); color: var(--branco);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.sbce-tabela thead th:first-child { border-radius: var(--r-sm) 0 0 0; width: 15%; }
.sbce-tabela thead th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.sbce-tabela tbody tr { border-bottom: 1px solid var(--linha); }
.sbce-tabela tbody tr:nth-child(odd) { background: var(--branco); }
.sbce-tabela td { font-size: var(--fs-sm); color: var(--ink-2); }
.sbce-tabela-setor { font-size: var(--fs-md); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.sbce-tabela b { display: block; margin-bottom: .25rem; color: var(--verde-forte); }
.sbce-tabela ul { display: grid; gap: .25rem; }
.sbce-tabela li { position: relative; padding-left: .75rem; }
.sbce-tabela li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 4px; height: 4px; border-radius: var(--r-pill); background: var(--verde);
}

/* =============================================================================
   SBCE · breakpoint próprio — a peça é mais larga que um bloco de texto, e por
   isso vira em 1000px e não nos 900 do sistema. É o único do arquivo com este
   valor, e ele existe porque três colunas de grupo + tabela de quatro campos
   não cabem em 900 sem espremer a coluna do meio até a ilegibilidade.
   ============================================================================= */
@media (min-width: 1000px) {
  /* Daqui pra cima as cinco etapas cabem numa linha, e so aqui o trilho existe. */
  .esteira-medalha .esteira-passo::before { content: ""; top: 2.25rem; }

  .sbce-duo    { grid-template-columns: minmax(0, 1fr) 18rem; gap: 2.5rem; }
  /* Centro, nao topo: as perguntas tem 79px e o cartao de abertura 200px. No
     topo elas ficavam penduradas com 121px de vazio embaixo — que e o que fazia
     a faixa parecer estourada. E 18rem porque em 16 o titulo quebrava em quatro
     linhas de tres palavras. */
  .sbce-faixa  { grid-template-columns: 18rem minmax(0, 1fr); gap: 2.5rem; align-items: center; }
  .sbce-pe     { grid-template-columns: 16rem minmax(0, 1fr); gap: 2.5rem; }
  .sbce-grupos { grid-template-columns: 1.7fr 1fr 1fr; }
  /* Duas colunas fixas, como no original. auto-fit aqui erra por 12px em 1024
     e devolve uma coluna so, que estica o grupo 1 pra tres vezes a altura. */
  .sbce-setores { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A seta gira 90°: sai de baixo do passo e vai pro vão da direita. */
  .sbce-fluxo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 2.25rem; }
  /* A seta vai para o MEIO do vao. Em -1.4375rem ela terminava a 1px da coluna
     seguinte e encostava no numero do proximo passo — na tela lia-se "↗03",
     como se a seta fizesse parte do numero. */
  .sbce-fluxo > li::after { left: auto; right: -1rem; top: 1.125rem; bottom: auto; transform: rotate(45deg); }
  /* Em coluna a abertura e uma linha so; empilhada, ela ganha o icone em cima. */
  .sbce-faixa-abre { display: grid; justify-items: start; }
}

/* Os oito passos do motor só cabem em uma linha quando há largura para isso. */
@media (min-width: 1440px) {
  /* O motor de 8 passos FICA em 4 x 2, mesmo aqui em cima. Em oito colunas
     sobravam 110px por passo — cerca de treze caracteres por linha, com
     "Metodologias setoriais e fatores de emissao atualizados." caindo em cinco
     linhas de duas palavras. Duas fileiras de quatro dobram a largura da coluna
     e a corrente continua se lendo na ordem: esquerda para a direita, depois a
     fileira de baixo. A regra de 8 colunas foi removida em 01/09. */
}

/* =============================================================================
   SBCE · a tabela em pé — dez linhas de quatro campos viram dez cartões
   -----------------------------------------------------------------------------
   Reflow, não rolagem: uma tabela de quatro colunas densas em 375px só existe
   como scroll horizontal, que é o mesmo que não existir. O cabeçalho vira o
   rótulo de cada campo (data-rotulo), e a semântica da tabela fica intacta.
   ============================================================================= */
/* Empilhada, a soma precisa do operador entre as parcelas — e nao encostado na
   direita da parcela anterior, que e onde o flex-wrap o deixa por conta propria.
   600px e o breakpoint que a folha ja tem; nao entra um terceiro valor por isto. */
@media (max-width: 600px) {
  .sbce-soma-op { width: 100%; text-align: center; }
}

@media (max-width: 999px) {
  .sbce-tabela, .sbce-tabela tbody { display: block; }
  .sbce-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sbce-tabela tbody tr {
    display: grid; gap: .75rem; margin-bottom: .75rem; padding: 1.125rem;
    border-radius: var(--r); background: var(--branco); border: 1px solid var(--linha);
  }
  .sbce-tabela th, .sbce-tabela td { display: block; padding: 0; }
  .sbce-tabela td::before {
    content: attr(data-rotulo); display: block; margin-bottom: .3125rem;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--verde-forte);
  }
  .sbce-tabela-setor { padding-bottom: .75rem; border-bottom: 1px solid var(--linha); }
}

/* Botao de duas linhas: rotulo + o que acontece ao clicar. A segunda linha e a
   que derruba a duvida ("25 min?", "vai me cobrar?") sem gastar um paragrafo. */
.btn-duplo {
  flex-direction: column; align-items: flex-start; gap: .125rem;
  padding-block: .625rem; line-height: 1.25; text-align: left;
}
.btn-duplo b { font-weight: 700; }
.btn-duplo small { font-size: var(--fs-xs); font-weight: 500; opacity: .82; }

/* Hero sem a coluna do produto (Parceiros · Setores · Contato): centrado. Sem
   isto o texto herda os 42% da coluna estreita e sobra meia dobra vazia. */
.hero-in:has(> .hero-texto:only-child) { grid-template-columns: minmax(0, 52rem); justify-content: center; }
.hero-in:has(> .hero-texto:only-child) .hero-texto { justify-items: center; text-align: center; }
/* ...MENOS quando a foto está aberta. Ali o véu é denso à esquerda e ralo à
   direita: texto centralizado cai justamente sobre a metade onde a fotografia
   aparece, e perde contraste no lugar mais detalhado da imagem. A coluna volta
   para a esquerda, que é onde o véu a sustenta. */
.hero-foto-aberta .hero-in:has(> .hero-texto:only-child) {
  grid-template-columns: minmax(0, 40rem); justify-content: start;
}
.hero-foto-aberta .hero-in:has(> .hero-texto:only-child) .hero-texto {
  justify-items: start; text-align: left;
}
/* O realce começa em linha própria, como no mockup: a tese tem duas metades
   ("não falha por" / "falha por"), e a virada precisa ser vista. */
.hero-foto-aberta .hero-titulo .realce { display: block; }

/* Campos de formulario — a unica aparencia que a biblioteca nao tinha, porque
   nenhum bloco pedia entrada de texto ate a pagina de Contato. O layout vem de
   .argumento-topo-larga e o anel de foco do :focus-visible global. */
.form { display: grid; gap: .875rem; align-content: start; }
.form-dupla { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.form-campo { display: grid; gap: .375rem; }
.form-campo > span, .form-campo > label { font-size: var(--fs-sm); font-weight: 700; }
.form input, .form select, .form textarea {
  font: inherit; color: var(--ink); background: var(--branco);
  padding: .6875rem .875rem; border: 1px solid var(--linha); border-radius: var(--r-sm);
}
.form textarea { min-height: 8rem; resize: vertical; }

/* ── Modal ──────────────────────────────────────────────────────────────────
   Uma caixa por cima da pagina. NAO fecha por ESC nem por clique no fundo
   (regra da casa) — por isso o .modal-fundo nao tem cursor de clique: prometer
   um gesto que nao funciona e pior do que nao ter o gesto.
   O X fica preso no alto a direita e acompanha a rolagem do conteudo. */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--pad); }
.modal-fundo { position: absolute; inset: 0; background: color-mix(in srgb, var(--verde-profundo) 72%, transparent); backdrop-filter: blur(3px); }
.modal-caixa {
  position: relative; width: min(42rem, 100%); max-height: min(86vh, 52rem); overflow: auto;
  background: var(--branco); color: var(--ink); border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--sombra-alta);
}
.modal-x {
  position: sticky; top: 0; float: right; margin: -.5rem -.5rem 0 0;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1px solid var(--linha); border-radius: var(--r-pill);
  background: var(--branco); color: var(--ink-2); cursor: pointer;
}
.modal-x:hover, .modal-x:focus-visible { color: var(--ink); border-color: var(--ink-2); }
.modal-x svg { width: 1.125rem; height: 1.125rem; }
.modal-cabeca { margin-bottom: 1.25rem; }
.modal-titulo { font-size: var(--fs-h3); line-height: 1.15; }
.modal-lede { color: var(--ink-2); margin-top: .5rem; }
.modal-acoes { margin-top: .25rem; }
/* A caixa LARGA (as fichas dos fundadores). O currículo tem duas colunas —
   identidade parada à esquerda, documento passando à direita — e em 42rem ele
   viraria uma coluna só de 300 linhas. */
.modal-largo .modal-caixa { width: min(64rem, 100%); max-height: min(90vh, 60rem); }
.modal-largo .modal-titulo { margin-bottom: 1.25rem; }
/* A ficha dentro da caixa não repete o fundo nem o respiro da seção: a caixa
   já é os dois. */
.modal-largo .ficha { padding: 0; }
.modal-largo .modal-acoes { margin-top: 1.5rem; padding-top: 1.25rem;
                            border-top: 1px solid var(--linha); }
/* O link de cada fundador, sobre a fotografia. Em LINHA PRÓPRIA: colado ao
   cargo ele lia como continuação da frase ("Método & Ciência Veja mais sobre
   Daiane"), e não como o que é, uma porta. */
.fund-nomes li { display: grid; gap: .25rem; align-content: start; }
.fund-link { justify-self: inherit; margin-top: .375rem; color: var(--verde-claro); }
.fund-link:hover { color: var(--branco); }
@media (min-width: 900px) {
  .fund-nomes li:first-child { justify-items: start; }
  .fund-nomes li:last-child  { justify-items: end; }
}
/* Trava a rolagem de tras: sem isto a roda do mouse rola a pagina por baixo da
   caixa e a leitura de quem esta preenchendo salta. */
.tem-modal, .tem-modal body { overflow: hidden; }

/* A isca do anti-robo. Fora da tela, mas NAO display:none — campo escondido
   assim alguns robos ignoram, e e justamente ele que queremos que preencham. */
.form-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-recado { border-radius: var(--r-sm); padding: .75rem 1rem; font-size: var(--fs-sm); }
.form-recado.is-ok   { background: var(--verde-suave); color: var(--esc-1); }
.form-recado.is-erro { background: color-mix(in srgb, var(--sbce-alta) 12%, var(--branco)); color: var(--esc-1); }

/* ── Acronimo · a palavra escrita na vertical ────────────────────────────────
   As letras formam UMA palavra lida de cima para baixo, nao cinco medalhoes.
   O que faz isso funcionar e o entrelinhamento: a altura da linha e a propria
   letra, entao as letras quase se tocam e a coluna vira um logotipo vertical.

   Vazado -> cheio: `-webkit-text-stroke` desenha so o contorno. O estado de
   partida do HTML e CHEIO; quem esvazia e a classe .acro-espera, posta pelo JS.
   Sem script a palavra aparece inteira e legivel. */
.acro { list-style: none; padding: 0; margin: 0; display: grid; }
.acro-linha {
  display: grid; grid-template-columns: minmax(3.5rem, auto) 1fr;
  gap: clamp(1rem, 3vw, 2.25rem); align-items: center;
  padding: .5rem 0; border-top: 1px solid var(--linha);
}
.acro-linha:first-child { border-top: 0; }
.band-dark .acro-linha { border-top-color: var(--linha-escura); }

.acro-letra {
  font-size: clamp(3.25rem, 7vw, 5.25rem); font-weight: 800; line-height: .95;
  letter-spacing: -.04em; text-align: center; color: var(--verde-forte);
  font-variant-numeric: tabular-nums;
}
.band-dark .acro-letra { color: var(--verde-claro); }

/* O vazado. -webkit-text-stroke tem suporte amplo; onde nao houver, a letra
   simplesmente fica cheia — que e o estado bom. */
.acro-espera .acro-letra {
  color: transparent;
  -webkit-text-stroke: 2px var(--verde-forte);
}
.band-dark .acro-espera .acro-letra { -webkit-text-stroke-color: var(--on-deep); }
.acro-linha.e-cheia .acro-letra { color: var(--verde-forte); -webkit-text-stroke-color: transparent; }
.band-dark .acro-linha.e-cheia .acro-letra { color: var(--verde-claro); }

/* O eixo: a letra que a marca ja elegeu (o X do logotipo) nasce cheia e fica. */
.acro-espera .acro-linha.e-eixo .acro-letra {
  color: var(--verde-forte); -webkit-text-stroke-color: transparent;
}
.band-dark .acro-espera .acro-linha.e-eixo .acro-letra { color: var(--verde-claro); }

@media (prefers-reduced-motion: no-preference) {
  .acro-letra { transition: color .5s ease, -webkit-text-stroke-color .5s ease; }
  .acro-corpo { transition: opacity .5s ease, transform .5s ease; }
  .acro-espera .acro-corpo { opacity: .45; transform: translateY(.35rem); }
  .acro-linha.e-cheia .acro-corpo { opacity: 1; transform: none; }
}

.acro-nome { font-size: var(--fs-h3); line-height: 1.2; }
.band-dark .acro-nome { color: var(--branco); }
.acro-texto { color: var(--ink-2); margin-top: .2rem; text-wrap: pretty; }
.band-dark .acro-texto { color: var(--on-deep-2); }
.acro-marca {
  display: inline-block; margin-top: .5rem; font-size: var(--fs-sm);
  padding: .25rem .625rem; border-radius: var(--r-pill);
  background: var(--verde-suave); color: var(--esc-1);
}
.band-dark .acro-marca { background: var(--verde-profundo-2); color: var(--verde-claro); }

/* ── A palavra na HORIZONTAL (mockup Sobre_manifesto · VISION) ──────────────
   A MARCACAO nao muda: e a mesma <ol> de letras da forma vertical. Muda o
   layout, e a mudanca e o argumento — NEXTA desce (profundidade), VISION
   atravessa (abrangencia). Duas figuras, uma receita.

   O EIXO e um fio que passa POR TRAS dos pontos e para no primeiro e no
   ultimo, com uma seta na ponta: fio que vaza sugere que a lista continua fora
   da tela, e o VISION tem seis letras e acaba. */
@media (min-width: 1000px) {
  /* --eixo-fs e --eixo-y sao a fonte da verdade das tres pecas que precisam
     bater na mesma altura: o fio, os pontos e a seta. Escritas a mao em cada
     regra, elas saiam do lugar a cada ajuste de tamanho da letra. */
  .acro-eixo { --eixo-fs: clamp(3rem, 5.2vw, 4.5rem);
               --eixo-y: calc(var(--eixo-fs) + .75rem);
               grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
               --eixo-pad: .5rem;
               gap: 1.25rem; position: relative; padding-top: var(--eixo-pad); }
  .acro-eixo .acro-linha {
    grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start;
    padding: 0; border-top: 0; position: relative;
  }
  .acro-eixo .acro-letra { text-align: left; font-size: var(--eixo-fs);
                           line-height: 1; margin-bottom: 1.5rem; }
  /* O ponto de cada letra, sobre o fio. */
  .acro-eixo .acro-corpo::before {
    content: ""; position: absolute; left: .125rem;
    /* O fio é posicionado pela <ol>, que tem padding-top; o ponto, pelo <li>,
       que começa DEPOIS desse padding. Sem descontar --eixo-pad o centro do
       ponto ficava meio rem abaixo do fio, e o fio só raspava o topo do
       círculo — visto pela Daiane em 23/09. Agora os dois centros coincidem. */
    top: calc(var(--eixo-y) - var(--eixo-pad) - .4375rem); z-index: 1;
    width: .875rem; height: .875rem; border-radius: 50%;
    background: var(--verde-claro); border: 3px solid var(--verde-profundo);
    box-shadow: 0 0 0 2px var(--verde-claro);
  }
  .acro-eixo::before {
    content: ""; position: absolute; z-index: 0; height: 2px;
    left: .5rem; right: 2.5rem; top: calc(var(--eixo-y) - 1px);
    background: linear-gradient(90deg, var(--verde-forte), var(--verde-claro));
  }
  .acro-eixo::after {
    content: ""; position: absolute; right: 2.375rem; z-index: 0;
    top: calc(var(--eixo-y) - .3125rem);
    width: .625rem; height: .625rem;
    border-right: 2px solid var(--verde-claro); border-top: 2px solid var(--verde-claro);
    transform: rotate(45deg);
  }
  .acro-eixo .acro-nome { font-size: var(--fs-md); font-weight: 800;
                          letter-spacing: .04em; text-transform: uppercase; }
  .acro-eixo .acro-texto { font-size: var(--fs-sm); line-height: 1.45; }
  .acro-eixo .acro-marca { font-size: var(--fs-xs); margin-top: .625rem; }
  /* O corpo nao desliza na horizontal: seis colunas subindo juntas viram um
     tremor. Aqui a letra ganhando tinta ja e o movimento. */
  .acro-eixo .acro-corpo { padding-top: 1.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .acro-eixo .acro-espera .acro-corpo,
  .acro-espera .acro-eixo .acro-corpo { transform: none; }
}

.acro-fecho {
  margin-top: var(--gap); padding-top: var(--gap); border-top: 1px solid var(--linha);
  font-size: var(--fs-lede); font-weight: 700; text-wrap: balance;
}
.band-dark .acro-fecho { border-top-color: var(--linha-escura); color: var(--branco); }
.band-dark .acro-fecho .realce { color: var(--verde-claro); }
.acro-nota { margin-top: .5rem; }
.band-dark .acro-nota { color: var(--on-deep-2); }

@media (max-width: 640px) {
  .acro-linha { grid-template-columns: 2.75rem 1fr; gap: 1rem; }
  .acro-letra { font-size: 2.75rem; }
}

/* A ressalva do cronograma. Menor que o dado que ela qualifica, mas legivel —
   ressalva em cinza claro e o mesmo que nao escrever. */
.sbce-caixa-nota { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--linha); }

/* ── Diagnóstico inicial (SBCE) ──────────────────────────────────────────────
   Quatro estações numa linha. O trilho passa ATRAS dos numeros e para no
   ultimo: e ele que diz "isto e um percurso, e tem fim" — quatro cartoes soltos
   diriam "isto e uma lista". Cada estacao mostra a pergunta e, abaixo do
   filete, o que ela devolve. Pergunta sem entrega e etiqueta.
   O trilho e decorativo e some no empilhamento: no celular a ordem vertical ja
   e o percurso, e uma linha atravessada so atrapalharia. */
.sbce-diagnostico { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; }
.sbce-diag-passo { position: relative; display: grid; gap: .5rem; align-content: start; }
.sbce-diag-num {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .12em;
  color: var(--verde-claro); font-variant-numeric: tabular-nums;
}
.sbce-diag-ico {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--verde-profundo-2);
  color: var(--verde-claro); border: 1px solid var(--linha-escura);
}
.sbce-diag-pergunta { font-size: var(--fs-lg); font-weight: 700; color: var(--branco); text-wrap: balance; }
.sbce-diag-entrega {
  font-size: var(--fs-md); color: var(--on-deep-2);
  padding-top: .625rem; border-top: 1px solid var(--linha-escura);
}
.sbce-diag-fecho {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha-escura);
  font-size: var(--fs-lede); color: var(--on-deep-2); text-wrap: balance;
}
.sbce-diag-fecho strong { color: var(--branco); }

@media (min-width: 901px) {
  .sbce-diagnostico { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  /* O trilho: nasce no centro do primeiro icone e morre no centro do ultimo. */
  .sbce-diagnostico { position: relative; }
  .sbce-diagnostico::before {
    content: ""; position: absolute; z-index: 0;
    top: 2.75rem; height: 1px; background: var(--linha-escura);
    left: calc(12.5% + 1.375rem); right: calc(12.5% + 1.375rem);
  }
  .sbce-diag-passo > * { position: relative; z-index: 1; }
}

/* ── O motor do SBCE ─────────────────────────────────────────────────────────
   Quatro setas encaixadas, dois passos dentro de cada. Substituiu uma fileira
   de oito cartoes iguais que se lia como indice: os oito nunca foram oito
   coisas do mesmo peso — sao quatro trocas de estado, e agrupados eles contam
   a transformacao em vez de listar recursos.

   A SETA e o argumento, nao enfeite: cada movimento so existe porque o anterior
   aconteceu. E o tom escurece da esquerda para a direita porque e isso que
   acontece de verdade — comeca solto, termina com obrigacao.

   No empilhamento a seta vira um filete embaixo: em coluna unica a ordem
   vertical ja da a direcao, e um bico apontando para o lado apontaria para o
   nada. */
.motor { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.motor-mov {
  --entalhe: 1.5rem;
  position: relative; padding: 1.5rem 1.375rem;
  border-radius: var(--r-sm); background: var(--verde-suave); color: var(--ink);
}
.motor-cabeca { display: grid; gap: .25rem; margin-bottom: 1rem; }
.motor-num {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em;
  color: var(--verde-forte); font-variant-numeric: tabular-nums;
}
.motor-estado { font-size: var(--fs-sm); color: var(--ink-2); }
.motor-nome { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.motor-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.motor-passos > li { display: grid; grid-template-columns: auto 1fr; gap: .625rem; align-items: start; }
.motor-passos div { display: grid; gap: .125rem; }
.motor-passos b { font-size: var(--fs-md); font-weight: 700; }
.motor-passos span { font-size: var(--fs-sm); color: var(--ink-2); }
.motor-ico {
  width: 1.875rem; height: 1.875rem; display: grid; place-items: center; flex: none;
  border-radius: var(--r-pill); background: var(--branco); color: var(--verde-forte);
}
.motor-fecho {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--linha);
  font-size: var(--fs-lede); color: var(--ink-2); text-wrap: balance;
}
.motor-fecho strong { color: var(--ink); }

/* O tom sobe a cada movimento. So o quarto inverte o texto — e o unico escuro o
   bastante para pedir isso, e e ele o destino.

   Nos tons 2 e 3 o texto secundario abandona o --ink-2: medido, ele dava 4,45 e
   3,76 sobre esses fundos, e texto pequeno precisa de 4,5. Cinza claro sobre
   verde tingido some. A hierarquia nao se perde porque ela nunca dependeu so da
   cor: o nome do passo e 700 em fs-md, a descricao e 400 em fs-sm. */
.motor-mov[data-mov="2"] { background: var(--motor-2); }
.motor-mov[data-mov="2"] .motor-estado, .motor-mov[data-mov="2"] .motor-passos span,
.motor-mov[data-mov="3"] .motor-estado, .motor-mov[data-mov="3"] .motor-passos span { color: var(--ink); }
/* O numero tambem nao aguenta: --verde-forte sobre verde tingido deu 4,49 e
   3,79. Verde-profundo-2 continua verde — o numero nao perde o papel de acento
   — e sobe para folga confortavel. */
.motor-mov[data-mov="2"] .motor-num,
.motor-mov[data-mov="3"] .motor-num { color: var(--verde-profundo-2); }
.motor-mov[data-mov="3"] { background: var(--motor-3); }
.motor-mov[data-mov="4"] { background: var(--verde-profundo); color: var(--verde-suave); }
.motor-mov[data-mov="4"] .motor-num,
.motor-mov[data-mov="4"] .motor-ico { color: var(--verde-claro); }
.motor-mov[data-mov="4"] .motor-ico { background: var(--verde-profundo-2); }
.motor-mov[data-mov="4"] .motor-estado,
.motor-mov[data-mov="4"] .motor-passos span { color: var(--on-deep-2); }
.motor-mov[data-mov="4"] .motor-nome,
.motor-mov[data-mov="4"] .motor-passos b { color: var(--branco); }

@media (min-width: 901px) {
  .motor { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  /* O bico: cada movimento entra no seguinte. O primeiro comeca reto e o ultimo
     termina em ponta — e a ponta que diz "o percurso sai daqui". */
  .motor-mov {
    padding-left: calc(var(--entalhe) + 1.375rem); border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--entalhe)) 0, 100% 50%,
                       calc(100% - var(--entalhe)) 100%, 0 100%, var(--entalhe) 50%);
  }
  .motor-mov:first-child {
    padding-left: 1.375rem;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    clip-path: polygon(0 0, calc(100% - var(--entalhe)) 0, 100% 50%,
                       calc(100% - var(--entalhe)) 100%, 0 100%);
  }
}

/* ── A jornada do SBCE ───────────────────────────────────────────────────────
   A PILHA e o desenho, e ela e de proposito outra coisa que as setas do motor:
   la o assunto e transformacao (uma coisa vira outra), aqui e acumulo (nada
   vira nada — vai somando). Dois desenhos iguais na mesma pagina fariam a
   pagina ter uma ideia so.

   Cada fase mostra tantos blocos quantas etapas ela ja carrega. O de baixo e o
   novo (cheio, no verde que carrega texto); os de cima vieram das fases
   anteriores (esmaecidos). E isso que faz "comecar pelo meio" parecer errado
   sem a pagina precisar dizer: a pilha fica furada, e o buraco se ve.

   A pilha e decorativa e sai da arvore de acessibilidade — quem ouve a pagina
   recebe a mesma informacao pelo "Deixa pronto" de cada fase, que e texto. */
.jornada { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
/* Coluna flex, nao grid: a descricao cresce e empurra o "Deixa pronto" para
   baixo, entao a linha final das quatro fases alinha mesmo com textos de
   tamanhos diferentes. Antes ela ficava irregular (1320, 1355, 1342, 1353) —
   e ela e o fecho da secao, a linha que o leitor le atravessando as quatro. */
.jornada-fase { display: flex; flex-direction: column; gap: .375rem; }
.jornada-texto { flex: 1; }
/* A pilha tem ALTURA FIXA de quatro blocos e cresce de baixo para cima. Antes
   ela media a propria altura, e o titulo de cada fase descia 11px em relacao ao
   anterior: 11px e pouco para parecer escada de proposito e muito para parecer
   alinhado — o olho le desalinho. Com a caixa fixa, os quatro titulos alinham e
   a pilha vira o que ela sempre quis ser: uma barra que enche. */
.jornada-pilha {
  display: flex; flex-direction: column-reverse; justify-content: flex-start;
  gap: 3px; height: 2.5625rem; margin-bottom: .875rem;
}
.jornada-pilha i {
  height: .5rem; border-radius: 2px;
  background: var(--verde-suave); border: 1px solid var(--linha);
}
.jornada-pilha i.e-nova { background: var(--verde-forte); border-color: var(--verde-forte); }
.jornada-medalha {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--verde-suave); color: var(--verde-forte);
}
.jornada-quando {
  margin-top: .375rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verde-forte); font-variant-numeric: tabular-nums;
}
.jornada-nome { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.jornada-texto { font-size: var(--fs-md); color: var(--ink-2); }
/* O que a fase entrega para a proxima. Recuado e com filete: e a unica linha da
   coluna que fala da fase SEGUINTE, e precisa se distinguir do resto. */
.jornada-deixa {
  margin-top: .5rem; padding-top: .625rem; border-top: 1px solid var(--linha);
  font-size: var(--fs-sm); color: var(--ink);
}
.jornada-deixa span {
  display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: .1875rem;
}

@media (min-width: 901px) {
  .jornada { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
}

/* ── Chamada (a pagina para e aponta outra) ──────────────────────────────────
   Argumento a esquerda, numero e botao a direita. O numero existe para a pessoa
   se reconhecer ou se descartar em um segundo: texto sozinho obriga a ler tudo
   para saber se e com voce. A coluna da direita fica estreita de proposito —
   ela e o gancho, nao o conteudo. */
.chamada { display: grid; gap: var(--gap); }
.chamada-texto { display: grid; gap: .625rem; align-content: start; }
.chamada-lado { display: grid; gap: 1.25rem; align-content: start; }
.chamada-numero { display: grid; gap: .125rem; }
.chamada-numero b {
  font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.25rem); font-weight: 800;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.chamada-numero b { color: var(--verde-forte); }
.chamada-numero span { font-size: var(--fs-sm); color: var(--ink-2); }
/* Base primeiro, sobrescrita da faixa escura depois. A ordem inversa funciona
   (a especificidade resolve), mas quem le em seguida perde tempo conferindo. */
.band-dark .chamada-numero b { color: var(--verde-claro); }
.band-dark .chamada-numero span { color: var(--on-deep-2); }

@media (min-width: 901px) {
  .chamada { grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr); gap: 3rem; align-items: center; }
  /* Filete separando o argumento do gancho — sem ele as duas colunas leem como
     um paragrafo largo que por acaso tem um numero no fim. */
  .chamada-lado { padding-left: 3rem; border-left: 1px solid var(--linha); }
  .band-dark .chamada-lado { border-left-color: var(--linha-escura); }
}

/* ── Hero com foto de fundo ──────────────────────────────────────────────────
   O VEU e o que garante a leitura, e ele nao e chute: as duas fotos foram
   medidas pixel a pixel. Na faixa onde o texto senta (x 13%–45% da secao) o
   p99 de luminancia e 0,036 na do caminhao e 0,144 na da associacao — o teto
   para texto branco a 4,5:1 e 0,183. Ou seja: ali a foto ja passa quase sem
   ajuda, e o veu forte serve a marca, nao ao contraste.
   Onde ele PRECISA ser forte e do meio para a direita, onde esta o sol: p99 de
   0,72 a 0,85. Por isso o gradiente pesa no miolo e alivia nas pontas — e por
   isso ele e horizontal, nao uniforme: veu uniforme forte o bastante para o sol
   apagaria a foto inteira.

   A foto e <picture> por baixo (webp + variante de 900px) e o veu e ::after por
   cima. `isolation` cria contexto proprio para o z-index nao vazar. */
.hero-foto { position: relative; isolation: isolate; overflow: hidden; }
.hero-foto-img { position: absolute; inset: 0; z-index: 0; }
.hero-foto-img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(10, 43, 34, .90)  0%,
      rgba(10, 43, 34, .89) 42%,
      rgba(10, 43, 34, .80) 62%,
      rgba(10, 43, 34, .60) 100%);
}
.hero-foto > .container { position: relative; z-index: 2; }

/* ⚰️ O hero INVERTIDO (Transporte, 02/09) morreu em 04/09: a especialista
   trocou a tela do produto pela fotografia full-bleed, e a inversão só
   existia para a tela. Nenhuma página o usa. */

/* ── Cartao com FOTO em cima (problema real do Transporte, 02/09) ───────────
   A foto sangra ate as bordas; o cartao corta os cantos. O medalhao desce
   para o corpo e o titulo vem logo abaixo dele. */
.cartao-foto { overflow: hidden; padding-top: 0; }
.cartao-foto picture { display: block; margin: 0 -1.5rem 1.125rem; aspect-ratio: 16 / 10; background: var(--verde-profundo); }
.cartao-foto picture img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cartao-foto .medalha { --md: 2.75rem; }

/* Véu ABERTO (mockup Sobre_hero). Nas páginas de setor a foto é ambiente e some
   atrás do véu; aqui ela é protagonista e aparece quase inteira à direita. A
   densidade fica onde o texto está, e só ali: o mesmo véu das outras faria a
   página abrir com um retângulo verde no lugar da fotografia. */
.hero-foto-aberta::after {
  /* A abertura começa DEPOIS da coluna do texto (que termina em ~47% da
     largura) e vai a zero na borda direita: a foto é protagonista. Medido
     em 04/09, compondo cada foto com este degradê em Python: na coluna do
     texto o pior caso do texto secundário (--on-deep-2) ficou em 5,7:1 e o
     do título em 11,2:1, com os dez heros fotográficos do site. Com o véu
     anterior (90% em 56%, 40% em 72%) a metade direita ficava verde escuro
     e a fotografia, que a especialista pediu inteira, quase não aparecia. */
  /* ⚠ 28/09: as paradas eram em % da LARGURA (42% · 50% · 60%) e a coluna do
     texto é em rem. Abaixo de ~1300px o texto passava da parte densa e caía
     sobre a foto aberta: a 1024px o texto secundário dava 0,85:1 nas dez
     fotos (medido compondo cada uma com o véu). Agora as paradas partem de
     `--txt-fim`, o fim real da coluna em qualquer largura: pior caso 7,8:1
     nas dez, de 1024 a 2560px. A 1440px o desenho é praticamente o mesmo.
     Medir de novo: python3 scripts/medir-veu-hero.py (espelha esta regra). */
  --txt-fim: calc(max(0px, (100% - 90rem) / 2) + var(--pad) + var(--txt-larg, 40rem));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--verde-profundo) 96%, transparent) 0,
    color-mix(in srgb, var(--verde-profundo) 96%, transparent) var(--txt-fim),
    color-mix(in srgb, var(--verde-profundo) 80%, transparent) calc(var(--txt-fim) + 7rem),
    color-mix(in srgb, var(--verde-profundo) 22%, transparent) calc(var(--txt-fim) + 16rem),
    transparent 100%);
}
.hero-foto-aberta .hero-foto-img img { object-position: 58% 42%; }
@media (max-width: 900px) {
  /* Empilhado não há "lado do texto": o véu volta a ser vertical e cobre tudo. */
  .hero-foto-aberta::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--verde-profundo) 92%, transparent)  0 58%,
      color-mix(in srgb, var(--verde-profundo) 78%, transparent) 100%);
  }
}

@media (max-width: 900px) {
  /* Empilhado o texto ocupa a largura toda, entao o veu passa a ser vertical e
     uniforme na parte de cima — nao ha mais "lado do texto". */
  .hero-foto-img img { object-position: 70% 50%; }
  .hero-foto::after {
    background: linear-gradient(180deg,
      rgba(10, 43, 34, .93)  0%,
      rgba(10, 43, 34, .90) 62%,
      rgba(10, 43, 34, .74) 100%);
  }
}

/* ── Jornadas da Academy ─────────────────────────────────────────────────────
   Lista editorial, nao grade de curso. O documento da especialista proibe por
   nome grade com muitas capas, medalha, estrela, ponto e estetica de escola ou
   streaming (§14) — entao aqui nao ha cartao, ha coluna de texto com um filete
   e a lista de aulas. O numero e o unico ornamento, e ele informa a ordem. */
.jornadas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.jornada-tema { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 2px solid var(--verde-forte); }
.jornada-tema-cabeca { display: grid; gap: .375rem; align-content: start; }
.jornada-tema-num {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em;
  color: var(--verde-forte); font-variant-numeric: tabular-nums;
}
.jornada-tema-nome { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; }
.jornada-tema-para { font-size: var(--fs-md); color: var(--ink-2); }
.jornada-aulas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-content: start; }
.jornada-aulas li {
  display: grid; grid-template-columns: auto 1fr; gap: .625rem; align-items: baseline;
  font-size: var(--fs-md);
}
/* Marcador de tracinho, nao de bolinha: bolinha em lista de aula puxa para a
   estetica de checklist de curso, que e justamente o que se quer evitar. */
.jornada-aulas li::before {
  content: ""; width: .625rem; height: 1px; background: var(--linha);
  align-self: center;
}
.jornadas-nota {
  margin-top: 2.5rem; padding: 1rem 1.25rem; border-radius: var(--r-sm);
  background: var(--branco); border: 1px solid var(--linha);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.jornadas-nota strong { color: var(--ink); }

@media (min-width: 901px) {
  .jornada-tema { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem; }
}

/* ── Blog ────────────────────────────────────────────────────────────────────
   Composicao editorial, nao grade de cartao uniforme: o §19 pede assimetria
   (1 destaque + as demais) porque cinco cartoes iguais dizem "cinco coisas do
   mesmo peso", e um blog sempre tem uma materia que importa mais hoje.

   A COR VEM DA CATEGORIA (--pil-*, a escala categorica das cinco frentes). Nao
   e acento de marca: identifica assunto, que e para o que essa escala existe.
   Quem le tres materias reconhece "aquela azul e regulacao" sem ler o rotulo.
   ------------------------------------------------------------------------- */
.post-meta {
  display: flex; flex-wrap: wrap; gap: .5rem .875rem; align-items: center;
  font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: .875rem;
}
/* O rotulo da categoria, na cor dela. Substituiu a `pill` verde: com todas as
   categorias no mesmo verde, a cor nao dizia nada. */
.post-cat {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pil-txt, var(--verde-forte));
}
.post-cat::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--pil, var(--verde));
}
.post-meta > span + span { position: relative; padding-left: .875rem; }
.post-meta > span + span::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px;
  margin-top: -1.5px; border-radius: 50%; background: var(--linha);
}

/* ── O destaque ─────────────────────────────────────────────────────────────
   Duas colunas SEMPRE: texto a esquerda, capa a direita. Ate 10/09 a coluna da
   direita so existia quando havia arte, e sem arte metade da tela ficava em
   branco ao lado do texto — foi o que o dono chamou de "estranho". */
.secao-destaque { padding-bottom: calc(var(--ritmo) * .7); }
.post-duo { display: grid; gap: 2rem; align-items: start; }
.post-destaque { display: grid; gap: .75rem; justify-items: start; }
.post-destaque-titulo { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.post-destaque-titulo a { color: inherit; text-decoration: none; }
.post-destaque-titulo a:hover { color: var(--pil-txt, var(--verde-forte)); }
.post-dek { font-size: var(--fs-lede); font-weight: 600; color: var(--ink); text-wrap: balance; }
.post-resumo { color: var(--ink-2); max-width: 60ch; }
.post-destaque .btn { margin-top: .75rem; }

.post-imagem { display: block; border-radius: var(--r); overflow: hidden; background: var(--fundo); aspect-ratio: 4 / 5; }
.post-imagem img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* A CAPA TIPOGRAFICA, quando nao ha arte. Nao finge fotografia: e a categoria,
   a promessa da leitura em corpo grande e a regua da cor. O fundo e a propria
   cor da categoria a 7%, que e leve o bastante para o texto ficar em ~12:1. */
.post-capa {
  display: grid; align-content: center; gap: 1.125rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-radius: var(--r);
  /* Altura pela COLUNA, nao por proporcao fixa. Com `aspect-ratio: 4/5` a capa
     virava uma torre de ~700px ao lado de um texto de ~340px, e o vazio que
     ela criava era o mesmo problema que ela veio resolver. Agora as duas
     colunas terminam juntas, e o `min-height` impede que ela encolha demais
     num destaque de titulo curto. */
  min-height: 21rem; height: 100%;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--pil, var(--verde)) 9%, var(--branco)),
      color-mix(in srgb, var(--pil, var(--verde)) 4%, var(--branco))),
    var(--branco);
  border: 1px solid color-mix(in srgb, var(--pil, var(--verde)) 22%, transparent);
  color: var(--ink);
}
.post-capa:hover { border-color: color-mix(in srgb, var(--pil, var(--verde)) 45%, transparent); }
.post-capa .regua { background: var(--pil, var(--verde)); }
.post-capa-cat {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pil-txt, var(--verde-forte));
}
.post-capa-frase {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); font-weight: 600;
  line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty;
}
.post-capa-pe {
  margin-top: .5rem; padding-top: .875rem; border-top: 1px solid color-mix(in srgb, var(--pil, var(--verde)) 20%, transparent);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}
@media (min-width: 901px) {
  /* `center` e nao `start`: a coluna do texto e mais curta que a capa, e
     ancorada no topo sobrava um vazio embaixo dela do tamanho de um paragrafo.
     Com arte no lugar da capa a regra da especialista pede topo, e ai ela
     vence. */
  .post-duo { grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); gap: 3.5rem; align-items: stretch; }
  /* Com ARTE no lugar da capa vale a regra da especialista: imagem alinhada ao
     topo, em proporcao quase vertical. */
  .post-duo:has(.post-imagem) { align-items: start; }
}

/* ── As demais ──────────────────────────────────────────────────────────────
   Cartao, nao item de lista: filete no topo com a cor da categoria e o link no
   pe. Como item de lista, a segunda materia lia como rodape da primeira. */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
         grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.post-item {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.375rem 1.5rem 1.25rem; border-radius: var(--r);
  background: var(--branco); border: 1px solid var(--linha);
  border-top: 3px solid var(--pil, var(--verde));
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.post-item:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.post-item h3 { font-size: var(--fs-h3); line-height: 1.2; text-wrap: balance; }
.post-item h3 a { color: inherit; text-decoration: none; }
.post-item h3 a:hover { color: var(--pil-txt, var(--verde-forte)); }
.post-item-resumo { font-size: var(--fs-md); color: var(--ink-2); }
.post-item-pe { margin-top: auto; padding-top: .875rem; }
.post-item .cartao-link { color: var(--pil-txt, var(--verde-forte)); }
@media (prefers-reduced-motion: reduce) {
  .post-item { transition: none; }
  .post-item:hover { transform: none; }
}

/* A fila de pauta. Mais discreta que a materia publicada de proposito — ela e
   compromisso, nao conteudo, e nao pode competir com o que ja existe. */
.fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fila li { display: grid; gap: .25rem; padding: 1rem 0; border-top: 1px solid var(--linha); }
.fila li:last-child { border-bottom: 1px solid var(--linha); }
.fila-cat { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fila-tit { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); text-wrap: balance; }

/* ── A materia ───────────────────────────────────────────────────────────────
   62ch. Coluna larga em texto corrido e a razao mais comum de alguem largar um
   artigo na metade: o olho perde a linha na volta. */
.artigo .container { max-width: 46rem; }
.artigo-cabeca { margin-bottom: 2rem; }
.artigo-titulo { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.artigo-dek { font-size: var(--fs-lede); color: var(--ink-2); margin-top: .875rem; text-wrap: balance; }
.artigo-corpo { font-size: var(--fs-lg); line-height: 1.7; }
.artigo-corpo > * + * { margin-top: 1.25rem; }
.artigo-corpo h2 { font-size: var(--fs-h3); margin-top: 2.5rem; letter-spacing: -.01em; }
.artigo-corpo ul { padding-left: 1.25rem; display: grid; gap: .5rem; }
.artigo-corpo li { padding-left: .25rem; }
.artigo-corpo strong { font-weight: 700; }
.artigo-fontes { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.artigo-fontes h2 { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.artigo-fontes ul { list-style: none; margin: .625rem 0 0; padding: 0; display: grid; gap: .375rem; font-size: var(--fs-md); }
.artigo-cta { margin-top: 2rem; }
.artigo-volta { margin-top: 2.5rem; font-size: var(--fs-md); }

/* Botao do bloco pessoas: leva da bio curta da home para a ficha inteira. */
.pessoas-acao { margin-top: 1.5rem; }


@media (min-width: 901px) {
}

/* ── Mosaico (acrônimo em duas colunas) ──────────────────────────────────────
   Grade assimétrica: uma célula alta e quatro em volta. Cinco iguais diriam
   "cinco coisas do mesmo peso", e a primeira e a tese.
   O rotulo e TEXTO por cima da arte, nao parte dela: continua legivel no leitor
   de tela, continua traduzivel, e a arte troca sem alguem reescrever um PNG. */
.acro-duo { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.mosaico { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
           grid-template-columns: repeat(2, 1fr); }
.mosaico-cel { position: relative; border-radius: var(--r); overflow: hidden;
               background: var(--verde-profundo); min-height: 200px; }
.mosaico-cel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Véu em CIMA e EMBAIXO, porque agora há texto nas duas pontas. Com a
   fotografia no lugar da arte geométrica, o meio da célula pode ser claro
   (céu, água, monitor aceso) e um véu só no topo deixaria a frase do pé sem
   fundo. */
.mosaico-cel::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--verde-profundo) 82%, transparent) 0 18%,
      color-mix(in srgb, var(--verde-profundo) 24%, transparent) 44%,
      color-mix(in srgb, var(--verde-profundo) 30%, transparent) 62%,
      color-mix(in srgb, var(--verde-profundo) 86%, transparent) 100%); }
.mosaico-rot { position: absolute; z-index: 1; top: 1rem; left: 1.125rem; right: 1rem;
  display: flex; gap: .625rem; color: var(--branco);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; line-height: 1.35; }
.mosaico-ico { flex: none; width: 1.5rem; height: 1.5rem; }
.mosaico-ico svg { width: 100%; height: 100%; }
/* A frase no PÉ, oposta ao rótulo: rótulo diz o assunto, frase diz o que ele
   significa. Juntos no topo virariam um parágrafo em cima da foto. */
.mosaico-frase {
  position: absolute; z-index: 1; left: 1.125rem; right: 1.125rem; bottom: 1rem;
  color: var(--branco); font-size: var(--fs-sm); line-height: 1.4; text-wrap: pretty;
}

@media (min-width: 1100px) {
  .acro-duo { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: start; }
  /* A primeira célula ocupa duas linhas: é a tese, e tese não tem o tamanho das
     outras. As quatro seguintes preenchem em volta. */
  .mosaico { grid-template-rows: repeat(3, 1fr); height: 100%; min-height: 42rem; }
  .mosaico-cel:first-child { grid-row: span 2; }
  .mosaico-cel:nth-child(4) { grid-column: 1; }
}

/* A procedencia da caixa regulatoria. Menor que a ressalva, mas com o link
   aberto: pagina sobre lei sem onde conferir e opiniao com cara de norma. */
.sbce-caixa-fonte { margin-top: .625rem; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.7; }
.sbce-caixa-fonte b { display: block; color: var(--ink); }
.sbce-caixa-fonte a { display: block; color: var(--verde-forte); }

/* Quem assina o artigo, visivel. Em conteudo tecnico e regulatorio a autoria e
   parte do argumento, nao metadado. */
.artigo-autor { font-size: var(--fs-md); color: var(--ink-2); margin-top: -.25rem; }
.artigo-autor a { font-weight: 700; color: var(--verde-forte); }
.artigo-autor span { display: block; font-size: var(--fs-sm); }

/* O aviso de privacidade, junto do campo. Discreto, mas nao escondido. */
.form-privacidade { font-size: var(--fs-sm); color: var(--ink-2); }
.form-privacidade a { color: var(--verde-forte); font-weight: 700; }

/* ── Panorama no celular: resumo + sanfonas ──────────────────────────────────
   No desktop nada disto existe: as cinco colunas ficam abertas, com as 70
   linhas visiveis, porque e a amplitude que causa o impacto.
   No celular as mesmas cinco colunas viram 4.600px empilhados, um quarto da
   pagina. Entao antes vem o RESUMO (o tamanho do que se esta olhando) e depois
   as cinco viram sanfona, com a primeira aberta.
   NADA SAI DO HTML: o conteudo continua no documento, so recolhido. Sem JS
   tudo nasce aberto, que e o estado que o servidor manda. */
.frentes-resumo { display: none; }
.frente-botao { display: none; }

/* A linha dos números da home (23/09): informação secundária sob a frase, não
   argumento. Pequena, em caixa alta espaçada como o eyebrow, sem cor de marca.
   Com ela ligada o resumo do celular não aparece: os mesmos três números
   ficariam duas vezes seguidas na tela. */
.frentes-conta-linha { margin-top: .875rem; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.band-dark .frentes-conta-linha { color: var(--on-deep-2); }

@media (max-width: 900px) {
  .frentes-resumo {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    list-style: none; margin: 0 0 1.75rem; padding: 0;
    background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r);
    overflow: hidden;
  }
  .frentes-resumo li { background: var(--branco); padding: 1rem .5rem; text-align: center; }
  .frentes-resumo b { display: block; font-size: var(--fs-h3); font-weight: 800;
                      color: var(--verde-forte); font-variant-numeric: tabular-nums; }
  .frentes-resumo span { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 700;
                         text-transform: uppercase; letter-spacing: .06em; }
  .band-dark .frentes-resumo, .band-dark .frentes-resumo li { background: var(--verde-profundo-2); border-color: var(--linha-escura); }
  .band-dark .frentes-resumo b { color: var(--verde-claro); }
  .band-dark .frentes-resumo span { color: var(--on-deep-2); }

  /* O titulo vira botao. O h3 fixo some para nao duplicar o nome na tela; ele
     continua no HTML porque e ele que da a hierarquia de cabecalho ao leitor
     de tela, e botao nao e cabecalho. */
  .frente-nome-fixo { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip-path: inset(50%); white-space: nowrap; }
  .frente-botao {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem 1rem;
    width: 100%; padding: .875rem 0; background: none; border: 0; cursor: pointer;
    text-align: left; color: inherit; font: inherit;
  }
  .frente-botao .frente-nome { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; }
  .frente-botao .frente-conta { grid-column: 1; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
  /* A seta e o unico ornamento, e ela informa: aponta para baixo quando ha o que
     abrir, para cima quando ja esta aberto. */
  .frente-botao::after {
    content: ""; grid-row: span 2; width: .625rem; height: .625rem; margin-right: .25rem;
    border-right: 2px solid var(--verde-forte); border-bottom: 2px solid var(--verde-forte);
    transform: rotate(45deg); transition: transform .18s ease;
  }
  .frente-botao[aria-expanded="true"]::after { transform: rotate(-135deg); }
  /* FECHADA a linha encolhe de verdade. A primeira versão só escondia as
     listas: o medalhão, o número e a régua continuavam ali, e cada frente
     fechada custava ~180px. Cinco linhas de 180 não são um índice, são outra
     rolagem. Fechada, sobra o que identifica: nome e contagem. */
  .frente[data-fechada] .frente-corpo,
  .frente[data-fechada] .frente-marca,
  .frente[data-fechada] .frente-tag { display: none; }
  .frente[data-fechada] { padding-block: 0; }
  .frente[data-fechada] .frente-botao { padding-block: 1rem; }
  /* Aberta, a marca volta, mas mais junta: no celular ela é ornamento, e a
     informação é a lista. */
  .frentes .frente-marca { margin-bottom: .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .frente-botao::after { transition: none; }
}

/* ── O mock no celular ───────────────────────────────────────────────────────
   A janela encolhia a fonte junto com a tela: em 375px o menor texto dela caia
   para 7,2px, que ninguem le. Agora ela para de encolher, mantem a largura em
   que o texto se le, e ROLA na horizontal dentro do proprio envoltorio.
   E a mesma regra que a casa ja aplica a tabela e a diagrama: conteudo largo
   rola na sua caixa, e o corpo da pagina nunca rola de lado. */
/* min-width:0 e max-width:100% juntos. Sem os dois a caixa CRESCE com o
   conteudo dentro de um flex/grid, o overflow-x nunca contem nada e quem passa
   a rolar de lado e o corpo da pagina — foi o que aconteceu na primeira
   tentativa: envoltorio de 544px numa tela de 375. */
.mock-rolo { min-width: 0; max-width: 100%; }
@media (max-width: 700px) {
  /* Sem sangria por margem negativa: ela empurrava a caixa para fora do
     container e o CORPO passava a rolar de lado, que e justamente o que a casa
     nao aceita. A rolagem fica dentro da largura normal. */
  .mock-rolo {
    overflow-x: auto; overflow-y: hidden; max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .mock-rolo > .mock { min-width: 34rem; font-size: .75rem; }
  /* Inclinacao fora: girar a janela num espaco que ja rola confunde a direcao
     do gesto. */
  .mock-rolo > .mock-inclinado { transform: none; }
}

/* ── Mockup (rascunho para alinhamento) ──────────────────────────────────────
   A faixa acompanha a rolagem e a marca "ilustrativo" fica DENTRO de cada caso.
   Os dois juntos existem para o mesmo fim: um print desta tela tambem carrega o
   aviso. Numero de rascunho que sai numa captura vira numero publicado. */
.mockup-faixa {
  position: sticky; top: 0; z-index: 60;
  background: var(--sbce-media); color: var(--branco);
  padding: .625rem var(--pad); font-size: var(--fs-sm); text-align: center;
}
.mockup-faixa b { font-weight: 800; }
.marca-ilustrativo {
  display: inline-block; margin-left: .5rem; padding: .1rem .45rem;
  border-radius: var(--r-pill); background: var(--sbce-media-suave);
  color: var(--sbce-media); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}

/* Numeros de uso: o valor fica vazio de proposito, e embaixo dele a consulta
   que o produz. Preencher com numero inventado, mesmo num rascunho, e como
   numero inventado entra num site — alguem copia a tela. */
.prova-numeros { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
                 background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; }
.prova-numeros li { background: var(--branco); padding: 1.5rem 1.25rem; display: grid; gap: .25rem; }
.prova-numeros b { font-size: var(--fs-h2); font-weight: 800; color: var(--linha); line-height: 1; }
.prova-num-rot { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.prova-num-fonte { font-size: var(--fs-sm); color: var(--ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.casos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.caso { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); padding: 1.5rem; }
.caso-num { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; color: var(--ink-2); margin-bottom: .5rem; }
.caso-quem { font-size: var(--fs-h3); margin-bottom: 1rem; text-wrap: balance; }
.caso-campos { display: grid; gap: .625rem; margin: 0; }
.caso-campos dt { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em;
                  text-transform: uppercase; color: var(--verde-forte); }
.caso-campos dd { margin: 0 0 .375rem; font-size: var(--fs-md); color: var(--ink-2); }

.prova-requisitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.prova-requisitos li { display: grid; gap: .25rem; padding: 1rem 0; border-top: 1px solid var(--linha); }
.prova-requisitos li:last-child { border-bottom: 1px solid var(--linha); }
.prova-requisitos b { font-size: var(--fs-md); }
.prova-requisitos span { font-size: var(--fs-md); color: var(--ink-2); }

@media (min-width: 901px) {
  .prova-numeros { grid-template-columns: repeat(4, 1fr); }
  .casos { grid-template-columns: repeat(3, 1fr); }
  .prova-requisitos li { grid-template-columns: 16rem 1fr; gap: 1.5rem; align-items: baseline; }
}

/* ── Percursos gravados ──────────────────────────────────────────────────────
   Video a esquerda, texto a direita, alternando o lado a cada item: quatro
   blocos identicos empilhados o olho pula, e a alternancia obriga a reancorar
   em cada um.
   O quadro reserva a proporcao 16:9 antes de o video carregar, entao a pagina
   nao salta quando o poster chega. */
.videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.video { display: grid; gap: 1.5rem; align-items: center; }
.video-quadro { position: relative; border-radius: var(--r); overflow: hidden;
                background: var(--verde-profundo); aspect-ratio: 16 / 9;
                box-shadow: var(--sombra-alta); }
.video-quadro img,
.video-quadro iframe { width: 100%; height: 100%; display: block; object-fit: cover;
                       border: 0; background: var(--verde-profundo); }

/* A FACHADA. O quadro e um link ate alguem clicar: o poster e nosso, o botao de
   play e nosso, e nada do YouTube carrega antes do clique. Ao clicar, o JS
   troca este bloco por um iframe do mesmo tamanho. */
a.video-quadro { display: block; text-decoration: none; cursor: pointer; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 4.5rem; height: 4.5rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--verde-profundo) 82%, transparent);
  border: 2px solid var(--branco); color: var(--branco);
  transition: transform .18s ease, background .18s ease;
}
.video-play svg { width: 46%; height: 46%; margin-left: 6%; }
.video-quadro-rot {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: .375rem .75rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--verde-profundo) 88%, transparent);
  color: var(--branco); font-size: var(--fs-sm); font-weight: 700;
}
a.video-quadro:hover .video-play,
a.video-quadro:focus-visible .video-play { transform: scale(1.08); background: var(--verde-forte); }
a.video-quadro:focus-visible { outline: 3px solid var(--verde-forte); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .video-play { transition: none; } }
.video-texto { display: grid; gap: .625rem; align-content: start; }
.video-meta { display: flex; flex-wrap: wrap; gap: .5rem .875rem; align-items: center;
              font-size: var(--fs-sm); color: var(--ink-2); }
.video-titulo { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.video-resumo { font-size: var(--fs-md); color: var(--ink-2); max-width: 56ch; }
/* "O que voce ve" e a promessa do video em tres linhas: quem escolhe entre
   quatro percursos escolhe pelo que vai ver, nao pelo titulo. */
.video-ve { list-style: none; margin: .25rem 0 .5rem; padding: 0; display: grid; gap: .375rem; }
.video-ve li { display: grid; grid-template-columns: auto 1fr; gap: .625rem;
               align-items: baseline; font-size: var(--fs-md); }
.video-ve li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%;
                       background: var(--verde-forte); align-self: center; }
.video .btn { justify-self: start; }

@media (min-width: 901px) {
  .video { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; }
  .video:nth-child(even) .video-quadro { order: 2; }
}

/* ── O rastro (faixa escura da seção 02) ─────────────────────────────────────
   Cinco nos ligados por um fio continuo. Existe para MOSTRAR o que a frase ao
   lado afirma: a mesma informacao atravessando cinco estados. Frase sozinha
   pede que o leitor acredite; o percurso desenhado deixa ele ver.
   O fio passa POR TRAS dos pontos e para no primeiro e no ultimo — fio que
   vaza para fora sugere que o percurso continua noutro lugar. */
.rastro { list-style: none; margin: 0; padding: 0; position: relative;
          display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; }
.rastro::before {
  content: ""; position: absolute; z-index: 0; height: 2px;
  /* Centro do ponto: icone (1.5rem) + vao (.5rem) + metade do ponto (.4375rem).
     A linha tem 2px, entao sobe 1px para o centro dela bater no centro dele.
     Regra global de 02/09: linha que passa pelo topo do no le como "um
     elemento terminou e outro comecou". */
  top: calc(2.4375rem - 1px);
  left: calc(10% + 1px); right: calc(10% + 1px);
  background: linear-gradient(90deg, var(--verde-forte), var(--verde-claro));
}
.rastro-no { position: relative; z-index: 1; display: grid; justify-items: center; gap: .5rem; text-align: center; }
.rastro-ico { width: 1.5rem; height: 1.5rem; color: var(--verde-claro); }
.rastro-ico svg { width: 100%; height: 100%; }
.rastro-ponto {
  width: .875rem; height: .875rem; border-radius: 50%;
  background: var(--verde-claro); border: 3px solid var(--verde-profundo);
  box-shadow: 0 0 0 2px var(--verde-claro);
}
.rastro-nome { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
               text-transform: uppercase; color: var(--branco); }

/* Com rastro a tira vira ESCURA e de duas colunas: a frase à esquerda, o
   percurso à direita. É a conclusão da seção, e no mockup ela é o único bloco
   escuro de uma seção clara — o contraste é o que a marca como conclusão.
   Sem rastro nada muda nas outras seis tiras do site. */
.tira:has(.rastro) {
  display: grid; gap: 1.75rem 2.5rem;
  background: var(--verde-profundo); border-color: var(--linha-escura);
  color: var(--verde-suave); padding: 2.25rem;
}

.tira:has(.rastro) .tira-titulo { color: var(--branco); }
.tira:has(.rastro) .tira-titulo .realce { color: var(--verde-claro); }
.tira:has(.rastro) .medalha { background: var(--verde-profundo-2); color: var(--verde-claro); }
.tira:has(.rastro) .tira-fecho { color: var(--on-deep-2); }
.tira:has(.rastro) .tira-fecho .realce { color: var(--verde-claro); }
@media (min-width: 901px) {
  .tira:has(.rastro) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
  .tira:has(.rastro) .tira-selo { grid-row: 1; }
  .tira:has(.rastro) .rastro { grid-row: 1; grid-column: 2; }
  .tira:has(.rastro) .tira-fecho { grid-column: 2; margin-top: 0; }
}
@media (max-width: 640px) {
  /* Empilhado o fio horizontal nao faz sentido: os nos viram uma coluna. */
  .rastro { grid-auto-flow: row; gap: .875rem; }
  .rastro::before { display: none; }
  .rastro-no { grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; gap: .75rem; }
}

/* =============================================================================
   Seção 04 · o diferencial com fotografia (mockup home_page4)
   -----------------------------------------------------------------------------
   Duas metades: em cima a tese, com a foto sangrando pela direita atras do
   texto; embaixo os tres pilares numa faixa escura.

   A foto entra AQUI e em nenhuma outra secao da home. Depois de duas secoes
   graficas seguidas (o rastro e as cinco frentes), uma pessoa numa sala real
   muda o ritmo — e e onde ela significa alguma coisa, porque a tese e sobre
   operacao e decisao, nao sobre arquitetura de dados.
   ========================================================================== */
.arg-comfoto { padding-block: 0; }
.arg-palco { position: relative; isolation: isolate; overflow: hidden;
             background: var(--branco); }
.arg-palco-foto { position: absolute; inset: 0; z-index: 0; display: block; }
.arg-palco-foto img { width: 100%; height: 100%; display: block;
                      object-fit: cover; object-position: 74% center; }
/* O VEU e CSS, nao esta gravado no arquivo: gravado, ele so serviria a uma
   largura de tela. Vai do fundo opaco a esquerda ao transparente a direita, e
   e ele que garante o contraste do texto — sem ele o titulo cai em cima do ceu
   da foto, que e claro em uns lugares e escuro em outros. */
.arg-palco-veu {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg, var(--branco) 0 34%,
                    color-mix(in srgb, var(--branco) 88%, transparent) 48%,
                    color-mix(in srgb, var(--branco) 34%, transparent) 64%,
                    transparent 78%),
    linear-gradient(0deg, color-mix(in srgb, var(--branco) 40%, transparent), transparent 30%);
}
.arg-palco .container { position: relative; z-index: 2; padding-block: var(--ritmo); }
.arg-comfoto .secao-cabeca { max-width: 34rem; }
/* O realce comeca em linha propria, como no mockup: a tese tem duas metades
   ("sem rastreabilidade" / "com rastreabilidade") e a virada precisa ser vista,
   nao cacada no meio de uma linha. Em bloco isso independe da largura da tela;
   por largura, cada quebra de tela desmontaria a figura. */
.arg-comfoto .secao-titulo .realce { display: block; }
/* O filete acima do destaque separa a tese do resto sem desenhar uma caixa. */
.arg-comfoto .destaque {
  max-width: 30rem; background: transparent; padding: 1.75rem 0 0;
  border-top: 1px solid var(--linha); border-radius: 0; margin-top: 2.25rem;
}
.arg-comfoto .destaque .medalha { --md: 3.5rem; }

/* A faixa dos tres pilares. Numerar AQUI e diferente de numerar as cinco
   frentes: la a ordem nao existe, aqui existe — sem rastro nao ha o que
   executar, e sem execucao nao ha o que continuar. */
.arg-faixa { background: var(--verde-profundo); color: var(--verde-suave); }
.arg-faixa .container { padding-block: 3.5rem; }
.arg-pilares { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.arg-pilar { display: grid; align-content: start; gap: .5rem; }
.arg-pilar-num { font-size: var(--fs-h3); font-weight: 400; color: var(--verde-claro);
                 font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.arg-pilar-titulo { font-size: clamp(1.375rem, 1.10rem + .9vw, 1.625rem); font-weight: 600; letter-spacing: -.02em;
                    color: var(--branco); line-height: 1.15; }
.arg-pilar .regua { background: var(--verde-forte); margin: .625rem 0 .25rem; }
.arg-pilar-texto { font-size: var(--fs-md); line-height: 1.55; color: var(--on-deep-2); }
@media (min-width: 901px) {
  .arg-pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .arg-pilar { padding-inline: 2.75rem; border-left: 1px solid var(--linha-escura); }
  .arg-pilar:first-child { padding-left: 0; border-left: 0; }
  .arg-pilar:last-child { padding-right: 0; }
}
@media (max-width: 900px) {
  /* Estreito, o veu horizontal deixaria o texto em cima da parte nitida da
     foto. Aqui ele cobre tudo e a foto vira textura, nao ilustracao. */
  .arg-palco-veu { background: color-mix(in srgb, var(--branco) 93%, transparent); }
  .arg-palco-foto img { object-position: 62% center; }
  .arg-comfoto .secao-cabeca, .arg-comfoto .destaque { max-width: none; }
}

/* ── Os elos (faixa escura da seção 03) ──────────────────────────────────────
   As tres camadas que ATRAVESSAM as cinco frentes. Eram uma lista solta entre
   as colunas e a tira, e ali liam como um quarto bloco de conteudo — o oposto
   do que elas dizem, que e que nao existe bloco separado. Dentro da tira e
   ligadas entre si, leem como a base comum das cinco.
   O elo tem duas partes: o disco com o icone e o texto. O fio que liga um ao
   outro mora no vao entre eles, e termina num ponto cheio: fio solto sugere
   que a cadeia continua fora da tela, e ela nao continua. */
.elos { --elo-vao: 2.25rem;
        list-style: none; margin: 0; padding: 0;
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        gap: var(--elo-vao); }
.elo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
       column-gap: .875rem; row-gap: .25rem; align-content: start; }
.elo-ico { grid-row: span 2; display: grid; place-items: center; flex: none;
           width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill);
           border: 1px solid var(--verde-forte); color: var(--verde-claro); }
.elo-ico svg { width: 45%; height: 45%; }
.elo-nome { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em;
            text-transform: uppercase; color: var(--branco);
            align-self: start; padding-top: .125rem; }
.elo-texto { font-size: var(--fs-sm); line-height: 1.45; color: var(--on-deep-2); }
.elo + .elo::before {
  content: ""; position: absolute; top: calc(1.375rem - 1px);
  left: calc(-1 * var(--elo-vao)); width: calc(var(--elo-vao) - .875rem); height: 2px;
  background: linear-gradient(90deg, var(--verde-forte), var(--verde-claro));
}
.elo + .elo::after {
  content: ""; position: absolute; top: calc(1.375rem - .25rem); left: -.875rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--verde-claro);
}

/* Com elos a tira vira ESCURA e de duas colunas, como a da secao 02: a frase a
   esquerda, as camadas a direita, e embaixo delas a linha de fecho com o botao.
   A frase e as camadas dizem a mesma coisa por meios diferentes, entao elas
   dividem a mesma faixa e nao duas. */
.tira:has(.elos) {
  display: grid; gap: 1.5rem 2.25rem;
  background: var(--verde-profundo); border-color: var(--linha-escura);
  color: var(--verde-suave); padding: 2.25rem;
}
.tira:has(.elos) .tira-titulo { color: var(--branco); }
.tira:has(.elos) .tira-titulo .realce { color: var(--verde-claro); }
.tira:has(.elos) .medalha { background: var(--verde-profundo-2); color: var(--verde-claro); }
.tira:has(.elos) .tira-texto { color: var(--on-deep-2); }
/* O fio vertical do meio e o do selo: um so, senao viram duas divisorias
   coladas na mesma coluna. */
.tira:has(.elos) .tira-fio { display: none; }
/* Contorno sobre fundo escuro: o botao branco solido virava o objeto mais
   claro da faixa e puxava a leitura antes da frase. */
.tira:has(.elos) .btn-contorno { background: transparent; color: var(--verde-claro);
                                 border-color: var(--verde-forte); }
.tira:has(.elos) .btn-contorno:hover { background: var(--verde-profundo-2); border-color: var(--verde-claro); }
@media (min-width: 901px) {
  .tira:has(.elos) { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) auto;
                     align-items: center; column-gap: 2.75rem; }
  .tira:has(.elos) .tira-selo { grid-area: 1 / 1 / 3 / 2; align-self: center;
                                padding-right: 2.75rem; border-right: 1px solid var(--linha-escura); }
  .tira:has(.elos) .elos      { grid-area: 1 / 2 / 2 / 4; }
  .tira:has(.elos) .tira-texto{ grid-area: 2 / 2 / 3 / 3; }
  .tira:has(.elos) .btn       { grid-area: 2 / 3 / 3 / 4; }
}
@media (max-width: 900px) {
  /* Empilhados, o fio horizontal entre os elos nao liga nada: eles viram uma
     coluna, e o vao volta a ser so espaco. */
  .elos { grid-auto-flow: row; gap: 1.25rem; }
  .elo + .elo::before, .elo + .elo::after { display: none; }
  .tira:has(.elos) .btn { justify-self: start; }
}

/* ── Tira cheia · padding ────────────────────────────────────────────────────
   Fica no fim do arquivo de proposito: precisa vencer .tira:has(.rastro) e
   .tira:has(.elos), que tem a mesma especificidade e definem `padding` por
   conta propria. O lateral e o MESMO calculo que posiciona o container, entao
   o texto de dentro da faixa cai na coluna do texto de fora — medido: 32px e
   32px. */
.tira.tira-cheia { padding: 2.75rem max(var(--pad), calc((100vw - var(--larg)) / 2 + var(--pad))); }

/* =============================================================================
   PLATAFORMA · a sequência aprovada em 02/09 (mockups plataforma_page2..6)
   ========================================================================== */

/* ── 02 · A fragmentação ─────────────────────────────────────────────────────
   Seis frentes com um ✕ entre elas. O ✕ E o argumento: cada frente cria o seu
   proprio fluxo, e a operacao se parte. Embaixo de cada uma, o que ela costuma
   virar na pratica. */
.frag-cabeca { max-width: 46rem; }
.frag-cabeca .regua { margin: .25rem 0 .5rem; }
/* O realce em linha propria: "O desafio nao e ter mais dados." / "E fazer
   tudo continuar conectado." sao a pergunta e a resposta, uma em cada linha. */
.frag-cabeca .secao-titulo .realce { display: block; }
.frag-frentes { --frag-vao: 1.25rem; list-style: none; margin: 0; padding: 0;
                display: grid; gap: 2rem 1.25rem;
                grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.frag-frente { display: grid; gap: .75rem; align-content: start; }
.frag-cabo { position: relative; display: grid; justify-items: center; gap: .375rem;
             padding: 1.25rem 1rem 1.125rem; text-align: center; height: 100%;
             border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); }
.frag-ico { width: 2.5rem; height: 2.5rem; color: var(--verde-forte); }
.frag-ico svg { width: 100%; height: 100%; }
.frag-nome { margin-top: .5rem; font-size: var(--fs-md); font-weight: 800;
             letter-spacing: .06em; text-transform: uppercase; }
.frag-texto { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.4; }
.frag-subs { position: relative; list-style: none; margin: 0; padding: .875rem 1rem;
             display: grid; gap: .5rem; border: 1px solid var(--linha); border-radius: var(--r);
             background: var(--branco); font-size: var(--fs-sm); color: var(--ink-2); }
.frag-subs li { display: flex; align-items: center; gap: .5rem; }
.frag-subs svg { width: 1rem; height: 1rem; flex: none; color: var(--verde-forte); }
/* O tique curto que liga a frente ao que ela vira. */
.frag-subs::before { content: ""; position: absolute; top: -.75rem; left: 1.5rem;
                     width: 1px; height: .75rem; background: var(--linha); }
@media (min-width: 1100px) {
  .frag-frentes { --frag-vao: 1.875rem; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 2rem var(--frag-vao); }
  /* O ✕ entre uma frente e a seguinte. Linha tracejada no vao, e o disco
     escuro POR CIMA dela, com a linha passando pelo centro do disco (regra
     global das linhas e nos). O X do disco e desenhado com dois degrades:
     glifo em `content` seria lido pelo leitor de tela como "sinal de vezes". */
  .frag-frente + .frag-frente .frag-cabo::before {
    content: ""; position: absolute; top: calc(4.6rem - 1px); left: calc(-1 * var(--frag-vao));
    width: var(--frag-vao); height: 0; border-top: 2px dashed var(--ink-2); opacity: .6;
  }
  .frag-frente + .frag-frente .frag-cabo::after {
    content: ""; position: absolute; top: calc(4.6rem - .625rem);
    left: calc(-1 * var(--frag-vao) / 2 - .625rem); width: 1.25rem; height: 1.25rem;
    border-radius: 50%; background:
      linear-gradient(45deg, transparent 43%, var(--branco) 43% 57%, transparent 57%),
      linear-gradient(-45deg, transparent 43%, var(--branco) 43% 57%, transparent 57%),
      var(--ink);
    background-size: 55% 55%, 55% 55%, 100% 100%; background-position: center; background-repeat: no-repeat;
  }
}
/* A frase que fecha o problema, entre dois campos de pontos. */
/* Quatro colunas, nao tres: os dois campos de pontos sao pseudo-elementos e
   contam como itens da grade, ao lado do medalhao e do texto. Com tres, o
   ultimo campo caia para uma segunda linha. */
.frag-fecho { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
              align-items: center; gap: 1.25rem; margin-top: 3rem; }
.frag-fecho::before, .frag-fecho::after {
  content: ""; height: 3rem;
  background-image: radial-gradient(circle, var(--verde) 1px, transparent 1.5px);
  background-size: 14px 14px; opacity: .45;
}
.frag-fecho::before { mask-image: linear-gradient(90deg, transparent, var(--ink)); -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink)); }
.frag-fecho::after  { mask-image: linear-gradient(270deg, transparent, var(--ink)); -webkit-mask-image: linear-gradient(270deg, transparent, var(--ink)); }
.frag-fecho > span:last-child { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em;
  line-height: 1.3; padding-right: 1.5rem; border-right: 1px solid var(--verde-forte); }
.frag-fecho .medalha { --md: 4.5rem; margin-left: 1.5rem; border-left: 1px solid var(--verde-forte);
  padding-left: 1.5rem; box-sizing: content-box; border-radius: 0; background: none; }
.frag-fecho .medalha svg { width: 2rem; height: 2rem; padding: 1.25rem; border-radius: var(--r-pill);
  background: var(--verde-suave); box-sizing: content-box; }
.frag-fecho .realce { display: block; }
/* A ponte para a proxima secao: fecha o problema e aponta a resposta. */
.frag-ponte { display: grid; gap: 1.25rem; align-items: center; margin-top: 2rem;
              padding: 1.5rem 1.75rem; border: 1px solid var(--linha); border-radius: var(--r);
              background: var(--branco); }
.frag-ponte p { font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.frag-ponte-link { display: inline-flex; align-items: center; gap: .875rem;
                   color: var(--verde-forte); font-weight: 700; text-decoration: none; }
.frag-ponte-link .medalha { --md: 2.75rem; }
.frag-ponte-link:hover .medalha { background: var(--verde-forte); }
@media (min-width: 900px) {
  .frag-ponte { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
  .frag-ponte-link { padding-left: 2.5rem; border-left: 1px solid var(--linha); }
}
@media (max-width: 700px) {
  .frag-fecho { grid-template-columns: minmax(0, 1fr); }
  .frag-fecho::before, .frag-fecho::after { display: none; }
  .frag-fecho > span:last-child { padding: 0; border: 0; }
  .frag-fecho .medalha { margin: 0; padding: 0; border: 0; }
}

/* ── 03 · O que sustenta ─────────────────────────────────────────────────────
   Escuro, com a fotografia atras de um veu e o painel translucido na frente.
   A foto e apoio: some a esquerda, onde o texto esta, e aparece a direita. */
.secao-sustenta { position: relative; isolation: isolate; overflow: hidden; }
.sust-foto { position: absolute; inset: 0; z-index: 0; display: block; }
.sust-foto img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 72% 40%; }
.sust-veu { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(92deg, var(--verde-profundo) 0 22%,
    color-mix(in srgb, var(--verde-profundo) 88%, transparent) 48%,
    color-mix(in srgb, var(--verde-profundo) 58%, transparent) 100%),
  linear-gradient(0deg, var(--verde-profundo) 0 10%, transparent 50%); }
.sust-conteudo { position: relative; z-index: 2; }
.secao-sustenta .secao-cabeca { max-width: 44rem; }
.secao-sustenta .secao-lede .realce { color: var(--verde-claro); }
.sust-painel { display: grid; gap: 1.5rem; padding: 1.75rem;
  border-radius: calc(var(--r) * 1.5);
  border: 1px solid color-mix(in srgb, var(--verde-claro) 26%, transparent);
  background: color-mix(in srgb, var(--verde-profundo) 62%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sust-lead { display: flex; align-items: center; gap: 1.25rem; }
.sust-lead .medalha { --md: 4.5rem; background: var(--verde-profundo); color: var(--verde-claro);
                      border: 1px solid var(--verde-forte); }
.sust-lead p { font-size: var(--fs-h3); font-weight: 700; color: var(--branco); line-height: 1.25;
               max-width: 11rem; text-wrap: balance; }
.sust-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.sust-item { display: grid; gap: .5rem; align-content: start; }
.sust-item .medalha { --md: 3.5rem; margin-bottom: .5rem;
  background: color-mix(in srgb, var(--verde-claro) 14%, transparent); color: var(--verde-claro); }
.sust-item h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--branco); line-height: 1.25; }
.sust-item p { font-size: var(--fs-md); color: var(--on-deep-2); line-height: 1.55; }
@media (min-width: 1000px) {
  .sust-painel { grid-template-columns: 15rem minmax(0, 1fr); padding: 2.25rem; }
  .sust-lead { padding-right: 1.5rem; border-right: 1px solid color-mix(in srgb, var(--verde-claro) 22%, transparent); }
  .sust-itens { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .sust-item { padding-inline: 1.75rem; border-left: 1px solid color-mix(in srgb, var(--verde-claro) 22%, transparent); }
  .sust-item:first-child { border-left: 0; }
  .sust-item:last-child { padding-right: 0; }
}
.sust-pe { display: flex; align-items: center; justify-content: center; gap: 1rem;
           margin: 2.5rem auto 0; max-width: 42rem; text-align: left;
           font-size: var(--fs-md); color: var(--on-deep-2); line-height: 1.5; }
.sust-pe .medalha { --md: 2.75rem; flex: none;
  background: color-mix(in srgb, var(--verde-claro) 14%, transparent); color: var(--verde-claro); }

/* ── 04 · Os tres cartoes LIGADOS ────────────────────────────────────────────
   Um fio curto de um cartao ao proximo, na altura do titulo, com um ponto em
   cada ponta: diz que sao partes de uma arquitetura, nao tres produtos. */
.cartoes-ligados .cartao { position: relative; overflow: visible; }
@media (min-width: 900px) {
  .cartoes-ligados .cartao + .cartao::before {
    content: ""; position: absolute; top: calc(6.25rem - 1px); left: calc(-1 * var(--gap));
    width: var(--gap); height: 2px; background: var(--verde);
  }
  .cartoes-ligados .cartao + .cartao::after {
    content: ""; position: absolute; top: calc(6.25rem - .25rem); left: calc(-1 * var(--gap) - .25rem);
    width: .5rem; height: .5rem; border-radius: 50%; background: var(--verde);
    box-shadow: calc(var(--gap)) 0 0 0 var(--verde);
  }
}
.cartao-com-chip { display: flex; flex-direction: column; padding-bottom: 0; }
.cartao-chip { margin-top: auto; padding: 1rem 0 1.25rem; border-top: 1px solid var(--linha);
               display: flex; align-items: center; gap: .625rem;
               color: var(--verde-forte); font-weight: 700; font-size: var(--fs-sm); }
.cartao-chip svg { width: 1.25rem; height: 1.25rem; flex: none; }
.cartao-com-chip .cartao-texto { margin-bottom: 1.25rem; }

/* ── 05 · A matriz amplitude × profundidade ──────────────────────────────────
   Uma grade so, com subgrid, para o cabecalho das cinco frentes e os pontos
   das cinco camadas cairem nas MESMAS colunas: colunas separadas se
   desalinham ao primeiro ajuste de padding. */
.matriz { display: grid; gap: 1.5rem; }
.matriz-cabeca { margin-bottom: 0; }
.matriz-cabeca .regua { margin: .25rem 0 .5rem; }
.matriz-forte { color: var(--verde-forte); font-weight: 700; }
.matriz-sub { display: block; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; margin-top: .125rem; }
.matriz-eixo-h { display: none; }
.matriz-eixo-v { display: none; }
.matriz-colunas { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem;
                  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); text-align: center; }
.matriz-colunas li { display: grid; justify-items: center; gap: .25rem; }
.matriz-colunas .medalha { --md: 3.25rem; margin-bottom: .375rem; }
.matriz-colunas b { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.matriz-teses { display: grid; gap: 1rem; padding: 1.5rem; align-content: start;
                border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); }
.matriz-teses .medalha { --md: 3.5rem; }
.matriz-teses ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.matriz-teses li { position: relative; padding-left: 1.5rem; font-size: var(--fs-md); color: var(--ink-2); line-height: 1.45; }
.matriz-teses li::before { content: ""; position: absolute; left: 0; top: .35em; width: .75rem; height: .75rem;
                           border-radius: 50%; background: var(--verde); }
.matriz-teses b { color: var(--ink); }
.matriz-teses li:last-child b + span, .matriz-teses li:last-child { color: var(--ink-2); }
.matriz-grade { display: grid; border: 1px solid var(--linha); border-radius: var(--r);
                background: var(--branco); overflow: hidden; }
.matriz-linha { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.matriz-linha:nth-child(even) { background: var(--fundo); }
.matriz-rotulo { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; }
.matriz-rotulo .medalha { --md: 2.75rem; flex: none; }
.matriz-rotulo b { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.matriz-cel { display: none; }
@media (min-width: 1100px) {
  .matriz { grid-template-columns: 15rem 2.25rem 14.5rem repeat(var(--cols, 5), minmax(0, 1fr));
            grid-template-rows: auto auto auto; column-gap: 1rem; row-gap: 1.25rem; align-items: start; }
  .matriz-cabeca { grid-column: 1 / 4; grid-row: 1 / 3; max-width: none; padding-right: 1rem; }
  .matriz-eixo-h { grid-column: 4 / -1; grid-row: 1; display: block; position: relative;
                   text-align: center; padding-bottom: .875rem;
                   font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--verde-forte); align-self: end; }
  .matriz-eixo-h::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: .5rem;
                          border: 1px solid var(--verde-forte); border-top: 0; border-radius: 0 0 4px 4px; }
  .matriz-colunas { grid-column: 4 / -1; grid-row: 2; display: grid; grid-template-columns: subgrid; gap: 0; }
  .matriz-teses { grid-column: 1; grid-row: 3; }
  .matriz-eixo-v { grid-column: 2; grid-row: 3; display: grid; place-items: center; position: relative; align-self: stretch; }
  .matriz-eixo-v span { writing-mode: vertical-rl; transform: rotate(180deg);
                        font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
                        text-transform: uppercase; color: var(--verde-forte); white-space: nowrap; }
  .matriz-eixo-v::after { content: ""; position: absolute; top: 4%; bottom: 4%; right: 0; width: .5rem;
                          border: 1px solid var(--verde-forte); border-left: 0; border-radius: 0 4px 4px 0; }
  .matriz-grade { grid-column: 3 / -1; grid-row: 3; display: grid; grid-template-columns: subgrid; }
  .matriz-linha { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .matriz-cel { display: block; position: relative; height: 3.5rem; }
  /* A linha vertical tenue passa PELO CENTRO do ponto (regra global). */
  .matriz-cel::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - .5px); width: 1px;
                        background: var(--linha); }
  .matriz-cel::after { content: ""; position: absolute; top: 50%; left: 50%; width: .8125rem; height: .8125rem;
                       transform: translate(-50%, -50%); border-radius: 50%; background: var(--verde-forte); }
}
.matriz-fecho { position: relative; display: grid; gap: .25rem; margin-top: 2.5rem; text-align: center; }
.matriz-fecho b { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; }
.matriz-fecho > span { font-size: var(--fs-lg); color: var(--ink-2); }
@media (min-width: 900px) {
  .matriz-fecho { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 2rem; }
  .matriz-fecho b { grid-column: 2; }
  .matriz-fecho > span { grid-column: 2; }
  .matriz-fecho::before, .matriz-fecho::after { content: ""; grid-row: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--verde-forte)); }
  .matriz-fecho::before { grid-column: 1; }
  .matriz-fecho::after { grid-column: 3; background: linear-gradient(270deg, transparent, var(--verde-forte)); }
}
.matriz-chips { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap;
                justify-content: center; gap: 1rem 0; }
.matriz-chips li { display: flex; align-items: center; gap: .875rem; padding-inline: 2rem; font-size: var(--fs-md); color: var(--ink-2); }
.matriz-chips li + li { border-left: 1px solid var(--linha); }
.matriz-chips svg { width: 2rem; height: 2rem; flex: none; color: var(--verde-forte); }
.matriz-chips b { display: block; color: var(--ink); }

/* ── 06 · A jornada amparada ─────────────────────────────────────────────────
   A cor aqui e CATEGORICA (a escala --pil-* das cinco frentes): identifica,
   nao chama para acao. Vem por variavel inline, do PHP. */
.jor-topo { display: grid; gap: 2rem; }
/* As cinco frentes saíram daqui em 23/09 (Daiane): já foram apresentadas mais
   acima na /plataforma, e repeti-las fazia o bloco competir com a matriz. O
   bloco agora é inteligência + ferramentas, e o cabeçalho ocupa a linha. */
.jor-cabeca { margin-bottom: 0; max-width: 40rem; }
.jor-cabeca .regua { margin-top: .5rem; }
.jor-sub { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.jor-intel { list-style: none; margin: 3.75rem 0 0; padding: 0; display: grid; gap: 3.25rem 1.75rem;
             grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.jor-intel-cartao { position: relative; display: grid; justify-items: center; gap: .375rem; text-align: center;
  padding: 3.25rem 1.5rem 1.75rem; border: 1px solid var(--linha); border-radius: var(--r);
  background: color-mix(in srgb, var(--pil) 5%, var(--branco)); }
.jor-intel-ico { position: absolute; top: -2.25rem; left: 50%; transform: translateX(-50%);
  width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--pil-txt); color: var(--branco); box-shadow: 0 0 0 6px var(--branco); }
.jor-intel-ico svg { width: 46%; height: 46%; }
.jor-intel-cartao h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pil-txt); }
.jor-verbo { font-size: var(--fs-lg); font-weight: 700; color: var(--pil-txt); }
.jor-intel-cartao .regua { width: 60%; margin: .625rem 0 .75rem; background: color-mix(in srgb, var(--pil) 40%, transparent); }
.jor-intel-cartao p { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.5; }
.jor-ferr { list-style: none; margin: 2rem 0 0; padding: 1.25rem; display: grid; gap: 1.25rem;
            grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
            border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); }
.jor-ferr li { display: flex; gap: 1rem; align-items: flex-start; padding-left: 1.25rem; border-left: 1px solid var(--linha); }
.jor-ferr li:first-child { border-left: 0; padding-left: 0; }
.jor-ferr .medalha { --md: 3.25rem; flex: none;
                     background: color-mix(in srgb, var(--pil) 12%, var(--branco)); color: var(--pil-txt); }
.jor-ferr b { display: block; margin-bottom: .25rem; font-size: var(--fs-sm); font-weight: 800;
              letter-spacing: .06em; text-transform: uppercase; color: var(--pil-txt); }
.jor-fecho { display: flex; align-items: center; justify-content: center; gap: .875rem;
             margin-top: 2.5rem; font-size: var(--fs-h3); font-weight: 700; text-align: center; }
.jor-fecho-ico { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center;
                 border: 2px solid var(--verde); color: var(--verde-forte); }
.jor-fecho-ico svg { width: 55%; height: 55%; }
.jor-acao { margin-top: 1.5rem; text-align: center; }
.jor-acao .btn { padding: 1rem 2.25rem; font-size: var(--fs-lg); }

/* =============================================================================
   Lote de 04/09 · telas faltantes da especialista (docs/atualizacao site/ajustes_04_09)
   -----------------------------------------------------------------------------
   Regras globais que estes blocos obedecem, todas dela:
   1.1 faixa escura de borda a borda, sem raio, baixa — nunca "card gigante";
   1.2 sem vazio de quebra de pagina entre uma faixa e a proxima secao;
   1.3 linha que liga nos passa pelo CENTRO do no, nunca por baixo dele;
   1.4 simbolos com mais presenca (medalhao maior), traco continua fino.
   ========================================================================== */

/* ── Fluxo · nos ligados por seta pontilhada ─────────────────────────────────
   A peca que este lote repete em oito lugares: agro (pressao, porteira,
   regulacoes, realidades, ciclo), transporte (como a Nexta ajuda), Academy
   (percurso) e SBCE (a camada Nexta). Um componente, tres modificadores:
     .fluxo-linha  — fio continuo atravessando todos os nos (Academy page 2);
     .fluxo-chev   — so o bico, sem fio (ciclo de melhoria continua);
     .fluxo-escuro — sobre faixa escura.
   O conector nasce no centro do medalhao: top = metade do --fl-md. Regra 1.3. */
.fluxo { --fl-md: 3.5rem; --fl-vao: 1.5rem;
         list-style: none; margin: 0; padding: 0; position: relative;
         display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--fl-vao); }
.fluxo-no { position: relative; display: grid; justify-items: center; align-content: start;
            gap: .625rem; text-align: center; }
.fluxo-no .medalha { --md: var(--fl-md); }
.fluxo-nome { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
              text-transform: uppercase; color: var(--ink); line-height: 1.3; }
.fluxo-texto { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; max-width: 12rem; }
.fluxo-no + .fluxo-no::before {
  content: ""; position: absolute; top: calc(var(--fl-md) / 2 - 1px);
  left: calc(-1 * var(--fl-vao)); width: calc(var(--fl-vao) - .5rem);
  border-top: 2px dotted var(--verde);
}
.fluxo-no + .fluxo-no::after {
  content: ""; position: absolute; top: calc(var(--fl-md) / 2 - .3125rem); left: -.8125rem;
  width: .5rem; height: .5rem; border-right: 2px solid var(--verde); border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg);
}
.fluxo-chev .fluxo-no + .fluxo-no::before { display: none; }
.fluxo-linha .fluxo-no + .fluxo-no::before,
.fluxo-linha .fluxo-no + .fluxo-no::after { display: none; }
/* O fio continuo: do centro do primeiro no ao centro do ultimo, por tras. */
.fluxo-linha::before {
  content: ""; position: absolute; z-index: 0; top: calc(var(--fl-md) / 2 - 1px); height: 2px;
  left: calc((100% - (var(--n, 4) - 1) * var(--fl-vao)) / var(--n, 4) / 2);
  right: calc((100% - (var(--n, 4) - 1) * var(--fl-vao)) / var(--n, 4) / 2);
  background: var(--linha);
}
.fluxo-linha .fluxo-no > * { position: relative; z-index: 1; }
.fluxo-linha .medalha { box-shadow: 0 0 0 .375rem var(--branco); }
.fluxo-escuro .fluxo-nome { color: var(--branco); }
.fluxo-escuro .fluxo-texto { color: var(--on-deep-2); }
.fluxo-escuro .medalha { background: var(--verde-profundo-2); color: var(--verde-claro); border: 1px solid var(--linha-escura); }
.fluxo-escuro .fluxo-no + .fluxo-no::before { border-top-color: var(--verde-claro); }
.fluxo-escuro .fluxo-no + .fluxo-no::after { border-color: var(--verde-claro); }
@media (max-width: 700px) {
  /* Empilhado a seta horizontal nao liga nada: icone a esquerda, nome ao lado. */
  .fluxo { grid-auto-flow: row; gap: .875rem; }
  .fluxo-no { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center;
              text-align: left; column-gap: .875rem; row-gap: .125rem; }
  .fluxo-no .medalha { --md: 2.75rem; grid-row: span 2; }
  .fluxo-texto { max-width: none; }
  .fluxo-no + .fluxo-no::before, .fluxo-no + .fluxo-no::after, .fluxo-linha::before { display: none; }
}

/* ── Acompanha · "A Nexta acompanha voce em toda a jornada" ─────────────────
   Setores (page 4) e A Nexta (page 2), mesma composicao. */
.acomp-topo { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
.acomp-topo .secao-cabeca { margin-bottom: 0; }
.acomp-sub { font-size: var(--fs-lede); font-weight: 700; color: var(--ink); }
@media (min-width: 1000px) {
  /* A coluna da direita fica VAZIA de propósito: os arcos decorativos saíram
     em 23/09 (Daiane) e o pedido foi deixar a área limpa, não alargar o texto. */
  .acomp-topo { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; }
}
.acomp-pilares .cartao { gap: .5rem; }
.acomp-pilares .medalha { margin-bottom: .625rem; }
.acomp-pilares .regua { margin-top: .875rem; }
.acomp-ref-rotulo { margin-top: 2rem; font-size: var(--fs-md); font-weight: 700; }
.acomp-refs { display: flex; flex-wrap: wrap; gap: .4375rem; margin-top: .625rem; }
.acomp-ref-nota { margin-top: .75rem; font-size: var(--fs-xs); color: var(--ink-2); }
/* A faixa: filha da secao, ja e de borda a borda. Come o padding de baixo da
   secao (regra 1.2) e fica baixa (regra 1.1). */
.acomp-faixa { position: relative; isolation: isolate; overflow: hidden;
               margin-top: 2.5rem; margin-bottom: calc(-1 * var(--ritmo));
               background: var(--verde-profundo); color: var(--verde-suave); }
.acomp-faixa-foto { position: absolute; top: 0; bottom: 0; right: 0; width: min(56%, 62rem); z-index: 0; display: block; }
.acomp-faixa-foto img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 55% 50%; }
/* O degrade: verde solido ate onde o texto termina, fusao suave, foto quase
   inteira na ponta direita — "fundo verde a esquerda evoluindo para a
   fotografia da estrada", nas palavras dela. */
.acomp-faixa-veu { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    var(--verde-profundo) 0 40%,
    color-mix(in srgb, var(--verde-profundo) 90%, transparent) 50%,
    color-mix(in srgb, var(--verde-profundo) 45%, transparent) 66%,
    color-mix(in srgb, var(--verde-profundo) 14%, transparent) 100%); }
.acomp-faixa-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.5rem;
                  padding-block: 2.25rem; min-height: 12rem; }
.acomp-selo { --md: 4.75rem; flex: none; background: transparent; color: var(--verde-claro);
              border: 1px solid var(--linha-escura);
              box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--verde-claro) 8%, transparent); }
.acomp-selo svg { width: 50%; height: 50%; }
.acomp-faixa-msg { display: grid; gap: .25rem; max-width: 36rem; }
.acomp-faixa-msg span { font-size: var(--fs-lg); color: var(--branco); }
.acomp-faixa-msg b { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); color: var(--verde-claro);
                     line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
@media (max-width: 900px) {
  .acomp-faixa-foto { width: 100%; }
  .acomp-faixa-veu { background: color-mix(in srgb, var(--verde-profundo) 86%, transparent); }
}

/* ── Valor · "O que isso devolve" (Transporte tela final · Agro page 7) ─────
   Quatro colunas com filete, cor categorica por frente. */
.valor-colunas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.valor-col { display: grid; align-content: start; gap: .375rem;
             --pil: var(--pil-gestao); --pil-txt: var(--pil-gestao-txt); }
.valor-col:nth-child(2) { --pil: var(--pil-clima);    --pil-txt: var(--pil-clima-txt); }
.valor-col:nth-child(3) { --pil: var(--pil-natureza); --pil-txt: var(--pil-natureza-txt); }
.valor-col:nth-child(4) { --pil: var(--pil-social);   --pil-txt: var(--pil-social-txt); }
.valor-col .medalha { --md: 3.5rem; margin-bottom: 1.25rem;
                      background: color-mix(in srgb, var(--pil) 12%, var(--branco)); color: var(--pil-txt); }
.valor-verbo { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pil-txt); }
.valor-nome { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -.02em;
              text-transform: uppercase; line-height: 1.05; color: var(--pil-txt); }
.valor-apoio { font-size: var(--fs-md); color: var(--ink-2); padding-bottom: 1rem; margin-bottom: .75rem;
               border-bottom: 1px solid var(--linha); }
.valor-rotulo { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                color: var(--pil-txt); margin-bottom: .375rem; }
.valor-lista { display: grid; gap: .5rem; }
.valor-lista li { display: flex; gap: .625rem; align-items: flex-start; font-size: var(--fs-md); }
.valor-lista li svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .2rem; color: var(--pil); }
@media (min-width: 901px) {
  .valor-colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; container-type: inline-size; }
  /* O corpo do nome acompanha a largura da GRADE, não da tela: "COMPETITIVIDADE"
     em caixa alta mede ~9,2em e, a 2rem, não cabia na coluna abaixo de ~1400px
     (rolagem lateral em /setores/transporte a 1024px, medida em 28/09). Pela
     grade e não pela coluna para as quatro palavras terem o mesmo corpo. */
  .valor-nome { font-size: clamp(1.125rem, 2.65cqi - .375rem, 2rem); }
  .valor-col { padding-inline: 1.75rem; border-left: 1px solid var(--linha); }
  .valor-col:first-child { padding-left: 0; border-left: 0; }
  .valor-col:last-child { padding-right: 0; }
}
.valor-ajuda { margin-top: 3rem; padding: 2rem; border-radius: var(--r); background: var(--fundo);
               display: grid; gap: 2rem; }
.valor-ajuda-texto { display: grid; gap: .5rem; align-content: center; }
.valor-ajuda-texto h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.valor-ajuda-texto p { font-size: var(--fs-md); color: var(--ink-2); }
.valor-ajuda-lado { display: grid; gap: 1.5rem; }
.valor-ajuda .fluxo .medalha { background: var(--branco); border: 1px solid var(--linha); }
.valor-fecho { display: flex; align-items: center; gap: .625rem; padding: .875rem 1.125rem;
               border-radius: var(--r-sm); background: var(--branco); border: 1px solid var(--linha);
               font-size: var(--fs-md); font-weight: 600; }
.valor-fecho svg { width: 1.25rem; height: 1.25rem; color: var(--verde-forte); flex: none; }
.valor-fecho .realce { font-weight: 700; }
@media (min-width: 1000px) {
  .valor-ajuda { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 3rem; align-items: center; }
}

/* ── Evidências · a pressao no agro (solucoes_agro_page2) ────────────────────
   Quatro numeros grandes com filete entre eles, fonte discreta embaixo de
   cada um. Nao sao cartoes SaaS: e tipografia sobre fundo claro. */
.evid-regua { width: 4.5rem; height: 3px; margin: -.75rem 0 2.5rem; }
.evid-dados { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.evid-dado { display: grid; gap: .375rem; align-content: start; }
.evid-dado .medalha { --md: 3.5rem; margin-bottom: .875rem; }
.evid-valor { font-size: clamp(2.75rem, 2rem + 2.6vw, 4.25rem); font-weight: 400; line-height: 1;
              letter-spacing: -.03em; color: var(--verde-forte); font-variant-numeric: tabular-nums; }
.evid-valor small { font-size: .5em; font-weight: 400; margin-left: .1em; }
.evid-rotulo { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; margin-top: .5rem; text-wrap: balance; }
.evid-detalhe { font-size: var(--fs-md); color: var(--ink-2); }
.evid-fonte { font-size: var(--fs-xs); color: var(--ink-2); margin-top: .375rem; }
@media (min-width: 901px) {
  .evid-dados { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .evid-dado { padding-inline: 1.75rem; border-left: 1px solid var(--linha); }
  .evid-dado:first-child { padding-left: 0; border-left: 0; }
  .evid-dado:last-child { padding-right: 0; }
}
.evid-fecho { margin-top: 3rem; padding: 2rem; border-radius: var(--r); border: 1px solid var(--linha);
              background: var(--branco); display: grid; gap: 1.5rem 2.5rem; align-items: center; }
.evid-fecho .medalha-escura { --md: 6rem; box-shadow: 0 0 0 .5rem var(--verde-suave); }
.evid-fecho .medalha-escura svg { width: 60%; height: 60%; }
.evid-fecho-texto h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; }
.evid-fecho-texto p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .5rem; max-width: 28rem; }
@media (min-width: 1000px) {
  .evid-fecho { grid-template-columns: auto minmax(0, .85fr) minmax(0, 1.4fr); }
}

/* ── Porteira · antes, dentro e depois (solucoes_agro_page3) ─────────────────
   Leitura horizontal: dois paineis nas pontas, o do meio maior e dividido em
   quatro dimensoes. A camada Nexta corre embaixo, transversal. */
.port-sub { font-size: var(--fs-h3); font-weight: 600; color: var(--verde-forte); line-height: 1.25; text-wrap: balance; }
.port-cadeia { display: grid; gap: 1.75rem; }
.port-lado, .port-dentro { position: relative; border: 1px solid var(--linha); border-radius: var(--r);
                           background: var(--branco); padding-top: 1rem; }
.port-tab { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
            padding: .4375rem 1.125rem; border-radius: var(--r-sm); background: var(--verde-forte); color: var(--branco);
            font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.port-lado picture { display: block; margin: .625rem .75rem 0; aspect-ratio: 4 / 3; border-radius: var(--r-sm);
                     overflow: hidden; background: var(--verde-profundo); }
.port-lado picture img, .port-dim picture img { width: 100%; height: 100%; display: block; object-fit: cover; }
.port-corpo { padding: 1.125rem 1.25rem 1.25rem; display: grid; gap: .875rem; }
.port-corpo h3 { font-size: var(--fs-md); font-weight: 700; line-height: 1.35; }
.port-lista { display: grid; gap: .5rem; }
.port-lista li { display: flex; gap: .625rem; align-items: center; font-size: var(--fs-sm); }
.port-lista svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--verde-forte); }
.port-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding: 1.25rem 1rem 1rem; }
.port-dim { display: grid; gap: .625rem; justify-items: center; text-align: center; align-content: start; }
.port-dim .medalha { --md: 3.5rem; }
.port-dim h3 { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
               color: var(--verde-forte); line-height: 1.3; min-height: 2.6em; display: grid; align-content: end; }
.port-dim picture { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden;
                    background: var(--verde-profundo); }
.port-dim ul { display: grid; gap: .25rem; justify-self: start; font-size: var(--fs-sm); text-align: left; }
.port-dim ul li { display: flex; gap: .5rem; }
.port-dim ul li::before { content: "•"; color: var(--verde); }
.port-seta { display: none; align-self: center; color: var(--verde-forte); font-size: 1.5rem; line-height: 1; }
@media (min-width: 1000px) {
  .port-cadeia { grid-template-columns: minmax(0, 1fr) auto minmax(0, 2.55fr) auto minmax(0, 1fr); gap: .875rem; align-items: stretch; }
  .port-seta { display: block; }
  .port-dims { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .port-dim { padding-inline: .875rem; border-left: 1px solid var(--linha); }
  .port-dim:first-child { border-left: 0; }
}
/* O no que costura a cadeia a camada Nexta: metade sobre um, metade sobre o outro. */
.port-no { --md: 3.25rem; margin: 1.5rem auto -1.625rem; position: relative; z-index: 1; border: 3px solid var(--branco); }
.port-nexta { padding: 2.75rem 2rem 2rem; border: 1px solid var(--linha); border-radius: var(--r);
              background: var(--branco); display: grid; gap: 1.75rem; }
.port-nexta-texto { text-align: center; display: grid; gap: .5rem; justify-items: center; }
.port-nexta-texto h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.015em; }
.port-escopo { display: flex; gap: 1rem; align-items: center; padding: 1.25rem; border-radius: var(--r-sm); background: var(--fundo); }
.port-escopo .medalha { --md: 3.5rem; background: var(--branco); }
.port-escopo p { font-size: var(--fs-md); }
.port-escopo b { display: block; margin-bottom: .25rem; }
.port-escopo .realce { font-weight: 700; }
@media (min-width: 1000px) {
  .port-nexta { grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); grid-template-areas: "texto texto" "fluxo escopo";
                align-items: center; column-gap: 2.5rem; }
  .port-nexta-texto { grid-area: texto; }
  .port-nexta .fluxo { grid-area: fluxo; }
  .port-escopo { grid-area: escopo; }
}

/* ── Regulações · da complexidade a gestao (solucoes_agro_page4) ─────────────
   Tela informativa, sem fotografia. Tres temas em cartao, o quadro das
   regulacoes dividido em "dentro" e "fora" da porteira, e a camada Nexta. */
.reg-topo { display: grid; gap: 2rem; margin-bottom: 1.5rem; }
.reg-topo .secao-cabeca { margin-bottom: 0; }
.reg-temas { display: grid; gap: var(--gap); align-items: start; }
.reg-tema { position: relative; padding-top: 2.25rem; margin-top: 1.75rem; gap: .5rem; }
.reg-tema .medalha { position: absolute; top: 0; left: 1.5rem; transform: translateY(-50%); --md: 3.5rem;
                     border: 3px solid var(--branco); box-shadow: var(--sombra); }
.reg-tema-titulo { font-size: var(--fs-lg); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--verde-forte); }
.reg-tema-sub { font-size: var(--fs-md); color: var(--ink); }
.reg-tema-texto { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .5rem; }
.reg-tema-datas { display: grid; gap: .375rem; margin-top: .75rem; padding: .75rem .875rem; border-radius: var(--r-sm);
                  border: 1px solid var(--linha); background: var(--fundo); font-size: var(--fs-sm); }
.reg-tema-datas li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: baseline; }
.reg-tema-datas b { color: var(--verde-forte); font-variant-numeric: tabular-nums; }
.reg-tema-nota { display: flex; gap: .625rem; align-items: flex-start; margin-top: auto; padding: .75rem .875rem;
                 border-radius: var(--r-sm); background: var(--fundo); font-size: var(--fs-xs); color: var(--ink-2); }
.reg-tema-nota svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--verde-forte); }
.reg-tema-nota b { color: var(--ink); }
@media (min-width: 1000px) {
  .reg-topo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 2.5rem; align-items: start; }
  .reg-temas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.reg-quadro { margin-top: 2rem; padding: 1.75rem 2rem 2rem; border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); }
.reg-quadro-titulo { text-align: center; font-size: var(--fs-md); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.5rem; }
.reg-grupos { display: grid; gap: 1.5rem; }
.reg-grupo-rotulo { position: relative; display: grid; justify-items: center; margin-bottom: 1.25rem; }
.reg-grupo-rotulo::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid var(--verde-forte); }
.reg-grupo:nth-child(2) .reg-grupo-rotulo::before { border-top-style: dotted; border-top-width: 2px; }
.reg-grupo:nth-child(2) .reg-grupo-rotulo::after { content: ""; position: absolute; right: 0; top: calc(50% - .3125rem); width: .5rem; height: .5rem;
  border-right: 2px solid var(--verde-forte); border-bottom: 2px solid var(--verde-forte); transform: rotate(-45deg); }
.reg-grupo-rotulo span { position: relative; padding: .3125rem .875rem; border: 1px solid var(--verde-forte); border-radius: var(--r-sm);
  background: var(--branco); color: var(--verde-forte); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.reg-itens { display: grid; gap: 1.25rem; }
.reg-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .875rem; align-items: start; }
.reg-item .medalha { --md: 3.25rem; }
.reg-item b { display: block; font-size: var(--fs-lg); font-weight: 800; color: var(--verde-forte); margin-bottom: .25rem; }
.reg-item span { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
@media (min-width: 901px) {
  .reg-grupos { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr); gap: 0; }
  .reg-grupo { padding-inline: 1.25rem; }
  .reg-grupo:first-child { padding-left: 0; }
  .reg-grupo:last-child { padding-right: 0; border-left: 1px solid var(--linha); }
  .reg-grupo:first-child .reg-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reg-grupo:last-child  .reg-itens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reg-item { grid-template-columns: 1fr; }
}
.reg-nexta { margin-top: 1.5rem; padding: 1.75rem 2rem; border-radius: var(--r); background: var(--verde-suave);
             display: grid; gap: 1.5rem; align-items: center; }
.reg-nexta-marca img { width: 8rem; height: auto; }
.reg-nexta-meio { display: grid; gap: 1.25rem; }
.reg-nexta-meio h3 { font-size: var(--fs-lg); font-weight: 800; line-height: 1.3; text-wrap: balance; }
.reg-nexta .fluxo .medalha { background: var(--branco); }
.reg-nexta-cta { display: grid; gap: .75rem; justify-items: start; }
.reg-nexta-cta p { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
@media (min-width: 1100px) {
  .reg-nexta { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.5rem; }
  .reg-nexta > * + * { padding-left: 2.5rem; border-left: 1px solid var(--linha); }
}
.reg-nota { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--ink-2); max-width: 60rem; }
.reg-nota svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--verde-forte); }

/* ── Realidades · uma Nexta para diferentes realidades do agro (page 5) ─────
   Quatro colunas com filete, cada uma com numero, nome, frase, fotografia,
   lista e a "pergunta que importa". A faixa de baixo e escura, de borda a
   borda, sem foto e sem raio (regra 1.1). */
.real-fluxo { margin-bottom: 1.25rem; }
/* Empilhado, quatro icones sem nome numa coluna nao dizem nada: o nome de
   cada realidade ja abre a propria coluna logo abaixo. */
@media (max-width: 700px) { .real-fluxo { display: none; } }
.real-colunas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.real-col { display: grid; gap: .75rem; align-content: start; }
.real-cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.real-num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-pill);
            background: var(--verde-forte); color: var(--branco); font-size: var(--fs-xs); font-weight: 800; }
.real-nome { font-size: var(--fs-lg); font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
             color: var(--verde-forte); line-height: 1.2; }
.real-frase { font-size: var(--fs-md); font-weight: 700; margin-top: .125rem; }
.real-col picture { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--verde-profundo); }
.real-col picture img { width: 100%; height: 100%; display: block; object-fit: cover; }
.real-lista { display: grid; gap: .375rem; font-size: var(--fs-md); }
.real-lista li { display: flex; gap: .625rem; }
.real-lista li::before { content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--verde); margin-top: .6rem; }
.real-pergunta { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.125rem; border-radius: var(--r-sm);
                 background: var(--fundo); margin-top: auto; }
.real-pergunta .medalha { --md: 2.25rem; background: var(--branco); border: 1px solid var(--linha); }
.real-pergunta p { font-size: var(--fs-sm); color: var(--ink-2); }
.real-pergunta b { display: block; color: var(--verde-forte); margin-bottom: .125rem; }
@media (min-width: 901px) {
  .real-colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .real-col { padding-inline: 1.5rem; border-left: 1px solid var(--linha); }
  .real-col:first-child { padding-left: 0; border-left: 0; }
  .real-col:last-child { padding-right: 0; }
}
.real-faixa { margin-top: 3rem; margin-bottom: calc(-1 * var(--ritmo)); background: var(--verde-profundo); color: var(--verde-suave); }
.real-faixa-in { display: grid; gap: 1.5rem; padding-block: 2.25rem; align-items: center; }
.real-faixa-marca img { height: 1.625rem; width: auto; }
.real-faixa-texto b { display: block; font-size: var(--fs-lg); color: var(--branco); margin-bottom: .25rem; }
.real-faixa-texto p { font-size: var(--fs-sm); color: var(--on-deep-2); }
.real-frentes { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.real-frentes li { display: grid; justify-items: center; gap: .375rem; font-size: var(--fs-xs); font-weight: 800;
                   letter-spacing: .06em; text-transform: uppercase; color: var(--branco); }
.real-frentes svg { width: 1.75rem; height: 1.75rem; color: var(--verde-claro); }
.real-faixa-cta { display: grid; gap: .625rem; justify-items: start; }
.real-faixa-cta b { color: var(--branco); font-size: var(--fs-lg); }
.real-faixa-cta p { font-size: var(--fs-sm); color: var(--on-deep-2); }
@media (min-width: 1100px) {
  .real-faixa-in { grid-template-columns: auto minmax(0, 1.15fr) auto minmax(0, .85fr); gap: 2.25rem; }
  .real-faixa-in > * + * { padding-left: 2.25rem; border-left: 1px solid var(--linha-escura); }
}

/* ── Entradas · forma "detalhe" + ciclo (Agro page 6 · Transporte) ─────────── */
.entrada-cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .875rem; align-items: start; }
.entrada-cabeca .medalha { --md: 3.5rem; }
.entrada-mensagem { font-size: var(--fs-md); color: var(--ink-2); margin-top: .25rem; }
.entrada-destaque { display: flex; gap: .75rem; align-items: center; padding: .875rem 1rem; border-radius: var(--r-sm);
                    background: var(--fundo); font-size: var(--fs-sm); color: var(--ink); }
.entrada-destaque .medalha { --md: 2.25rem; background: var(--branco); border: 1px solid var(--linha); }
/* Sem numero, o selo vai para a direita sozinho. */
.entrada-topo:not(:has(.num)) { justify-content: flex-end; min-height: 1.625rem; }
.ciclo { margin-top: var(--gap); padding: 1.5rem 1.75rem; border-radius: var(--r); background: var(--branco);
         border: 1px solid var(--linha); display: grid; gap: 1.5rem; align-items: center; }
.ciclo-texto { display: flex; gap: 1rem; align-items: center; }
.ciclo-texto .medalha { --md: 3.5rem; }
.ciclo-texto b { display: block; font-size: var(--fs-lg); color: var(--verde-forte); margin-bottom: .25rem; }
.ciclo-texto p { font-size: var(--fs-sm); color: var(--ink-2); }
.ciclo .fluxo { --fl-md: 2.75rem; --fl-vao: 1.25rem; }
@media (min-width: 1000px) {
  .ciclo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 2.5rem; }
  .ciclo .fluxo { padding-left: 2.5rem; border-left: 1px solid var(--linha); }
}

/* ── FAQ com fotografia ancorada no topo ─────────────────────────────────────
   A unica regra que a especialista escreveu em CSS: align-self: start. */
.faq-duo { display: grid; gap: 2.5rem; align-items: start; }
.faq-duo .faq { max-width: none; margin-inline: 0; }
.faq-duo .secao-cabeca { margin-bottom: 1.75rem; }
.faq-foto { display: block; align-self: start; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--verde-profundo); }
.faq-foto img { width: 100%; height: 100%; display: block; object-fit: cover; }
.faq-fecho { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem .875rem; align-items: baseline; font-size: var(--fs-lg); }
.faq-coluna:only-child .faq-fecho { justify-content: center; }
.faq-fecho .cartao-link { font-size: var(--fs-lg); }
@media (min-width: 1000px) {
  .faq-duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; }
}

/* ── Cartao com cor de frente, sub, lista e medalhao cavalgando a foto ──────── */
.cartao-alta .cartao-titulo { text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-lg); }
.cartao-sub { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--verde-forte);
              margin-top: .125rem; text-transform: none; letter-spacing: 0; }
.cartao-cor .cartao-sub { color: var(--pil-txt); }
.cartao-cor .regua { background: var(--pil); }
.cartao-cor .medalha { background: color-mix(in srgb, var(--pil) 12%, var(--branco)); color: var(--pil-txt); }
.cartao-cor-titulo .cartao-titulo { color: var(--pil-txt); }
.cartao-rotulo { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                 color: var(--verde-forte); margin-top: .375rem; }
.cartao-cor .cartao-rotulo { color: var(--pil-txt); }
.cartao-lista { display: grid; gap: .4375rem; font-size: var(--fs-md); }
.cartao-lista li { display: flex; gap: .625rem; }
.cartao-lista li::before { content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 50%;
                           background: var(--pil, var(--verde)); margin-top: .6rem; }
/* O medalhao cavalga a borda da foto: metade sobre a imagem, metade sobre o
   branco — o mesmo gesto dos cartoes de setor da home (mockups
   associacoes_page4 e parcerias_page4). */
.cartao-foto .medalha { --md: 3.25rem; margin-top: -2.75rem; position: relative; z-index: 1;
                        box-shadow: 0 0 0 3px var(--branco); background: var(--verde-suave); }
.cartao-foto.cartao-cor .medalha { background: color-mix(in srgb, var(--pil) 12%, var(--branco)); }

/* ── Hero com veu CENTRAL (Blog): o texto fica no meio, entao o veu e vertical
   e uniforme, nao lateral. */
.hero-foto-centro::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--verde-profundo) 86%, transparent) 0%,
    color-mix(in srgb, var(--verde-profundo) 76%, transparent) 55%,
    color-mix(in srgb, var(--verde-profundo) 70%, transparent) 100%);
}
.hero-foto-centro .hero-foto-img img { object-position: 50% 42%; }

/* ── Confianca · dados e confianca (Entidades page 5) ─────────────────────── */
.conf-topo { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
.conf-topo .secao-cabeca { margin-bottom: 0; }
.conf-destaque { display: flex; gap: 1.25rem; align-items: center; padding: 1.75rem 2rem; border-radius: var(--r); background: var(--verde-suave); }
.conf-destaque .medalha { --md: 5rem; box-shadow: 0 0 0 .625rem color-mix(in srgb, var(--verde) 10%, transparent); }
.conf-destaque p { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.conf-destaque p .realce { display: block; }
@media (min-width: 1000px) {
  .conf-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
  .conf-topo .secao-cabeca { padding-right: 3rem; border-right: 1px solid var(--linha); }
}
.conf-pilares { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.conf-pilar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.conf-pilar .medalha { --md: 4rem; }
.conf-pilar h3 { font-size: var(--fs-lg); font-weight: 800; line-height: 1.25; }
.conf-pilar .regua { margin: .625rem 0 .75rem; }
.conf-pilar p { font-size: var(--fs-md); color: var(--ink-2); }
@media (min-width: 901px) {
  .conf-pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .conf-pilar { padding-inline: 1.75rem; border-left: 1px solid var(--linha); }
  .conf-pilar:first-child { padding-left: 0; border-left: 0; }
  .conf-pilar:last-child { padding-right: 0; }
}
.conf-fluxo { margin-top: 3rem; padding: 1.75rem 2rem; border: 1px solid var(--linha); border-radius: var(--r);
              background: var(--branco); display: grid; gap: 1.25rem; align-items: center; }
.conf-lado { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.conf-lado-dir { grid-template-columns: minmax(0, 1fr) auto; }
.conf-lado .medalha { --md: 4.5rem; }
.conf-lado b { display: block; font-size: var(--fs-lg); font-weight: 800; line-height: 1.2; }
.conf-lado b .realce { display: block; }
.conf-lado p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .375rem; }
.conf-meio { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.conf-meio .medalha { --md: 2.75rem; background: var(--branco); border: 1px solid var(--verde); }
.conf-fio { flex: 1 1 1.5rem; max-width: 2.5rem; border-top: 2px dotted var(--verde); }
.conf-no { --md: 5.5rem; background: var(--branco); border: 1px solid var(--linha); box-shadow: 0 0 0 .75rem var(--fundo); justify-self: center; }
.conf-seta { color: var(--verde-forte); font-size: 1.75rem; line-height: 1; text-align: center; }
@media (min-width: 1000px) {
  .conf-fluxo { grid-template-columns: minmax(0, 1.2fr) auto auto auto minmax(0, 1.2fr); gap: 1.25rem; }
}
.conf-nota { margin-top: 1.25rem; display: flex; gap: .5rem; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--ink-2); }
.conf-nota svg { width: 1.125rem; height: 1.125rem; color: var(--verde-forte); }

/* ── Diferenca · normalmente x na Nexta (Diagnostico page 3) ────────────────
   Tipografia, grid e filete. Nao e fluxograma: e um confronto. */
.dif-topo { display: grid; gap: 2.5rem; margin-bottom: 2rem; }
.dif-topo .secao-cabeca { margin-bottom: 0; }
.dif-lede { font-size: var(--fs-md); color: var(--ink-2); }
.dif-lede b { color: var(--ink); }
.dif-pontos { width: 22rem; max-width: 100%; height: 4rem; margin-top: 2rem;
              background-image: radial-gradient(circle, var(--linha) 1.5px, transparent 1.6px); background-size: 1.5rem 1.5rem; }
.dif-quadro { display: grid; gap: 2rem; }
.dif-col-rotulo { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.dif-col-rotulo::after { content: ""; display: block; width: 2.5rem; height: 2px; background: currentColor; margin-top: .625rem; }
.dif-nexta .dif-col-rotulo { color: var(--verde-forte); }
.dif-normal ul { margin-top: 1.5rem; display: grid; }
.dif-normal li { padding: .875rem 0; border-bottom: 1px solid var(--linha); font-size: var(--fs-h3); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.dif-depois { margin-top: 1.25rem; display: flex; align-items: center; gap: .75rem; font-size: var(--fs-md); color: var(--ink-2); }
.dif-depois::before, .dif-depois::after { content: ""; flex: 1; border-top: 1px solid var(--linha); }
.dif-gap { margin-top: 1.5rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -.02em;
           text-transform: uppercase; color: var(--verde-forte); line-height: 1.05; }
.dif-gap::after { content: ""; display: block; width: 2.5rem; height: 2px; background: var(--verde-forte); margin-top: 1rem; }
.dif-itens { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dif-itens li { display: grid; justify-items: center; gap: .625rem; padding: .5rem; border-left: 1px solid var(--linha);
                text-align: center; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dif-itens li:first-child { border-left: 0; }
.dif-itens svg { width: 2.25rem; height: 2.25rem; color: var(--verde-forte); }
@media (min-width: 1000px) {
  .dif-topo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 3rem; align-items: start; }
  .dif-quadro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 0; }
  .dif-normal { padding-right: 2.5rem; }
  .dif-nexta { padding-left: 2.5rem; border-left: 1px solid var(--linha); }
}
.dif-fecho { display: grid; gap: 1.25rem; align-items: center; padding: 1.5rem 1.75rem; border-radius: var(--r);
             background: var(--verde-suave); border-left: 3px solid var(--verde-forte); }
.dif-fecho-texto { display: flex; gap: 1.25rem; align-items: center; }
.dif-fecho-texto .medalha { --md: 4.5rem; }
.dif-fecho-texto p { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; }
.dif-fecho-texto p .realce { display: block; font-weight: 700; }
@media (min-width: 901px) { .dif-fecho { grid-template-columns: minmax(0, 1fr) auto; } }

/* ── Percurso · entenda → veja → aplique → teste (Academy page 2 · Insight page 2)
   Um fio continuo pelo centro dos medalhoes (regra 1.3), o numero pousado na
   base de cada um, e o passo APLIQUE em destaque: e onde o conhecimento vira
   pratica, e a especialista pediu que ele pesasse mais. */
.perc { --fl-md: 5.25rem; --fl-vao: 2rem; margin-top: .5rem; }
.perc .fluxo-no { gap: .5rem; }
.perc-num { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: -1.125rem;
            border-radius: var(--r-pill); background: var(--verde-profundo); color: var(--branco);
            font-size: var(--fs-xs); font-weight: 800; position: relative; z-index: 1; }
.perc .fluxo-nome { font-size: var(--fs-md); margin-top: .5rem; }
.perc-frase { font-size: var(--fs-md); font-weight: 700; color: var(--verde-forte); max-width: 16rem; text-wrap: balance; }
.perc .fluxo-texto { max-width: 16rem; }
.perc-destaque .medalha { --md: 6.25rem; background: var(--verde-forte); color: var(--branco);
                          box-shadow: 0 0 0 .375rem var(--branco), 0 0 0 1rem var(--verde-suave); }
.perc-destaque .perc-num { background: var(--verde-forte); }
.perc-destaque .fluxo-nome { color: var(--verde-forte); }
.perc-fecho { margin-top: 3rem; padding: 1.75rem 2rem; border-radius: var(--r); background: var(--fundo);
              display: grid; gap: 1.5rem; align-items: center; }
.band-alt .perc-fecho { background: var(--branco); border: 1px solid var(--linha); }
.perc-fecho-esq { display: flex; gap: 1.25rem; align-items: center; }
.perc-fecho-esq .medalha { --md: 4.5rem; }
.perc-fecho-esq b { display: block; font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.perc-fecho-esq p { font-size: var(--fs-md); color: var(--ink-2); margin-top: .375rem; }
.perc-fecho-dir { font-size: var(--fs-md); color: var(--ink-2); }
.perc-fecho-dir .realce { display: block; font-weight: 700; }
.perc-fecho-acao { display: grid; gap: .75rem; justify-items: start; }
.perc-fecho-nota { display: flex; gap: .5rem; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.perc-fecho-nota svg { width: 1.25rem; height: 1.25rem; color: var(--verde-forte); flex: none; }
.perc-fecho-nota b { color: var(--verde-forte); }
@media (min-width: 1000px) {
  .perc-fecho { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .perc-fecho > * + * { padding-left: 2rem; border-left: 1px solid var(--linha); }
}
@media (max-width: 700px) {
  .perc-num { display: none; }
  .perc-destaque .medalha { --md: 3.25rem; box-shadow: none; }
}

/* ── Proximos · "O que vem pela frente" (Academy) ────────────────────────────
   Faixa editorial, nao grade: a lista cresce sem redesenhar a pagina. */
.prox { display: grid; gap: 1.5rem; padding: 1.75rem 2rem; border-radius: var(--r); background: var(--branco);
        border: 1px solid var(--linha); align-items: center; }
.prox-texto { display: flex; gap: 1rem; align-items: center; }
.prox-texto .medalha { --md: 3.5rem; }
.prox-texto b { display: block; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; }
.prox-texto p { font-size: var(--fs-md); color: var(--ink-2); margin-top: .25rem; }
.prox-lista { display: grid; gap: .625rem; }
.prox-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding: .875rem 1rem;
                 border-radius: var(--r-sm); background: var(--fundo); font-weight: 700; }
.prox-lista .pill { margin-left: auto; }
.prox-nota { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .25rem; }
@media (min-width: 901px) { .prox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; } }

/* ── Setores · "Nao encontrou seu setor?" — fechamento editorial da grade ───── */
.setores-fecho { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--linha);
                 display: grid; gap: 1.5rem; align-items: center; }
.setores-fecho .secao-cabeca { margin-bottom: 0; max-width: 40rem; }
.setores-fecho .secao-titulo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
@media (min-width: 901px) { .setores-fecho { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }

/* ── Blog · destaque com imagem grande a direita (regra global de 04/09) ─────
   Conteudo a esquerda, imagem alinhada ao topo, proporcao quase vertical,
   sem distorcao. No celular a imagem desce para baixo do texto. */
.post-duo { display: grid; gap: 2rem; align-items: start; }
.post-imagem { display: block; border-radius: var(--r); overflow: hidden; background: var(--fundo); aspect-ratio: 1 / 1; }
.post-imagem img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (min-width: 901px) {
  .post-duo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; }
  .post-imagem { aspect-ratio: 4 / 5; }
}

/* ── SBCE · page 2: seu prazo depende do seu setor ─────────────────────────── */
.prazo-topo { display: grid; gap: 1.5rem; margin-bottom: 2rem; align-items: start; }
.prazo-topo .secao-cabeca { margin-bottom: 0; }
@media (min-width: 901px) { .prazo-topo { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; } }
.prazo-ref { display: inline-flex; align-items: center; gap: .625rem; padding: .875rem 1.25rem; border: 1px solid var(--verde);
             border-radius: var(--r-sm); background: var(--branco); color: var(--verde-forte); font-weight: 700; }
.prazo-ref svg { width: 1.25rem; height: 1.25rem; }
.prazo-ref:hover { background: var(--verde-suave); }
.prazo-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; }
.prazo-etapa { position: relative; display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem;
               padding: 1.5rem 1.375rem; border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); }
/* A barra de progresso do cronograma, em cima do cartao: 1/4 cheio na primeira
   etapa, 4/4 no "nao importa quando". */
.prazo-barra { position: absolute; left: 0; right: 0; top: -1rem; height: .4375rem; border-radius: 2px;
               background: var(--verde-suave); overflow: hidden; }
.prazo-barra::before { content: ""; display: block; height: 100%; width: calc(var(--p, 1) * 25%);
                       background: var(--verde-forte); border-radius: 2px; }
.prazo-etapa .medalha { --md: 3.25rem; }
.prazo-quando { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                color: var(--verde-forte); margin-top: .25rem; }
.prazo-etapa h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; text-wrap: balance; }
/* Um setor por linha, com icone, e o filete entre eles: e o desenho do mockup
   page3 e o que faz a pessoa achar o proprio setor sem ler a frase inteira. */
.prazo-setores { display: grid; gap: 0; flex: 1; align-content: start; }
.prazo-setores li { display: flex; align-items: center; gap: .625rem; padding: .4375rem 0;
                    border-bottom: 1px solid var(--linha); font-size: var(--fs-md); }
.prazo-setores li:last-child { border-bottom: 0; }
.prazo-setores svg { flex: none; color: var(--verde-forte); }
.prazo-texto { font-size: var(--fs-sm); color: var(--ink-2); }
/* O card EXPOSIÇÃO A AVALIAR (era "Outras operações", em âmbar): cinza
   NEUTRO desde 23/09. A cor diz que ele está fora da sequência do cronograma;
   âmbar lia como alerta, e a Daiane pediu que nada ali parecesse escala de
   risco. */
.prazo-etapa-outras { background: var(--neutro-suave); border-color: var(--neutro-linha); }
.prazo-etapa-outras .prazo-barra { background: var(--neutro-linha); }
.prazo-etapa-outras .prazo-barra::before { width: 100%; background: var(--neutro-barra); }
.prazo-etapa-outras .medalha { background: var(--branco); color: var(--ink-2); }
.prazo-etapa-outras .prazo-quando { color: var(--ink-2); }
.prazo-etapa-outras .btn { margin-top: auto; }
.prazo-mini { display: grid; gap: .375rem; margin: .25rem 0 1rem; }
.prazo-mini li { display: flex; align-items: center; gap: .5rem; padding: .4375rem .625rem;
                 border-radius: var(--r-sm); background: var(--branco);
                 font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
                 text-transform: uppercase; line-height: 1.2; }
.prazo-mini svg { flex: none; color: var(--ink-2); }
.prazo-fecho { margin-top: 1.5rem; display: flex; gap: .875rem; align-items: center;
               padding: 1.125rem 1.375rem; border-radius: var(--r-sm);
               background: var(--verde-suave); font-size: var(--fs-sm); color: var(--ink-2); }
.prazo-fecho svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--verde-forte); }
.prazo-fecho b { display: block; color: var(--ink); font-size: var(--fs-lg); margin-bottom: .125rem; }
.prazo-muda { margin-top: .5rem; padding-top: .875rem; border-top: 1px solid var(--linha); font-size: var(--fs-sm); color: var(--ink-2); }
.prazo-muda b { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                color: var(--verde-forte); margin-bottom: .25rem; }
.prazo-lista { display: grid; gap: .5rem; margin-top: .5rem; }
.prazo-lista li { display: flex; gap: .625rem; align-items: center; font-size: var(--fs-md); }
.prazo-lista svg { width: 1.25rem; height: 1.25rem; color: var(--verde-forte); flex: none; }
@media (min-width: 1000px) {
  .prazo-etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
  /* O disco com o bico entre uma etapa e a seguinte. A ultima coluna nao e
     etapa — e o que vale para todas —, e por isso nao recebe seta. */
  .prazo-etapa + .prazo-etapa:not(.prazo-etapa-fim)::before {
    content: ""; position: absolute; left: calc(-.875rem - .625rem); top: 50%; margin-top: -.625rem;
    width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--verde-forte); z-index: 1;
  }
  .prazo-etapa + .prazo-etapa:not(.prazo-etapa-fim)::after {
    content: ""; position: absolute; left: calc(-.875rem - .625rem + .4rem); top: 50%; margin-top: -.2rem;
    width: .3rem; height: .3rem; border-right: 2px solid var(--branco); border-bottom: 2px solid var(--branco);
    transform: rotate(-45deg); z-index: 2;
  }
}
/* A progressão do cronograma (23/09): próximo → intermediário → posterior
   em três verdes, do escuro ao claro, na barra, na medalha e no rótulo. A
   medalha passa a ser cheia com o ícone branco para a cor aparecer antes da
   leitura dos anos. */
.prazo-etapa { --prazo-tom: var(--verde-forte); --prazo-tom-txt: var(--verde-forte); }
.prazo-etapa:nth-child(1) { --prazo-tom: var(--verde-profundo); --prazo-tom-txt: var(--verde-profundo); }
.prazo-etapa:nth-child(3) { --prazo-tom: var(--verde);          --prazo-tom-txt: var(--prazo-3-txt); }
.prazo-etapa:not(.prazo-etapa-outras):not(.prazo-etapa-fim) .medalha { background: var(--prazo-tom); color: var(--branco); }
.prazo-etapa:not(.prazo-etapa-outras):not(.prazo-etapa-fim) .prazo-barra::before { background: var(--prazo-tom); }
.prazo-etapa:not(.prazo-etapa-outras):not(.prazo-etapa-fim) .prazo-quando,
.prazo-etapa:not(.prazo-etapa-outras):not(.prazo-etapa-fim) .prazo-muda b,
.prazo-etapa:not(.prazo-etapa-outras):not(.prazo-etapa-fim) .prazo-setores svg { color: var(--prazo-tom-txt); }
/* O fecho, "o preparo começa antes", em verde profundo: é a mensagem que
   atravessa as outras, e por isso a única caixa escura da fila. */
.prazo-etapa-fim { background: var(--verde-profundo); border-color: var(--verde-profundo); color: var(--branco); }
.prazo-etapa-fim .prazo-barra { background: var(--verde-profundo-2); }
.prazo-etapa-fim .prazo-barra::before { background: var(--verde-claro); }
.prazo-etapa-fim .medalha { background: var(--verde-profundo-2); color: var(--verde-claro); }
.prazo-etapa-fim .prazo-quando { color: var(--verde-claro); }
.prazo-etapa-fim .prazo-lista li { color: var(--on-deep-2); }
.prazo-etapa-fim .prazo-lista svg { color: var(--verde-claro); }

.prazo-nota { margin-top: 1.5rem; display: flex; gap: .875rem; align-items: center; padding: 1rem 1.25rem;
              border-radius: var(--r-sm); background: var(--fundo); font-size: var(--fs-sm); color: var(--ink-2); }
.prazo-nota b { display: block; color: var(--ink); font-size: var(--fs-md); margin-bottom: .125rem; }
.prazo-nota .medalha { --md: 2.5rem; flex: none; background: var(--branco); }
.sbce-caixa-lado { display: flex; gap: 1rem; align-items: flex-start; }
.sbce-caixa-lado .medalha { --md: 3rem; flex: none; }

/* ── SBCE · page 5: cartoes por setor ────────────────────────────────────── */
.sbce-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
@media (min-width: 800px)  { .sbce-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sbce-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sbce-card { grid-template-columns: auto minmax(0, 1fr); gap: .375rem 1rem; align-content: start; }
.sbce-card .medalha { --md: 4rem; grid-row: span 2; }
.sbce-card h3 { font-size: var(--fs-md); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; align-self: end; }
.sbce-card-rastreia { font-size: var(--fs-sm); color: var(--ink-2); }
.sbce-card-rastreia b { display: block; color: var(--verde-forte); margin-bottom: .125rem; }
.sbce-card-acao { grid-column: 1 / -1; margin-top: .5rem; padding-top: .875rem; border-top: 1px solid var(--linha); }
.sbce-aviso { margin-top: var(--gap); display: grid; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem;
              border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); }
@media (min-width: 901px) { .sbce-aviso { grid-template-columns: auto minmax(0, 1fr) auto; } }
.sbce-aviso .medalha { --md: 2.75rem; }
.sbce-aviso b { display: block; }
.sbce-aviso p { font-size: var(--fs-sm); color: var(--ink-2); }
.sbce-pe-nota { margin-top: 1.25rem; display: flex; gap: .625rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.sbce-pe-nota svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--verde-forte); }
.modal-setor h3 { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                  color: var(--verde-forte); margin: 1.25rem 0 .5rem; }
.modal-setor ul { display: grid; gap: .375rem; font-size: var(--fs-md); }
.modal-setor li { display: flex; gap: .625rem; }
.modal-setor li::before { content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--verde); margin-top: .6rem; }
.modal-setor p { font-size: var(--fs-md); }
.modal-setor p + p { margin-top: .5rem; }
.modal-setor-nota { margin-top: 1.25rem; padding: .875rem 1rem; border-radius: var(--r-sm); background: var(--fundo);
                    font-size: var(--fs-sm); color: var(--ink-2); }

/* ── SBCE · page 7: voce nao precisa trocar seus sistemas ─────────────────── */
.sist-topo { display: grid; gap: 1.5rem; margin-bottom: 2rem; align-items: start; }
.sist-topo .secao-cabeca { margin-bottom: 0; }
@media (min-width: 1000px) { .sist-topo { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: 2.5rem; } }
.sist-sub { font-size: var(--fs-lede); font-weight: 700; color: var(--verde-forte); }
.sist-fontes { padding: 1.25rem 1.5rem 1.5rem; border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); }
.sist-rotulo { text-align: center; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
               color: var(--verde-forte); margin-bottom: 1rem; }
.sist-fontes ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.sist-fontes li { display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; border-radius: var(--r-sm);
                  background: var(--fundo); border: 1px solid var(--linha); font-weight: 700; font-size: var(--fs-md); }
.sist-fontes svg { width: 1.375rem; height: 1.375rem; color: var(--verde-forte); flex: none; }
.sist-seta { display: grid; place-items: center; width: 2rem; height: 2rem; margin: .75rem auto; border-radius: 50%;
             background: var(--verde-forte); color: var(--branco); }
.sist-seta svg { width: 1rem; height: 1rem; }
.sist-nexta { display: grid; gap: 1.25rem; align-items: center; padding: 1.5rem 2rem; border-radius: var(--r);
              background: var(--verde-profundo); color: var(--verde-suave); }
.sist-nexta-marca img { height: 1.75rem; width: auto; }
.sist-nexta-rotulo { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                     color: var(--verde-claro); max-width: 12rem; line-height: 1.35; }
.sist-nexta .fluxo { --fl-md: 3rem; }
@media (min-width: 1000px) {
  .sist-nexta { grid-template-columns: auto auto minmax(0, 1fr); gap: 2rem; }
  .sist-nexta > * + * { padding-left: 2rem; border-left: 1px solid var(--linha-escura); }
}
.sist-baixo { display: grid; gap: var(--gap); margin-top: .25rem; }
@media (min-width: 1000px) { .sist-baixo { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.sist-result { padding: 1.25rem 1.5rem 1.5rem; border: 1px solid var(--linha); border-radius: var(--r); background: var(--branco); }
.sist-result ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.sist-result li { display: grid; gap: .375rem; align-content: start; padding: 1rem; border-radius: var(--r-sm);
                  background: var(--fundo); border: 1px solid var(--linha); }
.sist-result svg { width: 1.5rem; height: 1.5rem; color: var(--verde-forte); }
.sist-result b { font-size: var(--fs-md); }
.sist-result span { font-size: var(--fs-sm); color: var(--ink-2); }
.sist-cita { display: grid; gap: 1rem; align-content: center; padding: 2rem; border-radius: var(--r);
             background: var(--verde-profundo); color: var(--verde-suave); }
.sist-cita > svg { width: 2rem; height: 2rem; color: var(--verde-claro); }
.sist-cita p { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--branco); text-wrap: balance; }
.sist-cita p .realce { display: block; color: var(--verde-claro); }
.sist-cita a { justify-self: start; display: inline-flex; align-items: center; gap: .625rem; font-weight: 700; color: var(--branco); }
.sist-cita a .medalha { --md: 2rem; background: transparent; border: 1px solid var(--verde-claro); color: var(--verde-claro); }
.sist-cita a:hover { color: var(--verde-claro); }
.sist-pilares { list-style: none; margin: var(--gap) 0 0; padding: 0; display: grid; gap: 1rem; }
.sist-pilar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .875rem; align-items: start; }
.sist-pilar .medalha { --md: 2.75rem; background: var(--branco); border: 1px solid var(--linha); }
.sist-pilar b { display: block; font-size: var(--fs-md); }
.sist-pilar span { font-size: var(--fs-sm); color: var(--ink-2); }
@media (min-width: 901px) {
  .sist-pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .sist-pilar { padding-inline: 1.25rem; border-left: 1px solid var(--linha); }
  .sist-pilar:first-child { padding-left: 0; border-left: 0; }
}


/* ── Aviso de cookies (LGPD · Consent Mode v2) ───────────────────────────────
   A peça do mobwe.com.br com os tokens da Nexta (pedido do dono, 05/09). Barra
   ancorada no pé, largura de leitura, nunca a tela inteira: consentimento que
   sequestra a pagina e o padrao escuro que a LGPD existe para coibir — e quem
   nao consegue ler o site nao tem como decidir se confia nele.

   Entra deslizando de baixo, 300ms, e some do mesmo jeito. Sem JS ela nao
   aparece (nasce `hidden`), e esta certo: sem JS o Tag Manager tambem nao
   carrega, entao nao ha cookie de analise para consentir. */
.consent {
  position: fixed; left: var(--pad); right: var(--pad); bottom: var(--pad); z-index: 200;
  max-width: 52rem; margin-inline: auto;
  background: var(--verde-profundo); color: var(--verde-suave);
  border: 1px solid var(--linha-escura); border-radius: var(--r);
  box-shadow: 0 24px 60px -20px rgba(10, 43, 34, .6);
  opacity: 0; transform: translateY(1rem);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.consent[hidden] { display: none; }
/* Enquanto nao acendeu, nao clica: opacidade 0 continua recebendo clique, e
   uma barra invisivel no pe da tela roubaria o clique do que esta atras. */
.consent:not(.is-visivel) { pointer-events: none; }
.consent.is-visivel { opacity: 1; transform: none; pointer-events: auto; }
.consent-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.375rem; padding: 1.25rem 1.5rem; }
.consent-texto { flex: 1 1 16rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--on-deep-2); }
.consent-texto strong { display: block; color: var(--branco); font-size: var(--fs-md); margin-bottom: .1875rem; }
.consent-texto a { color: var(--verde-claro); text-decoration: underline; text-underline-offset: 2px; }
.consent-acoes { display: flex; gap: .625rem; flex-wrap: wrap; }
.consent .consent-btn { min-height: 2.5rem; padding-inline: 1.375rem; font-size: var(--fs-sm); }
/* O "Recusar" tem que ser tao facil de achar quanto o "Aceitar": botao de
   recusa escondido ou apagado e o dark pattern mais comum destes avisos. Muda
   a hierarquia (contorno x solido), nunca o tamanho nem a legibilidade. */
.consent .btn-contorno { background: transparent; color: var(--branco); border-color: var(--linha-escura); }
.consent .btn-contorno:hover { border-color: var(--verde-claro); color: var(--verde-claro); }
@media (max-width: 560px) {
  .consent-inner { flex-direction: column; align-items: stretch; }
  /* `flex: 1 1 16rem` em COLUNA vira 16rem de ALTURA, nao de largura: medido em
     375px, o texto ficava com 256px de caixa para 110px de conteudo e a barra
     inteira passava de 350px de altura. Em coluna o tamanho volta a ser o do
     conteudo. */
  .consent-texto { flex: 0 1 auto; }
  .consent-acoes { justify-content: flex-end; }
  .consent .consent-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; transform: none; }
}

/* =============================================================================
   Rodada 23/09 (Daiane) · a abertura nova da home e a altura dos heros
   ============================================================================= */

/* ── Altura de TODOS os heros · regra global ────────────────────────────────
   A home é a referência e as internas seguem o MESMO token: nenhuma página
   decide a própria altura. No laptop o hero ocupa a tela menos o cabeçalho
   (4,25rem + 1px de filete) e para em 42rem, para que num monitor alto a
   segunda seção já apareça sem rolar. Se o conteúdo não couber, quem cede é o
   respiro (padding menor em tela baixa), não a altura.
   No celular não há altura fixa: o hero cresce com o texto. */
:root { --hero-alt: clamp(32rem, calc(100svh - 4.25rem - 1px), 42rem); }
@media (min-width: 901px) {
  .hero { min-height: var(--hero-alt); display: flex; align-items: center;
          padding-block: clamp(2rem, 4.5svh, 3.5rem); }
  .hero > .container { width: 100%; }
}
/* Laptop de tela baixa (1366×768 dá ~657px úteis no navegador): o título de
   quatro linhas a 52px e a tela do produto na coluna larga passavam da dobra
   em sete páginas (medido em 28/09). Aqui cedem o respiro entre as linhas do
   texto, o corpo do título (que passa a acompanhar a altura da tela) e o
   TAMANHO da tela do produto, reduzida inteira por `zoom`.
   ⚠ Não estreitar a coluna do produto para isso: a tela reflui, os KPIs
   quebram em duas fileiras e o hero CRESCE (~870px, medido). */
@media (min-width: 901px) and (max-height: 760px) {
  .hero .hero-texto { gap: .875rem; }
  .hero .hero-titulo { font-size: clamp(2.25rem, 6.4svh, 3.25rem); }
  .hero [data-parallax] { zoom: .9; }
}
/* Desktop estreito (901–1180px): a coluna do produto fica com ~530px e a tela
   quebrava os KPIs em duas fileiras, com hero de ~800px. Com `zoom` a tela
   ganha espaço interno (530px viram ~660 no desenho dela) e para de refluir. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero [data-parallax] { zoom: .8; }
}
@media (max-width: 900px) {
  .hero { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3rem); }
}

/* ── Assinatura do hero · tecnologia · método · especialistas ──────────────
   Discreta e editorial, no pé do texto: um filete curto e três termos em
   caixa alta, cada um com o que faz embaixo. */
.hero-assinatura {
  list-style: none; margin: .5rem 0 0; padding: 1.25rem 0 0; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 40rem;
}
.hero-assinatura::before {
  content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 1px;
  background: currentColor; opacity: .45;
}
.hero-assinatura li { display: grid; gap: .3125rem; align-content: start; }
.hero-assinatura b { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-assinatura span { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }
.band-dark .hero-assinatura { color: var(--branco); }
.band-dark .hero-assinatura span { color: var(--on-deep-2); }
@media (max-width: 600px) {
  .hero-assinatura { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
}

/* ── Hero da home · o enquadramento da foto e o véu ─────────────────────────
   A foto (hero_inicial_fundo) tem a mulher entre 53% e 84% da largura e, à
   esquerda, uma parede de vidro com tela de floresta: é ali que o texto senta.
   `--txt-fim` é onde a coluna do texto termina (a margem do container mais os
   40rem dela), em qualquer largura de tela. O véu é denso até ali e abre logo
   depois, para a pessoa aparecer inteira.
   Entre 900 e 1280px a coluna do texto passaria por cima dela: a caixa da
   foto cresce para a DIREITA (right negativo), o que empurra a pessoa para
   fora do texto e corta só a cidade da borda.
   Contraste medido em 28/09 compondo a foto com este véu em Python (não
   amostrando a tela), de 901 a 2560px de largura e 657 a 1080 de altura,
   contra o pixel MAIS CLARO da coluna do texto: título 11,6:1, texto
   secundário (--on-deep-2) 6,7:1, realce verde 5,1:1. No celular, com o véu
   vertical da foto aberta: eyebrow 5,6:1, pé do hero 5,4:1. */
.hero-inicial { --txt-fim: calc(max(0px, (100% - 90rem) / 2) + var(--pad) + 40rem); }
.hero-inicial .hero-foto-img { right: min(0px, calc(100% - 80rem)); }
.hero-inicial .hero-foto-img img { object-position: 50% 30%; }
.hero-inicial::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--verde-profundo) 94%, transparent) 0,
    color-mix(in srgb, var(--verde-profundo) 90%, transparent) var(--txt-fim),
    color-mix(in srgb, var(--verde-profundo) 42%, transparent) calc(var(--txt-fim) + 6rem),
    color-mix(in srgb, var(--verde-profundo) 10%, transparent) calc(var(--txt-fim) + 16rem),
    transparent 100%);
}
@media (max-width: 900px) {
  .hero-inicial .hero-foto-img { right: 0; }
  .hero-inicial .hero-foto-img img { object-position: 66% 30%; }
}

/* ── Eyebrow com filete à esquerda (mockups da home de 23/09) ────────────── */
.eyebrow-filete { display: flex; align-items: center; gap: 1rem; }
.eyebrow-filete::before { content: ""; width: 3rem; height: 1px; background: currentColor; opacity: .5; flex: none; }

/* ── Necessidades · seis portas de entrada ──────────────────────────────────
   Cartão editorial, não grade de produto: fundo quase branco, sem sombra,
   ícone de traço, título curto e a seta num círculo embaixo. O cartão inteiro
   é o link; o hover acende a borda e a seta. */
.nec-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; margin-bottom: 2.5rem; }
.nec-topo .secao-cabeca { margin-bottom: 0; max-width: 52rem; }
.nec-topo .realce { display: block; }
.nec-lede { max-width: 17rem; padding-left: 1.5rem; border-left: 1px solid var(--linha);
            font-size: var(--fs-lg); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.nec-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.nec-grade > li { display: flex; }
.nec-porta {
  flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; gap: .75rem; align-content: start;
  padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--r); border: 1px solid transparent;
  background: var(--fundo); color: var(--ink); text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.nec-porta:hover { border-color: var(--verde-forte); transform: translateY(-2px); box-shadow: var(--sombra); }
.nec-ico { width: 2.5rem; height: 2.5rem; color: var(--verde-profundo); margin-bottom: .5rem; }
.nec-titulo { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.nec-texto { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.nec-seta {
  margin-top: .75rem; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--verde-profundo); color: var(--verde-profundo);
  display: grid; place-items: center; transition: background .2s, color .2s;
}
.nec-seta svg { width: 1.125rem; height: 1.125rem; }
.nec-porta:hover .nec-seta { background: var(--verde-forte); border-color: var(--verde-forte); color: var(--branco); }
@media (max-width: 1199px) { .nec-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .nec-topo { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .nec-lede { max-width: 32rem; }
}
@media (max-width: 700px) { .nec-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* No celular estreito o cartão deita: ícone à esquerda, texto no meio, seta à
   direita. Empilhado em pé, seis cartões virariam três telas de rolagem. */
@media (max-width: 480px) {
  .nec-grade { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .nec-porta { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
               column-gap: 1rem; row-gap: .25rem; padding: 1.125rem 1rem; align-items: center; }
  .nec-ico { grid-row: 1 / 3; width: 2rem; height: 2rem; margin: 0; }
  .nec-titulo { grid-column: 2; }
  .nec-texto { grid-column: 2; }
  .nec-seta { grid-column: 3; grid-row: 1 / 3; margin: 0; width: 2.25rem; height: 2.25rem; }
}

/* ── Começando · a porta da empresa pequena ─────────────────────────────────
   Tipográfico, na faixa verde muito suave. O filete vertical separa o convite
   das três mensagens; empilhado, ele deita. */
.comecando-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: center; }
.comecando-convite { display: grid; gap: 1rem; align-content: start; }
.comecando-convite .acoes { margin-top: .5rem; }
.comecando-itens {
  list-style: none; margin: 0; padding: .5rem 0 .5rem 3rem; border-left: 1px solid var(--linha);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem;
}
.comecando-itens li { display: grid; gap: .5rem; align-content: start; }
.comecando-itens svg { width: 2.25rem; height: 2.25rem; color: var(--verde-profundo); margin-bottom: .5rem; }
.comecando-itens h3 { font-size: var(--fs-base); font-weight: 700; line-height: 1.25; }
.comecando-itens p { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px) {
  .comecando-in { grid-template-columns: minmax(0, 1fr); }
  .comecando-itens { padding: 2rem 0 0; border-left: 0; border-top: 1px solid var(--linha); }
}
@media (max-width: 600px) { .comecando-itens { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }

/* ── Lista com "ver mais" (SBCE, setores · 23/09) ────────────────────────────
   Recolhe só com JS (nexta.js põe o data-recolhida); sem JS a lista é inteira
   e a linha do botão some junto com ele. */
[data-recolhida] > .mais-extra { display: none; }
.ver-mais-linha { margin-top: 1.5rem; display: flex; justify-content: center; }
.ver-mais-linha:has(> .ver-mais[hidden]) { display: none; }

/* ── Hero do SBCE compacto (23/09) ──────────────────────────────────────────
   Uma leitura vertical só, na altura da home. A coluna do texto alarga de
   40 para 46rem para a frase da lei (três limiares e uma ressalva) quebrar em
   menos linhas, e a nota de base desce um corpo. */
.hero-sbce { --txt-larg: 46rem; }   /* o véu aberto acompanha a coluna mais larga */
.hero-sbce .hero-in:has(> .hero-texto:only-child) { grid-template-columns: minmax(0, var(--txt-larg)); }
/* O título quebrava em quatro linhas a 52px; a 2,85rem cada metade cabe numa. */
.hero-sbce .hero-titulo { font-size: min(var(--fs-h1), 2.85rem); }
.hero-sbce .hero-lede { max-width: 44rem; }
.hero-sbce .hero-nota { max-width: 44rem; font-size: var(--fs-xs); }

/* ==========================================================================
   Nexta para Eventos · /eventos (05/10/2026)
   A landing reaproveita os blocos da casa (hero, argumento, diferenca,
   esteira, faq, cta). Só o bloco "a Nexta mede e relata" é próprio: três
   limites em linha sobre a faixa escura, o X em verde claro (acento legível
   sobre o escuro), a frase em destaque e a explicação logo depois.
   ========================================================================== */
.ancora { scroll-margin-top: 5rem; }
.eventos-limites { list-style: none; margin: 2rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem; }
.eventos-limites li { display: flex; gap: .75rem; align-items: flex-start; padding: 1.25rem;
  background: var(--verde-profundo-2); border-radius: 12px; line-height: 1.55; }
.eventos-limites svg { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; color: var(--verde-claro); margin-top: .1rem; }
.eventos-limites b { display: block; color: #fff; margin-bottom: .25rem; }
/* Seis regras do método: em tela larga, duas linhas de três (o auto-fit de
   15rem punha cinco numa linha e a sexta sozinha embaixo). */
@media (min-width: 900px) {
  .eventos-metodo .argumento-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}