/* ═══════════════════════════════════════════════════════════════
   IDX — landing. Sistema visual NEU da casa.
   Regras (docs/NEUMORFISMO-ROLLOUT.md, DA-063/164/165):
     claro = relevo (o que se aperta)  ·  cinza = sulco (o que guarda)
     cor só com significado  ·  zero rosa/magenta  ·  acento é TINTA
     blur = 3x a distancia em toda sombra
     pontilhismo SO no canvas — card e sulco sao lisos
     nunca `transform:` numa regra neu — usar `scale:`/`translate:` isolados
   ═══════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;

  /* superficies */
  --canvas:#e2e7f0;      /* fundo da pagina — unico lugar com pontilhismo */
  --surface:#f5f8fb;     /* card, botao — RELEVO */
  --inset:#dfe5ee;       /* campo, trilho — SULCO */
  --elevated:#ffffff;

  /* par de sombras: derivado da superficie, nunca preto/branco com alpha */
  --neu-dark:#c0c4cc;    --neu-light:#f5f8fb;
  --neu-dark-in:#bec3ca; --neu-light-in:#f5f8fb;

  /* tinta */
  --ink:#3f4757; --ink-2:#545c6b; --ink-3:#8c95a5; --ink-4:#c3ccd9;
  --accent:#3f4757;
  --ok:#156b44; --err:#b3342a;

  /* pontilhismo */
  --dots:radial-gradient(rgba(63,71,87,.09) 1px, transparent 1px);

  /* elevacao */
  --up:2px 2px 6px var(--neu-dark),-2px -2px 6px var(--neu-light);
  --up-card:4px 4px 12px var(--neu-dark),-4px -4px 12px var(--neu-light);
  --card-sh:8px 8px 24px var(--neu-dark),-8px -8px 24px var(--neu-light);
  --sulco:inset 2px 2px 6px var(--neu-dark-in),inset -2px -2px 6px var(--neu-light-in);
  --sulco-fundo:inset 3px 3px 8px var(--neu-dark-in),inset -3px -3px 8px var(--neu-light-in);
  --float:-4px -4px 10px var(--neu-light),7px 9px 22px rgb(30 41 59/.28);

  /* espaco e raio */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px;
  --r-ctrl:8px; --r-poco:12px; --r-card:16px; --r-pill:999px; --r-grande:22px;

  /* RITMO VERTICAL — tres compassos, nao um so.
     Antes toda secao tinha padding 64/64 e a pagina inteira batia no mesmo
     tempo: e isso que faz uma pagina correta parecer crua. Agora a secao que
     ARGUMENTA respira mais que a que so lista. */
  --ritmo-solto:clamp(64px, 9vw, 132px);   /* dor, cta — precisam de silencio */
  --ritmo-normal:clamp(54px, 7.4vw, 108px);/* pacote, como, faq               */
  --ritmo-curto:clamp(46px, 6vw, 88px);    /* prova, quem — blocos de apoio   */
  --ritmo-titulo:clamp(34px, 4.6vw, 66px); /* do titulo da secao ao conteudo  */

  /* tipografia — pilha do sistema: zero requisicao, zero CLS de troca */
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* escala com mais contraste: o teto antigo (2.1rem) era timido para 1280px
     e achatava a hierarquia — titulo de secao quase do tamanho do card */
  --fs-h1:clamp(2rem, 5.6vw, 3.5rem);
  --fs-h2:clamp(1.6rem, 3.9vw, 2.65rem);
  --fs-h3:clamp(1.02rem, 1.5vw, 1.16rem);
  --fs-sub:clamp(1rem, 1.4vw, 1.12rem);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;line-height:1.6;
  color:var(--ink);
  background-color:var(--canvas);
  background-image:var(--dots);
  background-size:16px 16px;
  -webkit-font-smoothing:antialiased;
}

/* rolagem invisivel (DA-059) */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

img,svg{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-.022em;line-height:1.18;font-weight:750}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.pular{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--surface);color:var(--ink);
  padding:12px 18px;border-radius:var(--r-ctrl);box-shadow:var(--up);
  font-weight:700;text-decoration:none;
}
.pular:focus{left:12px;top:12px}

