/* CMS — site institucional. Tema escuro único, na paleta do logo. */

:root {
  --fundo: #0b0f14;
  --fundo-2: #0e131a;
  --superficie: rgba(255, 255, 255, 0.022);
  --superficie-solida: #111820;
  --borda: rgba(255, 255, 255, 0.08);
  --borda-forte: rgba(255, 255, 255, 0.14);
  --texto: #e8edf4;
  --texto-suave: #8c98a8;
  /* Paleta da XMII Consulting (xmiiconsulting.com). O peso visual do site deles é azul: o hero
     é um degradê #1c4264 -> preto, o cabeçalho e o rodapé são #1c4264 sólido, e os botões usam
     #034583. O verde #81d742 aparece só como marcador fino (traço antes dos títulos e sublinhado
     do menu) — aqui ele tem o mesmo papel, em --verde, e nunca vira cor de fundo ou de botão. */
  --acento: #4782a4;
  --acento-claro: #8fbcd8;
  --acento-fundo: #1c4264;
  --acento-fraco: rgba(71, 130, 164, 0.16);
  /* Traço do diagrama e da silhueta: um degrau acima do acento, senão some no painel escuro. */
  --diagrama: #5f9ec4;
  --diagrama-claro: #8fbcd8;
  --menta: #8fbcd8;
  --ciano: #8fbcd8;
  --azul: #034583;
  /* Marcador verde da XMII — uso pontual, nunca em área grande. */
  --verde: #81d742;
  --gradiente: linear-gradient(100deg, #4782a4 0%, #4782a4 100%);
  --sombra: 0 18px 44px -32px rgba(0, 0, 0, 0.9);
  --raio: 10px;
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 69px;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
}

h1 {
  font-size: clamp(1.6rem, 1.05rem + 1.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
}

h3 {
  font-size: 1.05rem;
}

p {
  margin: 0;
}

code {
  font-family: var(--mono);
  font-size: 0.82em;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

.realce {
  color: var(--acento-claro);
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--superficie-solida);
  z-index: 100;
}

.pular:focus {
  left: 12px;
  top: 12px;
}

/* ------------------------------------------------------------------ topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 10, 16, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}

.topo-linha {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  flex: none;
}

.marca img {
  border-radius: 9px;
}

.marca-texto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Assinatura ao lado do nome, na grafia do rodapé e do og:title. O filete de 1px separa sem
   pedir atenção — um traço ou um ponto no meio de uma barra que já tem menu, seletor, alerta e
   CTA vira mais um caractere disputando o olho. */
.marca-descritor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--texto-suave);
  white-space: nowrap;
}

.marca-descritor::before {
  content: '';
  width: 1px;
  height: 16px;
  background: var(--borda-forte);
}

.topo-nav {
  display: flex;
  gap: 18px;
  margin-right: auto;
  font-size: 0.94rem;
  white-space: nowrap;
}

.topo-nav a {
  color: var(--texto-suave);
  text-decoration: none;
  transition: color 0.15s;
}

.topo-nav a:hover {
  color: var(--texto);
}

/* Ação de alerta do cabeçalho: contorno âmbar, entre os links institucionais e o CTA. Fica no
   meio da hierarquia — mais visível que um link, menos que o botão de conversão.

   Duas correções aqui, e as duas se explicam pela mesma linha do CSS.

   O seletor é `.botao.botao-alerta`, e não `.botao-alerta`: as duas classes têm a mesma
   especificidade, e `.botao` vem DEPOIS neste arquivo com o atalho `border: 1px solid
   transparent`, que apaga qualquer `border-color` declarado antes. O contorno prometido no
   comentário nunca apareceu na tela — quem desenhava o botão era só o fundo âmbar. O estado
   `.ativo` escapava por ter duas classes, e por isso era o único com borda visível.

   E o fundo sai do estado de repouso: com fundo, borda e texto âmbar em 600, o aviso ganhava do
   CTA — o olho batia nele primeiro e na ação depois, que é a ordem inversa da que se quer. O
   preenchimento continua no hover e no estado aceso, onde significa alguma coisa. */
.botao.botao-alerta {
  border-color: rgba(240, 180, 41, 0.55);
  color: #f5c95f;
  background: transparent;
}

.botao.botao-alerta:hover {
  border-color: #f0b429;
  background: rgba(240, 180, 41, 0.14);
}

/* Aceso quando o leitor já está na landing do fim do SAP MII, ou enquanto a seção do assunto
   está sendo lida na home: preenchido em vez de contornado, e no âmbar, não no acento do site.
   Sem isto o botão fica idêntico ao de qualquer outra página e não há como saber que chegou. */
.botao.botao-alerta.ativo {
  border-color: #f0b429;
  background: rgba(240, 180, 41, 0.18);
  color: #ffd77a;
}

.botao-icone {
  display: inline-flex;
}

.botao-icone svg {
  width: 15px;
  height: 15px;
}

/* Seção que está sendo lida (marcada pelo site.js). */
.topo-nav a.ativo,
.menu-mobile a.ativo {
  color: var(--acento-claro);
}

.topo-nav a {
  position: relative;
  padding-bottom: 2px;
}

.topo-nav a.ativo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--acento);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Botão do topo é rótulo curto: ou cabe em uma linha, ou é o header que precisa ceder espaço.
   Sem isto, quando a barra aperta o texto quebra em duas linhas e o botão dobra de altura,
   estourando a faixa de 68px — foi o que aconteceu quando o descritor entrou ao lado da marca. */
.topo-acoes .botao {
  flex: none;
  white-space: nowrap;
}

/* Um pouco mais apertados que o compacto padrão: no topo eles dividem a barra com o menu, o
   seletor e a marca, e o espanhol tem os dois rótulos mais longos dos três idiomas. */
.topo-acoes .botao.compacto {
  padding: 8px 12px;
}

/* Os três controles da direita têm pesos diferentes de propósito — o CTA é a ação, o alerta é
   aviso e o idioma é ajuste. O que estava errado era a MEDIDA: o seletor media 31px de altura
   contra 40 dos dois botões, e a fileira lia como desalinhada em vez de hierarquizada. Alerta e
   seletor passam a dividir 36px, abaixo dos 40px do CTA: a diferença vira degrau, e não
   desencontro. Altura fixa, e não padding, porque os três têm fonte e conteúdo diferentes
   (sigla, ícone + rótulo, rótulo) e só a altura declarada os iguala de verdade. */
.topo-acoes .idiomas summary,
.topo-acoes .botao-alerta.compacto {
  height: 36px;
  padding-block: 0;
}

/* Seletor de idioma: um gatilho com o idioma atual (globo + sigla) que abre a lista dos três.
   O trio PT/EN/ES aberto ocupava um terço da barra de ações para uma escolha que o visitante faz
   no máximo uma vez — e disputava atenção com o alerta do SAP MII e o CTA, que é o que importa.

   A marcação é <details>/<summary>: abre sem JS e responde a teclado por conta do navegador. */
.idiomas {
  position: relative;
}

.idiomas summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  cursor: pointer;
  /* Esconde o triângulo nativo do <details> — a seta própria já indica o estado. */
  list-style: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.idiomas summary::-webkit-details-marker {
  display: none;
}

.idiomas summary:hover,
.idiomas[open] summary {
  color: var(--texto);
  border-color: var(--borda-forte);
  background: rgba(255, 255, 255, 0.05);
}

.idiomas-icone,
.idiomas-seta {
  display: inline-flex;
}

.idiomas-icone svg {
  width: 14px;
  height: 14px;
}

.idiomas-seta svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s;
}

.idiomas[open] .idiomas-seta svg {
  transform: rotate(180deg);
}

.idiomas-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 178px;
  padding: 6px;
  background: var(--superficie-solida);
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  box-shadow: var(--sombra);
}

.idiomas-lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--texto-suave);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.idiomas-lista a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--texto);
}

.idiomas-lista a.ativo {
  background: var(--acento-fraco);
  color: var(--acento-claro);
}

.idiomas-codigo {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 10px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 1.5px;
  background: var(--texto);
  border-radius: 2px;
}

.menu-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 22px;
  border-top: 1px solid var(--borda);
}

.menu-mobile a:not(.botao) {
  text-decoration: none;
  padding: 10px 0;
  color: var(--texto-suave);
}

/* Cada botão do menu mobile guarda a cor da própria variante — por isso a regra dos links
   acima ignora `.botao`. Sem o `:not`, o alerta do SAP MII herdava o texto escuro do CTA
   primário e sumia dentro do próprio fundo âmbar. */
.menu-mobile .botao {
  margin-top: 10px;
}

