/* ── Avadata ─────────────────────────────────────────────────────────────
   Paleta e tipografia: brand/colors.css. Os neutros puxam para o azul da
   marca — cinza puro aqui parece descuido.

   Três coisas que esta página evita por regra, porque são os tells de
   landing gerada: glow radial de fundo, texto em gradiente e card-com-ícone
   repetido. O gradiente da marca só aparece onde é MARCA ou SINAL — o
   símbolo, o pulso do diagrama, o botão principal. Nunca como fundo de seção
   e nunca em texto.                                                        */
:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --surface:#F6F8FC;
  /* Superfície do hero: não é só um cinza — leva matiz da marca num valor
     muito baixo, então o bloco do topo tem cor própria. Chapada, nunca
     gradiente. */
  --hero:#F2F5FD;
  --fg:#0B0F1A;
  --fg-muted:#54607A;
  --line:#E6EAF0;
  --linha-caixa:#DFE5F0;
  --accent:#5B4BFF;
  --accent-2:#3A8CFF;
  --sinal:#5B4BFF;
  --sinal-fraco:#5B4BFF6b;
  --alerta:#D9772B;
  --critico:#CF3F52;
  --ok:#2E9E5B;

  /* Faixas escuras: continuam escuras nos dois temas — é a assinatura. */
  --band-bg:#0B0F1A;
  --band-fg:#E6EAF0;
  --band-muted:#8E9BB6;
  --band-line:#1E2738;
  --band-accent:#7FD3FF;

  --grad:linear-gradient(45deg,#7FD3FF 0%,#3A8CFF 50%,#5B4BFF 100%);
  --fonte:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --passo:clamp(3.5rem,8vw,6.5rem);
  --leito:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B0F1A; --surface:#121A2B; --hero:#101726; --fg:#E6EAF0;
    --fg-muted:#93A0BC; --line:#1E2738; --linha-caixa:#243048;
    --accent:#7FD3FF; --accent-2:#3A8CFF; --sinal:#7FD3FF; --sinal-fraco:#7FD3FF66;
    --alerta:#E9A15C; --critico:#F0798A; --ok:#5FD08A;
    --band-bg:#121A2B; --band-line:#243048;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0F1A; --surface:#121A2B; --hero:#101726; --fg:#E6EAF0;
  --fg-muted:#93A0BC; --line:#1E2738; --linha-caixa:#243048;
  --accent:#7FD3FF; --accent-2:#3A8CFF; --sinal:#7FD3FF; --sinal-fraco:#7FD3FF66;
  --alerta:#E9A15C; --critico:#F0798A; --ok:#5FD08A;
  --band-bg:#121A2B; --band-line:#243048;
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--fonte);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3{text-wrap:balance; letter-spacing:-.028em; line-height:1.1; margin:0}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem); font-weight:600}
h2{font-size:clamp(1.6rem,3.4vw,2.45rem); font-weight:600}
h3{font-size:1.1rem; font-weight:600; letter-spacing:-.012em}
p{margin:0}
a{color:inherit}
/* Métrica não dança ao atualizar e coluna alinha. */
[data-numeric],.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}

.etiqueta{font-size:.72rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.24em; color:var(--fg-muted); margin:0}
.faixa .etiqueta{color:var(--band-accent)}
.leito{width:100%; max-width:var(--leito); margin-inline:auto}
.gutter{padding-inline:clamp(20px,5vw,40px)}
main>section{padding-block:var(--passo)}
/* O topo é sticky: sem isto a âncora para embaixo da barra. */
main>section[id]{scroll-margin-top:4.5rem}

/* ── movimento ──────────────────────────────────────────────────────────
   Régua: distância curta (16px), 500ms, ease-out puro. Sem spring, sem
   bounce — bounce é o que faz animação parecer barata. Anima UMA vez;
   reanimar a cada scroll enjoa.

   Princípio que vale mais que a régua: na dúvida, MOSTRAR. Sem
   IntersectionObserver ou com movimento reduzido, o conteúdo nasce visível.
   Todo defeito desta família termina em conteúdo invisível, que é pior que
   animação nenhuma.                                                       */