.wrap{width:100%;max-width:1128px;margin:0 auto;padding:0 24px}
.wrap-estreito{max-width:740px}

/* ─────────────── botoes ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  position:relative;
  border:0;cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:750;
  letter-spacing:.02em;
  padding:13px 24px;border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink-2);
  box-shadow:var(--up);
  transition:box-shadow .15s ease,color .15s ease,scale .15s ease,filter .15s ease;
}
.btn:hover{color:var(--ink)}
.btn:active:not(:disabled){
  box-shadow:inset 2px 2px 4px var(--neu-dark),inset -2px -2px 4px var(--neu-light-in);
  scale:.98;
}
/* desabilitado = CHAPADO: relevo e a promessa de que da pra apertar */
.btn:disabled{box-shadow:none;opacity:.55;cursor:default}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:var(--up),inset 0 1px 0 rgb(255 255 255/.25);
}
.btn-primary:hover{color:#fff;filter:brightness(1.12)}
.btn-primary:active:not(:disabled){
  box-shadow:inset 2px 2px 4px rgba(0,0,0,.35),inset -2px -2px 4px rgb(255 255 255/.14);
}
.btn-lg{font-size:1rem;padding:17px 34px}
.btn-bloco{width:100%}

/* ─────────────── topo ─────────────── */
.topo{
  position:sticky;top:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;
  background:var(--canvas);
  transition:box-shadow .2s ease;
}
.topo.rolou{box-shadow:0 1px 0 rgba(63,71,87,.10),0 8px 22px rgba(63,71,87,.10)}
.marca{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--ink);
}
/* ── lockup da marca ──
   Empilhado em 3 linhas, com as larguras CALIBRADAS para baterem: o
   letter-spacing de cada linha foi calculado por busca binaria ate que
   INDX, TECNOLOGIA e PARA NEGÓCIOS ficassem na mesma largura (desvio de
   3px). Nao sao numeros redondos de proposito — numero redondo aqui volta
   a desalinhar. Mexer no corpo de uma linha exige recalcular as outras. */
.marca-txt{display:flex;flex-direction:column;line-height:1}
.marca-txt b{font-weight:800;font-size:30px;letter-spacing:.08em}
.marca-txt i{
  font-style:normal;font-weight:700;font-size:8.5px;
  text-transform:uppercase;color:var(--ink-3);display:block;
}
.marca-txt .l1{letter-spacing:.392em;margin-top:7px}
.marca-txt .l2{letter-spacing:.13em;margin-top:3px}
.marca img,.rodape-marca img{width:56px;height:56px}

.btn-topo{padding:11px 20px;font-size:.8rem}
/* em tela estreita o botao e a tagline disputam a linha: some a tagline,
   nao o botao — ele e o caminho da conversao. */
/* telas estreitas: o lockup inteiro encolhe junto, mantendo a calibragem —
   esconder so a tagline deixaria o INDX orfao e grande demais */
@media (max-width:430px){
  .marca-txt b{font-size:23px}
  .marca-txt i{font-size:6.6px}
  .marca img,.rodape-marca img{width:44px;height:44px}
  .marca{gap:10px}
}

/* ─────────────── hero ─────────────── */
.hero{padding:clamp(48px,6vw,76px) 0 var(--ritmo-solto);text-align:center}
.olho{
  display:inline-block;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
  padding:7px 16px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--up);
  margin-bottom:30px;
}
.hero h1{
  font-size:var(--fs-h1);
  max-width:16ch;margin:0 auto;
  text-wrap:balance;
}
.hero h1 em{display:block;font-style:normal;color:var(--ink-3);margin-top:.18em}

/* ── terminal que se digita sozinho ──
   E a unica peca da pagina com fundo escuro. No NEU isso e "E3": superficie
   estranha, entao SEM luz espalhada — so projecao e um fio de luz inset,
   igual ao tratamento do rail preto do admin. */
