/* ============================================================
   RainbowTec — Site institucional · Design system v2
   Paleta derivada do logotipo (gradiente azul + cinza grafite)
   ============================================================ */

:root {
  /* Paleta oficial (Kit de Marca RainbowTec v1 · 2026): cores medidas no logotipo */
  --abissal: #003d66;      /* Azul Abissal: fundos escuros, rodapés */
  --rainbow: #006098;      /* Azul Rainbow: cor primária, títulos, links, ícones */
  --medio: #0088c0;        /* Azul Médio: meio do gradiente, hover */
  --ciano: #00a8e8;        /* Ciano Sinal: ação, botões, CTA, destaque de dado */
  --brilho: #7fe9ff;       /* Brilho: realce sobre azul, nunca em texto */
  --grafite: #484848;      /* Grafite: corpo de texto (cinza do wordmark) */
  --nuvem: #f2f6f9;        /* Nuvem: superfícies, cards, seções alternadas */

  --azul-900: #002b49;
  --azul-800: var(--abissal);
  --azul-700: var(--rainbow);
  --azul-600: var(--medio);
  --azul-500: var(--ciano);
  --azul-400: #33bdf0;
  --azul-100: #e6f4fb;
  --ciano-400: var(--ciano);
  --ciano-300: var(--brilho);
  --cinza-900: #1d2429;
  --cinza-700: var(--grafite);
  --cinza-600: #5b6570;
  --cinza-500: #6b7580;
  --cinza-300: #c5cfd8;
  --cinza-200: #dce4eb;
  --cinza-100: #e9eef3;
  --cinza-50: var(--nuvem);
  --branco: #ffffff;
  --verde: #16a34a;
  --verde-100: #dcfce7;
  --laranja: #f59e0b;
  --laranja-100: #fef3c7;
  --vermelho: #b23a48;

  /* Gradiente oficial · 118° · Abissal → Rainbow → Médio → Ciano → Brilho */
  --grad-oficial: linear-gradient(118deg, var(--abissal) 0%, var(--rainbow) 28%, var(--medio) 52%, var(--ciano) 78%, var(--brilho) 100%);
  --grad-marca: linear-gradient(118deg, var(--rainbow) 0%, var(--medio) 45%, var(--ciano) 100%);
  --grad-acao: linear-gradient(118deg, var(--medio) 0%, var(--ciano) 100%);
  --grad-escuro:
    radial-gradient(1100px 560px at 85% -10%, rgba(0,168,232,.32), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(0,136,192,.35), transparent 60%),
    linear-gradient(160deg, var(--azul-900), var(--abissal) 55%, #004a78);
  --corte: 34px;   /* assinatura visual: corte de 45° (34px em cards, 64px em faixas grandes) */
  --corte-g: 64px;
  --malha:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);

  --raio: 16px;
  --raio-sm: 10px;
  --sombra: 0 1px 2px rgba(7,26,58,.04), 0 12px 32px rgba(7,26,58,.07);
  --sombra-forte: 0 24px 60px rgba(7,26,58,.22);
  --largura: 1180px;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-titulo: "Saira", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --transicao: .22s cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--cinza-700);
  background: var(--branco);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--azul-600); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Tipografia do kit: Saira (display, geometria larga e traço fino) para o gesto; Inter para a leitura */
h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--cinza-900); line-height: 1.12; margin: 0 0 .6em; font-weight: 500; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.7rem); font-weight: 300; letter-spacing: .015em; }
h1 strong, h1 em { font-weight: 600; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 400; letter-spacing: .012em; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: .005em; }
h4 { font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
strong { color: var(--cinza-900); }
::selection { background: rgba(61,140,245,.25); }
:focus-visible { outline: 3px solid rgba(61,140,245,.55); outline-offset: 2px; border-radius: 4px; }

.container { width: min(var(--largura), 100% - 2.5rem); margin: 0 auto; }
.secao { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }
.secao--cinza { background: var(--cinza-50); }
.secao--escura { background: var(--grad-escuro); color: #cbd5e1; position: relative; overflow: hidden; }
.secao--escura::before { content: ""; position: absolute; inset: 0; background: var(--malha); background-size: 44px 44px; pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); }
.secao--escura > .container { position: relative; z-index: 1; }
.secao--escura h2, .secao--escura h3 { color: var(--branco); }
.secao__cabecalho { max-width: 780px; margin: 0 auto 3.25rem; text-align: center; }
.secao__cabecalho p { font-size: 1.12rem; color: var(--cinza-600); }
.secao--escura .secao__cabecalho p { color: #cbd5e1; }
.rotulo {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--fonte-titulo); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rainbow); background: var(--azul-100); padding: .4rem .9rem .38rem; border-radius: 999px; margin-bottom: 1.1rem; line-height: 1.35;
}
.rotulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-marca); flex: none; }
.secao--escura .rotulo, .hero .rotulo { color: var(--ciano-300); background: rgba(56,189,248,.14); border: 1px solid rgba(125,211,252,.25); }
.secao--escura .rotulo::before, .hero .rotulo::before { background: var(--ciano-400); }
@media (max-width: 640px) { .rotulo { font-size: .68rem; letter-spacing: .08em; text-align: left; } }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .98rem; line-height: 1.2;
  border: 2px solid transparent; cursor: pointer; transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), border-color var(--transicao);
  text-decoration: none !important; white-space: nowrap; font-family: var(--fonte);
}
.btn:hover { transform: translateY(-2px); }
.btn--primario { background: var(--grad-acao); color: var(--branco); box-shadow: 0 8px 22px rgba(0,168,232,.35); position: relative; overflow: hidden; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); border-radius: 8px; }
.btn--primario::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.2), transparent 60%); opacity: 0; transition: opacity var(--transicao); }
.btn--primario:hover::after { opacity: 1; }
.btn--primario:hover { box-shadow: 0 14px 30px rgba(0,168,232,.45); }
.btn--secundario, .btn--contorno { border-radius: 8px; }
.btn--secundario { background: var(--branco); color: var(--azul-700); border-color: var(--cinza-200); }
.btn--secundario:hover { border-color: var(--azul-400); box-shadow: 0 8px 20px rgba(7,26,58,.08); }
.btn--contorno { background: rgba(255,255,255,.04); color: var(--branco); border-color: rgba(255,255,255,.45); }
.btn--contorno:hover { border-color: var(--branco); background: rgba(255,255,255,.1); }
.btn--grande { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn svg { width: 18px; height: 18px; }
.acoes { display: flex; flex-wrap: wrap; gap: .9rem; }
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .acoes .btn { flex: 1 1 100%; }
}

/* ---------------- Header ---------------- */
.topo {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent; transition: box-shadow var(--transicao), border-color var(--transicao), background var(--transicao);
}
.topo--rolado { border-bottom-color: var(--cinza-200); box-shadow: 0 6px 24px rgba(7,26,58,.07); background: rgba(255,255,255,.95); }
.topo .container { width: min(1280px, 100% - 2.5rem); }
.topo__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; }
.topo__logo img { height: 36px; width: auto; }
.menu { display: flex; align-items: center; gap: 1.35rem; }
.menu a { color: var(--cinza-700); font-weight: 500; font-size: .93rem; position: relative; padding: .3rem 0; white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 961px) { .menu { gap: 1rem; } .menu a { font-size: .88rem; } .topo__logo img { height: 32px; } }
.menu a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--grad-marca); border-radius: 2px; transition: right var(--transicao); }
.menu a:not(.btn):hover::after, .menu a.ativo::after { right: 0; }
.menu a:hover, .menu a.ativo { color: var(--azul-600); text-decoration: none; }
.menu .btn { padding: .62rem 1.2rem; font-size: .9rem; margin-left: .25rem; }
.hamburguer { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; width: 44px; height: 44px; position: relative; }
.hamburguer span { display: block; width: 24px; height: 2.5px; background: var(--cinza-900); margin: 5px auto; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.hamburguer.aberto span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguer.aberto span:nth-child(2) { opacity: 0; }
.hamburguer.aberto span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Seletor de idiomas */
.idiomas { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--cinza-200); border-radius: 999px; background: var(--branco); }
.idiomas button, .idiomas a {
  border: 0; background: transparent; font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--cinza-500);
  padding: .32rem .55rem; border-radius: 999px; cursor: pointer; transition: background var(--transicao), color var(--transicao); text-transform: uppercase;
}
.idiomas button:hover, .idiomas a:hover { color: var(--azul-600); }
.idiomas button[aria-pressed="true"], .idiomas a.ativo { background: var(--azul-100); color: var(--azul-700); }
.rodape .idiomas { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.rodape .idiomas button, .rodape .idiomas a { color: #b9c6da; }
.rodape .idiomas button[aria-pressed="true"], .rodape .idiomas a.ativo { background: rgba(255,255,255,.14); color: var(--branco); }
html.i18n-pendente body { visibility: hidden; }

@media (max-width: 960px) {
  .hamburguer { display: block; }
  .menu {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--branco); border-bottom: 1px solid var(--cinza-200); padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-120%); opacity: 0; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .25s ease; box-shadow: var(--sombra-forte);
    max-height: calc(100vh - 76px); overflow: auto;
  }
  .menu.aberto { transform: none; opacity: 1; }
  .menu a { padding: .9rem 0; border-bottom: 1px solid var(--cinza-100); font-size: 1rem; }
  .menu a:not(.btn)::after { display: none; }
  .menu .btn { margin: .9rem 0 .4rem; justify-content: center; }
  .menu .idiomas { align-self: flex-start; margin-top: .5rem; }
}