/* ----------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.botao-primario {
  background: var(--acento);
  color: #041c24;
}

.botao-primario:hover {
  background: #27b0da;
}

.botao-fantasma {
  border-color: var(--borda-forte);
  color: var(--texto);
}

.botao-fantasma:hover {
  background: rgba(255, 255, 255, 0.05);
}

.botao.compacto {
  padding: 8px 14px;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 64px;
  border-bottom: 1px solid var(--borda);
  /* Degradê do hero da XMII: azul-marinho no topo caindo para preto. Fica sob a malha técnica. */
  background-color: var(--fundo);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, #1c4264 0%, #12283c 45%, var(--fundo) 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  background-position: center top;
}

/* A malha não pode competir com o texto: some no centro e nas bordas. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 15%, rgba(10, 22, 34, 0.5) 30%, transparent 76%),
    linear-gradient(to bottom, transparent 62%, var(--fundo) 100%);
}

.hero > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* Sem movimento automático: a faixa vira uma linha que o usuário rola se quiser. */
  .protocolos-trilho {
    animation: none;
  }

  .protocolos-esteira {
    overflow-x: auto;
  }

  .protocolos-grupo[aria-hidden='true'] {
    display: none;
  }
}

.hero-fundo {
  position: absolute;
  inset: auto 0 0;
  height: clamp(110px, 15vw, 180px);
  pointer-events: none;
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%, #000);
  mask-image: linear-gradient(to bottom, transparent, #000 45%, #000);
}

.hero-fundo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fabrica {
  fill: none;
  stroke: var(--diagrama);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.22;
}

.hero .wrap {
  padding-bottom: 60px;
}

/* Hero sem o diagrama (página de parcerias): só texto, então ele mesmo precisa dar a altura
   que o desenho dava na home. */
.hero-simples .wrap {
  padding-block: 26px 76px;
}

.hero-simples .hero-texto {
  max-width: 76ch;
}

.hero-simples .hero-texto .lead + .lead {
  margin-top: 12px;
}

.hero-simples .frase-forte {
  margin-top: 26px;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 16px;
}

/* Sem largura máxima: título e subtítulo usam a coluna inteira e só quebram quando precisam. */
.hero-texto .lead {
  margin-top: 16px;
}

.lead {
  color: var(--texto-suave);
  font-size: 1.02rem;
}

/* --------------------------------------------------- hub do hero (camada CMS) */

/* O hero da home: texto à esquerda, desenho à direita. O desenho é quadrado, então
   ganha a coluna maior — e avança um pouco na margem, senão sobra vão à direita. */
.hero-hub .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: 16px;
  padding-block: 56px 64px;
}

.hero-hub .hero-texto h1 {
  font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.8rem);
  line-height: 1.12;
}

.hero-hub .hero-texto .lead {
  max-width: 46ch;
}

.hero-hub .hub-palco {
  margin: 0 -4% 0 0;
  position: relative;
}

/* Diferencial do produto logo abaixo dos botões. Marcador fino à esquerda, como a
   .frase-forte do resto do site — nada de pílula flutuante. */
.hero-ia {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 48ch;
  margin: 26px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--acento);
  font-size: 0.92rem;
  color: var(--texto-suave);
}

.hero-ia svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--acento-claro);
}

.hero-ia strong {
  color: var(--texto);
  font-weight: 600;
}

/* Só aparece em telas estreitas, onde o desenho rola na horizontal. */
.hub-dica {
  display: none;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--texto-suave);
  text-align: center;
}

