/* ==========================================================================
   Conecta — V3 experimental "Observatório de inteligência"
   Cores e fonte vêm de config/conteudo.json (variáveis :root no index.html).
   ========================================================================== */
:root {
  --branco: #fff;
  --noite: color-mix(in srgb, var(--ultravioleta) 78%, #000);   /* ultravioleta profundo */
  --texto: var(--ultravioleta);
  --texto-suave: rgb(var(--ultravioleta-rgb) / .72);
  --linha: rgb(var(--ultravioleta-rgb) / .14);
  --claro-suave: rgb(255 255 255 / .7);
  --linha-escura: rgb(255 255 255 / .1);

  --container: 1280px;
  --margem: clamp(20px, 5vw, 56px);
  --secao: clamp(96px, 12vw, 168px);
  --raio-folha: clamp(28px, 4vw, 56px);
  --raio-g: 26px;
  --topo-h: 84px;

  --t-hero: clamp(2.5rem, 1rem + 4.6vw, 5.4rem);
  --t-grande: clamp(2.1rem, 1.2rem + 3.4vw, 4.4rem);
  --t-h2: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
  --t-h3: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  --t-lead: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  --t-base: 1.0625rem;
  --t-peq: .9375rem;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-saida: cubic-bezier(.16, 1, .3, 1);
  --ease-estado: cubic-bezier(.65, 0, .35, 1);
  --t-media: .35s;
  --passo: 85ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; background: var(--noite); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--fonte), "Segoe UI", system-ui, sans-serif;
  font-size: var(--t-base); line-height: 1.6;
  color: var(--branco); background: var(--noite);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* grão fino sobre a página inteira: profundidade sem imagem */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
.container { width: 100%; max-width: calc(var(--container) + var(--margem) * 2); margin-inline: auto; padding-inline: var(--margem); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--branco); color: var(--ultravioleta); font-weight: 700; }
.pular:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--veloz); outline-offset: 3px; border-radius: 6px; }

/* ---------- Tipografia ---------- */
.titulo-secao { font-size: var(--t-h2); line-height: 1.06; font-weight: 750; letter-spacing: -.03em; text-wrap: balance; }
.titulo-secao--grande { font-size: var(--t-grande); line-height: 1.02; letter-spacing: -.04em; }
.cabecalho-secao { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 72px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.cabecalho-secao > p { font-size: var(--t-lead); color: var(--claro-suave); max-width: 46ch; }

/* ---------- Botões ---------- */
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.acoes--coluna { flex-direction: column; align-items: flex-start; }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease-saida); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: scale(.97); }
.btn .icone { width: 20px; height: 20px; flex: none; transition: transform .4s var(--ease-saida); }
.btn--primario { background: var(--veloz); color: var(--ultravioleta); }
.btn--primario::before { background: var(--branco); }
.btn--primario:hover { box-shadow: 0 0 0 6px rgb(var(--veloz-rgb) / .18), 0 18px 40px -16px rgb(var(--veloz-rgb) / .7); }
.btn--primario:hover .icone { transform: translateX(4px); }
.btn--contorno { border-color: rgb(255 255 255 / .28); color: var(--branco); backdrop-filter: blur(6px); }
.btn--contorno::before { background: rgb(255 255 255 / .1); }
.btn--contorno:hover { border-color: rgb(255 255 255 / .6); }
.btn--grande { min-height: 60px; padding: 0 32px; font-size: 1.0625rem; }
.btn.is-pendente { opacity: .5; cursor: not-allowed; }
.btn.is-pendente::before { display: none; }
.btn.is-pendente small { font-weight: 500; }

.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilulas li { padding: 6px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .16); font-size: var(--t-peq); line-height: 1.3; color: rgb(255 255 255 / .86); }
.pilulas--pequenas li { padding: 5px 11px; font-size: .82rem; }

/* ==========================================================================
   Revelação (só com html.js e sem "reduzir movimento")
   ========================================================================== */
