/* ============================================================================
   INDEX.HTML — só o CSS específico desta página. Os tokens, o reset, a
   revelação por rolagem e as primitivas (.cg-sec, .cg-wrap, .cg-eyebrow,
   .cg-h2, .cg-lede, .cg-card, .cg-btn*, .cg-tag, .cg-panel, .cg-nav-link)
   vivem em shared.css — ver lá o porquê e a nav canônica.
   ========================================================================= */

/* --- animações -------------------------------------------------------------
   Cada uma diz alguma coisa:
      cgDocScan — a leitura acontecendo na folha do painel da plataforma
      cgMarquee — a faixa de áreas na primeira dobra (loop contínuo)
   A entrada de conteúdo (cgRise) é compartilhada — mora em shared.css.
   O trio da ilustração do hero — cgScan, cgSpin, cgLift e as regras .cg-doc
   que os usavam — saiu junto com os cartões escaneados em 2026-08-25: o
   movimento da abertura agora é o loop HeroFluxo em <video>, não CSS.
   Antes deles saíram cgBlink e cgFlow (decorativos) e cgLive com o bloco de
   prova do hero (ago/2026). cgMarquee tinha saído em 2026-08-24 junto com a
   faixa pós-filme; volta agora como as áreas de atuação do hero, puramente
   decorativa — sem o painel case/capacidade, que hoje mora em "Resultados". - */
@keyframes cgDocScan{0%{transform:translateY(-14px);opacity:0}14%{opacity:1}80%{opacity:1}100%{transform:translateY(132px);opacity:0}}
@keyframes cgMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}

/* --- rever vídeo ---------------------------------------------------------- */
.cg-replay{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r2);font-size:.8rem;font-weight:650;color:#fff;background:rgba(13,30,46,.72);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);animation:cgRise .4s cubic-bezier(.16,.84,.44,1) both;transition:background .18s,border-color .18s}
.cg-replay:hover{background:rgba(13,30,46,.9);border-color:rgba(255,255,255,.42)}

.cg-h1{font-size:clamp(2.2rem,4.5vw,4.05rem);font-weight:700;line-height:1.04;letter-spacing:-.035em;max-width:14ch;margin-bottom:16px}
.cg-cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cg-hero-media{margin:0 auto}
.cg-quem-head .cg-eyebrow{grid-column:1/-1}

/* --- áreas de atuação no hero ----------------------------------------------
   Faixa decorativa, não interativa: a distinção case/capacidade que os chips
   antigos abriam num painel agora mora na seção "Casos reais" (Onda 3) — aqui
   é só a lista das cinco áreas, em loop contínuo. pointer-events:none porque
   nada nesta faixa é clicável e o cursor não deve sugerir que seja.

   O trilho tem QUATRO cópias do mesmo grupo e desloca -25%, exatamente a
   largura de uma cópia: no instante do salto de volta o que está na tela é
   uma cópia idêntica, então o loop não tem emenda (padrão herdado da branch
   caio — trocar o número de cópias sem trocar a porcentagem produz um pulo
   visível a cada volta). A janela recorta o trilho e desvanece nas pontas —
   sem a máscara os nomes aparecem e somem cortados na borda. */