.hub {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Halo do fundo atrás dos rótulos: eles cruzam fios e anéis o tempo todo. */
.hub text {
  paint-order: stroke fill;
  stroke: var(--fundo);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.hub-nucleo {
  fill: rgba(18, 40, 60, 0.95);
  stroke: var(--diagrama-claro);
  stroke-width: 1.4;
}

.hub-nucleo-titulo {
  fill: var(--texto);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hub-nucleo-linha {
  fill: var(--texto-suave);
  font-size: 12px;
}

/* A casca do CMS: faixa fechada de 360°, com peso próprio, entre o MES e o mundo. */
.hub-camada {
  filter: drop-shadow(0 0 16px rgba(71, 130, 164, 0.28));
}

.hub-faixa {
  fill: none;
  stroke: rgba(28, 66, 100, 0.62);
  stroke-width: 50;
}

.hub-faixa-borda {
  fill: none;
  stroke: var(--diagrama-claro);
  stroke-width: 1.2;
  opacity: 0.75;
}

/* Texto curvo cansa de ler: em vez do mono espaçado do resto do site, aqui vai a Inter
   em peso alto, espaçamento menor e frase curta. */
.hub-faixa-texto {
  fill: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  stroke: none;
}

.hub-faixa-texto-base {
  fill: var(--acento-claro);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.hub-anel-tracejado {
  fill: none;
  stroke: var(--diagrama);
  stroke-width: 1.1;
  stroke-dasharray: 3 12;
  opacity: 0.5;
  transform-origin: 450px 350px;
  animation: hubGirar 90s linear infinite;
}

.hub-no {
  fill: var(--superficie-solida);
  stroke: var(--borda-forte);
  stroke-width: 1;
}

.hub-icone {
  fill: none;
  stroke: var(--diagrama-claro);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-no-nome {
  fill: var(--texto);
  font-size: 13px;
  font-weight: 600;
}

.hub-no-detalhe {
  fill: var(--texto-suave);
  font-size: 11px;
}

.hub-fio {
  fill: none;
  stroke: var(--diagrama);
  stroke-width: 1.1;
  opacity: 0.6;
}

/* Tracejado = os dois lados trocam dados; sólido = só alimenta o CMS. */
.hub-fio-bi {
  stroke-dasharray: 5 4;
}

.hub-ponta {
  fill: var(--diagrama);
  stroke: none;
}

.hub-feixe path {
  fill: none;
  stroke: var(--diagrama);
  stroke-width: 1;
  opacity: 0.45;
}

.hub-protocolo {
  fill: var(--diagrama-claro);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-anchor: middle;
  opacity: 0.9;
}

.hub-pulso {
  fill: var(--verde);
  animation: hubPulso var(--dur) linear infinite;
  animation-delay: var(--atraso);
}

.hub-pulso-volta,
.hub-pulso-feixe {
  fill: var(--acento-claro);
}

.hub-painel rect {
  fill: rgba(11, 15, 20, 0.92);
  stroke: var(--borda-forte);
  stroke-width: 1;
}

.hub-painel-titulo {
  fill: var(--acento-claro);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hub-painel-divisor {
  stroke: var(--borda);
  stroke-width: 1;
}

.hub-tile-rotulo {
  fill: var(--texto-suave);
  font-size: 11px;
}

.hub-tile-valor {
  fill: var(--texto);
  font-size: 14px;
  font-weight: 600;
}

@keyframes hubGirar {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hubPulso {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-pulso,
  .hub-anel-tracejado {
    animation: none;
  }

  .hub-pulso {
    opacity: 0.9;
  }
}

/* ---------------------------------------------------- diagrama do hero */

.hero-diagrama {
  margin: 30px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Resumo visual ao lado do texto da resposta: quatro caixas, sem animação. */
.mii-resposta-corpo {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.mii-resposta-texto {
  display: grid;
  gap: 16px;
}

.diagrama-resumo {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, 0.02);
}

.diagrama-resumo svg {
  width: 100%;
  height: auto;
  display: block;
}

.r-caixa rect {
  fill: rgba(255, 255, 255, 0.03);
  stroke: var(--borda-forte);
  stroke-width: 1.2;
}

.r-caixa text {
  fill: var(--texto);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.r-destaque rect {
  fill: var(--acento-fraco);
  stroke: var(--acento);
  stroke-width: 1.4;
}

.r-destaque text {
  fill: var(--acento-claro);
}

.r-ligacao path {
  fill: none;
  stroke: var(--acento-claro);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bolinhas percorrendo as ligações em direção ao CMS, como no diagrama do hero. */
.r-pulsos circle {
  fill: var(--acento-claro);
  animation: fluirMini var(--dur) linear infinite;
  animation-delay: var(--atraso);
}

@keyframes fluirMini {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  18% {
    opacity: 0.95;
  }
  72% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-pulsos circle {
    animation: none;
    opacity: 0.6;
  }
}

/* Seletor de ERP do diagrama: troca o bloco central e esconde o que é só do mundo SAP. */
.diagrama-erp {
  display: flex;
  justify-content: center;
  gap: 2px;
  width: max-content;
  margin: 0 auto 14px;
  padding: 3px;
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.diagrama-erp button {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 16px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.diagrama-erp button:hover {
  color: var(--texto);
}

.diagrama-erp button[aria-pressed='true'] {
  background: rgba(255, 255, 255, 0.09);
  color: var(--texto);
}

/* O seletor tem três cenários: `so-<cenário>` marca o que é exclusivo de um deles e `so-erp`
   o que vale para SAP e TOTVS mas não para Indústria (que não tem ERP no topo). */
.hero-diagrama[data-erp='sap'] .so-totvs,
.hero-diagrama[data-erp='sap'] .so-industria,
.hero-diagrama[data-erp='totvs'] .so-sap,
.hero-diagrama[data-erp='totvs'] .so-industria,
.hero-diagrama[data-erp='industria'] .so-sap,
.hero-diagrama[data-erp='industria'] .so-totvs,
.hero-diagrama[data-erp='industria'] .so-erp {
  display: none;
}

.hero-diagrama svg {
  width: 100%;
  /* Abaixo disso os rótulos ficam ilegíveis: o container rola na horizontal. */
  min-width: 880px;
  height: auto;
  display: block;
}

.diagrama-dica {
  display: none;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

/* --- caixas, faixa e painel --- */

.d-bloco rect {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(71, 130, 164, 0.5);
  stroke-width: 1.2;
}

.d-titulo-bloco {
  fill: var(--texto);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-anchor: middle;
}

/* Nome do sistema de fábrica nos blocos de cima do cenário Indústria: menor que o do ERP,
   porque divide o bloco com o ícone. */
.d-titulo-sistema {
  fill: var(--texto);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Linhas de produto ao lado do nome do ERP (TOTVS), dentro do mesmo bloco. */
.d-bloco-produtos {
  fill: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.d-mini {
  fill: var(--texto-suave);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.d-mini-inicio {
  text-anchor: start;
}

.d-mini-fim {
  text-anchor: end;
}

.d-faixa rect {
  fill: rgba(255, 255, 255, 0.04);
  stroke: var(--diagrama);
  stroke-width: 1.3;
}

.d-faixa-texto {
  fill: var(--texto);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-anchor: middle;
}

.d-painel {
  fill: rgba(255, 255, 255, 0.025);
  stroke: var(--borda);
  stroke-width: 1;
}

.d-icone {
  fill: none;
  stroke: var(--diagrama);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d-rotulo {
  fill: var(--texto-suave);
  font-size: 12.5px;
  text-anchor: middle;
}

/* --- fios --- */

.d-fio {
  fill: none;
  stroke: rgba(71, 130, 164, 0.6);
  stroke-width: 1.4;
}

.d-ponta {
  fill: none;
  stroke: rgba(71, 130, 164, 0.8);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d-pulso {
  fill: var(--diagrama-claro);
}

/* --- animação de entrada: cada peça surge e cada fio se desenha --- */

.hero-diagrama .d-bloco,
.hero-diagrama .d-sistema,
.hero-diagrama .d-faixa,
.hero-diagrama .d-painel {
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: var(--atraso, 0ms);
}

.hero-diagrama .d-faixa {
  transform: scaleX(0.9);
  transform-origin: 600px 176px;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.hero-diagrama .d-painel {
  transition-delay: 900ms;
}

.hero-diagrama .d-fio {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  transition: stroke-dashoffset 0.55s ease;
  transition-delay: var(--atraso, 0ms);
}

.hero-diagrama .d-ponta {
  opacity: 0;
  transition: opacity 0.3s ease;
  transition-delay: calc(var(--atraso, 0ms) + 400ms);
}

.hero-diagrama .d-pulso {
  opacity: 0;
}

.hero-diagrama.animar .d-bloco,
.hero-diagrama.animar .d-sistema,
.hero-diagrama.animar .d-faixa,
.hero-diagrama.animar .d-painel,
.hero-diagrama.animar .d-ponta {
  opacity: 1;
}

.hero-diagrama.animar .d-faixa {
  transform: scaleX(1);
}

.hero-diagrama.animar .d-fio {
  stroke-dashoffset: 0;
}

/* Depois de conectar, os pulsos sobem pelos fios em loop — é o "está vivo" do desenho. */
.hero-diagrama.animar .d-pulso {
  animation: fluir 2.6s ease-in-out infinite;
  animation-delay: calc(var(--atraso, 0ms) + 700ms);
}

.hero-diagrama.animar .d-pulso-lado {
  animation-name: fluirLado;
}

@keyframes fluirLado {
  0% {
    opacity: 0;
    transform: translateX(var(--de));
  }
  12% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.9;
  }
  85%,
  100% {
    opacity: 0;
    transform: translateX(var(--ate));
  }
}

@keyframes fluir {
  0% {
    opacity: 0;
    transform: translateY(var(--de));
  }
  12% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.9;
  }
  85%,
  100% {
    opacity: 0;
    transform: translateY(var(--ate));
  }
}

.galeria figcaption {
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--texto-suave);
}

.faixa-protocolos {
  position: relative;
  display: flex;
  align-items: center;
  border-block: 1px solid var(--borda);
  background: var(--fundo-2);
  overflow: hidden;
}

/* Janela da esteira: o que passa disto fica escondido, e as máscaras laterais fazem os
   protocolos entrarem e saírem por fade em vez de serem cortados na borda da tela. */
.protocolos-esteira {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.protocolos-trilho {
  display: flex;
  width: max-content;
  animation: protocolos-desliza 45s linear infinite;
}

/* Pausa ao passar o mouse — quem quer ler um nome específico não precisa perseguir o texto. */
.faixa-protocolos:hover .protocolos-trilho {
  animation-play-state: paused;
}

.protocolos-grupo {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-block: 18px;
  padding-inline-end: 26px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* -25% = exatamente uma das quatro cópias, o que faz o ponto de reinício coincidir com o início. */
@keyframes protocolos-desliza {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

.faixa-protocolos span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.faixa-protocolos svg {
  width: 17px;
  height: 17px;
  color: var(--menta);
  opacity: 0.85;
  flex: none;
}

/* ----------------------------------------------------------------- seções */

.secao {
  padding-block: clamp(64px, 8vw, 108px);
}

.secao-destaque {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 70%);
  border-block: 1px solid var(--borda);
}

.secao-cabecalho {
  margin-bottom: 44px;
}

/* Sem largura máxima: o texto usa a coluna inteira e só quebra quando precisa. */
.secao-cabecalho .lead {
  margin-top: 16px;
}

.tag {
  position: relative;
  padding-left: 13px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 10px;
}

/* Traço verde antes do rótulo, como nos títulos do rodapé da XMII. */
.tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 3px;
  height: 0.9em;
  border-radius: 2px;
  background: var(--verde);
}

.nota {
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--texto-suave);
  border-left: 2px solid var(--borda-forte);
  padding-left: 14px;
}

/* Ação ao pé de uma seção — hoje só a de configuração assistida, que leva à documentação.
   Espaçamento igual ao da nota logo acima, para os dois lerem como um bloco só. */
.secao-acao {
  margin-top: 18px;
}

.nota a {
  color: var(--acento-claro);
}

.legenda {
  color: var(--texto-suave);
  font-size: 0.86rem;
  margin-top: 6px;
}

/* --------------------------------------------------------------- cartões */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
}

.cartao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--acento-claro);
}

.cartao-icone svg {
  width: 18px;
  height: 18px;
}

/* Ícone do protocolo, na primeira coluna da tabela de integrações. */
.icone-linha {
  display: inline-flex;
  margin-right: 9px;
  vertical-align: -3px;
  color: var(--menta);
  opacity: 0.85;
}

.icone-linha svg {
  width: 16px;
  height: 16px;
}

.cartao h3 {
  margin-bottom: 10px;
}

.cartao p {
  color: var(--texto-suave);
  font-size: 0.94rem;
}

.dupla,
.grade-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.dupla {
  margin-top: 26px;
}

.grade-2 {
  margin-top: 18px;
}

.grade-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

/* ------------------------------------------- apresentação da plataforma */

.apresentacao {
  padding-bottom: 52px;
  margin-bottom: 52px;
  border-bottom: 1px solid var(--borda);
}

/* Título e frase de abertura em largura cheia; abaixo, tela e texto lado a lado. */
.apresentacao-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin-top: 34px;
}

.apresentacao h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
}

.apresentacao-figura {
  margin: 0;
}

.apresentacao-figura img {
  width: 100%;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}

.apresentacao-figura figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.apresentacao-texto {
  display: grid;
  gap: 16px;
  align-content: start;
}

.apresentacao-texto p {
  color: var(--texto-suave);
  font-size: 0.97rem;
}

.frase-forte {
  max-width: 78ch;
  margin-top: 16px;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--texto) !important;
  border-left: 2px solid var(--acento);
  padding-left: 18px;
}

/* Dentro de um cartão a frase-forte é subtítulo, e vem texto logo abaixo — sem margem inferior os
   dois colam (o reset global zera a margem de <p>). Escopado ao cartão de propósito: nos outros
   usos (hero de parcerias, abertura da plataforma) ela é a última linha do bloco, e uma margem
   solta ali abriria um vão sem motivo. */
.cartao .frase-forte {
  margin-bottom: 14px;
  font-size: 1rem;
}

/* Na abertura da Plataforma a frase ocupa a largura toda do bloco — é o que o comentário do
   .apresentacao-corpo logo acima já promete ("título e frase de abertura em largura cheia"), e
   o `max-width: 78ch` genérico contradizia: a linha quebrava por volta de dois terços da coluna
   e sobrava um vão à direita, com a figura e o texto abaixo indo até a borda. O limite de medida
   continua valendo nos outros usos (hero de parcerias, destaque do MII, resumo em cartão), onde
   a frase é curta e o vão não aparece. */
.apresentacao > .frase-forte {
  max-width: none;
}

/* --------------------------------------------------------------- pilares */

.pilares {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  counter-reset: pilar;
}

.pilar {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 26px 22px;
}

/* O pilar "Transforma" é o diferencial do produto: ganha borda em gradiente e selo. */
.pilar-destaque {
  border-color: rgba(143, 188, 216, 0.35);
  background: rgba(71, 130, 164, 0.09);
}

.selo {
  position: absolute;
  top: -11px;
  left: 22px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 4px;
  color: #041c24;
  background: var(--acento);
}

.pilar-destaque::after {
  color: rgba(255, 255, 255, 0.3);
}

.pilar::after {
  counter-increment: pilar;
  content: counter(pilar, decimal-leading-zero);
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.18);
}

.pilar-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  margin-bottom: 16px;
  color: var(--acento-claro);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borda);
}

.pilar-icone svg {
  width: 21px;
  height: 21px;
}

.pilar p {
  margin-top: 10px;
  font-size: 0.94rem;
  color: var(--texto-suave);
  /* O texto de "Recebe" traz uma rota longa, que não pode vazar para o cartão vizinho. */
  overflow-wrap: anywhere;
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
}

.chips li {
  font-size: 0.74rem;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  background: rgba(255, 255, 255, 0.03);
}

/* ------------------------------- arquitetura (fecho da seção Plataforma) */

/* Repete o divisor que a abertura da seção já usa (.apresentacao, com filete embaixo):
   os três blocos da Plataforma — apresentação, cinco estágios e arquitetura — se leem
   como três partes do mesmo assunto, e não como seções empilhadas. */
.arquitetura {
  margin-top: 52px;
  padding-top: 52px;
  border-top: 1px solid var(--borda);
}

/* ------------------------------------------------------------------- MII */

/* Texto de abertura logo abaixo do título, antes do calendário. */
.mii-lead {
  margin-top: 16px;
}

/* Mesmo porte do título da estratégia da SAP, logo acima — os dois abrem blocos irmãos. */
.mii-resposta h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

/* A lâmpada marca a virada: até aqui é o problema, daqui em diante é a saída. */
.icone-ideia {
  display: inline-flex;
  flex: none;
  color: var(--acento-claro);
}

.icone-ideia svg {
  width: 21px;
  height: 21px;
}

/* A resposta do CMS fecha a área, depois do calendário e da estratégia da SAP. */
.mii-resposta {
  display: grid;
  gap: 16px;
  /* Sem filete: o título com a lâmpada já abre o bloco. */
  margin-top: 96px;
}

.mii-resposta p {
  color: var(--texto-suave);
  font-size: 0.97rem;
}

/* ------------------------------------ o que a SAP oferece no lugar do MII */

.estrategia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: start;
  /* Sem filete: o rótulo do bloco e o respiro já separam do calendário. */
  margin-top: 96px;
}

.estrategia-texto {
  display: grid;
  gap: 14px;
  align-content: start;
}

.estrategia-texto h3 {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.estrategia-texto p {
  color: var(--texto-suave);
  font-size: 0.97rem;
}

.estrategia-link {
  margin-top: 4px;
}

.estrategia-link a {
  color: var(--acento-claro);
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Depoimento: é a voz de quem trabalha com o produto, não mais um parágrafo do site. */
.estrategia-citacao {
  margin: 0;
  padding: 26px 28px;
  background: var(--acento-fraco);
  border: 1px solid var(--borda);
  border-left: 2px solid var(--acento);
  border-radius: var(--raio);
}

.estrategia-citacao blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--texto);
}

.estrategia-citacao blockquote::before {
  content: '“';
}

.estrategia-citacao blockquote::after {
  content: '”';
}

.estrategia-citacao figcaption {
  display: grid;
  gap: 2px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-size: 0.86rem;
}

.citacao-autor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.citacao-linkedin {
  display: inline-flex;
  color: var(--texto-suave);
  transition: color 0.15s;
}

.citacao-linkedin:hover {
  color: var(--acento-claro);
}

.citacao-linkedin svg {
  width: 16px;
  height: 16px;
}

.estrategia-citacao figcaption span {
  color: var(--texto-suave);
}

/* --------------------------------- consultoria e régua de clientes atendidos */

.consultoria {
  margin-top: 88px;
}

.consultoria h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.consultoria h4 .icone-titulo svg {
  width: 18px;
  height: 18px;
}

.consultoria p {
  color: var(--texto-suave);
  font-size: 0.97rem;
}

.consultoria a {
  color: var(--acento-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.clientes-titulo {
  margin-top: 26px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Régua contínua: a fita tem duas cópias da lista e desliza metade da largura. */
.clientes-regua {
  overflow: hidden;
  margin-top: 16px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.clientes-fita {
  display: flex;
  width: max-content;
  animation: desfilar 42s linear infinite;
}

.clientes-fita span {
  flex: none;
  padding: 12px 34px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--texto-suave);
  opacity: 0.55;
  white-space: nowrap;
}

/* Os logotipos vêm coloridos e de fundos diferentes: viram silhueta clara, todos iguais. */
.clientes-fita img {
  flex: none;
  height: 30px;
  width: auto;
  margin: 12px 34px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 0.2s;
}

.clientes-fita img:hover {
  opacity: 0.8;
}

.clientes-regua:hover .clientes-fita {
  animation-play-state: paused;
}

@keyframes desfilar {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clientes-fita {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ----------------------------------------------- assessment e migração */

/* Ícone ao lado do título da área — mesmo alinhamento da lâmpada na resposta do CMS. */
.assessment h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icone-titulo {
  display: inline-flex;
  flex: none;
  color: var(--acento-claro);
}

.icone-titulo svg {
  width: 21px;
  height: 21px;
}

.assessment {
  margin-top: 96px;
}

.assessment > h3,
.mii-fecho h3 {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  gap: 11px;
}

/* Diagnóstico primeiro, estratégias abaixo — a leitura acompanha a ordem do trabalho. */
.assessment-plano {
  margin-top: 44px;
}

.assessment .lead {
  font-size: 1rem;
  margin-bottom: 18px;
}

.lista-marcada {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.lista-marcada li {
  position: relative;
  padding-left: 26px;
  font-size: 0.94rem;
  color: var(--texto);
}

/* Marcador em losango, na cor da marca. */
.lista-marcada li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--acento);
}

/* O `min(320px, 100%)` no lugar de `320px` puro vale para todas as grades auto-fit do arquivo:
   o piso do minmax é um mínimo de verdade, então numa tela de 320px (o container fica em 272px,
   descontado o respiro do .wrap) a coluna insistia em 320px e empurrava a página 24px para fora,
   deixando o site arrastável na horizontal. Com o min() o piso cede quando não há largura. */
.estrategias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}

/* "Foco:" em destaque, a proposta em corpo maior e o comentário final em texto normal. */
.estrategia-foco {
  font-size: 0.9rem;
}

.estrategia-foco span {
  color: var(--acento-claro);
  font-weight: 600;
}

.estrategia-foco span::after {
  content: ':';
}

.estrategia-descricao {
  color: var(--texto) !important;
}

/* A opção recomendada ganha contorno e selo — é a que resolve o problema por inteiro. */
.estrategia-recomendada {
  position: relative;
  border-color: rgba(143, 188, 216, 0.5) !important;
  background: rgba(71, 130, 164, 0.06) !important;
}

.estrategias li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 24px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.estrategias h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.estrategias p {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--texto-suave);
}

.mii-fecho {
  margin-top: 52px;
  padding: 32px 34px;
  border-radius: var(--raio);
  border: 1px solid var(--borda-forte);
  background: var(--fundo-2);
  display: grid;
  gap: 14px;
}

.mii-fecho p {
  color: var(--texto-suave);
  font-size: 0.97rem;
}

/* --------------------------------------------------- cronologia do SAP MII */

.cronologia {
  margin-top: 34px;
}

.cronologia-titulo {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 28px;
}

.cronologia-marcos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

.marco {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: var(--atraso, 0ms);

  /* Cor do marco, sobrescrita por nível abaixo. */
  --cor: #a3e635;
}

.cronologia.animar .marco {
  opacity: 1;
  transform: none;
}

.marco.nivel-ok {
  --cor: #a3e635;
}

.marco.nivel-alerta {
  --cor: #f59e0b;
}

.marco.nivel-critico {
  --cor: #ef4444;
}

.marco-ano {
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.marco-rotulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor);
  margin-top: 4px;
}

.marco.nivel-ok .marco-rotulo {
  color: var(--texto-suave);
}

/* Faixa que carrega o segmento de trilho e o ponto do marco. */
.marco-ponto {
  position: relative;
  width: 100%;
  height: 30px;
  margin: 18px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marco-ponto::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--borda-forte);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s ease;
  transition-delay: var(--atraso, 0ms);
}

.cronologia.animar .marco-ponto::before {
  transform: scaleX(1);
}

.marco:first-child .marco-ponto::before {
  left: 50%;
}

.marco:last-child .marco-ponto::before {
  right: 50%;
}

.marco-ponto::after {
  content: '';
  position: relative;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: 0 0 0 5px var(--fundo), 0 0 18px -2px var(--cor);
}

/* O último marco fica pulsando — é o ponto que interessa ao visitante. */
.cronologia.animar .marco:last-child.nivel-critico .marco-ponto::after {
  animation: pulso 2.4s ease-out infinite;
}

@keyframes pulso {
  0% {
    box-shadow: 0 0 0 5px var(--fundo), 0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  70% {
    box-shadow: 0 0 0 5px var(--fundo), 0 0 0 16px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 5px var(--fundo), 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.marco p {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--texto-suave);
  max-width: 24ch;
  padding-inline: 10px;
}

.marco.nivel-critico p {
  color: var(--texto);
}

/* --------------------------------------------------------------- tabelas */

/* Faixa de reconhecimento: os nomes das tecnologias em uma cor só, sem logo colorido.
   Fica entre o texto da seção e a tabela — quem passa o olho reconhece as marcas antes de ler. */
.marcas {
  list-style: none;
  margin: 0 0 26px;
  padding: 16px 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}

.marcas li {
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--texto-suave);
  white-space: nowrap;
}

.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 620px;
}

.tabela th,
.tabela td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

.tabela thead th {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.025);
}

.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.tabela td {
  color: var(--texto-suave);
}

/* ----------------------------------------------------------- linha tempo */

/* Percurso da mensagem: seis etapas em trilha, cada uma com ícone, número e texto.
   A linha que liga os ícones some no último item de cada fileira. */
.linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px 28px;
}

.linha-tempo li {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
}

.linha-tempo .passo-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 50%;
  background: var(--fundo);
  color: var(--acento-claro);
}

.linha-tempo .passo-marca svg {
  width: 20px;
  height: 20px;
}

/* Trilha ligando um ícone ao próximo, atrás dos círculos. */
.linha-tempo li::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 52px;
  right: -28px;
  height: 1px;
  background: var(--borda-forte);
}

.linha-tempo li:last-child::before {
  display: none;
}

.linha-tempo .passo-numero {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--acento-claro);
}

.linha-tempo h3 {
  font-size: 1.02rem;
}

.linha-tempo p {
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--texto-suave);
}