.ava-reveal{opacity:0; transform:translateY(16px);
  transition:opacity 500ms cubic-bezier(.16,1,.3,1),
             transform 500ms cubic-bezier(.16,1,.3,1)}
.ava-reveal-in{opacity:1; transform:none}

/* Pulso do sinal percorrendo um conector. É movimento EXPLICATIVO: mostra o
   evento saindo da origem e chegando no destino. Vertical quando empilha,
   horizontal no desktop. */
.ava-pulse{position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--sinal); box-shadow:0 0 9px var(--sinal); pointer-events:none;
  animation:ava-flow-y 2.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes ava-flow-y{
  0%{transform:translateY(-8px); opacity:0}
  18%{opacity:1} 78%{opacity:1}
  100%{transform:translateY(1.6rem); opacity:0}}
@keyframes ava-flow-x{
  0%{transform:translateX(-8px); opacity:0}
  18%{opacity:1} 78%{opacity:1}
  100%{transform:translateX(2.4rem); opacity:0}}
@media (min-width:1041px){ .ava-pulse{animation-name:ava-flow-x} }
.conector .ava-pulse{top:50%; left:50%; margin:-2.5px 0 0 -2.5px}

/* Nós acendendo no mesmo compasso, com atraso crescente. */
.ava-node{animation:ava-glow 2.6s ease-in-out infinite}
@keyframes ava-glow{
  0%,100%{border-color:var(--band-line)}
  45%{border-color:var(--sinal-fraco)}}

/* Hover com intenção: elevação mínima, sem escala exagerada. */
.ava-lift{transition:border-color 200ms ease-out, transform 200ms ease-out}
.ava-lift:hover{border-color:var(--sinal-fraco); transform:translateY(-2px)}

/* Esteira do stack. A faixa tem a lista DUPLICADA e desliza exatamente -50%:
   ao chegar lá, a segunda cópia está no pixel onde a primeira começou e o
   reinício é invisível. Só transform — fora da main thread, sem
   requestAnimationFrame e sem biblioteca. A máscara faz a faixa nascer e
   morrer no fundo; sem ela lê como overflow quebrado, não como movimento. */
.ava-marquee{position:relative; overflow:hidden; padding-block:.5rem;
  mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 3rem),transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)}
.ava-marquee-faixa{display:flex; width:max-content; gap:.6rem;
  animation:ava-marquee 46s linear infinite}
/* pausa no hover: se o nome interessa a quem lê, ele precisa conseguir ler */
.ava-marquee:hover .ava-marquee-faixa{animation-play-state:paused}
@keyframes ava-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Acessibilidade: movimento reduzido desliga TUDO — não é opcional. */
@media (prefers-reduced-motion:reduce){
  .ava-reveal{opacity:1; transform:none; transition:none}
  .ava-pulse,.ava-node{animation:none}
  .ava-pulse{opacity:.6}
  .ava-lift{transition:none}
  .ava-lift:hover{transform:none}
  /* PARA a esteira em vez de escondê-la: o conteúdo é informativo, e quem
     pediu menos movimento continua precisando lê-lo. */
  .ava-marquee-faixa{animation:none}
}