.cg-areas-win{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cg-areas-track{display:flex;width:max-content;animation:cgMarquee 32s linear infinite;will-change:transform}
.cg-areas-win:hover .cg-areas-track,.cg-areas-win:focus-within .cg-areas-track{animation-play-state:paused}
.cg-areas-grp{display:flex;align-items:center;flex:none}
.cg-area{display:inline-flex;align-items:center;gap:10px;padding:0 clamp(14px,1.9vw,24px);font-size:.94rem;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap}
.cg-area-i{width:18px;height:18px;flex:none;fill:none;stroke:#18C5C5;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cg-areas-sep{flex:none;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}

/* --- em produção hoje: logos clicáveis (2026-08-29, plano §1) -------------
   Os quatro logos viram link para o site/perfil de cada cliente. A moldura
   (borda + raio) é a affordance de "isto é clicável" em repouso — sem ela um
   logo cercado de espaço em branco não lê como link. Hover/focus reforçam a
   borda e ampliam o logo; :focus-visible espelha o hover para quem navega
   por teclado, porque um link só com estado de mouse deixa metade dos
   visitantes sem sinal nenhum de "isto é interativo".
   hover:none no Chrome headless (ver AGENTS.md) torna isto invisível ao
   qa-shots.mjs — testado à mão num navegador real. */
.cg-logo-link{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r3);text-decoration:none;transition:border-color .2s,box-shadow .2s,background .2s}
.cg-logo-link:hover,.cg-logo-link:focus-visible{border-color:var(--teal-ink);box-shadow:var(--sh2);background:var(--bg)}
.cg-logo-link:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
.cg-logo-link img{transition:transform .2s}
.cg-logo-link:hover img,.cg-logo-link:focus-visible img{transform:scale(1.08)}

/* --- para quem é ----------------------------------------------------------
   REDESENHO 2026-08-27 (ponto 5 do plano). A seção era um grid de duas
   colunas — texto à esquerda (.8fr), quatro cards 2x2 à direita (1.2fr) — e o
   defeito relatado ("aglomerado em cima, vazio embaixo") era estrutural, não
   de espaçamento: a coluna de texto acabava na régua teal, os cards seguiam
   descendo mais 250px, e a metade inferior esquerda ficava branca por
   construção. Nenhum ajuste de padding conserta uma coluna que não tem o que
   dizer na altura da vizinha.

   No lugar entra um arco vertical — cabeçalho, os quatro sintomas, a virada:
     1. .cg-quem-head  — eyebrow atravessa, h2 e lede lado a lado com
        align-items:end. Bottom-align porque os dois blocos têm alturas
        diferentes e é o rodapé deles que precisa formar uma linha; com
        align-items:start sobrava exatamente o vazio que estamos tirando.
     2. .cg-fit-cards  — de 2x2 para uma fileira de quatro, ponta a ponta.
        Quatro sintomas em linha se leem por varredura (o título é a carga,
        o corpo é apoio); 2x2 num terço da tela se lê como parágrafo.
     3. .cg-quem-film  — o plataforma-antes-depois, largura inteira. Ele É a
        resposta aos quatro: o painel esquerdo do vídeo é o sintoma, o direito
        é o depois. Ver o comentário na seção para o contrato de playback.
   O sentido de leitura passa a ser vertical em qualquer viewport, então o
   mobile deixa de ser uma reflow do desktop e vira a mesma peça mais estreita. */
.cg-r-hero{position:relative;z-index:3;max-width:1400px;margin:0 auto;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4vw,48px);align-items:center;padding:clamp(96px,12vh,120px) var(--pad-x) clamp(48px,6vh,72px)}
.cg-r-hero>*{min-width:0}
.cg-quem-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:8px clamp(28px,5vw,64px);align-items:end}
.cg-quem-head .cg-eyebrow{grid-column:1/-1}
.cg-quem-head-tight{display:block;margin-bottom:clamp(24px,3vw,36px)}
/* O ARRANJO LADO A LADO CONTINUA (revertido em 2026-08-31). Houve uma
   tentativa de resolver a ilegibilidade do filme aqui, no CSS: passá-lo para
   largura inteira ganhava ~45% de corpo nos rótulos internos sem tocar no
   arquivo. O Caio recusou — o problema é do VÍDEO, e é lá que ele foi
   resolvido: `video-making/src/theme.ts`, round 5, subiu a escala de tipo da
   composição e reabriu a geometria de `plataforma/timing.ts` para o corpo
   maior caber. Fica registrado para ninguém tentar de novo por este lado:
   alargar a coluna aqui é tratar sintoma. */