/* Em três colunas, o item do fim de cada fileira não liga ao começo da seguinte.

   1004px é onde a terceira coluna realmente entra, e não um arredondamento: o auto-fit acima
   pede 300px por coluna com 28px de vão, ou seja 956px de conteúdo — mais os 48px de respiro
   do .wrap. O corte estava em 960px, e na faixa de 960 a 1003 a grade ainda tinha DUAS colunas
   enquanto estas regras escondiam o conector das posições 3, 6, 9: os itens 2, 4 e 6 ficavam
   com um traço apontando para fora da última coluna, que vazava 4px além da janela e deixava a
   página arrastável na horizontal. */
@media (min-width: 1004px) {
  .linha-tempo li:nth-child(3n)::before {
    display: none;
  }
}

@media (max-width: 1003px) {
  .linha-tempo li::before {
    display: none;
  }
}

/* -------------------------------------------------------------- recursos */

/* Subtítulo dentro de uma seção: separa dois blocos que pertencem ao mesmo assunto (os cartões
   dos módulos e os passos do assistente) sem abrir uma seção nova. */
.subtitulo-secao {
  margin: 46px 0 24px;
  font-size: 1.12rem;
  color: var(--acento-claro);
}

/* Os quatro passos do assistente de Packs cabem numa fileira só: com o auto-fit padrão (mínimo de
   300px) eles quebram em 3 + 1, o que sugere uma etapa destacada das outras — e não é o caso. */
