/* Equipe Contábil AI · Agentes Nata Cursos
   Design system: tokens, base, componentes e seções. Mobile-first. */

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --fundo: #0c0915;
  --fundo-2: #120e1d;
  --superficie: rgb(var(--s4) / 0.55);
  --superficie-forte: #171127;
  --superficie-alta: #1d1631;
  --linha: rgba(168, 150, 220, 0.11);
  --linha-forte: rgba(168, 150, 220, 0.22);
  --texto: #f1eefa;
  --texto-2: #c6bfdb;
  --suave: #9d95b8;
  --apagado: #857ea3;

  --petroleo-900: #24114a;
  --petroleo-800: #341a68;
  --petroleo-700: #4a24a0;
  --petroleo-600: #6a3fd6;
  --petroleo-500: #7b52ec;
  --acento: #b49dff;
  --acento-forte: #cbbcff;
  --acento-tinta: #150a2e;
  /* Logo: roxo do site + azul-turquesa original da arte. */
  --logo-1: #b49dff;
  --logo-2: #20d5c2;

  --a-maestra: #e6c27a;
  --a-tecnica: #b49dff;
  --a-operacoes: #7db7ff;
  --a-financeira: #a6e37e;
  --a-crescimento: #f2a76e;
  --a-pessoas: #6fcfc4;
  --a-confianca: #ee9cc0;

  /* Superfícies (tema escuro). Em [data-tema="claro"] elas viram tons claros. */
  --s1: 12 9 21; --s2: 18 14 30; --s3: 15 11 25; --s4: 26 19 44; --s5: 30 22 50; --s6: 14 10 23;
  --s7: 17 12 28; --s8: 16 12 27; --s9: 34 25 56; --s10: 23 17 38; --s11: 44 30 80;
  --oferta-1: #1e1438; --oferta-2: #0e0a18;
  --avatar-1: #191230; --avatar-2: #110c1f;
  --destaque-1: var(--acento); --destaque-2: #dcd0ff; --destaque-3: var(--petroleo-500);
  --erro-texto: #ffd0d0; --ok-texto: #c9f5de;
  --aurora-opacidade: 0.55;
  color-scheme: dark;
  --ok: #5ee0a0;
  --erro: #ff8f8f;

  --f-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --f-texto: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --t-xl: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --t-3xl: clamp(2.3rem, 1.4rem + 3.3vw, 3.9rem);

  --r-p: 5px;
  --r-m: 7px;
  --r-g: 9px;
  --r-xg: 12px;

  --sombra: 0 24px 60px -24px rgba(0, 0, 0, 0.65);
  --brilho: 0 0 0 1px rgba(150, 115, 245, 0.35), 0 12px 40px -12px rgba(150, 115, 245, 0.45);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --largura: 1200px;
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font: 400 var(--t-m) / 1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h3 { letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
code { font-family: var(--f-mono); font-size: 0.9em; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(150, 115, 245, 0.3); }

.container { width: min(100% - 2 * var(--gutter), var(--largura)); margin-inline: auto; }
.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--acento); color: var(--acento-tinta); padding: 0.6rem 1rem; border-radius: var(--r-p); font-weight: 600;
}
.pular:focus { top: 1rem; }

/* ---------- Tipografia utilitária ---------- */
.rotulo {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.sobretitulo {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento);
  margin-bottom: 1rem;
}
.nota { font-size: var(--t-xs); color: var(--apagado); }
.link-suave { color: var(--acento); font-size: var(--t-s); font-weight: 500; }
.link-suave:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Botões ---------- */
.botao {
  --alt: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: var(--alt); padding: 0 1.25rem; border-radius: 6px; border: 1px solid transparent;
  font-weight: 600; font-size: var(--t-s); white-space: nowrap; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, border-color 0.25s, color 0.25s;
}
.botao-p { --alt: 2.5rem; padding: 0 1rem; }
.botao-g { --alt: 3.25rem; padding: 0 1.5rem; font-size: 0.95rem; }
.botao-largo { width: 100%; }
.botao-primario {
  background: linear-gradient(180deg, #7b52ec, var(--petroleo-600)); color: #fff;
  border-color: rgba(203, 188, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 30px -12px rgba(106, 63, 214, 0.9);
}
.botao-primario:hover { background: linear-gradient(180deg, #8a63f5, #6f45dc); border-color: rgba(203, 188, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 40px -12px rgba(123, 82, 236, 0.95); }
.botao-contorno { border-color: var(--linha-forte); background: rgb(var(--s4) / 0.4); }
.botao-contorno:hover { border-color: rgba(150, 115, 245, 0.5); background: rgba(74, 36, 160, 0.35); }
.botao-fantasma { color: var(--texto-2); }
.botao-fantasma:hover { color: var(--texto); }
.botao-inativo { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.botao-inativo:hover { transform: none; background: linear-gradient(180deg, #7b52ec, var(--petroleo-600)); }
.icone-seta { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--ease); }
.icone-check { width: 1.15em; height: 1.15em; flex: none; color: var(--acento); }

/* ---------- Chips, pulso, barra ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: 999px;
  border: 1px solid var(--linha-forte); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2);
  white-space: nowrap;
}
.chip-destaque { color: var(--acento); border-color: rgba(150, 115, 245, 0.45); background: rgba(150, 115, 245, 0.08); }
.chip-ok { color: var(--ok); border-color: rgba(94, 224, 160, 0.35); background: rgba(94, 224, 160, 0.08); }
.chip-ouro { color: var(--a-maestra); border-color: rgba(230, 194, 122, 0.4); background: rgba(230, 194, 122, 0.08); text-transform: none; letter-spacing: 0.02em; }
.pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(94, 224, 160, 0.6); flex: none; }
.barra { height: 4px; border-radius: 999px; background: rgba(168, 150, 220, 0.1); overflow: hidden; }
.barra-g { height: 6px; }
.barra > span {
  display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--petroleo-500), var(--acento));
  transition: transform 0.6s var(--ease);
}
.lista-check { display: grid; gap: 0.75rem; }
.lista-check li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--texto-2); }

/* ---------- Avatares ---------- */
.avatar {
  --cor: var(--a-tecnica);
  --tam: 2.5rem;
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--tam); height: var(--tam); border-radius: calc(var(--tam) * 0.32);
  background:
    radial-gradient(120% 120% at 30% 15%, color-mix(in oklab, var(--cor) 38%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in oklab, var(--cor) 22%, var(--avatar-1)), var(--avatar-2));
  border: 1px solid color-mix(in oklab, var(--cor) 45%, transparent);
  color: var(--cor); font: 700 calc(var(--tam) * 0.34) / 1 var(--f-display); letter-spacing: 0.02em;
}
.avatar::after {
  content: ''; position: absolute; inset: auto 18% 12% 18%; height: 2px; border-radius: 2px;
  background: currentColor; opacity: 0.45;
}
.avatar-p { --tam: 2.1rem; }
.avatar-m { --tam: 2.75rem; }
.avatar-g { --tam: 4rem; }
.area-maestra { --cor: var(--a-maestra); }
.area-tecnica { --cor: var(--a-tecnica); }
.area-operacoes { --cor: var(--a-operacoes); }
.area-financeira { --cor: var(--a-financeira); }
.area-crescimento { --cor: var(--a-crescimento); }
.area-pessoas { --cor: var(--a-pessoas); }
.area-confianca { --cor: var(--a-confianca); }

/* Avatar ilustrado (public/js/avatar-svg.js): o desenho preenche o quadro e a roupa usa a cor da área. */
.avatar { overflow: hidden; }
.avatar::after { content: none; }
.avatar-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateY(9%) scale(1.22); }

/* Números que contam: dígitos de largura fixa para não tremer o layout. */
.hero-numeros dd, .metricas dd, [data-contar], .demo-metricas dd { font-variant-numeric: tabular-nums; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}
.topo.rolou, .topo-membros {
  background: rgb(var(--s1) / 0.72); border-bottom-color: var(--linha);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.topo-grade { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }
.marca { display: inline-flex; align-items: center; gap: 0.7rem; margin-right: auto; color: var(--acento); }
.logo-marca { display: block; height: 2.6rem; width: auto; }
@media (max-width: 400px) { .topo .logo-marca { height: 1.8rem; } }
/* "Agentes" ao lado do logo, no mesmo roxo de "Equipe Contábil", separado por um traço vertical. */
.marca-sufixo {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-left: -0.15rem;
  font: 700 1.05rem / 1 var(--f-display); letter-spacing: -0.01em; color: var(--logo-1); white-space: nowrap;
}
/* Traço separador no mesmo roxo do logo. */
.marca-sufixo::before { content: ''; width: 2px; height: 1.5rem; border-radius: 2px; background: var(--logo-1); }
@media (max-width: 400px) { .marca-sufixo { font-size: 0.72rem; gap: 0.45rem; } .marca-sufixo::before { height: 1rem; } }
.l1 { fill: var(--logo-1); }
.l2 { fill: var(--logo-2); }
.l2t { fill: none; stroke: var(--logo-2); }
.topo-nav { display: none; }
.topo-nav ul { display: flex; gap: 0.25rem; }
.topo-nav a { display: block; padding: 0.5rem 0.8rem; border-radius: 5px; color: var(--texto-2); font-size: var(--t-s); transition: color 0.2s, background-color 0.2s; }
.topo-nav a:hover { color: var(--texto); background: rgba(168, 150, 220, 0.06); }
.topo-acoes { display: none; align-items: center; gap: 0.5rem; }
.topo-membros .topo-acoes { display: flex; }

.menu-movel { position: relative; }
.menu-movel summary {
  list-style: none; cursor: pointer; display: grid; gap: 4px; place-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 6px; border: 1px solid var(--linha-forte);
}
.menu-movel summary::-webkit-details-marker { display: none; }
.menu-movel summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--texto); transition: transform 0.3s var(--ease), opacity 0.2s; }
.menu-movel[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-movel[open] summary span:nth-child(2) { opacity: 0; }
.menu-movel[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-movel-painel {
  position: absolute; right: 0; top: calc(100% + 0.6rem); width: min(80vw, 18rem);
  background: var(--superficie-forte); border: 1px solid var(--linha-forte); border-radius: var(--r-m); padding: 0.75rem;
  box-shadow: var(--sombra); display: grid; gap: 0.5rem;
}
.menu-movel-painel a:not(.botao) { display: block; padding: 0.7rem 0.75rem; border-radius: 5px; color: var(--texto-2); }
.menu-movel-painel a:not(.botao):hover { background: rgba(168, 150, 220, 0.07); color: var(--texto); }

@media (min-width: 960px) {
  .topo-nav { display: block; }
  .topo-acoes { display: flex; }
  .menu-movel { display: none; }
}

.status-licenca { display: none; align-items: center; gap: 0.5rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); }
.status-licenca.inativa .pulso { background: var(--erro); }
@media (min-width: 640px) { .status-licenca { display: inline-flex; } }
.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; cursor: pointer; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.iniciais {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 6px;
  border: 1px solid rgba(150, 115, 245, 0.4); background: rgba(74, 36, 160, 0.35); color: var(--acento); font: 700 0.85rem var(--f-display);
}
.menu-usuario-painel {
  position: absolute; right: 0; top: calc(100% + 0.6rem); width: 16rem; display: grid; gap: 0.25rem; padding: 0.6rem;
  background: var(--superficie-forte); border: 1px solid var(--linha-forte); border-radius: var(--r-m); box-shadow: var(--sombra);
}
.menu-usuario-painel p { display: grid; padding: 0.5rem 0.6rem 0.75rem; border-bottom: 1px solid var(--linha); margin-bottom: 0.25rem; }
.menu-usuario-painel p span { font-size: var(--t-xs); color: var(--suave); overflow-wrap: anywhere; }
.menu-usuario-painel a, .menu-usuario-painel button {
  display: block; width: 100%; text-align: left; padding: 0.6rem; border-radius: 5px; border: 0; background: none; cursor: pointer; font-size: var(--t-s); color: var(--texto-2);
}
.menu-usuario-painel a:hover, .menu-usuario-painel button:hover { background: rgba(168, 150, 220, 0.07); color: var(--texto); }

/* ---------- Fundo atmosférico ---------- */
.hero-fundo, .conta-fundo, .membros-fundo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.grade-fundo {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(rgba(168, 150, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 150, 220, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 20%, transparent 75%);
}
.aurora { position: absolute; border-radius: 50%; opacity: var(--aurora-opacidade); will-change: transform; }
.aurora-1 { width: 46rem; height: 34rem; right: -12rem; top: -10rem; background: radial-gradient(closest-side, rgba(98, 56, 200, 0.75), transparent); }
.aurora-2 { width: 34rem; height: 28rem; left: -14rem; top: 30%; background: radial-gradient(closest-side, rgba(74, 36, 160, 0.6), transparent); }
.orbita {
  position: absolute; width: 58rem; height: 58rem; right: -22rem; top: -14rem; border-radius: 50%;
  border: 1px solid rgba(168, 150, 220, 0.07);
}
.orbita span {
  position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 18px 4px rgba(150, 115, 245, 0.6);
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3.5rem, 8vw, 7rem); }
.hero-grade { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1040px) { .hero-grade { grid-template-columns: 1.12fr 0.88fr; } }
.selo {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.85rem 0.4rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: rgb(var(--s4) / 0.5); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2);
  margin-bottom: 1.5rem;
}
.ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 10px var(--acento); }
.hero-titulo { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.15rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
/* A fonte segue a largura da coluna de texto (cqi), e cada linha fica inteira, como no layout aprovado. */
@media (min-width: 1040px) {
  .hero .hero-texto { container-type: inline-size; }
  .hero .hero-titulo { font-size: clamp(2rem, 6.9cqi, 3.15rem); }
  .hero .hero-titulo .linha { white-space: nowrap; }
  .hero .hero-texto .hero-sub { max-width: 25.8em; }
}
.hero-titulo .linha { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-titulo .linha > span { display: inline-block; }
.destaque {
  background: linear-gradient(100deg, var(--destaque-1) 10%, var(--destaque-2) 45%, var(--destaque-3) 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Página de vendas: degradê fixo só com os dois tons claros, sem o tom escuro e sem o brilho passando. */
.hero .hero-texto .destaque, .secao-cabeca-fluxo .destaque, .fluxo-etapas-cabeca .destaque, .secao-cabeca-demo .destaque, .secao-cabeca-equipe .destaque, .secao-cabeca-dif .destaque, .secao-cabeca-comp .destaque, .secao-cabeca-vida .destaque, .secao-cabeca-entrega .destaque, .secao-cabeca-oferta .destaque, .secao-cabeca-duvidas .destaque {
  background-image: linear-gradient(100deg, var(--destaque-1) 10%, var(--destaque-2) 90%);
  background-size: 100% 100%;
  animation: none;
}
.hero-sub { margin-top: 1.5rem; max-width: 36rem; font-size: var(--t-l); color: var(--texto-2); }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
@media (max-width: 479px) { .acoes .botao { width: 100%; } }
.hero-numeros {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 2.5rem; max-width: 34rem;
  border: 1px solid var(--linha); border-radius: var(--r-m); overflow: hidden; background: var(--linha);
}
.hero-numeros div { display: flex; flex-direction: column-reverse; gap: 0.15rem; padding: 0.9rem 1rem; background: var(--fundo-2); }
.hero-numeros dt { font-size: var(--t-xs); color: var(--suave); }
.hero-numeros dd { font: 650 1.6rem / 1 var(--f-display); letter-spacing: -0.03em; }
@media (min-width: 560px) { .hero-numeros { grid-template-columns: repeat(4, 1fr); } }
.aviso-acesso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; max-width: 34rem;
  padding: 1rem 1.1rem; border-radius: var(--r-m); border: 1px solid rgba(150, 115, 245, 0.3); background: rgba(74, 36, 160, 0.25);
}
.aviso-acesso div { display: grid; font-size: var(--t-s); }
.aviso-acesso span { color: var(--texto-2); }

/* ---------- Central de comando (hero) ---------- */
.central {
  position: relative; padding: 1.25rem; border-radius: var(--r-xg);
  background: linear-gradient(170deg, rgb(var(--s9) / 0.85), rgb(var(--s7) / 0.9));
  border: 1px solid var(--linha-forte); box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
@media (min-width: 1040px) {
  .central { padding: 1.6rem; }
  .central, .central.revelar.visivel { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
}
.central::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--giro, 0deg), transparent 0 70%, rgba(150, 115, 245, 0.8) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.8;
}
.central-topo { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--linha); }
/* Título do painel em verde, com a bolinha verde pulsando na frente (.pulso). */
.central-titulo { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ok); }
.central-titulo .pulso { width: 8px; height: 8px; box-shadow: 0 0 10px var(--ok); }
.central-pedido { margin: 0.5rem 0 1.25rem; font: 500 var(--t-l) / 1.4 var(--f-display); letter-spacing: -0.01em; min-height: 2.8em; }
.central-pedido.digitando::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--acento); animation: cursor 0.9s steps(1) infinite; }
.central-rota { display: grid; gap: 0.55rem; }
.central-linha {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.8rem; border-radius: 6px;
  border: 1px solid var(--linha); background: rgb(var(--s1) / 0.35);
  transition: border-color 0.4s, background-color 0.4s, opacity 0.4s, transform 0.4s var(--ease);
}
.central-num { font: 500 0.7rem var(--f-mono); color: var(--apagado); width: 1.2rem; }
.central-quem { flex: 1; display: grid; line-height: 1.25; }
.central-quem strong { font-size: var(--t-s); }
.central-quem span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }
.estado { width: 8px; height: 8px; border-radius: 50%; background: var(--apagado); transition: background-color 0.3s, box-shadow 0.3s; }
.central-linha.aguardando { opacity: 0.5; }
.central-linha.ativo { border-color: rgba(150, 115, 245, 0.5); background: rgba(74, 36, 160, 0.3); transform: translateX(4px); }
.central-linha.ativo .estado { background: var(--acento); box-shadow: 0 0 0 4px rgba(150, 115, 245, 0.18); }
.central-linha.concluido .estado { background: var(--ok); }
.central-rodape { margin-top: 1.1rem; display: grid; gap: 0.85rem; }
.central-rodape p { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 0.9rem; border-radius: 6px; border: 1px solid rgba(94, 224, 160, 0.2); background: rgba(94, 224, 160, 0.05); font-size: var(--t-s); color: var(--texto-2); }

