/* Worx Sistemas — site institucional */
/* Identidade visual alinhada aos tokens oficiais da marca (padrão técnico v5.0, /marca/worx-tokens.css).
   IDENTIDADE (canônicas): --acao/--verde-escuro (verde de ação e texto), --azul (Azul Worx),
   --texto (Grafite), --fundo-alt (Névoa). FUNDO ANIMADO preservado (paleta fria decorativa):
   --noite*, --verde (#6fae3a), --verde-claro, --ciano, --azul-claro — usados em .aurora, .codigos e trilhas. */
:root {
  /* Fundo animado / paleta fria decorativa — preservada conforme o guia da marca */
  --noite: #07121b;
  --noite-2: #0c1c28;
  --noite-3: #13293a;
  --azul-claro: #8fb4cc;
  --verde: #6fae3a;
  --verde-claro: #9bd464;
  --ciano: #2fb8a8;
  /* Cores de identidade — canônicas da marca */
  --azul: #526F85;         /* Azul Worx */
  --acao: #648722;         /* Verde Worx — verde de ação (botões, seleção) */
  --verde-escuro: #4E6B19; /* Verde Texto Worx — links e texto verde sobre claro */
  --verde-700: #3D5414;    /* Verde 700 da escala — fim do degradê do botão */
  --azul-600: #435B6E;     /* Azul 600 da escala — fundos com texto branco */
  --grad: linear-gradient(120deg, var(--verde-claro) 0%, var(--ciano) 55%, var(--azul-claro) 100%);
  /* Degradê de destaque sobre fundo claro: o --grad fica abaixo de 2:1 no branco; este passa de 4,5:1 */
  --grad-claro: linear-gradient(120deg, var(--verde-escuro) 0%, var(--azul) 100%);
  /* Base das áreas escuras (guia da marca, fundo animado): degradê diagonal da noite */
  --grad-noite: linear-gradient(135deg, var(--noite) 0%, var(--noite-2) 55%, var(--noite-3) 100%);
  --texto: #263746;        /* Grafite Worx */
  --texto-suave: #5b6b77;
  --texto-escuro-suave: #9fb2c0;
  --fundo: #ffffff;
  --fundo-alt: #EEF2F5;    /* Névoa Worx — superfícies alternadas */
  --borda: #e3e9ee;
  --raio: 18px;
  --largura: 1200px;
  --sombra: 0 20px 50px -20px rgba(7, 18, 27, .25);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Rolagem até âncoras e foco do teclado sem ficar escondido sob o cabeçalho fixo e o botão do WhatsApp */
html { scroll-behavior: smooth; scroll-padding-top: 96px; scroll-padding-bottom: 96px; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde-escuro); }
h1, h2, h3, h4 { font-family: "Saira", sans-serif; color: var(--texto); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); font-weight: 600; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 600; }
h3 { font-size: 1.18rem; font-weight: 600; }
h4 { font-weight: 600; }
.titulo-medio { font-size: 1.5rem; } /* h3 de destaque (home, contato) */
b, strong { font-weight: 600; } /* Saira e IBM Plex Sans só têm até o peso 600 */
p { margin: 0 0 1em; }
::selection { background: var(--acao); color: #fff; }
/* Link "Pular para o conteúdo": fica fora da tela e aparece no primeiro Tab */
.pular {
  position: absolute; left: 16px; top: -100px; z-index: 120; padding: 12px 20px; border-radius: 999px;
  background: var(--texto); color: #fff; font-weight: 600; text-decoration: none;
}
.pular:focus { top: 16px; }
main:focus { outline: none; }
/* Só para leitor de tela: fora da vista, mas lido normalmente (ex.: cópia em texto do chat animado da Cida) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Foco do teclado: Verde Texto sobre claro (6,1:1), branco nas áreas escuras */
:focus-visible { outline: 2px solid var(--verde-escuro); outline-offset: 3px; }
.hero :focus-visible, .pagina-topo :focus-visible, .secao--escura :focus-visible, .cta__caixa :focus-visible, .rodape :focus-visible,
/* blocos escuros dentro de seções claras: o que fica dentro deles também ganha o contorno branco */
.analise--cta :focus-visible, .edicao--lojas :focus-visible, .visao--admin :focus-visible, .manifesto__sisfer :focus-visible { outline-color: #fff; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.secao { padding: 110px 0; position: relative; }
.secao--alt { background: var(--fundo-alt); }
.secao--escura { background-color: var(--noite); background-image: var(--grad-noite); color: var(--texto-escuro-suave); overflow: hidden; }
.secao--escura > .container { position: relative; }
.secao--escura h2, .secao--escura h3, .secao--escura p strong { color: #fff; }
.titulo-secao { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.sobretitulo {
  display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; color: var(--verde-escuro); margin-bottom: 1em; /* caixa normal: preserva "SISFER I.A." e "LabWeb I.A." */
  padding: 6px 14px; border-radius: 999px; background: rgba(111,174,58,.1); border: 1px solid rgba(111,174,58,.22);
}
.sobretitulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(111,174,58,.18); }
.secao--escura .sobretitulo, .hero .sobretitulo, .pagina-topo .sobretitulo, .cta .sobretitulo {
  color: var(--verde-claro); border-color: rgba(155,212,100,.25);
  /* véu escuro por baixo do verde translúcido: o texto não depende das manchas de luz atrás (contraste) */
  background: linear-gradient(rgba(155,212,100,.08), rgba(155,212,100,.08)), rgba(7,18,27,.55);
}
/* "I.A." dentro do sobretítulo claro: o fundo verde translúcido escurece um pouco o fundo, então os
   tons do meio e do azul descem um degrau para manter 4,5:1 */
.sobretitulo, .topo { --ia-meio: #276457; --ia-azul: #435b6e; } /* menu: translúcido sobre o topo escuro */
.secao--escura .sobretitulo, .hero .sobretitulo, .pagina-topo .sobretitulo, .cta .sobretitulo {
  --ia-meio: #5cc8b0; --ia-azul: #8fb4cc;
}
/* Texto colorido em degradê (.grad-texto, .ia): a expressão é um grupo só. Quando ela quebra de linha, o
   degradê continua de uma linha na outra (box-decoration-break: slice), em vez de recomeçar em cada linha. */
.grad-texto {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
}
.secao:not(.secao--escura) .grad-texto { background-image: var(--grad-claro); }
/* "I.A." e "inteligência artificial" (efeito "maré", valores escolhidos no simulador de ajuste):
   um degradê horizontal verde -> verde-água -> azul, sempre verde no começo e azul no fim. Duas
   ondas se somam, cada uma no seu ritmo: o ponto do meio vai de 15% a 85% e volta (5 s cada ida)
   e a passagem entre as cores abre e fecha, de ±40% a ±70% (13 s). O main.js dá a cada palavra um
   ponto de partida próprio nos dois ciclos. Centro e largura são propriedades registradas
   (@property), para poderem ser animadas. A onda só anda no título principal (h1); nos demais
   lugares fica o mesmo degradê, parado (centro 50%, largura ±55%).
   Cada expressão é um grupo só: se "inteligência artificial" quebrar de linha, o degradê continua
   de uma linha na outra (ver .grad-texto).
   Cores: sobre fundo claro (seções claras e o menu do topo), tons escuros da marca, de 4,7 a 6,1:1
   no branco e na Névoa; as áreas escuras trocam para os tons claros do guia (6,8 a 9,3:1 na noite).
   As cores são variáveis herdadas: quem define é a área em volta, não o .ia. */
@property --ia-centro { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --ia-largura { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
:root {
  --ia-verde: #4e6b19; /* Verde Texto */
  --ia-meio: #2f7566;
  --ia-azul: #526f85;  /* Azul Worx */
}
.hero, .pagina-topo, .secao--escura, .cta__caixa, .rodape, .analise--cta, .edicao--lojas, .visao--admin,
.manifesto__sisfer, .produto, .hub, .chat, .etapa-botao.ativo {
  --ia-verde: #9cc24a;
  --ia-meio: #5cc8b0;
  --ia-azul: #8fb4cc;
}
.ia {
  font-weight: 600;
  background-image: linear-gradient(90deg,
    var(--ia-verde) 0%, var(--ia-verde) calc(var(--ia-centro) - var(--ia-largura)),
    var(--ia-meio) var(--ia-centro),
    var(--ia-azul) calc(var(--ia-centro) + var(--ia-largura)), var(--ia-azul) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
}
h1 .ia { animation: ia-centro 5s ease-in-out infinite alternate, ia-largura 13s ease-in-out infinite alternate; }
/* Sobre verde ou teal (botão verde, nó da Cida): tons quase brancos, para o texto continuar legível */
.btn:not(.btn--vidro):not(.btn--claro) .ia, .hub__no .ia {
  --ia-verde: #f1f8e4;
  --ia-meio: #eaf7f3;
  --ia-azul: #e3edf5;
}
/* ".manifesto__sisfer span" pinta todo span do cartão de verde; o "I.A." precisa continuar transparente */
.manifesto__sisfer .ia { color: transparent; }
/* Linha do tempo: o marco ainda apagado fica cinza por inteiro; o "I.A." acende junto com ele */
.linha-tempo__item:not(.aceso) .linha-tempo__ano .ia { background: none; color: inherit; animation: none; }
@keyframes ia-centro { from { --ia-centro: 15%; } to { --ia-centro: 85%; } }
@keyframes ia-largura { from { --ia-largura: 40%; } to { --ia-largura: 70%; } }
.lead { font-size: 1.15rem; color: var(--texto-suave); }
.secao--escura .lead { color: var(--texto-escuro-suave); }

/* Botões */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none;
  background: linear-gradient(120deg, var(--verde-escuro), var(--verde-700)); color: #fff; border: 0; /* branco a 6,1–8,5:1 */
  box-shadow: 0 10px 30px -10px rgba(100,135,34,.6); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor: pointer; font-family: inherit;
}
.btn::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transition: transform .8s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(100,135,34,.85); }
.btn:hover::after { transform: translateX(120%); }
.btn .seta { transition: transform .35s var(--ease); }
.btn:hover .seta { transform: translateX(4px); }
.btn--vidro {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn--vidro:hover { background: rgba(255,255,255,.14); box-shadow: none; }

/* Barra de progresso de rolagem */
.progresso {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 80; transform-origin: 0 50%;
  transform: scaleX(0); background: var(--grad);
}

/* Cabeçalho */
.topo { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; transition: top .4s var(--ease); }
.topo .container {
  display: flex; align-items: center; justify-content: space-between; height: 68px;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: 0 12px 0 26px;
  box-shadow: 0 10px 40px -18px rgba(7,18,27,.45); max-width: calc(var(--largura) - 24px);
  transition: box-shadow .4s var(--ease), background .4s var(--ease);
}
.topo.rolado { top: 8px; }
.topo.rolado .container { background: rgba(255,255,255,.95); box-shadow: 0 14px 40px -16px rgba(7,18,27,.35); }
.topo__logo img { height: 32px; width: auto; }
.menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: 9px 15px; color: var(--texto); text-decoration: none;
  font-weight: 500; font-size: .93rem; border-radius: 999px; transition: background .25s, color .25s;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--verde-escuro); background: rgba(111,174,58,.1); }
.menu-toggle { display: none; background: none; border: 0; color: var(--texto); padding: 8px; cursor: pointer; }
.menu-toggle svg { width: 28px; height: 28px; }

/* Fundo animado (hero, cabeçalhos de página, seções escuras) */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora > span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
  animation: flutuar 18s ease-in-out infinite alternate;
}
.aurora > span:nth-child(1) { width: 520px; height: 520px; background: #3c8a2a; top: -160px; left: -120px; }
.aurora > span:nth-child(2) { width: 460px; height: 460px; background: #1d7f8c; bottom: -200px; right: 10%; animation-delay: -6s; animation-duration: 22s; }
.aurora > span:nth-child(3) { width: 380px; height: 380px; background: #35607d; top: 20%; right: -120px; animation-delay: -12s; animation-duration: 26s; }
/* Trilhas de placa de circuito (padrão estático) */
.aurora::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='white' stroke-opacity='.075' stroke-width='1.2'%3E%3Cpath d='M0 40h30l20 20h50'/%3E%3Ccircle cx='103' cy='60' r='3'/%3E%3Cpath d='M80 0v25l15 15h65'/%3E%3Cpath d='M20 160v-40l20-20h30'/%3E%3Ccircle cx='73' cy='100' r='3'/%3E%3Cpath d='M20 0v12'/%3E%3Ccircle cx='20' cy='15' r='3'/%3E%3Cpath d='M160 120h-40l-20 20v20'/%3E%3Cpath d='M100 0v8'/%3E%3Ccircle cx='100' cy='11' r='3'/%3E%3Cpath d='M130 60v30l-15 15'/%3E%3Ccircle cx='113' cy='107' r='3'/%3E%3Cpath d='M0 120h10'/%3E%3Ccircle cx='13' cy='120' r='3'/%3E%3Crect x='44' y='128' width='14' height='10' rx='2'/%3E%3Crect x='138' y='14' width='10' height='14' rx='2'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 78%);
}
.aurora--suave > span { opacity: .3; }
/* Pulsos de dados correndo pelas trilhas (gerados pelo JS) */
.circuito {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 80%);
}
.circuito .trilha { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1.4; }
.circuito .no { fill: var(--noite); stroke: rgba(155,212,100,.35); stroke-width: 1.4; }
.circuito .pulso, .circuito .pulso-halo {
  fill: none; stroke: url(#grad-pulso); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 70 930; stroke-dashoffset: 1000;
  animation: pulsar var(--dur, 6s) linear infinite; animation-delay: var(--atraso, 0s);
}
/* Brilho do pulso: um traço mais largo e translúcido por baixo, no mesmo passo. Substitui o
   filter: drop-shadow, que obrigava a redesenhar o SVG inteiro a cada quadro. */
.circuito .pulso-halo { stroke-width: 6; opacity: .28; }
@keyframes pulsar { to { stroke-dashoffset: 0; } }
/* Trechos de código flutuando */
.codigos { position: absolute; inset: 0; }
.codigos code {
  position: absolute; bottom: -40px; white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: .8rem;
  color: var(--verde-claro); opacity: 0; animation: subir var(--dur, 18s) linear infinite; animation-delay: var(--atraso, 0s);
}
.codigos code:nth-child(3n+2) { color: var(--ciano); } /* as três cores em partes iguais, como no app */
.codigos code:nth-child(3n) { color: var(--azul-claro); }
@keyframes subir {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .22; }
  80% { opacity: .22; }
  100% { transform: translateY(calc(-1 * var(--altura, 700px))); opacity: 0; }
}
@keyframes flutuar {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.12); }
  100% { transform: translate(-40px, 70px) scale(.95); }
}

/* Hero */
.hero { position: relative; color: #fff; background-color: var(--noite); background-image: var(--grad-noite); overflow: hidden; padding: 150px 0 60px; }
.hero > .container { position: relative; }
.hero h1 { color: #fff; }
.hero .slide__texto > p { color: #b9c9d4; font-size: 1.18rem; max-width: 540px; } /* só o texto do topo: o chat usa o estilo de .msg */
.hero__acoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.slides { position: relative; display: grid; }
.slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s;
}
.slide.ativo { opacity: 1; visibility: visible; }
.slide > * { min-width: 0; }
.slide__texto > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.slide.ativo .slide__texto > * { opacity: 1; transform: none; }
.slide.ativo .slide__texto > :nth-child(2) { transition-delay: .08s; }
.slide.ativo .slide__texto > :nth-child(3) { transition-delay: .16s; }
.slide.ativo .slide__texto > :nth-child(4) { transition-delay: .24s; }
.slide__visual { position: relative; }
.slide__visual::before {
  content: ""; position: absolute; inset: 12% 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(111,174,58,.45), rgba(47,184,168,.15) 50%, transparent 70%); filter: blur(30px);
}
@keyframes levitar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes encher { to { transform: scaleX(1); } }

/* Faixa de números */
.numeros {
  position: relative; margin-top: 70px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: var(--raio); overflow: hidden;
}
.numeros > div { background: rgba(12,28,40,.8); backdrop-filter: blur(10px); padding: 28px 24px; }
.numero { font-family: "Saira", sans-serif; font-weight: 600; font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1; letter-spacing: -.03em; }
.numeros p { margin: 8px 0 0; color: var(--texto-escuro-suave); font-size: .92rem; }

/* Cabeçalho de página interna */
.pagina-topo { position: relative; background-color: var(--noite); background-image: var(--grad-noite); color: #fff; padding: 180px 0 110px; text-align: center; overflow: hidden; }
.pagina-topo .container { position: relative; }
.pagina-topo h1 { color: #fff; margin-bottom: .35em; }
/* Páginas de produto: o logo fica dentro do h1 (nome do produto no título) e a frase vem logo abaixo */
.pagina-topo h1 .pagina-topo__logo { display: block; }
.h1-sub { display: block; }
.pagina-topo p { color: #b9c9d4; font-size: 1.2rem; max-width: 780px; margin: 0 auto; }
.pagina-topo__logo { height: 120px; width: auto; margin: 0 auto 10px; }

/* Grades e cartões */
.grade { display: grid; gap: 24px; }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.dupla > * { min-width: 0; }

.cartao {
  position: relative; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 32px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s, opacity 1s var(--ease);
  isolation: isolate; overflow: hidden;
}
.cartao::before { /* brilho que segue o mouse */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(400px circle at var(--x, 50%) var(--y, 50%), rgba(111,174,58,.12), transparent 45%);
}
.cartao:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: rgba(111,174,58,.35); }
.cartao:hover::before { opacity: 1; }
.cartao p:last-child { margin-bottom: 0; }
.cartao--escuro { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); color: var(--texto-escuro-suave); }
.cartao--escuro::before { background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(155,212,100,.16), transparent 45%); }
.cartao--escuro:hover { border-color: rgba(155,212,100,.35); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.cartao--escuro h3 { color: #fff; }

.icone {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(111,174,58,.18), rgba(82,111,133,.12)); color: var(--verde-escuro); /* verde -> Azul Worx translúcidos */
  border: 1px solid rgba(111,174,58,.25);
}
.secao--escura .icone { color: var(--verde-claro); background-image: linear-gradient(135deg, rgba(111,174,58,.18), rgba(47,184,168,.14)); }
.icone svg { width: 26px; height: 26px; }

/* Produtos */
.produto {
  position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden;
  background: linear-gradient(170deg, var(--noite-3), var(--noite)); color: var(--texto-escuro-suave);
  text-decoration: none; box-shadow: var(--sombra);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity 1s var(--ease);
  border: 1px solid rgba(255,255,255,.06);
}
.produto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(500px circle at var(--x, 50%) var(--y, 0%), rgba(155,212,100,.18), transparent 40%);
}
.produto:hover { box-shadow: 0 40px 80px -30px rgba(7,18,27,.6); }
.produto:hover::after { opacity: 1; }
.produto__link { color: var(--verde-claro); font-weight: 600; font-size: .95rem; display: inline-flex; gap: 8px; }
.edicao:not(.edicao--lojas) .produto__link { color: var(--verde-escuro); } /* cartão claro: Verde Texto */

/* Clientes: faixa rolando */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__trilho { display: flex; gap: 72px; width: max-content; animation: rolar 32s linear infinite; align-items: center; }
.marquee:hover .marquee__trilho { animation-play-state: paused; }
.marquee img { height: 60px; width: auto; filter: grayscale(1); opacity: .6; transition: .3s; }
.marquee img:hover { filter: none; opacity: 1; transform: scale(1.06); }
@keyframes rolar { to { transform: translateX(-50%); } }
/* Botão para parar a faixa de logos (WCAG 2.2.2); o main.js mostra o botão quando há movimento */
.marquee--parado .marquee__trilho { animation-play-state: paused; }
.marquee__controle, .etapas__controle { text-align: center; margin: 20px 0 0; }
/* Botões de pausa (faixa de logos e troca automática das abas "Como funciona") */
.marquee__pausa, .etapas__pausa {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; cursor: pointer;
  font: 500 .85rem "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--texto-suave);
}
.marquee__pausa:hover, .etapas__pausa:hover { color: var(--verde-escuro); border-color: rgba(100,135,34,.4); }
.clientes { display: flex; flex-wrap: wrap; gap: 36px 60px; justify-content: center; align-items: center; }
.clientes img { max-height: 64px; width: auto; filter: grayscale(1); opacity: .7; transition: .3s; }
.clientes img:hover { filter: none; opacity: 1; }

/* Sobre: topo grande */
.pagina-topo--grande { padding-bottom: 80px; }
.pagina-topo--grande h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.pagina-topo .numeros { text-align: left; margin-top: 64px; }

/* Sobre: manifesto */
.manifesto__frase {
  font-family: "Saira", sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.3;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem); color: var(--texto); max-width: 1000px; margin: 0 0 64px;
}
.manifesto__frase strong { font-weight: 600; text-decoration: underline; text-decoration-color: var(--acao); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.manifesto__texto p { font-size: 1.1rem; color: var(--texto-suave); margin: 0; }
.manifesto__sisfer {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 28px; border-radius: 24px; text-decoration: none; overflow: hidden;
  background: linear-gradient(160deg, var(--noite-3), var(--noite)); box-shadow: var(--sombra);
  transition: transform .45s var(--ease), opacity 1s var(--ease);
}
.manifesto__sisfer::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(111,174,58,.45), transparent 70%); filter: blur(20px); }
.manifesto__sisfer:hover { transform: translateY(-6px); }
.manifesto__sisfer img { position: relative; width: min(340px, 90%); }
.manifesto__sisfer span { position: relative; color: var(--verde-claro); font-weight: 600; }