/* ── topo ─────────────────────────────────────────────────────────────── */
.topo{position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.topo .leito{display:flex; align-items:center; gap:1.5rem; padding-block:.8rem}
.marca{display:flex; align-items:center; gap:.6rem; text-decoration:none;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem}
.marca svg{height:25px; width:auto; display:block; color:var(--accent)}
.topo nav{margin-left:auto; display:flex; gap:1.5rem; font-size:.9rem}
.topo nav a{color:var(--fg-muted); text-decoration:none; white-space:nowrap;
  transition:color 200ms ease-out}
.topo nav a:hover,.topo nav a:focus-visible{color:var(--fg)}
/* No celular o menu ROLA na horizontal em vez de sumir. São sete itens curtos:
   um hambúrguer esconderia justamente a navegação por frente, que é o que a
   pessoa veio procurar. A barra de rolagem some, o gesto continua. */
@media (max-width:820px){
  .topo .leito{flex-wrap:wrap; gap:.6rem 1rem}
  .topo nav{margin-left:0; width:100%; gap:1.15rem; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .topo nav::-webkit-scrollbar{display:none}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

.botao{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  text-decoration:none; font-weight:500; font-size:.97rem; padding:.75rem 1.4rem;
  border-radius:7px; background:var(--grad); color:#07101F; border:0;
  transition:transform 200ms ease-out}
.botao:hover{transform:translateY(-1px)}
.botao svg{width:1.05em; height:1.05em; fill:currentColor; flex:none}
.botao--fantasma{background:none; color:inherit; border:1px solid var(--linha-caixa);
  transition:border-color 200ms ease-out, transform 200ms ease-out}
.botao--fantasma:hover{border-color:var(--sinal-fraco)}
a:focus-visible,.botao:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{background:var(--hero); border-bottom:1px solid var(--line);
  padding-block:clamp(2.75rem,7vw,5rem) 0}
.hero-grade{display:grid; gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,23rem); align-items:center}
.hero-grade>*{min-width:0}
@media (max-width:980px){ .hero-grade{grid-template-columns:minmax(0,1fr)} }
.hero .simbolo{width:clamp(74px,10vw,100px); height:auto; display:block; margin-bottom:1.9rem}
.hero h1{max-width:18ch}
.hero .chamada{margin-top:1.4rem; max-width:56ch; font-size:clamp(1rem,1.8vw,1.15rem);
  color:var(--fg-muted)}
/* As ações NÃO entram em .ava-reveal. Reveal começa em opacity:0, e opacidade
   no ancestral apaga até filho fixed. Além disso: a ação principal da página
   não pode depender de scroll nem de animação de entrada para existir. */
.acoes{margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}
.hero .nota{margin-top:1.4rem; font-size:.88rem; color:var(--fg-muted)}

/* Painel de sintomas: é o que o cliente reconhece antes de entender a solução.
   Cor semântica (alerta/crítico), separada do azul da marca. */
.sintomas{border:1px solid var(--linha-caixa); border-radius:12px; background:var(--bg);
  padding:1.35rem 1.4rem}
.sintomas h2{font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--fg-muted)}
.sintomas ul{list-style:none; margin:1.1rem 0 0; padding:0; display:flex;
  flex-direction:column; gap:.95rem}
.sintomas li{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  font-size:.93rem; line-height:1.45}
.sintomas .ponto{width:8px; height:8px; border-radius:50%; margin-top:.45rem;
  background:var(--alerta)}
.sintomas li:nth-child(2) .ponto{background:var(--critico)}
.sintomas li:nth-child(3) .ponto{background:var(--critico)}
.sintomas .rodape{margin-top:1.2rem; padding-top:.95rem; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--fg-muted)}

/* esteira do stack: logo abaixo dos botões, na coluna do texto */
.hero .esteira-rotulo{margin-top:1.9rem}
.ava-marquee{margin-top:.45rem}
.ava-marquee span{white-space:nowrap; border:1px solid var(--linha-caixa); border-radius:8px;
  background:var(--bg); padding:.5rem 1rem; font-size:.86rem; color:var(--fg-muted)}
.hero .esteira-rotulo{padding-bottom:.2rem; font-size:.78rem; color:var(--fg-muted)}

/* O ciclo em movimento, no hero: mesma linguagem do loop da jornada (token
   de tema no diagrama, cor de sinal só no que circula). */
.ciclo{border:1px solid var(--linha-caixa); border-radius:12px; background:var(--bg);
  padding:1.1rem 1.2rem .5rem; margin:0 0 .9rem}  /* zera o 40px lateral que o UA dá a <figure> */