.cg-quem-split{display:grid;grid-template-columns:minmax(0,0.2fr) minmax(0,0.8fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(8px,1.5vw,16px)}
.cg-quem-film.cg-quem-film-side{margin-top:0}
/* Seletor composto de propósito: `.cg-fit-cards-stack` sozinho tem a mesma
   especificidade de `.cg-fit-cards` e perderia para o repeat(4) dele por
   ordem de fonte — foi assim que a fileira de quatro apareceu espremida na
   coluna de 0.56fr quando este arranjo voltou. */
.cg-fit-cards.cg-fit-cards-stack{align-self:start;grid-template-columns:1fr;margin-top:0}
.cg-fit-card.cg-fit-card-compact{flex-direction:row;align-items:center;gap:14px;padding:18px 20px}
.cg-fit-card.cg-fit-card-compact h3{margin-top:4px;font-size:.98rem}
/* Card-título, acoplado no topo da coluna de sintomas — mesmo bloco com
   hairline (herda de .cg-fit-cards-stack), só que rotulando a coluna em vez
   de descrever um sintoma. Fundo --bg-alt e texto mono/eyebrow o distinguem
   dos cards abaixo sem quebrar o agrupamento visual. */
.cg-fit-card-heading{padding:12px 20px;background:var(--bg-alt)}
.cg-fit-card-heading::before{opacity:.5}
.cg-fit-card-heading span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);font-weight:700}
.cg-fit-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;margin-top:clamp(36px,4.5vw,56px)}
/* T2.2 (2026-08-26): teal de presença real na seção — os quatro acentos
   (ícone, índice, barra lateral, régua sob o lede) saem do neutro para
   --teal-ink, o teal escuro que a página já usa quando o teal senta em fundo
   claro (o teal puro some sobre branco — ver make-radial.mjs). A barra é
   PERMANENTE, não hover: o harness fotografa hover:none, então estado sob
   cursor é inverificável aqui, e presença cromática que só existe sob o
   cursor não conta. Âmbar liberado até ~10-15% (T1.4) — a landing tem
   identidade própria e pode expandir seu uso além de KPIs. */
/* O padding lateral encolhe com a viewport: em fileira de quatro, cada card
   fica com ~288px em 1280px de tela, e 24px fixos de cada lado tiravam do
   texto justamente onde ele já estava mais apertado. */
.cg-fit-card{background:var(--bg);padding:26px clamp(19px,1.7vw,24px) 28px;display:flex;flex-direction:column;gap:12px;transition:background .2s;position:relative}
.cg-fit-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal-ink);opacity:.9}
.cg-fit-card:hover{background:var(--bg-alt)}
.cg-fit-card svg{color:var(--teal-ink); width:auto;}
@media (min-width: 768px){.cg-fit-card svg{width:50%;}}
.cg-fit-card h3{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.cg-fit-card p{font-size:.88rem;color:var(--fg-soft);line-height:1.6}
.cg-fit-idx{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--fg-faint)}
/* Escopado aos cards de sintoma de propósito: .cg-fit-idx também rotula os
   "passo 01–03" de Como implantamos, que é escopo de outra task. */
.cg-fit-card .cg-fit-idx{color:var(--teal-ink)}

/* A virada da seção: a frase-ponte e o filme antes/depois.
   A moldura NÃO copia a do hero. Lá o quadro senta sobre ink e o hairline é
   branco a 15%, porque o problema era o retângulo escuro sumir dentro do
   fundo escuro. Aqui o fundo é branco e o problema é o oposto — um bloco de
   ink de 740px de altura vira uma mancha sólida no meio da página. Por isso
   hairline --line (o mesmo dos cards logo acima, para os dois blocos lerem
   como a mesma família) e --sh3, a sombra profunda que a página reserva para
   mídia grande sobre claro. aspect-ratio 16/9 é a proporção nativa do arquivo
   (1600x900) e trava a altura antes do vídeo chegar: sem ela o poster e o
   vídeo trocam de tamanho no load e o resto da página salta. */
.cg-quem-turn{margin-top:clamp(48px,6vw,80px);max-width:62ch}
.cg-quem-film{margin:clamp(18px,2.4vw,28px) 0 0}
/* Variantes 2026-08-29 (plano de 08-29, frente 2): o filme foi para logo
   depois do cabeçalho, então a frase-ponte e a fileira de sintomas que vêm
   depois dele precisam de margens menores que as do arranjo antigo (onde o
   filme fechava a seção e "puxava" bastante espaço do que vinha antes). */