.linha-tempo-passos {
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
  /* Mesmo respiro do subtítulo acima (46px): os passos e os cartões de diferencial são blocos
     distintos, e sem essa folga o texto do passo 04 encosta no cartão de baixo. */
  margin-bottom: 46px;
}

/* O conector da variante padrão some a cada 3 itens; aqui a fileira tem 4. */
@media (min-width: 1101px) {
  .linha-tempo.linha-tempo-passos li:nth-child(3n)::before {
    display: block;
  }

  .linha-tempo.linha-tempo-passos li:nth-child(4n)::before {
    display: none;
  }
}

@media (max-width: 1100px) {
  .linha-tempo-passos {
    grid-template-columns: repeat(2, 1fr);
  }

  .linha-tempo.linha-tempo-passos li:nth-child(2n)::before {
    display: none;
  }
}

@media (max-width: 620px) {
  .linha-tempo-passos {
    grid-template-columns: 1fr;
  }
}

/* Ponte entre a seção de Integrações e a de Packs SAP. */
.chamada-packs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 42px;
  padding: 28px 26px 24px;
  /* Mesmo tratamento do pilar em destaque: borda e fundo com o acento, para o bloco se destacar
     do resto da seção sem virar um banner. */
  border: 1px solid rgba(143, 188, 216, 0.35);
  border-radius: 16px;
  background: rgba(71, 130, 164, 0.09);
}

.chamada-packs h3 {
  margin: 0 0 6px;
}

.chamada-packs p {
  margin: 0;
  max-width: 62ch;
  color: var(--texto-suave);
}

/* Faixa de números da seção de Packs SAP: quatro medidas curtas que respondem "quanto disso já
   vem pronto?" antes do texto. */
.grade-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 18px;
  margin: 6px 0 34px;
}

.numero {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--fundo);
}

.numero strong {
  font-size: 2rem;
  line-height: 1;
  color: var(--acento-claro);
  font-variant-numeric: tabular-nums;
}

.numero span {
  font-size: 0.86rem;
  color: var(--texto-suave);
}

.grade-recursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}

.cartao-recurso h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
}

/* Marca do produto em traço, como marcador do grupo — no verde da identidade. */
.marca-grupo {
  display: inline-flex;
  flex: none;
  color: var(--acento-claro);
}

.marca-grupo svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.3;
}

.mii-fecho .marca-grupo svg {
  width: 21px;
  height: 21px;
}

.lista-recursos {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.lista-recursos li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.9rem;
}

.lista-recursos li > div {
  display: grid;
  gap: 2px;
}

/* Mesmo ícone que a tela tem no menu do sistema. */
.icone-recurso {
  display: inline-flex;
  flex: none;
  margin-top: 3px;
  color: var(--menta);
  opacity: 0.8;
}

.icone-recurso svg {
  width: 15px;
  height: 15px;
}

.lista-recursos strong {
  font-weight: 600;
}

.lista-recursos span {
  color: var(--texto-suave);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------- galeria */

.galeria-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.galeria-abas button {
  font: inherit;
  font-size: 0.84rem;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.galeria-abas button:hover {
  color: var(--texto);
  border-color: var(--borda-forte);
}

.galeria-abas button[aria-selected='true'] {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--borda-forte);
  color: var(--texto);
}

.galeria-palco figure {
  margin: 0;
}

.galeria-palco img {
  border-radius: var(--raio);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra);
  width: 100%;
}

/* ------------------------------------------------ ampliar imagem (site.js) */

/* O botão é só o embrulho da captura: sem cor, sem borda e sem espaço próprio, para a imagem
   continuar exatamente como a seção a desenhava. Ele é criado pelo site.js, então estas regras
   só valem onde o clique funciona de verdade. */
.ampliar {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}

.ampliar:focus-visible {
  outline: 2px solid var(--acento-claro);
  outline-offset: 3px;
}

.ampliar-selo {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--borda-forte);
  background: rgba(11, 15, 20, 0.74);
  color: var(--texto);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s, transform 0.16s;
}

.ampliar-selo svg {
  width: 17px;
  height: 17px;
}

.ampliar:hover .ampliar-selo,
.ampliar:focus-visible .ampliar-selo {
  opacity: 1;
  transform: none;
}

/* Sem hover não há como revelar a lupa no gesto: no toque ela fica sempre visível. */
@media (hover: none) {
  .ampliar-selo {
    opacity: 1;
    transform: none;
  }
}

/* A caixa se ajusta à imagem (width: fit-content), e a imagem nunca passa do tamanho real —
   nada de width: 100% aqui, que esticaria uma captura de 1600px numa tela maior e a deixaria
   borrada justamente onde se quer ler o texto miúdo. */