/* ---------------- Hero ---------------- */
.hero { background: var(--grad-escuro); color: #dbe4f0; position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--malha); background-size: 48px 48px; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 90% at 60% 30%, #000 20%, transparent 100%); mask-image: radial-gradient(80% 90% at 60% 30%, #000 20%, transparent 100%); }
.hero::after {
  content: ""; position: absolute; inset: auto -10% -40% auto; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(56,189,248,.2), transparent 60%); pointer-events: none; animation: flutuar 12s ease-in-out infinite alternate;
}
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(2rem, 4vw, 3rem); position: relative; z-index: auto; }
.hero__grid > div:first-child { position: relative; z-index: 2; }
.hero--interno .hero__grid, .hero--post .hero__grid { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero h1 { color: var(--branco); text-wrap: balance; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--ciano-300), var(--azul-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { font-size: 1.18rem; color: #c7d2e2; max-width: 600px; }
.hero strong, .secao--escura strong, .card--destaque strong, .painel b { color: var(--branco); }
.hero__selos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; font-size: .86rem; color: #dbe4f0; }
.hero__selos li { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .85rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.hero__selos svg { width: 16px; height: 16px; color: var(--ciano-400); flex: none; }

/* Painel ilustrativo (mock de dashboard) */
.painel {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.14); border-radius: var(--raio);
  padding: 1.25rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--sombra-forte), inset 0 1px 0 rgba(255,255,255,.12);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; transition: transform .6s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.painel:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.painel::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(125,211,252,.5), transparent 40%, transparent 60%, rgba(61,140,245,.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.painel__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: .8rem; color: #9fb0c8; }
.painel__topo b { color: var(--branco); font-weight: 600; }
.painel__ponto { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; margin-right: .4rem; box-shadow: 0 0 0 4px rgba(34,197,94,.2); animation: pulsar 2s ease-in-out infinite; }
.painel__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
.kpi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); border-radius: var(--raio-sm); padding: .8rem; }
.kpi small { display: block; color: #9fb0c8; font-size: .72rem; line-height: 1.3; margin-bottom: .2rem; }
.kpi b { color: var(--branco); font-size: 1.35rem; font-weight: 700; font-family: var(--fonte-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.painel__lista li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; color: #dbe4f0; }
.painel__lista li span:first-child { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--grad-marca); display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; color: var(--branco); flex: none; font-style: normal; }
.tag { font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.tag--ok { background: rgba(34,197,94,.18); color: #86efac; }
.tag--bloq { background: rgba(239,68,68,.18); color: #fca5a5; }
.tag--pend { background: rgba(245,158,11,.18); color: #fcd34d; }
.tag--info { background: rgba(56,189,248,.18); color: #bae6fd; }

/* Hero: entrada escalonada */
.hero__grid > div > * { animation: subir .7s cubic-bezier(.2,.7,.2,1) both; }
.hero__grid > div > *:nth-child(2) { animation-delay: .08s; }
.hero__grid > div > *:nth-child(3) { animation-delay: .16s; }
.hero__grid > div > *:nth-child(4) { animation-delay: .24s; }
.hero__grid > div > *:nth-child(5) { animation-delay: .32s; }
.hero__grid > .painel { animation: surgirPainel 1s cubic-bezier(.2,.7,.2,1) .25s both; }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes surgirPainel { from { opacity: 0; transform: perspective(1400px) rotateY(-14deg) translateX(40px); } to { opacity: 1; transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); } }
@keyframes flutuar { from { transform: translateY(0); } to { transform: translateY(-40px); } }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,.2); } 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.08); } }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .painel { transform: none; max-width: 520px; }
  .hero__grid > .painel { animation-name: subir; }
  .hero:not(.hero--interno) .painel { display: none; }
  .hero--interno .painel { display: none; }
}

/* Página interna (hero menor) */
.hero--interno .hero__grid { grid-template-columns: 1.15fr .85fr; padding: clamp(3rem, 6vw, 5rem) 0; }
.hero--interno .hero__lead { max-width: 640px; }
.hero--interno h1 { font-size: clamp(2rem, 3.9vw, 3rem); }
.migalhas { font-size: .85rem; color: #9fb0c8; margin-bottom: 1.2rem; }
.migalhas a { color: #cbd5e1; }
.hero__lead a { color: var(--ciano-300); text-decoration: underline; text-decoration-color: rgba(125,211,252,.4); text-underline-offset: 3px; }
@media (max-width: 960px) { .hero--interno .hero__grid { grid-template-columns: 1fr; } }

/* ---------------- Faixa de clientes ---------------- */
.clientes { padding: 2.4rem 0 2.6rem; background: var(--azul-900); border-top: 1px solid rgba(255,255,255,.08); position: relative; }
.clientes p { text-align: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: #8fa3c0; margin-bottom: 1.4rem; font-weight: 600; }
.clientes__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.4rem 3rem; }
.clientes__logos img { height: 40px; width: auto; opacity: .78; transition: opacity var(--transicao), transform var(--transicao); }
.clientes__logos img:hover { opacity: 1; transform: translateY(-2px); }
.clientes__logos--painel { background: var(--grad-escuro); border-radius: var(--raio); padding: 2.25rem 2rem; box-shadow: var(--sombra); }
@media (max-width: 640px) { .clientes__logos { gap: 1.2rem 1.8rem; } .clientes__logos img { height: 30px; } }

/* ---------------- Parceria / account lead ---------------- */
.parceria { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem; align-items: center; }
.parceria__lead { font-size: 1.18rem; color: var(--cinza-900); font-weight: 500; line-height: 1.55; }
.parceria .card { padding: 1.4rem; }
.parceria .card__icone { width: 44px; height: 44px; }
.parceria .card__icone svg { width: 22px; height: 22px; }
.parceria .card h3 { font-size: 1.05rem; }
.parceria .card p { font-size: .92rem; }
@media (max-width: 960px) { .parceria { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Destaque (Sobre: account lead) */
.destaque { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start; background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); padding: 2.25rem 2.5rem; box-shadow: var(--sombra); position: relative; overflow: hidden; max-width: 980px; margin: 0 auto; }
.destaque::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--grad-marca); }
.destaque__icone { width: 64px; height: 64px; border-radius: 18px; background: var(--grad-marca); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(30,111,232,.3); }
.destaque__icone svg { width: 30px; height: 30px; color: var(--branco); }
.destaque h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.destaque p { font-size: 1.08rem; color: var(--cinza-600); margin: 0; }
@media (max-width: 640px) { .destaque { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; gap: 1.25rem; } }

/* ---------------- Números ---------------- */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center; background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.numero { padding: 2rem 1.25rem; border-left: 1px solid var(--cinza-200); }
.numero:first-child { border-left: 0; }
.numero b { display: block; font-family: var(--fonte-titulo); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.numero span { color: var(--cinza-600); font-size: .95rem; }
@media (max-width: 800px) {
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .numero { border-left: 0; border-top: 1px solid var(--cinza-200); }
  .numero:nth-child(-n+2) { border-top: 0; }
  .numero:nth-child(even) { border-left: 1px solid var(--cinza-200); }
}

/* ---------------- Storytelling (jornada) ---------------- */
.jornada { position: relative; padding-top: .5rem; }
.jornada__linha { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--ciano-400), var(--azul-600) 60%, var(--verde)); transform: translateX(-50%); border-radius: 3px; opacity: .45; }
.passo { display: grid; grid-template-columns: 1fr 72px 1fr; gap: 1.25rem; align-items: start; }
.passo + .passo { margin-top: -3.5rem; }
.passo__num {
  grid-column: 2; grid-row: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--grad-marca); color: var(--branco);
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; margin: 1.5rem auto 0; box-shadow: 0 0 0 8px var(--branco), 0 8px 20px rgba(30,111,232,.35); position: relative; z-index: 1;
  font-family: var(--fonte-titulo); transition: transform .5s cubic-bezier(.2,.7,.2,1) .15s;
}
.reveal:not(.visivel) .passo__num { transform: scale(.6); }
.passo__card { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); padding: 1.5rem 1.6rem; box-shadow: var(--sombra); position: relative; transition: transform var(--transicao), box-shadow var(--transicao); }
.passo__card:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.passo:nth-child(odd) .passo__card { grid-column: 1; grid-row: 1; }
.passo:nth-child(even) .passo__card { grid-column: 3; grid-row: 1; }
.passo:nth-child(odd) .passo__card::after, .passo:nth-child(even) .passo__card::after { content: ""; position: absolute; top: 2.5rem; width: 12px; height: 12px; background: var(--branco); border: 1px solid var(--cinza-200); transform: rotate(45deg); }
.passo:nth-child(odd) .passo__card::after { right: -7px; border-left: 0; border-bottom: 0; }
.passo:nth-child(even) .passo__card::after { left: -7px; border-right: 0; border-top: 0; }
.passo__card h3 { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .6rem; font-size: 1.2rem; }
.passo__card .modulo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .25rem .65rem; border-radius: 999px; }
.modulo--acesso { background: var(--azul-100); color: var(--azul-600); }
.modulo--terceiros { background: var(--verde-100); color: #15803d; }
.modulo--ambos { background: var(--laranja-100); color: #b45309; }
.passo__card p { font-size: .96rem; }
.passo__card ul { margin-top: .6rem; }
.passo__card li { position: relative; padding-left: 1.5rem; margin-bottom: .35rem; font-size: .93rem; }
.passo__card li::before { content: ""; position: absolute; left: 0; top: .32em; width: 15px; height: 15px; border-radius: 50%; background: var(--verde-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/9px no-repeat; }
.jornada__cta { text-align: center; margin-top: 3rem; }
@media (max-width: 860px) {
  .jornada__linha { left: 19px; }
  .passo { grid-template-columns: 40px 1fr; gap: .9rem; }
  .passo + .passo { margin-top: 1.25rem; }
  .passo__num { grid-column: 1 !important; width: 38px; height: 38px; font-size: .95rem; margin-top: 1rem; box-shadow: 0 0 0 6px var(--branco), 0 6px 14px rgba(30,111,232,.3); }
  .passo:nth-child(odd) .passo__card, .passo:nth-child(even) .passo__card { grid-column: 2; }
  .passo__card { padding: 1.25rem; }
  .passo:nth-child(odd) .passo__card::after, .passo:nth-child(even) .passo__card::after { left: -7px; right: auto; top: 1.75rem; border: 1px solid var(--cinza-200); border-right: 0; border-top: 0; }
}

/* ---------------- Cards genéricos ---------------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); padding: 1.75rem;
  box-shadow: var(--sombra); transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao); height: 100%; position: relative; overflow: hidden;
}
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-marca); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); border-color: rgba(61,140,245,.35); }
.card:hover::before { transform: scaleX(1); }
.card__icone {
  width: 52px; height: 52px; border-radius: 14px; background: var(--azul-100); color: var(--azul-600); display: grid; place-items: center; margin-bottom: 1.1rem;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.card:hover .card__icone { background: var(--grad-marca); color: var(--branco); transform: scale(1.04); }
.card__icone svg { width: 26px; height: 26px; color: inherit; }
.card__icone--verde { background: var(--verde-100); color: #15803d; }
.card__icone--ambar { background: var(--laranja-100); color: #b45309; }
.card__icone--vermelho { background: #fee2e2; color: #b91c1c; }
.card h3 { font-size: 1.15rem; }
.card p { color: var(--cinza-600); font-size: .96rem; margin-bottom: 0; }
.card ul { margin-top: .8rem; }
.card li { position: relative; padding-left: 1.3rem; font-size: .92rem; color: var(--cinza-600); margin-bottom: .3rem; }
.card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--azul-400); }
.card--destaque { background: var(--grad-escuro); border: 0; color: #cbd5e1; }
.card--destaque::before { display: none; }
.card--destaque h3 { color: var(--branco); }
.card--destaque p, .card--destaque li { color: #cbd5e1; }
.card--destaque .rotulo { color: var(--ciano-300); background: rgba(56,189,248,.14); }
.card--destaque .rotulo::before { background: var(--ciano-400); }

/* Escalonamento de entrada nos grids */
.grid > .reveal:nth-child(2), .segmentos > .reveal:nth-child(2) { transition-delay: .08s; }
.grid > .reveal:nth-child(3) { transition-delay: .16s; }
.grid > .reveal:nth-child(4) { transition-delay: .24s; }
.grid > .reveal:nth-child(5) { transition-delay: .32s; }
.grid > .reveal:nth-child(6) { transition-delay: .4s; }

/* ---------------- Dois módulos (juntos ou separados) ---------------- */
.modulos { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: stretch; }
.modulo-card { background: var(--branco); border-radius: var(--raio); padding: 2rem; border: 1px solid var(--cinza-200); box-shadow: var(--sombra); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform var(--transicao), box-shadow var(--transicao); }
.modulo-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--grad-marca); }
.modulo-card--terceiros::before { background: linear-gradient(135deg, #15803d, #22c55e 60%, #86efac); }
.modulo-card--terceiros .rotulo { background: var(--verde-100); color: #15803d; }
.modulo-card--terceiros .rotulo::before { background: #22c55e; }
.modulo-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); }
.modulo-card h3 { font-size: 1.55rem; }
.modulo-card ul { margin: 1rem 0 1.5rem; flex: 1; }
.modulo-card li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; font-size: .96rem; }
.modulo-card li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: var(--verde-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/9px no-repeat; }
.modulo-card .btn { align-self: flex-start; }
.modulos__mais {
  align-self: center; width: 72px; height: 72px; border-radius: 50%; background: var(--grad-marca); color: var(--branco);
  display: grid; place-items: center; font-size: 2rem; font-weight: 800; box-shadow: 0 8px 20px rgba(30,111,232,.35); position: relative; font-family: var(--fonte-titulo);
}
.modulos__mais::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(61,140,245,.35); animation: anel 2.4s ease-out infinite; }
@keyframes anel { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.modulos__nota { margin-top: 2rem; text-align: center; background: var(--azul-100); border: 1px dashed var(--azul-400); border-radius: var(--raio); padding: 1.25rem 1.5rem; color: var(--cinza-700); }
@media (max-width: 960px) { .modulos { grid-template-columns: 1fr; } .modulos__mais { margin: 0 auto; } .modulo-card .btn { align-self: stretch; } }
@media (max-width: 640px) { .modulos__nota { text-align: left; } }

/* ---------------- Comparativo ---------------- */
.tabela-wrap {
  overflow-x: auto; border-radius: var(--raio); border: 1px solid var(--cinza-200); box-shadow: var(--sombra); background: var(--branco);
  background:
    linear-gradient(90deg, var(--branco) 30%, rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(255,255,255,0), var(--branco) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(7,26,58,.18), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(7,26,58,.18), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat; background-color: var(--branco); background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll;
}
table.comparativo { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 680px; }
.comparativo th, .comparativo td { padding: 1.05rem 1.4rem; text-align: left; border-bottom: 1px solid var(--cinza-200); font-size: .95rem; vertical-align: top; }
.comparativo th { background: var(--cinza-50); color: var(--cinza-600); font-weight: 600; font-family: var(--fonte-titulo); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; padding: 1.1rem 1.4rem; }
.comparativo th:first-child, .comparativo td:first-child { position: sticky; left: 0; background: var(--branco); z-index: 1; font-weight: 600; color: var(--cinza-900); box-shadow: 1px 0 0 var(--cinza-200); width: 24%; font-family: var(--fonte-titulo); letter-spacing: .01em; }
.comparativo th:first-child { background: var(--cinza-50); }
.comparativo th.rt { background: var(--grad-marca); color: var(--branco); letter-spacing: .16em; position: relative; width: 42%; }
.comparativo th.rt::after { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 22px 22px 0; border-color: transparent var(--branco) transparent transparent; }
.comparativo td.rt { color: var(--azul-900); font-weight: 600; background: var(--azul-100); position: relative; padding-left: 3.1rem; }
.comparativo td.rt::before { content: ""; position: absolute; left: 1.3rem; top: 1.1rem; width: 20px; height: 20px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat, var(--grad-acao); box-shadow: 0 4px 10px rgba(0,168,232,.35); }
.comparativo td.trad { color: var(--cinza-500); position: relative; padding-left: 3.1rem; }
.comparativo td.trad::before { content: ""; position: absolute; left: 1.3rem; top: 1.1rem; width: 20px; height: 20px; border-radius: 50%; background: var(--cinza-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b23a48' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/10px no-repeat; }
.comparativo tr:last-child td { border-bottom: 0; }
.comparativo tbody tr:hover td { background-color: var(--cinza-50); }
.comparativo tbody tr:hover td.rt { background-color: #d9edf8; }
@media (max-width: 720px) {
  /* A tabela vira um cartao por etapa. Cada lado leva rotulo proprio: sem o thead,
     que aqui fica oculto, nada diria que as duas frases sao lados de um comparativo. */
  .tabela-wrap { overflow: visible; background: none; border: 0; box-shadow: none; }
  table.comparativo, .comparativo tbody, .comparativo tr, .comparativo td { display: block; min-width: 0; width: auto; }
  .comparativo thead { display: none; }
  .comparativo tr { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 1rem; overflow: hidden; }

  /* Cabecalho do cartao (a etapa). O width:24% da tabela larga vence por
     especificidade se nao for anulado aqui - era o que espremia o texto. */
  .comparativo td:first-child {
    position: static; width: auto; box-shadow: none;
    background: var(--cinza-50); color: var(--cinza-900);
    font-size: 1rem; line-height: 1.3; font-weight: 700;
    padding: .85rem 1.1rem; border-bottom: 2px solid var(--azul-700);
  }

  /* Espaco no topo de cada lado para o rotulo. */
  .comparativo td.rt, .comparativo td.trad { padding: 2.1rem 1.1rem 1rem 3rem; border-bottom: 0; }
  .comparativo td.rt::before, .comparativo td.trad::before { left: 1.1rem; top: 2.05rem; }
  .comparativo td.rt::after, .comparativo td.trad::after {
    content: attr(data-rotulo); position: absolute; top: .8rem; left: 1.1rem;
    font-family: var(--fonte-titulo); font-size: .67rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase; line-height: 1;
  }
  .comparativo td.rt::after { color: var(--azul-700); }
  .comparativo td.trad::after { color: var(--cinza-500); }
  .comparativo td.trad { border-top: 1px solid var(--cinza-200); }
}

/* ---------------- Segmentos ---------------- */
.segmentos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.segmento { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); padding: 1.4rem 1rem; text-align: center; font-weight: 600; color: var(--cinza-700); font-size: .95rem; transition: border-color var(--transicao), color var(--transicao), transform var(--transicao), box-shadow var(--transicao); }
.segmento:hover { border-color: var(--azul-400); color: var(--azul-700); transform: translateY(-3px); box-shadow: var(--sombra); }
.segmento svg { width: 30px; height: 30px; color: var(--azul-500); margin: 0 auto .7rem; display: block; transition: transform var(--transicao); }
.segmento:hover svg { transform: scale(1.1); }
@media (max-width: 960px) { .segmentos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .segmentos { grid-template-columns: repeat(2, 1fr); gap: .75rem; } .segmento { padding: 1.1rem .75rem; font-size: .88rem; } }

/* ---------------- Diferenciais / confiança ---------------- */
.confianca { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
.selo {
  display: flex; gap: 1rem; align-items: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--raio); padding: 1.25rem; margin-bottom: 1rem; transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.selo:hover { background: rgba(255,255,255,.09); border-color: rgba(125,211,252,.35); transform: translateX(4px); }
.grid .selo { margin-bottom: 0; height: 100%; }
.grid .selo:hover { transform: translateY(-4px); }
.selo__icone { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--grad-marca); display: grid; place-items: center; box-shadow: 0 8px 18px rgba(30,111,232,.3); }
.selo__icone svg { width: 24px; height: 24px; color: var(--branco); }
.selo h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.selo p { margin: 0; font-size: .92rem; color: #b9c6da; }
@media (max-width: 960px) { .confianca { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------------- Parceiros ---------------- */
.parceiros__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1rem; margin: 1.5rem auto 0; max-width: 940px; }
.parceiros__logos img {
  height: 72px; width: auto; min-width: 120px; padding: .9rem 1.4rem; background: var(--branco); border: 1px solid var(--cinza-200); border-radius: 14px;
  object-fit: contain; filter: grayscale(1) opacity(.75); transition: filter var(--transicao), transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.parceiros__logos img:hover { filter: none; transform: translateY(-3px); box-shadow: var(--sombra); border-color: rgba(61,140,245,.4); }
.secao--escura .parceiros__logos { justify-content: flex-start; margin-top: 0; }
.secao--escura .parceiros__logos img { border-color: transparent; filter: grayscale(1); }
.secao--escura .parceiros__logos img:hover { filter: none; }
@media (max-width: 640px) { .parceiros__logos img { height: 58px; min-width: 96px; padding: .7rem 1rem; } .secao--escura .parceiros__logos { justify-content: center; } }

/* ---------------- FAQ ---------------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio-sm); margin-bottom: .75rem; padding: 0 1.25rem; transition: border-color var(--transicao), box-shadow var(--transicao); }
.faq details[open] { border-color: rgba(61,140,245,.4); box-shadow: var(--sombra); }
.faq summary { cursor: pointer; padding: 1.05rem 0; font-weight: 600; color: var(--cinza-900); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--fonte-titulo); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--azul-100); color: var(--azul-600); font-size: 1.2rem; font-weight: 600; line-height: 1; transition: transform var(--transicao), background var(--transicao), color var(--transicao); }
.faq details[open] summary::after { content: "−"; background: var(--grad-marca); color: var(--branco); transform: rotate(180deg); }
.faq details p { padding-bottom: 1.1rem; color: var(--cinza-600); margin: 0; animation: subir .35s ease both; }

/* ---------------- CTA final ---------------- */
.cta { background: var(--grad-marca); color: var(--branco); text-align: center; border-radius: var(--raio); padding: clamp(2.5rem, 5vw, 4rem) 1.5rem; position: relative; overflow: hidden; box-shadow: 0 24px 60px rgba(30,111,232,.3); }
.cta::before { content: ""; position: absolute; inset: 0; background: var(--malha); background-size: 40px 40px; opacity: .7; pointer-events: none; }
.cta::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); pointer-events: none; }
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: var(--branco); }
.cta p { color: rgba(255,255,255,.92); font-size: 1.1rem; max-width: 640px; margin: 0 auto 1.6rem; }
.cta .btn--secundario { color: var(--azul-700); border-color: transparent; }
.cta .acoes { justify-content: center; }

/* ---------------- Formulário ---------------- */
.contato { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.form { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); padding: 2rem; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--grad-marca); }
.form label { display: block; font-size: .85rem; font-weight: 600; color: var(--cinza-700); margin-bottom: .35rem; }
.form input, .form select, .form textarea {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm); font: inherit; font-size: .95rem; color: var(--cinza-900); background: var(--cinza-50);
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--cinza-500); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--azul-400); background: var(--branco); box-shadow: 0 0 0 4px rgba(61,140,245,.18); }
.form textarea { resize: vertical; min-height: 96px; }
.form .campo { margin-bottom: 1rem; }
.form .linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form .check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .65rem; font-size: .85rem; color: var(--cinza-600); margin: .4rem 0 1.2rem; font-weight: 400; line-height: 1.5; }
.form .check input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--azul-600); padding: 0; }
.form .check a { text-decoration: underline; text-underline-offset: 2px; }
.form small { color: var(--cinza-500); font-size: .8rem; }
.form .sucesso { display: none; background: var(--verde-100); color: #15803d; border: 1px solid rgba(22,163,74,.3); padding: 1rem; border-radius: var(--raio-sm); font-weight: 600; }
.contato__info li { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1rem; color: var(--cinza-600); }
.contato__info svg { width: 22px; height: 22px; color: var(--azul-500); flex: none; margin-top: .15rem; }
.contato__info li > svg { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--azul-100); margin-top: 0; }
@media (max-width: 960px) { .contato { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 640px) { .form .linha { grid-template-columns: 1fr; } .form { padding: 1.5rem 1.25rem; } }

/* ---------------- Rodapé ---------------- */
.rodape { background: var(--azul-900); color: #9fb0c8; padding: 3.75rem 0 1.5rem; font-size: .92rem; position: relative; }
.rodape::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-marca); }
.rodape__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.rodape h3 { color: var(--branco); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; font-family: var(--fonte); }
.rodape a { color: #b9c6da; transition: color var(--transicao); }
.rodape a:hover { color: var(--branco); }
.rodape li { margin-bottom: .55rem; }
.rodape__logo img { height: 34px; width: auto; margin-bottom: 1rem; }
.rodape__base { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 1.5rem; font-size: .82rem; }
.rodape__base > span:last-child { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rodape__selos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.rodape__selos span { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .25rem .7rem; font-size: .75rem; color: #dbe4f0; }
@media (max-width: 960px) { .rodape__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rodape__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------------- Recurso detalhado (mock + texto) ---------------- */
.recurso { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; padding: 3rem 0; border-bottom: 1px solid var(--cinza-200); }
.recurso:last-child { border-bottom: 0; }
.recurso:nth-child(even) .recurso__visual { order: -1; }
.recurso__visual {
  background: var(--grad-escuro); border-radius: var(--raio); min-height: 320px; display: grid; place-items: center; padding: 2rem; color: var(--branco);
  box-shadow: var(--sombra-forte); position: relative; overflow: hidden; isolation: isolate;
}
.recurso__visual::before { content: ""; position: absolute; inset: 0; background: var(--malha); background-size: 36px 36px; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); }
.recurso__visual::after { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; bottom: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,.25), transparent 65%); pointer-events: none; }
.recurso__visual > * { position: relative; z-index: 1; }
.recurso h3 { font-size: 1.55rem; }
.recurso > div > ul { margin-top: .8rem; }
.recurso > div > ul > li { position: relative; padding-left: 1.6rem; margin-bottom: .45rem; color: var(--cinza-600); }
.recurso > div > ul > li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 50%; background: var(--verde-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/9px no-repeat; }
.recurso .beneficio { margin-top: 1.1rem; padding: .9rem 1.1rem; background: var(--azul-100); border-left: 4px solid var(--azul-500); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; font-size: .95rem; color: var(--cinza-900); }
@media (max-width: 960px) { .recurso { grid-template-columns: 1fr; gap: 2rem; } .recurso:nth-child(even) .recurso__visual { order: 0; } .recurso__visual { min-height: 0; padding: 1.5rem; } }

/* ---------------- Mocks de interface (ilustrações em HTML/CSS) ---------------- */
.mock {
  width: 100%; max-width: 440px; background: var(--branco); color: var(--cinza-700); border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  font-size: .8rem; line-height: 1.4; overflow: hidden; text-align: left;
}
.mock small { display: block; color: var(--cinza-500); font-size: .7rem; line-height: 1.35; }
.mock__rank span small { display: inline; }
.mock__barra { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; background: var(--cinza-50); border-bottom: 1px solid var(--cinza-200); font-weight: 600; color: var(--cinza-900); font-size: .78rem; }
.mock__barra::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fca5a5; box-shadow: 14px 0 0 #fcd34d, 28px 0 0 #86efac; margin-right: 30px; flex: none; }
.mock__barra span:last-child { margin-left: auto; color: var(--cinza-500); font-weight: 500; }
.mock__corpo { padding: .9rem; }
.mock__linha { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--cinza-100); }
.mock__linha:first-child { border-top: 0; padding-top: 0; }
.mock__linha > span:first-child { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.mock__linha small { display: block; color: var(--cinza-500); font-size: .7rem; }
.mock__linha b { color: var(--cinza-900); font-weight: 600; }
.mock .tag--ok { background: var(--verde-100); color: #15803d; }
.mock .tag--bloq { background: #fee2e2; color: #b91c1c; }
.mock .tag--pend { background: var(--laranja-100); color: #b45309; }
.mock .tag--info { background: var(--azul-100); color: var(--azul-700); }
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .8rem; }
.mock__kpi { background: var(--cinza-50); border: 1px solid var(--cinza-200); border-radius: 10px; padding: .6rem .7rem; }
.mock__kpi small { display: block; color: var(--cinza-500); font-size: .68rem; line-height: 1.3; }
.mock__kpi b { display: block; color: var(--cinza-900); font-size: 1.15rem; font-family: var(--fonte-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mock__kpi b.ok { color: #15803d; }
.mock__kpi b.bloq { color: #b91c1c; }
.mock__prog { height: 8px; border-radius: 999px; background: var(--cinza-200); overflow: hidden; margin: .35rem 0; }
.mock__prog i { display: block; height: 100%; width: var(--v, 50%); border-radius: inherit; background: var(--grad-marca); transform-origin: left; animation: crescer 1.2s cubic-bezier(.2,.7,.2,1) both; }
.mock__prog--verde i { background: linear-gradient(90deg, #15803d, #22c55e); }
.mock__prog--ambar i { background: linear-gradient(90deg, #b45309, #f59e0b); }
@keyframes crescer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mock__rodape { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem .9rem; border-top: 1px solid var(--cinza-200); background: var(--cinza-50); font-size: .74rem; color: var(--cinza-600); }
.mock__botao { display: inline-block; padding: .45rem .9rem; border-radius: 999px; background: var(--grad-marca); color: var(--branco); font-weight: 600; font-size: .74rem; }
.mock__botao--claro { background: var(--branco); color: var(--azul-700); border: 1px solid var(--cinza-300); }
.mock__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--grad-marca); color: var(--branco); display: inline-grid; place-items: center; font-size: .66rem; font-weight: 700; flex: none; font-style: normal; }
.mock__avatar--cinza { background: var(--cinza-200); color: var(--cinza-600); }
.mock__check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none; font-size: .68rem; font-weight: 800; background: var(--verde-100); color: #15803d; }
.mock__check--x { background: #fee2e2; color: #b91c1c; }
.mock__check--pend { background: var(--laranja-100); color: #b45309; }
.mock__decisao { display: grid; grid-template-columns: 1fr auto; gap: .6rem .9rem; align-items: center; padding: .8rem .9rem; border: 1px solid var(--cinza-200); border-radius: 12px; background: var(--cinza-50); margin-bottom: .7rem; }
.mock__decisao ul { display: flex; flex-wrap: wrap; gap: .35rem; grid-column: 1 / -1; }
.mock__decisao li { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--cinza-600); background: var(--branco); border: 1px solid var(--cinza-200); border-radius: 999px; padding: .15rem .5rem; }
.mock__decisao li::before { content: "✓"; color: #15803d; font-weight: 800; }
.mock__decisao li.x::before { content: "✕"; color: #b91c1c; }
.mock__decisao--bloq { border-color: #fecaca; background: #fff5f5; }
.mock__grande { font-size: .82rem; font-weight: 700; padding: .35rem .75rem; }

/* QR Code em CSS */
.mock__qr { width: 92px; height: 92px; flex: none; padding: 6px; background: var(--branco); border: 1px solid var(--cinza-200); border-radius: 8px; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: 2px; }
.mock__qr i { background: var(--cinza-900); border-radius: 1px; }
.mock__qr i:nth-child(1), .mock__qr i:nth-child(3), .mock__qr i:nth-child(7), .mock__qr i:nth-child(9), .mock__qr i:nth-child(19), .mock__qr i:nth-child(21), .mock__qr i:nth-child(25), .mock__qr i:nth-child(27), .mock__qr i:nth-child(55), .mock__qr i:nth-child(57), .mock__qr i:nth-child(73), .mock__qr i:nth-child(75) { border-radius: 2px; }
.mock__qr i.v { background: transparent; }
.mock__visita { display: flex; gap: .9rem; align-items: center; margin-bottom: .8rem; }

/* Placa de veículo */
.mock__placa { display: inline-flex; flex-direction: column; align-items: center; border: 2px solid var(--cinza-900); border-radius: 6px; background: var(--branco); overflow: hidden; font-family: "Arial Narrow", Arial, sans-serif; }
.mock__placa small { display: block; width: 100%; background: var(--azul-600); color: var(--branco); font-size: .55rem; letter-spacing: .25em; text-align: center; padding: .1rem 0; font-weight: 700; }
.mock__placa b { font-size: 1.35rem; letter-spacing: .12em; padding: .15rem .8rem .2rem; color: var(--cinza-900); font-weight: 800; }
.mock__veiculo { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; margin-bottom: .7rem; }
.mock__seta { text-align: center; color: var(--azul-500); font-size: 1.1rem; margin: .1rem 0; }

/* Gráfico de barras */
.mock__grafico { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; align-items: end; height: 84px; padding: .5rem .2rem 0; border-bottom: 1px solid var(--cinza-200); margin-bottom: .4rem; }
.mock__grafico i { display: block; height: var(--h, 50%); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--azul-400), var(--azul-600)); transform-origin: bottom; animation: crescerY 1s cubic-bezier(.2,.7,.2,1) both; position: relative; }
.mock__grafico i.est { background: repeating-linear-gradient(135deg, var(--azul-100) 0 4px, var(--azul-400) 4px 6px); opacity: .7; }
.mock__grafico i.hoje { background: linear-gradient(180deg, var(--ciano-400), var(--azul-500)); box-shadow: 0 0 0 2px rgba(56,189,248,.35); }
.mock__grafico i::after { content: attr(data-r); position: absolute; top: -1.05rem; left: 50%; transform: translateX(-50%); font-size: .6rem; color: var(--cinza-500); font-style: normal; white-space: nowrap; }
@keyframes crescerY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mock__legenda { display: flex; justify-content: space-between; font-size: .64rem; color: var(--cinza-500); padding: 0 .2rem; }

/* Liveness / vídeo */
.mock__video { position: relative; height: 150px; border-radius: 10px; background: linear-gradient(160deg, #0b2a5b, #071a3a); overflow: hidden; margin-bottom: .7rem; display: grid; place-items: center; }
.mock__face { width: 74px; height: 92px; border: 2px dashed rgba(125,211,252,.9); border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; position: relative; animation: liveness 2.2s ease-in-out infinite; }
.mock__face::before, .mock__face::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(125,211,252,.9); top: 36px; }
.mock__face::before { left: 20px; } .mock__face::after { right: 20px; }
@keyframes liveness { 0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,.35); } 50% { box-shadow: 0 0 0 10px rgba(56,189,248,0); } }
.mock__video .tag { position: absolute; top: .6rem; left: .6rem; }
.mock__video .tag--ok { background: rgba(34,197,94,.22); color: #86efac; }
.mock__video .tag--ok::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; margin-right: .35rem; animation: pulsar 1.6s ease-in-out infinite; }
.mock__video time { position: absolute; right: .6rem; bottom: .5rem; font-size: .68rem; color: #dbe4f0; font-variant-numeric: tabular-nums; }
.mock__video .mock__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; margin: 0; border-radius: 0; background: rgba(255,255,255,.15); }

/* Documento sendo lido pela IA */
.mock__scan { position: relative; overflow: hidden; }
.mock__scan::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ciano-400), transparent); box-shadow: 0 0 12px var(--ciano-400); top: 0; animation: varrer 2.6s linear infinite; }
@keyframes varrer { from { top: 0; } to { top: 100%; } }
.mock__doc { width: 30px; height: 36px; flex: none; border-radius: 4px; background: var(--cinza-50); border: 1px solid var(--cinza-300); position: relative; }
.mock__doc::before { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 3px; background: var(--cinza-300); box-shadow: 0 7px 0 var(--cinza-300), 0 14px 0 var(--cinza-300); border-radius: 2px; }

/* Score / anel */
.mock__anel { --p: 86; width: 78px; height: 78px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--azul-500) calc(var(--p) * 1%), var(--cinza-200) 0); position: relative; }
.mock__anel::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--branco); }
.mock__anel b { position: relative; font-family: var(--fonte-titulo); font-size: 1.15rem; color: var(--cinza-900); letter-spacing: -.02em; }
.mock__duas { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin-bottom: .6rem; }

/* Comparação de fornecedores (RFP) */
.mock__rank { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--cinza-100); }
.mock__rank:first-child { border-top: 0; }
.mock__rank .mock__prog { grid-column: 1; margin: 0; }
.mock__rank b { grid-column: 2; grid-row: 1 / span 2; font-family: var(--fonte-titulo); font-size: 1.05rem; color: var(--cinza-900); }
.mock__rank span { display: flex; justify-content: space-between; color: var(--cinza-900); font-weight: 600; }
.mock__rank span small { color: var(--cinza-500); font-weight: 400; }

/* Smartphone */
.mock--fone { max-width: 250px; border-radius: 34px; padding: 10px; background: #0f172a; box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.08); color: var(--cinza-700); }
.mock--fone .mock__tela { background: var(--branco); border-radius: 26px; overflow: hidden; min-height: 400px; display: flex; flex-direction: column; }
.mock__status { display: flex; justify-content: space-between; align-items: center; padding: .5rem 1rem .2rem; font-size: .64rem; color: var(--cinza-500); font-weight: 600; }
.mock__status::after { content: ""; width: 60px; height: 16px; border-radius: 999px; background: #0f172a; position: absolute; left: 50%; transform: translateX(-50%); top: 16px; }
.mock--fone { position: relative; }
.mock__app { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; font-weight: 700; color: var(--cinza-900); font-size: .8rem; border-bottom: 1px solid var(--cinza-100); }
.mock__app i { width: 22px; height: 22px; border-radius: 6px; background: var(--grad-marca); display: inline-block; }
.mock__app span:last-child { margin-left: auto; font-weight: 500; color: var(--cinza-500); font-size: .66rem; }
.mock--fone .mock__corpo { padding: .8rem 1rem; flex: 1; }
.mock__geo { display: flex; align-items: center; gap: .4rem; font-size: .7rem; color: var(--cinza-600); margin-bottom: .6rem; }
.mock__geo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul-500); box-shadow: 0 0 0 4px rgba(61,140,245,.2); }
.mock__acao { display: block; text-align: center; padding: .8rem; border-radius: 12px; background: var(--grad-marca); color: var(--branco); font-weight: 700; font-size: .84rem; margin: .5rem 0 .9rem; box-shadow: 0 10px 20px rgba(30,111,232,.3); }
.mock__acao--ok { background: linear-gradient(135deg, #15803d, #22c55e); box-shadow: 0 10px 20px rgba(22,163,74,.3); }
.mock__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.mock__chips span { font-size: .66rem; padding: .2rem .55rem; border-radius: 999px; background: var(--verde-100); color: #15803d; font-weight: 600; }
.mock__chips span.pend { background: var(--laranja-100); color: #b45309; }
.mock__perfil { display: flex; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid var(--cinza-200); border-radius: 12px; background: var(--cinza-50); }
.mock__perfil b { display: block; color: var(--cinza-900); }
.mock__perfil small { color: var(--cinza-500); font-size: .68rem; }
.mock__scanqr { display: grid; place-items: center; height: 120px; border-radius: 12px; background: linear-gradient(160deg, #0b2a5b, #071a3a); position: relative; margin-bottom: .7rem; }
.mock__scanqr .mock__qr { width: 70px; height: 70px; padding: 4px; border: 0; }
.mock__scanqr::before { content: ""; position: absolute; inset: 14px 40px; border: 2px solid rgba(125,211,252,.8); border-radius: 12px; -webkit-mask: linear-gradient(#000 0 0) top/100% 18px no-repeat, linear-gradient(#000 0 0) bottom/100% 18px no-repeat; mask: linear-gradient(#000 0 0) top/100% 18px no-repeat, linear-gradient(#000 0 0) bottom/100% 18px no-repeat; }
.mock__scanqr::after { content: ""; position: absolute; left: 40px; right: 40px; height: 2px; background: var(--ciano-400); box-shadow: 0 0 10px var(--ciano-400); animation: varrerQr 2s ease-in-out infinite alternate; }
@keyframes varrerQr { from { top: 20px; } to { top: calc(100% - 20px); } }
.mock__lista-fone li { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-top: 1px solid var(--cinza-100); font-size: .72rem; color: var(--cinza-600); }
.mock__lista-fone li b { color: var(--cinza-900); font-weight: 600; }
.mock__nav { display: flex; justify-content: space-around; padding: .6rem 0 .8rem; border-top: 1px solid var(--cinza-200); }
.mock__nav i { width: 18px; height: 18px; border-radius: 5px; background: var(--cinza-200); }
.mock__nav i:first-child { background: var(--azul-500); }

/* Certificado (Sobre) */
.mock__cert { text-align: center; padding: 1.6rem 1.2rem 1.2rem; }
.mock__cert .escudo { width: 72px; height: 72px; margin: 0 auto .8rem; border-radius: 22px; background: var(--grad-marca); display: grid; place-items: center; box-shadow: 0 14px 30px rgba(30,111,232,.35); }
.mock__cert .escudo svg { width: 36px; height: 36px; color: var(--branco); }
.mock__cert h4 { font-size: 1.35rem; margin: 0 0 .2rem; letter-spacing: -.02em; }
.mock__cert p { margin: 0; color: var(--cinza-500); font-size: .78rem; }
.mock__cert .mock__chips { justify-content: center; margin-top: .9rem; }
.mock__cert .mock__chips span { background: var(--azul-100); color: var(--azul-700); }

/* Painel compacto de heros internos: mocks dentro do painel escuro */
.painel--mock { padding: 0; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; display: grid; justify-items: center; }
.painel--mock::before { display: none; }
.painel--mock .mock { box-shadow: var(--sombra-forte), 0 0 0 1px rgba(255,255,255,.08); }

@media (max-width: 480px) {
  .mock { font-size: .76rem; }
  .mock__kpis { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .mock__kpi { padding: .5rem .5rem; }
  .mock__kpi b { font-size: 1rem; }
  .mock__decisao ul { gap: .25rem; }
}

/* Animação de entrada */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.visivel { opacity: 1; transform: none; }
.reveal:not(.visivel) .mock__prog i, .reveal:not(.visivel) .mock__grafico i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero__grid > div > *, .hero__grid > .painel { opacity: 1; transform: none; transition: none; animation: none; }
  .painel, .mock__prog i, .mock__grafico i, .mock__face, .mock__scan::after, .mock__scanqr::after, .hero::after, .modulos__mais::after, .painel__ponto { animation: none; transform: none; }
}

/* Botão flutuante WhatsApp */
.whats {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center; box-shadow: 0 10px 25px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
}
.whats--visivel { opacity: 1; transform: none; pointer-events: auto; }
.whats--visivel:hover { transform: scale(1.06); }
.whats svg { width: 30px; height: 30px; color: var(--branco); }
@media (max-width: 640px) { .whats { width: 50px; height: 50px; right: 1rem; bottom: 1rem; } .whats svg { width: 26px; height: 26px; } }

/* ---------------- Assinatura visual: corte de 45° (Kit de Marca) ---------------- */
.corte { clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%); }
.corte--g { clip-path: polygon(0 0, calc(100% - var(--corte-g)) 0, 100% var(--corte-g), 100% 100%, 0 100%); }
.card__icone, .selo__icone, .destaque__icone { clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); border-radius: 8px; }
.modulos__mais, .passo__num, .avatar, .mock__avatar, .mock__anel { clip-path: none; }
.hero h1 em { background: linear-gradient(90deg, var(--brilho), var(--ciano)); -webkit-background-clip: text; background-clip: text; }

/* Painéis escuros com corte: fundo no ::before para a sombra acompanhar a forma */
.recurso__visual, .cta, .faixa-logos {
  background: none !important; box-shadow: none; border-radius: 0; isolation: isolate;
  filter: drop-shadow(0 22px 40px rgba(0,61,102,.28));
}
.recurso__visual::before, .cta::before, .faixa-logos::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--raio) 0 var(--raio) var(--raio);
  clip-path: polygon(0 0, calc(100% - var(--corte-g)) 0, 100% var(--corte-g), 100% 100%, 0 100%);
  -webkit-mask-image: none; mask-image: none;
}
.recurso__visual::before, .faixa-logos::before { background: var(--malha) 0 0 / 36px 36px, var(--grad-escuro); }
.cta::before { background: var(--malha) 0 0 / 40px 40px, var(--grad-marca); opacity: 1; }
.recurso__visual::after, .cta::after { clip-path: polygon(0 0, calc(100% - var(--corte-g)) 0, 100% var(--corte-g), 100% 100%, 0 100%); }
.recurso__visual > *, .cta > * { position: relative; z-index: 1; }
.cta { box-shadow: none; }
.cta > * { z-index: 1; }

/* ---------------- Agentes de IA ---------------- */
.agente { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.agente > * { min-width: 0; }
.agente__lead { font-size: 1.08rem; color: var(--cinza-600); }
.agente__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.agente__cards .card { padding: 1.25rem; }
.agente__cards .card__icone { width: 42px; height: 42px; margin-bottom: .8rem; }
.agente__cards .card__icone svg { width: 22px; height: 22px; }
.agente__cards .card h3 { font-size: 1rem; }
.agente__cards .card p { font-size: .9rem; }
.agente__nota { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--cinza-600); margin-top: 1.25rem; padding: .8rem 1rem; background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio-sm); }
.agente__nota svg { width: 20px; height: 20px; flex: none; color: var(--azul-600); margin-top: .1rem; }
.agente .recurso__visual { min-height: 0; }
.mock--agente { max-width: 420px; }
.mock__msg { display: flex; gap: .55rem; align-items: flex-start; background: var(--azul-100); border-radius: 12px 12px 12px 4px; padding: .6rem .8rem; color: var(--cinza-900); font-size: .8rem; margin-bottom: .55rem; line-height: 1.4; }
.mock__avatar--ia { background: var(--grad-marca); width: 26px; height: 26px; font-size: .6rem; }
.mock__resposta { border: 1px solid var(--cinza-200); border-radius: 12px; padding: .5rem .8rem .3rem; margin: 0 0 .8rem 2rem; background: var(--branco); }
.mock__resposta--bloq { border-color: #fecaca; background: #fff7f7; }
.mock__resposta .mock__linha { padding-top: .5rem; flex-wrap: wrap; row-gap: .35rem; }
.mock--agente .tag { white-space: normal; text-align: center; line-height: 1.3; }
.mock__passos li { display: flex; gap: .5rem; align-items: center; padding: .3rem 0; font-size: .74rem; color: var(--cinza-700); }
.mock__passos li + li { border-top: 1px dashed var(--cinza-100); }
@media (max-width: 960px) { .agente { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 560px) { .agente__cards { grid-template-columns: 1fr; } }

/* Faixa "pronto para agentes de IA" nas landings */
.faixa-agente { position: relative; isolation: isolate; color: #cbd5e1; padding: 2rem 2.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2.5rem; align-items: center; filter: drop-shadow(0 22px 40px rgba(0,61,102,.28)); }
.faixa-agente::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--raio) 0 var(--raio) var(--raio); clip-path: polygon(0 0, calc(100% - var(--corte-g)) 0, 100% var(--corte-g), 100% 100%, 0 100%); background: var(--malha) 0 0 / 36px 36px, var(--grad-escuro); }
.faixa-agente .rotulo { color: var(--ciano-300); background: rgba(56,189,248,.14); border: 1px solid rgba(125,211,252,.25); }
.faixa-agente .rotulo::before { background: var(--ciano-400); }
.faixa-agente h3 { color: var(--branco); font-size: 1.35rem; margin: 0 0 .5rem; }
.faixa-agente p { margin: 0; max-width: 62ch; }
.faixa-agente .btn { white-space: nowrap; }
@media (max-width: 800px) { .faixa-agente { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; } .faixa-agente .btn { justify-self: start; } }

/* ---------------- Blog ---------------- */
.blog__filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 2rem; }
.blog__filtro { border: 1px solid var(--cinza-200); background: var(--branco); color: var(--cinza-700); font: inherit; font-size: .88rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px; cursor: pointer; transition: border-color var(--transicao), color var(--transicao), background var(--transicao); }
.blog__filtro small { color: var(--cinza-500); font-weight: 500; margin-left: .2rem; }
.blog__filtro:hover { border-color: var(--azul-400); color: var(--azul-700); }
.blog__filtro[aria-pressed="true"] { background: var(--azul-900); border-color: var(--azul-900); color: var(--branco); }
.blog__filtro[aria-pressed="true"] small { color: var(--brilho); }
.blog__busca { margin-left: auto; flex: 1 1 220px; max-width: 320px; }
.blog__busca input { width: 100%; padding: .55rem 1rem .55rem 2.4rem; border: 1px solid var(--cinza-300); border-radius: 999px; font: inherit; font-size: .9rem; background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") .9rem center/16px no-repeat; }
.blog__busca input:focus { outline: none; border-color: var(--azul-400); box-shadow: 0 0 0 4px rgba(0,168,232,.18); }
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blog__vazio { text-align: center; color: var(--cinza-500); padding: 2rem 0; }
.post-card { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra); transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); border-color: rgba(0,168,232,.4); }
.post-card[hidden], .blog__vazio[hidden], #mais-posts[hidden] { display: none; }
.post-card__capa { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-escuro); position: relative; }
.post-card__capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.post-card:hover .post-card__capa img { transform: scale(1.04); }
.post-card__semcapa { position: absolute; inset: 0; background: var(--malha) 0 0 / 28px 28px, var(--grad-escuro); }
.post-card__corpo { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; font-size: .78rem; color: var(--cinza-500); margin-bottom: .7rem; }
.post-card__cat { font-family: var(--fonte-titulo); font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 999px; background: var(--azul-100); color: var(--azul-700); }
.post-card__cat--gestao-de-terceiros { background: var(--verde-100); color: #15803d; }
.post-card__cat--educativo { background: var(--laranja-100); color: #b45309; }
.post-card__cat--tendencia { background: #ede9fe; color: #6d28d9; }
.post-card h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: .5rem; }
.post-card h3 a { color: var(--cinza-900); }
.post-card h3 a:hover { color: var(--azul-700); text-decoration: none; }
.post-card p { color: var(--cinza-600); font-size: .92rem; margin: 0 0 1rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__mais { font-weight: 600; font-size: .9rem; color: var(--azul-600); }
.post-card__mais::after { content: " →"; }
@media (max-width: 960px) { .blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog__grid { grid-template-columns: 1fr; } .blog__busca { max-width: none; } }

/* Página do artigo */
.hero--post .hero__grid, .hero--post .container { position: relative; z-index: 1; }
.hero--post { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.hero--post h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); max-width: 900px; font-weight: 400; }
.post__meta { color: #b9c6da; font-size: .95rem; margin: 0; }
.post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3.5rem; align-items: start; }
.post__capa { margin: -6rem 0 2rem; border-radius: var(--raio) 0 var(--raio) var(--raio); overflow: hidden; box-shadow: var(--sombra-forte); clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%); position: relative; z-index: 2; }
.post__capa img { width: 100%; height: auto; display: block; aspect-ratio: 2 / 1; object-fit: cover; }
.post__texto { font-size: 1.08rem; line-height: 1.75; color: var(--cinza-700); max-width: 72ch; }
.post__texto h2 { font-size: 1.7rem; margin: 2.2rem 0 .8rem; }
.post__texto h3 { font-size: 1.3rem; margin: 1.8rem 0 .6rem; }
.post__texto h4 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.post__texto p { margin: 0 0 1.2em; }
.post__texto ul, .post__texto ol { margin: 0 0 1.4em 1.4em; padding: 0; list-style: disc; }
.post__texto ol { list-style: decimal; }
.post__texto li { margin-bottom: .45em; }
.post__texto li::marker { color: var(--azul-500); }
.post__texto a { text-decoration: underline; text-underline-offset: 3px; }
.post__texto img { border-radius: var(--raio-sm); margin: 1.5rem auto; box-shadow: var(--sombra); }
.post__texto blockquote { margin: 1.8rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--azul-500); background: var(--azul-100); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; font-size: 1.05rem; color: var(--cinza-900); }
.post__texto blockquote p:last-child { margin: 0; }
.post__texto hr { border: 0; border-top: 1px solid var(--cinza-200); margin: 2rem 0; }
.post__texto table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.post__texto th, .post__texto td { border: 1px solid var(--cinza-200); padding: .6rem .8rem; text-align: left; }
.post__texto th { background: var(--cinza-50); }
.post__compartilhar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cinza-200); font-size: .9rem; color: var(--cinza-500); }
.post__compartilhar a { border: 1px solid var(--cinza-200); border-radius: 999px; padding: .35rem .9rem; font-weight: 600; color: var(--azul-700); }
.post__compartilhar a:hover { border-color: var(--azul-400); text-decoration: none; background: var(--azul-100); }
.post__lateral { position: sticky; top: 96px; display: grid; gap: 1.25rem; }
.post__cta h3 { font-size: 1.15rem; }
.post__cta .btn { margin-top: .5rem; }
.post__relacionados, .post__categorias { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); padding: 1.25rem 1.4rem; }
.post__relacionados h3, .post__categorias h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza-500); margin-bottom: .9rem; }
.post__relacionados li { padding: .6rem 0; border-top: 1px solid var(--cinza-100); }
.post__relacionados li:first-child { border-top: 0; padding-top: 0; }
.post__relacionados a { color: var(--cinza-900); font-weight: 600; font-size: .95rem; line-height: 1.35; display: block; }
.post__relacionados a:hover { color: var(--azul-700); text-decoration: none; }
.post__relacionados small { color: var(--cinza-500); font-size: .78rem; }
.post__categorias li { display: inline-block; margin: 0 .4rem .4rem 0; }
.post__categorias a { display: inline-block; border: 1px solid var(--cinza-200); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; color: var(--cinza-700); }
.post__categorias a:hover { border-color: var(--azul-400); color: var(--azul-700); text-decoration: none; }
@media (max-width: 960px) { .post__grid { grid-template-columns: 1fr; gap: 2.5rem; } .post__lateral { position: static; } .post__capa { margin-top: -3rem; } }
.blog-home__cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.blog-home__cabecalho .secao__cabecalho { margin: 0; text-align: left; max-width: 640px; }