/* ---------- Seções ---------- */
.secao { position: relative; padding: clamp(4rem, 9vw, 8rem) 0; }
/* Seções fora da tela não são estilizadas nem pintadas até chegarem perto: deixa troca de tema e rolagem mais leves.
   contain-intrinsic-size com auto guarda a altura real depois da primeira vez, sem pulo na rolagem. */
main > .secao { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Ao navegar por âncora, todas as seções são medidas de verdade para a rolagem parar no lugar certo. */
.secoes-medidas main > .secao { content-visibility: visible; }
.secao-cabeca { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.secao-cabeca h2 { font-size: var(--t-2xl); }
.secao-cabeca > p:last-child:not(.sobretitulo) { margin-top: 1.1rem; color: var(--texto-2); font-size: var(--t-l); }
/* Como funciona: título em duas linhas e dois parágrafos com destaques em negrito, como no layout da cliente. */
.secao-cabeca-fluxo > p:not(.sobretitulo) { margin-top: 1.1rem; color: var(--texto-2); font-size: var(--t-l); }
.secao-cabeca-fluxo > p:not(.sobretitulo) + p { margin-top: 1.4rem; }
.secao-cabeca-fluxo strong { color: var(--texto); font-weight: 700; }
/* A partir de 720px as quebras de linha seguem o layout (larguras em em acompanham o tamanho da fonte). */
@media (min-width: 720px) {
  .secao-cabeca-fluxo { max-width: none; container-type: inline-size; }
  .secao-cabeca-fluxo h2 { font-size: min(var(--t-2xl), 7.2cqi); }
  .secao-cabeca-fluxo h2 > span { display: block; white-space: nowrap; }
  .secao-cabeca-fluxo > p:not(.sobretitulo) { max-width: 31.2em; }
  .secao-cabeca-fluxo > p:not(.sobretitulo) + p { max-width: 28.6em; }
}

/* Seção logo após a primeira dobra: menos espaço no topo para não ficar solta. */
#fluxo { padding-top: clamp(1rem, 2.5vw, 2rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Quem trabalha por você: título em 3 linhas e dois parágrafos, como no layout da cliente. */
.secao-cabeca-equipe > p:not(.sobretitulo) { margin-top: 1.1rem; color: var(--texto-2); font-size: var(--t-l); }
@media (min-width: 720px) {
  .secao-cabeca-equipe { max-width: none; container-type: inline-size; }
  .secao-cabeca-equipe h2 > span { display: block; white-space: nowrap; }
  .secao-cabeca-equipe h2 { font-size: min(var(--t-2xl), 6.8cqi); }
  .secao-cabeca-equipe > p:not(.sobretitulo) { max-width: 33.5em; }
  .secao-cabeca-equipe > p:not(.sobretitulo) + p { max-width: 33em; }
}
/* Veja na prática logo depois do Como funciona: menos espaço entre as duas. */
#demonstracao { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* O que muda na sua rotina logo depois do organograma: menos espaço entre as duas. */
#diferenciais { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Antes e depois logo depois dos diferenciais: menos espaço entre as duas. */
#comparacao { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- O que muda na sua vida ---------- */
#vida { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Como você recebe o acesso: perto da seção anterior; cabeçalho acompanha a rolagem ao lado das 7 etapas. */
#entrega { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Oferta logo depois do Como você recebe o acesso. */
#oferta { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Dúvidas logo depois da oferta. */
#duvidas { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.secao-cabeca-entrega > p:not(.sobretitulo) { margin-top: 1.1rem; color: var(--texto-2); font-size: var(--t-l); max-width: 22em; }
@media (min-width: 960px) { .secao-cabeca-entrega { position: sticky; top: 6rem; } }
.entrega-passos li > div > p + p { margin-top: 0.55rem; }
.entrega-faixa {
  margin-top: clamp(1.5rem, 4vw, 2.5rem); padding: 1.4rem 1.6rem; border-radius: var(--r-xg);
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--petroleo-600) 30%, transparent), color-mix(in srgb, var(--acento) 8%, transparent));
}
.entrega-faixa-titulo { font: 700 var(--t-xl) / 1.25 var(--f-display); letter-spacing: -0.01em; color: var(--texto); margin-bottom: 0.4rem; }
.entrega-faixa p:not(.entrega-faixa-titulo) { color: var(--texto-2); max-width: 48em; }
.vida-intro { display: grid; gap: 2.5rem; align-items: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.vida-intro .secao-cabeca { margin-bottom: 0; }
.secao-cabeca-vida > p:not(.sobretitulo) { margin-top: 1.1rem; color: var(--texto-2); font-size: var(--t-l); max-width: 30.4em; }
@media (min-width: 1040px) { .vida-intro { grid-template-columns: minmax(0, 1fr) 16.5rem; gap: 3rem; } }

/* "Sua semana": as tarefas repetitivas encolhem e abrem espaço para o tempo livre. Parado, mostra o "Hoje". */
.semana {
  padding: 1.2rem; border-radius: var(--r-xg); border: 1px solid var(--linha-forte);
  background: linear-gradient(170deg, rgb(var(--s9) / 0.85), rgb(var(--s7) / 0.9)); box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.semana-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linha); }
.semana-titulo { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: var(--suave); }
.semana-modo { display: grid; justify-items: end; font-size: 0.72rem; font-weight: 650; }
.semana-modo > span { grid-area: 1 / 1; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.semana-modo-a { color: var(--a-crescimento); background: color-mix(in srgb, var(--a-crescimento) 14%, transparent); }
.semana-modo-b { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); opacity: 0; }
.semana-dias { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.semana-dias li { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: 0.6rem; }
.semana-dia { font: 600 0.72rem var(--f-mono); color: var(--suave); }
.semana-barra { position: relative; display: block; height: 0.9rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ok) 55%, transparent); }
.semana-barra i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--a-crescimento), color-mix(in srgb, var(--a-crescimento) 75%, #e0603a)); transform-origin: left; transform: scaleX(var(--ini, 0.9)); }
.semana-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 1.1rem; font-size: var(--t-xs); color: var(--texto-2); }
.semana-legenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.semana-legenda i { width: 0.7rem; height: 0.7rem; border-radius: 3px; }
.semana-cor-tarefas { background: var(--a-crescimento); }
.semana-cor-livre { background: color-mix(in srgb, var(--ok) 55%, transparent); }
/* Cada dia tem um tamanho diferente (--ini hoje, --fim com a equipe) e entra um pouco depois do anterior (--d). */
.semana-dias li:nth-child(1) i { --ini: 0.9; --fim: 0.42; }
.semana-dias li:nth-child(2) i { --ini: 0.84; --fim: 0.36; --d: 0.15s; }
.semana-dias li:nth-child(3) i { --ini: 0.92; --fim: 0.45; --d: 0.3s; }
.semana-dias li:nth-child(4) i { --ini: 0.86; --fim: 0.38; --d: 0.45s; }
.semana-dias li:nth-child(5) i { --ini: 0.94; --fim: 0.4; --d: 0.6s; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .semana.visivel .semana-barra i { animation: semana-barra 9s ease-in-out var(--d, 0s) infinite both; }
  .js-motion .semana.visivel .semana-modo-a { animation: semana-modo-a 9s linear infinite both; }
  .js-motion .semana.visivel .semana-modo-b { animation: semana-modo-b 9s linear infinite both; }
}
@keyframes semana-barra { 0%, 38% { transform: scaleX(var(--ini, 0.9)); } 50%, 88% { transform: scaleX(var(--fim, 0.4)); } 100% { transform: scaleX(var(--ini, 0.9)); } }
@keyframes semana-modo-a { 0%, 40% { opacity: 1; } 43%, 92% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes semana-modo-b { 0%, 43% { opacity: 0; } 46%, 90% { opacity: 1; } 93%, 100% { opacity: 0; } }

/* Benefícios em duas colunas, como no layout da cliente, e a frase final em destaque. */
.vida-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem 3rem; }
@media (min-width: 820px) { .vida-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vida-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.vida-icone {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 8px; color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 16%, transparent), color-mix(in srgb, var(--acento) 4%, transparent));
}
.vida-icone svg, .vida-comando-selo svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vida-item h3 { font-size: var(--t-l); line-height: 1.25; margin: 0.2rem 0 0.45rem; color: var(--texto); }
.vida-item p { font-size: var(--t-m); color: var(--texto-2); }
.vida-comando {
  display: flex; align-items: center; gap: 1rem; align-self: center; padding: 1.25rem 1.4rem; border-radius: var(--r-xg);
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--petroleo-600) 22%, transparent), color-mix(in srgb, var(--acento) 6%, transparent));
}
.vida-comando p { font: italic 500 var(--t-l) / 1.45 var(--f-display); color: var(--texto); }
.vida-comando-selo { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--petroleo-600), var(--petroleo-500)); box-shadow: var(--brilho); }
/* Quem trabalha por você logo depois da demonstração: menos espaço entre as duas. */
#equipe { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero:has(+ #fluxo) { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.fluxo-intro { display: grid; gap: 2.5rem; align-items: start; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.fluxo-intro .secao-cabeca { margin-bottom: 0; }
@media (min-width: 1040px) { .fluxo-intro { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: 3rem; } }