.visualizador {
  width: fit-content;
  max-width: 96vw;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  overflow: visible;
  /* O clique aqui é o clique fora da imagem — o site.js fecha, e o cursor avisa disso. */
  cursor: zoom-out;
}

.visualizador::backdrop {
  background: rgba(5, 8, 12, 0.94);
  /* O texto da página atrás competia com a legenda da imagem; o desfoque o tira do caminho
     sem escurecer mais o fundo. Navegador que não suporta fica só com o escurecimento. */
  backdrop-filter: blur(6px);
}

.visualizador-palco {
  display: grid;
  gap: 12px;
  margin: 0;
  cursor: default;
}

.visualizador-quadro img {
  width: auto;
  max-width: 100%;
  /* Desconta a legenda e o respiro, senão a imagem alta empurra o texto para fora da tela. */
  max-height: calc(94vh - 66px);
  margin-inline: auto;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}

.visualizador-palco figcaption {
  font-size: 0.86rem;
  color: var(--texto-suave);
  text-align: center;
}

.visualizador-palco figcaption strong {
  color: var(--texto);
}

/* position: fixed dentro de um <dialog> modal se apoia na janela — o botão fica no mesmo canto
   com qualquer tamanho de imagem. É por isso que a animação de entrada mexe no palco, e não no
   <dialog>: um transform no ancestral roubaria essa âncora. */
.visualizador-fechar {
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-solida);
  color: var(--texto);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.visualizador-fechar:hover {
  background: #18202a;
  border-color: var(--acento);
}

.visualizador-fechar svg {
  width: 18px;
  height: 18px;
}

.visualizador[open],
.visualizador[open]::backdrop {
  animation: visualizador-surgir 0.16s ease-out;
}

.visualizador[open] .visualizador-palco {
  animation: visualizador-crescer 0.2s ease-out;
}

@keyframes visualizador-surgir {
  from {
    opacity: 0;
  }
}

@keyframes visualizador-crescer {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

/* A regra geral do fim do arquivo desliga transições, não animações. */
@media (prefers-reduced-motion: reduce) {
  .visualizador[open],
  .visualizador[open]::backdrop,
  .visualizador[open] .visualizador-palco {
    animation: none;
  }
}

/* Com o visualizador aberto a página de trás não rola: o <dialog> modal prende o foco, mas não
   a roda do mouse. O gutter reservado evita o salto de layout quando a barra some. */
html.com-visualizador {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* No celular a tela do sistema não cabe: reduzida à largura do aparelho ela fica ilegível, que é
   o oposto do que o clique promete. Então ali a captura é mostrada pela ALTURA da tela e se
   arrasta na horizontal — dá para ler o painel percorrendo-o, como num mapa. A legenda fica fora
   do quadro que rola, senão sai de vista junto com a imagem. */
@media (max-width: 680px) {
  .visualizador {
    width: 100vw;
    max-width: 100vw;
  }

  .visualizador-quadro {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .visualizador-quadro img {
    width: auto;
    max-width: none;
    height: 76vh;
    max-height: none;
    margin-inline: 0;
  }

  .visualizador-fechar {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }
}

/* ------------------------------------------------------------- segurança */

/* Número em destaque na fileira. Sóbrio de propósito: borda de acento e fundo um degrau acima,
   sem cor de preenchimento chapada nem selo — o que precisa saltar é o algarismo, não a caixa. */
.numero-destaque {
  border-color: var(--acento);
  background: var(--acento-fraco);
}

.numero-destaque strong {
  color: var(--acento-claro);
}

/* Captura de tela ocupando a largura da seção, entre os números e os cartões. Usada nas duas
   seções de IA (o Agente e a configuração assistida): mostrar a tela do produto vale mais que
   qualquer ilustração de IA, e é a única prova visual de que aquilo existe. `data-ampliavel` no
   <figure> é o que faz o site.js abrir a imagem no visualizador, igual à galeria de telas. */
.figura-secao {
  margin: 0 0 44px;
}

.figura-secao img {
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.figura-secao figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--texto-suave);
  text-align: center;
}

/* Link do bloco de migração para a seção de preço. Fica logo abaixo das duas estratégias, que
   é onde o leitor acabou de escolher um caminho e pensa em quanto custa. Âncora direta porque
   `assessment` só é montado na home — fora dela a seção #precos não existe. */
.assessment-preco {
  margin: 22px 0 0;
}

.assessment-preco a {
  color: var(--acento-claro);
  font-weight: 600;
}

/* Modelo de preço. Seis itens de propósito: fecham 3+3 acima de 1024px e 2+2+2 até 560px, então
   não precisam do remendo de ::after que a grade de Segurança carrega para a linha incompleta. */
.grade-preco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 28px 34px;
}

.grade-preco article {
  padding-top: 18px;
  border-top: 1px solid var(--borda);
}

.grade-preco h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.grade-preco p {
  margin: 0;
  color: var(--texto-suave);
}

/* A exceção declarada. Ganha o acento na borda porque é o item que sustenta a credibilidade do
   resto: quem diz o que NÃO está incluído é lido como quem não está escondendo o resto. */
.preco-excecao {
  margin-top: 42px;
  padding: 22px 26px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio);
}

.preco-excecao h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.preco-excecao p {
  margin: 0;
  color: var(--texto-suave);
}

.preco-fecho {
  margin-top: 26px;
  color: var(--texto-suave);
}

.preco-fecho a {
  color: var(--acento-claro);
  white-space: nowrap;
}

.grade-seguranca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 30px 34px;
}

.grade-seguranca article {
  padding-top: 20px;
  border-top: 1px solid var(--borda);
  position: relative;
}

/* A régua de cima é o que separa uma linha da outra, e a última linha nem sempre fecha: a grade
   dá três colunas acima de 1024px, duas até 560px, e a contagem de itens não acompanha as duas.
   Quando sobra célula, a régua morre no meio da linha e o vazio ao lado fica sem nada em cima.
   O ::after do último item cobre exatamente as células que sobraram — as larguras abaixo repetem
   a geometria da grade (colunas de 1fr, gap de 34px), e por isso os dois valores andam juntos. */
.grade-seguranca article:last-child::after {
  content: '';
  position: absolute;
  top: -1px;
  left: calc(100% + 34px);
  border-top: 1px solid var(--borda);
}

@media (min-width: 1024px) {
  /* sobrou uma célula (o último item caiu na 2ª coluna) */
  .grade-seguranca article:last-child:nth-child(3n + 2)::after {
    width: 100%;
  }

  /* sobraram duas (o último item abriu a linha sozinho) */
  .grade-seguranca article:last-child:nth-child(3n + 1):not(:first-child)::after {
    width: calc(200% + 34px);
  }
}

@media (min-width: 560px) and (max-width: 1023.98px) {
  .grade-seguranca article:last-child:nth-child(2n + 1):not(:first-child)::after {
    width: 100%;
  }
}

.grade-seguranca p {
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------------- CTA */

.secao-cta {
  border-top: 1px solid var(--borda);
}

.contato-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.contato-texto .lead {
  margin-top: 18px;
}

.contato-texto .nota {
  margin-top: 26px;
}

/* ------------------------------------------------------------ formulário */

/* Telefone, e-mail e endereço ao lado do formulário. */
.contato-texto h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contato-texto h2 .icone-titulo svg {
  width: 24px;
  height: 24px;
}

.contato-dados {
  display: grid;
  gap: 20px;
  margin: 34px 0 0;
}

.contato-dados dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 5px;
}

.contato-dados dd {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
}

.contato-dados a {
  color: var(--acento-claro);
  text-decoration: none;
}

.contato-dados a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  background: var(--superficie-solida);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 28px;
}

/* Título do formulário: ícone colado ao texto, e não nas pontas do grid. */
.formulario h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.formulario h3 .icone-titulo svg {
  width: 19px;
  height: 19px;
}

.formulario h3,
.formulario .legenda,
.campo-largo,
.campo-caixa,
.formulario button,
.form-aviso,
.form-privacidade {
  grid-column: 1 / -1;
}

.formulario .legenda {
  margin-top: -8px;
}

.campo {
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--texto-suave);
}

.campo em {
  font-style: normal;
  opacity: 0.7;
}

.campo input,
.campo textarea,
.campo select {
  font: inherit;
  font-size: 0.94rem;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px 13px;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}

.campo textarea {
  resize: vertical;
  min-height: 96px;
}

/* A lista aberta é desenhada pelo sistema, não pelo site: sem cor explícita, o texto das
   opções sai preto sobre preto em alguns navegadores. */
.campo select option {
  background: var(--superficie-solida);
  color: var(--texto);
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-color: var(--acento);
  background: rgba(255, 255, 255, 0.06);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: rgba(150, 165, 186, 0.6);
}