.cg-quem-turn-top{margin-top:clamp(24px,3vw,36px)}
.cg-fit-cards-after-film{margin-top:clamp(40px,5vw,60px)}
.cg-quem-frame{position:relative;border-radius:var(--r4);overflow:hidden;border:1px solid var(--line);background:var(--ink);box-shadow:var(--sh3);aspect-ratio:16/9}
/* Réplica estática do último quadro do plataforma-antes-depois, mostrada no
   lugar do vídeo quando ele termina (ver `showReplica` no script da página).
   viewBox 1600x900 = a mesma resolução do filme, e o frame também é 16:9,
   então não há corte nem realinhamento a fazer — 1:1. */
.cg-plat-replica{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
/* A legenda existe pelo telefone: o filme é um render fixo de 1600px, então
   num viewport de 390px os rótulos internos ("site público / órgão sem API",
   "revisam e acompanham") caem para ~3px e são decorativos na prática. O que
   eles dizem tem de existir em texto para quem lê no celular ou com leitor de
   tela. Descreve o que está na tela; não repete a frase-ponte acima. */
.cg-quem-cap{margin-top:14px;font-size:.84rem;line-height:1.65;color:var(--fg-faint)}


/* --- roda: como o software roda -------------------------------------------
   Seção própria, entre a prova social e a Plataforma. O filme no hero mostra
   o fluxo; a roda explica — e é a única parte da página com esse trabalho.
   É também o único ponto onde nomear RPA, IDP, VLM, LLM e RAG não quebra o
   registro executivo que `cogni-marca` exige de site: o título da seção
   promete mecânica; o resto da página promete resultado.

   Simetria é o ponto da composição, não um efeito colateral: cabeçalho
   centrado, roda no meio, dois blocos de cada lado e o quinto embaixo. A
   versão anterior punha o desenho à esquerda e uma lista à direita, e lia
   como diagrama-com-bullets em vez de uma coisa só.

   Repare no que NÃO é escolha estética: a roda é SVG e os textos são HTML.
   Num SVG único o texto encolhe junto com o desenho e num telefone de 390px
   chega a 4px. Separados, a roda escala pelo viewBox e o texto reflui como
   texto. O que amarra os dois é a cor — o quadradinho de cada bloco repete a
   cor do seu setor, e as duas listas de cor (esta e a de
   `scripts/make-radial.mjs`) precisam andar juntas. Não junte as metades de
   novo.
   ------------------------------------------------------------------------- */
.cg-wheel{margin:0 auto}
.cg-wheel-head{max-width:66ch;margin:0 auto clamp(30px,4vw,46px);text-align:center}
.cg-wheel-head .cg-eyebrow{justify-content:center}
.cg-wheel-head p:not(.cg-eyebrow){font-size:.95rem;line-height:1.7;color:var(--fg-soft)}
.cg-wheel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr);grid-template-areas:"s1 hub s2" "s5 hub s3" ". s4 .";gap:clamp(22px,3vw,34px) clamp(24px,3vw,48px);align-items:center}
.cg-wheel-hub{grid-area:hub;margin:0;width:100%}
.cg-wheel-hub svg{width:100%;height:auto;display:block}
/* Cruz de alinhamento: os dois blocos de cima encostam no topo da sua linha e
   os dois de baixo na base, então 01/02 alinham entre si e 05/03 também. Com
   tudo centrado, blocos de alturas diferentes ficavam em degrau. */
.cg-wheel-s1{grid-area:s1;text-align:right;align-self:start}
.cg-wheel-s2{grid-area:s2;align-self:start}
.cg-wheel-s3{grid-area:s3;align-self:end}
.cg-wheel-s4{grid-area:s4;text-align:center;max-width:48ch;margin:0 auto}
.cg-wheel-s5{grid-area:s5;text-align:right;align-self:end}
.cg-wheel-step h4{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);margin-bottom:9px}
/* O quadradinho é o que amarra o bloco ao setor. Tinha de ser um quadrado de
   cor e não o título colorido: #18C5C5 como texto sobre branco dá 1,9:1 e não
   passa em tamanho nenhum. */