.p { display: inline-block; vertical-align: top; }
@media (prefers-reduced-motion: no-preference) {
  .js .p { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
  .js .p__i { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: left bottom; transition: transform 1s var(--ease-saida); transition-delay: calc(var(--l, 0) * 95ms + var(--atraso, 0ms)); }
  .js .is-visivel .p__i { transform: none; }
  .js [data-revelar=""] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform 1s var(--ease-saida); transition-delay: var(--atraso, 0ms); }
  .js [data-revelar=""].is-visivel { opacity: 1; transform: none; }
  .js [data-revelar="grupo"] > * { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1s var(--ease-saida); transition-delay: calc(var(--o, 0) * var(--passo)); }
  .js [data-revelar="grupo"].is-visivel > * { opacity: 1; transform: none; }
}

/* ==========================================================================
   Topo: barra flutuante em vidro
   ========================================================================== */
.topo { position: fixed; inset: 14px 0 auto; z-index: 50; padding-inline: var(--margem); pointer-events: none; }
.topo__barra {
  position: relative; pointer-events: auto;
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 64px; padding: 0 10px 0 24px; border-radius: 999px;
  background: rgb(var(--ultravioleta-rgb) / .55); border: 1px solid rgb(255 255 255 / .08);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transition: background-color .4s var(--ease);
}
.topo.is-rolado .topo__barra { background: rgb(var(--ultravioleta-rgb) / .82); }
.topo__marca img { width: 128px; height: auto; }
.topo__nav { display: flex; align-items: center; gap: 28px; }
.topo__nav ul { display: flex; gap: 4px; }
.topo__nav ul a { display: block; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .94rem; opacity: .75; transition: opacity .3s, background-color .3s; }
.topo__nav ul a:hover { opacity: 1; background: rgb(255 255 255 / .06); }
.topo__nav ul a.is-ativo { opacity: 1; background: rgb(var(--veloz-rgb) / .16); color: var(--veloz); }
.topo__cta { min-height: 44px; padding: 0 20px; font-size: .92rem; }
.topo__progresso { position: absolute; left: 28px; right: 28px; bottom: -1px; height: 1px; background: var(--veloz); transform-origin: left; transform: scaleX(var(--progresso, 0)); opacity: .7; }
.topo__menu { display: none; width: 46px; height: 46px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .06); cursor: pointer; align-items: center; justify-content: center; }
.topo__menu-linhas, .topo__menu-linhas::before, .topo__menu-linhas::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--branco); transition: transform .3s var(--ease), background-color .2s; }
.topo__menu-linhas { position: relative; }
.topo__menu-linhas::before, .topo__menu-linhas::after { content: ""; position: absolute; left: 0; }
.topo__menu-linhas::before { top: -6px; } .topo__menu-linhas::after { top: 6px; }
.topo__menu[aria-expanded="true"] .topo__menu-linhas { background: transparent; }
.topo__menu[aria-expanded="true"] .topo__menu-linhas::before { transform: translateY(6px) rotate(45deg); }
.topo__menu[aria-expanded="true"] .topo__menu-linhas::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .topo__menu { display: inline-flex; }
  .topo__nav {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; justify-content: center; gap: 32px;
    padding: 110px var(--margem) 40px; background: var(--noite);
    visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility 0s .3s;
  }
  .topo__nav ul { flex-direction: column; gap: 0; }
  .topo__nav ul a { padding: 14px 0; border-radius: 0; font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 750; letter-spacing: -.02em; opacity: 1; border-bottom: 1px solid var(--linha-escura); }
  .topo__nav ul a:hover, .topo__nav ul a.is-ativo { background: none; }
  .topo__cta { min-height: 58px; }
  body.menu-aberto { overflow: hidden; }
  body.menu-aberto .topo__nav { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
  body.menu-aberto .topo__nav li, body.menu-aberto .topo__cta { animation: sobe .6s var(--ease-saida) backwards; animation-delay: calc(80ms + var(--i, 5) * 50ms); }
}
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }

/* ==========================================================================
   Início — observatório
   ========================================================================== */
.inicio { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 0 calc(var(--raio-folha) + 28px); overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 78% 40%, rgb(var(--calmaria-rgb) / .38), transparent 60%), var(--noite); }
.inicio__rede { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.inicio__luz { position: absolute; z-index: -1; width: 640px; height: 640px; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--veloz-rgb) / .16), transparent);
  transform: translate(calc(var(--lx, 70vw) - 50%), calc(var(--ly, 40vh) - 50%)); transition: transform 1.4s var(--ease-saida); }
.inicio__grade { position: relative; }
.inicio__titulo { font-size: var(--t-hero); line-height: .98; letter-spacing: -.05em; max-width: 15ch; }
.inicio__l1 { display: block; font-weight: 800; }
.inicio__l2 { display: block; font-weight: 300; color: var(--veloz); margin-top: .06em; letter-spacing: -.045em; }
.inicio__base { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-top: clamp(28px, 4vw, 48px); }
.inicio__sub { max-width: 48ch; font-size: var(--t-lead); color: var(--claro-suave); }
.inicio__rodape { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-top: clamp(48px, 7vw, 96px); }
.inicio__publicos { display: grid; gap: 12px; }
.inicio__publicos p { font-size: .88rem; color: rgb(255 255 255 / .55); }

/* régua narrativa — acompanha as fases da rede */
.narrativa { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.narrativa__etapa { display: grid; gap: 10px; font-size: .9rem; font-weight: 600; color: rgb(255 255 255 / .45); transition: color .5s var(--ease); }
.narrativa__barra { position: relative; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .14); overflow: hidden; }
.narrativa__barra::after { content: ""; position: absolute; inset: 0; background: var(--veloz); transform-origin: left; transform: scaleX(var(--f, 0)); }
.narrativa__etapa.is-feita { color: rgb(255 255 255 / .7); }
.narrativa__etapa.is-feita .narrativa__barra::after { --f: 1; }
.narrativa__etapa.is-atual { color: var(--branco); }
.narrativa__etapa.is-atual .narrativa__barra::after { transform: scaleX(var(--fase-p, 0)); }
@media (prefers-reduced-motion: reduce) { .narrativa__etapa { color: var(--branco); } .narrativa__barra::after { transform: scaleX(1); } }

.pilulas--escuro li { border-color: rgb(var(--veloz-rgb) / .3); }

/* ==========================================================================
   Folhas: seções sobrepostas com cantos arredondados
   ========================================================================== */
.folha { position: relative; padding-block: var(--secao); border-radius: var(--raio-folha) var(--raio-folha) 0 0; margin-top: calc(-1 * var(--raio-folha)); }
.folha--clara { background: var(--suporte); color: var(--texto); }
.folha--escura { background: var(--noite); }
.folha--calmaria { background: radial-gradient(90% 70% at 15% 0%, rgb(var(--veloz-rgb) / .25), transparent 60%), var(--calmaria); }
.folha--clara .cabecalho-secao > p, .folha--clara p { color: var(--texto-suave); }

/* ==========================================================================
   A Conecta
   ========================================================================== */
.sobre__titulo { max-width: 20ch; }
.sobre__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 7vw, 120px); align-items: center; margin-top: clamp(40px, 6vw, 80px); }
.sobre__texto { display: grid; gap: 1.2em; font-size: var(--t-lead); max-width: 56ch; }
.sobre__texto p:last-child { color: var(--texto); font-weight: 600; }