.prompt{
  width:min(100%,520px);margin:32px auto 0;
  border-radius:var(--r-poco);
  overflow:hidden;text-align:left;
  background:#23262e;
  box-shadow:
    0 12px 30px rgb(30 41 59/.30),
    inset 0 0 0 1px rgb(255 255 255/.07);
}
.prompt-barra{
  display:flex;align-items:center;gap:7px;
  padding:11px 15px;
  background:rgb(255 255 255/.04);
  box-shadow:inset 0 -1px 0 rgb(255 255 255/.06);
}
.prompt-luz{width:9px;height:9px;border-radius:50%;background:rgb(255 255 255/.16);flex:0 0 auto}
.prompt-nome{
  margin-left:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgb(255 255 255/.34);
}
.prompt-corpo{
  margin:0;padding:17px 18px 19px;
  font-family:ui-monospace,'JetBrains Mono','SF Mono','Cascadia Code','Roboto Mono',Consolas,monospace;
  font-size:.83rem;line-height:1.72;
  color:#c9d2e0;
  white-space:pre-wrap;word-break:break-word;
  /* altura reservada: sem isto cada linha digitada empurra a pagina para
     baixo e o CLS sobe — o layout tem que caber antes de o texto chegar. */
  min-height:calc(5 * 1.72em);
}
.prompt-corpo .p-cmd{color:#f2f5fa}
.prompt-corpo .p-sinal{color:#7f8ba1}
.prompt-corpo .p-ok{color:#5fd39a}
.cursor{
  display:inline-block;
  width:8px;height:1.05em;vertical-align:-.16em;
  background:#5fd39a;
  animation:pisca 1s steps(1) infinite;
}
@keyframes pisca{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}

.sub{
  max-width:46ch;margin:30px auto 0;
  font-size:var(--fs-sub);line-height:1.62;color:var(--ink-2);
}
.sub strong{color:var(--ink);font-weight:750}

/* dois tempos de preco. Mostrar os dois lado a lado e escolha de honestidade:
   leigo que descobre a mensalidade depois se sente enganado, e a objecao
   volta na conversa — mais caro do que perder o clique aqui. */
.precos{
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
  gap:14px;margin:30px 0 30px;
}
.preco-linha{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:16px 26px;min-width:150px;
  border-radius:var(--r-poco);
  background:var(--inset);box-shadow:var(--sulco);
}
.preco-de{font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.preco{font-size:1.62rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.preco small{font-size:.86rem;font-weight:700;letter-spacing:0;color:var(--ink-3)}
.preco-nota{font-size:.72rem;color:var(--ink-3)}
.preco-mais{
  align-self:center;
  font-size:1.15rem;font-weight:800;color:var(--ink-4);
}
/* quando os dois precos empilham, o "+" tem que ficar ENTRE eles e no meio.
   Sem isto ele sobra na direita da primeira caixa e parece erro. */
@media (max-width:430px){
  .precos{flex-direction:column;align-items:center;gap:8px}
  .preco-linha{width:100%;max-width:280px}
  .preco-mais{align-self:center}
}

.selos{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;
  margin-top:36px;
  font-size:.82rem;color:var(--ink-2);
}
.selos li{display:inline-flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}

/* ─────────────── secoes ─────────────── */
.sec{padding:var(--ritmo-normal) 0}
/* o compasso acompanha o PAPEL da secao, nao a ordem dela */
#por-que,.sec-final{padding-block:var(--ritmo-solto)}
#prova,#quem{padding-block:var(--ritmo-curto)}

.sec-alt{
  background:#eaeef5;
  background-image:none;      /* liso contra o pontilhado do canvas */
  border-block:1px solid rgba(63,71,87,.06);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.5);
}
.sec h2{
  font-size:var(--fs-h2);
  text-align:center;max-width:20ch;margin:0 auto;
  text-wrap:balance;line-height:1.14;letter-spacing:-.028em;
}
.sec-sub{
  max-width:50ch;margin:20px auto 0;
  text-align:center;color:var(--ink-2);
  font-size:var(--fs-sub);line-height:1.62;
}
.obs{
  margin-top:34px;text-align:center;
  font-size:.85rem;color:var(--ink-3);
}

/* ─────────────── cards ─────────────── */
.card{
  background:var(--surface);
  border:0;border-radius:var(--r-grande);
  box-shadow:var(--card-sh);
  padding:34px 32px;
}
.grade-3,.grade-2{display:grid;gap:24px;margin-top:var(--ritmo-titulo)}
.grade-3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
/* 4 itens: 2x2 sempre. Com auto-fit viravam 3+1, e o orfao na segunda
   linha faz a lista parecer inacabada. */
.grade-2{grid-template-columns:1fr}
@media (min-width:720px){.grade-2{grid-template-columns:1fr 1fr}}

.card h3{font-size:var(--fs-h3);margin-bottom:12px;letter-spacing:-.018em}
.card p{font-size:.94rem;line-height:1.68;color:var(--ink-2)}

.ico{
  width:52px;height:52px;margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-poco);
  background:var(--inset);box-shadow:var(--sulco);
  color:var(--ink-2);
}
/* numeros viraram icones: em 'o que voce recebe' nao existe ordem para
   numerar, e o numero grande brigava com o titulo pelo canto do card. */

/* ─────────────── passos ─────────────── */
.passos{
  display:grid;gap:24px;margin-top:var(--ritmo-titulo);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.passo{position:relative;display:flex;flex-direction:column;align-items:center}
.passo .card{width:100%;flex:1}

/* o NO da linha do tempo: relevo, porque e a peca que marca posicao.
   Fica acima do card, e a linha do trilho passa por tras dele. */
.passo-no{
  position:relative;z-index:2;
  width:54px;height:54px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:1.22rem;font-weight:800;letter-spacing:-.02em;
  box-shadow:var(--up-card),inset 0 1px 0 rgb(255 255 255/.25);
}

/* o trilho so existe quando os tres cabem lado a lado — empilhado ele
   ligaria coisas que ja estao em sequencia obvia */
@media (min-width:790px){
  .passos{position:relative}
  .passos::before{
    content:'';position:absolute;z-index:0;
    left:16%;right:16%;top:24px;height:6px;border-radius:999px;
    background:var(--inset);box-shadow:var(--sulco);
  }
}

.passo-dia{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:var(--inset);color:var(--ink-3);
  font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:var(--sulco);
}

/* ─────────────── obras (portfolio) ─────────────── */
/* max-width: com poucos itens o auto-fit estica cada cartao para meia tela
   e a lista fica desproporcional ao que ela prova. */
.obras{
  display:grid;gap:14px;margin:var(--ritmo-titulo) auto 0;
  grid-template-columns:1fr;
}
.obra{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;border-radius:var(--r-poco);
  background:var(--surface);box-shadow:var(--up-card);
  text-decoration:none;color:var(--ink);
  transition:box-shadow .15s ease,scale .15s ease;
}
.obra:hover{box-shadow:var(--float)}
.obra:active{box-shadow:var(--sulco);scale:.99}
.obra:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.obra b{display:block;font-size:.94rem;font-weight:750}
.obra small{display:block;font-size:.78rem;color:var(--ink-3);margin-top:3px}
.obra svg{color:var(--ink-4);flex:0 0 auto}

/* ─────────────── faq ─────────────── */
.faq{display:grid;gap:12px;margin-top:var(--ritmo-titulo)}
.faq .card{padding:0}
.faq summary{
  cursor:pointer;list-style:none;
  padding:24px 28px;
  font-size:1rem;font-weight:750;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';flex:0 0 auto;
  width:9px;height:9px;
  border-right:2.2px solid var(--ink-3);border-bottom:2.2px solid var(--ink-3);
  rotate:45deg;translate:0 -2px;
  transition:rotate .18s ease;
}
.faq details[open] summary::after{rotate:225deg;translate:0 2px}
.faq details p{padding:0 28px 26px;font-size:.94rem;line-height:1.68;color:var(--ink-2);max-width:62ch}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:-3px;border-radius:var(--r-grande)}

/* ─────────────── quem faz ─────────────── */
.quem{
  display:flex;align-items:flex-start;gap:30px;
  background:var(--surface);border-radius:var(--r-grande);
  box-shadow:var(--card-sh);padding:32px;
}
.quem-foto{
  width:132px;height:165px;flex:0 0 auto;
  object-fit:cover;border-radius:var(--r-poco);
  background:var(--inset);box-shadow:var(--up);
}
.quem-txt h2{text-align:left;font-size:1.25rem;max-width:none;margin:0 0 12px}
.quem-txt p{font-size:.95rem;color:var(--ink-2)}
.quem-txt strong{color:var(--ink);font-weight:750}
.quem-selos{margin-top:18px;display:grid;gap:9px;font-size:.85rem;color:var(--ink-2)}
.quem-selos li{display:flex;align-items:center;gap:9px}
@media (max-width:600px){
  .quem{flex-direction:column;align-items:center;text-align:center;gap:22px;padding:26px}
  .quem-txt h2{text-align:center}
  .quem-selos li{justify-content:center}
}

/* ─────────────── cta final ─────────────── */
.sec-final{text-align:center}   /* o padding vem do --ritmo-solto la em cima */
.sec-final .btn{margin-top:38px}

/* ─────────────── rodape ─────────────── */
.rodape{
  padding:54px 0 60px;text-align:center;
  border-top:1px solid rgba(63,71,87,.06);
  background:#eaeef5;background-image:none;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.5);
  font-size:.85rem;color:var(--ink-3);
}
.rodape-marca{
  display:inline-flex;align-items:center;gap:12px;
  margin-bottom:22px;
  text-align:left;   /* o rodape e centralizado; a marca em si nao e */
}
/* link do rodape estava herdando o azul sublinhado do navegador */
.rodape a{
  color:var(--ink-2);font-weight:750;text-decoration:none;
  border-bottom:1.5px solid var(--ink-4);
  transition:color .16s ease, border-color .16s ease;
}
.rodape a:hover{color:var(--ink);border-color:var(--ink-3)}
.rodape a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.rodape p{margin-top:8px}
.rodape-legal{margin-top:18px;font-size:.78rem;line-height:1.7;color:var(--ink-4)}

/* ═══════════════ modal ═══════════════ */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-fundo{position:absolute;inset:0;background:rgba(13,13,15,.55);opacity:0;transition:opacity .22s ease}
.modal.aberto .modal-fundo{opacity:1}
.modal-card{
  position:relative;width:100%;max-width:440px;
  background:var(--canvas);background-image:var(--dots);background-size:16px 16px;
  border-radius:var(--r-grande);padding:40px 34px 34px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  opacity:0;translate:0 14px;scale:.98;
  transition:opacity .22s ease,translate .22s ease,scale .22s ease;
  max-height:calc(100dvh - 40px);overflow-y:auto;
}
.modal.aberto .modal-card{opacity:1;translate:0;scale:1}
@media (prefers-reduced-motion:reduce){
  .modal-fundo,.modal-card{transition:none}
}
/* sticky, nao absolute: dentro de container que rola, absolute sai do card
   depois de 36px de rolagem e o unico botao de fechar some. */
.modal-x{
  position:sticky;top:0;float:right;margin:-22px -8px 0 0;
  width:36px;height:36px;border:0;cursor:pointer;border-radius:50%;
  background:var(--surface);color:var(--ink);box-shadow:var(--up);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .18s ease;
}
.modal-x:active{box-shadow:var(--sulco)}
.modal-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.modal-card h3{font-size:1.28rem;line-height:1.3;padding-right:30px}
.modal-card h3 em{display:block;font-style:normal;color:var(--ink-3);margin-top:.15em}
.modal-sub{margin-top:14px;font-size:.94rem;line-height:1.6;color:var(--ink-2)}

#form{margin-top:28px;display:flex;flex-direction:column;gap:20px}
.campo span{
  display:block;margin-bottom:10px;
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);
}
.campo input{
  width:100%;padding:16px 19px;
  border:0;border-radius:var(--r-poco);
  background:var(--inset);box-shadow:var(--sulco);
  font-family:inherit;font-size:1rem;color:var(--ink);
  transition:box-shadow .18s ease;
}
.campo input::placeholder{color:var(--ink-3)}
.campo input:focus{outline:none;box-shadow:var(--sulco-fundo)}
.campo input:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--ink-3),var(--sulco-fundo);
}
/* anel OPACO e por cima da sombra: em rgba sobre o sulco os dois estados
   se distinguiam a 1,22:1 — invisivel pra daltonico. */