.cg-wheel-step h4::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--c);flex:none}
.cg-wheel-s1 h4,.cg-wheel-s5 h4{flex-direction:row-reverse}
.cg-wheel-s4 h4{justify-content:center}
.cg-wheel-step p{font-size:.88rem;line-height:1.6;color:var(--fg-soft)}
.cg-wheel-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cg-wheel-s1 .cg-wheel-chips,.cg-wheel-s5 .cg-wheel-chips{justify-content:flex-end}
.cg-wheel-s4 .cg-wheel-chips{justify-content:center}
.cg-wheel-chips span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--teal-ink);border:1px solid rgba(24,197,197,.45);border-radius:var(--r1);padding:3px 8px}


/* --- como implantamos (frente 7) -------------------------------------------
   Antes: três cards brancos idênticos sobre o cinza, empilhados numa fileira
   de 3 colunas — a MESMA forma da fileira de sintomas da seção "Para quem é",
   duas seções acima, só que sem ícone, sem cor e com uma frase por card. O
   defeito não era o conteúdo: era não haver nenhuma diferença de escala
   dentro da seção, então nada puxava o olho e a seção lia como um rodapé.

   O redesenho tira a moldura e devolve hierarquia por escala e por posição:

   - O numeral do passo vira tipografia de display (mono, ~2.9rem contra
     1.2rem do título). É o único elemento grande da seção e é o que diz
     "isto é uma sequência" sem precisar de seta.
   - Os cards viram linhas separadas por fio. Card sobre cinza é uma moldura
     que não separa nada — as três etapas não são itens paralelos, são um
     percurso, e fio horizontal é como um percurso se escreve.
   - O cabeçalho sai para uma coluna própria. Em 1320px de wrap o bloco de
     título ocupava 760px e os outros ~500 ficavam vazios; agora é a coluna
     que segura a ressalva de discovery e a saída para o contato.
   - Teal aparece UMA vez, no numeral do passo 03: é o passo que o título da
     seção promete ("...ao piloto"). Nos outros dois o numeral é ink a 15%,
     que é peso de estrutura, não de destaque.

   Por que não um trilho com selo numerado e fio vertical, que seria o
   caminho óbvio: o visor de casos, na seção imediatamente acima, já é
   exatamente isso (`.cg-step-seal` + conector). Repetir ali ao lado trocaria
   uma seção sem forma por uma seção com a forma da vizinha. */
.cg-impl{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,5vw,80px);align-items:start}
.cg-impl-note{margin-top:26px;border-left:2px solid var(--teal-ink);padding-left:16px;font-size:.9rem;line-height:1.6;color:var(--fg-soft)}
.cg-impl-cta{margin-top:24px;font-size:.9rem;font-weight:650}
.cg-impl-steps{list-style:none;display:grid}
.cg-impl-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.4vw,34px);align-items:start;padding:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--line)}
.cg-impl-step:first-child{border-top:0;padding-top:0}
.cg-impl-step:last-child{padding-bottom:0}
/* `min-width` fixa a goteira: sem ela "01" e "03" têm larguras diferentes de
   render e os três títulos começam em x diferentes. tabular-nums resolve o
   avanço do glifo, não a largura da coluna do grid. */
.cg-impl-n{min-width:clamp(46px,4.6vw,72px);font-family:var(--mono);font-size:clamp(2rem,3.4vw,2.9rem);line-height:.78;letter-spacing:-.04em;color:rgba(19,41,61,.19);font-variant-numeric:tabular-nums}
.cg-impl-step:last-child .cg-impl-n{color:var(--teal-ink)}
.cg-impl-t{font-size:clamp(1.05rem,1.5vw,1.22rem);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.cg-impl-d{margin-top:9px;font-size:.92rem;line-height:1.65;color:var(--fg-soft);max-width:56ch}

/* --- quem somos: missão + valores (frente 8) --------------------------------
   HISTÓRICO: o "campo em branco" original (ago/2026) era a missão+valores em
   max-width:820px dentro de 1320px, deixando 500px brancos à direita.
   Corrigido com grid 2 colunas: missão à esquerda, 3 valores à direita.

   2026-08-30 — regressão: na variante compacta da landing (2026-08-29,
   "quem somos na landing: fundadores + frase síntese") os 3 valores saíram
   e foram para sobre.html, mas o grid 1.02fr/0.98fr ficou — com um único
   filho, a segunda coluna virou um retângulo branco de ~640px exatamente
   acima do card do Rian (segunda coluna da fileira de fundadores). É o
   "grande vazio branco em cima do Rian" reportado. Correção: topo vira bloco
   único (não grid); a missão é declaração curta e não precisa de coluna
   lateral vazia para respirar. O grid duplo permanece em sobre.html, onde
   há dois filhos. Sem max-width restritivo. */
.cg-time-top{display:block;max-width:none}
.cg-values{list-style:none;display:grid}
.cg-value{padding:clamp(16px,1.8vw,20px) 0;border-top:1px solid var(--line)}
.cg-value:first-child{border-top:0;padding-top:0}
.cg-value:last-child{padding-bottom:0}
.cg-value-k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:7px}
.cg-value h3{font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin-bottom:6px}
.cg-value p{font-size:.9rem;line-height:1.62;color:var(--fg-soft)}
/* A nota do time e o link para a história dividiam duas linhas soltas no fim
   da seção — a segunda com um link de 150px sozinho numa faixa de 1320. Uma
   linha só, nota à esquerda e link à direita. */