/* "Sua mesa hoje": pilha de demandas (trabalho demais) que a equipe de IA resolve. Sem animação, fica a pilha parada. */
.mesa {
  position: relative; padding: 1.2rem; border-radius: var(--r-xg);
  background: linear-gradient(170deg, rgb(var(--s9) / 0.85), rgb(var(--s7) / 0.9));
  border: 1px solid var(--linha-forte); box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mesa-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linha); }
.mesa-titulo { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: var(--suave); }
.mesa-estado { display: grid; justify-items: end; font-size: 0.72rem; font-weight: 650; }
.mesa-estado > span { grid-area: 1 / 1; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.mesa-estado-a { color: var(--a-crescimento); background: color-mix(in srgb, var(--a-crescimento) 14%, transparent); }
.mesa-estado-b { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); opacity: 0; }
.mesa-pilha { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.mesa-pilha li {
  --x: 0px; --r: 0deg;
  position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 6px;
  border: 1px solid var(--linha-forte); background: rgb(var(--s1) / 0.55); font-size: var(--t-s);
  transform: translateX(var(--x)) rotate(var(--r));
}
.mesa-pilha li::after {
  content: '✓'; position: absolute; right: 0.75rem; top: 50%; translate: 0 -50%;
  font-weight: 800; color: var(--ok); opacity: 0;
}
.mesa-pilha li:nth-child(1) { --x: -4px; --r: -1.2deg; }
.mesa-pilha li:nth-child(2) { --x: 10px; --r: 1.5deg; }
.mesa-pilha li:nth-child(3) { --x: -8px; --r: -2deg; }
.mesa-pilha li:nth-child(4) { --x: 6px; --r: 1deg; }
.mesa-pilha li:nth-child(5) { --x: -2px; --r: -1.6deg; }
.mesa-pilha li:nth-child(6) { --x: 12px; --r: 2.2deg; }
.mesa-pilha li:nth-child(7) { --x: -10px; --r: -0.8deg; }
.mesa-pilha li:nth-child(8) { --x: 4px; --r: 1.8deg; }
.mesa-quem { flex: none; display: grid; align-items: center; min-width: 6.4rem; }
.mesa-quem > span { grid-area: 1 / 1; }
.mesa-area { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento); }
.mesa-agente { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-s); font-weight: 700; color: var(--texto); opacity: 0; }
.mesa-agente .avatar { --tam: 1.35rem; }
.mesa-tarefa { color: var(--texto-2); }
.mesa-carga { margin-top: 1.1rem; display: grid; gap: 0.45rem; }
.mesa-carga-rotulo { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }
.mesa-barra { display: block; height: 6px; border-radius: 999px; background: rgb(var(--s1) / 0.6); overflow: hidden; }
.mesa-barra i { display: block; height: 100%; border-radius: inherit; background: var(--a-crescimento); transform-origin: left; }

@media (prefers-reduced-motion: no-preference) {
  /* Ciclo de 14s: as demandas caem uma a uma, a carga enche; depois cada uma é conferida (✓) e sai, e a carga esvazia. */
  .js-motion .mesa.visivel .mesa-pilha li { animation: mesa-demanda 14s var(--ease) var(--d, 0s) infinite both; }
  .js-motion .mesa.visivel .mesa-pilha li::after { animation: mesa-confere 14s linear var(--d, 0s) infinite both; }
  .js-motion .mesa.visivel .mesa-area { animation: mesa-sai 14s linear var(--d, 0s) infinite both; }
  .js-motion .mesa.visivel .mesa-agente { animation: mesa-entra 14s linear var(--d, 0s) infinite both; }
  .mesa-pilha li:nth-child(2) { --d: 0.45s; }
  .mesa-pilha li:nth-child(3) { --d: 0.9s; }
  .mesa-pilha li:nth-child(4) { --d: 1.35s; }
  .mesa-pilha li:nth-child(5) { --d: 1.8s; }
  .mesa-pilha li:nth-child(6) { --d: 2.25s; }
  .mesa-pilha li:nth-child(7) { --d: 2.7s; }
  .mesa-pilha li:nth-child(8) { --d: 3.15s; }
  .js-motion .mesa.visivel .mesa-barra i { animation: mesa-carga 14s var(--ease-in-out, ease-in-out) infinite both; }
  .js-motion .mesa.visivel .mesa-estado-a { animation: mesa-estado-a 14s linear infinite both; }
  .js-motion .mesa.visivel .mesa-estado-b { animation: mesa-estado-b 14s linear infinite both; }
}
@keyframes mesa-demanda {
  0% { opacity: 0; transform: translate(var(--x), -22px) rotate(calc(var(--r) * 3)); }
  4%, 50% { opacity: 1; transform: translateX(var(--x)) rotate(var(--r)); border-color: var(--linha-forte); }
  55%, 64% { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
  70%, 100% { opacity: 0; transform: translateX(28px); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
}
@keyframes digitar { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes gerar-arquivo { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes mesa-confere { 0%, 52% { opacity: 0; } 56%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
/* Na hora da conferência, a área da demanda dá lugar ao agente que assumiu. */
@keyframes mesa-sai { 0%, 51% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes mesa-entra { 0%, 53% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes mesa-carga {
  0% { transform: scaleX(0.06); background-color: var(--acento); }
  30%, 52% { transform: scaleX(1); background-color: var(--a-crescimento); }
  72% { transform: scaleX(0.25); background-color: var(--ok); }
  92%, 100% { transform: scaleX(0.06); background-color: var(--acento); }
}
@keyframes mesa-estado-a { 0%, 51% { opacity: 1; } 53%, 95% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes mesa-estado-b { 0%, 53% { opacity: 0; } 55%, 91% { opacity: 1; } 93%, 100% { opacity: 0; } }
.secao-cabeca-dupla { max-width: none; display: grid; gap: 1.25rem; align-items: end; }
.secao-cabeca-dupla > p { color: var(--texto-2); max-width: 30rem; }
@media (min-width: 900px) { .secao-cabeca-dupla { grid-template-columns: 1.3fr 1fr; } .secao-cabeca-dupla > p:last-child { justify-self: end; margin-top: 0; } }

/* ---------- Fluxo ---------- */
.fluxo { position: relative; display: grid; gap: 1rem; }
.fluxo-trilho { display: none; }
.fluxo-passo {
  position: relative; padding: 1.4rem; border-radius: var(--r-g); border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgb(var(--s4) / 0.6), rgb(var(--s3) / 0.4));
}
.fluxo-num { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 6px; margin-bottom: 1.1rem; border: 1px solid rgba(150, 115, 245, 0.35); color: var(--acento); font: 600 0.8rem var(--f-mono); background: linear-gradient(rgb(var(--s1) / 0.6), rgb(var(--s1) / 0.6)), var(--fundo); }
.fluxo-passo h4 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.2; margin: 0 0 0.6rem; }
.fluxo-passo p { font-size: var(--t-m); color: var(--texto-2); }
/* "Você pede e a equipe faz": continuação do Como funciona, antes das 3 etapas. */
.fluxo-etapas-cabeca { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.fluxo-etapas-cabeca h3 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); letter-spacing: -0.03em; line-height: 1.1; }
.fluxo-etapas-cabeca p { margin-top: 1rem; font-size: var(--t-l); color: var(--texto-2); }
@media (min-width: 760px) {
  .fluxo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fluxo-etapas-cabeca p { max-width: 32.4em; }
}
@media (min-width: 1040px) {
  .fluxo { gap: 2.5rem; padding-top: 0.5rem; }
  .fluxo-passo h4 > span { display: block; }
  .fluxo-passo p { max-width: 20em; }
  /* Do centro do 1 ao centro do 3: número tem 2.4rem e a coluna tem 0.25rem de recuo (centro a 1.45rem do início).
     3 colunas com 2 vãos de 2.5rem; a última coluna mede (100% - 5rem) / 3. */
  .fluxo-trilho { display: block; position: absolute; left: 1.45rem; right: calc((100% - 5rem) / 3 - 1.45rem); top: calc(0.5rem + 1.2rem - 1px); height: 2px; background: var(--linha); z-index: 0; }
  .fluxo-trilho span { display: block; height: 100%; background: linear-gradient(90deg, var(--petroleo-500), var(--acento)); transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease) 0.2s; }
  .fluxo.visivel .fluxo-trilho span, .fluxo-trilho.visivel span { transform: scaleX(1); }
  .fluxo-passo { background: transparent; border: 0; padding: 0 0.25rem; }
  .fluxo-num { position: relative; z-index: 1; }
}

/* ---------- Demonstração ---------- */
.secao-demo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 50% at 50% 40%, rgba(74, 36, 160, 0.22), transparent 70%);
}
.demo {
  border-radius: var(--r-xg); border: 1px solid var(--linha-forte); overflow: hidden;
  background: linear-gradient(180deg, rgb(var(--s10) / 0.92), rgb(var(--s6) / 0.95)); box-shadow: var(--sombra);
}
.demo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linha); }
.demo-barra > .rotulo { margin-right: auto; color: var(--texto-2); }
.demo-grade { display: grid; gap: 1px; background: var(--linha); }
@media (min-width: 900px) { .demo-grade { grid-template-columns: 1fr 1.2fr 1fr; } }
.demo-bloco { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem; background: var(--fundo-2); margin: 0; border: 0; min-width: 0; }
/* Título de cada etapa da simulação: número na mesma caixinha das etapas do Como funciona. */
.demo-etapa { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--t-m); line-height: 1.3; }
.demo-etapa-num {
  flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 5px;
  border: 1px solid var(--acento); color: var(--texto); font: 600 0.72rem var(--f-mono);
  background: linear-gradient(rgba(106, 63, 214, 0.35), rgba(106, 63, 214, 0.35)), var(--fundo);
}
.demo-sub { margin-top: 0.2rem; }

/* 1) Chat: as demandas são mensagens; a enviada fica preenchida. */
.chat-msgs { display: grid; gap: 0.6rem; justify-items: end; }
.chat-msg {
  display: grid; gap: 0.3rem; max-width: 92%; padding: 0.7rem 0.85rem; border-radius: 14px 14px 4px 14px; text-align: left;
  border: 1px dashed var(--linha-forte); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--t-s); line-height: 1.45;
  cursor: pointer; transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.chat-msg:hover { border-color: var(--acento); color: var(--texto); transform: translateX(-2px); }
.chat-msg:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.chat-msg-meta { font-size: 0.66rem; letter-spacing: 0.04em; justify-self: end; color: var(--apagado); }
.chat-msg-ok { display: none; }
.chat-msg.enviada { border: 1px solid transparent; background: linear-gradient(135deg, var(--petroleo-600), var(--petroleo-500)); color: #fff; }
.chat-msg.enviada .chat-msg-enviar { display: none; }
.chat-msg.enviada .chat-msg-ok { display: inline; color: rgba(255, 255, 255, 0.8); }
.chat-campo {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.65rem 0.8rem; border-radius: 999px; border: 1px solid var(--linha-forte); background: rgb(var(--s1) / 0.5);
  font-size: var(--t-s); color: var(--apagado);
}
.chat-campo svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--acento); }