/* Sobre: linha do tempo que se preenche ao rolar */
.linha-tempo { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; --p: 0; }
.linha-tempo::before, .linha-tempo::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; border-radius: 2px;
}
.linha-tempo::before { bottom: 0; background: var(--borda); }
.linha-tempo::after { height: calc(var(--p) * 100%); background: linear-gradient(var(--verde-escuro), var(--azul)); /* par do --grad-claro: a linha fica sobre a Névoa */ box-shadow: 0 0 12px rgba(111,174,58,.6); }
.linha-tempo__item {
  position: relative; width: 50%; padding: 0 56px 56px 0; text-align: right;
}
.linha-tempo__item:nth-child(even) { margin-left: 50%; padding: 0 0 56px 56px; text-align: left; }
.linha-tempo__item::before { /* ponto na linha */
  content: ""; position: absolute; top: 8px; right: -9px; width: 18px; height: 18px; border-radius: 50%; z-index: 1;
  background: var(--fundo-alt); border: 3px solid var(--borda); transition: .5s var(--ease);
}
.linha-tempo__item:nth-child(even)::before { right: auto; left: -9px; }
.linha-tempo__item.aceso::before { border-color: var(--acao); background: #fff; box-shadow: 0 0 0 6px rgba(111,174,58,.18), 0 0 18px rgba(111,174,58,.6); }
.linha-tempo__ano {
  display: inline-block; font-family: "Saira", sans-serif; font-weight: 600; font-size: 1.9rem; line-height: 1;
  letter-spacing: -.03em; margin-bottom: 10px; color: var(--texto-suave); transition: color .6s var(--ease);
}
.linha-tempo__item.aceso .linha-tempo__ano { background: var(--grad-claro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.linha-tempo__item h3 { margin-bottom: .35em; }
.linha-tempo__item p { color: var(--texto-suave); margin: 0; }
.linha-tempo__item--hoje { padding-bottom: 0; }

/* Sobre: diagrama da nuvem */
.nuvem { display: grid; grid-template-columns: 1.1fr .55fr 1.25fr .55fr 1.1fr; align-items: center; gap: 0; }
.nuvem__no {
  position: relative; text-align: center; padding: 28px 20px; border-radius: var(--raio);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(6px);
}
.nuvem__no .icone { margin: 0 auto 16px; }
.nuvem__no h3 { color: #fff; margin-bottom: .3em; }
.nuvem__no p { font-size: .9rem; margin: 0; }
.nuvem__no--centro { padding: 40px 22px; border-color: rgba(155,212,100,.35); background: rgba(111,174,58,.07); box-shadow: 0 0 60px -10px rgba(111,174,58,.45); }
.nuvem__no--centro .icone { width: 72px; height: 72px; border-radius: 22px; }
.nuvem__no--centro .icone svg { width: 36px; height: 36px; }
.nuvem__anel { position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(155,212,100,.5); animation: anel 3s ease-out infinite; }
@keyframes anel { from { transform: scale(1); opacity: .8; } to { transform: scale(1.18); opacity: 0; } }
.nuvem__linha { position: relative; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(155,212,100,.4), rgba(255,255,255,.08)); }
/* Cada <i> ocupa a linha inteira e anda só com transform (sem recalcular layout); o pacote visível é o
   ::before, de 26 px. translateX(100% - 26px) leva o pacote do começo ao fim da linha. */
.nuvem__linha i { position: absolute; top: 50%; left: 0; width: 100%; height: 4px; margin-top: -2px; animation: pacote 2.4s linear infinite; }
.nuvem__linha i::before {
  content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 4px; border-radius: 4px;
  background: var(--grad); box-shadow: 0 0 12px rgba(155,212,100,.9);
}
.nuvem__linha i:nth-child(2) { animation-delay: -.8s; }
.nuvem__linha i:nth-child(3) { animation-delay: -1.6s; }
.nuvem__linha--volta i { animation-direction: reverse; }
@keyframes pacote { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(calc(100% - 26px)); opacity: 0; } }

/* Sobre: tecnologias (seção escura) */
.tecnologias .titulo-secao { margin-bottom: 56px; }
.nuvens { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; margin-bottom: 24px; }
.nuvens__destaque {
  position: relative; overflow: hidden; padding: 40px; border-radius: 24px;
  background: linear-gradient(145deg, rgba(0,155,58,.16), rgba(0,39,118,.14) 60%, rgba(254,223,0,.06));
  border: 1px solid rgba(155,212,100,.25);
}
.nuvens__destaque::after {
  content: ""; position: absolute; width: 320px; height: 320px; right: -110px; bottom: -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(111,174,58,.5), transparent 70%); filter: blur(20px); animation: respirar 6s ease-in-out infinite;
}
@keyframes respirar { 50% { transform: scale(1.15); opacity: .7; } }
.nuvens__bandeira {
  display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 20px; margin-bottom: 22px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.nuvens__bandeira img { border-radius: 5px; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.nuvens__destaque h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); position: relative; }
.nuvens__destaque p { position: relative; margin: 0; font-size: 1.05rem; }
.nuvens__lista { display: grid; gap: 14px; }
.nuvem-card {
  position: relative; display: flex; align-items: center; gap: 20px; padding: 18px 24px; border-radius: 20px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); overflow: hidden;
  transition: transform .45s var(--ease), border-color .45s, background .45s;
}
.nuvem-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cor); opacity: .8;
}
.nuvem-card:hover { transform: translateX(6px); background: rgba(255,255,255,.07); border-color: color-mix(in srgb, var(--cor) 55%, transparent); }
.nuvem-card__selo {
  flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 30px -10px var(--cor); transition: transform .45s var(--ease);
}
.nuvem-card:hover .nuvem-card__selo { transform: rotate(-6deg) scale(1.06); }
.nuvem-card__selo img { width: 40px; height: 40px; object-fit: contain; }
.nuvem-card h4 { color: #fff; font-size: 1.1rem; margin: 0 0 6px; }
.regiao { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--verde-claro); }
.regiao i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-claro); box-shadow: 0 0 0 0 rgba(155,212,100,.6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(155,212,100,0); } 100% { box-shadow: 0 0 0 0 rgba(155,212,100,0); } }