.cg-time-foot{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;border:1px solid var(--line);border-left:2px solid var(--teal-ink);border-radius:0 var(--r2) var(--r2) 0;background:var(--bg-alt);padding:14px 18px}
.cg-time-foot p{font-size:.9rem;line-height:1.6;color:var(--fg-soft);max-width:78ch}
.cg-time-foot a{font-weight:650;font-size:.9rem;white-space:nowrap}


/* --- responsivo ----------------------------------------------------------- */
@media(max-width:1080px){
  .cg-r-hero,.cg-quem-head{grid-template-columns:1fr;overflow:hidden}
  #cg-top,.cg-r-hero{min-height:auto}
  .cg-quem-split{grid-template-columns:1fr;gap:24px}
  /* Empilhado, o gap de 8px do cabeçalho de "Para quem é" separava h2 e lede
     por menos que o entrelinhas do próprio lede — os dois liam como um bloco
     só. Lado a lado esse gap é o espaço entre eyebrow e h2, e 8px ali está
     certo; é só a versão empilhada que precisa de respiro. */
  .cg-quem-head{row-gap:20px}
  /* Os quatro sintomas em fileira única precisam de ~300px por card para o
     título não quebrar em palavra solta. Abaixo de 1080 a fileira vira 2x2 —
     o mesmo arranjo que a seção tinha antes do redesenho, agora só como
     degrau intermediário, não como layout de desktop. */
  .cg-fit-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cg-fit-cards.cg-fit-cards-stack{grid-template-columns:1fr}
  .cg-r-hero>*{min-width:0}
  .cg-hero-media{margin:0 auto}
  /* O visor não precisa mais de override aqui: a fileira é `1fr` por etapa e
     encolhe junto com o container. Saíram com o redesenho de 2026-08-28 as
     regras que empilhavam o painel de 306px e a sombra que indicava rolagem
     horizontal no palco — não há mais palco nem rolagem. A virada de fileira
     para lista vertical está em max-width:900px, abaixo. */
   /* Abaixo daqui as colunas laterais caem para menos de ~30ch e os blocos
      começam a quebrar em palavras soltas. A roda vai para cima, centrada, e os
      cinco blocos viram duas colunas alinhadas à esquerda — alinhar à direita só
      faz sentido enquanto o bloco aponta para a roda ao lado. */
  .cg-wheel-grid{grid-template-columns:1fr 1fr;grid-template-areas:none}
   /* `grid-area:auto` antes de tudo: com as áreas nomeadas desligadas, um
      `grid-area:hub` que sobra aponta para uma linha que não existe mais e o
      item colapsa para largura zero. Vale para a roda e para os cinco blocos. */
  .cg-wheel-hub{grid-area:auto;grid-column:1/-1;max-width:440px;margin:0 auto}
  .cg-wheel-step{grid-area:auto;text-align:left!important;max-width:none!important;margin:0!important}
  .cg-wheel-s1 h4,.cg-wheel-s5 h4{flex-direction:row}
  .cg-wheel-s4 h4{justify-content:flex-start}
  .cg-wheel-s1 .cg-wheel-chips,.cg-wheel-s4 .cg-wheel-chips,.cg-wheel-s5 .cg-wheel-chips{justify-content:flex-start}
  /* As duas colunas duplas novas (frentes 7 e 8) caem no mesmo ponto que o
     resto: abaixo daqui a coluna da direita fica com menos de ~44ch e as
     frases quebram em palavra solta. Empilhadas, o cabeçalho continua sendo
     o primeiro a ser lido — que é a ordem certa nas duas seções. */
  .cg-impl,.cg-time-top{grid-template-columns:1fr}
  .cg-impl-step:first-child,.cg-value:first-child{border-top:1px solid var(--line);padding-top:clamp(20px,2.6vw,30px)}
}
@media(max-width:940px){.cg-navlinks{display:none!important}}
@media(max-width:620px){
  .cg-fit-cards{grid-template-columns:1fr}
  .cg-h1{font-size:2.1rem}
  .cg-cta-row{grid-template-columns:1fr;display:grid}
  .cg-r-hero p{max-width:100%}
  /* A marquee de áreas do hero (.cg-areas-track) para de ANIMAR por CSS no
     telefone: um transform rodando sobre um overflow:auto moveria o trilho em
     dois eixos (o salto de -25% destoaria do dedo do usuário) e toque não tem
     :hover para pausar nele. A animação CSS sai — a janela vira overflow:auto,
     arrastável — e o auto-scroll passa para o relógio de rAF em index.html
     (initAreasMobile), que empurra scrollLeft: um eixo só, que o touchstart
     pausa e deixa o arraste nativo tomar conta, retomando no touchend. Sem o
     driver a faixa ficaria parada e cortada (5222px em 350px). */
  .cg-areas-win{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
  .cg-areas-win::-webkit-scrollbar{display:none}
  .cg-areas-win:active{cursor:grabbing}
  .cg-areas-track{animation:none;transform:none}
  /* A roda em coluna única. Regra que morava num segundo bloco 620px separado;
     os dois foram fundidos — mesma condição, uma lista de regras só. */
  .cg-wheel-grid{grid-template-columns:1fr}
}
/* --- resultados teaser: entra → sai (details) ------------------------------
   Correção site-cogni: o cartão de texto ("De dias para minutos…") permanece
   como frase do que fizemos; clicar nele NÃO navega para resultados.html,
   mas expande o resumo entra → sai no próprio cartão (HTML <details>).
   É o mesmo conteúdo de antes, mas como revelação inline. */
.cg-result-teaser{display:block;text-decoration:none}
.cg-result-teaser summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px}
.cg-result-teaser summary::-webkit-details-marker{display:none}
.cg-result-teaser summary::after{content:"▾";margin-left:auto;color:var(--fg-faint);font-size:.8rem;transition:transform .18s}
.cg-result-teaser[open] summary::after{transform:rotate(180deg)}
.cg-result-teaser[open]{border-color:var(--teal-ink);box-shadow:var(--sh2)}
.cg-result-io{display:grid;grid-template-columns:1fr auto 1fr;gap:12px 14px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.cg-result-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);display:block;margin-bottom:5px}
.cg-result-arrow{width:34px;height:34px;border-radius:var(--r2);background:var(--bg-alt);border:1px solid var(--line);color:var(--teal-ink);display:grid;place-items:center;align-self:center;flex:none}
.cg-result-io p{font-size:.88rem;line-height:1.55;color:var(--fg-soft)}
.cg-result-io p strong{color:var(--fg);font-weight:650}
@media(max-width:620px){.cg-result-io{grid-template-columns:1fr;gap:8px}.cg-result-arrow{transform:rotate(90deg);justify-self:start}}