/* 2) Resposta da Lia em balão de chat e agentes acionados. */
.leitura-cabeca { display: flex; align-items: center; gap: 0.75rem; }
.leitura-cabeca div { display: grid; line-height: 1.25; }
.leitura-cabeca span { font-size: var(--t-xs); color: var(--a-maestra); letter-spacing: 0.1em; text-transform: uppercase; }
.chat-lia { position: relative; min-height: 6.5rem; padding: 0.85rem 1rem; border-radius: 4px 14px 14px 14px; border: 1px solid var(--linha-forte); background: rgb(var(--s1) / 0.55); }
.chat-lia p { font: 500 var(--t-m) / 1.5 var(--f-display); color: var(--texto); }
.chat-digitando { display: none; gap: 0.3rem; padding: 0.4rem 0; }
.chat-digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); opacity: 0.4; }
.chat-lia.digitando .chat-digitando { display: inline-flex; }
.chat-lia.digitando p { display: none; }
.demo-agentes { display: grid; gap: 0.45rem; }
.agente-linha {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.7rem; border-radius: 6px; border: 1px solid var(--linha); background: rgb(var(--s1) / 0.4);
  transition: border-color 0.35s, background-color 0.35s, opacity 0.35s, transform 0.35s var(--ease);
}
.agente-linha > span:nth-child(2) { flex: 1; display: grid; line-height: 1.25; min-width: 0; }
.agente-linha strong { font-size: var(--t-s); }
.agente-linha small { font-size: var(--t-xs); color: var(--suave); }
.agente-estado { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); white-space: nowrap; }
.demo.rodando .agente-linha { opacity: 0.5; }
.demo .agente-linha.ativo { opacity: 1; border-color: rgba(150, 115, 245, 0.6); background: rgba(74, 36, 160, 0.3); transform: translateX(3px); }
.demo .agente-linha.ativo .agente-estado { color: var(--acento); }
.demo .agente-linha.feito { opacity: 1; border-color: rgba(94, 224, 160, 0.3); }
.demo .agente-linha.feito .agente-estado { color: var(--ok); }
.demo-leitura .nota { margin-top: auto; }

