/* kaqtu — folha de estilo da landing page.
 *
 * Extraída do template: com o redesign o bloco passou de 400 para 500+ linhas,
 * e aqui ela é cacheada entre visitas (o /static saiu do no-store). Não há
 * Jinja nenhum neste arquivo — o template continua dono de todo o conteúdo.
 *
 * Ordem: tokens · base · progresso · botões · cabeçalho · hero · prova ·
 * seções · ferramentas · pipeline · currículo · diferenciais · FAQ · rodapé.
 */
/* ============================================================
     DESIGN TOKENS — mono-tema "Laboratório" (escuro único)
     ============================================================ */
  :root{
    /* Os primitivos, a tipografia, o espaço, o raio, o movimento e a
       profundidade vêm de /static/tema.css, que TODA página carrega.
       Aqui ficam só os apelidos semânticos que a landing usa. */
    --bg-canvas:var(--bg);
    --bg-surface:var(--surface);
    --bg-surface-subtle:var(--surface-2);
    --bg-header-hero:var(--bg);
    --border-subtle:var(--border);
    --text-primary:var(--text);
    --text-secondary:var(--text-muted);
    --text-on-dark:var(--text);
    --text-on-dark-soft:var(--text-muted);
    --border-on-dark:var(--border);
    --action-cta:var(--accent);
    --action-cta-hover:color-mix(in srgb, var(--accent) 85%, black 15%);
    --action-cta-ink:var(--on-accent);
    --action-interactive:var(--primary);
    --accent-on-dark:var(--primary);
    --focus-ring:var(--focus);
  }

  /* ============================================================
     BASE
     ============================================================ */
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--bg-canvas); color:var(--text-primary);
       font-family:var(--ff-texto); font-size:var(--fs-corpo); line-height:1.65;
       -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  h1,h2,h3{font-family:var(--ff-display); font-weight:700; text-wrap:balance; letter-spacing:-.015em;}
  p{text-wrap:pretty;}
  a{color:inherit;}
  img,svg{max-width:100%;}
  .mono{font-family:var(--ff-mono); font-variant-numeric:tabular-nums;}
  .ico{width:1em; height:1em; fill:currentColor; vertical-align:-.125em; flex:none;}
  :is(a,button,summary):focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px;}

  /* O campo ocupa o plano 0 atrás de tudo; o conteúdo todo sobe para o plano 1.
     O canvas é criado pelo campo.js — sem JS ou sem WebGL, ele simplesmente
     não existe e a página segue idêntica. */
  #kq-campo{position:fixed; inset:0; width:100%; height:100%;
            z-index:var(--z-campo); pointer-events:none; display:block;}
  main,footer{position:relative; z-index:var(--z-doc);}

  .skip{position:absolute; left:-9999px; top:0; background:var(--action-cta); color:var(--action-cta-ink);
        padding:12px 20px; z-index:var(--z-skip); font-weight:700; border-radius:0 0 var(--r-sm) 0;}
  .skip:focus{left:0;}

  .wrap{max-width:1140px; margin:0 auto; padding-inline:var(--sp-xl);}
  .eyebrow{font-family:var(--ff-mono); font-size:var(--fs-mono); letter-spacing:var(--ls-mono);
           text-transform:uppercase; color:var(--action-interactive); margin:0 0 var(--sp-md);}

  @keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  [data-reveal]{opacity:0; transform:translateY(16px);
                transition:opacity var(--t-elem) var(--e-saida), transform var(--t-elem) var(--e-saida);}
  [data-reveal].revealed{opacity:1; transform:translateY(0);}

  /* ---- Progresso da leitura ----
     Telas largas: trilho de capítulos na margem esquerda.
     Telas estreitas: filete de 2 px na base do cabeçalho.
     Ambos são criados pelo JS — sem JS, nenhum dos dois existe. */
  .prog{position:fixed; left:26px; top:50%; translate:0 -50%; z-index:var(--z-topo);
        display:none; flex-direction:column; align-items:center; gap:var(--sp-md);}
  .prog-eixo{display:flex; flex-direction:column; align-items:center; gap:9px;}
  .prog-tick{width:2px; height:13px; border-radius:var(--r-pill); background:var(--border-on-dark);
             transition:background var(--t-micro) var(--e-micro), height var(--t-micro) var(--e-micro);}
  .prog-tick[data-on]{background:var(--action-cta); height:24px;}
  .prog-conta{margin:0; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.06em;
              color:var(--text-on-dark-soft); text-align:center; line-height:1.4;
              font-variant-numeric:tabular-nums;}
  .prog-conta b{display:block; color:var(--text-on-dark); font-weight:600;
                padding-bottom:3px; margin-bottom:3px; border-bottom:1px solid var(--border-on-dark);}
  .prog-fita{position:absolute; left:0; bottom:-1px; width:100%; height:2px; transform-origin:0 50%;
             background:var(--action-cta); transform:scaleX(0);
             transition:transform var(--t-micro) linear;}
  @media (min-width:1280px){ .prog{display:flex;} .prog-fita{display:none;} }

  /* ---- CTA que acompanha a rolagem (só no telefone) ----
     Criado pelo JS a partir da 2ª cena e recolhido no fecho, onde o CTA de
     verdade está na tela. Sem JS ele não existe. */
  .cta-fixo{position:fixed; left:16px; right:16px; bottom:14px; z-index:var(--z-topo);
            display:grid; place-items:center; padding:15px 20px; border-radius:var(--r-md);
            background:var(--action-cta); color:var(--action-cta-ink);
            font-weight:700; font-size:16px; text-decoration:none;
            box-shadow:0 14px 34px -12px rgba(0,0,0,.7);
            transform:translateY(160%); transition:transform var(--t-elem) var(--e-saida);}
  .cta-fixo[data-on]{transform:none;}
  @media (min-width:881px){ .cta-fixo{display:none;} }

  /* ---- Botões ---- */
  .btn{display:inline-block; text-decoration:none; font-weight:700; font-size:16px;
       padding:15px 30px; border-radius:var(--r-md);
       transition:transform var(--t-micro) var(--e-micro), box-shadow var(--t-micro) var(--e-micro),
                  background var(--t-micro) var(--e-micro), border-color var(--t-micro) var(--e-micro),
                  color var(--t-micro) var(--e-micro);}
  .btn-cta{background:var(--action-cta); color:var(--action-cta-ink);
           box-shadow:0 10px 25px -5px color-mix(in srgb, var(--action-cta) 30%, transparent);}
  .btn-cta:hover{background:var(--action-cta-hover); transform:translateY(-2px);
                 box-shadow:0 20px 30px -10px color-mix(in srgb, var(--action-cta) 42%, transparent);}
  .btn-quiet{color:var(--text-on-dark); border:1px solid var(--border-on-dark); font-weight:600;}
  .btn-quiet:hover{border-color:var(--accent-on-dark); color:var(--accent-on-dark);}

  /* No telefone o corpo cresce: a mesma linha ocupa menos largura, então
     precisa de mais altura de letra para continuar confortável. */
  @media (max-width:640px){
    :root{--fs-corpo:17px; --fs-peq:15px;}
    .cabeca p{font-size:17px;}
    .fer-texto .oque{font-size:15.5px;}
    .fer-texto .ganho{font-size:15px;}
    .passo p, .faq details p{font-size:16px;}
    .pipeline-lista p{font-size:15.5px;}
    .hero{padding-block:36px 56px;}
    .hero .sub{margin-top:18px;}
    .hero .acoes{margin-top:26px;}
    footer{padding-bottom:96px;}   /* espaço para o CTA que acompanha a rolagem */
  }

  /* ============================================================
     CABEÇALHO
     ============================================================ */
  /* Transparente sobre o hero; a partir de 80 px de rolagem ganha fundo, blur e borda. */
  .topo{position:sticky; top:0; z-index:var(--z-topo); background:transparent;
        border-bottom:1px solid transparent;
        transition:background var(--t-micro) var(--e-micro), border-color var(--t-micro) var(--e-micro);}
  .topo[data-preso]{background:color-mix(in srgb, var(--bg-header-hero) 88%, transparent);
        backdrop-filter:blur(var(--blur-topo)); border-bottom-color:var(--border-on-dark);}
  .topo .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-xl); padding-block:16px;}
  .marca{display:inline-flex; align-items:center; text-decoration:none;}
  .marca svg{height:30px; width:auto; display:block; fill:var(--text-on-dark);}
  .topo nav{display:flex; align-items:center; gap:28px;}
  .topo nav a{text-decoration:none; font-size:15px; color:var(--text-on-dark-soft);
              transition:color var(--t-micro) var(--e-micro);}
  .topo nav a:hover{color:var(--text-on-dark);}
  .topo nav a.oculta-mobile{position:relative;}
  .topo nav a.oculta-mobile[aria-current]{color:var(--text-on-dark);}
  .topo nav a.oculta-mobile[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:-7px;
              height:2px; border-radius:var(--r-pill); background:var(--action-cta);}
  .topo .entrar{color:var(--text-on-dark); font-weight:600;}
  .topo .criar{background:var(--action-cta); color:var(--action-cta-ink); font-weight:700;
               padding:10px 20px; border-radius:var(--r-sm);}
  .topo .criar:hover{background:var(--action-cta-hover);}
  @media (max-width:860px){ .topo nav .oculta-mobile{display:none;} }

  /* ============================================================
     HERO
     ============================================================ */
  .hero{background:transparent; color:var(--text-on-dark);
        padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,88px); position:relative; overflow:hidden;}
  .hero::before{content:""; position:absolute; inset:0; pointer-events:none;
      background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
      background-size:48px 48px;
      -webkit-mask-image:radial-gradient(1000px 600px at 50% 0%, #000 35%, transparent 80%);
              mask-image:radial-gradient(1000px 600px at 50% 0%, #000 35%, transparent 80%);}
  .hero .wrap{position:relative; z-index:var(--z-doc); max-width:1040px; text-align:center;}
  .hero .etiqueta{display:inline-block; font-family:var(--ff-mono); font-size:var(--fs-mono);
              letter-spacing:.07em; text-transform:uppercase; color:var(--accent-on-dark);
              border:1px solid color-mix(in srgb, var(--accent-on-dark) 42%, transparent);
              border-radius:var(--r-pill); padding:7px 16px;
              opacity:0; animation:fadeUp var(--t-elem) var(--e-saida) .05s forwards;}
  .hero h1{font-size:var(--fs-hero); line-height:1.02; letter-spacing:var(--ls-display);
           margin:var(--sp-xl) 0 0;
           opacity:0; animation:fadeUp var(--t-elem) var(--e-saida) .18s forwards;}
  .hero h1 em{font-style:normal; color:var(--accent-on-dark);}
  .hero .sub{font-size:var(--fs-corpo-lg); color:var(--text-on-dark-soft); max-width:660px;
             margin:24px auto 0; opacity:0; animation:fadeUp var(--t-elem) var(--e-saida) .32s forwards;}
  .hero .acoes{display:flex; gap:var(--sp-md); justify-content:center; flex-wrap:wrap; margin-top:36px;
               opacity:0; animation:fadeUp var(--t-elem) var(--e-saida) .46s forwards;}
  .hero .nota{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--text-on-dark-soft);
              margin-top:18px; opacity:0; animation:fadeUp var(--t-elem) var(--e-saida) .6s forwards;}

  /* ---- Faixa de prova ---- */
  .provas{border-top:1px solid var(--border-on-dark); background:var(--bg-header-hero);}
  .provas .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:0;
                background:var(--border-on-dark);}
  .prova{background:var(--bg-header-hero); padding:30px 22px; text-align:center;}
  .prova dt{font-family:'IBM Plex Mono',monospace; font-size:clamp(20px,2.4vw,27px); font-weight:600;
            color:var(--accent-on-dark); font-variant-numeric:tabular-nums;}
  .prova dd{margin:8px 0 0; font-size:13px; color:var(--text-on-dark-soft); line-height:1.45;}
  @media (max-width:820px){ .provas .wrap{grid-template-columns:1fr 1fr;} }

  /* ============================================================
     SEÇÕES GERAIS
     ============================================================ */
  section{padding-block:var(--sp-secao); scroll-margin-top:84px;}
  .cabeca{max-width:660px; margin-bottom:var(--sp-2xl);}
  .cabeca.centro{margin-inline:auto; text-align:center;}
  .cabeca h2{font-size:var(--fs-h2); margin:0; line-height:1.14;}
  .cabeca p{font-size:16.5px; color:var(--text-secondary); margin:14px 0 0;}
  .faixa{background:color-mix(in srgb, var(--bg-surface-subtle) 78%, transparent);
         border-block:1px solid var(--border-subtle);}

  /* ---- Ferramentas: quatro cenas, uma marcação ----
     Cada ferramenta é um <article> com a arte à esquerda e o texto à direita.
     No desktop a arte gruda enquanto o texto daquela ferramenta passa; abaixo
     de 880 px (e com movimento reduzido) o mesmo DOM vira um card empilhado. */
  .ferramentas{display:flex; flex-direction:column; gap:var(--sp-2xl);}
  .fer{display:grid; grid-template-columns:1.02fr 1fr; gap:var(--sp-2xl); align-items:start;}
  .fer-arte{position:sticky; top:104px; align-self:start;}
  .fer-texto{min-height:100vh; display:flex; flex-direction:column; justify-content:center;}

  .amostra{background:color-mix(in srgb, var(--bg-surface-subtle) 88%, transparent);
           border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:var(--sp-lg);}

  /* ---- Resposta magnética ----
     O card reconhece onde o ponteiro está, com 4 px no máximo. A suavização
     é feita no JS, então transform aqui não leva transition: as duas coisas
     brigariam. Só a borda transita. */
  .amostra,.dif{transform:translate3d(var(--mx,0),var(--my,0),0);
                transition:border-color var(--t-micro) var(--e-micro);}
  .amostra:hover,.dif:hover{border-color:var(--action-interactive);}
  .papel{background:#FFFFFF; border:1px solid rgba(15,23,42,.15); border-radius:var(--r-xs);
         padding:18px; color:var(--paper-ink); font-size:12.5px; line-height:1.5; min-height:268px;}
  .fer-texto h3{font-family:var(--ff-texto); font-size:var(--fs-h3); font-weight:700; margin:0;}
  .fer-texto .oque{font-size:14.5px; color:var(--text-secondary); margin:10px 0 0;}
  .fer-texto .ganho{font-size:13.5px; color:var(--text-primary); margin:14px 0 0;
                    padding-left:13px; border-left:3px solid var(--action-interactive);}
  .fer-texto ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-xs);}
  .fer-texto li{font-family:var(--ff-mono); font-size:11px; color:var(--text-muted);
                background:var(--bg-surface-subtle); border:1px solid var(--border-subtle);
                padding:4px 9px; border-radius:var(--r-xs);}
  .fer-texto .ir{margin-top:20px; font-size:var(--fs-peq); font-weight:600; align-self:flex-start;
                 color:var(--action-interactive); text-decoration:none;
                 transition:gap var(--t-micro) var(--e-micro);}
  .fer-texto .ir:hover{text-decoration:underline;}

  /* ---- Montagem: os elementos entram na ordem em que a ferramenta trabalha ---- */
  .ent{opacity:0; transform:translateY(9px);
       transition:opacity var(--t-elem) var(--e-saida), transform var(--t-elem) var(--e-saida);
       transition-delay:calc(var(--i,0) * 85ms);}
  .montado .ent{opacity:1; transform:none;}
  .fio{stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
       transition:stroke-dashoffset 700ms var(--e-cena);
       transition-delay:calc(var(--i,0) * 85ms);}
  .montado .fio{stroke-dashoffset:0;}
  .cresce{width:0 !important;
          transition:width 700ms var(--e-cena); transition-delay:calc(var(--i,0) * 85ms);}
  .montado .cresce{width:var(--w) !important;}

  @media (max-width:880px){
    .fer{grid-template-columns:1fr; gap:var(--sp-lg);}
    .fer-arte{position:static;}
    .fer-texto{min-height:0;}
  }

  /* amostras internas */
  .rot{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--paper-muted);
       text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;}
  .alt{margin-top:3px;}
  .alt.ok{color:#047857; font-weight:700;}
  .cod{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
       background:color-mix(in srgb, var(--paper-indigo) 12%, transparent); color:var(--paper-indigo-dark); border-radius:4px;
       padding:3px 8px; margin-bottom:8px;}
  .barra{height:7px; border-radius:var(--r-pill); background:var(--paper-subtle); overflow:hidden; margin-top:5px;}
  .barra span{display:block; height:100%; border-radius:var(--r-pill); background:var(--paper-indigo);}
  .eixo-linha{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
              font-size:11px; margin-top:7px;}
  .eixo-linha b{font-variant-numeric:tabular-nums; font-family:var(--ff-mono); color:var(--paper-secondary);}
  .fonte{display:flex; align-items:center; gap:7px; margin:12px 0 0; padding-top:9px;
         border-top:1px solid var(--paper-subtle); font-family:var(--ff-mono);
         font-size:9.5px; color:var(--paper-muted); line-height:1.4;}
  .pisca{width:6px; height:6px; border-radius:50%; background:var(--paper-green); flex:none;}
  .dito{margin:9px 0 13px; padding-left:10px; border-left:2px solid var(--paper-subtle);
        color:var(--paper-secondary); font-style:italic;}
  .tempo{display:flex; gap:3px; margin:13px 0 0;}
  .tempo i{height:6px; border-radius:var(--r-pill); background:var(--paper-indigo); opacity:.85;}
  .tempo i:nth-child(2){opacity:.6;}
  .tempo i:nth-child(3){opacity:.38;}

  /* ============================================================
     PIPELINE (scrollytelling) — banda escura de assinatura
     ============================================================ */
  .pipeline{background:transparent; color:var(--text-on-dark);
            border-block:1px solid var(--border-on-dark); padding-block:clamp(64px,8vw,100px) 60px;}
  .pipeline .cabeca h2{color:var(--text-on-dark);}
  .pipeline .cabeca p{color:var(--text-on-dark-soft);}

  .trilho{display:grid; grid-template-columns:1fr 1.05fr; gap:var(--sp-2xl); align-items:start;}
  .painel-fixo{position:sticky; top:96px; align-self:start; z-index:var(--z-fixo);}
  .painel{background:linear-gradient(180deg,color-mix(in srgb, var(--surface) 100%, white 4%),var(--surface));
          border:1px solid var(--border-on-dark); border-radius:var(--r-lg); padding:26px;
          min-height:min(400px,50vh); max-height:calc(100vh - 132px);
          display:flex; flex-direction:column; overflow:hidden;
          box-shadow:var(--sombra-fixo);}
  .medidor{display:flex; gap:7px; margin-bottom:14px;}
  .medidor i{flex:1; height:3px; border-radius:var(--r-pill); background:rgba(255,255,255,.16);
             transition:background var(--t-elem) var(--e-cena);}
  .medidor i.on{background:var(--action-cta);}
  .etapa-nome{align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600;
              color:var(--accent-on-dark); background:rgba(99,102,241,.16);
              border:1px solid rgba(165,180,252,.32); padding:6px 12px; border-radius:var(--r-pill); margin-bottom:12px;}
  /* Um bloco entra, permanece e comprime quando o próximo chega.
     grid-template-rows 0fr→1fr anima a altura sem precisar medir nada.
     Sem JS o painel fica no estado 01, que é o primeiro da narrativa. */
  .bloco{display:grid; grid-template-rows:0fr; opacity:0; margin-bottom:0;
         transition:grid-template-rows var(--t-elem) var(--e-cena),
                    opacity var(--t-elem) var(--e-cena),
                    margin-bottom var(--t-elem) var(--e-cena);}
  .bloco > div{overflow:hidden; min-height:0;}
  .b-refs{grid-template-rows:1fr; opacity:1; margin-bottom:8px;}
  .bloco[data-estado="fora"]{grid-template-rows:0fr; opacity:0; margin-bottom:0;}
  .bloco[data-estado="cheio"],
  .bloco[data-estado="linha"]{grid-template-rows:1fr; opacity:1; margin-bottom:8px;}
  .bloco[data-estado="recuado"]{grid-template-rows:1fr; opacity:.45; margin-bottom:8px;}

  /* As cinco referências não somem na etapa 02: encolhem numa fileira de selos. */
  .lista{display:flex; flex-direction:column; gap:7px; transition:gap var(--t-elem) var(--e-cena);}
  .doc{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05);
       border:1px solid var(--border-on-dark); border-radius:var(--r-sm); padding:11px 13px;
       font-size:12.5px; color:var(--text-on-dark);
       transition:padding var(--t-elem) var(--e-cena), gap var(--t-elem) var(--e-cena);}
  .doc svg{flex:none; width:15px; height:15px; color:var(--accent-on-dark);}
  .doc .nome{max-width:280px; overflow:hidden; white-space:nowrap;
             transition:max-width var(--t-elem) var(--e-cena),
                        opacity calc(var(--t-elem) * .55) var(--e-cena);}
  .b-refs[data-estado="linha"] .lista{flex-direction:row; gap:6px;}
  .b-refs[data-estado="linha"] .doc{padding:10px; gap:0;}
  .b-refs[data-estado="linha"] .doc .nome{max-width:0; opacity:0;}
  .citacao{background:rgba(255,255,255,.05); border:1px solid var(--border-on-dark);
           border-radius:var(--r-md); padding:var(--sp-lg);}
  .citacao p{margin:0 0 13px; font-size:15px; color:var(--text-on-dark);
             transition:font-size var(--t-elem) var(--e-cena), margin var(--t-elem) var(--e-cena);}
  .origem{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-on-dark-soft);}
  .b-citacao[data-estado="recuado"] .citacao{padding:12px 14px;}
  .b-citacao[data-estado="recuado"] .citacao > p:first-child{font-size:12px; margin-bottom:7px;
             display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
             -webkit-box-orient:vertical; overflow:hidden;}
  .b-citacao[data-estado="recuado"] .origem{font-size:10.5px;}
  .pulso{width:7px; height:7px; border-radius:50%; background:var(--success); flex:none;}
  .b-desenho > div{display:grid; place-items:center;}
  .b-desenho svg{width:100%; max-width:250px; height:auto;
                 transition:max-width var(--t-elem) var(--e-cena);}
  .b-desenho[data-estado="recuado"] svg{max-width:92px;}
  @keyframes tracar{from{stroke-dashoffset:320;}to{stroke-dashoffset:0;}}
  .traco{stroke-dasharray:320; stroke-dashoffset:320;}
  .b-desenho[data-estado="cheio"] .traco{animation:tracar var(--t-cena) var(--e-cena) .25s forwards;}
  .b-desenho[data-estado="cheio"] .traco.b{animation-delay:.5s;}
  /* já recuado, o traço fica desenhado: a animação não vale mais para ele */
  .b-desenho[data-estado="recuado"] .traco{stroke-dashoffset:0;}
  .b-selos > div{display:flex; flex-direction:column; gap:var(--sp-sm);}
  .checagem{display:flex; align-items:center; gap:12px; background:rgba(16,185,129,.08);
        border:1px solid rgba(16,185,129,.34); border-radius:var(--r-sm); padding:10px 14px;}
  .checagem .tick{width:23px; height:23px; border-radius:50%; background:rgba(16,185,129,.18);
              color:var(--success); display:grid; place-items:center; font-size:13px; flex:none;}
  .checagem b{display:block; font-size:14px;}
  .checagem small{display:block; font-size:11.5px; line-height:1.35; color:var(--text-on-dark-soft); margin-top:2px;}

  .passos{display:flex; flex-direction:column;}
  .passo{min-height:82vh; display:flex; align-items:center;}
  .passo > div{opacity:.32; transform:translateY(6px);
               transition:opacity var(--t-elem) var(--e-cena), transform var(--t-elem) var(--e-cena);}
  .passo.atual > div{opacity:1; transform:translateY(0);}
  .passo .n{font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
            color:var(--accent-on-dark); margin-bottom:9px;}
  .passo h3{font-family:'IBM Plex Sans',sans-serif; font-size:clamp(18px,2.4vw,23px);
            font-weight:700; margin:0 0 10px; color:var(--text-on-dark);}
  .passo p{margin:0; font-size:15.5px; color:var(--text-on-dark-soft); max-width:44ch;}

  /* Alternativa estática: telas estreitas e quem pediu menos movimento */
  .pipeline-lista{display:none; gap:18px; grid-template-columns:1fr;}
  .pipeline-lista article{background:rgba(255,255,255,.04); border:1px solid var(--border-on-dark);
                          border-radius:var(--r-md); padding:22px;}
  .pipeline-lista h3{font-family:'IBM Plex Sans',sans-serif; font-size:17px; margin:12px 0 8px; color:var(--text-on-dark);}
  .pipeline-lista p{margin:0; font-size:14.5px; color:var(--text-on-dark-soft);}
  @media (max-width:880px){
    /* display:block, não uma coluna de grid: o painel precisa que o bloco que
       o contém seja alto (painel + passos) para poder grudar sobre eles. */
    .trilho{display:block;}
    .painel-fixo{top:70px;}
    .painel{min-height:0; max-height:56vh; padding:18px;}
    /* na tela pequena o acúmulo guarda só o que ainda tem função:
       o que recuou sai de cena em vez de ocupar altura */
    .bloco[data-estado="recuado"]{grid-template-rows:0fr; opacity:0; margin-bottom:0;}
    .passos{margin-top:var(--sp-lg);}
    /* o texto para acima do CTA que acompanha a rolagem, não atrás dele */
    .passo{min-height:74vh; align-items:flex-end; padding-bottom:19vh;}
    .passo p{max-width:none;}
  }
  @media (prefers-reduced-motion:reduce){
    /* aqui sim a lista estática substitui o scrollytelling por inteiro */
    .trilho{display:none;}
    .pipeline-lista{display:grid;}
    [data-reveal]{opacity:1; transform:none; transition:none;}
    .prog-tick,.prog-fita,.topo,.topo nav a{transition:none;}
    .cta-fixo{transition:none;}
    .ent,.fio,.cresce{opacity:1; transform:none; stroke-dashoffset:0; transition:none;}
    .amostra,.dif{transform:none;}
    .montado .cresce,.cresce{width:var(--w) !important;}
    .fer-arte{position:static;}
    .fer-texto{min-height:0;}
    .hero .etiqueta,.hero h1,.hero .sub,.hero .acoes,.hero .nota{animation:none; opacity:1;}
    html{scroll-behavior:auto;}
  }

  /* ============================================================
     COMO FUNCIONA
     ============================================================ */
  .fluxo{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-lg); counter-reset:etapa;}
  .fluxo li{list-style:none; position:relative; padding-top:22px; border-top:2px solid var(--border-subtle);}
  .fluxo li::before{counter-increment:etapa; content:counter(etapa,decimal-leading-zero);
                    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
                    color:var(--action-interactive); position:absolute; top:-11px; left:0;
                    background:var(--bg-canvas); padding-right:9px;}
  .fluxo h3{font-family:var(--ff-texto); font-size:var(--fs-h4); margin:0 0 7px;}
  .fluxo p{margin:0; font-size:var(--fs-peq); color:var(--text-secondary);}
  @media (max-width:840px){ .fluxo{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .fluxo{grid-template-columns:1fr;} }

  /* ---- Currículo ---- */
  .curriculo{display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:7px;
             align-items:end; overflow-x:auto; padding-bottom:var(--sp-xs);}
  .ano{display:flex; flex-direction:column; align-items:center; gap:7px; min-width:60px;}
  .ano .et{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.03em; color:var(--text-muted);}
  .ano .et.fis{color:var(--action-interactive);}
  .ano .bar{width:100%; border-radius:4px; background:var(--border-subtle);}
  .ano .bar.fis{background:var(--action-interactive);}
  .ano .lb{font-size:11px; color:var(--text-secondary); font-variant-numeric:tabular-nums;}

  /* ---- Diferenciais ---- */
  .difs{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-xl);}
  .dif{background:color-mix(in srgb, var(--bg-surface) 88%, transparent);
       border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:26px 24px;}
  .dif h3{font-family:var(--ff-texto); font-size:var(--fs-h4); margin:0 0 9px;}
  .dif p{margin:0; font-size:var(--fs-peq); color:var(--text-secondary);}
  @media (max-width:900px){ .difs{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .difs{grid-template-columns:1fr;} }

  /* ---- FAQ ---- */
  .faq{max-width:800px; margin-inline:auto;}
  .faq details{border-bottom:1px solid var(--border-subtle);}
  .faq summary{cursor:pointer; list-style:none; padding:20px 40px 20px 0; font-weight:600;
               font-size:var(--fs-h4); position:relative;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; position:absolute; right:6px; top:50%; translate:0 -50%;
                      font-size:22px; color:var(--action-interactive); line-height:1;}
  .faq details[open] summary::after{content:"−";}
  .faq details p{margin:0 0 22px; font-size:15px; color:var(--text-secondary); max-width:70ch;}

  /* ---- Fecho ---- */
  .fecho{text-align:center;}
  .fecho h2{font-size:var(--fs-h2); margin:0 auto; max-width:24ch; line-height:1.2;}
  .fecho p{color:var(--text-secondary); margin:18px auto 32px; max-width:52ch;}

  /* ---- Rodapé ---- */
  footer{background:transparent; color:var(--text-on-dark-soft); padding-block:48px 40px;}
  footer .wrap{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start;}
  footer svg{height:28px; width:auto; fill:var(--text-on-dark);}
  footer nav{display:flex; flex-wrap:wrap; gap:14px 26px;}
  footer a{text-decoration:none; font-size:var(--fs-peq);}
  footer a:hover{color:var(--text-on-dark);}
  footer .fim{margin-top:34px; padding-top:22px; border-top:1px solid var(--border-on-dark);
              font-size:12.5px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;}

  .rodape-links{display:flex; flex-direction:column; align-items:flex-end; gap:16px;}
  .redes-sociais{display:flex; gap:14px;}
  .redes-sociais a{display:inline-flex; color:var(--text-on-dark-soft);
                    transition:color var(--t-micro) var(--e-micro);}
  .redes-sociais a:hover{color:var(--text-on-dark);}
  footer .redes-sociais svg{height:22px; width:22px; fill:none;}