.campo-caixa {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--texto-suave);
  cursor: pointer;
}

.campo-caixa input {
  width: 17px;
  height: 17px;
  accent-color: var(--acento);
}

/* Armadilha de bot: fora da tela, mas não display:none — alguns robôs ignoram o que está oculto. */
/* O hCaptcha desenha uma borda clara dentro do próprio iframe, que é de outro domínio e não
   aceita CSS nosso. A saída é recortar: o container esconde 1px de cada lado e devolve o
   arredondamento no tom do site. */
.h-captcha {
  width: 300px;
  max-width: 100%;
  height: 74px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--fundo-2);
}

.h-captcha iframe {
  margin: -1px;
}

.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario button {
  margin-top: 4px;
  cursor: pointer;
}

.formulario button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-aviso {
  font-size: 0.88rem;
  padding: 10px 14px;
  border-radius: 10px;
}

.form-aviso.ok {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.form-aviso.erro {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.form-privacidade {
  font-size: 0.76rem;
  color: var(--texto-suave);
  opacity: 0.8;
}

/* ------------------------------------------------ programa de parceiros */

/* Formas de atuar como parceiro. Numeradas porque são uma escada — indicar, comercializar,
   implantar, construir —, não quatro opções soltas.
   Colunas fixas em vez de auto-fit: com quatro itens o encaixe automático quebra 3 + 1 assim
   que a tela aperta, e sobra um órfão na segunda fileira. */
.parceria-modos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.parceria-modos li {
  position: relative;
  padding: 24px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.parceria-modos .modo-numero {
  position: absolute;
  top: 24px;
  right: 22px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
  opacity: 0.6;
}

.parceria-modos h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.parceria-modos p {
  font-size: 0.92rem;
  color: var(--texto-suave);
}

/* Os quatro benefícios, no traço fino da seção de segurança — mesma razão das colunas fixas. */
.parceria-beneficios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.parceria-beneficios article {
  padding-top: 20px;
  border-top: 1px solid var(--borda);
}

.parceria-beneficios p {
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--texto-suave);
}

/* Fecho da página: a frase que resume a proposta, com o botão logo abaixo. */
.parceria-fecho {
  margin-top: 56px;
  padding: 36px clamp(24px, 4vw, 44px);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 2px solid var(--acento);
  border-radius: var(--raio);
}

.parceria-fecho h2 {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  line-height: 1.25;
  max-width: 26ch;
}

.parceria-fecho p {
  margin-top: 14px;
  color: var(--texto-suave);
  max-width: 62ch;
}

.parceria-fecho .botao {
  margin-top: 12px;
}

/* ------------------------------------------- página de texto (política de privacidade) */

.pagina-texto .secao {
  padding-block: 56px 80px;
}

.texto-legal {
  max-width: 860px;
}

.texto-legal h1 {
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.1rem);
  margin-bottom: 16px;
}

.texto-legal .lead {
  margin-bottom: 10px;
}

.texto-legal section {
  margin-top: 40px;
}

.texto-legal h2 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.texto-legal p {
  color: var(--texto-suave);
  font-size: 0.97rem;
}

.texto-legal section p + p {
  margin-top: 12px;
}

.texto-legal a {
  color: var(--acento-claro);
}

/* Prosa corrida da landing do fim do SAP MII. Existe porque o reset global zera a margem de
   <p> (ver `p { margin: 0 }` no topo): sem uma regra de espaçamento, parágrafos seguidos saem
   colados.
   Sem max-width: a citação assinada no meio do bloco ocupa a largura toda, e limitar só os
   parágrafos deixava um degrau à direita que fazia o texto parecer cortado. A medida de leitura
   já vem do .wrap da seção. */
.texto-corrido {
  display: grid;
  gap: 16px;
  color: var(--texto-suave);
}

/* Caminhos do fim do SAP MII: dois por linha. Como são cinco, o último ficaria sozinho com um
   buraco ao lado — então ele ocupa a linha inteira. O seletor mira "último E em posição ímpar",
   o que cobre qualquer quantidade ímpar: com um sexto caminho a grade volta a fechar 2x3
   sozinha, sem ninguém precisar lembrar de mexer aqui. */
.grade-caminhos > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Selo de veredito de cada caminho. O .selo se posiciona sobre a borda superior do cartão, o que
   exige um ancestral posicionado — é só para isso que este position existe. */
.cartao-caminho {
  position: relative;
}

/* Cores por veredito. O verde de acento (.selo puro) fica para "recomendado": é o único que deve
   puxar o olho. Os demais descem a temperatura conforme a recomendação enfraquece. */
/* "Avaliar caso" é ausência de veredito, não um veredito morno — então não recebe cor nenhuma.
   Fundo sólido e não transparente porque o selo fica em cima da borda do cartão: com fundo
   translúcido a linha da borda atravessaria a etiqueta. */
.selo-avaliar {
  background: var(--superficie-solida);
  border: 1px solid var(--borda-forte);
  color: var(--texto-suave);
  padding: 3px 10px;
}

.selo-parcial {
  background: #f0b429;
  color: #2b1d00;
}

.selo-nao {
  background: #b4553f;
  color: #fff1ec;
}

/* Caminho em destaque — mesmo tratamento do "recomendado" das estratégias na home, para o leitor
   reconhecer o padrão em vez de aprender um novo. */
.cartao-destaque {
  border-color: rgba(143, 188, 216, 0.5);
  background: rgba(71, 130, 164, 0.06);
}

/* FAQ em acordeão. O <details> nativo resolve abrir/fechar sem JavaScript — e mantém a resposta
   no HTML, que é o que o FAQPage do schema.org exige e o que o Google lê. */
.faq-lista {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.faq-item {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0 22px;
}

/* O <h3> vive dentro do <summary> para manter a hierarquia de títulos; aqui ele volta ao peso de
   texto de interface, senão a lista inteira vira uma sequência de manchetes.
   `margin-right: auto` empurra o sinal de +/− para a ponta direita: o summary é flex, e sem isto
   o ícone, o título e o sinal ficariam agrupados à esquerda. */
.faq-item summary h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 auto 0 0;
}

.faq-icone {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--acento-claro);
}

.faq-icone svg {
  width: 18px;
  height: 18px;
}

/* A resposta se alinha ao título, não à borda do cartão: sem este recuo ela passaria por baixo
   do ícone e a coluna de texto ficaria desalinhada da pergunta. */
.faq-item .faq-resposta {
  padding-left: 34px;
}

/* Botão dentro da última resposta, levando ao formulário do inventário. Mesmo recuo da resposta
   para a coluna de texto não quebrar. */
.faq-acao {
  padding: 0 0 22px 34px;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-weight: 600;
  color: var(--texto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Some com o triângulo padrão (Chrome/Safari usam ::-webkit-details-marker, Firefox usa
   list-style) para o sinal de + desenhado abaixo ficar sozinho. */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--acento-claro);
}

/* Cruz que vira traço quando aberto: dois retângulos girados, sem imagem nem fonte de ícone. */
.faq-sinal {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.faq-sinal::before,
.faq-sinal::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--acento);
  transition: transform 0.2s ease;
}

.faq-sinal::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-sinal::after {
  transform: rotate(0deg);
}

.faq-item[open] summary {
  color: var(--acento-claro);
}

/* Sem max-width: a pergunta ocupa a linha inteira do acordeão, e uma resposta cortada em 70ch
   deixava uma faixa vazia à direita que fazia o bloco parecer quebrado. Aqui a medida de leitura
   já vem limitada pelo próprio container da seção. */
.faq-item .faq-resposta {
  padding: 0 0 20px;
  color: var(--texto-suave);
}

/* Bloco de download liberado depois do envio do formulário de inventário.
   O `:not([hidden])` não é enfeite: o atributo `hidden` vale por `display: none` vindo da folha
   do navegador, que perde para qualquer `display` declarado aqui. Sem a guarda, o bloco nasceria
   visível e entregaria o arquivo sem ninguém preencher nada. */
.form-baixar:not([hidden]) {
  display: grid;
  gap: 8px;
  justify-items: start;
}

/* ------------------------------------------------------- aviso de cookies */

.cookies {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 26px;
  max-width: 1180px;
  margin-inline: auto;
  padding: 18px 22px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie-solida);
  box-shadow: var(--sombra);
}

.cookies p {
  font-size: 0.92rem;
  color: var(--texto-suave);
}

.cookies a {
  color: var(--acento-claro);
}

.cookies-acoes {
  display: flex;
  gap: 10px;
}

/* ---------------------------------------------------------------- rodapé */

.rodape {
  border-top: 1px solid var(--borda);
  background: var(--fundo-2);
  padding-top: 64px;
}

.rodape-grade {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 36px 28px;
  padding-bottom: 44px;
}