/* 3) Entrega: cartões de arquivo com miniatura e etiqueta do formato. */
.demo-entrega-titulo { font: 700 var(--t-xl) / 1.15 var(--f-display); letter-spacing: -0.02em; }
.arquivos { display: grid; gap: 0.6rem; }
.arquivo {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center; padding: 0.7rem 0.8rem;
  border-radius: 8px; border: 1px solid var(--linha); background: rgb(var(--s1) / 0.4); transition: border-color 0.4s, background-color 0.4s;
}
.arquivo-info { display: grid; line-height: 1.3; min-width: 0; }
.arquivo-info strong { font-size: var(--t-s); }
.arquivo-info small { font-size: var(--t-xs); color: var(--suave); }
.arquivo-estado { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); }
.arquivo-icone {
  --cor: #7b52ec;
  position: relative; display: block; width: 2.5rem; height: 3.1rem; border-radius: 4px 12px 4px 4px; overflow: hidden;
  background: #fbfaff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.45);
  opacity: 0.55; filter: grayscale(0.7); transition: opacity 0.4s, filter 0.4s;
}
/* Dobra do canto da folha. */
.arquivo-icone::before { content: ''; position: absolute; top: 0; right: 0; width: 0.7rem; height: 0.7rem; background: linear-gradient(225deg, transparent 50%, rgba(0, 0, 0, 0.12) 50%); }
/* Conteúdo desenhado da miniatura: linhas de texto, grade de planilha ou gráfico de barras. */
.arquivo-icone::after { content: ''; position: absolute; left: 0.35rem; right: 0.35rem; top: 0.55rem; height: 1.3rem; }
.arquivo-pdf { --cor: #d93a3f; }
.arquivo-documento { --cor: #2563eb; }
.arquivo-planilha { --cor: #1f8a4c; }
.arquivo-imagem { --cor: #7b52ec; }
.arquivo-pdf::after, .arquivo-documento::after { background: repeating-linear-gradient(180deg, rgba(40, 30, 70, 0.28) 0 2px, transparent 2px 5px); right: 0.6rem; }
.arquivo-planilha::after {
  background:
    repeating-linear-gradient(90deg, rgba(31, 138, 76, 0.45) 0 1px, transparent 1px 0.45rem),
    repeating-linear-gradient(180deg, rgba(31, 138, 76, 0.45) 0 1px, transparent 1px 0.33rem);
  border: 1px solid rgba(31, 138, 76, 0.45);
}
.arquivo-imagem::after {
  background:
    linear-gradient(0deg, var(--cor) 0 45%, transparent 45%) 0 100% / 0.32rem 100% no-repeat,
    linear-gradient(0deg, #b49dff 0 80%, transparent 80%) 0.45rem 100% / 0.32rem 100% no-repeat,
    linear-gradient(0deg, var(--cor) 0 60%, transparent 60%) 0.9rem 100% / 0.32rem 100% no-repeat,
    linear-gradient(0deg, #b49dff 0 100%, transparent 100%) 1.35rem 100% / 0.32rem 100% no-repeat;
}
.arquivo-tag {
  position: absolute; left: 0.2rem; bottom: 0.25rem; padding: 0.05rem 0.25rem; border-radius: 3px;
  background: var(--cor); color: #fff; font: 700 0.5rem / 1.3 var(--f-texto); font-style: normal; letter-spacing: 0.04em;
}
.arquivo.gerando .arquivo-estado { color: var(--acento); }
.arquivo.pronto { border-color: rgba(94, 224, 160, 0.35); background: rgba(94, 224, 160, 0.06); }
.arquivo.pronto .arquivo-icone { opacity: 1; filter: none; }
.arquivo.pronto .arquivo-estado { color: var(--ok); }
@media (max-width: 479px) { .arquivo { grid-template-columns: auto 1fr; } .arquivo-estado { display: none; } }
.revisao-final { display: flex; gap: 0.75rem; align-items: center; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.revisao-final p { display: grid; font-size: var(--t-s); line-height: 1.35; }
.revisao-final small { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-confianca); }
.demo.concluida .revisao-final strong { color: var(--ok); }
/* Cabeçalho da seção em uma coluna, como no layout da cliente. */
.secao-cabeca-demo > p:not(.sobretitulo) { margin-top: 1rem; color: var(--texto-2); font-size: var(--t-l); max-width: 34em; }
@media (min-width: 720px) {
  .secao-cabeca-demo > p:not(.sobretitulo) { max-width: 36.2em; }
  .secao-cabeca-demo > p:not(.sobretitulo) + p { max-width: 23.3em; }
}
.demo-aviso { padding: 0.9rem 1.25rem; font-size: var(--t-xs); color: var(--apagado); border-top: 1px solid var(--linha); }

/* ---------- Organograma ---------- */
.org { display: grid; gap: 1.25rem; }
.org-topo { display: grid; justify-items: center; }
.org-maestra {
  display: flex; gap: 1rem; align-items: center; width: min(100%, 34rem); padding: 1.25rem 1.4rem; border-radius: var(--r-g);
  border: 1px solid rgba(230, 194, 122, 0.4); background: linear-gradient(160deg, rgba(230, 194, 122, 0.1), rgb(var(--s3) / 0.7));
  box-shadow: 0 0 60px -20px rgba(230, 194, 122, 0.35);
}
.org-maestra h3 { font-size: var(--t-xl); margin: 0.15rem 0 0.35rem; }
.org-maestra p:last-child { font-size: var(--t-s); color: var(--texto-2); }
.org-maestra .rotulo { color: var(--a-maestra); }
/* O tronco atravessa o vão da grade (1.25rem) para encostar na linha das diretorias. */
.org-tronco { display: block; width: 2px; height: calc(2rem + 1.25rem); margin-bottom: -1.25rem; background: linear-gradient(var(--a-maestra), var(--linha-forte)); }
.org-diretorias { display: grid; gap: 1rem; }
@media (min-width: 680px) { .org-diretorias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .org-diretorias { grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; padding-top: 1.5rem; }
  /* Do centro da 1ª ao centro da 5ª diretoria: 5 colunas com 4 vãos de 1rem, centro da ponta = (100% - 4rem) / 10. */
  .org-diretorias::before { content: ''; position: absolute; top: 0; left: calc((100% - 4rem) / 10); right: calc((100% - 4rem) / 10); height: 2px; background: var(--linha-forte); }
  .org-dir::before { content: ''; position: absolute; top: -1.5rem; left: 50%; width: 2px; height: 1.5rem; background: var(--linha-forte); }
}
.org-dir {
  --cor: var(--a-tecnica);
  position: relative; padding: 1.1rem; border-radius: var(--r-g); border: 1px solid var(--linha);
  border-top: 2px solid var(--cor); background: rgb(var(--s2) / 0.7);
  transition: opacity 0.35s, transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.org-dir header { display: flex; align-items: center; gap: 0.75rem; }
.org-dir header .rotulo { color: var(--cor); }
.org-dir h3 { font-size: var(--t-l); }
.org-resp { font-size: var(--t-xs); color: var(--suave); margin: 0.75rem 0; line-height: 1.5; }
.org-dir ul { display: grid; gap: 0.4rem; }
.org-dir li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: 5px; background: rgba(168, 150, 220, 0.035); }
.org-dir li span { display: grid; line-height: 1.2; min-width: 0; }
.org-dir li strong { font-size: 0.82rem; }
.org-dir li small { font-size: 0.7rem; color: var(--suave); }
.org-dir li .avatar { --tam: 1.75rem; }
.area-borda-tecnica { --cor: var(--a-tecnica); }
.area-borda-operacoes { --cor: var(--a-operacoes); }
.area-borda-financeira { --cor: var(--a-financeira); }
.area-borda-crescimento { --cor: var(--a-crescimento); }
.area-borda-pessoas { --cor: var(--a-pessoas); }
.org.focando .org-dir:not(.foco) { opacity: 0.4; }
.org .org-dir.foco { transform: translateY(-4px); border-color: color-mix(in oklab, var(--cor) 50%, transparent); box-shadow: 0 20px 50px -24px color-mix(in oklab, var(--cor) 60%, transparent); }
.org-confianca { padding: 1.25rem 1.4rem; border-radius: var(--r-g); border: 1px dashed rgba(238, 156, 192, 0.35); background: rgba(238, 156, 192, 0.04); }
.org-confianca > .rotulo { color: var(--a-confianca); }
/* Setores (coordenação setorial da Técnica): card largo, abaixo das diretorias, lista em colunas. */
.org-setores::before { display: none; }
.org-setores ul { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
/* Núcleo de confiança: revisão final + fontes e vigência + recálculo independente. */
.org-nucleo { display: grid; gap: 0 1.5rem; }
@media (min-width: 900px) { .org-nucleo { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; } }
.org-revisora { display: flex; gap: 1rem; align-items: center; margin-top: 0.9rem; }
.org-revisora h3 { font-size: var(--t-xl); }
.org-revisora .org-resp { margin: 0.1rem 0 0.4rem; }
.org-revisora p:last-child { font-size: var(--t-s); color: var(--texto-2); }

/* ---------- Bento (diferenciais) ---------- */
.bento { display: grid; gap: 1rem; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento-1, .bento-2, .bento-3 { grid-column: span 2; }
  .bento-4, .bento-5 { grid-column: span 3; }
}
.bento-item {
  position: relative; overflow: hidden; padding: 1.5rem; border-radius: var(--r-g); border: 1px solid var(--linha);
  background: linear-gradient(170deg, rgb(var(--s5) / 0.6), rgb(var(--s3) / 0.5)); min-height: 13rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem;
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.bento-item h3 { font-size: var(--t-xl); }
.bento-item p { color: var(--suave); font-size: var(--t-s); max-width: 30rem; }
/* Cartões alinhados: título e ícone na mesma linha, no topo; texto logo abaixo; mesma altura por fileira. */
.bento-item { justify-content: flex-start; min-height: 0; gap: 0.9rem; }
.bento-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bento-topo h3 { font-size: var(--t-l); line-height: 1.25; }
.bento-icone { flex: none; }
.bento-icone i { display: block; width: 8px; border-radius: 4px; background: linear-gradient(var(--acento), var(--petroleo-600)); }
.bento-icone i:nth-child(1) { height: 40%; }
.bento-icone i:nth-child(2) { height: 100%; }
.bento-icone i:nth-child(3) { height: 65%; }
.i-revisao i { background: linear-gradient(var(--a-confianca), #6d3b52); }
.i-controle i { background: linear-gradient(var(--a-maestra), #6b5427); }
.i-dono i { background: linear-gradient(var(--a-operacoes), #29466b); }

/* ---------- Entrega ---------- */
.entrega-grade { display: grid; gap: 2rem; }
@media (min-width: 960px) { .entrega-grade { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.entrega-passos { display: grid; gap: 0.75rem; counter-reset: p; }
.entrega-passos li { display: flex; gap: 1rem; padding: 1.2rem; border-radius: var(--r-g); border: 1px solid var(--linha); background: rgb(var(--s2) / 0.6); }
.entrega-marcador { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(150, 115, 245, 0.12); color: var(--acento); font: 650 1rem var(--f-display); border: 1px solid rgba(150, 115, 245, 0.35); }
.entrega-passos h3 { font-size: var(--t-l); margin-bottom: 0.2rem; }
.entrega-passos p { font-size: var(--t-s); color: var(--suave); }

/* ---------- Oferta ---------- */
.oferta {
  position: relative; display: grid; gap: 2rem; padding: clamp(1.5rem, 4vw, 3.25rem); border-radius: var(--r-xg); overflow: hidden;
  border: 1px solid rgba(150, 115, 245, 0.3);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(98, 56, 200, 0.45), transparent 60%),
    linear-gradient(160deg, var(--oferta-1), var(--oferta-2));
  box-shadow: 0 40px 100px -40px rgba(150, 115, 245, 0.35);
}
@media (min-width: 900px) { .oferta { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.oferta h2 { font-size: var(--t-2xl); margin-bottom: 1.75rem; }
.oferta-caixa { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--r-g); background: rgb(var(--s1) / 0.55); border: 1px solid var(--linha-forte); }
.oferta-preco { font: 800 var(--t-2xl) / 1 var(--f-display); letter-spacing: -0.03em; }
.oferta-caixa .oferta-preco { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); white-space: nowrap; }
.oferta-avista { margin-top: -0.4rem; font-size: var(--t-m); color: var(--texto-2); }
/* Oferta: título em 2 linhas como no layout da cliente; a fonte acompanha a largura da coluna. */
@media (min-width: 720px) {
  .oferta-texto { container-type: inline-size; }
  .oferta-texto h2 > span { display: block; white-space: nowrap; }
  .oferta .oferta-texto h2 { font-size: min(var(--t-2xl), 6.2cqi); }
}
/* Oferta: o que vem incluído (título e texto) e os 3 primeiros passos dentro da caixa de compra. */
.oferta-inclui { display: grid; gap: 1.25rem; }
.oferta-inclui li { display: flex; gap: 0.75rem; align-items: flex-start; }
.oferta-inclui .icone-check { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--acento); }
.oferta-inclui h3 { font-size: var(--t-l); line-height: 1.3; margin: 0 0 0.3rem; }
.oferta-inclui p { color: var(--texto-2); max-width: 34em; }
/* Selo "Compra 100% segura": logos originais das bandeiras em plaquinhas brancas (legíveis nos dois temas). */
.compra-segura { display: grid; gap: 0.8rem; justify-items: center; padding-top: 1rem; border-top: 1px solid var(--linha); }
/* Grade organizada: 3 plaquinhas do mesmo tamanho por linha; Pix, Boleto e Hotmart na última. */
.compra-segura-bandeiras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; width: 100%; list-style: none; margin: 0; padding: 0; }
.compra-segura-bandeiras li {
  display: flex; align-items: center; justify-content: center; gap: 0.3rem; height: 2.1rem; padding: 0 0.5rem;
  border-radius: 6px; background: transparent; border: 1px solid var(--linha-forte);
}
/* No tema escuro os logos originais (azul-marinho, preto) somem no fundo escuro: lá a plaquinha fica clara. */
[data-tema="escuro"] .compra-segura-bandeiras li { background: #fff; border-color: transparent; }
.compra-segura-bandeiras img { display: block; height: 1rem; width: auto; max-width: 100%; object-fit: contain; }
.compra-segura-bandeiras li:nth-child(5) img { height: 1.2rem; }
/* O arquivo do Elo tem margem própria em volta do logo; o da American Express é quadrado. */
.compra-segura-bandeiras li:nth-child(4) img { height: 1.9rem; }
.compra-segura-bandeiras li:nth-child(6) img { height: 1.5rem; }
.compra-segura-hotmart img { height: 1.15rem; }
.compra-segura-boleto, .compra-segura-pix { font: 700 0.6rem var(--f-texto); letter-spacing: 0.04em; text-transform: uppercase; color: #3b3b4a; }
.compra-segura-boleto svg { width: 1rem; height: 0.75rem; stroke-width: 1; }
.compra-segura-pix img { height: 0.85rem; }
.compra-segura-pix span { color: #32bcad; text-transform: none; font-size: 0.72rem; letter-spacing: 0; }
.compra-segura-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; }
.compra-segura-selo { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--t-xs); color: var(--ok); }
.compra-segura-selo strong { font-weight: 700; }
.compra-segura-selo svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oferta-passos { display: grid; gap: 0.85rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.oferta-passos li { display: flex; gap: 0.7rem; align-items: flex-start; }
.oferta-passo-num {
  flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: rgba(150, 115, 245, 0.12); border: 1px solid rgba(150, 115, 245, 0.35); color: var(--acento); font: 650 0.75rem var(--f-display);
}
.oferta-passos strong { display: block; font-size: var(--t-s); color: var(--texto); }
.oferta-passos p { font-size: var(--t-xs); color: var(--suave); line-height: 1.5; margin-top: 0.15rem; }

/* ---------- FAQ ---------- */
.duvidas-grade { display: grid; gap: 1rem; }
@media (min-width: 960px) { .duvidas-grade { grid-template-columns: 0.8fr 1.2fr; } }
.faq { display: grid; gap: 0.6rem; }
.faq details { border-radius: var(--r-m); border: 1px solid var(--linha); background: rgb(var(--s2) / 0.55); transition: border-color 0.3s; }
.faq details[open] { border-color: var(--linha-forte); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; cursor: pointer; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icone { position: relative; flex: none; width: 1rem; height: 1rem; }
.faq-icone::before, .faq-icone::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; border-radius: 2px; background: var(--acento); transition: transform 0.3s var(--ease); }
.faq-icone::after { transform: rotate(90deg); }
.faq details[open] .faq-icone::after { transform: rotate(0); }
.faq details p { padding: 0 1.2rem 1.2rem; color: var(--texto-2); }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); padding-top: 3rem; margin-top: 2rem; }
.rodape-grade { display: grid; gap: 2rem; padding-bottom: 2rem; }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.5fr 1fr; } }
/* Logo original da Nata Cursos, com o fundo removido. */
.rodape-logo { display: block; height: 2.1rem; width: auto; }
.rodape-marca p { margin-top: 1rem; max-width: 30rem; color: var(--suave); font-size: var(--t-s); }
.rodape nav ul { display: grid; gap: 0.6rem; justify-items: start; }
/* No desktop, o 1º link começa na mesma linha da descrição (abaixo do logo de 2.6rem + 1rem de margem). */
/* Links do rodapé alinhados à esquerda, como o texto da coluna ao lado. */
@media (min-width: 760px) { .rodape nav { justify-self: end; padding-top: 3.7rem; } }
.rodape nav a { color: var(--texto-2); font-size: var(--t-s); }
.rodape nav a:hover { color: var(--acento); }
.rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1.5rem; padding: 1.25rem 0 2rem; border-top: 1px solid var(--linha); font-size: var(--t-xs); color: var(--apagado); }
.rodape-base a:hover { color: var(--texto); }
.aviso-dev { color: var(--a-crescimento); }
/* Canto direito do rodapé: logo da Nata Cursos e, embaixo, o aviso de ambiente (só fora de produção). */
.rodape-base-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
@media (max-width: 599px) { .rodape-base-dir { align-items: flex-start; } }
.rodape-m { padding-top: 0; }

/* ---------- Conta (login, senha) ---------- */
.pagina-conta { position: relative; isolation: isolate; display: flex; flex-direction: column; }
.conta-fundo { position: fixed; }
.conta-topo { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; }
.conta-main { flex: 1; display: grid; place-items: center; padding: 2rem var(--gutter) 4rem; }
.conta-cartao {
  width: min(100%, 28rem); padding: clamp(1.5rem, 5vw, 2.4rem); border-radius: var(--r-xg);
  border: 1px solid var(--linha-forte); background: linear-gradient(170deg, rgb(var(--s5) / 0.85), rgb(var(--s6) / 0.92));
  box-shadow: var(--sombra); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.conta-cartao h1 { font-size: var(--t-2xl); }
.conta-sub { margin: 0.75rem 0 1.75rem; color: var(--texto-2); }
.form { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: 0.45rem; }
.campo label { font-size: var(--t-s); font-weight: 600; }
.campo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.campo input {
  width: 100%; min-height: 3.1rem; padding: 0 1rem; border-radius: 6px; border: 1px solid var(--linha-forte);
  background: rgb(var(--s1) / 0.7); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.campo input:hover { border-color: rgba(168, 150, 220, 0.35); }
.campo input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px rgba(150, 115, 245, 0.15); }
.dica { font-size: var(--t-xs); color: var(--suave); }
.form .botao { margin-top: 0.4rem; }
.conta-rodape { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); font-size: var(--t-s); color: var(--suave); text-align: center; }
.conta-rodape a { color: var(--acento); font-weight: 500; }
.alerta { margin-bottom: 1.25rem; padding: 0.85rem 1rem; border-radius: 6px; font-size: var(--t-s); }
.alerta-erro { border: 1px solid rgba(255, 143, 143, 0.4); background: rgba(255, 143, 143, 0.08); color: var(--erro-texto); }
.alerta-ok { border: 1px solid rgba(94, 224, 160, 0.35); background: rgba(94, 224, 160, 0.07); color: var(--ok-texto); }

/* ---------- Área de membros ---------- */
.membros { position: relative; isolation: isolate; padding-bottom: 4rem; }
.membros-hero { display: grid; gap: 2rem; padding: clamp(2.5rem, 6vw, 4.5rem) 0 2.5rem; align-items: center; }
@media (min-width: 960px) { .membros-hero { grid-template-columns: 1fr auto; } }
.hero-titulo-m { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.6rem); }
.licenca {
  min-width: min(100%, 20rem); padding: 1.4rem; border-radius: var(--r-g); display: grid; gap: 0.35rem; justify-items: start;
  border: 1px solid rgba(94, 224, 160, 0.3); background: linear-gradient(160deg, rgb(var(--s11) / 0.35), rgb(var(--s3) / 0.6));
}
.licenca-titulo { font: 650 var(--t-xl) var(--f-display); letter-spacing: -0.02em; }
.licenca > p:nth-of-type(3) { color: var(--suave); font-size: var(--t-s); margin-bottom: 0.6rem; }
.licenca-inativa { border-color: rgba(255, 143, 143, 0.35); background: rgba(255, 143, 143, 0.05); }
.metricas { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--linha); border-radius: var(--r-g); overflow: hidden; gap: 1px; background: var(--linha); }
@media (min-width: 860px) { .metricas { grid-template-columns: repeat(4, 1fr); } }
.metricas div { padding: 1.25rem 1.3rem; background: var(--fundo-2); display: grid; gap: 0.35rem; }
.metricas dt { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.metricas dd { font: 650 clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem) / 1 var(--f-display); letter-spacing: -0.03em; }
.metricas p { font-size: var(--t-xs); color: var(--apagado); }
.secao-m { padding-top: clamp(3rem, 6vw, 4.5rem); }
.secao-m .secao-cabeca { margin-bottom: 1.75rem; }
.secao-m .secao-cabeca h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
.vazio { padding: 2.5rem 1.5rem; border-radius: var(--r-g); border: 1px dashed var(--linha-forte); text-align: center; display: grid; gap: 0.5rem; justify-items: center; }
.vazio h3 { font-size: var(--t-xl); }
.vazio p { color: var(--suave); max-width: 32rem; }
.selo-seguranca { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--r-m); border: 1px solid rgba(230, 194, 122, 0.25); background: rgba(230, 194, 122, 0.04); font-size: var(--t-s); color: var(--suave); }
.selo-seguranca .icone-check { color: var(--a-maestra); margin-top: 0.15rem; }
.selo-seguranca strong { color: var(--texto); }
.lideres { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem; }
.lideres li { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem; border-radius: var(--r-m); border: 1px solid var(--linha); background: rgb(var(--s2) / 0.55); }
.lideres span { display: grid; line-height: 1.25; }
.lideres small { font-size: var(--t-xs); color: var(--suave); }
@media (min-width: 1100px) { .lideres { grid-template-columns: repeat(7, 1fr); } .lideres li { flex-direction: column; text-align: center; } }

/* ---------- Legal e erro ---------- */
.legal { max-width: 46rem; padding: clamp(2.5rem, 6vw, 4.5rem) 0 4rem; }
.legal h1 { font-size: var(--t-2xl); }
.legal-data { margin: 0.75rem 0 2.5rem; color: var(--suave); font-size: var(--t-s); }
.legal h2 { font-size: var(--t-xl); margin: 2.25rem 0 0.75rem; }
.legal p, .legal li { color: var(--texto-2); }
.legal ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.legal ul + p, .legal p + p, .legal p + ul { margin-top: 0.9rem; }
.erro { padding: clamp(4rem, 12vw, 9rem) 0; display: grid; justify-items: start; gap: 1rem; }
.erro-codigo { font: 650 var(--t-xs) var(--f-mono); color: var(--acento); letter-spacing: 0.2em; }
.erro h1 { font-size: var(--t-2xl); }
.erro p { color: var(--texto-2); max-width: 32rem; margin-bottom: 1rem; }

/* ---------- Componentes da versão 0.4 ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Ícones de traço dos diferenciais (substituem as barrinhas). */
/* Ícones dos diferenciais (Phosphor Icons duotone, MIT): um só tom (acento), placa com leve tinta da cor. */
.bento-icone { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 6px; color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 16%, transparent), color-mix(in srgb, var(--acento) 4%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); }
.bento-icone svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.bento-icone .duo { opacity: 0.22; }

/* Comparação: tabela em 3 colunas no desktop, cartões empilhados no celular. */
.comparacao { border: 1px solid var(--linha); border-radius: var(--r-g); overflow: hidden; background: rgb(var(--s2) / 0.55); }
.comp-linha { display: grid; gap: 0.6rem; padding: 1.1rem 1.25rem; border-top: 1px solid var(--linha); }
.comp-linha:first-child { border-top: 0; }
.comp-cabeca { display: none; }
.comp-linha > [role="rowheader"] { font: 650 var(--t-l) / 1.25 var(--f-display); letter-spacing: -0.01em; }
.comp-avulsa { color: var(--suave); font-size: var(--t-s); }
.comp-mesa {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.55rem; align-items: flex-start; color: var(--texto); font-size: var(--t-s);
  background: linear-gradient(90deg, rgba(106, 63, 214, 0.2), transparent); border-radius: 5px; padding: 0.55rem 0.7rem;
}
.comp-mesa > span:last-child { flex: 1; min-width: 12rem; }
.comp-mesa .icone-check { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--acento); }
.comp-rotulo { display: block; flex-basis: 100%; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); margin-bottom: 0.15rem; }
.comp-mesa .comp-rotulo { color: var(--acento); }
@media (min-width: 860px) {
  .comp-linha { grid-template-columns: 0.9fr 1.1fr 1.3fr; gap: 1.5rem; align-items: center; padding: 1.15rem 1.5rem; }
  .comp-cabeca { display: grid; background: rgb(var(--s1) / 0.5); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }
  .comp-cabeca > :last-child { color: var(--acento); }
  .comp-rotulo { display: none; }
  .comp-linha > [role="rowheader"] { font-size: var(--t-m); }
}

/* Garantias na oferta. */
.garantias { display: grid; gap: 0.65rem; margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.garantias li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--t-xs); color: var(--suave); line-height: 1.5; }
.garantias strong { color: var(--texto); font-weight: 600; }
.garantias .icone-check { flex: none; width: 1rem; height: 1rem; color: var(--acento); margin-top: 0.1rem; }

/* Barra de compra fixa no celular. */
.barra-compra {
  position: fixed; z-index: 40; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.75rem 0.7rem 1rem;
  border-radius: 8px; border: 1px solid var(--linha-forte); background: rgb(var(--s8) / 0.88);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(calc(100% + 1rem)); pointer-events: none;
  transition: opacity var(--d-ui, 220ms) var(--ease), transform 320ms var(--ease);
}
.barra-compra[hidden] { display: none; }
.barra-compra.aberta { opacity: 1; transform: none; pointer-events: auto; }
.barra-compra-texto { display: grid; line-height: 1.2; min-width: 0; }
.barra-compra-texto strong { font: 650 var(--t-s) var(--f-display); }
.barra-compra-texto span { font-size: var(--t-xs); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) { .barra-compra { display: none; } }

/* Área de membros: ícone, aviso de versão, passos, novidades e suporte. */
.chip .ponto { width: 6px; height: 6px; }
.passos { display: grid; gap: 0.9rem; margin-top: 1.1rem; }
@media (min-width: 760px) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passos li { display: flex; gap: 0.8rem; align-items: flex-start; }
.passos strong { display: block; font-size: var(--t-s); }
.passos p { font-size: var(--t-s); color: var(--suave); margin-top: 0.15rem; }
.novidades { display: grid; border-left: 2px solid var(--linha-forte); margin-left: 0.4rem; }
.novidades li { position: relative; display: grid; gap: 0.25rem; padding: 0 0 1.4rem 1.4rem; }
.novidades li::before { content: ''; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--fundo); border: 2px solid var(--acento); }
.novidades li:first-child::before { background: var(--acento); box-shadow: 0 0 0 4px rgba(150, 115, 245, 0.18); }
.novidades time { font: 500 var(--t-xs) var(--f-mono); color: var(--apagado); }
.novidades p { font-size: var(--t-s); color: var(--texto-2); }
.novidades p:first-child { color: var(--texto); }
@media (min-width: 760px) { .novidades li { grid-template-columns: 8rem 1fr; gap: 1rem; } }
.suporte { display: grid; gap: 1.25rem; align-items: center; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-g); border: 1px solid var(--linha-forte); background: linear-gradient(160deg, rgba(106, 63, 214, 0.2), rgb(var(--s3) / 0.6)); }
.suporte h2 { font-size: var(--t-xl); margin-bottom: 0.4rem; }
.suporte p:not(.sobretitulo) { color: var(--texto-2); font-size: var(--t-s); }
.suporte-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (min-width: 860px) { .suporte { grid-template-columns: 1fr auto; } }

/* Motion dos componentes novos (mesmos princípios do bloco Motion). */
@media (prefers-reduced-motion: no-preference) {
  /* Ícones Phosphor são preenchidos: entram com opacidade e escala (só transform/opacity). */
  .js-motion .bento-icone svg { opacity: 0; transform: scale(0.7) rotate(-8deg); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); transition-delay: calc(0.25s + min(var(--i, 0), 6) * 70ms); }
  .js-motion .bento-item.visivel .bento-icone svg { opacity: 1; transform: none; }
  .js-motion .comparacao.revelar .comp-linha { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .js-motion .comparacao.visivel .comp-linha { opacity: 1; transform: none; }
  .js-motion .comparacao.visivel .comp-linha:nth-child(2) { transition-delay: 0.08s; }
  .js-motion .comparacao.visivel .comp-linha:nth-child(3) { transition-delay: 0.16s; }
  .js-motion .comparacao.visivel .comp-linha:nth-child(4) { transition-delay: 0.24s; }
  .js-motion .comparacao.visivel .comp-linha:nth-child(5) { transition-delay: 0.32s; }
  .js-motion .comparacao.visivel .comp-linha:nth-child(6) { transition-delay: 0.4s; }
}
@media (prefers-reduced-motion: reduce) {
  .barra-compra { transition: opacity 0.2s ease !important; transform: none; }
}

/* ---------- Responsivo: ajustes finos por faixa de tela ---------- */
/* Trilha da demonstração: rolagem lateral discreta no lugar da barra padrão do sistema. */
.demo-trilha, .demo-log ol { scrollbar-width: thin; scrollbar-color: rgba(168, 150, 220, 0.35) transparent; }
.demo-trilha::-webkit-scrollbar, .demo-log ol::-webkit-scrollbar { height: 6px; width: 6px; }
.demo-trilha::-webkit-scrollbar-thumb, .demo-log ol::-webkit-scrollbar-thumb { background: rgba(168, 150, 220, 0.35); border-radius: 999px; }

/* Tablet (2 colunas no organograma): a Técnica, que tem mais especialistas, ocupa a linha inteira
   com a lista em 2 colunas; as outras 4 diretorias formam um 2x2 equilibrado. */
@media (min-width: 680px) and (max-width: 1099px) {
  .org-dir.area-borda-tecnica { grid-column: 1 / -1; }
  .org-dir.area-borda-tecnica ul { grid-template-columns: repeat(2, 1fr); }
}

/* Celular pequeno: menos respiro interno nas caixas aninhadas para sobrar largura ao conteúdo. */
@media (max-width: 479px) {
  .demo-bloco, .demo-trilha-wrap, .demo-log, .demo-entrega, .demo-barra { padding: 1rem; }
  .demo-aviso { padding: 0.85rem 1rem; }
  .org-dir, .org-maestra, .org-confianca, .bento-item, .entrega-passos li, .oferta-caixa { padding: 1rem; }
  .org-maestra { flex-direction: column; align-items: flex-start; }
  .selo { letter-spacing: 0.06em; }
  .demo-metricas { gap: 1rem; }
  .demo-log li { grid-template-columns: auto 1fr; }
  .demo-log li time { grid-column: 1 / -1; padding-top: 0; }
}


/* ---------- Organograma v0.5: filtros, anéis, resumo e conexões vivas ---------- */
.org-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.org-filtro[data-org-filtro="todas"] { --cor: var(--acento); }
.org-filtro {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 0.9rem; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: rgb(var(--s2) / 0.6); color: var(--texto-2);
  font: 600 var(--t-s) var(--f-texto); cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.14s var(--ease);
}
.org-filtro i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cor); }
.org-filtro span { font: 600 0.72rem var(--f-mono); color: var(--suave); padding: 0.1rem 0.4rem; border-radius: 999px; background: rgb(var(--s1) / 0.5); }
.org-filtro[aria-pressed="true"] { color: var(--texto); border-color: color-mix(in oklab, var(--cor) 60%, transparent); background: color-mix(in oklab, var(--cor) 16%, transparent); }
.org-filtro:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .org-filtro:hover { color: var(--texto); border-color: color-mix(in oklab, var(--cor) 45%, transparent); } }