/* ---------------- Faixa escura de logotipos (cor única) ---------------- */
.faixa-logos { position: relative; padding: 2.25rem 0; margin-top: 1.5rem; color: #dbe4f0; }
.faixa-logos--dupla .carrossel + .carrossel { margin-top: 1.75rem; }
.clientes { padding: 2.4rem 0 2.8rem; }
.clientes .container { position: relative; }

/* ---------------- Carrossel infinito de logotipos ---------------- */
.confianca > *, .parceria > *, .contato > *, .hero__grid > *, .grid > * { min-width: 0; }
.carrossel {
  overflow: hidden; width: 100%; min-width: 0; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.carrossel__faixa { display: flex; align-items: center; width: max-content; animation: deslizar var(--dur, 80s) linear infinite; will-change: transform; }
.carrossel__faixa > * { flex: none; margin-right: var(--gap, 4.5rem); display: block; }
.carrossel--inverso .carrossel__faixa { animation-direction: reverse; }
.carrossel--rapido .carrossel__faixa { --dur: 55s; }
.carrossel:hover .carrossel__faixa { animation-play-state: paused; }
/* Todos os logotipos na mesma caixa (mesma largura e altura máximas): nenhum cliente em destaque */
.carrossel img { width: var(--caixa-l, 150px); height: var(--caixa-a, 48px); object-fit: contain; object-position: center; opacity: .9; transition: opacity var(--transicao), transform var(--transicao); }
.carrossel img:hover { opacity: 1; transform: translateY(-2px); }
.carrossel__faixa > * { margin-right: var(--gap, 3.25rem); }
.carrossel--parceiros img { --caixa-l: 140px; --caixa-a: 44px; }
.carrossel + .carrossel { margin-top: 1.5rem; }
@keyframes deslizar { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .carrossel img { --caixa-l: 112px; --caixa-a: 36px; } .carrossel__faixa > * { margin-right: 2rem; } .carrossel--parceiros img { --caixa-l: 104px; --caixa-a: 34px; } }
@media (prefers-reduced-motion: reduce) {
  .carrossel__faixa { animation: none; }
  .carrossel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------------- Molduras de tela do sistema (imagens mascaradas) ---------------- */
.tela {
  display: block; position: relative; background: #0c1826; padding: 7px; border-radius: 12px 0 12px 12px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); border: 1px solid rgba(255,255,255,.12);
}
.tela img { display: block; width: 100%; height: auto; border-radius: 6px; }
.tela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.14), transparent 45%); pointer-events: none; border-radius: inherit; }