.campo input.ok{box-shadow:inset 0 0 0 2px #1f7444,var(--sulco)}
.campo input.ruim{box-shadow:inset 0 0 0 2px var(--err),var(--sulco)}

.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

#cEnviar.carregando .btn-txt{visibility:hidden}
.spinner{display:none}
#cEnviar.carregando .spinner{
  display:block;position:absolute;
  width:20px;height:20px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.28);border-top-color:#fff;
  animation:gira .7s linear infinite;
}
@keyframes gira{to{rotate:360deg}}

.modal-fina{
  display:flex;align-items:flex-start;gap:9px;margin-top:2px;
  font-size:.8rem;color:var(--ink-3);line-height:1.45;
}
.modal-fina .dot{margin-top:.42em}
.modal-erro{
  font-size:.87rem;font-weight:650;color:var(--err);
  background:var(--inset);box-shadow:var(--sulco);
  border-radius:var(--r-ctrl);padding:12px 15px;
}
[data-passo="ok"]{text-align:center}
[data-passo="ok"] h3{padding-right:0}
[data-passo="ok"] .btn{margin-top:24px}
.ok-check{
  width:68px;height:68px;border-radius:50%;margin:0 auto 20px;
  background:var(--surface);box-shadow:var(--up-card);color:var(--ok);
  display:flex;align-items:center;justify-content:center;
}