/* Anel na cor da área em volta dos líderes. */
.org-anel { position: relative; display: inline-grid; flex: none; padding: 3px; border-radius: calc(var(--r-g) - 4px); background: conic-gradient(from var(--giro, 0deg), color-mix(in oklab, var(--cor) 85%, transparent), transparent 40%, color-mix(in oklab, var(--cor) 60%, transparent) 70%, transparent); }
.org-anel > .avatar { border-color: transparent; }
.org-maestra .org-anel { border-radius: 9px; }

.org-maestra > div { min-width: 0; }
.org-resumo { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.org-resumo li { font-size: var(--t-xs); color: var(--texto-2); padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid rgba(230, 194, 122, 0.3); background: rgba(230, 194, 122, 0.06); }
.org-resumo strong { color: var(--a-maestra); font-variant-numeric: tabular-nums; }

.org-dir header { position: relative; }
.org-dir header > div { min-width: 0; flex: 1; }
/* Rótulo da diretoria quebra linha em vez de encostar no contador (Montserrat é mais larga). */
.org-dir header { gap: 0.6rem; }
.org-dir header .rotulo { display: block; letter-spacing: 0.08em; font-size: 0.68rem; line-height: 1.35; }
/* Nas 5 colunas do desktop o cabeçalho empilha: avatar em cima (contador no canto) e textos com a largura toda. */
@media (min-width: 1100px) {
  .org-dir header { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .org-dir header .org-qtd { position: absolute; top: 0; right: 0; }
}
.org-cargo { display: block; font-size: 0.72rem; color: var(--suave); line-height: 1.3; }
.org-qtd { align-self: flex-start; display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 0.35rem; border-radius: 999px; font: 600 0.72rem var(--f-mono); color: var(--cor); border: 1px solid color-mix(in oklab, var(--cor) 45%, transparent); background: color-mix(in oklab, var(--cor) 10%, transparent); }

/* Especialistas: linha ganha destaque e o avatar reage. */
.org-dir li { transition: background-color 0.2s ease, transform 0.2s var(--ease); }
.org-dir li .avatar { transition: transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .org-dir li:hover { background: color-mix(in oklab, var(--cor) 12%, transparent); transform: translateX(3px); }
  .org-dir li:hover .avatar { transform: scale(1.12); }
}

/* Filtro: desktop destaca; celular e tablet mostram só a diretoria escolhida. */
.org-dir.fora { opacity: 0.3; transform: scale(0.98); }
.org-dir.filtrada { border-color: color-mix(in oklab, var(--cor) 55%, transparent); box-shadow: 0 24px 60px -30px color-mix(in oklab, var(--cor) 70%, transparent); }
@media (max-width: 1099px) {
  .org[data-filtro]:not([data-filtro="todas"]) .org-dir.fora { display: none; }
  .org[data-filtro]:not([data-filtro="todas"]) .org-dir.filtrada { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .org-anel { animation: girar 8s linear infinite; }

  /* Pulso de energia descendo da maestra e correndo pela linha das diretorias. */
  .org-tronco { position: relative; overflow: hidden; }
  .org-tronco::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(transparent, #fff8, transparent); animation: descer 2.6s var(--ease-in-out) infinite; }
  @media (min-width: 1100px) {
    .org-diretorias::after {
      content: ''; position: absolute; top: -1px; left: 10%; width: 12%; height: 4px; border-radius: 4px; pointer-events: none;
      background: linear-gradient(90deg, transparent, var(--acento), transparent); filter: blur(1px);
      animation: correr 5.2s var(--ease-in-out) 1.3s infinite;
    }
  }

  /* Especialistas entram em cascata quando o cartão aparece. */
  .js-motion .org-dir li { opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), background-color 0.2s ease; }
  .js-motion .org-dir.visivel li { opacity: 1; transform: none; }
  .js-motion .org-dir.visivel li:nth-child(1) { transition-delay: 0.25s; }
  .js-motion .org-dir.visivel li:nth-child(2) { transition-delay: 0.3s; }
  .js-motion .org-dir.visivel li:nth-child(3) { transition-delay: 0.35s; }
  .js-motion .org-dir.visivel li:nth-child(4) { transition-delay: 0.4s; }
  .js-motion .org-dir.visivel li:nth-child(5) { transition-delay: 0.45s; }
  .js-motion .org-dir.visivel li:nth-child(n+6) { transition-delay: 0.5s; }
  .js-motion .org-dir.visivel li:hover { transition-delay: 0s; }
  .org-dir { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s; }
}
@keyframes descer { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
@keyframes correr { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(560%); opacity: 0; } }

/* Avatares vivos (ganchos do gerador: .av-cabeca, .av-olhos.av-piscar-N, .av-boca). */
.avatar-svg .av-cabeca, .avatar-svg .av-olhos, .avatar-svg .av-boca { transform-box: fill-box; transform-origin: center; }
.avatar-svg .av-cabeca { transform-origin: 50% 100%; transition: transform 0.35s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .avatar-svg .av-olhos { animation: piscar 7s ease-in-out infinite; }
  .avatar-svg .av-piscar-1 { animation-delay: -1.7s; animation-duration: 8.2s; }
  .avatar-svg .av-piscar-2 { animation-delay: -3.9s; animation-duration: 6.4s; }
  .avatar-svg .av-piscar-3 { animation-delay: -5.3s; animation-duration: 9s; }
  @media (hover: hover) and (pointer: fine) {
    .org-dir li:hover .av-cabeca, .org-maestra:hover .av-cabeca, .org-dir header:hover .av-cabeca, .org-revisora:hover .av-cabeca, .lideres li:hover .av-cabeca { transform: rotate(-6deg); }
  }
  /* Na demonstração, quem está trabalhando "fala". */
  .demo .agente-linha.ativo .av-boca, .central-linha.ativo .av-boca { animation: falar 0.5s ease-in-out infinite alternate; }
  .demo .agente-linha.ativo .av-cabeca, .central-linha.ativo .av-cabeca { animation: acenar 1.6s ease-in-out infinite; }
}
@keyframes piscar { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes falar { from { transform: scaleY(0.6); } to { transform: scaleY(1.35); } }
@keyframes acenar { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } }

/* ---------- Central de downloads (área de membros, public/js/membros.js) ---------- */
.painel { display: grid; gap: 1rem; }
@media (min-width: 900px) { .painel { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); align-items: start; gap: 1.25rem; } }

/* Lista de pacotes (abas) */
.painel-lista { display: grid; gap: 0.6rem; align-content: start; }
@media (min-width: 900px) { .painel-lista { position: sticky; top: 5.5rem; } }
.painel-aba {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.85rem;
  width: 100%; padding: 0.9rem 1rem; border-radius: var(--r-m); border: 1px solid var(--linha); text-align: left; cursor: pointer;
  background: rgb(var(--s2) / 0.6); color: var(--texto); font: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.14s var(--ease);
}
.painel-aba::before { content: ''; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--acento); transform: scaleY(0); transition: transform 0.25s var(--ease); }
.painel-aba[aria-selected="true"] { border-color: rgba(150, 115, 245, 0.55); background: rgba(106, 63, 214, 0.14); }
.painel-aba[aria-selected="true"]::before { transform: scaleY(1); }
.painel-aba:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .painel-aba:hover { border-color: var(--linha-forte); } }
.painel-aba-icone { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 6px; border: 1px solid rgba(150, 115, 245, 0.35); background: rgb(var(--s1) / 0.5); color: var(--acento); }
.painel-aba-icone svg { width: 1.3rem; height: 1.3rem; }
.painel-aba-texto { display: grid; min-width: 0; line-height: 1.25; }
.painel-aba-texto strong { font: 700 var(--t-m) var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-aba-texto small { font-size: var(--t-xs); color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-aba-meta { display: grid; justify-items: end; gap: 0.2rem; }
.painel-aba-meta code { font-size: 0.72rem; color: var(--texto-2); }
.painel-situacao { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; color: var(--suave); white-space: nowrap; }
.painel-situacao i { width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); }
.situacao-nova .painel-situacao { color: var(--acento); }
.situacao-nova .painel-situacao i { background: var(--acento); box-shadow: 0 0 0 3px rgba(150, 115, 245, 0.22); }
.situacao-em-dia .painel-situacao { color: var(--ok); }
.situacao-em-dia .painel-situacao i { background: var(--ok); }
.painel-resumo { font-size: var(--t-xs); color: var(--apagado); padding: 0.25rem 0.25rem 0; }

/* Detalhe do pacote */
.painel-conteudo { display: grid; gap: 1rem; min-width: 0; }
.painel-detalhe {
  display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-g);
  border: 1px solid var(--linha-forte); background: linear-gradient(170deg, rgb(var(--s5) / 0.7), rgb(var(--s3) / 0.6)); box-shadow: var(--sombra);
}
.painel-detalhe.situacao-nova { border-color: rgba(150, 115, 245, 0.55); }
/* O display: grid acima anularia o atributo hidden usado pelas abas. */
.painel-detalhe[hidden] { display: none; }
.painel-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.painel-cabeca > div { flex: 1; min-width: 10rem; }
.painel-cabeca h3 { font-size: var(--t-xl); }
.painel-icone { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 7px; border: 1px solid rgba(150, 115, 245, 0.4); background: rgba(106, 63, 214, 0.16); color: var(--acento); }
.painel-icone svg { width: 1.7rem; height: 1.7rem; }
.painel-aviso { font-size: var(--t-s); color: var(--texto-2); padding: 0.85rem 1rem; border-radius: 6px; border: 1px solid rgba(150, 115, 245, 0.4); background: rgba(106, 63, 214, 0.12); }
.painel-aviso strong { color: var(--texto); }
.painel-desc { color: var(--texto-2); font-size: var(--t-s); }