/* Hero com tela + painel sobreposto */
.hero__visual { position: relative; padding: 2.5rem 0 2.75rem; }
.hero__visual .tela { width: 100%; margin: 0; transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: right center; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); animation: subir .9s cubic-bezier(.2,.7,.2,1) .1s both; padding: 9px; }
.hero__visual .tela::before { content: ""; position: absolute; left: 50%; top: 2px; width: 46px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); transform: translateX(-50%); }
.hero__visual .painel { position: absolute; background: linear-gradient(180deg, rgba(0,43,73,.96), rgba(0,61,102,.96)); backdrop-filter: none; -webkit-backdrop-filter: none; padding: .9rem 1rem; transform: none; box-shadow: 0 24px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.hero__visual .painel:hover { transform: translateY(-3px); }
.hero__visual .painel .kpi { background: rgba(255,255,255,.08); padding: .5rem .55rem; }
.hero__visual .painel .kpi small { font-size: .6rem; line-height: 1.25; margin-bottom: .1rem; }
.hero__visual .painel .kpi b { font-size: 1.05rem; }
.hero__visual .painel--kpis { left: -7%; top: 0; width: 52%; padding: .75rem .8rem; animation: surgirCartao .9s cubic-bezier(.2,.7,.2,1) .45s both, flutuarCartao 7s ease-in-out 1.4s infinite alternate; }
.painel--kpis .painel__topo { margin-bottom: .55rem; font-size: .7rem; }
.painel--kpis .painel__kpis { margin-bottom: 0; gap: .4rem; }
.hero__visual .painel--lista { right: -7%; bottom: 0; width: 50%; padding: .3rem .85rem; animation: surgirCartao .9s cubic-bezier(.2,.7,.2,1) .7s both, flutuarCartao 8s ease-in-out 2s infinite alternate-reverse; }
.painel--lista .painel__lista li { font-size: .72rem; padding: .45rem 0; gap: .5rem; }
.painel--lista .painel__lista li:first-child { border-top: 0; }
.painel--lista .painel__lista li span:first-child { gap: .45rem; }
.painel--lista .avatar { width: 22px; height: 22px; font-size: .58rem; }
.painel--lista .tag { font-size: .62rem; padding: .16rem .45rem; }
@keyframes surgirCartao { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes flutuarCartao { from { translate: 0 0; } to { translate: 0 -6px; } }
.hero__visual .painel--mock { left: -6%; bottom: -.5rem; width: 54%; background: none; padding: 0; box-shadow: none; animation: surgirCartao .9s cubic-bezier(.2,.7,.2,1) .45s both, flutuarCartao 8s ease-in-out 1.6s infinite alternate; }
.hero__visual .painel--mock .mock { font-size: .7rem; }
.hero__visual .painel--mock .mock__kpis { gap: .4rem; }
.hero__visual .painel--mock .mock__kpi { padding: .45rem .5rem; }
.hero__visual .painel--mock .mock__kpi b { font-size: 1rem; }
.hero__visual .painel--mock .mock__rodape { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__visual .painel { animation: none; } }
.hero__visual .painel--mock .mock { font-size: .76rem; }
@media (max-width: 960px) {
  .hero__visual { padding: 0 0 2.75rem; max-width: 560px; }
  .hero__visual .tela { width: 100%; margin: 0; transform: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.4)); }
  .hero__visual .tela::before { display: none; }
  .hero__visual .painel, .hero--interno .hero__visual .painel { display: none; }
  .hero:not(.hero--interno) .hero__visual .painel--kpis { display: block; position: absolute; left: 0; right: 0; bottom: 0; width: auto; top: auto; padding: .7rem .8rem; animation: none; }
  .hero__visual .painel--kpis .painel__topo { display: none; }
}