.sobre__ilustracao { position: relative; }
.camadas { width: 100%; height: auto; overflow: visible; }
.camada { transition: transform 1.4s var(--ease-saida); }
.camada__plano { fill: rgb(var(--ultravioleta-rgb) / .04); stroke: rgb(var(--ultravioleta-rgb) / .35); stroke-width: 1; }
.camada--1 { transform: translateY(var(--c1, 140px)); }
.camada--2 { transform: translateY(var(--c2, 40px)); }
.camada--3 { transform: translateY(var(--c3, -60px)); }
.camada--3 .camada__plano { fill: var(--ultravioleta); stroke: none; }
.camada__pontos circle { fill: var(--calmaria); }
.camada--1 .camada__pontos circle { fill: rgb(var(--ultravioleta-rgb) / .5); }
.camada__linhas line { stroke: var(--calmaria); stroke-width: 1.2; }
.camada__hex path { fill: none; stroke: rgb(var(--veloz-rgb) / .45); stroke-width: 1; }
.camada__rota { fill: none; stroke: var(--veloz); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.camada__decisao { fill: var(--veloz); }
.camada__onda { fill: none; stroke: var(--veloz); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.camadas__legenda { position: absolute; inset: 0; pointer-events: none; }
.camadas__rotulo { position: absolute; right: 0; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--calmaria); }
.camadas__rotulo::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.camadas__rotulo--3 { top: 20%; } .camadas__rotulo--2 { top: 47%; } .camadas__rotulo--1 { top: 74%; }
@media (prefers-reduced-motion: no-preference) {
  
  .js [data-camadas]:not(.is-aberta) .camada { --c1: 90px; --c2: 40px; --c3: -10px; }
  .js [data-camadas] .camada__rota { stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 1.4s var(--ease-estado) .9s; }
  .js [data-camadas].is-aberta .camada__rota { stroke-dashoffset: 0; }
  .js [data-camadas] .camada__linhas line { opacity: 0; transition: opacity 1s var(--ease) .6s; }
  .js [data-camadas].is-aberta .camada__linhas line { opacity: 1; }
  .camada__onda { animation: onda 3s ease-out 2s infinite; }
  .js [data-camadas] .camadas__legenda { opacity: 0; transition: opacity .8s var(--ease) 1.2s; }
  .js [data-camadas].is-aberta .camadas__legenda { opacity: 1; }
}
@keyframes onda { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(4); } }

.problemas { margin-top: clamp(72px, 9vw, 120px); }
.problemas__titulo { margin-bottom: 24px; font-size: var(--t-peq); font-weight: 700; color: var(--calmaria); }
.problemas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ultravioleta); }
.problemas__lista li { padding: 28px clamp(16px, 2vw, 32px) 8px 0; }
.problemas__lista li + li { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--linha); }
.problemas__lista h4 { font-size: var(--t-h3); font-weight: 750; letter-spacing: -.01em; line-height: 1.25; color: var(--texto); }
.problemas__lista p { margin-top: 10px; }

/* ==========================================================================
   Soluções — instrumentos (vidro escuro + holofote do cursor)
   ========================================================================== */