.rodape-grade > div p {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--texto-suave);
  max-width: 34ch;
}

.rodape-nome {
  margin-top: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 600;
  color: var(--texto) !important;
}

.rodape-grade > div .rodape-nome + p {
  margin-top: 4px;
}

.rodape h2 {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 14px;
}

.rodape ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.rodape a {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--texto);
  opacity: 0.85;
}

.rodape a:hover {
  opacity: 1;
}

.rodape-base {
  border-top: 1px solid var(--borda);
  padding-block: 22px 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.aviso {
  max-width: 62ch;
}

/* -------------------------------------------------------------- responsivo */

/* Com o item de Parcerias o menu passou a ocupar quase toda a linha do cabeçalho. Antes de
   sumir no toggle (860px), ele aperta o espaçamento em vez de estourar — nos rótulos mais
   longos (es) a folga acaba bem antes. */
@media (max-width: 1120px) {
  .topo-linha {
    gap: 18px;
  }

  .topo-nav {
    gap: 16px;
    font-size: 0.9rem;
  }

  .topo-acoes .botao.compacto {
    padding: 8px 12px;
  }
}

@media (max-width: 1020px) {
  .pilares {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Abaixo disso o desenho fica estreito demais ao lado do texto: empilha. */
  .hero-hub .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .hero-hub .hub-palco {
    margin-right: 0;
  }

  .hero-hub .hero-texto .lead {
    max-width: 62ch;
  }

  .contato-grade,
  .apresentacao-corpo,
  .mii-resposta-corpo,
  .estrategia {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .grade-3,
  .parceria-modos,
  .parceria-beneficios,
  .rodape-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 940px) {
  .diagrama-dica {
    display: block;
  }
}

/* No celular o hero inteiro fica centrado — texto, botões e desenho no mesmo eixo. Com a coluna
   única (o grid empilha em 1020px) o alinhamento à esquerda deixava o desenho, que é radial e
   simétrico, visivelmente fora do eixo do texto.

   O hub deixa de ter largura mínima e passa a caber na tela. Antes ele guardava 560px e rolava
   na horizontal: numa tela de 393px isso escondia 38% do desenho à direita — justamente os
   sistemas daquele lado —, e a barra de rolagem dentro da página é um gesto que quase ninguém
   faz. Cabendo inteiro, os rótulos ficam miúdos (~6px), mas a leitura do hero no celular é a
   forma: a casca do CMS em volta do MES, com o mundo em volta. Quem quiser o detalhe tem a
   seção de arquitetura logo abaixo — e o desenho responde ao zoom do navegador, por ser SVG.

   A figura sangra os 24px de respiro do .wrap para os dois lados: é largura que o desenho
   aproveita inteira, e sem ela sobrariam 48px de nada em volta de um SVG já apertado. */
@media (max-width: 640px) {
  .hero-hub .hero-texto {
    text-align: center;
  }

  .hero-hub .hero-texto .lead {
    margin-inline: auto;
  }

  .hero-hub .hero-acoes {
    justify-content: center;
  }

  /* Centrado, o marcador à esquerda perde a função (não há borda de texto para acompanhar):
     vira um parágrafo com o ícone abrindo a primeira linha. */
  .hero-hub .hero-ia {
    display: block;
    max-width: none;
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }

  .hero-hub .hero-ia svg {
    margin: 0 6px 0 0;
    vertical-align: -3px;
  }

  .hero-hub .hub-palco {
    margin-inline: -24px;
  }
}

/* O menu do topo recolhe bem antes do que "tela de celular" sugere. Com cinco itens, o seletor
   de idioma, o alerta e o CTA, a barra precisa de ~1030px em espanhol (o idioma de rótulos mais
   longos) para caber; abaixo disso os itens não têm como encolher — o menu tem white-space:nowrap
   e os botões são flex:none — e o que sobra vaza para fora da janela.

   O ponto de corte era 860px, e a faixa de 861 a 1030 ficava estourada: é exatamente onde cai o
   celular deitado (a maioria dos Android reporta ~890px de largura CSS em paisagem), e o CTA
   "Agendar demonstração" saía pela direita. 1059 dá folga sobre o pior caso medido. */
@media (max-width: 1059px) {
  .topo-nav {
    display: none;
  }

  .topo-acoes {
    margin-left: auto;
  }

  .menu-toggle {
    display: flex;
  }

  .menu-mobile:not([hidden]) {
    display: flex;
  }
}

/* Sem o menu sobra espaço na barra, então de 861 a 1059 os dois botões continuam à vista e o
   hambúrguer guarda só os links das seções — repetir o alerta e o CTA dentro dele mostraria o
   mesmo botão duas vezes na mesma tela. */
@media (min-width: 861px) and (max-width: 1059px) {
  .menu-mobile .botao {
    display: none;
  }
}

/* No celular em pé nem os botões cabem: descem para dentro do menu. Sobram dois controles lado a
   lado — idioma e hambúrguer —, e aí a diferença de 4px entre eles fica à vista, sem os botões
   para justificar o degrau. O hambúrguer é que manda a altura: 40px é alvo de toque, encolhê-lo
   seria piorar o acerto do dedo para ganhar simetria. */
@media (max-width: 860px) {
  .topo-acoes .botao {
    display: none;
  }

  .topo-acoes .idiomas summary {
    height: 40px;
  }
}

/* O descritor é a primeira coisa a sair quando falta largura — antes de espremer o menu ou de
   deixar os botões quebrarem em duas linhas. Some numa faixa só:

   1060–1239px: o menu do topo ainda está aberto e disputa a barra com o seletor, o alerta e o CTA.
   Em espanhol a barra pede 1033px com a assinatura contra 1060 disponíveis — 27px de folga, e é
   o idioma de rótulos mais longos. O limite é 1239 e não 1180 (o teto do .wrap) porque abaixo de
   1228px de viewport a barra é a própria janela menos 48px de respiro — ou seja, ainda mais
   estreita que o pior caso já ajustado.

   Abaixo de 1060px o menu já virou hambúrguer e o descritor volta, que é o caso do celular
   deitado: sem os cinco links a barra sobra (192px de folga em espanhol a 861px). Até 640px ele
   aparece empilhado sob o nome (ver adiante); acima disso, ao lado, como no desktop. */
@media (min-width: 1060px) and (max-width: 1239px) {
  .marca-descritor {
    display: none;
  }
}

/* Onde o descritor aparece ao lado do nome, a marca precisa se separar do menu. O gap da barra
   é 20px e o espaço entre dois itens do menu é 18px — praticamente o mesmo —, então a linha lia
   como "CMS │ Industry 4.Now Plataforma Integrações…", com a assinatura parecendo o primeiro
   item. O espaço existe: na largura máxima do .wrap sobram 128px entre o fim do menu e as ações.
   Só desta faixa para cima, porque abaixo dela o descritor some e a folga acaba. */
@media (min-width: 1240px) {
  .topo-nav {
    margin-left: 24px;
  }
}

/* No celular a barra é marca + seletor + hambúrguer, e os três não cabem numa linha só com a
   assinatura ao lado do nome — numa tela de 373px falta uma dezena de pixels. Em vez de escondê-la,
   o texto da marca empilha: "CMS" em cima, a assinatura embaixo, miúda e sem o filete (que só
   existe para separar dois textos na mesma linha). O logotipo continua ao lado, e a faixa de 68px
   absorve as duas linhas sem crescer. */
@media (max-width: 640px) {
  .marca-texto {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.2;
  }

  .marca-descritor {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }

  .marca-descritor::before {
    display: none;
  }
}

/* A cronologia horizontal não cabe em telas estreitas: vira lista vertical, com o trilho à
   esquerda e a mesma animação, agora no eixo Y. */
@media (max-width: 780px) {
  .cronologia-marcos {
    grid-template-columns: minmax(0, 1fr);
  }

  .marco {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 16px;
    text-align: left;
  }

  .marco-ano,
  .marco-rotulo,
  .marco p {
    grid-column: 2;
  }

  .marco-ano {
    font-size: 1.5rem;
  }

  .marco p {
    max-width: none;
    padding-bottom: 26px;
  }

  .marco-ponto {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 32px;
    height: 100%;
    margin: 0;
    align-items: flex-start;
    padding-top: 9px;
  }

  .marco-ponto::before,
  .marco:first-child .marco-ponto::before,
  .marco:last-child .marco-ponto::before {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top center;
  }

  .marco:last-child .marco-ponto::before {
    bottom: 50%;
  }

  .cronologia.animar .marco-ponto::before {
    transform: scaleY(1);
  }
}

@media (max-width: 680px) {
  body {
    font-size: 16px;
  }

  .pilares {
    grid-template-columns: minmax(0, 1fr);
  }

  .formulario {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
  }

  .dupla,
  .grade-2,
  .grade-3,
  .parceria-modos,
  .parceria-beneficios,
  .rodape-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}