/* Bento de tecnologias */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.bento__bloco {
  position: relative; padding: 26px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08); transition: border-color .4s, transform .5s var(--ease), opacity 1s var(--ease);
}
.bento__bloco:hover { border-color: rgba(155,212,100,.3); }
.bento--dados { grid-column: span 7; }
.bento--front { grid-column: span 5; }
.bento--infra { grid-column: span 7; }
.bento--apps  { grid-column: span 5; }
.bento--back, .bento--msg, .bento--mon { grid-column: span 4; }
.bento__topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.bento__topo h3 { color: #fff; font-size: 1.05rem; margin: 0; }
.bento__qtd { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: .8rem; color: var(--verde-claro); opacity: .75; }
.bento__tecs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 16px 8px; }
.tec { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tec__selo {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #fff;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.6); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tec__selo::after { /* anel com a cor da marca */
  content: ""; position: absolute; inset: -4px; border-radius: 22px; border: 2px solid var(--cor); opacity: 0; transform: scale(.9);
  transition: opacity .35s, transform .45s var(--ease);
}
.tec__selo img { width: 36px; height: 36px; object-fit: contain; transition: transform .45s var(--ease); }
.tec__nome { font-size: .85rem; font-weight: 500; color: var(--texto-escuro-suave); transition: color .3s; }
.tec:hover .tec__selo { transform: translateY(-6px); box-shadow: 0 18px 34px -10px var(--cor); }
.tec:hover .tec__selo::after { opacity: .9; transform: none; }
.tec:hover .tec__selo img { transform: scale(1.1); }
.tec:hover .tec__nome { color: #fff; }
.secao--escura + .cta { padding-top: 110px; }


/* SISFER: hub de módulos integrados */
.hub {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; margin: 0 auto; border-radius: 32px;
  background: radial-gradient(circle at 50% 50%, var(--noite-3), var(--noite) 70%); overflow: hidden;
  box-shadow: var(--sombra);
}
.hub__linhas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub__linhas path { stroke: rgba(155,212,100,.55); stroke-width: .5; fill: none; stroke-dasharray: 6 94; stroke-linecap: round; animation: raio 2.6s linear infinite; }
.hub__linhas path:nth-of-type(2) { animation-delay: -.4s; } .hub__linhas path:nth-of-type(3) { animation-delay: -.9s; }
.hub__linhas path:nth-of-type(4) { animation-delay: -1.3s; } .hub__linhas path:nth-of-type(5) { animation-delay: -1.8s; }
.hub__linhas path:nth-of-type(6) { animation-delay: -2.2s; }
@keyframes raio { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.hub__anel { fill: none; stroke: rgba(255,255,255,.12); stroke-width: .3; stroke-dasharray: 1.2 1.8; transform-origin: 50% 50%; animation: girar 60s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.hub__centro {
  position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: rgba(111,174,58,.1); border: 1px solid rgba(155,212,100,.4);
  box-shadow: 0 0 60px -6px rgba(111,174,58,.55), inset 0 0 30px rgba(111,174,58,.15);
}
.hub__centro::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(155,212,100,.5); animation: anel 3s ease-out infinite; }
.hub__centro img { width: 120%; max-width: none; }
.hub__no {
  position: absolute; transform: translate(-50%, -50%); padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  font-size: .88rem; font-weight: 600; color: #fff; background: rgba(12,28,40,.92); border: 1px solid rgba(155,212,100,.35);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); transition: transform .35s var(--ease), background .35s;
}
.hub__no:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--verde-escuro); }

/* SISFER: etapas "como funciona" */
.etapas { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
.etapas__lista { display: grid; gap: 8px; }
.etapa-botao {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; border-radius: 16px; border: 1px solid var(--borda); background: #fff; cursor: pointer;
  font: 600 1rem "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--texto); transition: .3s var(--ease);
}
.etapa-botao span { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-weight: 500; font-size: .8rem; color: var(--texto-suave); transition: color .3s; }
.etapa-botao:hover { border-color: rgba(111,174,58,.4); transform: translateX(4px); }
.etapa-botao.ativo { background: var(--noite); color: #fff; border-color: var(--noite); box-shadow: var(--sombra); }
.etapa-botao.ativo span { color: var(--verde-claro); }
.etapa-botao::after { /* barra de tempo da troca automática */
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--grad);
  transform: scaleX(0); transform-origin: 0 50%;
}
.etapa-botao.ativo.rodando::after { animation: encher var(--tempo, 8s) linear forwards; }
.etapas:hover .etapa-botao.ativo.rodando::after { animation-play-state: paused; }
.etapas__paineis {
  position: relative; min-height: 100%; padding: 40px; border-radius: 24px; background: #fff; border: 1px solid var(--borda);
  box-shadow: var(--sombra); overflow: hidden;
}
.etapa { animation: surgir-etapa .6s var(--ease); }
@keyframes surgir-etapa { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.etapa__num {
  position: absolute; right: 28px; top: 6px; font-family: "Saira", sans-serif; font-weight: 600; font-size: 7rem; line-height: 1;
  letter-spacing: -.05em; background: linear-gradient(180deg, rgba(111,174,58,.18), transparent 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none;
}
.etapa h3 { font-size: 1.5rem; max-width: 80%; }
.etapa > p { color: var(--texto-suave); font-size: 1.05rem; max-width: 90%; }
.etapa .lista { margin-top: 18px; }
.etapa .lista li { margin-bottom: 12px; font-size: 1rem; }

/* SISFER: versões */
.edicoes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.edicao {
  position: relative; padding: 40px; border-radius: 28px; background: #fff; border: 1px solid var(--borda); overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity 1s var(--ease);
}
.edicao:hover { box-shadow: var(--sombra); }
.edicao--link { display: block; text-decoration: none; color: var(--texto); }
.edicao--link.edicao--lojas { color: var(--texto-escuro-suave); }
.edicao--link:hover { transform: translateY(-6px); }
.edicao--lojas { background: linear-gradient(160deg, var(--noite-3), var(--noite)); color: var(--texto-escuro-suave); border-color: transparent; }
.edicao--lojas h3 { color: #fff; }
.edicao--lojas .lista li { color: var(--texto-escuro-suave); }
.edicao h3 { font-size: 1.8rem; margin: 14px 0 12px; }
.edicao > p { margin-bottom: 22px; }
.edicao__tag {
  display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(111,174,58,.12); color: var(--verde-escuro);
}
.edicao--lojas .edicao__tag { background: rgba(155,212,100,.12); color: var(--verde-claro); }

/* SISFER: implantação */
.implantacao { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: passo; position: relative; }
.implantacao::before {
  content: ""; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--acao) 0 8px, transparent 8px 16px); opacity: .45;
}
.implantacao li { position: relative; text-align: center; padding: 0 8px; }
.implantacao span {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
  font: 600 1.2rem "Saira", sans-serif; color: #fff; background: linear-gradient(135deg, var(--acao), var(--verde-escuro));
  box-shadow: 0 0 0 8px #fff, 0 12px 30px -8px rgba(111,174,58,.7);
}
.implantacao p { color: var(--texto-suave); margin: 0; }
.alem {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 30px 36px; border-radius: 24px;
  background: var(--fundo-alt); border: 1px solid var(--borda);
}
.alem h3 { margin: 0; font-size: 1.3rem; }
.alem ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.alem li { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--borda); font-size: .92rem; color: var(--texto); }

/* SISFER: lista de clientes */
.clientes-nomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.clientes-nomes li {
  display: flex; flex-direction: column; padding: 14px 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--borda);
  font-size: .95rem; color: var(--texto); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.clientes-nomes li:hover { border-color: rgba(111,174,58,.4); transform: translateY(-5px); box-shadow: var(--sombra); }
.clientes-nomes strong { font-weight: 600; margin-top: 14px; padding: 0 4px; line-height: 1.3; }
.clientes-nomes em { font-style: normal; font-weight: 400; font-size: .82rem; color: var(--texto-suave); padding: 0 4px; }
.cliente__logo {
  display: grid; place-items: center; height: 110px; padding: 12px; border-radius: 12px; background: #fff;
  border: 1px solid var(--fundo-alt); overflow: hidden;
}
.cliente__logo img { max-width: 100%; max-height: 86px; object-fit: contain; transition: transform .5s var(--ease); }
.clientes-nomes li:hover .cliente__logo img { transform: scale(1.06); }
.cliente__iniciais {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px;
  font: 600 1.6rem "Saira", sans-serif; color: #fff; background: linear-gradient(135deg, var(--noite-3), var(--azul));
}

/* Listas (LABWEB) */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--texto-suave); font-size: .96rem; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; border-radius: 50%;
  background: var(--acao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.secao--escura .lista li { color: var(--texto-escuro-suave); }
/* Marcador: Verde Worx sobre claro (check branco a 4,2:1); nas seções escuras, o verde decorativo */
.secao--escura .lista > li::before { background-color: var(--verde); }
.lista ul { list-style: none; padding-left: 2px; margin: 6px 0 0; }
.lista ul li { padding-left: 18px; margin-bottom: 4px; }
.lista ul li::before { width: 6px; height: 6px; top: .75em; background: var(--azul-claro); }

/* Contato */
.contato-info { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; }
.contato-info li { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--borda); border-radius: 16px; transition: .3s var(--ease); }
.contato-info li:hover { border-color: rgba(111,174,58,.4); transform: translateX(4px); }
.contato-info .icone { margin: 0; flex: none; width: 46px; height: 46px; border-radius: 12px; }
.contato-info strong { display: block; color: var(--texto); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.contato-info a { color: var(--texto); text-decoration: none; }
.contato-info a:hover { color: var(--verde-escuro); }
.contato-info li > div:last-child { min-width: 0; } /* em 320 px o e-mail passava da tela */
.contato-info a { overflow-wrap: anywhere; }
.form label { display: block; font-weight: 500; font-size: .88rem; margin-bottom: 6px; color: var(--texto); }
.form input, .form textarea, .form select {
  width: 100%; padding: 13px 16px; border: 1px solid var(--borda); border-radius: 12px;
  font: inherit; color: var(--texto); background: #fff; border-color: #7c96ab; /* Azul 400: borda a 3:1 */ margin-bottom: 16px; transition: .25s;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--verde-escuro); box-shadow: 0 0 0 3px rgba(78,107,25,.35); }
/* Campos obrigatórios: asterisco visual (o leitor de tela já anuncia o required) */
.form label:has(+ input[required], + textarea[required])::after { content: " *"; content: " *" / ""; color: var(--verde-escuro); }
.form__obrigatorio { font-size: .85rem; color: var(--texto-suave); margin: 0 0 14px; }
.form textarea { min-height: 140px; resize: vertical; }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form__nota { font-size: .85rem; color: var(--texto-suave); margin-top: 14px; }
/* Erros e status do formulário (o guia não define cor de erro: vermelho de erro da marca, 6,5:1 no branco) */
.form [aria-invalid="true"] { border-color: #B3261E; }
.form__erro { margin: -10px 0 16px; font-size: .85rem; line-height: 1.4; color: #B3261E; font-weight: 500; }
.form__status { margin: 14px 0 0; font-size: .95rem; font-weight: 500; color: var(--verde-escuro); }
.form__status:empty { display: none; }
.mapa { border: 0; width: 100%; height: 320px; border-radius: var(--raio); display: block; filter: grayscale(.4) contrast(1.05); }

/* Chamada final */
.cta { padding: 0 0 110px; }
.cta__caixa {
  position: relative; overflow: hidden; border-radius: 32px; padding: 80px 40px; text-align: center;
  background-color: var(--noite); background-image: var(--grad-noite); color: #b9c9d4;
}
.cta__conteudo { position: relative; }
.cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.cta p { font-size: 1.15rem; margin-bottom: 30px; }

/* Rodapé */
.rodape { background: var(--noite); color: var(--texto-escuro-suave); padding: 80px 0 0; font-size: .95rem; position: relative; overflow: hidden; }
.rodape::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--grad); opacity: .5; }
.rodape .grade { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
/* Títulos das colunas: parágrafos (não repetem h2 em todas as páginas), com o visual dos títulos */
.rodape__titulo {
  font-family: "Saira", sans-serif; color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 1.2em;
}
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 10px; }
.rodape a { color: var(--texto-escuro-suave); text-decoration: none; transition: color .2s; }
.rodape a:hover { color: var(--verde-claro); }
.rodape__logo { height: 32px; width: auto; margin-bottom: 18px; opacity: .95; }
.rodape__redes { display: flex; gap: 22px; margin-top: 22px; }
/* Ícone de 22 px com área de toque de 44 px: o padding aumenta o alvo e a margem negativa mantém o desenho no lugar */
.rodape__redes a { display: inline-flex; color: var(--texto-escuro-suave); padding: 11px; margin: -11px; }
.rodape__redes a:hover { color: var(--verde-claro); }
.rodape__redes svg { width: 22px; height: 22px; }
/* Marca d'água: o logotipo oficial (versão branca), bem apagado e sumindo para baixo */
.rodape__marca {
  display: block; width: clamp(11.4rem, 54vw, 45.5rem); height: auto; margin: 56px auto clamp(12px, 4.4vw, 56px); opacity: .08;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%);
  user-select: none; pointer-events: none;
}
.rodape__base {
  border-top: 1px solid rgba(255,255,255,.07); padding: 24px 0; font-size: .85rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
}
.rodape__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.link-cookies { background: none; border: 0; padding: 0; font: inherit; color: var(--texto-escuro-suave); cursor: pointer; transition: color .2s; }
.link-cookies:hover { color: var(--verde-claro); }
.link-cookies--texto { color: var(--verde-escuro); text-decoration: underline; }

/* Aviso de cookies */
.cookies {
  position: fixed; left: 22px; bottom: 22px; z-index: 90; width: min(460px, calc(100% - 44px));
  display: grid; gap: 16px; padding: 22px 24px; border-radius: 20px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(16px); border: 1px solid var(--borda);
  box-shadow: 0 30px 60px -20px rgba(7,18,27,.45); animation: surgir-cookies .6s var(--ease);
}
.cookies[hidden], .cookies [hidden] { display: none; } /* .cookies__acoes tem display: flex */
@keyframes surgir-cookies { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.cookies strong { font-family: "Saira", sans-serif; color: var(--texto); font-size: 1.05rem; }
.cookies p { margin: 6px 0 0; font-size: .9rem; color: var(--texto-suave); line-height: 1.55; }
.cookies__acoes { display: flex; gap: 10px; justify-content: flex-end; }
.cookies .btn { padding: 11px 22px; font-size: .9rem; }
.btn--claro { background: var(--fundo-alt); color: var(--texto); box-shadow: none; border: 1px solid var(--borda); }
.btn--claro:hover { background: #fff; box-shadow: none; }

/* Perguntas frequentes */
.perguntas { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.perguntas__intro { position: sticky; top: 120px; }
.perguntas__lista { display: grid; gap: 12px; }
.pergunta { border-radius: 18px; background: #fff; border: 1px solid var(--borda); transition: border-color .3s, box-shadow .3s, opacity 1s var(--ease), transform 1s var(--ease); }
.pergunta[open] { border-color: rgba(111,174,58,.45); box-shadow: 0 16px 40px -24px rgba(7,18,27,.4); }
.pergunta summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 24px; font-weight: 600; font-size: 1.02rem; color: var(--texto);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:focus-visible { border-radius: 18px; }
.pergunta__icone { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(111,174,58,.12); transition: transform .4s var(--ease), background .3s; }
.pergunta__icone::before, .pergunta__icone::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--verde-escuro); transition: transform .4s var(--ease); }
.pergunta__icone::after { transform: rotate(90deg); }
.pergunta[open] .pergunta__icone { background: var(--acao); transform: rotate(180deg); }
.pergunta[open] .pergunta__icone::before, .pergunta[open] .pergunta__icone::after { background: #fff; }
.pergunta[open] .pergunta__icone::after { transform: rotate(0deg); }
.pergunta__resposta { padding: 0 24px 22px; color: var(--texto-suave); animation: abrir-resposta .45s var(--ease); }
.pergunta__resposta p { margin: 0; }
@keyframes abrir-resposta { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Documento (política de privacidade) */
.documento { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
.documento__indice { position: sticky; top: 120px; padding: 24px; border-radius: 18px; background: var(--fundo-alt); border: 1px solid var(--borda); }
.documento__indice strong { display: block; font-family: "Saira", sans-serif; color: var(--texto); margin-bottom: 12px; }
.documento__indice ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .92rem; }
.documento__indice a { color: var(--texto-suave); text-decoration: none; }
.documento__indice a:hover { color: var(--verde-escuro); }
.documento__texto { max-width: 760px; }
.documento__texto h2 { font-size: 1.5rem; margin: 44px 0 14px; scroll-margin-top: 110px; }
.documento__texto h2:first-of-type { margin-top: 12px; }
.documento__texto p, .documento__texto li { color: var(--texto-suave); }
.documento__texto .lista { margin-bottom: 1em; }
.documento__texto strong { color: var(--texto); }
.documento__data { font-size: .9rem; padding: 10px 16px; border-radius: 12px; background: rgba(111,174,58,.08); display: inline-block; }

.whats-flutuante {
  position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 2px #07121b, 0 10px 30px rgba(37,211,102,.45); /* contorno da noite: o botão aparece em qualquer fundo */
  transition: transform .3s var(--ease); isolation: isolate;
}
.whats-flutuante::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: pulso 2.4s ease-out infinite; }
.whats-flutuante:hover { transform: scale(1.08); }
.whats-flutuante svg { width: 30px; height: 30px; }
@keyframes pulso { from { transform: scale(1); opacity: .6; } to { transform: scale(1.8); opacity: 0; } }

/* Revelar ao rolar */
.js [data-revelar] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--atraso, 0s); }
.js [data-revelar="esquerda"] { transform: translateX(-40px); }
.js [data-revelar="direita"] { transform: translateX(40px); }
.js [data-revelar="zoom"] { transform: scale(.92); }
.js [data-revelar].visivel { opacity: 1; transform: none; }
main { overflow-x: clip; }
/* Seções fora da tela ficam com as animações paradas (o main.js liga e desliga a classe) */
.fora-da-tela, .fora-da-tela *, .fora-da-tela *::before, .fora-da-tela *::after { animation-play-state: paused !important; }
@media (max-width: 1020px) {
  .js [data-revelar="esquerda"], .js [data-revelar="direita"] { transform: translateY(36px); }
}
.js .cartao[data-revelar].visivel:hover { transform: translateY(-6px); transition-delay: 0s; }

/* Responsivo */
@media (max-width: 1020px) {
  .grade-4 { grid-template-columns: repeat(2, 1fr); }
  .grade-3 { grid-template-columns: 1fr 1fr; }
  .rodape .grade { grid-template-columns: 1fr 1fr; }
  .slide, .dupla { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .slide__visual { max-width: 460px; width: 100%; margin: 0 auto; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .menu-toggle { display: block; }
  .topo .container { position: relative; }
  .menu {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: rgba(255,255,255,.98); backdrop-filter: blur(16px); padding: 14px; border-radius: 22px;
    box-shadow: var(--sombra); border: 1px solid var(--borda);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .3s var(--ease);
  }
  .menu.aberto { opacity: 1; visibility: visible; transform: none; }
}
@media (max-width: 1020px) {
  .nuvens { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .bento__bloco { grid-column: auto; }
  .bento .bento--dados { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .nuvens__destaque { padding: 30px 24px; }
  .bento__tecs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1020px) {
  .etapas { grid-template-columns: 1fr; }
  .etapas__lista { grid-template-columns: repeat(3, 1fr); }
  .edicoes { grid-template-columns: 1fr; }
  .implantacao { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .implantacao::before { display: none; }
  .alem { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .etapas__lista { grid-template-columns: 1fr 1fr; }
  .etapa-botao { padding: 12px 14px; font-size: .88rem; }
  .etapas__paineis, .edicao { padding: 28px 22px; }
  .etapa__num { font-size: 4.5rem; right: 14px; }
  .etapa h3 { font-size: 1.25rem; }
  .implantacao { grid-template-columns: 1fr; }
  .hub__no { font-size: .72rem; padding: 6px 10px; }
}
@media (max-width: 860px) {
  .linha-tempo::before, .linha-tempo::after { left: 9px; }
  .linha-tempo__item, .linha-tempo__item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 44px 44px; text-align: left; }
  .linha-tempo__item::before, .linha-tempo__item:nth-child(even)::before { left: 0; right: auto; }
  .nuvem { grid-template-columns: 1fr; justify-items: stretch; }
  .nuvem__linha { width: 2px; height: 56px; margin: 0 auto; background: linear-gradient(rgba(255,255,255,.08), rgba(155,212,100,.4), rgba(255,255,255,.08)); }
  .nuvem__linha i { width: 4px; height: 100%; left: 50%; margin: 0 0 0 -2px; top: 0; animation-name: pacote-v; }
  .nuvem__linha i::before { width: 4px; height: 18px; }
  .manifesto__texto { gap: 32px; }
}
@keyframes pacote-v { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(calc(100% - 18px)); opacity: 0; } }
@media (max-width: 640px) {
  .secao { padding: 76px 0; }
  .container { padding: 0 16px; }
  .topo { top: 8px; }
  .topo .container { padding: 0 8px 0 18px; height: 60px; max-width: calc(100% - 16px); }
  .topo__logo img { height: 34px; }
  .hero { padding-top: 120px; }
  .pagina-topo { padding: 140px 0 80px; }
  .grade-3, .grade-4, .rodape .grade, .form__linha { grid-template-columns: 1fr; }
  .numeros > div { padding: 20px 16px; }
  .cartao { padding: 26px; }
  .cta { padding-bottom: 76px; }
  .cta__caixa { padding: 56px 22px; border-radius: 24px; }
  .marquee img { height: 44px; }
  .marquee__trilho { gap: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-revelar] { opacity: 1; transform: none; }
}
/* Botão "Pausar animações" do rodapé: as mesmas regras de "reduzir movimento" (o main.js põe a classe) */
html.sem-animacao, html.sem-animacao *, html.sem-animacao *::before, html.sem-animacao *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html.sem-animacao.js [data-revelar] { opacity: 1; transform: none; }

@media (max-width: 1020px) {
  .perguntas, .documento { grid-template-columns: 1fr; gap: 36px; }
  .perguntas__intro, .documento__indice { position: static; }
}
@media (max-width: 640px) {
  .cookies { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; }
  .cookies__acoes .btn { flex: 1; justify-content: center; }
  .rodape__base { justify-content: center; text-align: center; }
  .pergunta summary { padding: 18px; font-size: .96rem; }
  .pergunta__resposta { padding: 0 18px 18px; }
}

/* ===== SISFER IA e Cida ===== */
.pagina-topo__logo--svg { height: 96px; }

/* Chat da Cida */
.chat {
  position: relative; width: 100%; max-width: 480px; margin: 0 auto; border-radius: 26px; overflow: hidden;
  background: rgba(12,28,40,.72); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 80px -30px rgba(111,174,58,.5); text-align: left;
}
.chat__topo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.chat__topo strong { display: block; color: #fff; font-family: "Saira", sans-serif; font-size: 1rem; line-height: 1.2; }
.chat__status { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--texto-escuro-suave); }
.chat__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-claro); animation: ping 2s infinite; }
.chat__selo { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-escuro-suave); border: 1px solid rgba(255,255,255,.14); }
.cida-avatar {
  position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff;
  background: conic-gradient(from 200deg, var(--verde), var(--ciano), var(--azul), var(--verde));
  box-shadow: 0 0 20px rgba(111,174,58,.55);
}
.cida-avatar::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--noite-2); z-index: 0; }
.cida-avatar svg { position: relative; z-index: 1; width: 22px; height: 22px; color: var(--verde-claro); }
.chat__mensagens { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-height: 330px; }
.msg { max-width: 86%; margin: 0; padding: 11px 15px; border-radius: 18px; font-size: .9rem; line-height: 1.5; }
.msg b { color: #fff; font-weight: 600; }
.msg--eu { align-self: flex-end; background: linear-gradient(120deg, var(--verde-escuro), var(--azul-600)); color: #fff; border-bottom-right-radius: 6px; }
.msg--cida { align-self: flex-start; background: rgba(255,255,255,.07); color: #d6e2ea; border: 1px solid rgba(255,255,255,.08); border-bottom-left-radius: 6px; }
.js .chat--animar .msg { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .chat--animar .msg.visivel { opacity: 1; transform: none; }
.js .chat--animar .msg.oculta { display: none; }
.digitando { align-self: flex-start; display: inline-flex; gap: 5px; padding: 13px 16px; border-radius: 18px; border-bottom-left-radius: 6px; background: rgba(255,255,255,.07); }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-escuro-suave); animation: pular 1.2s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pular { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat__entrada { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 14px 14px; padding: 10px 10px 10px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--texto-escuro-suave); font-size: .88rem; }
.chat__entrada i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(120deg, var(--verde), var(--ciano)); color: #fff; }
.chat__entrada svg { width: 16px; height: 16px; }
.hero__chat::before { display: none; }
.hero__chat .chat { animation: levitar 7s ease-in-out infinite; }

.cida__pontos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.cida__pontos li { padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--texto-escuro-suave); }
.cida__pontos b { color: var(--verde-claro); }

/* Análises da Cida */
.analises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.analise { display: flex; flex-direction: column; }
.analise h3 { margin: 6px 0 8px; }
.analise p { color: var(--texto-suave); }
.analise__area { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-escuro); }
.analise__visual {
  position: relative; height: 110px; margin-bottom: 20px; padding: 16px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, var(--noite-3), var(--noite)); display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
.analise__visual > span { display: block; height: 8px; width: var(--v); border-radius: 4px; background: var(--grad); transform-origin: 0 50%; transition: transform 1.1s var(--ease) .3s; }
.js .analise:not(.visivel) .analise__visual > span { transform: scaleX(0); }
.analise__visual--medidor { align-items: center; }
.analise__visual--medidor i {
  width: 150px; height: 75px; border-radius: 150px 150px 0 0; position: relative; margin-top: 18px;
  background: conic-gradient(from 270deg at 50% 100%, var(--verde-claro) 0 150deg, rgba(255,255,255,.12) 150deg 180deg, transparent 180deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 44px, #000 45px); mask: radial-gradient(circle at 50% 100%, transparent 44px, #000 45px);
}
.analise__visual--medidor em { position: absolute; top: 12px; right: 14px; font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ff6b5a; display: inline-flex; align-items: center; gap: 6px; }
.analise__visual--medidor em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff6b5a; animation: ping 1.6s infinite; }
.analise__visual--linha svg { width: 100%; height: 100%; overflow: visible; }
.analise__visual--linha path { fill: none; stroke: var(--verde-claro); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.analise__visual--linha path.tendencia { stroke: #ff6b5a; stroke-dasharray: 5 6; stroke-width: 1.5; transition: none; }
.js .analise:not(.visivel) .analise__visual--linha path:not(.tendencia) { stroke-dashoffset: 400; }
.analise__visual--pizza { align-items: center; }
.analise__visual--pizza i {
  width: 78px; height: 78px; border-radius: 50%;
  background: conic-gradient(var(--verde-claro) 0 42%, var(--ciano) 0 64%, var(--azul-claro) 0 79%, #ff9f5a 0 90%, rgba(255,255,255,.25) 0);
  -webkit-mask: radial-gradient(circle, transparent 22px, #000 23px); mask: radial-gradient(circle, transparent 22px, #000 23px);
  transition: transform 1.2s var(--ease) .3s;
}
.js .analise:not(.visivel) .analise__visual--pizza i { transform: rotate(-90deg) scale(.6); }
.analise__visual--caixa { flex-direction: row; align-items: flex-end; justify-content: center; gap: 8px; padding-bottom: 14px; }
.analise__visual--caixa span { width: 16px; height: var(--v); border-radius: 5px 5px 2px 2px; transform-origin: 50% 100%; transition: transform 1s var(--ease) .3s; }
.analise__visual--caixa .entra { background: var(--verde-claro); }
.analise__visual--caixa .sai { background: #ff8a6b; }
.js .analise:not(.visivel) .analise__visual--caixa span { transform: scaleY(0); }
.analise--cta {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 32px; border-radius: var(--raio);
  background: linear-gradient(150deg, var(--noite-3), var(--noite)); color: var(--texto-escuro-suave); position: relative; overflow: hidden;
}
.analise--cta::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(111,174,58,.5), transparent 70%); }
.analise--cta h3 { color: #fff; font-size: 1.35rem; position: relative; }
.analise--cta p, .analise--cta .btn { position: relative; }
.analise--cta p { color: var(--texto-escuro-suave); } /* .analise p deixava o texto cinza sobre a noite */
.cartao--destaque { background: linear-gradient(160deg, rgba(111,174,58,.1), rgba(82,111,133,.12)); border-color: rgba(111,174,58,.35); }
.hub__no--cida { background: linear-gradient(120deg, var(--verde-escuro), var(--azul-600)); border-color: var(--verde-claro); }
.hub__centro img { width: 115%; }

/* Visões por loja */
.visoes { display: grid; gap: 16px; }
.visao { padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--borda); }
.visao--admin { background: linear-gradient(160deg, var(--noite-3), var(--noite)); border-color: transparent; color: var(--texto-escuro-suave); }
.visao--admin h3 { color: #fff; }
.visao h3 { margin: 12px 0 6px; font-size: 1.3rem; }
.visao p { margin: 0; }
.visao__tag { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: rgba(111,174,58,.12); color: var(--verde-escuro); }
.visao--admin .visao__tag { background: rgba(155,212,100,.14); color: var(--verde-claro); }
.visao__lojas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.visao__lojas span { padding: 8px 14px; border-radius: 12px; font-size: .85rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }

@media (max-width: 1020px) {
  .analises { grid-template-columns: 1fr 1fr; }
  .hero__chat { max-width: 480px; }
}
@media (max-width: 640px) {
  .analises { grid-template-columns: 1fr; }
  .chat__mensagens { min-height: 0; padding: 14px; }
  .msg { font-size: .86rem; }
  .pagina-topo__logo--svg { height: 72px; }
}

/* Sobre: benefícios da nuvem */
.beneficios { display: grid; gap: 14px; }
.beneficio { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; }
.beneficio .icone { flex: none; margin: 0; width: 48px; height: 48px; }
.beneficio h3 { margin: 2px 0 4px; font-size: 1.08rem; }
.beneficio p { margin: 0; font-size: .95rem; }