.solucoes { background: radial-gradient(70% 50% at 100% 0%, rgb(var(--calmaria-rgb) / .35), transparent 70%), var(--noite); }
.instrumentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.instrumento {
  --mx: 50%; --my: 0%;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: var(--raio-g); padding: 28px;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(var(--veloz-rgb) / .14), transparent 60%), rgb(255 255 255 / .035);
  border: 1px solid rgb(255 255 255 / .08);
  transition: border-color .4s var(--ease), transform .6s var(--ease-saida);
}
.instrumento::before { /* borda iluminada perto do cursor */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgb(var(--veloz-rgb) / .8), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease);
}
.instrumento:hover::before { opacity: 1; }
.instrumento--1, .instrumento--4, .instrumento--5 { grid-column: span 2; flex-direction: row; gap: 32px; align-items: stretch; }
.instrumento--1 .instrumento__viz, .instrumento--4 .instrumento__viz, .instrumento--5 .instrumento__viz { flex: 0 0 42%; order: 2; margin: 0; }
.instrumento--1 { background: radial-gradient(420px circle at var(--mx) var(--my), rgb(255 255 255 / .12), transparent 60%), linear-gradient(140deg, var(--calmaria), color-mix(in srgb, var(--calmaria) 55%, var(--ultravioleta))); border-color: transparent; }
.instrumento__viz { margin: -6px -6px 22px; padding: 14px; border-radius: 18px; background: rgb(0 0 0 / .18); border: 1px solid rgb(255 255 255 / .06); display: grid; place-items: center; min-height: 130px; }
.instrumento__corpo { display: flex; flex-direction: column; flex: 1; }
.instrumento__icone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(var(--veloz-rgb) / .14); color: var(--veloz); }
.instrumento__icone .icone { width: 22px; height: 22px; }
.instrumento h3 { margin-top: 18px; font-size: var(--t-h3); font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
.instrumento--1 h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.instrumento p { margin-top: 8px; color: var(--claro-suave); }
.instrumento .pilulas { margin-top: auto; padding-top: 22px; }

/* mini-visualizações */
.viz { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.vz-pt { fill: rgb(255 255 255 / .55); }
.vz-alvo { fill: rgb(var(--veloz-rgb) / .12); stroke: var(--veloz); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.vz-alvo--2 { fill: none; }
.vz-barra { fill: rgb(var(--veloz-rgb) / .55); transform-box: fill-box; transform-origin: bottom; }
.vz-barra:nth-child(7) { fill: var(--veloz); }
.vz-linha { fill: none; stroke: var(--branco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vz-area { fill: rgb(var(--veloz-rgb) / .2); }
.vz-anel { fill: none; stroke: rgb(255 255 255 / .2); stroke-width: 1.5; stroke-dasharray: 4 6; }
.vz-anel--int { stroke: rgb(var(--veloz-rgb) / .5); stroke-dasharray: none; }
.vz-giro { transform-box: view-box; transform-origin: 95px 50px; }
.vz-no { fill: var(--veloz); }
.vz-bloco { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 1.5; }
.vz-cheio { fill: rgb(var(--veloz-rgb) / .35); stroke: none; }
.vz-aresta { stroke: rgb(255 255 255 / .25); stroke-width: 1.2; }
.vz-neuronio { fill: var(--veloz); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .instrumentos:not(.is-visivel) .viz * { animation-play-state: paused; }
  .vz-pt { animation: piscar 4s var(--ease) infinite; animation-delay: calc(var(--i) * .3s); }
  .vz-alvo--2 { animation: onda 3.2s ease-out infinite; }
  .js .vz-barra { animation: barra 1.1s var(--ease-saida) backwards; animation-delay: calc(.3s + var(--i) * 70ms); }
  .js .vz-linha { stroke-dasharray: 260; animation: traco 1.8s var(--ease-estado) .7s backwards; }
  .vz-giro { animation: giro 9s linear infinite; }
  .js .vz-bloco { animation: monta .9s var(--ease-saida) backwards; animation-delay: calc(.3s + var(--i) * 140ms); }
  .vz-neuronio { animation: pulso 2.4s var(--ease) infinite; animation-delay: calc(var(--i) * .35s); }
  .instrumento:hover .viz { --rapido: 1; }
  .instrumento:hover .vz-giro { animation-duration: 3s; }
}
@keyframes piscar { 50% { fill: var(--veloz); } }
@keyframes barra { from { transform: scaleY(0); } }
@keyframes traco { from { stroke-dashoffset: 260; } }
@keyframes giro { to { transform: rotate(360deg); } }
@keyframes monta { from { opacity: 0; transform: translateY(10px); } }
@keyframes pulso { 50% { transform: scale(1.5); fill: var(--branco); } }

/* ==========================================================================
   Processo — fluxo que se transforma
   ========================================================================== */
.processo .cabecalho-secao > p { color: var(--claro-suave); }
.fluxo { --gap: clamp(24px, 3vw, 40px); --p: 1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gap); }
.fluxo__trilha { position: absolute; top: 36px; left: 36px; right: calc((100% - 3 * var(--gap)) / 4 - 36px); height: 2px; background: rgb(255 255 255 / .2); }
.fluxo__progresso { position: absolute; inset: 0; background: linear-gradient(90deg, var(--veloz), var(--branco)); transform-origin: left; transform: scaleX(var(--p)); }
.fluxo__etapa { position: relative; }
.fluxo__glifo { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--calmaria); border: 1px solid rgb(255 255 255 / .25); transition: background-color .5s var(--ease), box-shadow .6s var(--ease-saida), transform .6s var(--ease-saida); }
.fluxo__glifo svg { width: 44px; height: 44px; overflow: visible; }
.fluxo__glifo circle { fill: var(--branco); }
.fluxo__glifo path { fill: none; stroke: var(--branco); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fluxo__glifo .g-hex { stroke: var(--veloz); }
/* cada etapa mostra o estágio correspondente da transformação */
.fluxo__etapa .g-linhas, .fluxo__etapa .g-hex, .fluxo__etapa .g-seta { display: none; }
.fluxo__etapa:nth-of-type(3) .g-linhas { display: block; }
.fluxo__etapa:nth-of-type(4) .g-dados { opacity: .5; } .fluxo__etapa:nth-of-type(4) .g-hex { display: block; }
.fluxo__etapa:nth-of-type(5) .g-dados { display: none; } .fluxo__etapa:nth-of-type(5) .g-seta { display: block; }
.fluxo__etapa.is-ativa .fluxo__glifo { background: var(--veloz); box-shadow: 0 0 0 8px rgb(var(--veloz-rgb) / .18), 0 20px 50px -20px rgb(0 0 0 / .6); }
.fluxo__etapa.is-ativa .fluxo__glifo circle { fill: var(--ultravioleta); }
.fluxo__etapa.is-ativa .fluxo__glifo path { stroke: var(--ultravioleta); }
.jornada__numero { display: block; margin-top: 22px; font-size: .9rem; font-weight: 700; color: var(--veloz); }
.fluxo h3 { margin-top: 6px; font-size: var(--t-h3); font-weight: 750; line-height: 1.22; }
.fluxo p { margin-top: 10px; color: var(--claro-suave); }
@media (prefers-reduced-motion: no-preference) {
  .js .fluxo { --p: 0; }
  .js .fluxo__etapa.is-ativa .fluxo__glifo { transform: translateY(-4px) rotate(-3deg); }
  .js .fluxo__glifo path { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1s var(--ease-estado); }
  .js .fluxo__etapa.is-ativa .fluxo__glifo path { stroke-dashoffset: 0; }
  .js .fluxo__glifo circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s var(--ease-saida); }
  .js .fluxo__etapa.is-ativa .fluxo__glifo circle { transform: none; }
}

/* ==========================================================================
   Diferenciais
   ========================================================================== */
.diferenciais__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 48px clamp(40px, 7vw, 120px); align-items: start; }
.diferenciais__cabecalho { position: sticky; top: 120px; }
.diferenciais__cabecalho p { margin-top: 24px; font-size: var(--t-lead); max-width: 36ch; }
.diferenciais__lista li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--linha); transition: padding-left .5s var(--ease-saida); }
.diferenciais__lista li:last-child { border-bottom: 1px solid var(--linha); }
.diferenciais__hex svg { width: 40px; height: 40px; }
.diferenciais__hex path { fill: none; stroke: var(--calmaria); stroke-width: 1.6; transition: fill .4s var(--ease); }
.diferenciais__lista h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; color: var(--texto); }
.diferenciais__lista p { margin-top: 8px; max-width: 58ch; }
@media (hover: hover) and (pointer: fine) {
  .diferenciais__lista li:hover { padding-left: 12px; }
  .diferenciais__lista li:hover .diferenciais__hex path { fill: var(--calmaria); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .diferenciais__hex path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--ease-estado), fill .4s var(--ease); transition-delay: calc(var(--o, 0) * 110ms + 200ms), 0s; }
  .js .diferenciais__lista.is-visivel .diferenciais__hex path { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Contato — encerramento com radar
   ========================================================================== */
.contato { overflow: hidden; isolation: isolate; }
.contato__radar { position: absolute; z-index: -1; left: 30%; top: 50%; width: 0; height: 0; }
.contato__radar span { position: absolute; left: 50%; top: 50%; width: 1200px; height: 1200px; margin: -600px 0 0 -600px;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  background: radial-gradient(closest-side, transparent 97%, rgb(var(--veloz-rgb) / .2) 98%); border: 0; }
.contato__radar span { background: none; outline: 1px solid rgb(var(--veloz-rgb) / .14); outline-offset: -1px; }
.contato__radar span:nth-child(1) { transform: scale(.25); } .contato__radar span:nth-child(2) { transform: scale(.45); }
.contato__radar span:nth-child(3) { transform: scale(.7); } .contato__radar span:nth-child(4) { transform: scale(1); }
.contato__radar span { background: linear-gradient(rgb(var(--veloz-rgb) / .05), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .contato__radar span { animation: radar 8s linear infinite; }
  .contato__radar span:nth-child(2) { animation-delay: -2s; } .contato__radar span:nth-child(3) { animation-delay: -4s; } .contato__radar span:nth-child(4) { animation-delay: -6s; }
  .contato.is-pausado .contato__radar span { animation-play-state: paused; }
}
@keyframes radar { from { transform: scale(.1); opacity: 0; } 15% { opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
.contato__grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px clamp(40px, 7vw, 112px); align-items: start; }
.contato__chamada > p { margin: 28px 0 36px; font-size: var(--t-lead); color: var(--claro-suave); max-width: 46ch; }
.contato__info { margin-top: 28px; color: var(--claro-suave); }
.formulario { padding: clamp(28px, 3.4vw, 44px); border-radius: var(--raio-g); background: rgb(255 255 255 / .05); border: 1px solid var(--linha-escura); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.formulario h3 { font-size: var(--t-h3); font-weight: 750; margin-bottom: 24px; }
.formulario fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.formulario fieldset:disabled { opacity: .45; }
.campo { display: grid; gap: 6px; }
.campo--largo, .formulario__erro, .formulario__aviso, .formulario button { grid-column: 1 / -1; }
.campo label { font-size: var(--t-peq); font-weight: 600; transition: color .3s; }
.campo:focus-within label { color: var(--veloz); }
.campo label span { font-weight: 400; color: var(--claro-suave); }
.campo input, .campo textarea { width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .16); background: rgb(0 0 0 / .2); color: var(--branco); transition: border-color .2s, box-shadow .2s; }
.campo textarea { resize: vertical; min-height: 120px; }
.campo input::placeholder, .campo textarea::placeholder { color: rgb(255 255 255 / .35); }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--veloz); box-shadow: 0 0 0 3px rgb(var(--veloz-rgb) / .25); }
.campo [aria-invalid="true"] { border-color: #ffb4a8; }
.formulario button { justify-self: start; margin-top: 6px; }
.formulario__aviso { font-size: .875rem; color: var(--claro-suave); }
.formulario__erro { font-size: var(--t-peq); color: #ffcabf; }
.formulario__pendente { margin-top: 18px; font-size: var(--t-peq); color: var(--veloz); }

/* Fase 4 — estados do envio real */
.formulario { position: relative; }
.formulario [hidden] { display: none !important; }   /* o display:grid do fieldset não pode anular o hidden */
.campo-isca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formulario__erro p + p { margin-top: 6px; }
.formulario__alternativas a { color: var(--veloz); font-weight: 600; }
.formulario button[aria-busy="true"] { cursor: progress; opacity: .8; }
.formulario__sucesso { padding: 22px 24px; border-radius: 18px; background: rgb(var(--veloz-rgb) / .12); border: 1px solid rgb(var(--veloz-rgb) / .35); color: var(--claro-suave); outline: none; }
.formulario__sucesso-titulo { margin-bottom: 6px; font-size: var(--t-h3); font-weight: 750; color: var(--branco); }
@media (prefers-reduced-motion: no-preference) {
  .formulario__sucesso:not([hidden]) { animation: sobe .6s var(--ease-saida); }
}

/* ==========================================================================
   Rodapé — discreto: logo na escala do cabeçalho, frase, navegação e contato
   ========================================================================== */
.rodape { background: var(--noite); color: var(--claro-suave); font-size: var(--t-peq); padding-top: clamp(64px, 8vw, 96px); }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }
.rodape__marca a { display: inline-block; background: none; }
.rodape__marca img { width: 128px; height: auto; }
.rodape__descricao { margin-top: 20px; max-width: 36ch; font-size: 1.0625rem; line-height: 1.55; color: rgb(255 255 255 / .82); }
.rodape li + li { margin-top: 10px; }
.rodape a { text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: color .2s, background-size .35s var(--ease-saida); }
.rodape a:hover { color: var(--branco); background-size: 100% 1px; }
.rodape__base { position: relative; display: flex; flex-wrap: wrap; gap: 8px 32px; padding-block: 24px 36px; font-size: .85rem; color: rgb(255 255 255 / .55); }
.rodape__base::before { content: ""; position: absolute; top: 0; left: var(--margem); right: var(--margem); height: 1px; background: var(--linha-escura); }

.aviso-previa { position: fixed; right: 16px; bottom: 16px; z-index: 95; max-width: min(320px, calc(100% - 32px)); padding: 10px 16px; border-radius: 14px; background: #fff3c4; color: #3d3000; font-size: .82rem; line-height: 1.4; box-shadow: 0 6px 24px rgb(0 0 0 / .25); }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1080px) {
  .instrumentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instrumento--1, .instrumento--4, .instrumento--5 { grid-column: 1 / -1; }
  .fluxo { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; }
  .fluxo__etapa { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 24px; padding-bottom: 44px; }
  .fluxo__etapa > :not(.fluxo__glifo) { grid-column: 2; }
  .fluxo__glifo { grid-row: span 3; }
  .fluxo__etapa .jornada__numero { margin-top: 4px; }
  .fluxo__trilha { top: 36px; left: 35px; right: auto; width: 2px; height: auto; bottom: var(--trilha-fim, 0px); }
  .fluxo__progresso { transform-origin: top; transform: scaleY(var(--p)); background: linear-gradient(var(--veloz), var(--branco)); }
  .diferenciais__grade { grid-template-columns: 1fr; }
  .diferenciais__cabecalho { position: static; }
}
@media (max-width: 860px) {
  .cabecalho-secao, .sobre__grade, .contato__grade { grid-template-columns: 1fr; }
  .inicio__rodape { grid-template-columns: 1fr; }
  .problemas__lista { grid-template-columns: 1fr; }
  .problemas__lista li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--linha); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .sobre__ilustracao { max-width: 460px; }
}
@media (max-width: 620px) {
  :root { --t-base: 1rem; }
  .topo { inset: 10px 0 auto; }
  .topo__barra { height: 58px; padding-left: 18px; }
  .topo__marca img, .rodape__marca img { width: 112px; }
  .inicio { padding-top: 120px; }
  .inicio__rede { opacity: .38; }  /* no celular a rede é fundo: a headline vem primeiro */
  .narrativa { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .narrativa__etapa { font-size: .68rem; }
  .acoes .btn { width: 100%; }
  .acoes--coluna { align-items: stretch; }
  .instrumentos { grid-template-columns: 1fr; }
  .instrumento--1, .instrumento--4, .instrumento--5 { flex-direction: column; gap: 0; }
  .instrumento--1 .instrumento__viz, .instrumento--4 .instrumento__viz, .instrumento--5 .instrumento__viz { order: 0; margin: -6px -6px 22px; }
  .formulario fieldset { grid-template-columns: 1fr; }
  .formulario button { justify-self: stretch; }
  .rodape__grade { grid-template-columns: 1fr; }
}