/* --- como implantamos: ícones nos 3 passos + paleta livre -------------------
   Pedido da rodada site-cogni: cada passo ganha ícone próprio e a regra
   "só o 03 é teal" sai — os três numerals passam a teal-ink e o ícone
   acompanha. A política 70/20/10 fica suspensa nesta branch por decisão do
   founder ("tomar mais independência" na cor). */
/* O MARCADOR DO PASSO — número e ícone viraram uma coisa só (2026-08-31,
   segunda passada). Eram três marcas competindo pela mesma linha: o número
   grande na coluna da esquerda, o ícone solto na coluna do texto e o título.
   Centrar o ícone na vertical (primeira tentativa) só piorou: ele desceu para
   o meio do bloco e passou a ler como "número, e embaixo o ícone" — que foi
   exatamente como o Caio descreveu o defeito.

   Agora os dois ocupam a MESMA coluna e a MESMA linha: "01 ⟡". O número diz
   onde você está na sequência, o ícone diz do que o passo trata, e juntos
   formam um marcador só — a coluna da esquerda volta a ter um habitante.

   A altura do marcador é a caixa de linha do título (o mesmo clamp, o mesmo
   1.25 de entrelinha) e o conteúdo é centrado nela. É isso que faz o par
   sentar opticamente na linha do título em vez de flutuar: o número tem 46px
   e transborda essa caixa igualmente para cima e para baixo, que é o
   comportamento certo para um algarismo de destaque. Amarrado ao clamp do
   título, o alinhamento sobrevive a qualquer largura de tela. */