/* Recurso: tela atrás do mock */
.recurso__visual--tela { min-height: 420px; place-items: end start; padding: 5.5rem 2rem 2rem; }
.recurso__tela { position: absolute; top: 1.5rem; right: 1.5rem; width: min(64%, 400px); z-index: 0; opacity: .96; }
.recurso__visual--tela > .mock { max-width: 400px; }
.recurso__visual--tela > .mock--fone { max-width: 240px; }
@media (max-width: 960px) { .recurso__visual--tela { padding: 5rem 1.25rem 1.25rem; min-height: 0; } .recurso__tela { width: 62%; right: 1rem; top: 1rem; } }

/* Selo 40 anos */
.selo40 { display: block; width: min(300px, 100%); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(0,61,102,.18)); }
.numeros-wrap { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 2.5rem 3rem; align-items: center; }
.numeros-wrap .numeros { grid-template-columns: repeat(2, 1fr); }
.numeros-wrap .numero:nth-child(-n+2) { border-top: 0; }
.numeros-wrap .numero:nth-child(n+3) { border-top: 1px solid var(--cinza-200); }
.numeros-wrap .numero:nth-child(odd) { border-left: 0; }
.numeros-wrap .numero:nth-child(even) { border-left: 1px solid var(--cinza-200); }
@media (max-width: 800px) { .numeros-wrap { grid-template-columns: 1fr; } .numeros-wrap .selo40 { width: min(240px, 70%); } }
.mock__selo { display: block; width: 230px; height: auto; margin: 0 auto .5rem; }
.historia__selo { margin: 0 auto 1.5rem; width: min(260px, 80%); }