/* ─────────────── telas pequenas ─────────────── */
@media (max-width:560px){
  .wrap{padding:0 18px}
  .hero{padding:36px 0 var(--ritmo-solto)}
  .card{padding:24px}
  .btn-lg{width:100%;padding:16px 24px}
  .selos{gap:9px 16px;font-size:.79rem}
  .busca{padding:14px 17px;font-size:.88rem}
  .modal-card{padding:32px 22px 24px}
}

/* preenchimento ate a coluna do "ok" — so no terminal */
.prompt-corpo .p-fill{color:rgb(255 255 255/.14)}

/* ═══════════════ entrada em cena ═══════════════
   Anima SO opacity e translate — as duas propriedades que o navegador resolve
   na composicao, sem recalcular layout. Nada de `transform:` (regra da casa:
   apaga translates de outras regras neu).

   O estado inicial vive numa classe posta pelo JS, NUNCA no CSS puro: se o
   script falhar, o conteudo tem que estar visivel. Pagina que nasce invisivel
   esperando JavaScript e exatamente o defeito que derrubou o LCP de quatro
   sites da casa (DA-358). */
.js-anima [data-entra]{
  opacity:0;
  translate:0 18px;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             translate .62s cubic-bezier(.22,.61,.36,1);
}
.js-anima [data-entra].dentro{opacity:1;translate:0}