.painel-fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--linha); background: var(--linha); }
@media (min-width: 1100px) { .painel-fatos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.painel-fatos div { display: grid; gap: 0.25rem; align-content: start; padding: 0.85rem 1rem; background: rgb(var(--s1) / 0.55); }
.painel-fatos dt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); }
.painel-fatos dd { font: 700 var(--t-l) / 1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.painel-fatos dd small { display: block; font: 400 var(--t-xs) var(--f-texto); color: var(--suave); margin-top: 0.15rem; }

.painel-acao { display: grid; gap: 0.75rem; }
.painel-baixar { width: 100%; }
@media (min-width: 640px) { .painel-baixar { width: auto; justify-self: start; min-width: 18rem; } }
.icone-baixar { width: 1.15rem; height: 1.15rem; }
.painel-baixar.baixado { background: linear-gradient(180deg, #1f9e72, #12805a); border-color: rgba(94, 224, 160, 0.4); }
.painel-integridade { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: var(--t-xs); color: var(--suave); }
.painel-integridade code { color: var(--texto-2); }
.painel-copiar { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border-radius: 4px; border: 1px solid var(--linha-forte); background: none; color: var(--texto-2); font: 600 var(--t-xs) var(--f-texto); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
.painel-copiar svg { width: 0.95rem; height: 0.95rem; }
.painel-copiar.copiado { color: var(--ok); border-color: rgba(94, 224, 160, 0.45); }

.painel-notas { display: grid; gap: 0.4rem; padding: 1rem 1.1rem; border-radius: var(--r-m); border: 1px dashed var(--linha-forte); }
.painel-notas p:last-child { color: var(--texto-2); font-size: var(--t-s); }
.painel-versoes { border-top: 1px solid var(--linha); padding-top: 0.75rem; }
.painel-versoes summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 600; font-size: var(--t-s); color: var(--texto-2); list-style: none; }
.painel-versoes summary::-webkit-details-marker { display: none; }
.painel-versoes summary::before { content: ''; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s var(--ease); }
.painel-versoes[open] summary::before { transform: rotate(45deg); }
.painel-versoes summary span { font: 600 0.7rem var(--f-mono); padding: 0.1rem 0.45rem; border-radius: 999px; background: rgb(var(--s1) / 0.6); color: var(--suave); }
.painel-versoes ol { display: grid; gap: 0.75rem; margin-top: 0.85rem; }
.painel-versoes li { display: grid; grid-template-columns: auto auto 1fr; gap: 0.25rem 0.75rem; align-items: baseline; font-size: var(--t-s); }
.painel-versoes time { font: 500 var(--t-xs) var(--f-mono); color: var(--apagado); }
.painel-versoes li p { grid-column: 1 / -1; color: var(--suave); }

/* Sem JavaScript: a lista vira um índice e todos os detalhes aparecem. Com JS, só o selecionado. */
.painel:not(.com-abas) .painel-aba::before { display: none; }

/* Checklist de instalação */
.instalacao { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-g); border: 1px solid var(--linha); background: rgb(var(--s2) / 0.55); }
.instalacao > header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.instalacao h2 { font-size: var(--t-xl); }
.instalacao-progresso { display: grid; gap: 0.45rem; min-width: min(100%, 15rem); font-size: var(--t-xs); color: var(--suave); }
.instalacao.concluida .instalacao-progresso { color: var(--ok); }
.instalacao-passos { display: grid; gap: 0.75rem; }
@media (min-width: 860px) { .instalacao-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.instalacao-passos label { position: relative; display: flex; gap: 0.85rem; align-items: flex-start; height: 100%; padding: 1rem; border-radius: var(--r-m); border: 1px solid var(--linha); background: rgb(var(--s1) / 0.4); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
.instalacao-passos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.instalacao-passos input:focus-visible + .instalacao-marca { outline: 2px solid var(--acento); outline-offset: 3px; }
.instalacao-marca { position: relative; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid rgba(150, 115, 245, 0.5); color: var(--acento); font: 700 0.9rem var(--f-display); transition: background-color 0.2s ease, border-color 0.2s ease; }
.instalacao-marca .icone-check { position: absolute; width: 1.1rem; height: 1.1rem; color: #fff; opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.25s var(--ease); }
.instalacao-marca b { transition: opacity 0.15s ease; }
.instalacao-passos strong { display: block; font-size: var(--t-s); }
.instalacao-passos small { display: block; font-size: var(--t-xs); color: var(--suave); margin-top: 0.2rem; line-height: 1.5; }
.instalacao-passos li.feito label { border-color: rgba(94, 224, 160, 0.4); background: rgba(94, 224, 160, 0.06); }
.instalacao-passos li.feito .instalacao-marca { background: var(--ok); border-color: var(--ok); }
.instalacao-passos li.feito .instalacao-marca .icone-check { opacity: 1; transform: none; }
.instalacao-passos li.feito .instalacao-marca b { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .instalacao-passos label:hover { border-color: var(--linha-forte); } }
.instalacao .barra > span { transition: transform 0.5s var(--ease); }
.instalacao .selo-seguranca { margin-top: 0; }

/* Histórico de downloads */
.historico { overflow-x: auto; border-radius: var(--r-m); border: 1px solid var(--linha); background: rgb(var(--s2) / 0.55); }
.historico table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.historico th { text-align: left; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--linha); }
.historico td { padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--linha); color: var(--texto-2); white-space: nowrap; }
.historico tr:last-child td { border-bottom: 0; }
.historico td:first-child { font-variant-numeric: tabular-nums; color: var(--suave); }

@media (prefers-reduced-motion: no-preference) {
  .painel-detalhe.entrando { animation: entrar 0.35s var(--ease) both; }
  .painel-baixar.baixando .icone-baixar { animation: baixando 0.9s var(--ease-in-out) infinite; }
  .situacao-nova .painel-situacao i { animation: estalo 0.45s var(--ease) 0.5s both; }
  .instalacao-passos li.feito .instalacao-marca { animation: estalo 0.35s var(--ease); }
}
@keyframes baixando { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ---------- Preço em odômetro (public/js/vendas.js: precoAnimado) ---------- */
.preco-rolo { display: inline-flex; align-items: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preco-rolo .digito { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: bottom; }
.preco-rolo .digito-fita { display: block; line-height: 1; transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) {
  .preco-rolo .digito-fita { transition: transform 3.2s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: calc(0.4s + var(--atraso, 0ms)); }
  .oferta.visivel .preco-rolo { animation: brilho-preco 1.4s ease-out 4.2s both; }
}
.oferta.visivel .preco-rolo .digito-fita { transform: translateY(calc(var(--alvo, 0) * -1em)); }
@keyframes brilho-preco { 0% { text-shadow: 0 0 0 transparent; } 40% { text-shadow: 0 0 28px rgba(150, 115, 245, 0.75); } 100% { text-shadow: 0 0 0 transparent; } }

/* ---------- Interruptor de tema ---------- */
/* Trilho com sol (claro) e lua (escuro); a bolinha desliza até o ícone ativo. aria-checked="true" = escuro. */
.interruptor-tema { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 999px; flex: none; }
.interruptor-trilho {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 3.6rem; height: 2rem; padding: 0 0.35rem; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: rgb(var(--s1) / 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.interruptor-trilho svg { position: relative; z-index: 1; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--suave); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s ease, transform 0.35s var(--ease); }
.interruptor-lua { fill: var(--suave); stroke: none !important; }
.interruptor-botao {
  position: absolute; top: 50%; left: 0.2rem; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e6e0f5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transform: translate(0, -50%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), background 0.3s ease;
}
.interruptor-tema[aria-checked="true"] .interruptor-botao { transform: translate(1.6rem, -50%); background: linear-gradient(180deg, #7b52ec, #4a24a0); }
.interruptor-tema[aria-checked="true"] .interruptor-lua { fill: #ffffff; }
.interruptor-tema[aria-checked="false"] .interruptor-sol { stroke: #b0561c; }
.interruptor-tema[aria-checked="true"] .interruptor-sol { opacity: 0.7; }
/* No claro, a lua fica visível em roxo do lado oposto ao sol, mostrando para onde o interruptor leva. */
.interruptor-tema[aria-checked="false"] .interruptor-lua { fill: var(--petroleo-600); opacity: 1; }
.interruptor-tema:active .interruptor-botao { width: 1.8rem; }
.interruptor-tema[aria-checked="true"]:active .interruptor-botao { transform: translate(1.35rem, -50%); }
.interruptor-tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .interruptor-tema:hover .interruptor-trilho { border-color: rgba(150, 115, 245, 0.55); }
  .interruptor-tema[aria-checked="false"]:hover .interruptor-sol { transform: rotate(45deg); }
  .interruptor-tema[aria-checked="true"]:hover .interruptor-lua { transform: rotate(-15deg); }
}
.topo-tema-movel { display: flex; margin-right: 0.5rem; }
@media (min-width: 960px) { .topo-tema-movel { display: none; } .topo-acoes .interruptor-tema { margin-right: 0.35rem; } }
.conta-topo-acoes { display: flex; align-items: center; gap: 1rem; }
@media (prefers-reduced-motion: reduce) { .interruptor-botao, .interruptor-trilho svg { transition: none; } }

/* ---------- Tema claro ([data-tema="claro"] em <html>, definido por public/js/tema.js) ---------- */
[data-tema="claro"] {
  color-scheme: light;
  --logo-1: #4a24a0;
  --logo-2: #20d5c2;
  --fundo: #f7f5fc;
  --fundo-2: #ffffff;
  --superficie: rgba(255, 255, 255, 0.75);
  --superficie-forte: #ffffff;
  --superficie-alta: #ffffff;
  --linha: rgba(74, 36, 160, 0.12);
  --linha-forte: rgba(74, 36, 160, 0.22);
  --texto: #1a1330;
  --texto-2: #3f3858;
  --suave: #59517a;
  --apagado: #6a6388;
  --acento: #6a3fd6;
  --acento-forte: #4a24a0;
  --a-maestra: #94691d;
  --a-tecnica: #6a3fd6;
  --a-operacoes: #2a64b0;
  --a-financeira: #3f7a22;
  --a-crescimento: #b0561c;
  --a-pessoas: #0f7a73;
  --a-confianca: #b03f74;
  --ok: #12805a;
  --erro: #c43c3c;
  --erro-texto: #8f2323;
  --ok-texto: #0d5f43;
  --s1: 255 255 255; --s2: 255 255 255; --s3: 251 250 254; --s4: 255 255 255; --s5: 255 255 255;
  --s6: 251 250 254; --s7: 255 255 255; --s8: 255 255 255; --s9: 255 255 255; --s10: 255 255 255; --s11: 236 230 252;
  --oferta-1: #eee8fd; --oferta-2: #ffffff;
  --avatar-1: #ffffff; --avatar-2: #f1edfb;
  --destaque-1: #6a3fd6; --destaque-2: #8b62f0; --destaque-3: #4a24a0;
  --aurora-opacidade: 0.18;
  --sombra: 0 24px 60px -30px rgba(40, 20, 80, 0.28);
}
[data-tema="claro"] .grade-fundo {
  background-image:
    linear-gradient(rgba(74, 36, 160, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 36, 160, 0.06) 1px, transparent 1px);
}
[data-tema="claro"] .topo.rolou, [data-tema="claro"] .topo-membros { background: rgba(247, 245, 252, 0.82); }
[data-tema="claro"] .botao-contorno { background: #ffffff; }
[data-tema="claro"] .aviso-acesso { background: rgba(106, 63, 214, 0.07); border-color: rgba(106, 63, 214, 0.25); }
[data-tema="claro"] .iniciais { background: rgba(106, 63, 214, 0.1); border-color: rgba(106, 63, 214, 0.35); }
[data-tema="claro"] ::selection { background: rgba(106, 63, 214, 0.2); }
[data-tema="claro"] .avatar { border-color: color-mix(in oklab, var(--cor) 35%, transparent); }
[data-tema="claro"] .demo, [data-tema="claro"] .central, [data-tema="claro"] .oferta, [data-tema="claro"] .comparacao { box-shadow: var(--sombra); }
[data-tema="claro"] .org-maestra { background: linear-gradient(160deg, rgba(148, 105, 29, 0.1), #ffffff); }

/* Troca de tema: View Transitions (public/js/tema.js). O círculo é animado via JS no ::view-transition-new;
   aqui só desligamos o esmaecer padrão para não somar dois efeitos. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
/* Durante a troca, pausa as animações contínuas (auroras, anéis, brilhos) para sobrar quadro para o círculo. */
:root:active-view-transition *, :root:active-view-transition *::before, :root:active-view-transition *::after { animation-play-state: paused !important; }

/* ---------- Motion ----------
   Princípios: só transform e opacity (clip-path e altura do FAQ são as exceções),
   ease-out forte nas entradas, UI abaixo de 300 ms, hover só em mouse,
   revelação nunca esconde conteúdo se o JavaScript falhar. */
:root {
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-press: 140ms;
  --d-ui: 220ms;
  --d-revelar: 700ms;
}

@keyframes cursor { 50% { opacity: 0; } }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { transform: translateY(105%); } to { transform: none; } }
@keyframes deriva-1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, 8%, 0) scale(1.08); } }
@keyframes deriva-2 { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(10%, -6%, 0); } }
@keyframes orbitar { to { transform: rotate(360deg); } }
@keyframes brilho-texto { to { background-position: -200% 0; } }
@keyframes pulsar { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes girar { to { --giro: 360deg; } }
@keyframes barras { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
@keyframes crescer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes entrar-hero { from { opacity: 0; transform: translateY(14px); } }
@keyframes entrar-central { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes estalo { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes onda { from { transform: scale(1); opacity: 0.55; } to { transform: scale(1.06, 1.25); opacity: 0; } }
@keyframes progresso-pagina { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Pulso de status: anel em transform (antes era box-shadow, que repinta a cada quadro). */
.pulso { position: relative; box-shadow: none; }
.pulso::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0; }

/* Pressão de botão: resposta imediata. */
.botao { position: relative; overflow: hidden; isolation: isolate; }
.botao:active { transform: scale(0.97); transition-duration: var(--d-press); }

/* Brilho que atravessa o botão principal. */
.botao-primario::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
}

/* Luz que segue o cursor nos cartões. */
.spot { position: relative; }
.spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 115, 245, 0.14), transparent 65%);
  transition: opacity 0.3s ease;
}

/* Barra de leitura sob o topo (animação guiada pela rolagem, fora da thread principal). */
.topo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--petroleo-600), var(--acento));
  transform-origin: left; transform: scaleX(0);
}

/* Menus: entram a partir do botão que os abriu. */
.menu-movel-painel, .menu-usuario-painel {
  transform-origin: top right;
  transition: opacity var(--d-ui) var(--ease), transform var(--d-ui) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .botao-primario:hover { transform: translateY(-1px); }
  .botao:hover .icone-seta { transform: translateX(3px); }
  .bento-item:hover { border-color: var(--linha-forte); transform: translateY(-3px); }
  .spot:hover::after { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .aurora-1 { animation: deriva-1 22s ease-in-out infinite; }
  .aurora-2 { animation: deriva-2 28s ease-in-out infinite; }
  .orbita { animation: orbitar 60s linear infinite; }
  .destaque { animation: brilho-texto 8s linear infinite; }
  .pulso::after { animation: pulsar 2s var(--ease) infinite; }
  .central::before { animation: girar 6s linear infinite; }

  /* Título do hero sobe linha a linha. */
  .hero-titulo .linha > span { animation: subir 0.9s var(--ease) both; }
  .hero-titulo .linha:nth-child(2) > span { animation-delay: 0.08s; }
  .hero-titulo .linha:nth-child(3) > span { animation-delay: 0.16s; }

  @media (hover: hover) and (pointer: fine) {
    .botao-primario:hover::after { transform: translateX(120%); transition: transform 0.7s var(--ease); }
    .bento-item:hover .bento-icone i { animation: barras 1.2s ease-in-out infinite; }
    .bento-item:hover .bento-icone i:nth-child(2) { animation-delay: -0.4s; }
    .bento-item:hover .bento-icone i:nth-child(3) { animation-delay: -0.8s; }
  }

  @supports (animation-timeline: scroll()) {
    .topo::after { animation: progresso-pagina linear both; animation-timeline: scroll(root); }
  }

  /* Revelação ao rolar. Só esconde quando o script confirmou que vai mostrar (html.js-motion). */
  .js-motion .revelar {
    opacity: 0; transform: translateY(18px);
    transition: opacity var(--d-revelar) var(--ease), transform var(--d-revelar) var(--ease);
    transition-delay: calc(min(var(--i, 0), 6) * 70ms);
  }
  .js-motion .revelar.visivel { opacity: 1; transform: none; }

  /* Hero: entra só com CSS desde a primeira pintura, sem esperar o JavaScript.
     Esperar o script atrasava o maior texto da tela (LCP) em cerca de 1 s no celular.
     Sem "to" nos keyframes: o estado final é o transform normal do elemento (com o giro 3D no desktop). */
  .js-motion .hero .revelar { opacity: 1; transform: none; transition: none; animation: entrar-hero 0.7s var(--ease) both; }
  .js-motion .hero-texto > .selo { animation-delay: 0.05s; }
  .js-motion .hero-texto > .hero-sub { animation-delay: 0.12s; }
  .js-motion .hero-texto > .acoes { animation-delay: 0.2s; }
  .js-motion .hero-texto > .hero-numeros { animation-delay: 0.28s; }
  .js-motion .hero-texto > .aviso-acesso { animation-delay: 0.36s; }
  .js-motion .hero .central.revelar { animation: entrar-central 0.9s var(--ease) 0.3s both; }
  @media (min-width: 1040px) {
    .js-motion .hero .central.revelar { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
  }

  /* Fluxo: cada número acende quando o trilho passa por ele. */
  .fluxo-num { transition: border-color 0.4s ease, background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }
  .js-motion .fluxo-passo.visivel .fluxo-num {
    border-color: var(--acento); background: linear-gradient(rgba(106, 63, 214, 0.35), rgba(106, 63, 214, 0.35)), var(--fundo); color: var(--texto);
    box-shadow: 0 0 0 4px rgba(150, 115, 245, 0.12);
    transition-delay: calc(0.3s + var(--i, 0) * 0.7s);
  }

  /* Organograma: as linhas se desenham da maestra para as diretorias. */
  .js-motion .org-tronco { transform-origin: top; transform: scaleY(0); transition: transform 0.5s var(--ease) 0.3s; }
  .js-motion .org-topo.visivel .org-tronco { transform: scaleY(1); }
  @media (min-width: 1100px) {
    .js-motion .org-diretorias::before { transform: scaleX(0); transition: transform 0.8s var(--ease-in-out) 0.5s; }
    .js-motion .org-diretorias:has(.visivel)::before { transform: scaleX(1); }
  }

  /* Diferenciais: as barras do ícone crescem quando o cartão aparece. */
  .bento-icone i { transform-origin: bottom; }
  .js-motion .bento-item.visivel .bento-icone i { animation: crescer 0.7s var(--ease) both; animation-delay: calc(0.25s + min(var(--i, 0), 6) * 70ms); }
  .js-motion .bento-item.visivel .bento-icone i:nth-child(2) { animation-delay: calc(0.33s + min(var(--i, 0), 6) * 70ms); }
  .js-motion .bento-item.visivel .bento-icone i:nth-child(3) { animation-delay: calc(0.41s + min(var(--i, 0), 6) * 70ms); }

  /* Entrega: marcadores estalam em sequência. */
  .js-motion .entrega-passos li.visivel .entrega-marcador { animation: estalo 0.45s var(--ease) both; animation-delay: calc(0.2s + min(var(--i, 0), 6) * 70ms); }

  /* Demonstração. */
  /* Simulação: pontinhos da Lia digitando, arquivo "gerando" pulsa e arquivo pronto dá um estalo. */
  .chat-lia.digitando .chat-digitando i { animation: digitar 1s ease-in-out infinite; }
  .chat-lia.digitando .chat-digitando i:nth-child(2) { animation-delay: 0.15s; }
  .chat-lia.digitando .chat-digitando i:nth-child(3) { animation-delay: 0.3s; }
  .arquivo.gerando .arquivo-icone { animation: gerar-arquivo 1.1s ease-in-out infinite; }
  .arquivo.pronto .arquivo-icone { animation: estalo 0.45s var(--ease) both; }
  .demo .no.ativo::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 1px solid var(--acento); animation: onda 1.1s var(--ease) infinite;
  }
  .entrega.pronta .entrega-num { animation: estalo 0.4s var(--ease) both; }
  .central-linha.ativo .estado { animation: estalo 0.35s var(--ease) both; }

  /* Menus abrem com escala sutil, nunca a partir do zero. */
  @starting-style {
    .menu-movel[open] .menu-movel-painel, .menu-usuario[open] .menu-usuario-painel { opacity: 0; transform: translateY(-4px) scale(0.96); }
  }

  /* FAQ: resposta abre com altura animada onde há suporte e o texto entra suave. */
  .faq details[open] p { animation: entrar 0.28s var(--ease) both; }
  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.28s var(--ease), content-visibility 0.28s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* Menos movimento: mantém mudanças de opacidade e estado, remove deslocamentos e loops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js-motion .revelar { opacity: 0; transition: opacity 0.3s ease !important; }
  .js-motion .revelar.visivel { opacity: 1; }
  .central-linha.ativo, .demo .no.ativo, .org .org-dir.foco { transform: none; }
}