/* Utilidades */
.centro { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.texto-suave { color: var(--cinza-600); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) {
  .secao__cabecalho { text-align: left; }
  .secao__cabecalho p { font-size: 1.02rem; }
}


/* ============================================================
   Rodada 6 (08/09/2026) — toques finais de layout
   Motor de partículas (js/particulas.js), faixa de confiança, jornada com palco, rede de agentes
   ============================================================ */

/* Canvas do motor: sempre decorativo, sem eventos, surge em fade de 800 ms quando o motor está pronto */
.particulas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.particulas--pronta { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .particulas { transition: none; } }

/* Hero: constelação atrás de tudo, mais fraca à esquerda (legibilidade do H1), protagonista à direita */
.hero::before, .hero::after { z-index: 0; }
.hero__particulas { z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0, rgba(0,0,0,.3) 42%, #000 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0, rgba(0,0,0,.3) 42%, #000 60%); }
.hero__visual .tela { z-index: 0; opacity: .16; animation: surgirTela 1s cubic-bezier(.2,.7,.2,1) .1s both; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)) saturate(.7); }
@keyframes surgirTela { from { opacity: 0; transform: perspective(1600px) rotateY(-10deg) rotateX(2deg) scale(.86) translateX(4%); } to { opacity: .16; transform: perspective(1600px) rotateY(-6deg) rotateX(2deg) scale(1.06) translateX(5%); } }
.hero__visual .painel { z-index: 2; }
.hero__palco { position: absolute; inset: 4% 6%; pointer-events: none; }
.hero:not(.hero--interno) .hero__visual .painel--kpis { left: -12%; top: -2%; width: 46%; }
.hero:not(.hero--interno) .hero__visual .painel--lista { right: -12%; bottom: -2%; width: 48%; }
.hero__visual .painel--lista .tag { flex: none; }
.hero__visual .painel--lista .painel__lista li span:first-child { flex: 1 1 auto; }
.hero:not(.hero--interno) .hero__visual { min-height: 460px; display: grid; align-content: center; }
@media (max-width: 960px) {
  .hero__particulas { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.22) 50%, #000 68%); mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.22) 50%, #000 68%); }
  .hero__visual .tela { animation-name: surgirTelaMovel; }
  @keyframes surgirTelaMovel { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: .38; transform: scale(.94); } }
}