/* filhos entram em cascata — o atraso e escrito pelo JS em --i */
.js-anima [data-cascata] > *{
  opacity:0;
  translate:0 20px;
  transition:opacity .58s cubic-bezier(.22,.61,.36,1),
             translate .58s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i, 0) * 85ms);
}
.js-anima [data-cascata].dentro > *{opacity:1;translate:0}

@media (prefers-reduced-motion:reduce){
  .js-anima [data-entra],
  .js-anima [data-cascata] > *{
    opacity:1;translate:none;transition:none;
  }
}

/* ── vida no hover: o card sobe um degrau, nao muda de cor ── */
.card{transition:box-shadow .22s ease, translate .22s ease}
.grade-3 .card:hover,
.grade-2 .card:hover,
.passos .card:hover{box-shadow:var(--float);translate:0 -3px}

.faq .card{transition:box-shadow .2s ease}
.faq details[open]{box-shadow:var(--float)}
.faq summary{transition:color .15s ease}
.faq summary:hover{color:var(--ink)}

.obra{transition:box-shadow .18s ease, translate .18s ease}
.obra:hover{translate:0 -2px}

.quem-foto{transition:box-shadow .25s ease}
.quem:hover .quem-foto{box-shadow:var(--up-card)}

/* ── obras: de link raso a cartao com identidade ── */
.obras{max-width:none}
.obra{
  display:flex;flex-direction:column;gap:20px;align-items:stretch;
  padding:24px 26px;
}
/* nome em 2 linhas nao pode desalinhar o rodape do cartao vizinho */
.obra-pe{margin-top:auto}
/* 6 cartoes: 3+3 no desktop, 2+2+2 no meio, empilhado no celular.
   Com auto-fit dava 4+2, e sobra na ultima linha faz a lista parecer
   interrompida em vez de completa. */