.ciclo figcaption{font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--fg-muted); margin-bottom:.4rem}
.ciclo svg{display:block; width:100%; height:auto; font-family:var(--mono); font-size:12.5px}
.ciclo text{fill:var(--fg-muted)}
.ciclo .rotulo-retorno{fill:var(--sinal); font-size:11px}
.ciclo .linha{stroke:var(--line); stroke-width:1.5}
.ciclo .retorno{stroke:var(--sinal-fraco); stroke-width:1.5; stroke-dasharray:4 4}
.ciclo .no circle:first-child{fill:var(--surface); stroke:var(--line); stroke-width:1.5}
.ciclo .glifo{fill:none; stroke:var(--fg); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.ciclo .glifo-cheio{fill:var(--fg)}
.ciclo .ponto{fill:var(--sinal)}
.ciclo .halo{fill:var(--sinal); opacity:.22}
.ciclo .ciclo-ponto--volta .ponto{fill:var(--accent-2)}
.ciclo .ciclo-ponto--volta .halo{fill:var(--accent-2)}
@media (prefers-reduced-motion:reduce){ .ciclo .ciclo-ponto{display:none} }

/* ── diagrama de fluxo ────────────────────────────────────────────────── */
.fluxo{margin-top:2.6rem; display:grid; gap:1rem; align-items:stretch;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr) auto minmax(0,1fr)}
/* min-width:0 é obrigatório aqui. Item de grid nasce com min-width:auto, e a
   linha .campos (white-space:nowrap) empurrava o min-content do miolo para
   além da trilha — a coluna da direita acabava invadindo o painel. Com 0, o
   .campos rola sozinho e ninguém transborda. */