/* Faixa de confiança (rodapé do hero): vidro, chips com corte 45° de 8 px, divisórias sutis, ISO 27001 em destaque */
.hero__confianca-wrap { position: relative; z-index: 2; padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.hero__selos.hero__confianca {
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 0; margin: 0; font-size: .84rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 14px 0 14px 14px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  animation: subir .6s cubic-bezier(.2,.7,.2,1) .45s both;
}
.hero__confianca li {
  display: flex; align-items: center; gap: .8rem; padding: .95rem 1.2rem; min-width: 0;
  background: none; border: 0; border-radius: 0; border-left: 1px solid rgba(255,255,255,.1);
  font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: .02em; color: #e6eef8; line-height: 1.25;
  animation: subir .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.55s + var(--i, 0) * 80ms);
}
.hero__confianca li:nth-child(1) { --i: 0; border-left: 0; } .hero__confianca li:nth-child(2) { --i: 1; } .hero__confianca li:nth-child(3) { --i: 2; } .hero__confianca li:nth-child(4) { --i: 3; } .hero__confianca li:nth-child(5) { --i: 4; }
.hero__confianca li span { min-width: 0; }
.confianca__chip {
  position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; color: var(--branco);
  background: var(--grad-marca); border-radius: 8px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.hero__confianca svg, .confianca__chip svg { width: 18px; height: 18px; color: var(--branco); }
.confianca__item--iso { font-size: .95rem; color: var(--branco); }
.confianca__item--iso .confianca__chip { width: 44px; height: 44px; background: var(--grad-acao); }
.confianca__item--iso .confianca__chip svg { width: 22px; height: 22px; }
.confianca__item--iso .confianca__chip::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(127,233,255,.55), transparent 70%); opacity: .6; animation: brilhoIso 2s ease-in-out infinite alternate; }
@keyframes brilhoIso { from { opacity: .6; } to { opacity: 1; } }
@media (max-width: 1100px) { .hero__confianca li { padding: .85rem .9rem; font-size: .8rem; gap: .6rem; } .confianca__item--iso { font-size: .88rem; } }
@media (max-width: 960px) {
  .hero__confianca-wrap { padding-bottom: 2rem; }
  .hero__selos.hero__confianca { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hero__selos.hero__confianca::-webkit-scrollbar { display: none; }
  .hero__confianca li { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; padding: .8rem 1rem; }
  .hero__selos.hero__confianca { flex-wrap: nowrap; }
  .hero:not(.hero--interno) .hero__visual { min-height: 400px; }
  .hero:not(.hero--interno) .hero__visual .tela { display: none; }
  .hero:not(.hero--interno) .hero__palco { inset: 0 0 130px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__selos.hero__confianca, .hero__confianca li, .hero__visual .tela { animation: none; }
  .hero__visual .tela { opacity: .16; transform: scale(1.06); }
  .confianca__item--iso .confianca__chip::after { animation: none; opacity: .9; }
}

/* ---------------- Jornada: cards à esquerda, palco fixo à direita ---------------- */
.jornada { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 3rem; align-items: start; padding-top: .5rem; }
.jornada__passos { position: relative; min-width: 0; }
.jornada .jornada__linha { left: 35px; transform: none; width: 3px; background: var(--cinza-200); opacity: 1; overflow: clip; border-radius: 3px; }
.jornada__linha-cheia { position: absolute; inset: 0; display: block; background: linear-gradient(180deg, var(--brilho), var(--ciano) 35%, var(--medio) 70%, var(--rainbow)); transform-origin: top; transform: scaleY(0); will-change: transform; }
/* linha preenchida pelo scroll: CSS (animation-timeline: view) quando há suporte; senão o JS aplica o transform */
@supports (animation-timeline: view()) {
  .jornada--view .jornada__linha-cheia { animation: preencherLinha linear both; animation-timeline: view(); animation-range: cover 50vh cover calc(100% - 50vh); }
}
@keyframes preencherLinha { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.jornada .passo { grid-template-columns: 72px minmax(0, 1fr); gap: 1.25rem; }
.jornada .passo + .passo { margin-top: 1.5rem; }
.jornada .passo__num { grid-column: 1; }
.jornada .passo:nth-child(odd) .passo__card, .jornada .passo:nth-child(even) .passo__card { grid-column: 2; grid-row: 1; }
.jornada .passo:nth-child(odd) .passo__card::after, .jornada .passo:nth-child(even) .passo__card::after { left: -7px; right: auto; top: 2.5rem; border: 1px solid var(--cinza-200); border-right: 0; border-top: 0; }
/* revelação: entra de baixo (24 px); futuro = 70 %; ativo = borda ciano; lido = normal */
.jornada .passo.reveal { transform: translateY(24px); }
.jornada .passo.reveal.visivel { transform: none; }
.jornada .passo.visivel:not(.passo--ativo):not(.passo--lido) { opacity: .7; }
.passo__card { transition: transform var(--transicao), box-shadow var(--transicao), border-color .35s ease; }
.passo--ativo .passo__card { border-color: rgba(0,168,232,.6); box-shadow: 0 0 0 3px rgba(0,168,232,.12), var(--sombra-forte); }
.passo--ativo .passo__card::after { border-color: rgba(0,168,232,.6); }
.passo--ativo .passo__num { box-shadow: 0 0 0 8px var(--branco), 0 0 0 10px rgba(0,168,232,.35), 0 8px 20px rgba(30,111,232,.35); }

/* Palco: painel escuro com corte (herda .recurso__visual), fixo enquanto os passos rolam */
.jornada__palco { position: sticky; top: 100px; aspect-ratio: 4 / 3; min-height: 0; padding: 0; display: block; }
.jornada__palco::before { border-radius: var(--raio) 0 var(--raio) var(--raio); }
.jornada__palco > .particulas { position: absolute; inset: 0; z-index: 0; opacity: 0; }
.jornada__palco > .particulas--pronta { opacity: .9; }
.cena { position: absolute; inset: 0; display: grid; place-items: center; padding: 4.5rem 1.5rem 1.75rem; opacity: 0; transform: translateY(calc(26px * var(--dir, 1))) scale(.985); pointer-events: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); z-index: 1; }
.cena--ativa { opacity: 1; transform: none; }
.cena .mock { width: 100%; max-width: 400px; }
/* micro-animação de cada cena, uma vez, ao entrar (≤ 1,2 s) */
.cena .mock__prog i, .cena .mock__grafico i, .cena .mock__scan::after, .cena .mock__face { animation: none; }
.cena--ativa .mock__prog i, .cena--animar .mock__prog i { animation: crescer 1.2s cubic-bezier(.2,.7,.2,1) both; }
.cena--ativa .mock__grafico i, .cena--animar .mock__grafico i { animation: crescerY 1s cubic-bezier(.2,.7,.2,1) both; }
.cena--ativa .mock__scan::after, .cena--animar .mock__scan::after { animation: varrerUma 1.2s ease-in-out both; }
@keyframes varrerUma { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.cena--ativa .mock__face, .cena--animar .mock__face { animation: liveness 2.2s ease-in-out 1; }
.cena .mock__video .tag--ok::before { animation: none; }
/* mini-mapa de áreas (decorativo) */
.mock__mapa { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: .6rem 0 .7rem; }
.mock__mapa i { display: block; height: 26px; border-radius: 6px; background: var(--cinza-100); border: 1px solid var(--cinza-200); position: relative; }
.mock__mapa i.ok { background: var(--verde-100); border-color: #bbf7d0; }
.mock__mapa i.ativa { background: var(--azul-100); border-color: var(--azul-400); }
.mock__mapa i.ativa b { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 0 4px rgba(0,168,232,.25); animation: pulsar 2s ease-in-out infinite; }

@media (max-width: 959px) {
  .jornada { display: block; }
  .jornada__palco { display: none; }
  .jornada .jornada__linha { left: 19px; }
  .jornada .passo { grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; }
  .jornada .passo + .passo { margin-top: 1.25rem; }
  .jornada .passo:nth-child(odd) .passo__card::after, .jornada .passo:nth-child(even) .passo__card::after { top: 1.75rem; }
  .jornada .passo.visivel:not(.passo--ativo):not(.passo--lido) { opacity: 1; }
  /* cena reduzida dentro do card, acima do texto */
  .passo__cena { position: relative; height: 200px; margin: -.25rem 0 1rem; border-radius: 10px 0 10px 10px; overflow: hidden; isolation: isolate; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); background: var(--malha) 0 0 / 28px 28px, var(--grad-escuro); }
  .passo__cena .cena { padding: .75rem; opacity: 1; transform: none; zoom: .62; align-items: start; }
  .passo__cena .cena .mock { max-width: 100%; }
}
@media (max-width: 479px) { .passo__cena .cena { zoom: .55; } }
@media (prefers-reduced-motion: reduce) {
  .jornada .passo.reveal, .cena { transition: none; }
  .jornada__linha-cheia { animation: none; transform: scaleY(1); }
  .cena--ativa .mock__prog i, .cena--ativa .mock__grafico i, .cena--ativa .mock__scan::after, .cena--ativa .mock__face, .mock__mapa i.ativa b { animation: none; }
  .jornada .passo.visivel:not(.passo--ativo):not(.passo--lido) { opacity: 1; }
}

/* ---------------- Agentes de IA: rede de integrações viva atrás do console ---------------- */
.agente__palco { display: block !important; padding: 1.25rem 1.25rem 1.5rem; min-height: 0; }
.agente__palco > .particulas { position: absolute; inset: 0; z-index: 0; }
.rede { position: relative; width: 100%; height: 300px; z-index: 1; margin-bottom: .25rem; }
.rede__no { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .3rem; width: 96px; text-align: center; }
.rede__no > i {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--brilho);
  background: rgba(0,43,73,.82); border: 1px solid rgba(127,233,255,.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.rede__no > i svg { width: 19px; height: 19px; }
.rede__no > i.rede__no--ativo { border-color: var(--brilho); background: rgba(0,96,152,.95); box-shadow: 0 0 0 4px rgba(127,233,255,.22), 0 0 22px rgba(0,168,232,.65); }
.rede__no span { font-family: var(--fonte-titulo); font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #b9d7ea; line-height: 1.2; }
.rede__no--centro { width: 110px; }
.rede__no--centro > i { width: 96px; height: 96px; background: radial-gradient(circle, rgba(0,168,232,.22), rgba(0,168,232,.05) 55%, transparent 72%); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.agente__palco .mock--agente { position: relative; z-index: 2; margin: 0 auto; width: 100%; max-width: 420px; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.mock__passos li { transition: background .3s ease, color .3s ease; border-radius: 6px; margin: 0 -.3rem; padding-left: .3rem !important; padding-right: .3rem !important; }
.mock__passos li.acende { background: var(--azul-100); color: var(--azul-900); }
.mock__passos li.acende .mock__check { box-shadow: 0 0 0 3px rgba(0,168,232,.25); }
@media (max-width: 959px) {
  .rede { height: 250px; }
  .rede__no { width: 84px; }
  .rede__no > i { width: 38px; height: 38px; }
  .rede__no span { font-size: .55rem; letter-spacing: .05em; }
  .rede__no--centro > i { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) { .rede__no > i, .mock__passos li { transition: none; } }

/* ============================================================
   Rodada 7 (08/09/2026) — ajustes pedidos pela Evellyn: problema e segmentos em azul, módulos modernizados,
   palco da jornada integrado à linha do tempo, agentes de IA como imagem única com partículas ao fundo
   ============================================================ */

/* Cards de vidro sobre fundo escuro (problema, agentes) */
.secao--problema .card, .secao--agentes .card {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #c7d2e2;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 18px 40px rgba(0,20,40,.25);
}
.secao--problema .card:hover, .secao--agentes .card:hover { background: rgba(255,255,255,.09); border-color: rgba(127,233,255,.4); box-shadow: 0 26px 50px rgba(0,20,40,.35); }
.secao--problema .card h3, .secao--agentes .card h3 { color: var(--branco); }
.secao--problema .card p, .secao--agentes .card p { color: #c7d2e2; }

/* 2) Problema: azul profundo com aviso âmbar discreto; números grandes decorativos */
.secao--problema { background: radial-gradient(900px 480px at 12% 0%, rgba(245,158,11,.14), transparent 60%), radial-gradient(800px 500px at 100% 100%, rgba(0,168,232,.22), transparent 60%), linear-gradient(160deg, var(--azul-900), var(--abissal) 60%, #003a60); }
.secao--problema .secao__cabecalho p { color: #d3dcea; font-size: 1.15rem; }
.secao--problema .secao__cabecalho h2 { text-wrap: balance; }
.secao--problema .card { padding: 2rem 1.75rem 1.9rem; }
.secao--problema .card::before { background: linear-gradient(90deg, var(--laranja), var(--brilho)); }
.secao--problema .card__icone--ambar { width: 56px; height: 56px; background: linear-gradient(135deg, #b45309, var(--laranja)); color: var(--branco); box-shadow: 0 12px 26px rgba(245,158,11,.28); }
.secao--problema .card:hover .card__icone { background: linear-gradient(135deg, #b45309, var(--laranja)); color: var(--branco); }
.secao--problema .card__icone svg { width: 28px; height: 28px; }
.card__num { position: absolute; right: 1.4rem; top: .9rem; font-family: var(--fonte-titulo); font-weight: 300; font-size: 3.4rem; line-height: 1; letter-spacing: .02em; color: rgba(255,255,255,.09); pointer-events: none; transition: color .35s ease; }
.secao--problema .card:hover .card__num { color: rgba(127,233,255,.22); }
.secao--problema .card h3 { font-size: 1.25rem; margin-top: .2rem; }

/* 3) Dois módulos: cards com corte 45°, ícone de módulo, conector animado, nota em destaque */
#solucoes { background: radial-gradient(900px 420px at 50% 0%, rgba(0,168,232,.08), transparent 65%), var(--branco); }
.modulo-card { border-radius: var(--raio) 0 var(--raio) var(--raio); clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%); box-shadow: none; filter: drop-shadow(0 16px 34px rgba(7,26,58,.10)); border-color: var(--cinza-200); }
.modulo-card:hover { box-shadow: none; filter: drop-shadow(0 26px 50px rgba(7,26,58,.16)); border-color: rgba(0,168,232,.4); }
.modulo-card--terceiros:hover { border-color: rgba(34,197,94,.45); }
.modulo-card__topo { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.modulo-card__topo .rotulo { margin-bottom: 0; }
.modulo-card__icone { width: 48px; height: 48px; flex: none; display: grid; place-items: center; color: var(--branco); background: var(--grad-marca); border-radius: 8px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); box-shadow: 0 10px 22px rgba(0,136,192,.28); }
.modulo-card--terceiros .modulo-card__icone { background: linear-gradient(135deg, #15803d, #22c55e 70%, #86efac); box-shadow: 0 10px 22px rgba(22,163,74,.28); }
.modulo-card__icone svg { width: 24px; height: 24px; }
.modulo-card h3 { font-size: 1.65rem; }
.modulo-card li { font-size: .95rem; }
.modulos__mais { box-shadow: 0 10px 26px rgba(0,136,192,.35); }
.modulos__mais::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1.5px dashed rgba(0,168,232,.45); animation: girar 28s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.modulos__nota { text-align: left; border: 1px solid rgba(0,168,232,.35); background: linear-gradient(90deg, var(--azul-100), var(--branco)); padding: 1.25rem 1.5rem 1.25rem 4.2rem; position: relative; border-radius: var(--raio) 0 var(--raio) var(--raio); }
.modulos__nota::before { content: ""; position: absolute; left: 1.35rem; top: 1.2rem; width: 34px; height: 34px; border-radius: 8px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); background: var(--grad-acao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center/18px no-repeat; }
@media (max-width: 640px) { .modulos__nota { padding-left: 1.25rem; padding-top: 3.4rem; } .modulos__nota::before { left: 1.25rem; top: 1rem; } .modulos__mais::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .modulos__mais::before { animation: none; } }

/* 4) Jornada: palco ligado à linha do tempo (número do passo, progresso 1–8, conector do card ativo, cena entra na direção do scroll) */
.palco__topo { position: absolute; left: 1.5rem; right: 1.5rem; top: 1.1rem; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; pointer-events: none; }
.palco__num { font-family: var(--fonte-titulo); font-weight: 300; font-size: 2.4rem; line-height: 1; color: rgba(255,255,255,.9); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.palco__num::after { content: ""; display: inline-block; width: 26px; height: 2px; margin: 0 0 .55rem .6rem; vertical-align: middle; background: linear-gradient(90deg, var(--ciano), transparent); }
.palco__progresso { display: flex; gap: 6px; align-items: center; }
.palco__progresso i { display: block; width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); transition: background .35s ease, width .35s cubic-bezier(.2,.7,.2,1); }
.palco__progresso i.feito { background: rgba(0,168,232,.75); }
.palco__progresso i.ativo { width: 36px; background: linear-gradient(90deg, var(--ciano), var(--brilho)); box-shadow: 0 0 10px rgba(0,168,232,.6); }
.jornada__palco::after { content: ""; position: absolute; left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, rgba(0,168,232,.0), rgba(0,168,232,.6) 30%, rgba(0,136,192,.6) 80%, transparent); z-index: 2; border-radius: 0; clip-path: none; }
@media (min-width: 960px) {
  .jornada .passo--ativo .passo__card::before { content: ""; position: absolute; right: calc(-3rem - 2px); top: 2.55rem; width: calc(3rem + 2px); height: 2px; background: linear-gradient(90deg, rgba(0,168,232,.85), rgba(0,168,232,.35)); animation: surgirConector .4s cubic-bezier(.2,.7,.2,1) both; transform-origin: left; }
  @keyframes surgirConector { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.cena .mock { box-shadow: 0 24px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); }
.cena--ativa .mock { animation: cenaEntra .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cenaEntra { from { transform: translateY(6px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cena--ativa .mock, .jornada .passo--ativo .passo__card::before { animation: none; } .palco__progresso i { transition: none; } }

/* 5) Agentes de IA: imagem única — partículas ao fundo, texto sobreposto, glifo do agente nascendo da constelação */
.secao--agentes { background: linear-gradient(180deg, #002b49 0%, var(--abissal) 55%, #003a60 100%); border-bottom: 1px solid rgba(255,255,255,.08); isolation: isolate; }
.secao--agentes::before { -webkit-mask-image: radial-gradient(80% 90% at 70% 40%, #000 20%, transparent 100%); mask-image: radial-gradient(80% 90% at 70% 40%, #000 20%, transparent 100%); }
.agentes__particulas { z-index: 0; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0, rgba(0,0,0,.3) 45%, #000 62%); mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0, rgba(0,0,0,.3) 45%, #000 62%); }
.secao--agentes .agente__lead { color: #c7d2e2; }
.secao--agentes .agente__cards .card__icone { background: rgba(127,233,255,.12); color: var(--brilho); }
.secao--agentes .agente__cards .card:hover .card__icone { background: var(--grad-acao); color: var(--branco); }
.secao--agentes .agente__nota { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #c7d2e2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.secao--agentes .agente__nota svg { color: var(--brilho); }
/* Console dentro de um quadro de vidro com corte 45° (mesma família dos cards à esquerda), acento no topo e conector até a coluna de texto */
.agente__visual { position: relative; display: grid; gap: 0; align-self: center; padding: 2.25rem 2rem 2rem; isolation: isolate; }
.agente__visual::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--medio), var(--ciano)) 0 0 / 42% 3px no-repeat, linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--raio) 0 var(--raio) var(--raio);
  clip-path: polygon(0 0, calc(100% - var(--corte-g)) 0, 100% var(--corte-g), 100% 100%, 0 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.agente__visual::after { content: ""; position: absolute; right: 1.5rem; bottom: 1.5rem; width: 40px; height: 40px; border-radius: 8px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); background: var(--grad-acao) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z%27/%3E%3Cpath d=%27M9 12l2 2 4-4%27/%3E%3C/svg%3E") center/20px no-repeat; box-shadow: 0 10px 22px rgba(0,168,232,.35); }
.agente__visual .mock--agente { position: relative; z-index: 1; margin-bottom: 1.75rem; }
.agente__visual .mock--agente { max-width: none; }
.agente__conector { position: absolute; left: 100%; top: 50%; width: 3rem; height: 0; border-top: 1px dashed rgba(127,233,255,.45); }
.agente__conector::before, .agente__conector::after { content: ""; position: absolute; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--brilho); box-shadow: 0 0 10px rgba(127,233,255,.8); }
.agente__conector::before { left: -3px; } .agente__conector::after { right: -3px; }
@media (max-width: 960px) { .agente__conector { display: none; } .agente__visual { padding: 1.5rem 1rem 1.25rem; } .agente__visual::after { width: 34px; height: 34px; right: 1rem; bottom: 1rem; } .agente__visual .mock--agente { margin-bottom: 1.5rem; } }
.agente__visual .mock--agente { margin: 0 auto; width: 100%; max-width: 420px; box-shadow: 0 34px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
@media (max-width: 960px) {
  .agentes__particulas { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.24) 55%, #000 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.24) 55%, #000 70%); }
}

/* 6) Segmentos: fundo azul, cartões de vidro */
.secao--segmentos { background: radial-gradient(900px 500px at 85% 0%, rgba(0,168,232,.25), transparent 60%), linear-gradient(160deg, var(--azul-900), var(--abissal) 60%, #004a78); }
.secao--segmentos .segmento { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #e6eef8; }
.secao--segmentos .segmento svg { color: var(--brilho); }
.secao--segmentos .segmento:hover { background: rgba(255,255,255,.1); border-color: rgba(127,233,255,.5); color: var(--branco); box-shadow: 0 14px 30px rgba(0,0,0,.25); }

/* ---------------- Rodada 8 (08/09/2026): "Por que a RainbowTec" em branco, FAQ em azul ---------------- */
.secao--diferenciais { background: var(--branco); }
.secao--diferenciais strong[style] { color: var(--cinza-900) !important; }
.secao--diferenciais .btn--contorno { color: var(--rainbow); border-color: var(--rainbow); background: transparent; }
.secao--diferenciais .btn--contorno:hover { background: var(--azul-100); border-color: var(--medio); }
.secao--diferenciais .selo { background: var(--nuvem); border-color: var(--cinza-200); box-shadow: none; }
.secao--diferenciais .selo:hover { background: var(--branco); border-color: rgba(0,168,232,.45); box-shadow: var(--sombra); }
.secao--diferenciais .selo p { color: var(--cinza-600); }
.secao--faq .faq details { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.secao--faq .faq details:hover { border-color: rgba(127,233,255,.35); }
.secao--faq .faq details[open] { background: rgba(255,255,255,.09); border-color: rgba(127,233,255,.5); box-shadow: 0 18px 40px rgba(0,20,40,.3); }
.secao--faq .faq summary { color: var(--branco); }
.secao--faq .faq summary::after { background: rgba(255,255,255,.1); color: var(--brilho); }
.secao--faq .faq details[open] summary::after { background: var(--grad-acao); color: var(--branco); }
.secao--faq .faq details p { color: #c7d2e2; }
.secao--faq .faq details p a { color: var(--brilho); }

/* ---------------- Rodada 9 (08/09/2026): fundos intercalados azul escuro / branco / azul claro ---------------- */
.secao--claro { --fundo: #e3f2fb; background: linear-gradient(180deg, #e8f5fc 0%, #dcedf8 100%); }
.secao--claro .rotulo { background: var(--branco); }
.secao--claro .jornada__linha { background: rgba(0,61,102,.14); }
.secao--claro .passo__num { box-shadow: 0 0 0 8px var(--fundo), 0 8px 20px rgba(30,111,232,.35); }
.secao--claro .passo--ativo .passo__num { box-shadow: 0 0 0 8px var(--fundo), 0 0 0 10px rgba(0,168,232,.35), 0 8px 20px rgba(30,111,232,.35); }
@media (max-width: 959px) { .secao--claro .passo__num { box-shadow: 0 0 0 6px var(--fundo), 0 6px 14px rgba(30,111,232,.3); } }
.secao--claro .numeros, .secao--claro .post-card, .secao--claro .passo__card { border-color: rgba(0,61,102,.12); }
.secao--claro .modulos__nota { background: var(--branco); }
#contato .form, #comparativo .tabela-wrap { border-color: var(--cinza-200); }

/* ---------------- Rodada 11 (08/09/2026): agentes de IA em formato de diagrama ---------------- */
.secao--agentes .secao__cabecalho { max-width: 860px; }
.secao--agentes .secao__cabecalho .agente__lead { color: #c7d2e2; font-size: 1.1rem; }
.fluxo { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; grid-template-areas: "agente trilho plataforma" "etapas etapas etapas"; gap: 2.25rem 1.5rem; align-items: center; margin-top: 1rem; }
.fluxo__no { display: grid; justify-items: center; text-align: center; gap: .6rem; padding: 1.4rem 1.1rem 1.25rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--raio) 0 var(--raio) var(--raio); clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); position: relative; }
.fluxo__no--agente { grid-area: agente; }
.fluxo__no--plataforma { grid-area: plataforma; background: linear-gradient(160deg, rgba(0,168,232,.22), rgba(255,255,255,.05)); border-color: rgba(127,233,255,.4); }
.fluxo__no > span { font-family: var(--fonte-titulo); font-weight: 600; font-size: .98rem; color: var(--branco); letter-spacing: .01em; line-height: 1.25; }
.fluxo__icone { width: 60px; height: 60px; display: grid; place-items: center; color: var(--branco); background: var(--grad-acao); border-radius: 10px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); box-shadow: 0 12px 26px rgba(0,168,232,.35); }
.fluxo__icone svg { width: 30px; height: 30px; }
.fluxo__no--agente .fluxo__icone { background: linear-gradient(135deg, var(--rainbow), var(--medio)); animation: respirar 3s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { box-shadow: 0 12px 26px rgba(0,168,232,.35); } 50% { box-shadow: 0 12px 34px rgba(0,168,232,.6), 0 0 0 6px rgba(127,233,255,.12); } }
.fluxo__modulos { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .2rem; }
.fluxo__modulo { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--fonte-titulo); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .32rem .6rem; border-radius: 999px; background: rgba(0,168,232,.18); color: var(--brilho); border: 1px solid rgba(127,233,255,.3); }
.fluxo__modulo--terceiros { background: rgba(34,197,94,.16); color: #86efac; border-color: rgba(134,239,172,.35); }
.fluxo__modulo i { display: inline-grid; } .fluxo__modulo svg { width: 13px; height: 13px; }
/* trilho: a linha por onde o pedido viaja, com seta na ponta, rótulo e dois pulsos em movimento */
.fluxo__trilho { grid-area: trilho; position: relative; height: 2px; background: linear-gradient(90deg, rgba(0,168,232,.35), var(--ciano) 40%, var(--brilho) 70%, var(--ciano)); align-self: center; margin: 0 .25rem; }
.fluxo__trilho::before { content: ""; position: absolute; right: -2px; top: -6px; border: 7px solid transparent; border-left: 11px solid var(--brilho); border-right: 0; filter: drop-shadow(0 0 6px rgba(127,233,255,.8)); }
.fluxo__trilho b { position: absolute; left: 50%; top: -2.1rem; transform: translateX(-50%); font-family: var(--fonte-titulo); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brilho); background: rgba(0,43,73,.85); border: 1px solid rgba(127,233,255,.3); border-radius: 999px; padding: .3rem .8rem; white-space: nowrap; }
.fluxo__pulso { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--brilho); box-shadow: 0 0 14px 3px rgba(127,233,255,.7); animation: viajar 3.6s linear infinite; will-change: left, opacity; }
@keyframes viajar { 0% { left: 0; opacity: 0; } 5% { opacity: 1; } 94% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
/* etapas: os 4 cards pendurados na trilha, numerados, ligados por um tracinho */
.fluxo__etapas { grid-area: etapas; grid-template-columns: repeat(4, 1fr); margin-top: 0; position: relative; }
.fluxo__etapas::before { content: ""; position: absolute; left: 110px; right: 140px; top: -1.15rem; height: 1px; background: rgba(127,233,255,.35); }
/* gotas: ligam a base dos dois nós ao barramento dos quadros, fechando o circuito agente → API → plataforma → garantias */
.fluxo__gota { position: absolute; bottom: 100%; width: 0; height: calc(1.15rem + 2.25rem); margin-bottom: -1px; border-left: 1px dashed rgba(127,233,255,.45); }
.fluxo__gota--a { left: 110px; } .fluxo__gota--b { right: 140px; }
/* sincronia: o pulso percorre o trilho em 3,6 s e cada quadro acende quando ele passa pela sua posição */
.fluxo__etapas .card:nth-child(3) { --d: .5s; } .fluxo__etapas .card:nth-child(4) { --d: 1.3s; } .fluxo__etapas .card:nth-child(5) { --d: 2.1s; } .fluxo__etapas .card:nth-child(6) { --d: 2.9s; }
.fluxo__etapas .card { animation: etapaBorda 3.6s linear infinite var(--d, 0s); }
.fluxo__etapas .etapa__num { animation: etapaNum 3.6s linear infinite var(--d, 0s); }
.fluxo__etapas .card::after { animation: etapaTico 3.6s linear infinite var(--d, 0s); }
@keyframes etapaBorda { 0%, 100% { border-color: rgba(255,255,255,.12); } 6% { border-color: rgba(127,233,255,.7); } 24% { border-color: rgba(255,255,255,.12); } }
@keyframes etapaNum { 0%, 100% { background: var(--abissal); color: var(--brilho); box-shadow: 0 0 12px rgba(0,168,232,.4); } 6% { background: var(--ciano); color: var(--branco); box-shadow: 0 0 22px 5px rgba(127,233,255,.75); } 24% { background: var(--abissal); color: var(--brilho); box-shadow: 0 0 12px rgba(0,168,232,.4); } }
@keyframes etapaTico { 0%, 100% { border-color: rgba(127,233,255,.45); } 6% { border-color: var(--brilho); } 24% { border-color: rgba(127,233,255,.45); } }
.fluxo__etapas .card { overflow: visible; padding: 1.6rem 1.25rem 1.4rem; }
.fluxo__etapas .card::after { content: ""; position: absolute; left: 50%; top: -1.15rem; height: 1.15rem; border-left: 1px dashed rgba(127,233,255,.45); }
.fluxo__etapas .card::before { border-radius: var(--raio) var(--raio) 0 0; }
.etapa__num { position: absolute; top: -.85rem; left: 1.25rem; font-family: var(--fonte-titulo); font-weight: 600; font-size: .7rem; letter-spacing: .14em; color: var(--brilho); background: var(--abissal); border: 1px solid rgba(127,233,255,.45); border-radius: 999px; padding: .2rem .6rem; box-shadow: 0 0 12px rgba(0,168,232,.4); }
.fluxo__etapas .card__icone { width: 44px; height: 44px; margin-bottom: .9rem; }
/* base: console em quadro de vidro + nota e CTA */
.agente__base { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; align-items: center; margin-top: 3.5rem; }
.agente__base .agente__visual { align-self: center; }
.agente__fecho .agente__nota { margin-top: 0; font-size: .98rem; padding: 1.1rem 1.25rem; }
.agente__fecho .acoes { margin-top: 1.5rem; }
@media (max-width: 1100px) { .fluxo { grid-template-columns: 190px minmax(0, 1fr) 240px; } .fluxo__etapas { grid-template-columns: repeat(2, 1fr); } .fluxo__etapas::before, .fluxo__etapas .card::after, .fluxo__gota { display: none; } .fluxo__etapas .card, .fluxo__etapas .card::after { animation: none; } }
@media (max-width: 960px) {
  .fluxo { grid-template-columns: 1fr; grid-template-areas: "agente" "trilho" "etapas" "plataforma"; gap: 1.25rem; justify-items: stretch; }
  .fluxo__trilho { width: 2px; height: 64px; margin: 0 auto; background: linear-gradient(180deg, rgba(0,168,232,.35), var(--brilho)); }
  .fluxo__trilho::before { right: auto; left: -6px; top: auto; bottom: -2px; border: 7px solid transparent; border-top: 11px solid var(--brilho); border-bottom: 0; }
  .fluxo__trilho b { top: 50%; left: 1.25rem; transform: translateY(-50%); }
  .fluxo__pulso { display: none; }
  .agente__base { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
  .agente__fecho { order: -1; }
}
@media (max-width: 560px) { .fluxo__etapas { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fluxo__pulso, .fluxo__no--agente .fluxo__icone, .fluxo__etapas .card, .fluxo__etapas .etapa__num, .fluxo__etapas .card::after { animation: none; } .fluxo__pulso { left: 50%; opacity: 1; } }

/* NAP visivel no rodape (sinal de SEO local) */
.rodape address{font-style:normal;line-height:1.5;opacity:.85}

/* seletor de idioma agora e link real (URLs /en/ e /es/), nao botao com ?lang= */
.idiomas a { text-decoration: none; }

/* Faixa de sugestao de idioma. Sugere em vez de redirecionar: redirecionamento
   automatico por navigator.language desviaria o Googlebot da URL que ele rastreia. */
.faixa-idioma { display: flex; align-items: center; justify-content: center; gap: .75rem;
  background: var(--azul-700, #10306b); color: #fff; padding: .55rem 1rem; font-size: .86rem; }
.faixa-idioma a { color: #fff; text-decoration: underline; font-weight: 600; }
.faixa-idioma button { background: transparent; border: 0; color: #fff; font-size: 1.15rem;
  line-height: 1; cursor: pointer; padding: 0 .25rem; opacity: .8; }
.faixa-idioma button:hover { opacity: 1; }
/* Pagina de autores (E-E-A-T: quem escreve, com entidade Person e LinkedIn real) */
.autores { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.autor { display: flex; flex-direction: column; gap: .85rem; scroll-margin-top: 90px; }
.autor__id { display: flex; align-items: center; gap: .9rem; }
.autor__avatar { display: grid; place-items: center; width: 54px; height: 54px; flex: none;
  border-radius: 50%; background: var(--grad-marca, var(--azul-600)); color: #fff;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.autor h2 { font-size: 1.15rem; margin: 0; }
.autor__cargo { margin: .15rem 0 0; font-size: .86rem; color: var(--cinza-500); }
.autor__redes a, .autor__posts a { font-size: .88rem; font-weight: 600; }
.autor__posts { margin-top: auto; }
.post__autor { font-weight: 600; }
/* --- Correcoes de corte no mobile (revisao 2026-09-11) --- */
@media (max-width: 960px) {
  /* 1) Selos de confianca: eram uma faixa com overflow-x:auto e scrollbar oculta.
     Sem barra e sem indicacao visual, o ultimo selo aparecia cortado no meio da
     palavra ("40 an...") e parecia defeito, nao conteudo rolavel. Passam a quebrar
     em linhas: os 5 selos ficam visiveis, sem rolagem escondida. */
  .hero__selos.hero__confianca {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .hero__confianca li {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    scroll-snap-align: none;
  }

  /* 3) Painel de KPIs do hero saia 23px para fora da esquerda e era cortado pelo
     overflow:hidden do .hero ("Acessos hoje" aparecia fatiado).
     Causa: ordem no CSS. A regra de mobile
       @media (max-width:960px) .hero:not(.hero--interno) .hero__visual .painel--kpis
       { left:0; right:0; width:auto; top:auto; bottom:0 }
     e correta, mas MAIS ABAIXO no arquivo existe a mesma selecao SEM media query
     ({ left:-12%; top:-2%; width:46% }), pensada para o desktop. Mesma
     especificidade + vindo depois = ela vence em qualquer largura.
     Aqui a regra de mobile e reafirmada por ultimo. */
  .hero:not(.hero--interno) .hero__visual .painel--kpis {
    left: 0; right: 0; width: auto; top: auto; bottom: 0;
  }

  /* 2) .passo__cena tinha height fixo de 200px com overflow:hidden, e o mock
     dentro mede ate 223px: os ~23px de baixo eram cortados, escondendo a legenda
     do passo. Nao adianta height:auto - o filho .cena e position:absolute com
     inset:0, entao a caixa colapsaria; e min-height que define a altura usada. */
  .passo__cena { min-height: 240px; }
}
/* CTA "Agendar demonstracao" no cabecalho: o texto saia cinza (#484848) sobre o
   azul do botao. Nao era falta de declaracao - .btn--primario ja define
   color:var(--branco) -, era ESPECIFICIDADE: o botao e um <a> dentro de
   <nav class="menu">, e ".menu a" (0,1,1) vence ".btn--primario" (0,1,0).
   O :hover do menu tambem pintava o texto de azul. Aqui o branco e reafirmado
   com especificidade suficiente, sem tocar nas regras originais. */
.menu a.btn--primario,
.menu a.btn--primario:hover,
.menu a.btn--primario:focus { color: var(--branco); }
/* ---------------- Presenca nas Americas (sobre.html) ----------------
   O mapa e desenhado pelo gerador de particulas (cena "mapa" + detalhe "cidades"
   em js/particulas.js). O canvas cobre a secao inteira e a cena e ancorada ao
   .americas__palco, que so existe para reservar a area do mapa - nao tem conteudo. */
.americas { position: relative; overflow: hidden; }
.americas__particulas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.americas__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr 1fr; align-items: center; }
.americas__texto { max-width: 34rem; }
.americas__chamada { font-size: 1.05rem; }
.americas__palco { min-height: clamp(320px, 38vw, 520px); }
.paises { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.4rem 0; }
.paises li { padding: .4rem .85rem; font-size: .85rem; font-weight: 600; letter-spacing: .01em;
  color: var(--branco); border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  background: rgba(255,255,255,.06); }
.americas__numeros { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.6rem;
  padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.16); }
.americas__numeros div { display: flex; flex-direction: column; }
.americas__numeros b { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 700;
  line-height: 1; color: var(--branco); }
.americas__numeros span { font-size: .8rem; opacity: .75; margin-top: .25rem; }
@media (max-width: 960px) {
  .americas__grid { grid-template-columns: 1fr; }
  .americas__palco { min-height: 300px; order: -1; }
}