@media (min-width:620px){.obras{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.obras{grid-template-columns:repeat(3,1fr)}}
.obra-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.obra-id b{display:block;font-size:1.06rem;font-weight:750;letter-spacing:-.018em}
.obra-id small{display:block;font-size:.79rem;color:var(--ink-3);margin-top:4px}
.obra-seta{color:var(--ink-4);flex:0 0 auto;transition:color .18s ease, translate .18s ease}
.obra:hover .obra-seta{color:var(--ink-2);translate:2px -2px}
.obra-pe{display:flex;align-items:center;justify-content:space-between;gap:12px}
.obra-url{
  font-family:ui-monospace,'SF Mono','Roboto Mono',Consolas,monospace;
  font-size:.76rem;color:var(--ink-3);
  padding:5px 11px;border-radius:var(--r-ctrl);
  background:var(--inset);box-shadow:var(--sulco);
}
.obra-nota{display:flex;align-items:baseline;gap:6px}
.obra-nota b{font-size:1.02rem;font-weight:800;color:var(--ok);letter-spacing:-.02em}
.obra-nota small{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* ── esteira de obras: faixa de ponta a ponta ──
   Uma grade de seis cartoes diz "fiz seis sites". A mesma prova numa faixa
   que corre e se dissolve nas duas bordas diz "estes, entre outros" — e nao
   afirma numero nenhum, porque todo cartao continua nomeado e clicavel.
   O trilho tem DOIS grupos identicos; a animacao anda exatamente metade dele,
   entao o quadro final e pixel a pixel igual ao inicial e o laco nao emenda. */
.esteira{
  position:relative;
  margin-top:var(--ritmo-titulo);
  overflow:hidden;
  /* RESPIRO PARA A SOMBRA. O `overflow:hidden` que segura a faixa corta no
     limite da caixa, e a sombra do cartao (--up-card: 4px de deslocamento +
     12px de blur; --float no hover chega a 9+22) morria rente a borda de
     baixo — a faixa terminava numa linha reta em vez de dissolver. O padding
     fica DENTRO da area de corte, entao e ele que devolve o espaco.
     Mais embaixo que em cima porque a sombra da casa cai para baixo. */
  padding-block:14px 32px;
  /* fora do .wrap: a largura ja e a da secao, entao nada de 100vw — 100vw
     conta a barra de rolagem e devolve rolagem horizontal na pagina toda. */
}
.esteira-trilho{
  display:flex;width:max-content;
  animation:esteira-corre 52s linear infinite;
  /* Promove a camada uma vez, em vez de repintar a faixa a cada quadro. A
     animacao anda a propriedade `translate`, nao `transform` (regra do topo
     deste arquivo), entao e ela que entra aqui. */
  will-change:translate;
}
.esteira-grupo{display:flex;gap:14px;padding-right:14px}
/* largura fixa: cartao elastico numa faixa que corre muda de tamanho
   conforme o vizinho e a esteira parece tremer. */
.esteira .obra{width:clamp(224px,62vw,300px);flex:0 0 auto}
@keyframes esteira-corre{from{translate:0 0}to{translate:-50% 0}}

/* para quando alguem quer ler: cursor em cima, foco por teclado, ou dedo
   na faixa (o `data-parada` vem do app.js). */
.esteira:hover .esteira-trilho,
.esteira:focus-within .esteira-trilho,
.esteira[data-parada] .esteira-trilho{animation-play-state:paused}

/* as bordas: o desfoque e o dissolver que fazem a faixa continuar fora da
   tela. `pointer-events:none` para nao roubar o clique do cartao embaixo. */
.esteira-borda{
  position:absolute;inset-block:0;z-index:2;
  /* No celular a borda tem que ser ESTREITA: 190px em 390px de tela comem
     metade do unico cartao visivel, e a faixa vira um borrao com nome pela
     metade. Larga so onde ha tela sobrando. */
  width:38px;
  pointer-events:none;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.esteira-borda.esq{
  left:0;
  background:linear-gradient(90deg,#eaeef5 8%,rgba(234,238,245,0) 100%);
  mask-image:linear-gradient(90deg,#000 58%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 100%);
}
.esteira-borda.dir{
  right:0;
  background:linear-gradient(270deg,#eaeef5 8%,rgba(234,238,245,0) 100%);
  mask-image:linear-gradient(270deg,#000 58%,transparent 100%);
  -webkit-mask-image:linear-gradient(270deg,#000 58%,transparent 100%);
}

/* Sem movimento: a faixa fica parada e vira rolagem de dedo. Quem pede menos
   animacao quer a informacao, nao a ausencia dela (mesma regra da DA-009). */
@media (min-width:620px){.esteira-borda{width:clamp(70px,11vw,190px)}}

@media (prefers-reduced-motion:reduce){
  .esteira{overflow-x:auto}
  .esteira-trilho{animation:none}
}

/* ── a nota, com o print do relatorio ──
   Sulco: e um dado GUARDADO, nao um botao. O print fica em relevo dentro
   dele, porque e a peca que se olha. */
.nota{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:34px;align-items:center;
  max-width:1000px;margin:var(--ritmo-titulo) auto 0;
  padding:32px;border-radius:var(--r-grande);
  background:var(--inset);box-shadow:var(--sulco);
  text-align:left;
}
.nota-print{display:flex;flex-direction:column;gap:10px}
.nota-print img{
  width:100%;height:auto;border-radius:var(--r-poco);
  background:#fff;box-shadow:var(--up-card);
}
.nota-fonte{
  font-family:ui-monospace,'SF Mono','Roboto Mono',Consolas,monospace;
  font-size:.68rem;color:var(--ink-3);text-align:center;
}
.nota-txt h3{font-size:1.22rem;margin-bottom:12px;letter-spacing:-.02em}
.nota-txt p{font-size:.93rem;line-height:1.66;color:var(--ink-2)}
.nota-txt strong{color:var(--ink);font-weight:750}
.nota-porque{
  margin-top:20px!important;
  font-weight:750;color:var(--ink)!important;
}
.nota-lista{margin-top:12px;display:grid;gap:12px}
.nota-lista li{
  font-size:.9rem;line-height:1.6;color:var(--ink-2);
  padding-left:18px;position:relative;
}
.nota-lista li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--ok);
}
.nota-lista b{color:var(--ink);font-weight:750}
.nota-link{
  display:inline-block;margin-top:22px;
  color:var(--ink);font-weight:750;font-size:.9rem;
  text-decoration:none;border-bottom:1.5px solid var(--ink-4);
  transition:border-color .16s ease;
}
.nota-link:hover{border-color:var(--ink)}
.nota-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

@media (max-width:860px){
  .nota{grid-template-columns:1fr;gap:26px;padding:24px}
}

/* o rodape inteiro e ink-3; a marca dentro dele nao pode desbotar junto */
.rodape .marca-txt b{color:var(--ink)}
.rodape .marca-txt small{color:var(--ink-3)}