.fluxo>*{min-width:0}
@media (max-width:1040px){ .fluxo{grid-template-columns:1fr} }
.fluxo .rotulo{font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--band-muted); margin-bottom:.2rem}
.coluna{display:flex; flex-direction:column; gap:.7rem}
.no{border:1px solid var(--band-line); border-radius:9px; background:#0E1524; padding:.85rem 1rem}
.no b{display:block; font-weight:500; font-size:.95rem; color:var(--band-fg)}
.no span{display:block; margin-top:.15rem; font-size:.84rem; color:var(--band-muted)}
.conector{position:relative; display:flex; align-items:center; justify-content:center}
.conector .linha{background:var(--band-line); width:1px; height:1.6rem}
@media (min-width:1041px){ .conector .linha{width:2.2rem; height:1px} }
/* miolo: único bloco com a cor da marca — é o sinal */
.miolo{border:1px solid var(--sinal-fraco); border-radius:12px;
  background:color-mix(in srgb,var(--band-accent) 5%,#0E1524); padding:1.3rem;
  display:flex; flex-direction:column; min-width:0; flex:1}
.miolo .rotulo{color:var(--band-accent)}
.etapas{display:flex; flex-direction:column; gap:.9rem; margin-top:.9rem; flex:1}
.etapa{display:flex; gap:.75rem}
.etapa .num{flex:0 0 auto; width:1.55rem; height:1.55rem; border-radius:5px;
  border:1px solid var(--sinal-fraco); color:var(--band-accent); font-family:var(--mono);
  font-size:.74rem; display:grid; place-items:center; margin-top:.1rem}
.etapa b{display:block; font-weight:500; font-size:.95rem; line-height:1.3; color:var(--band-fg)}
.etapa span{display:block; margin-top:.15rem; font-size:.84rem; line-height:1.45; color:var(--band-muted)}
.miolo .campos{margin-top:1.1rem; padding-top:.85rem; border-top:1px solid var(--band-line);
  font-family:var(--mono); font-size:.74rem; color:var(--band-muted); overflow-x:auto;
  white-space:nowrap}
.volta-fluxo{margin-top:1.5rem; font-size:.88rem; color:var(--band-accent);
  display:flex; align-items:center; gap:.55rem}

/* ── faixa escura ─────────────────────────────────────────────────────── */
.faixa{background:var(--band-bg); color:var(--band-fg)}
.faixa p{color:var(--band-muted)}
.faixa h2,.faixa h3{color:var(--band-fg)}

/* ── frentes ──────────────────────────────────────────────────────────── */
/* Cada frente é uma âncora do menu. O cabeçalho gruda enquanto a lista de
   capacidades rola ao lado — o leitor nunca perde de vista em qual frente
   está. `scroll-margin-top` existe porque o topo é sticky: sem ele a âncora
   pararia embaixo da barra. */
.frente{scroll-margin-top:5rem; display:grid; gap:clamp(1.2rem,3vw,3rem);
  grid-template-columns:minmax(0,15rem) minmax(0,1fr); align-items:start;
  padding-block:clamp(2rem,4vw,2.8rem); border-top:1px solid var(--line)}
.frente:first-child{margin-top:2.6rem}
.frente-cab{position:sticky; top:5rem}
.frente-num{font-size:.78rem; color:var(--accent); letter-spacing:.06em}
.frente-cab h3{margin-top:.4rem; font-size:clamp(1.3rem,2.4vw,1.7rem)}
.frente-tese{margin-top:.6rem; font-size:.93rem; line-height:1.55; color:var(--fg-muted)}
.frente-corpo{margin:0; display:grid; gap:.95rem}
.frente-corpo>div{display:grid; grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:.2rem 1.2rem; align-items:baseline}
.frente-corpo dt{font-size:.74rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:var(--fg-muted)}
.frente-corpo dd{margin:0; font-size:.93rem; line-height:1.55}
.frente-corpo code{font-family:var(--mono); font-size:.86em;
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  padding:.05em .35em}
@media (max-width:820px){
  .frente{grid-template-columns:1fr; gap:1.1rem}
  .frente-cab{position:static}
  .frente-corpo>div{grid-template-columns:1fr; gap:.15rem}
}

/* ── jornada: o loop ──────────────────────────────────────────────────── */
/* Tudo em token de tema: o diagrama vive no fundo normal da página, então
   precisa ler no claro e no escuro. Só o retorno e o pulso levam a cor de
   sinal — é a aresta que o argumento inteiro depende. */
.loop{margin:2.6rem 0 0}
.loop svg{display:block; width:100%; height:auto; max-width:100%; font-family:var(--fonte)}
.loop figcaption{margin-top:1.1rem; font-size:.88rem; line-height:1.55; color:var(--fg-muted);
  max-width:64ch}
.loop .no-r{fill:var(--surface); stroke:var(--linha-caixa); stroke-width:1.5}
.loop .no-t{fill:var(--fg); font-weight:600}
.loop .no-s{fill:var(--fg-muted); font-family:var(--mono)}
.loop .seta{stroke:var(--fg-muted); stroke-width:1.5; fill:none}
.loop .ponta{fill:var(--fg-muted)}
.loop .rot{fill:var(--fg-muted); letter-spacing:.08em; text-transform:uppercase; font-weight:500}
/* fill:none é obrigatório: no layout estreito o retorno é um L, e <path> sem
   fill explícito preenche a área de preto — no largo é reta, área zero, e o
   defeito não aparecia. */
.loop .retorno{fill:none; stroke:var(--sinal); stroke-dasharray:7 6; stroke-width:2}
.loop .retorno-ponta{fill:var(--sinal)}
.loop .rot-retorno{fill:var(--sinal)}
.loop .pulso{fill:var(--sinal); filter:drop-shadow(0 0 5px var(--sinal))}

/* ── faq: acordeão nativo ─────────────────────────────────────────────── */
.faq{margin-top:2.4rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  gap:1rem; align-items:center; padding:1.05rem 0; font-weight:600; font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-weight:400; font-size:1.35rem;
  line-height:1; flex:0 0 auto; transition:transform 200ms ease-out}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px}
.faq details p{margin:0 0 1.15rem; max-width:64ch; font-size:.95rem; line-height:1.6;
  color:var(--fg-muted)}

/* ── chips com ícone na esteira ───────────────────────────────────────── */
.ava-marquee span{display:inline-flex; align-items:center; gap:.5rem}
.ava-marquee svg{width:15px; height:15px; fill:currentColor; flex:0 0 auto; opacity:.8}

/* ── ofertas ──────────────────────────────────────────────────────────── */
/* 5 cards em 6 colunas: 3 em cima (span 2), 2 embaixo (span 3). Um grid de 3
   deixaria uma célula vazia. */
.ofertas{margin-top:2.8rem; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:11px; overflow:hidden;
  grid-template-columns:repeat(6,1fr)}
.oferta{background:var(--bg); padding:1.8rem 1.55rem; display:flex; flex-direction:column;
  gap:.65rem; grid-column:span 2}
.oferta:nth-child(4),.oferta:nth-child(5){grid-column:span 3}
.oferta .nome{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.oferta .modo{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-muted); font-variant-numeric:tabular-nums}
.oferta p{font-size:.93rem; line-height:1.55; color:var(--fg-muted)}
@media (max-width:920px){
  .ofertas{grid-template-columns:repeat(2,1fr)}
  .oferta,.oferta:nth-child(4){grid-column:auto}
  .oferta:nth-child(5){grid-column:span 2}
}
@media (max-width:620px){
  .ofertas{grid-template-columns:1fr}
  .oferta,.oferta:nth-child(4),.oferta:nth-child(5){grid-column:auto}
}

/* ── para quem ────────────────────────────────────────────────────────── */
.duas{display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start; margin-top:2.4rem}
@media (max-width:820px){ .duas{grid-template-columns:1fr} }
.perfis{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.3rem}
.perfis li{padding-left:1.15rem; border-left:2px solid var(--line)}
.perfis b{font-weight:600; font-size:.97rem; display:block}
.perfis span{font-size:.91rem; color:var(--fg-muted)}
.regra{margin-top:1.9rem; padding:1.3rem 1.45rem; background:var(--surface); border-radius:9px;
  border-left:3px solid var(--accent); font-size:.96rem}

/* ── time ─────────────────────────────────────────────────────────────── */
.time{margin-top:2.8rem; display:grid; gap:1.9rem; grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){ .time{grid-template-columns:1fr; gap:1.6rem} }
/* Card vertical: com resumo de carreira, foto ao lado não cabia em três
   colunas. A foto vai em cima, maior; o texto corre embaixo. */
.pessoa{margin:0; display:flex; flex-direction:column; gap:1rem; align-items:flex-start}
.retrato{position:relative; flex:0 0 auto; width:96px; height:96px; border-radius:50%;
  background:var(--grad); display:grid; place-items:center; overflow:hidden;
  font-weight:600; font-size:1.35rem; color:#07101F}
.retrato img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pessoa figcaption{display:grid; gap:.25rem; min-width:0}
.pessoa .nome{font-weight:600; font-size:1.05rem; letter-spacing:-.01em}
.pessoa .papel{font-size:.88rem; color:var(--fg-muted); display:flex; flex-wrap:wrap;
  gap:.5rem; align-items:center}
.pessoa .anos{font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:999px; padding:.1rem .55rem; font-variant-numeric:tabular-nums}
.pessoa .resumo{margin-top:.35rem; font-size:.9rem; line-height:1.55; color:var(--fg-muted)}
@media (max-width:760px){ .pessoa{flex-direction:row; align-items:flex-start}
  .retrato{width:80px; height:80px} }
.pessoa a{font-size:.85rem; color:var(--accent); text-decoration:none; margin-top:.15rem;
  display:inline-flex; align-items:center; gap:.3rem}
.pessoa a:hover{text-decoration:underline}

/* ── contato ──────────────────────────────────────────────────────────── */
.contato h2{max-width:16ch}
.contato .obs{margin-top:1.1rem; font-size:.89rem; max-width:60ch}

/* ── rodapé ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding-block:2rem; font-size:.86rem;
  color:var(--fg-muted)}
footer .leito{display:flex; flex-wrap:wrap; gap:.9rem 2rem; align-items:center}
footer svg{height:19px; width:auto; color:var(--fg-muted)}
footer .direita{margin-left:auto}
/* razão social e CNPJ: linha própria, abaixo, em corpo menor */
footer .legal{flex-basis:100%; font-size:.78rem; color:var(--fg-muted); letter-spacing:.02em}

/* CTA grudento no celular: a ação principal fica sempre ao alcance. Fora de
   qualquer .ava-reveal, pelo motivo documentado nas ações do hero. */
.cta-grudento{position:fixed; inset-inline:0; bottom:0; z-index:40;
  padding:.75rem clamp(20px,5vw,40px);
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.cta-grudento .botao{width:100%}
@media (min-width:821px){ .cta-grudento{display:none} }
@media (max-width:820px){ body{padding-bottom:5rem} }

/* ── projetos autorais (landing) ──────────────────────────────────────── */
.projetos{margin-top:2.8rem; display:grid; gap:1.1rem; grid-template-columns:repeat(3,1fr)}
@media (max-width:920px){ .projetos{grid-template-columns:1fr} }
.projeto{border:1px solid var(--linha-caixa); border-radius:12px; background:var(--surface);
  padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.8rem}
.projeto-cab{display:flex; flex-direction:column; gap:.35rem}
.projeto-cab h3{font-size:1.25rem}
.projeto .tag{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted)}
.projeto>p{font-size:.94rem; line-height:1.55; color:var(--fg-muted)}
.projeto .provas{margin:0; padding-left:1.05rem; font-size:.9rem; color:var(--fg-muted);
  display:flex; flex-direction:column; gap:.3rem}
.projeto .provas li::marker{color:var(--accent)}
.projeto .links{margin-top:auto; padding-top:.6rem; display:flex; flex-wrap:wrap;
  gap:.4rem 1.2rem; font-size:.88rem}
.projeto .links a{color:var(--accent); text-decoration:none}
.projeto .links a:hover{text-decoration:underline}

/* ── página de projetos: reaproveita .frente; só status e stack são novos ── */
.status{display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; padding:.15rem .6rem; border-radius:999px; border:1px solid currentColor;
  vertical-align:middle}
.status--ar{color:var(--ok)} .status--obra{color:var(--alerta)}
.stack-linha{font-family:var(--mono); font-size:.8rem; color:var(--fg-muted); line-height:1.75}
.frente-corpo dd p{margin:0 0 .55rem; line-height:1.55} .frente-corpo dd p:last-child{margin-bottom:0}
.topo nav a[aria-current="page"]{color:var(--fg); font-weight:600}

/* ── logos dos projetos ───────────────────────────────────────────────── */
/* Altura por marca, não uma só: as proporções diferem demais (Livegenda
   3,2:1, Rangaya 4,9:1, EMQ HERO 1,6:1 empilhado) e a régua é peso visual.
   O EMQ HERO é vetor inline com letras em currentColor — é assim que a
   própria marca faz no site dela: branco no escuro, escuro no claro, com a
   pincelada magenta fixa. */
.logo-projeto{display:block; width:auto; height:2rem}
.logo-livegenda{height:2.6rem} .logo-rangaya{height:2.05rem}
.logo-emqhero{height:2.8rem; aspect-ratio:892/543; color:var(--fg)}
.projeto-cab h3,.frente-cab h3{display:flex; flex-wrap:wrap; align-items:center; gap:.65rem}
.projeto-cab h3{min-height:2.8rem}
.frente-cab .logo-livegenda{height:3.1rem} .frente-cab .logo-rangaya{height:2.5rem}
.frente-cab .logo-emqhero{height:3.3rem}

/* ── WhatsApp com contexto ────────────────────────────────────────────── */
/* O contato é só WhatsApp. Antes de abrir, a pessoa marca sobre quais
   frentes quer falar; as frentes entram na mensagem pré-preenchida num
   formato fixo, que é o que a Liv (bot do Livegenda) usa para decidir
   atender. O formulário vive na seção Contato e é clonado para o modal. */
.zap-form{margin-top:1.6rem; max-width:34rem}
.zap-campos{border:0; padding:0; margin:0; min-width:0}
.zap-titulo{font-weight:600; font-size:1.05rem; padding:0}
.zap-ajuda{margin-top:.3rem; font-size:.88rem; color:var(--fg-muted)}
.zap-opcoes{margin-top:.9rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem}
@media (max-width:420px){ .zap-opcoes{grid-template-columns:1fr} }
.zap-opcao{position:relative; display:flex; flex-direction:column; gap:.1rem;
  padding:.7rem 2.6rem .7rem .9rem; border:1px solid var(--linha-caixa); border-radius:10px;
  background:var(--surface); cursor:pointer; transition:border-color .15s, box-shadow .15s}
.zap-opcao input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.zap-opcao b{font-weight:600; font-size:.95rem}
.zap-opcao small{font-size:.76rem; line-height:1.35; color:var(--fg-muted)}
/* o toggle: círculo à direita que vira check */
.zap-opcao::after{content:""; position:absolute; right:.8rem; top:50%; width:18px; height:18px;
  margin-top:-9px; border-radius:50%; border:2px solid var(--linha-caixa);
  background:center/12px no-repeat; transition:background-color .15s, border-color .15s}
.zap-opcao.marcada,.zap-opcao:has(input:checked){border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.zap-opcao.marcada::after,.zap-opcao:has(input:checked)::after{background-color:var(--accent); border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E")}
.zap-opcao:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.zap-previa{margin-top:.9rem; font-family:var(--mono); font-size:.78rem; line-height:1.5;
  padding:.6rem .8rem; border-radius:8px; border:1px dashed var(--linha-caixa);
  background:var(--surface); color:var(--fg); overflow-wrap:anywhere}
.zap-previa--vazia{font-family:var(--fonte); font-size:.86rem; color:var(--fg-muted); border-style:solid}
.zap-form .acoes{margin-top:1rem}
.botao--inativo{opacity:.45; pointer-events:none; filter:saturate(.3)}
/* na faixa escura (seção Contato) os tokens são os da faixa */
.faixa .zap-opcao{background:rgba(255,255,255,.04); border-color:var(--band-line); color:var(--band-fg)}
.faixa .zap-opcao small,.faixa .zap-ajuda,.faixa .zap-previa--vazia{color:var(--band-muted)}
.faixa .zap-opcao::after{border-color:var(--band-line)}
.faixa .zap-previa{background:rgba(255,255,255,.04); border-color:var(--band-line); color:var(--band-fg)}
.faixa .zap-opcao.marcada,.faixa .zap-opcao:has(input:checked){border-color:var(--band-accent); box-shadow:inset 0 0 0 1px var(--band-accent)}
.faixa .zap-opcao.marcada::after,.faixa .zap-opcao:has(input:checked)::after{background-color:var(--band-accent); border-color:var(--band-accent)}
/* modal: caixa no desktop, folha subindo de baixo no celular */
dialog.zap{border:1px solid var(--linha-caixa); border-radius:14px; padding:0; background:var(--bg);
  color:var(--fg); width:min(92vw,32rem); max-height:90vh; box-shadow:0 30px 80px rgba(0,0,0,.4)}
dialog.zap::backdrop{background:rgba(11,15,26,.55); backdrop-filter:blur(6px)}
dialog.zap .zap-form{margin:0; max-width:none; padding:1.4rem 1.4rem 1.5rem}
dialog.zap[open]{animation:zap-entra .32s cubic-bezier(.16,1,.3,1)}
@keyframes zap-entra{from{opacity:0; transform:translateY(18px)}}
.zap-fechar{position:absolute; top:.6rem; right:.7rem; width:2.2rem; height:2.2rem; border:0;
  border-radius:50%; background:transparent; color:var(--fg-muted); font:1.5rem/1 var(--fonte); cursor:pointer}
.zap-fechar:hover{background:var(--surface); color:var(--fg)}
html:has(dialog.zap[open]){overflow:hidden}
@media (max-width:820px){
  dialog.zap{width:100%; max-width:100%; margin:auto 0 0; border-radius:16px 16px 0 0;
    border-bottom:0; max-height:92dvh; overflow:auto}
  dialog.zap .zap-form{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){ dialog.zap[open]{animation:none} }