.cg-impl-mark{display:flex;align-items:center;gap:14px;height:calc(clamp(1.05rem,1.5vw,1.22rem)*1.25)}
.cg-impl-icon{width:30px;height:30px;flex:none;color:var(--teal-ink)}
.cg-impl-n{color:var(--teal-ink)!important}

/* --- quem somos na landing: fundadores + frase síntese ----------------------
   A landing volta a mostrar quem constrói, sem repetir a página Sobre inteira:
   missão canônica à esquerda, síntese de valores em uma frase à direita, e
   abaixo a dupla de fundadores compacta. O CTA leva para sobre.html onde
   missão/valores/história estão por extenso. */
.cg-founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.cg-founder-mini{margin:0;display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:start;padding:20px;border:1px solid var(--line);border-radius:var(--r3);background:var(--bg)}
.cg-founder-mini img{width:132px;height:146px;border-radius:var(--r2);object-fit:cover;border:1px solid var(--line)}
/* Wrapper de recorte para fotos com zoom (transform:scale) — o scale é
   aplicado na img, não no wrapper, para não vazar a foto por cima do
   texto ao lado; o wrapper herda a mesma caixa (largura/altura/raio/borda)
   que a regra acima dá às fotos sem zoom. */
.cg-founder-photo-zoom{display:block;width:132px;height:146px;border-radius:var(--r2);overflow:hidden;border:1px solid var(--line)}
.cg-founder-photo-zoom img{width:100%;height:100%;border:0;border-radius:0}
.cg-founder-mini strong{display:flex;align-items:center;flex-wrap:wrap;gap:0;font-size:1.06rem;margin-bottom:10px}
.cg-founder-tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);border:1px solid rgba(15,143,143,.28);background:rgba(24,197,197,.07);border-radius:var(--r1);padding:3px 7px;margin-right:8px;line-height:1;white-space:nowrap}
.cg-founder-mini ul{list-style:none;display:grid;gap:8px}
.cg-founder-mini li{display:flex;gap:8px;font-size:.84rem;line-height:1.5;color:var(--fg-soft)}
.cg-founder-mini li i{width:5px;height:5px;border-radius:50%;background:var(--teal-ink);flex:0 0 auto;margin-top:7px}
@media(max-width:720px){.cg-founders{grid-template-columns:1fr}.cg-founder-mini{grid-template-columns:96px 1fr}.cg-founder-mini img{width:96px;height:108px}.cg-founder-photo-zoom{width:96px;height:108px}}

@media(prefers-reduced-motion:reduce){
  /* A regra geral (zerar duração de animações) vive em shared.css — ela não
     serve para o trilho: zerar a duração não a cancela, leva ao último quadro
     — o trilho pousaria deslocado em -25%, cortando o primeiro nome pela
     metade. Aqui ele precisa de animation:none e do transform de volta ao
     zero. Com animação parada o trilho de 5222px ficaria cortado, então
     vira arrastável também neste modo. */
  .cg-areas-win{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  .cg-areas-win::-webkit-scrollbar{display:none}
  .cg-areas-track{animation:none;transform:none}
}