@charset "UTF-8";

/* ═══════════════════════════════════════════════
   PowerComm — Case Ocyan
   Estética de referência: clay.com/customers
   Cor chapada · grade visível · folha sobreposta
   Cor por papel: laranja = plataforma · cor do cliente = história
   ═══════════════════════════════════════════════ */

:root {
  /* Voz da plataforma — PowerComm */
  --pc-orange: #FE812D;
  --pc-deep: #C52B26;

  /* Voz do cliente — Ocyan */
  --client-hero: #0E86B8;          /* chapado do hero */
  --client-tint: #BEE4F5;          /* palco dos objetos 3D e tints claros */
  --client-quote: #4E9FC4;         /* card de citação, tom médio */
  --client-accent: #009CDE;
  --client-brand: #C4D600;
  --client-deep: #015E82;

  /* Neutros */
  --paper: #FFFFFF;
  /* Superfícies neutras em cinza puro. Os cremes antigos (#F2F1EC /
     #E9E7E0 / #E2DFD7) tinham tinta amarela e brigavam com os textos,
     que já eram cinzas puros. Agora superfície e texto vêm da mesma
     escala. O creme #EEDDC3 segue existindo como cor de marca, não
     como superfície. */
  --bone: #F4F4F4;
  --bone-2: #E0E0E0;
  /* Neutros extraídos do site da PowerComm — cinzas puros, sem tinta azul.
     A tinta fria dos antigos (#52565E, #8C919A) achatava o contraste
     percebido entre título e corpo. */
  --ink: #1A1A1A;
  --ink-soft: #525252;
  --ink-faint: #8C8C8C;
  --rule: #E0E0E0;

  /* Margem da pílula do header — a mesma nos três lados. Em telefone cai
     para 16px: 24px de cada lado tiram 48px de uma tela de 360, e o botão de
     contato já sai de cena nessa largura.

     Mora aqui e não em home.css porque desde 28/08 as duas famílias de
     página usam a MESMA barra descolada — enquanto o token era da home, o
     case não tinha como ler o valor. */
  --folga-header: 1.5rem;

  --line-hero: rgba(255, 255, 255, .26);

  /* Hero: cor exata do fundo do video-hero.mp4, amostrada do arquivo.
     Não trocar por --client-tint (#BEE4F5) — é perto, mas a diferença
     aparece como um retângulo no meio do palco. */
  /* Mediana das amostras do vídeo, não a cor de um quadro: o fundo do
     arquivo do Ocyan varia de #B9EBFE a #AFDFF2 ao longo do loop, então
     nenhum valor casa o tempo inteiro. A mediana é a que descasa menos.
     E amostrada na FAIXA DE BORDA do arquivo, não no pixel do canto
     (14/08): o canto carrega a vinheta da compressão e sai mais escuro
     que o resto do fundo — foi assim que os quatro palcos ficaram um
     tom abaixo do vídeo e a emenda apareceu como um retângulo. A borda é
     o que encosta no palco, então é ela que tem de casar. */
  --client-stage: #B3E0F5;
  /* Símbolo vertical (87% da altura do arquivo): a régua divide por essa
     fração. Ver a tabela em .objeto. */
  --objeto-escala: 105%;
  /* Camada de trás no lime da Ocyan. Passou por laranja PowerComm
     (pesava e puxava o olho), azul tom sobre tom (sumia contra o palco)
     e cinza (neutro demais). O lime é a segunda cor da marca do cliente
     e amarra com o próprio objeto em resina. */
  --client-layer: #C4D600;
  /* Highlights da manchete em versões que seguram texto preto com
     contraste seguro — o cyan chapado (#009CDE) reprova. */
  --hl-1: #DCEC6B;
  --hl-2: #BEE4F5;

  /* Shell único da página: header, hero, corpo e fechamento partilham a
     mesma largura e a mesma margem esquerda. Antes eram três (1150 no
     header/hero, ~1020 no corpo, 1600 no fechamento), cada uma
     centralizada na própria medida — então nenhuma borda vertical se
     alinhava ao longo do scroll.
     1150 e não mais largo: no hero, com shell largo sobrava espaço entre
     a coluna de texto e o palco e os dois liam como blocos sem relação. */
  --shell-page: 1160px;

  --sans: "Instrument Serif", "Times New Roman", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Curva de UI: reação a clique/hover, onde partir rápido é qualidade. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Curva de cena: entradas e revelações. Acelera e desacelera em vez de
     arrancar seco — o --ease sai de 0 quase instantâneo e freia de
     repente, o que numa animação longa lê como corte, não como
     movimento. Toda entrada da página usa esta. */
  --ease-cena: cubic-bezier(.33, .06, .21, 1);
  /* Curva de saída: o inverso da de cena. Sai devagar e acelera para
     fora — quem entra desacelera para assentar, quem sai ganha
     velocidade. Usar a curva de entrada na saída faz o elemento frear
     justo quando devia estar sumindo, e o movimento lê como corte. */
  --ease-sai: cubic-bezier(.5, 0, .78, .3);
  --pad: clamp(1rem, 3vw, 2.5rem);
}

/* ═══════════ Voz do cliente — V.tal ═══════════
   Novo case = novos client/* e nada mais (DESIGN.md). Os tokens do :root
   são os da Ocyan; cada case seguinte os redeclara aqui, escopado pelo
   data-case do <body>.

   A V.tal quebrou uma premissa do sistema: ela é BICROMÁTICA (amarelo +
   grafite), enquanto a Ocyan tinha três cores de marca. Não existe um
   amarelo que segure texto — #FFD919 dá 1,40:1 sobre branco. Então todo
   papel de TINTA (numeral, link, acento) cai no grafite #2E2D39, e o
   amarelo fica restrito a SUPERFÍCIE (palco, marca-texto). Os três
   tokens de tinta da Ocyan colapsam em variações de um grafite só.

   Amarelo amostrado do CSS de vtal.com (19 ocorrências de #FFD919, todas
   em linear-gradient chapado). O #F1FF00 do render original veio de uma
   imagem de busca, não da marca — arquivado em playground/material/vtal/. */
[data-case="vtal"] {
  /* Tinta — três degraus do mesmo grafite. Precisam ser degraus mesmo:
     o link do rail usa --client-deep e o hover usa --client-accent, então cor
     igual nos dois mataria o hover (só sobraria o sublinhado). */
  --client-hero: #2E2D39;          /* chapado do hero, .fig-value */
  --client-deep: #2E2D39;          /* links do rail, citação escura */
  --client-accent: #56546B;          /* numerais, ícone de impacto, hover de link */
  --client-quote: #6B6982;         /* citação de tom médio — 5,1:1 com texto branco */

  /* Superfície — o amarelo só aparece aqui. */
  --client-brand: #FFD919;
  --client-tint: #FFF3B0;
  --hl-1: #FFD919;
  /* Os dois destaques da manchete no mesmo amarelo. O Ocyan usa duas
     cores (lime/cyan) porque tem duas cores de marca; a V.tal só tem
     uma, e o cinza que ocupava o segundo slot lia como estado
     desabilitado ao lado do amarelo, não como par. O ritmo em escada
     não se perde: ele vem dos delays de animação (.8s e .95s), que
     traçam um highlight depois do outro. */
  --hl-2: #FFD919;

  /* Âmbar e não o #FFD919 da marca. O objeto do hero traz DOIS elementos
     de marca — o V branco translúcido (luminância 0,95) e o ponto amarelo
     #FFD919 (0,70) — e o logo é ativo fixo: quem se acomoda é o fundo.
     Com o palco no próprio #FFD919 o ponto desaparecia (contraste 1,0:1).
     Amarelo sobre amarelo só ganha contraste descendo a luminância, e a
     escala é curta: #E6B400 dá 1,4:1, #C99700 dá 1,9:1, #B98600 dá 2,3:1
     e só a partir de #8A6600 (3,9:1) passa de 3 — mas aí já lê como
     oliva, não como a marca. #C99700 é o ponto onde ainda é amarelo e o
     ponto do logo já se separa.
     Testado antes: palco em #2E2D39 resolve com folga (ponto a 9,7:1,
     V a 14:1), mas o hero fica escuro e perde o amarelo na frente.
     Quando o vídeo do hero existir, reamostrar do arquivo. */
  --client-stage: #F9BD1C;   /* MEDIANA do vídeo, não da imagem (#FEC220):
                          o modelo e a compressão deslocam o amarelo.
                          Era #FABE1C, de uma amostragem anterior à
                          existência do arquivo atual — remedido em 14/08 */
  /* Símbolo vertical, e o menor dos quatro dentro do arquivo (54% da
     altura): por isso é o único que passa de 100%. Ver tabela em .objeto */
  --objeto-escala: 144%;
  /* Grafite atrás: sobre um palco amarelo o laranja PowerComm viraria um
     terceiro tom quente e as formas se fundiriam. O grafite recorta. */
  --client-layer: #2E2D39;
}

/* ═══════════ Voz do cliente — MRS ═══════════
   Amostrados do CSS de mrs.com.br: #1B3255 e #F9CC36 aparecem 21 vezes
   cada, #00498E dez vezes. São esses três que governam o case.

   O amarelo do LOGO é outro — puro (#FFF200) e inutilizável: 1,1:1 sobre
   branco, e como superfície ele vibra ao lado do azul. O do site (#F9CC36)
   é âmbar, tem a mesma luminância do azul-claro do par de highlights
   (0,636 e 0,637) e por isso os dois destaques da manchete pesam igual.

   Ao contrário da V.tal, a MRS é TRICROMÁTICA como a Ocyan: dois azuis e
   um amarelo. Então a estrutura do :root se mantém inteira — três degraus
   de azul para tinta (12,8:1 · 9,1:1 · 5,3:1 sobre branco) e o amarelo
   restrito a superfície, porque amarelo não segura texto em nenhum tom. */
[data-case="mrs"] {
  /* Tinta — três degraus de azul, todos verificados com texto branco. */
  --client-hero: #1B3255;          /* chapado do hero, .fig-value */
  --client-deep: #1B3255;          /* links do rail, citação escura — 12,8:1 */
  --client-accent: #00498E;          /* numerais, ícone de impacto, hover — 9,1:1 */
  --client-quote: #3A6EA5;         /* citação de tom médio — 5,3:1 */

  /* Superfície — o amarelo só aparece aqui. */
  --client-brand: #F9CC36;
  --client-tint: #E7EFF8;
  /* Os dois highlights da manchete voltam a ser um par de cores, como no
     Ocyan: amarelo e azul-claro, ambos 11,3:1 com a tinta. */
  --hl-1: #F9CC36;
  --hl-2: #BBD4EE;

  /* Amostrado da MEDIANA de doze quadros do video-hero.mp4, pulando o
     quadro 0. A imagem que gerou o vídeo era #BBD4EE e ele saiu #B5D0E8
     — o mesmo deslocamento que a V.tal sofreu (#FEC220 → #FABE1C). O
     quadro 0 (#B9D3EB) é o mais divergente de todos, como o kb avisa.
     Reexportou o vídeo, amostra de novo: o registro do material em
     resina acetinada mudou este valor de #B7D2E9 para #B5D0E8.
     A lógica aqui é a do Ocyan e não a da V.tal — objeto colorido sobre
     fundo claro, porque o símbolo da MRS é azul com letras amarelas e
     sumiria num palco escuro. */
  --client-stage: #BDD7F0;
  /* MEDIANA do vídeo (14/08). O valor anterior, #B6D0E9, vinha da imagem
     e ficava 3 níveis por canal abaixo do arquivo que roda — o bastante
     para o vídeo aparecer como um retângulo mais claro dentro do palco. */
  /* Único símbolo HORIZONTAL dos quatro (72% da largura do arquivo), então
     a régua mede pela largura. Ver tabela em .objeto */
  --objeto-escala: 105%;
  /* Camada de trás no amarelo da marca, como o lime da Ocyan: é a segunda
     cor do cliente e amarra com as letras do próprio objeto. O laranja
     PowerComm foi descartado no Ocyan por pesar e puxar o olho. */
  --client-layer: #F9CC36;
}

/* Os 126% do padrão foram medidos no asset do Ocyan, onde o objeto é um
   par de anéis que ocupa quase todo o quadro. O símbolo da MRS é largo:
   ele preenche 75% da largura do frame e termina numa PONTA, então a
   126% os triângulos encostavam nas bordas do palco e a ponta ficava a
   poucos pixels da borda direita.
   Reduzir aqui é seguro justamente porque o palco tem a cor exata do
   fundo do vídeo: o que aparece em volta quando o vídeo encolhe não lê
   como moldura, lê como continuação do fundo. É o mesmo mecanismo que
   faz a borda do retângulo sumir — só que usado para ganhar respiro. */
/* 96% e não os 126% do padrão. Os 126% foram medidos no asset do Ocyan,
   onde o objeto é um par de anéis que ocupa quase todo o quadro. O
   símbolo da MRS é largo e termina numa PONTA: a 126% a ponta do terceiro
   triângulo encostava na borda do palco, e ponta cortada lê como erro.
   Reduzir é seguro porque o palco tem a cor exata do fundo do vídeo — o
   que aparece em volta não lê como moldura, lê como continuação do fundo. */
/* A escala da MRS agora sai da régua (--objeto-escala), não de um valor
   ajustado no olho. O problema que este 96% resolvia — a ponta do terceiro
   triângulo encostando na borda — continua coberto: a régua mede a MRS
   pela LARGURA, que é a dimensão dominante dela. */

/* ═══════════ Voz do cliente — Tenda ═══════════
   Amostrados do CSS de tenda.com: #003E62 aparece 12 vezes, #E20721 é o
   vermelho da marca.

   A Tenda traz um conflito que os outros três não tinham: o vermelho
   dela encosta no laranja da PowerComm, e o DESIGN.md lista "um segundo
   laranja" como drift. A saída foi inverter quem conduz — o AZUL carrega
   o case (tinta, links, citações escuras) e o vermelho aparece pontual,
   onde a marca precisa se afirmar: numerais, camada do hero e a citação
   de destaque. Assim o vermelho nunca divide superfície com o laranja do
   botão de contato, que continua sendo a única fala da PowerComm em cor
   cheia. */
[data-case="tenda"] {
  /* Tinta — dois azuis e o vermelho, todos verificados sobre branco. */
  --client-hero: #003E62;          /* chapado do hero, .fig-value */
  --client-deep: #003E62;          /* links do rail, citação escura — 11,2:1 */
  --client-accent: #E20721;          /* numerais, ícone de impacto, hover — 4,9:1 */
  --client-quote: #2F6E96;         /* citação de tom médio — 5,5:1 */

  /* Superfície */
  --client-brand: #E20721;
  --client-tint: #E7EFF5;
  /* Os dois destaques da manchete: rosa da marca e azul do site, com
     luminâncias próximas (0,72 e 0,66) para pesarem igual na escada. */
  --hl-1: #FAD4D9;
  --hl-2: #BFD8E8;

  --objeto-escala: 105%;  /* símbolo vertical, 87% da altura do arquivo,
                             igual ao Ocyan. Ver tabela em .objeto */
  --client-stage: #E20721;
  /* Medido NO PRINT DA PÁGINA, não no arquivo — ver a nota geral em
     .objeto. O arquivo é #D50018; o navegador exibe #ED1A17. */
  --client-layer: #003E62;
}

/* Marca-texto do corpo no rosa da marca. O :not(.hl) é obrigatório: sem
   ele esta regra escopada (0,1,1) vence de .hl-1/.hl-2 (0,1,0) e
   pinta também os destaques do hero, matando o par. */
[data-case="tenda"] mark:not(.hl) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='300' height='24' rx='12' ry='12' fill='%23FAD4D9'/%3E%3C/svg%3E");
}

/* A terceira citação é onde o vermelho da marca entra em superfície
   cheia. A 4,9:1 com texto branco ele passa para o corpo de 24px da
   citação, que é texto grande — não replicar esse par em texto miúdo. */
[data-case="tenda"] .quote-lime,
[data-case="tenda"] .quote-lime .quote-mark { background: #E20721; }

/* Três cards no Desafio, mesma condição da V.tal e da MRS. */
[data-case="tenda"] .bloco > li:nth-child(1) { grid-column: 1; grid-row: 1; }
[data-case="tenda"] .bloco > li:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
[data-case="tenda"] .bloco > li:nth-child(3) { grid-column: 1; grid-row: 2; }
[data-case="tenda"] .bloco-par > li:nth-child(even) { transform: translateY(9rem); }

@media (max-width: 620px) {
  [data-case="tenda"] .bloco-par > li:nth-child(even) { transform: none; }
  [data-case="tenda"] .bloco > li:nth-child(1),
  [data-case="tenda"] .bloco > li:nth-child(2),
  [data-case="tenda"] .bloco > li:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Hero SEM bloco de impacto. A narrativa da Tenda não traz um único
   resultado quantificado — só porte de empresa — e inventar um número
   ali seria exatamente o que o DESIGN.md §7 proíbe. Sem o bloco, a
   coluna de texto fica só com a manchete, e sem esta regra ela sobe
   colada ao topo enquanto o palco ocupa a altura inteira ao lado. */
[data-case="tenda"] .hero-texto { justify-content: center; }

/* Marca-texto do corpo no amarelo do site. Mesma armadilha registrada na
   V.tal: o :not(.hl) é obrigatório, senão esta regra escopada (0,1,1)
   vence de .hl-1/.hl-2 (0,1,0) e pinta também os dois destaques
   do hero, matando o par. */
[data-case="mrs"] mark:not(.hl) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='300' height='24' rx='12' ry='12' fill='%23F9CC36'/%3E%3C/svg%3E");
}

/* Terceira citação: o #8FA800 do .quote-lime é o verde-oliva da Ocyan e
   não tem equivalente na MRS — o amarelo com texto branco dá 1,3:1. Ela
   vira o degrau de azul do meio, entre o --client-deep e o --client-quote. */
[data-case="mrs"] .quote-lime,
[data-case="mrs"] .quote-lime .quote-mark { background: #00498E; }

/* O Desafio da MRS tem TRÊS cards, mesma condição da V.tal: num grid de
   duas colunas a altura da primeira linha passa a ser ditada pelo card
   mais alto (aqui o 02, o da falta de métrica), e o 01 abre um vão morto
   embaixo. Com o 02 ocupando as duas linhas à direita, 01 e 03 empilham
   à esquerda e a distância entre eles vira o gap. */
[data-case="mrs"] .bloco > li:nth-child(1) { grid-column: 1; grid-row: 1; }
[data-case="mrs"] .bloco > li:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
[data-case="mrs"] .bloco > li:nth-child(3) { grid-column: 1; grid-row: 2; }

/* Escada alta pela mesma razão da V.tal: a revelação por
   IntersectionObserver só distingue o que está em ALTURAS diferentes, e
   os 2,5rem do .bloco-par somem dentro de um único gesto de rolagem. */
[data-case="mrs"] .bloco-par > li:nth-child(even) { transform: translateY(9rem); }

@media (max-width: 620px) {
  /* Em coluna única não há escada nem posicionamento explícito: os cards
     voltam a fluir na ordem do DOM e já entram um a um. */
  [data-case="mrs"] .bloco-par > li:nth-child(even) { transform: none; }
  [data-case="mrs"] .bloco > li:nth-child(1),
  [data-case="mrs"] .bloco > li:nth-child(2),
  [data-case="mrs"] .bloco > li:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Os dois lugares onde a cor do cliente está hardcoded e não lê token.
   Redeclarados por case em vez de refatorados: o case Ocyan está
   aprovado e mexer na geometria do marca-texto para tokenizá-lo (via
   mask-image) arriscaria uma regressão numa peça fechada. */
/* :not(.hl) é obrigatório. Escopar por case sobe a especificidade de
   (0,0,1) para (0,1,1), o que passa a vencer de .hl-1/.hl-2 (0,1,0)
   — e este data URI amarelo acabava pintando também os dois highlights
   do hero, matando o segundo destaque em cinza. O Ocyan nunca sofreu
   disso porque lá a regra é `mark` puro, que perde para as classes. */
[data-case="vtal"] mark:not(.hl) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='300' height='24' rx='12' ry='12' fill='%23FFD919'/%3E%3C/svg%3E");
}
/* O .quote-lime da Ocyan é um verde-oliva que segura texto branco. Não
   há equivalente amarelo na V.tal (amarelo + branco = 1,40:1), então a
   terceira citação também vem do grafite, um degrau acima do --client-deep. */
[data-case="vtal"] .quote-lime,
[data-case="vtal"] .quote-lime .quote-mark { background: #45435A; }

/* Sem teto em ch: a coluna do hero já é o limite (ver .hero), e um
   max-width menor que ela deixaria a manchete curta da V.tal com um vão
   morto por dentro. O palco não se mexe — ele está na coluna seguinte. */
[data-case="vtal"] .manchete { max-width: none; }

/* O Desafio da V.tal tem TRÊS cards; o do Ocyan tem dois. Num grid de
   duas colunas, três cards viram duas linhas, e a altura da primeira
   passa a ser ditada pelo card mais alto (o 02, que é bem mais longo que
   os outros). Resultado: o 01 é curto, e abria um vão morto embaixo dele
   até o 03 aparecer na linha de baixo.
   Aqui o 02 ocupa as duas linhas na coluna direita, então 01 e 03
   empilham direto na esquerda e a distância entre eles vira o gap, não a
   sobra de altura de outro card. */
[data-case="vtal"] .bloco > li:nth-child(1) { grid-column: 1; grid-row: 1; }
[data-case="vtal"] .bloco > li:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
[data-case="vtal"] .bloco > li:nth-child(3) { grid-column: 1; grid-row: 2; }

/* Entrada em ordem, comandada pelo SCROLL e não por cronômetro.
   Houve aqui um transition-delay escalonado (0 / .26s / .52s) que fazia
   os cards subirem em sequência — mas a sequência corria sozinha depois
   do primeiro gesto, e o que se queria era um card por gesto.
   A revelação por IntersectionObserver só distingue o que está em
   ALTURAS diferentes. A escada de 2,5rem do .bloco-par é curta demais
   para isso: 40px some dentro de um único gesto de rolagem, então os
   dois cards cruzavam a borda da tela praticamente juntos. Descendo o
   card do meio quase uma tela inteira, ele passa a entrar de verdade
   depois — e quem o traz é o leitor. */
[data-case="vtal"] .bloco-par > li:nth-child(even) { transform: translateY(9rem); }
/* Sem padding-bottom extra. O do .bloco-par (2,5rem) existe para reservar
   espaço quando o card deslocado ultrapassa o fim do grid — o que vale no
   Ocyan, onde os dois cards dividem uma linha. Aqui o 02 ocupa as duas
   linhas com align-items:start, então não estica e termina antes do 03:
   casar o padding com o translate de 9rem só abria um vão morto de 144px
   entre os cards e o parágrafo seguinte. */

@media (max-width: 620px) {
  /* Em coluna única não há escada: os cards já entram um a um. */
  [data-case="vtal"] .bloco-par > li:nth-child(even) { transform: none; }
}

@media (max-width: 620px) {
  /* Em coluna única o posicionamento explícito atrapalha: os cards
     precisam voltar a fluir na ordem do DOM. */
  [data-case="vtal"] .bloco > li:nth-child(1),
  [data-case="vtal"] .bloco > li:nth-child(2),
  [data-case="vtal"] .bloco > li:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Amarelo da marca, o mesmo do palco. A V.tal tem duas cores — amarelo e
   grafite — e a seta agora carrega a primeira em vez de ser mais um
   degrau de cinza (era #9A98A8).
   O contraste é baixo por definição (amarelo sobre branco = 1,40:1) e
   isso é aceito aqui: o ícone é decorativo, tem aria-hidden, e quem
   carrega a informação é o número. Não replicar em texto. */
[data-case="vtal"] .impacto-icone { color: #FABE1C; }


/* A V.tal não tem mais regra própria de escala (14/08): ela usava
   `height: 104%` porque o asset era quadrado (1440×1440) e, a 126% de
   largura, o overflow decepava o topo e a base do V. O arquivo atual é
   16:9 como os outros, e a medida voltou para a largura, via a régua
   --objeto-escala.

   Sem sombra, e isso segue valendo: houve um drop-shadow aqui enquanto o
   palco era #FFE87A — naquele amarelo claro o V branco (luminância 0,95)
   se dissolvia no fundo e a sombra devolvia a silhueta que o contraste de
   cor não dava. Com o palco saturado a necessidade sumiu, e a sombra
   passou a ser um elemento que o logo não tem: o render já traz o próprio
   sombreamento no relevo. Se um case futuro pedir palco claro, o recurso
   está registrado no DECISIONS.md. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* ss01 é detalhe de precisão da marca PowerComm, herdado do design system
   institucional — estava declarado lá e se perdeu na migração para o case.
   Ver DESIGN.md §3. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);     /* overscroll no topo acompanha o hero claro */
  font-feature-settings: "ss01";
}

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01";
  /* `clip` e não `hidden`: hidden faz do body um contêiner de scroll, e um
     contêiner de scroll no ancestral MATA `position: sticky` de todo mundo
     abaixo — era o que impedia a pilha de cards da home de grudar. `clip`
     corta o transbordo lateral igual, sem criar o contêiner. */
  overflow-x: clip;
}

/* toda cifra em números tabulares: dígitos de mesma largura não pulam
   durante a contagem nem desalinham entre itens de lista */
.impacto-num, .lista-marca, .bloco-num, .fig-value {
  font-feature-settings: "tnum", "ss01";
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--pc-orange); color: #fff; }

/* A serifada (--sans) é voz de destaque, não de estrutura: fica no hero,
   nos números de impacto e nas citações. Os títulos do corpo são sans —
   como no linear.app/now, onde a hierarquia vem de peso e espaço, não de
   troca de família. */
h1, .case-title, .impact-figure, .fig-value, .quote blockquote p {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.08;
  text-wrap: balance;
}
/* pretty e não balance: nos títulos de duas linhas o balance iguala o
   comprimento das linhas, encolhe a medida e quebra antes da largura real
   da coluna — o mesmo defeito já registrado nas citações (DESIGN.md). */
h2, h3 {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-wrap: pretty;
}

/* ═══════════ HEADER — pill flutuante ═══════════ */
/* DESCOLADA DO TOPO, com a mesma folga nos três lados (Thiago, 28/08).
   Ela já tinha sido pill flutuante, virou barra colada quando o hero ficou
   branco, e a home nasceu depois com a versão solta — as duas famílias de
   página ficaram com barras diferentes. Agora o padrão é um só, e é este.

   `top` e `padding-inline` andam juntos: a distância do topo e a das
   laterais são a mesma medida, senão a pílula flutua sem estar centrada na
   própria folga e o olho percebe como desalinho. */
.site-header {
  position: sticky;
  top: var(--folga-header);
  z-index: 100;
  padding-inline: var(--folga-header);
  transition: opacity .45s var(--ease-cena),
              transform .5s var(--ease-cena),
              filter .45s var(--ease-cena);
  will-change: transform, opacity;
  /* Desce de fora da tela na carga — é o primeiro elemento a assentar,
     antes da manchete, então a página se monta de cima para baixo. */
  animation: header-desce .8s var(--ease-cena) forwards;
}
@keyframes header-desce {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: none; }
}
/* Aplicada pelo JS quando a entrada termina. Enquanto a animação existe
   com fill-mode forwards, os valores dela têm precedência sobre qualquer
   declaração — inclusive sobre o estado de .is-hidden. O resultado é que
   a saída pulava direto para o fim em vez de transicionar. Desmontar a
   animação depois que ela cumpriu o papel devolve o controle à
   transition. */
.site-header.entrou {
  animation: none;
  opacity: 1;
  transform: none;
}
/* fora do hero, some — senão cobre o rail e o texto do documento.
   Recolhe para cima em vez de só apagar: o movimento diz "saí de cena",
   o fade sozinho parecia falha de renderização. */
.site-header.is-hidden {
  opacity: 0;
  /* -100% e não -140%: com o percurso maior a barra saía da área visível
     na primeira metade da transição e o resto do tempo era animação de
     algo que ninguém vê. Em -100% ela recolhe exatamente o suficiente. */
  /* -100% MAIS a folga: solta do topo, a barra que recolhe só a própria
     altura para com a folga ainda visível — uma faixa do vidro sobrando na
     borda da tela. */
  transform: translateY(calc(-100% - var(--folga-header)));
  /* Desfoque na saída: o movimento sozinho é fácil de perder quando o
     olho está no texto que sobe. O borrão diz "isto está saindo de cena"
     mesmo na visão periférica. */
  filter: blur(2px);
  pointer-events: none;
  animation: none;
  /* Sair é mais lento que voltar de propósito: a saída acontece enquanto
     o olho está em outro lugar e precisa de tempo para ser percebida; a
     volta é resposta a um gesto e tem que ser pronta.
     A opacidade tem delay e dura menos que o movimento — assim a barra
     é vista se movendo antes de desaparecer. Sem o delay ela apagava no
     meio do caminho e o recolhimento nunca chegava a ser visto. */
  /* --ease-cena e não --ease-sai: a curva de saída é um ease-in puro,
     que quase não move nos primeiros 40% do tempo e despeja o percurso
     no fim. Em elemento pequeno isso lê como hesitação, não como saída.
     A curva de cena parte com velocidade e o recolhimento fica direto. */
  transition: opacity .22s var(--ease-cena) .05s,
              transform .36s var(--ease-cena),
              filter .24s var(--ease-cena);
}
.header-pill {
  /* Alinhado ao shell da página: sem isso a barra
     ficava muito mais larga que qualquer conteúdo da página e as pontas
     sobravam para além do texto. */
  max-width: var(--shell-page);
  margin-inline: auto;
  /* Glass claro. Era escuro porque o hero anterior era um chapado cyan;
     sobre o hero branco o texto branco sumia. */
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  /* Raio nos quatro cantos e borda fechada: solta do topo, a pílula não
     encosta em nada, e o contorno aberto em cima que a versão colada usava
     deixaria a forma incompleta.
     Borda fina no lugar da sombra — a sombra pesava e destoava do resto da
     página, que não usa elevação em lugar nenhum. */
  border-radius: 12px;
  border: 1px solid var(--bone-2);
  /* Sombra dura: blur curto e opacidade baixa. A versão anterior tinha
     blur 24px, que virava um halo difuso e pesado — aqui ela só marca
     um degrau abaixo da borda, sem virar elevação. */
  box-shadow: 0 2px 3px rgba(26, 26, 26, .05);
  height: 64px;
  padding-inline: clamp(1.25rem, 2.6vw, 2rem);
  /* 3 colunas: a nav fica centrada na pill, independente da largura do logo */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.875rem, 2.5vw, 2.25rem);
  position: relative;
}
.brand { display: flex; align-items: center; }
.brand img { height: 21px; width: auto; display: block; }
/* logo preto: o header agora e claro */

.site-nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.site-nav a {
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  opacity: .7;
  transition: opacity .25s var(--ease);
}
.site-nav a:hover { opacity: 1; }

/* Único elemento de ação da página, e por isso o único que leva o laranja
   PowerComm em superfície cheia. A regra da cor como atribuição continua
   valendo: aqui quem fala é a PowerComm, e é uma ação de verdade — o
   formato de pill promete clique e o clique existe. */
.btn-contato {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 1rem;
  border-radius: 999px;
  background: var(--pc-orange);
  color: #fff;
  font-size: .875rem;
  /* 500 e não 600: sobre a superfície laranja cheia o texto já tem
     contraste de sobra, e o peso maior deixava o botão pesado. */
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.btn-contato:hover {
  background: #F06F13;
  transform: translateY(-1px);
}
.btn-contato:active { transform: translateY(0); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 32px; height: 32px;
  flex-direction: column; justify-content: center; gap: 6px;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); }

/* ═══════════ 1. HERO — manchete com highlight + objeto em palco ═══════════
   Substitui a grade Clay (06/08). Backup do hero anterior em
   playground/backup/. Mecanismos:
     - fundo claro, manchete grande em sans
     - highlight arredondado atrás de palavras, em duas cores
     - objeto grande num palco na cor do próprio vídeo               */
.hero {
  /* Mesma régua do .sheet e do .site-header (14/08): o padding lateral
     fica POR FORA do shell, não descontado dele. Os outros containers
     resolvem isso com dois elementos — pai com `padding-inline: --pad`,
     filho com `max-width: --shell-page` — e o hero, que é um elemento só,
     precisa somar o padding ao teto para chegar no mesmo lugar.
     Sem isso o conteúdo do hero media --shell-page menos 2×--pad e a
     coluna de texto nascia --pad à direita da borda do rail, logo abaixo.
     Corrigir alargando a pílula do header foi tentado e é o lado errado:
     desalinha os dois contra a folha em vez de um contra o outro. */
  max-width: calc(var(--shell-page) + var(--pad) * 2);
  margin-inline: auto;
  /* Ritmo vertical do hero, em múltiplos de 8: 80px acima e 48px abaixo.
     O de baixo ainda soma com o padding do .sheet-inner (48px), então o
     vão real fica 80 acima e 96 abaixo — a leitura desce, que é o que se
     quer, sem o degrau de 64 contra 128 que havia antes. */
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad) clamp(2rem, 4vw, 3rem);
  /* Grid de colunas declaradas em porcentagem, e não flex elástico.
     No flex (como era até 07/08) o texto abraçava o próprio conteúdo e o
     palco tomava o resto — então quem definia a largura do palco era o
     COMPRIMENTO DA MANCHETE. Consequência: cada case ganhava um palco de
     tamanho diferente, e quem abrisse dois cases em sequência via o
     objeto do hero mudar de escala. Isso lê como peça instável.
     Agora o palco ocupa a mesma fração do shell em todo case, e é o
     texto que se acomoda dentro da coluna dele.
     As proporções são as que o Ocyan já tinha (42 / 10 / 48), para a
     peça aprovada não mudar — os outros cases é que se alinham a ela.
     O gap em % e não em rem pelo mesmo motivo: em rem ele deixaria de
     acompanhar a coluna e a proporção voltaria a variar com a viewport. */
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 10%;
  /* stretch faz o palco ocupar a altura da seção enquanto o texto fica
     centrado nela — é essa diferença que dá a hierarquia "arte domina,
     texto apoia". */
  align-items: stretch;
  /* A altura do box define o gap interno do texto: com space-between,
     o espaço entre manchete e impacto é o que sobra aqui. Encurtar a
     seção sem encurtar o margin do .impacto (ou vice-versa) não muda
     nada — os dois andam juntos. */
  min-height: min(56vh, 29.5rem);
}
/* Alinhamento vertical ao box, não centralização solta: o texto estica
   na altura do palco e joga a manchete no topo e o impacto na base.
   Assim a primeira linha nasce na mesma altura da borda de cima do box
   e a legenda termina na de baixo — as duas colunas passam a dividir a
   mesma caixa em vez de flutuarem lado a lado. */
.hero-texto {
  align-self: stretch;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-arte {
  flex: 1 1 auto;
  min-width: 0;
}

/* Manchete em sans: o highlight precisa de haste reta e altura-x alta,
   senão o retângulo engole a letra. A serifada fica no corpo do case. */
.manchete {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.5rem);
  /* 1.52 e o padding .26em do .hl andam JUNTOS: 1em de linha + 2 × .26em
     = 1.52em, exatamente a altura da linha. É isso que faz as duas
     partes de um mesmo mark se encostarem e lerem como uma forma
     contínua em degrau. Mexer num sem o outro reabre o vão. */
  line-height: 1.52;
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 21ch;
}
.hl {
  background: transparent;
  color: inherit;
  padding: .26em .38em;
  margin-inline: -.06em;
  border-radius: .82em;
  /* clone dá a cada linha seu próprio par de cantos quando o mark quebra */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Highlight pintado da esquerda para a direita, como caneta passando —
   por isso gradiente com background-size animável e não cor chapada:
   o chapado só pode aparecer, não pode ser traçado. */
.hl-1 { background-image: linear-gradient(var(--hl-1), var(--hl-1)); }
.hl-2 { background-image: linear-gradient(var(--hl-2), var(--hl-2)); }
.hl-1, .hl-2 {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  /* mais lenta que as outras entradas: é um traço sendo feito, e traço
     rápido demais vira corte de vídeo em vez de gesto */
  animation: hl-pinta .75s var(--ease-cena) forwards;
}
.hl-1 { animation-delay: .8s; }
.hl-2 { animation-delay: .95s; }
.hl-2 ~ .hl-2 { animation-delay: 1.1s; }
@keyframes hl-pinta {
  to { background-size: 100% 100%; }
}

/* ─── Entrada do texto do hero ───
   Escalonada: manchete, depois os highlights pintam, depois o bloco de
   impacto sobe item a item. A ordem conta a frase antes de destacar as
   palavras dela. */
.manchete,
.impacto-icone,
.impacto-num,
.impacto-leg {
  opacity: 0;
  animation: hero-sobe .95s var(--ease-cena) forwards;
}
/* Quatro tempos: menu → texto → logo → número.
   1. header      0s
   2. manchete    .22s, com os highlights pintando de .8s a 1.85s
   3. palco       1.15s (camadas) → 1.35s (palco) → 1.75s (objeto)
   4. impacto     1.85s, entrando junto com o objeto — e o número já
                  aparece contando, não parado em zero esperando a vez
   O número fecha a sequência, mas colado no logo: com o antigo 2.2s
   havia um vão morto entre o palco assentar e o bloco aparecer. */
.manchete      { animation-delay: .22s; }
.impacto-icone { animation-delay: 1.85s; }
.impacto-num   { animation-delay: 1.95s; }
.impacto-leg   { animation-delay: 2.05s; }
@keyframes hero-sobe {
  /* 20px e não 12: com a curva mais macia o percurso curto lia como
     tremida. Distância maior dá tempo de o movimento existir. */
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.impacto { margin-top: clamp(1rem, 1.8vw, 1.5rem); }

/* ─── Bloco de impacto ───
   Um dado só, sem estrutura de gráfico em volta. Anel de progresso e
   curva de linha foram testados e caíram: os dois traziam sintaxe de
   dashboard para uma peça que tem um número, e a curva ainda repetia o
   registro linear descartado em 06/08 por comunicar complexidade.
   O movimento vem da contagem de 0 a 90 — nada mais precisa se mexer. */
.impacto-icone {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--client-accent);
  margin-bottom: .375rem;
}
.impacto-icone svg { width: 100%; height: 100%; display: block; }

.impacto-num {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--ink);
  line-height: 1;
  /* Bem fechado: nessa escala o tracking padrão abre buracos entre os
     dígitos e o número perde a leitura de bloco único. */
  letter-spacing: -.055em;
  margin-top: .5rem;
  font-variant-numeric: tabular-nums;
}
/* O símbolo é qualificador, não grandeza: em escala cheia ele disputava
   com o próprio valor. */
.num-simbolo {
  font-size: .62em;
  letter-spacing: -.02em;
  margin-left: .04em;
}
.impacto-leg {
  margin-top: .625rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 21ch;
}

/* ─── Pilha de camadas ───
   Duas superfícies deslocadas atrás do palco: laranja PowerComm e cyan
   Ocyan. Elas entram em leque na carga e o objeto aparece depois — a
   ordem conta a história do case (a PowerComm entra, a Ocyan opera, o
   resultado aparece).

   As camadas são `position: absolute` dentro da pilha e herdam o mesmo
   raio do palco, senão o degrau entre elas denuncia formas diferentes. */
.pilha {
  position: relative;
  width: 100%;
  /* PROPORÇÃO FIXA, e não altura herdada do texto (14/08). Até aqui a
     altura do hero saía do conteúdo da coluna de texto: case com bloco de
     impacto empurrava a seção para baixo e o palco crescia junto, e a
     Tenda — que não tem impacto — ficava com o palco mais baixo dos
     quatro. Como o símbolo é dimensionado contra o palco, o mesmo logo
     parecia de tamanho diferente em cada case.
     3/2 e não 16/9: a proporção do vídeo encaixava sem sobra, mas o box
     ficava largo e baixo demais para o peso que o hero precisa ter. A
     3/2 sobra uma faixa de --client-stage acima e abaixo do vídeo — ela
     é invisível porque a cor de cada palco é a MEDIANA do próprio
     arquivo (foi para isso que V.tal e MRS foram remedidos em 14/08).
     Se um case novo mostrar emenda, o problema é a cor, não a proporção.
     É a mesma inversão que as colunas já tinham sofrido em 07/08 — a arte
     manda na medida, o texto se acomoda. */
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 18rem;
  /* Sem max-width aqui: o teto vem do --shell-page. Limitar a pilha
     empurrava o palco para a direita e reabria o vão contra o texto. */
  /* espaço para as camadas vazarem sem serem cortadas */
  isolation: isolate;
}
.camada {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  transform-origin: 60% 80%;
  opacity: 0;
  animation: camada-abre 1.1s var(--ease-cena) forwards;
}
/* Tom sobre tom, não laranja: a camada laranja pesava demais atrás de
   um palco claro e puxava o olho para o canto errado. O azul um degrau
   abaixo dá a leitura de camada sem virar assunto. */
.camada-pc {
  background: var(--client-layer);
  z-index: 1;
  /* deslocamento curto: a camada só precisa assomar por trás, não
     virar um segundo cartão ao lado do palco */
  --giro: -2.5deg;
  --dx: -12px;
  --dy: -9px;
  animation-delay: 1.15s;
}
@keyframes camada-abre {
  from { transform: none; opacity: 0; }
  to   { transform: rotate(var(--giro)) translate(var(--dx), var(--dy)); opacity: 1; }
}

.palco {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  min-height: 18rem;
  border-radius: 32px;
  background: var(--client-stage);
  overflow: hidden;
  opacity: 0;
  animation: palco-entra .9s var(--ease-cena) 1.35s forwards;
}
@keyframes palco-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* o objeto aparece por último, depois das camadas assentarem */
.objeto {
  opacity: 0;
  animation: objeto-entra .8s var(--ease-cena) 1.75s forwards;
}
@keyframes objeto-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Sem animação: tudo já nasce na posição final. */
@media (prefers-reduced-motion: reduce) {
  .camada, .palco, .objeto,
  .manchete, .impacto-icone, .impacto-num, .impacto-leg {
    animation: none;
    opacity: 1;
  }
  .hl-1, .hl-2 { animation: none; background-size: 100% 100%; }
  .camada-pc { transform: rotate(-2.5deg) translate(-12px, -9px); }
}
/* A COR DO PALCO SE MEDE NA TELA, NUNCA NO ARQUIVO (14/08).

   Duas descobertas, as duas medidas, depois de uma tarde inteira de
   tentativas:

   1. O NAVEGADOR DESLOCA A COR. Ele exibe o vídeo mais claro e mais
      saturado do que os pixels que o ffprobe lê. Na Tenda o arquivo é
      #D50018 e a tela mostra #ED1A17 — 24 níveis de diferença no verde.
      Nenhuma amostragem do arquivo detecta isso, e foi por isso que
      quatro métodos diferentes (canto do quadro, mediana do loop, faixa
      de borda, linha de emenda) erraram todos para o mesmo lado.

   2. O FUNDO VARIA AO LONGO DO LOOP. Amplitude medida em 20 quadros:
      Tenda 13 níveis, Ocyan 11, MRS 4, V.tal 3. O quadro 0 é sempre o
      mais divergente — nunca amostrar dele.

   Consequência prática: NENHUMA cor sólida casa o loop inteiro. O que
   está aqui é o melhor ajuste possível, medido nos prints da página, e a
   emenda ainda aparece de leve em alguns instantes do loop. Decidido em
   14/08 conviver com isso.

   As duas soluções que ZERAM o problema, se um dia incomodar:
     a) o vídeo cobrir o palco (escala 119% num palco 3/2) — sem faixa,
        sem cor para casar, mas o símbolo cresce ~13%;
     b) uma segunda cópia do vídeo atrás, coberta e desfocada, servindo de
        fundo — a faixa passa a ser o próprio arquivo e acompanha a
        variação quadro a quadro, mantendo a escala atual.

   NÃO "corrigir" estes hex por valores amostrados do arquivo.

   Os quatro valores de --client-stage foram escolhidos pelo Thiago vendo
   a página no navegador, e ficam ACIMA do que os pixels do arquivo dizem
   — mais claros e mais saturados, os três na mesma direção:

     Ocyan  #A8E3F9  (medido no arquivo: #B0E0F4)
     MRS    #BCDAF6  (medido: #B9D4ED)
     Tenda  #FF0000  (medido: #D50018 — e nem é o vermelho da marca)

   A explicação provável é conversão de perfil de cor na decodificação do
   vídeo: o navegador exibe mais claro do que os pixels que o ffprobe lê.
   Nenhuma amostragem do arquivo detecta isso.

   NÃO "corrigir" esses hex pelos valores medidos. A medição serve para
   diagnosticar (foi ela que achou a vinheta, abaixo); quem fecha a cor é
   a comparação na tela.

   O CORTE DA VINHETA FOI REVERTIDO. Chegou-se a cortar 6% das bordas de
   Ocyan, MRS e Tenda para tirar o escurecimento de compressão, mas a
   recompressão desloca a cor do arquivo — e os hex acima foram tirados
   dos ORIGINAIS. Os vídeos em uso são os originais; se um dia o corte
   voltar, refazer a escolha de cor na tela depois dele, nunca antes.

   ESCALA DO SÍMBOLO — o vídeo COBRE o palco (14/08).

   O palco é 3/2 e os arquivos são 16/9. Enquanto o vídeo entrava menor
   que o box, sobrava uma faixa de --client-stage em volta, e ela nunca
   somia: a borda do arquivo não tem cor única — carrega vinheta de
   compressão — então nenhum hex de palco casa com ela. Foram três
   tentativas de acertar a cor (canto do quadro, mediana do loop, faixa de
   borda), cada uma dando um valor diferente e a emenda aparecendo do
   mesmo jeito, ora mais clara ora mais escura.

   A correção é geométrica, não de cor: com o vídeo cobrindo o palco não
   existe emenda para descasar. O piso é a razão entre as proporções —
   (3/2) ÷ (16/9) = 118,6% — arredondado para 120%.

   O que se perde: a régua que igualava o tamanho do símbolo entre os
   cases. Abaixo de 120% a faixa volta, então quem tem o símbolo grande
   dentro do arquivo (Ocyan e Tenda, 87% da altura) fica com o símbolo
   maior na página do que a V.tal, que é pequeno no arquivo (54%). Igualar
   de verdade exige recompor os arquivos — separar objeto e fundo por
   chroma key e remontar cada símbolo no mesmo tamanho sobre um fundo 3/2.
   Fica registrado como o caminho, se um dia incomodar.

   --objeto-escala continua por case porque a V.tal precisa de mais que o
   piso: o símbolo dela é o menor dentro do arquivo. */
.objeto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--objeto-escala, 100%);
  height: auto;
  max-width: none;
}

/* Compensação óptica da Tenda (14/08): 8px à esquerda. NÃO é correção de
   centro — o símbolo está centrado no arquivo, com margem de 110px
   idêntica dos dois lados em todo quadro (medido). O que desloca a
   leitura é a .camada-pc, que assoma só pela esquerda: rotacionada -2,5°
   e deslocada -12px/-9px. Cabe dentro da sobra horizontal dos 105%.
   Se a camada mudar de lado ou de deslocamento, este valor sai junto. */
[data-case="tenda"] .objeto {
  transform: translate(calc(-50% - 8px), -50%);
}

/* A Tenda voltou a ter vídeo no hero (14/08, Seedance 2.0) — sem
   animação de CSS por cima, que somaria dois movimentos. A flutuação em
   duas camadas que existiu aqui foi descartada junto: ver decisions.md.

   E sem os 126%: aquele valor existe para o vídeo do Ocyan, onde o objeto
   é pequeno dentro do quadro e precisa ser ampliado. O símbolo da Tenda
   já ocupa quase toda a altura do frame — com 126% a base do tronco saía
   cortada pelo overflow do palco.

   `cover` preenchendo o palco inteiro, e não uma largura solta: com o
   vídeo menor que o palco sobrava uma faixa de --client-stage em cima e
   embaixo, e como a mediana não casa com a borda do arquivo em todo
   quadro, a faixa lia como um segundo vermelho. Sem sobra não há emenda
   para descasar. O palco é ~16:9 como o vídeo, então `cover` corta poucos
   por cento na horizontal — longe do símbolo, que é centralizado. */
/* Sem `cover`: ele existia para tapar a faixa de palco que sobrava quando
   o vídeo era menor que o box. Com o palco em 16/9, igual ao arquivo, não
   há sobra para tapar, e a escala volta a ser a da régua. */

@media (max-width: 900px) {
  .hero {
    /* coluna única: o hero é grid, então flex-direction não vale aqui */
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 2rem;
  }
  .manchete { max-width: none; }
  .palco { min-height: 15rem; aspect-ratio: 4 / 3; height: auto; }
}

/* ═══════════ PILLS ═══════════ */
/* Sem mono e sem caixa alta: mono + uppercase + tracking largo é o
   combo que dá cara de gerado. Sentence case em Inter lê como rótulo
   escrito por gente. */
.pill {
  display: inline-block;
  font-family: var(--body);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: .3125rem .625rem;
  border-radius: 999px;
  vertical-align: middle;
}
/* pill do hero — reduzida, para o número dominar */
.pill-light {
  background: var(--bone);
  color: var(--ink);
  font-size: .75rem;
  padding: .3125rem .6875rem;
}
/* Cinza e não laranja: o laranja é acento da PowerComm e num elemento
   em formato de pill lia como botão — prometia ação que não existe. */
.pill-ghost { background: var(--bone); color: var(--ink-soft); }

/* ═══════════ FOLHA ═══════════ */
.sheet {
  position: relative;
  background: var(--paper);
  /* Sem raio nem margem no topo: os dois existiam para a folha branca
     "subir" sobre o hero chapado de cor. Com o hero branco eram só um
     vão morto entre o palco e o começo da leitura. */
  margin-top: 0;
  padding-inline: var(--pad);
}

/* Ancorado à esquerda dentro do shell da página, não centralizado na
   própria medida: é a margem esquerda que precisa casar com o logo do
   header e com a borda do hero. O conjunto (320 + 96 + 620 = 1036)
   deixa uma calha de ~114px à direita — respiro assimétrico de propósito,
   e o lugar natural de notas laterais num próximo case.
   Rail em 320 e não 352: engordar o card para o conjunto chegar mais
   perto do shell desproporcionava o próprio card. A calha absorve.
   Esticar até os 1600px do shell antigo é outra coisa e segue rejeitado:
   ali o vazio à direita era grande demais para ler como margem. */
.sheet-inner {
  max-width: var(--shell-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 20rem minmax(0, 38.5rem);
  justify-content: start;
  gap: 6rem;
  /* Topo e base diferentes de propósito: o topo é a continuação do hero
     e precisa fechar o par com ele; a base é o fim do documento, antes
     do fechamento, e aí o espaço maior é bem-vindo. */
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem);
}

/* ─── Rail ─── */
/* O rail entra quando o header sai: é a troca de guarda da navegação.
   Sem isso o header some e o rail já estava lá — ninguém percebe que um
   assumiu o lugar do outro. */
.rail-card.reveal { transform: translateY(2rem); }
.rail-card {
  position: sticky;
  top: 40px;
  background: var(--bone);
  border-radius: 20px;
  padding: 1.25rem;
}
/* Marca PowerComm — o único elemento fixo na leitura precisa ler
   "case DA POWERCOMM", não "página da Ocyan". Fica acima do Resumão,
   pequena o bastante pra não competir com o TOC (função primária do rail). */
.rail-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--bone-2);
}
.rail-brand img { height: 18px; width: auto; }
/* Inter 600 e não mono claro: mono + caixa alta + tracking largo é o
   mesmo combo que já saiu da pill de "Mais cases". Aqui o rótulo
   acompanha a marca — precisa de peso para não parecer nota de rodapé
   colada nela. */
.rail-brand span {
  font-family: var(--body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Marca do cliente — demovida de card de destaque para ícone junto do
   fato "Empresa": identifica a Ocyan sem competir com a marca PowerComm. */
/* O ícone abre o bloco, acima do rótulo: rótulo e descrição da Empresa
   recomeçam na mesma margem de Setor e Site. */
/* Altura fixa e largura livre: o arquivo é 2084 × 2156, então forçar um
   quadrado com object-fit: cover cortava o símbolo, e o border-radius de
   50% comia mais um pedaço. A proporção nativa manda. */
/* ═══ Caixa da marca do cliente ═══
   Altura igual nunca pareceu igual entre os cases, e o motivo é medível:
   o que o olho compara é ÁREA DE TINTA, não altura. Nos 2rem que valiam
   para todos, a área renderizada era de 486px² na Ocyan (um anel, 49% de
   cobertura, quase todo vazado), 942px² na V.tal (caixa sólida, 92%) e
   1.259px² na MRS (2,12:1 de proporção) — a MRS ocupava 2,6 vezes a
   Ocyan.

   A caixa resolve pela restrição em vez de por um número por case: todo
   logo se encaixa em 40×64px e nenhum pode crescer além disso. Logo
   quadrado bate no teto pela altura, logo largo bate pela largura, e a
   diferença entre eles deixa de ser arbitrária.

   A caixa também reserva espaço constante: sem ela, a altura do bloco
   mudava conforme o logo do cliente e o card inteiro dançava entre os
   cases. */
/* Altura fixa, largura livre — os arquivos de `assets/logos/nav-bar/`
   já vêm normalizados em 80px de altura (13/08), então a compensação
   saiu do CSS e passou a viver no arquivo, que é onde ela deveria estar.
   Foi isso que aposentou os fatores --marca-escala por case.
   Exibidos em 36 de altura (13/08), largura mínima de 36, e exportados
   em 4x — 144px de altura no arquivo. A primeira exportação saiu em 1x
   e ficou borrada: tela retina pede 2x ou 3x, então o navegador tinha
   que ampliar um bitmap de 36px. Marca é elemento pequeno e de traço
   fino, onde a perda aparece primeiro.
   Os logos quadrados ocupam a caixa inteira; só o da MRS passa, com
   246×144 no arquivo (62×36 renderizados). O min-width existe para que a marca nunca fique
   mais estreita que alta: sem ele, um logo vertical num case futuro
   encolheria a caixa e o bloco de texto abaixo subiria junto,
   quebrando o alinhamento entre os cards dos cases. */
.rail-client-box {
  height: clamp(2rem, 4vw, 2.25rem);
  min-width: clamp(2rem, 4vw, 2.25rem);
  width: auto;
  display: flex;
  align-items: center;
  margin-bottom: .5rem;
}

/* max-* e não width/height: é isso que faz o logo se encaixar por dentro
   em vez de esticar até a caixa. object-fit sozinho não bastaria — ele
   age dentro da caixa do próprio <img>, e aqui é a caixa que manda.

   O --marca-escala é AJUSTE ÓPTICO, não espaçamento: a caixa iguala o
   espaço ocupado, mas não a densidade da forma. Duas marcas de mesma
   área pesam diferente quando uma é maciça e a outra é contorno, e é
   por isso que a V.tal (caixa sólida, 92% de cobertura) e a MRS (58%,
   mas larga) liam maiores que a Ocyan (anel vazado, 49%) mesmo dentro
   da mesma caixa. Os fatores abaixo igualam a ÁREA DE TINTA das três em
   ~760px², que é a da Ocyan — ela virou a referência por leitura, não
   por cálculo. */
/* A altura manda e a largura acompanha. Os --marca-escala por case que
   existiam aqui foram removidos junto com a exportação normalizada:
   compensar no CSS obrigava cada consumidor do arquivo a corrigir de
   novo, e bastava um case novo para a conta recomeçar. */
.rail-client-mark {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.rail-facts { display: grid; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bone-2); }
.rail-facts dt {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .1875rem;
}
.rail-facts dd { font-size: .875rem; line-height: 1.55; color: var(--ink-soft); }
/* Cinza da PowerComm, não a cor do cliente. O rail é um card assinado
   "PowerComm · Case": pela regra de atribuição do DESIGN.md §2, client/*
   só existe do corpo do case para dentro, e aqui quem fala é a
   plataforma. O link vinha em --client-deep desde o Ocyan e passou batido
   nos quatro cases — na Tenda ficou evidente, porque o vermelho da marca
   dela gritava dentro de um card que não é dela. */
.rail-facts a { color: var(--ink-soft); text-underline-offset: 3px; }

.rail-toc { display: grid; gap: .125rem; padding-top: 1.25rem; }
.rail-toc a {
  font-size: .875rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--ink-soft);
  padding: .5rem .625rem;
  border-radius: 9px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.rail-toc a:hover { background: var(--bone-2); color: var(--ink); }
.rail-toc a.is-active { background: var(--paper); color: var(--ink); font-weight: 500; }

/* ─── Documento ─── */
/* 620px — medida de leitura do linear.app/now. Em 736px a linha passava de
   90 caracteres, o que cansa numa leitura longa. */
.doc { max-width: 38.5rem; }

.doc-lead {
  font-size: clamp(1.125rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink);
}

/* ═══ "O QUE MUDOU" — resumo do TL;DR ═══
   Deliberadamente mais leve que a .lista-num do Impacto. As duas são
   listas de resultado, mas o TL;DR só antecipa o que o Impacto entrega
   no fim: se as duas tivessem numeral, escada e onda, o leitor chegaria
   ao Impacto achando que já leu aquilo. Aqui: sem numeral, sem régua
   entre itens, marcador de traço curto e corpo compacto.
   O rótulo repete a tipografia do `.rail-facts dt` — é o mesmo gesto de
   "etiqueta de dado" que a coluna lateral já usa. */
.mudou {
  margin: 2rem 0 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
/* A régua entra COM o conteúdo (14/08). Quando o revelador dá `is-in` ao
   .mudou, a CAIXA fica visível de imediato — e a borda com ela — mas o
   rótulo e os cinco itens entram em cascata, com atrasos de até .35s.
   A linha chegava primeiro e ficava pendurada, sem nada embaixo.
   Animar a COR da borda, e não a opacidade da caixa, corrige sem desfazer
   a cascata: a régua acompanha o rótulo, que é o primeiro a entrar. */
.mudou.reveal {
  border-top-color: transparent;
  transition: opacity .85s var(--ease-cena),
              transform .85s var(--ease-cena),
              border-top-color .85s var(--ease-cena);
}
.mudou.reveal.is-in { border-top-color: var(--rule); }
.mudou-rotulo {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .875rem !important;
}
/* 1.25rem entre itens contra .875rem: com quase todo bullet ocupando duas
   linhas, um respiro menor que o salto de linha (15px × 1.6 ≈ 24px) fazia
   a quebra interna de um item ler igual à separação entre dois. O espaço
   entre itens precisa vencer o espaço dentro do item, senão a lista vira
   um bloco de texto contínuo. */
.mudou ul { list-style: none; display: grid; gap: 1.25rem; }
.mudou li {
  display: grid;
  grid-template-columns: .625rem 1fr;
  align-items: start;
  gap: .875rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* O ganho de cada linha em tinta cheia. O bullet inteiro em --ink-soft
   dava cinco frases de peso idêntico e nada para o olho fisgar numa
   leitura de resumo, que é o que o TL;DR é. O destaque fica no que
   mudou de fato — não no número, que já tem marca-texto no Impacto e
   repetiria o mesmo recurso duas vezes na mesma página. */
.mudou li strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── Cascata interna do bloco ──
   O JS revela o `.mudou` inteiro; o escalonamento dos itens é daqui.
   Tudo escopado em `.mudou.reveal`: sem a classe — quando não há JS, ou
   com `prefers-reduced-motion`, casos em que o script nunca aplica
   `reveal` — nada disto existe e o conteúdo nasce na posição final, em
   vez de ficar preso em opacity 0 para sempre.
   O container não se move sozinho (senão o bloco viaja duas vezes: ele e
   os filhos); ele só serve de gatilho. */
.mudou.reveal { opacity: 1; transform: none; }
.mudou.reveal .mudou-rotulo,
.mudou.reveal li {
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity .6s var(--ease-cena), transform .6s var(--ease-cena);
}
.mudou.reveal.is-in .mudou-rotulo,
.mudou.reveal.is-in li {
  opacity: 1;
  transform: none;
}
/* 70ms entre itens: perto dos 80ms da cascata da folha, para o bloco ler
   como parte da mesma entrada, e curto o bastante para os cinco itens
   fecharem em 350ms — uma lista de resumo que demora a montar atrasa a
   leitura em vez de conduzi-la. */
.mudou.reveal.is-in .mudou-rotulo   { transition-delay: 0s; }
.mudou.reveal.is-in li:nth-child(1) { transition-delay: .07s; }
.mudou.reveal.is-in li:nth-child(2) { transition-delay: .14s; }
.mudou.reveal.is-in li:nth-child(3) { transition-delay: .21s; }
.mudou.reveal.is-in li:nth-child(4) { transition-delay: .28s; }
.mudou.reveal.is-in li:nth-child(5) { transition-delay: .35s; }
/* Losango chapado em SVG, e não o objeto em resina: o 3D é a linguagem do
   hero e das ilustrações da Solução. Cinco objetos em resina de 20px
   repetidos dentro de um parágrafo trazem o peso do hero para dentro do
   texto, onde o case é flat — tipografia, hairline e a onda separadora.
   Uma cor só, sem degradê, herdando currentColor como os outros ícones
   do sistema: trocar a cor do marcador é trocar uma linha aqui.
   Alinhamento vertical: nem `center` (que nos bullets de duas linhas
   descola o marcador da primeira linha e o joga no meio do parágrafo),
   nem topo cru (que o pendura acima da altura-x e faz o losango parecer
   solto, como estava). O empurrão é calculado: a primeira linha mede
   15px × 1.6 = 24px, o marcador tem 10px, então (24 − 10) / 2 = 7px
   centra o losango no eixo óptico da linha que ele marca. */
.mudou li .mudou-marca {
  width: .625rem;
  height: .625rem;
  margin-top: .4375rem;
  color: var(--client-accent);
  flex: none;
}

.doc p { margin-bottom: 1.25rem; }
.doc p:last-child { margin-bottom: 0; }
.doc > p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.doc > p strong { color: var(--ink); font-weight: 700; }

/* Ritmo vertical — o espaço agrupa. Escala em três degraus:
   troca de capítulo (h2) > troca de assunto (h3) > respiro entre blocos.
   Cada título fica colado no texto que ele abre e longe do que veio antes. */
/* Escala contida, como no Linear: o h2 não precisa ser enorme quando o
   espaço acima dele já anuncia a troca de capítulo. */
.doc h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: clamp(5rem, 10vw, 8rem);
  margin-bottom: 1rem;
}
.doc h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  margin-top: clamp(3.5rem, 7vw, 5rem);
  margin-bottom: .75rem;
}
/* o primeiro título de uma seção não precisa do salto de capítulo inteiro */
.doc h2 + h3 { margin-top: 2rem; }

/* Marca-texto de caneta e não retângulo: a forma vem de um SVG com
   contorno irregular — topo e base levemente ondulados, pontas cortadas
   em ângulo, e um segundo passe mais escuro na base simulando o acúmulo
   de tinta. O retângulo perfeito era o que dava cara de componente.
   A cor vive no SVG (o --hl-1 é #DCEC6B, o acúmulo é #C4D600):
   data URI não lê custom property, então mexer na paleta pede mexer
   nos dois lugares. */
/* Mesma gramática do highlight do hero (.hl): pill arredondada que
   envolve a palavra inteira, e não o traço irregular de marcador que
   cortava as letras. O hero é a primeira coisa que se vê e é ele quem
   define o padrão — duas linguagens de destaque na mesma página liam
   como duas peças de origens diferentes.
   O padding de .26em vertical soma 1.52em de altura, que cabe dentro da
   entrelinha de 1.6 do corpo sem encostar nas linhas vizinhas. */
/* Cantos boleados como no hero, mas cobrindo só parte da altura: o topo
   das maiúsculas e das ascendentes fica de fora, então lê como marcação
   sobre o texto e não como pill dentro dele.
   O fundo é um SVG e não um border-radius porque o raio do CSS se aplica
   à caixa inteira do inline — com o fundo cobrindo 78% da altura, o raio
   simplesmente não apareceria no retângulo pintado. Desenhado em SVG,
   ele acompanha a faixa e sobrevive à quebra de linha. */
/* 700 e não 600: dentro de um parágrafo em 400, a ênfase precisa de dois
   degraus para se separar. 600 é o peso dos títulos — usá-lo aqui faria
   o trecho marcado competir com a hierarquia, não com o texto ao redor. */
mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='300' height='24' rx='12' ry='12' fill='%23DCEC6B'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 78%;
  background-position: 0 96%;
  /* Obrigatório: o navegador pinta background-color: Mark (amarelo) por
     padrão no <mark>, e como a faixa cobre 78% da altura, os 22% de cima
     mostravam esse amarelo nativo por baixo — daí as duas cores. */
  background-color: transparent;
  color: var(--ink);
  /* 600 e não 700: com a marcação em volta, o negrito cheio somava dois
     sinais de destaque no mesmo trecho. */
  font-weight: 600;
  padding: 0 .3em;
  margin-inline: -.12em;
  /* clone dá a cada linha sua própria faixa quando o mark quebra */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ═══ BLOCO — cards do Desafio ═══
   Formato de card com badge circular, adaptado da referência.
   Mecanismos mantidos: raio generoso, numeral em badge, vazio grande
   entre o badge e o título (é ele que dá cara de cartão, não de caixa
   de texto), alternância de superfície.

   Fora: a seta diagonal da referência. Lá ela indica card clicável;
   aqui não levaria a lugar nenhum — ornamento que promete interação.

   Superfícies em grafite e cinza, nunca em cor: a seção de Desafio
   abre monocromática e só ganha laranja quando a PowerComm entra.     */
.bloco {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .875rem;
  align-items: start;
  margin: 2rem 0 clamp(3rem, 5.5vw, 4rem);
  padding: 0;
}
.bloco-card {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  min-height: 19rem;
}
.bloco-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-family: var(--body);
  font-weight: 500;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
/* empurra o conteúdo para a base — o vazio superior é o mecanismo */
.bloco-base { margin-top: auto; padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.bloco-titulo {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.1vw, 1.5rem);
  line-height: 1.14;
  letter-spacing: -.025em;
  margin-bottom: .75rem !important;
  hyphens: none;
}
.bloco-texto {
  font-size: .875rem;
  line-height: 1.55;
  margin-bottom: 0 !important;
  hyphens: none;
  overflow-wrap: break-word;
}

/* Superfícies neutras — grafite e cinza. Passaram pela cor da Ocyan
   (deep/tint) em 06/08 e voltaram: o azul do card 01 batia com o mesmo
   azul do card de citação logo abaixo, e a seção perdia o contraste
   que sustenta a regra "laranja = onde a PowerComm agiu". O Desafio
   abre monocromático. */
.bloco-ink { background: var(--ink); }
.bloco-ink .bloco-num { background: rgba(255, 255, 255, .16); color: #fff; }
.bloco-ink .bloco-titulo { color: #fff; }
.bloco-ink .bloco-texto { color: rgba(255, 255, 255, .72); }

.bloco-cinza { background: var(--bone); }
.bloco-cinza .bloco-num { background: var(--bone-2); color: var(--ink-soft); }
.bloco-cinza .bloco-titulo { color: var(--ink); }
.bloco-cinza .bloco-texto { color: var(--ink-soft); }

/* Degrau vertical entre os cards — o zigue-zague da referência. */
.bloco-par > li:nth-child(even) { transform: translateY(2.5rem); }
.bloco-par { padding-bottom: 2.5rem; }

@media (max-width: 620px) {
  .bloco { grid-template-columns: 1fr; padding-bottom: 0; }
  .bloco-par > li:nth-child(even) { transform: none; }
  .bloco-card { border-radius: 22px; min-height: 0; }
  .bloco-base { padding-top: 2.25rem; }
}


/* ═══ LISTA — usada no Impacto ═══
   Substitui os cards no Desafio e no Impacto. O card espremia título
   longo em coluna de ~290px e quebrava em cascata; a lista devolve os
   620px inteiros para o título.

   O ritmo vem de quatro mecanismos, não da moldura:
   1. escada — marcador numa coluna fixa à esquerda cria um eixo vertical
   2. régua fina entre itens, de ponta a ponta: é o compasso
   3. título em largura total
   4. salto de escala entre marcador, título e corpo                     */
/* Separador em onda e não régua reta: a linha de 1px de ponta a ponta
   lia como tabela e dava o mesmo peso a "fim do item" e "estrutura da
   página". A onda curta e centrada separa sem construir grade — e rima
   com o traço de marcador do corpo. Espaços em múltiplos de 8. */
/* 48px de entrada e 80px de saída, e não o clamp de 64px nos dois lados:
   com o clamp, a saída da lista empatava com o espaço entre itens (os
   dois colapsam no mesmo teto), então a citação chegava com o mesmo
   respiro que separa o item 02 do 03 e lia como um quarto item.
   80px reusa o degrau "troca de assunto" já definido no ritmo do doc. */
.lista {
  list-style: none;
  margin: 3rem 0 5rem;
}
.lista > li {
  display: grid;
  align-items: start;
  gap: 0 clamp(1rem, 2.4vw, 1.5rem);
}
.lista > li + li { margin-top: 1.5rem; }
/* Onda na coluna do texto e ancorada à esquerda: centrada, ela puxava o
   olho pro meio entre duas leituras que começam na margem esquerda. No
   eixo do texto ela vira estrutura, não ornamento. */
.lista > li:not(:last-child)::after {
  content: "";
  grid-column: 2;
  height: .75rem;
  margin-top: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2,6 C9,1.5 19,1.5 26,6 C33,10.5 43,10.5 50,6 C57,1.5 67,1.5 74,6 C81,10.5 91,10.5 98,6 C103,2.8 110,2.5 118,4.2' fill='none' stroke='%23E0E0E0' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 6rem .75rem;
}
.lista-corpo > p { margin-bottom: 0 !important; }
/* Selecionado a partir do pai para vencer o `.lista-corpo > p` acima:
   os dois carregam !important, e nesse caso quem decide é a
   especificidade — o seletor de uma classe só perdia, e o espaço entre
   título e descrição ficava em zero por mais que o valor mudasse. */
.lista-corpo > .lista-titulo {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: .5rem !important;
}
.lista-corpo > p + p {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ─── Impacto: marcador é o algarismo de ordem ───
   Coluna estreita, número grande e apagado. Ele conta, não compete.
   Herdado do Desafio-em-lista; passou para o Impacto em 07/08, quando
   a coluna de valor caiu por não ter três dados reais para sustentar. */
/* Coluna e corpo na escala de 8: 32px de coluna, 24px de numeral. */
.lista-num > li {
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 .5rem;
}
.lista-num .lista-marca {
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--client-accent);
  font-variant-numeric: tabular-nums;
  /* alinha a base do número com a primeira linha do título */
  padding-top: .125rem;
}

/* Abaixo de 620px a escada empilha: o marcador passa a ser uma linha
   própria acima do título, e a régua sozinha sustenta o compasso. */
@media (max-width: 620px) {
  .lista-num > li {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .lista-num .lista-marca { padding-top: 0; }
  /* coluna 2 não existe quando a escada empilha */
  .lista > li:not(:last-child)::after { grid-column: 1; }
}

/* ═══ CARDS — gramática anterior, sem uso no HTML desde a troca pela
   lista. Mantido para comparação; remover quando a lista for aprovada. ═══
   Desafio e Impacto compartilham a mesma anatomia: eyebrow (dot + label),
   título, régua fina, corpo. Muda só o tratamento de superfície.
   Cor segue a gramática do case: cinza/creme = o mundo antes, laranja = a
   PowerComm agindo. Por isso o Desafio é neutro e o Impacto tem o card
   laranja no resultado principal. */
.card-set {
  list-style: none;
  counter-reset: n;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin: 2rem 0 clamp(3rem, 5.5vw, 4rem);
}
/* Três itens: linha única, sem o buraco do 2+1 */
.card-set-3 { grid-template-columns: repeat(3, 1fr); }

/* ─── Cards de métrica (Impacto) ───
   Superfície uniforme em branco; o número em cor é o único destaque e a
   descrição é empurrada para o rodapé. O vazio entre os dois é o que faz
   o número dominar — é o mecanismo da referência. */
.card-set-3 .card {
  background: var(--paper);
  box-shadow: 0 2px 14px -6px rgba(26, 26, 26, .16);
  padding: 1.75rem 1.5rem 1.5rem;
  min-height: 15rem;
}
.card-set-3 .card .card-title {
  color: var(--client-accent);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  letter-spacing: -.035em;
  margin-bottom: 0 !important;
}
.card-set-3 .card p {
  margin-top: auto !important;
  padding-top: 2.5rem;
  font-size: .875rem;
  line-height: 1.45;
}
.card-set-3 .card strong { font-weight: 600; }
.card {
  counter-increment: n;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  padding: 1.375rem;
  background: var(--bone);
}
@media (max-width: 620px) {
  .card-set, .card-set-3 { grid-template-columns: 1fr; }
}
/* Título do card em sans pesada e grande — a serifa é exclusiva dos
   títulos de seção. Aqui o peso e a escala é que criam a hierarquia. */
/* Escala calibrada para card de ~190–290px: em coluna estreita, título
   grande quebra em cascata e o gap grande separa o que deveria ser um par. */
.card .card-title {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: .625rem !important;
  hyphens: none;
}
.card p {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 0 !important;
  hyphens: none;
  overflow-wrap: break-word;
}
.card strong { color: var(--ink); font-weight: 600; }

/* Numeração do Desafio — algarismo solto, sem rótulo de categoria */
.card-num .card::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--body);
  font-weight: 500;
  font-size: .8125rem;
  color: var(--ink-faint);
  margin-bottom: .625rem;
}

/* Superfícies. O laranja marca o resultado que a PowerComm entregou. */
/* Card de destaque do Impacto na cor do cliente: o resultado é da Ocyan.
   O laranja segue reservado para marcar a atuação da PowerComm. */
.card-accent { background: var(--client-accent); }
.card-accent .card-title { color: #fff; }
.card-accent p { color: rgba(255, 255, 255, .92); }
.card-accent strong { color: #fff; }

.card-ink { background: var(--ink); }
.card-ink .card-title { color: #fff; }
.card-ink p { color: rgba(255, 255, 255, .76); }
.card-ink strong { color: #fff; }

/* Ilustração 2D — abre o bloco, não o interrompe.
   Vem logo abaixo do h3 e antes do texto: o vínculo com o item é a
   proximidade do título, mecanismo da Clay. Antes ela ficava depois do
   parágrafo e sangrava 6rem além da coluna — parecia maior que o item a
   que pertencia e o Iago leu como peça solta (feedback de 06/08).
   Por isso agora: largura da coluna, sem bleed, colada no título. */
/* Moldura de área segura (mecanismo da Clay): a ilustração vive num quadro
   próprio, com fronteira explícita. Isso a separa do corpo — que carrega a
   cor do cliente — e a declara como objeto da PowerComm. */
.figura {
  margin: 1.5rem 0 2.5rem;   /* pouco acima: pertence ao título. mais abaixo: solta o texto */
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;          /* a peça preenche o quadro; o padding saiu com o bleed */
  background: var(--paper);
}
.figura img,
.figura > svg {          /* cena montada em SVG: mesmo comportamento da imagem.
                            O SVG vai INLINE — carregado por <img> ele roda em
                            modo restrito e não busca as peças de resina. Sem
                            esta regra ele assume a largura do viewBox e vaza
                            da coluna (16/08). */
  display: block;
  width: 100%;
  height: auto;
}
/* h3 seguido de figura: o título encosta na imagem, e o par inteiro é que
   ganha o salto de assunto acima. */
.doc h3:has(+ .figura) { margin-bottom: 0; }

/* ─── Print de peça real do cliente ───
   Vizinho da ilustração, e de propósito NÃO igual a ela: a ilustração é o
   vocabulário do projeto, o print é prova de que aquilo existe na ferramenta.
   Se os dois usassem o mesmo quadro, o leitor leria a captura como mais uma
   peça desenhada — e o valor do print, num material de venda, é justamente
   ser o artefato real do cliente.

   A diferença é o fundo: a captura repousa sobre --bone e tem moldura
   própria, o que a lê como algo trazido de fora e apoiado na página. */
.figura-print {
  background: var(--bone);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--rule);
  margin: 1.5rem 0 2.5rem;
}
/* Sobrescreve o overflow:hidden herdado — aqui o recorte é o padding, não a
   borda do quadro. */
.figura-print img {
  display: block;
  width: var(--print-w, 100%);
  max-width: 100%;
  height: auto;
  margin-inline: auto;      /* só tem efeito quando --print-w limita a largura */
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

/* ─── Anotação sobre a ilustração ───
   O texto da cena NÃO é gerado dentro da imagem. Fica em HTML por cima:
   nítido em qualquer tela, com acento correto, editável quando a narrativa
   mudar, traduzível para outro case e lido por leitor de tela.

   O que faz isso não quebrar: a posição é em %, e o corpo do texto é em
   `cqw` — unidade do container. Assim a anotação escala junto com a peça,
   do desktop ao mobile, e nunca sai do lugar onde foi ancorada.

   Manuscrito é a voz de quem conta a história, e por isso só existe aqui
   dentro. Fora da ilustração a página segue Inter e Instrument Serif. */
/* `relative` é obrigatório: é ele que faz a anotação se ancorar na figura.
   Sem isso o absolute sobe até o ancestral posicionado e a nota vai parar do
   outro lado da página. */
.figura {
  position: relative;
  container-type: inline-size;
}

.figura .nota {
  position: absolute;
  font-family: "Shantell Sans", "Bradley Hand", cursive;
  font-weight: 600;
  font-size: 3.1cqw;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}
/* Âncora por peça: cada composição põe a anotação num lugar diferente, então
   os valores vêm do próprio <figure> via custom property. Os números abaixo
   são só o padrão de quem não declarar.
   Uso: <figure class="figura" style="--na-x:12%; --na-y:11%; --nb-x:9%; --nb-y:11%">
   Rotação leve: texto à mão perfeitamente na horizontal denuncia a fonte. */
.figura .nota-a {
  left: var(--na-x, 13%);
  bottom: var(--na-y, 19%);
  rotate: -2deg;
}
.figura .nota-b {
  right: var(--nb-x, 4%);
  bottom: var(--nb-y, 11%);
  rotate: 1.5deg;
}

@media (max-width: 560px) {
  /* na coluna estreita a anotação encosta nos objetos; sobe e diminui */
  .figura .nota { font-size: 3.6cqw; }
  .figura .nota-a { bottom: 24%; }
  .figura .nota-b { bottom: 8%; }
}

/* ─── Citações: card sólido + balão de aspas fora ─── */
.quote {
  position: relative;
  margin: clamp(3rem, 5.5vw, 4rem) 0 .875rem clamp(2.5rem, 4vw, 3.5rem);
  border-radius: 18px;
  padding: 1.5rem;
  color: #fff;
}
.quote-mark {
  position: absolute;
  left: clamp(-3.5rem, -4vw, -2.5rem);
  top: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 12px 12px 3px 12px;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  padding-top: .875rem;
  color: #fff;
  background: inherit;
}
.quote blockquote p {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.36;
  font-weight: 400;
  margin-bottom: 0;
  /* pretty e não balance: o balance vem da regra da serifada e iguala o
     comprimento das linhas — funciona em manchete de 2 linhas, mas numa
     citação de 3+ ele encolhe a medida e deixa um vão à direita do card.
     pretty só evita a órfã na última linha. */
  text-wrap: pretty;
}
.quote-cyan, .quote-cyan .quote-mark { background: var(--client-quote); }
.quote-deep, .quote-deep .quote-mark { background: var(--client-deep); }
.quote-lime, .quote-lime .quote-mark { background: #8FA800; }

.quote-by {
  margin-left: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(3rem, 5.5vw, 4rem);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.quote-by img {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.quote-by p {
  font-size: .875rem;
  color: var(--ink-faint);
  margin-bottom: 0 !important;
}
.quote-by strong { color: var(--ink); font-weight: 700; }

/* ─── Números de impacto ─── */
.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-block: clamp(1.75rem, 3.5vw, 2.5rem);
}
.fig { background: var(--bone); border-radius: 18px; padding: 1.5rem; }
.fig-value {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  color: var(--client-hero);
  font-variant-numeric: tabular-nums;
  margin-bottom: .75rem !important;
}
.fig-word { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.fig-title { font-weight: 600; font-size: 1rem; margin-bottom: .375rem !important; }
.fig-desc { font-size: .875rem; color: var(--ink-soft); margin-bottom: 0 !important; }

/* ═══════════ FECHAMENTO ═══════════ */
.closing {
  max-width: var(--shell-page);
  margin-inline: auto;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.more { padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
/* Estrutura do Clay: pill é só rótulo, quem carrega a seção é o título
   logo abaixo. O salto de escala entre os dois é o mecanismo. */
.more-titulo {
  margin-top: 1rem;
  font-family: var(--body);
  /* mesma escala do h3 do corpo: é rótulo de seção de fechamento, não
     abre capítulo — na do Clay o título dominava a página inteira */
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--ink);
}
.more-grid {
  margin-top: 1.75rem;
  display: grid;
  /* auto-fill (e não auto-fit) para o card não esticar enquanto houver só um */
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}
.case-card { position: relative; border-radius: 20px; padding: 1.25rem; }
/* Fundo neutro nos dois: o card é um atalho para outro case, e pintá-lo
   com a cor do cliente de destino faria a cor mudar de dono — ela
   pertence à história daquele case, não a um link para ele. */
.case-vtal  { background: var(--bone); }
.case-ocyan { background: var(--bone); }
.case-thumb {
  background: rgba(255, 255, 255, .55);
  border-radius: 14px;
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
}
.case-thumb img { width: 44%; }
/* Vídeo preenche o quadro inteiro, ao contrário da imagem: ele traz o
   próprio fundo chapado, e reduzido a 44% viraria um retângulo colorido
   solto no meio do thumb claro. Mesma lógica do palco do hero. */
.case-thumb:has(video) { padding: 0; overflow: hidden; }
.case-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-card h3 { font-size: 1.25rem; margin-bottom: .1875rem; }
.case-card p { font-size: .875rem; color: var(--ink-soft); }

/* ═══════════ INTERAÇÃO ═══════════ */

/* ─── Revelação no scroll ───
   O bloco sobe 16px e aparece quando entra na tela. Curto de propósito:
   é pontuação de leitura, não animação de entrada — o hero já tem a
   dele. Sem JS (ou com motion reduzido) o conteúdo nasce visível, então
   a página nunca depende do script para ser legível. */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .85s var(--ease-cena), transform .85s var(--ease-cena);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ─── Foco visível ───
   A página não tinha nenhum: quem navega por teclado ficava sem saber
   onde estava. Anel em laranja PowerComm, que é a cor de atribuição da
   plataforma e não conflita com nenhuma cor da Ocyan. */
:focus-visible {
  outline: 2px solid var(--pc-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Âncora não cola no topo da janela quando o índice leva até a seção. */
#desafio, #solucao, #impacto { scroll-margin-top: 5rem; }

/* Links de texto do rail: o sublinhado SAI no hover e a cor vira o
   laranja da PowerComm. Decidido pelo Thiago em 13/08, revertendo a
   regra anterior (o sublinhado engrossava de 1px para 2px, para não
   perder a affordance no hover). O argumento antigo não se sustentou
   na tela: com a troca de cor acontecendo junto, a mudança de espessura
   virava um segundo evento no mesmo gesto e o link parecia tremer.
   A affordance continua no estado de REPOUSO, onde ela importa — é ali
   que o usuário descobre que aquilo é clicável, não no hover. */
/* O sublinhado é um GRADIENTE de 1px, não text-decoration: a espessura
   até anima, mas a LARGURA não — não existe como encolher um
   text-decoration até sumir. Com background-size a linha recolhe da
   direita para a esquerda, desfazendo o traço na direção inversa à que
   o highlight do hero se pinta.
   Ancorado à esquerda (background-position 0 100%): é de lá que o texto
   nasce, então é lá que o traço resiste por último. */
.rail-facts a {
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size .32s var(--ease), color .2s var(--ease);
}
/* Hover no laranja da PowerComm — o acento da plataforma, coerente com
   quem assina o card. Sobre o cinza #F4F4F4 do rail o laranja dá 2,4:1,
   que reprova para texto corrido; passa aqui porque é estado transitório
   de um link legível em repouso (7,3:1), e a affordance vive no repouso,
   que é onde o usuário descobre que aquilo é clicável. */
.rail-facts a:hover {
  background-size: 0% 1px;
  color: var(--pc-orange);
}

/* Sem movimento, o sublinhado apenas some — não encolhe. */
@media (prefers-reduced-motion: reduce) {
  .rail-facts a { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════ RESPONSIVO ═══════════ */
/* 1150 e não 1080: o conjunto rail + texto passou a ocupar 1068px, então
   com o padding lateral ele já aperta antes dos 1080 antigos. O
   breakpoint casa com o próprio --shell-page. */
@media (max-width: 1150px) {
  .sheet-inner { grid-template-columns: 1fr; }
  .rail-card { position: static; }
  .doc { max-width: none; }
}

@media (max-width: 860px) {
  .figures { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* ─── O MENU DO TELEFONE (Thiago, 28/08) ───
     Referencia: dejan.works. Dela ficou o CARD — o painel flutua ancorado a
     direita, abaixo da barra, medindo o conteudo em vez da tela.

     O QUE NAO FICOU foi a barra partida em duas pecas. A referencia separa a
     pilula da marca do botao redondo; aqui isso foi testado e desfeito: duas
     pecas pesam mais que uma barra so, e a barra unica e o que o site inteiro
     ja usa. O botao voltou para dentro da pilula, onde tambem herda o fundo
     dela — solto, ele precisava de superficie propria e ficava branco sobre o
     hero escuro da home.

     O menu estava DESLIGADO no telefone por dois motivos escritos aqui: os
     links nao levavam a lugar nenhum (eram `href="#"`) e o painel caia
     translucido sobre a manchete. Os dois cairam hoje. */
  .header-pill {
    grid-template-columns: 1fr auto;
    /* `position: relative` FICA: o card se ancora nela, e como a pilula mede a
       largura do shell, a borda direita dela e a borda util da tela. */
  }
  .nav-toggle { display: flex; }
  .nav-toggle span { width: 20px; transition: transform .28s var(--ease); }
  /* Duas barras viram X: uma desce meia distancia e gira, a outra sobe e gira
     ao contrario. O `gap` de 6px define o percurso de cada uma. */
  .nav-toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle.is-open span:last-child  { transform: translateY(-4px) rotate(-45deg); }

  /* O PAINEL NAO PODE USAR `display: none` PARA FECHAR: display nao anima, e
     era isso que fazia o card aparecer e sumir de um quadro para o outro.
     Fechado ele fica invisivel e fora do fluxo de toque — `visibility` e
     `pointer-events` —, mas continua existindo para a transicao ter o que
     interpolar.

     Ele entra descendo 8px e crescendo de 96%, a partir do canto de cima a
     direita: o ponto onde o botao esta. E o gesto de algo que saiu dali, e nao
     de um painel que apareceu no meio da tela.

     A saida e mais rapida que a entrada (.16s contra .26s) — sair e resposta a
     um toque que ja foi dado, e esperar por ela e o que faz um menu parecer
     lento. */
  .site-nav {
    display: flex;
    flex-direction: column;
    /* `stretch` E O PAR DO `display: block` DO ITEM. A regra base do nav usa
       `align-items: center` para a barra horizontal do desktop; herdada aqui,
       ela encolhia cada item ate a largura do texto — medido, 114, 94 e 214px
       num card de 232 —, e a faixa clicavel voltava a ser a palavra. */
    align-items: stretch;
    position: absolute;
    top: calc(100% + .625rem);
    right: 0;
    width: min(66vw, 15.25rem);
    padding: .5rem;
    border-radius: 20px;
    border: 1px solid var(--bone-2);
    gap: 0;

    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px) scale(.96);
    transform-origin: 100% 0;
    transition: opacity .16s var(--ease), transform .16s var(--ease),
                visibility 0s linear .16s;
  }
  .site-nav.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: none;
    transition: opacity .26s var(--ease), transform .26s cubic-bezier(.2, .9, .3, 1.08),
                visibility 0s;
    display: flex;
    flex-direction: column;
    position: absolute;
    /* a altura da pilula mais a folga */
    top: calc(100% + .625rem);
    right: 0;
    width: min(66vw, 15.25rem);
    padding: .5rem;
    border-radius: 20px;
    background: var(--paper);
    border: 1px solid var(--bone-2);
    /* 14.5rem, e nao 18.5: com o card medindo quase 80% da tela o botao de
       contato herdava a mesma largura e ficava enorme — um CTA de 296px num
       telefone de 390. Os dois encolheram juntos: o card continua respeitando
       o item mais longo ("Report CI PowerComm 2026") em duas linhas, e o botao
       para de dominar a tela. */
    box-shadow: 0 12px 32px rgba(26, 26, 26, .12), 0 2px 6px rgba(26, 26, 26, .06);
    gap: 0;
  }
  /* O LAYOUT DOS ITENS NAO PODE DEPENDER DO ESTADO ABERTO. Estas regras
     estavam presas a `.is-open`, e por isso o card FECHADO media outra coisa:
     com os links inline e sem padding, ele tinha 85px em vez de 198. O
     js/main.js mede a altura antes de abrir para posicionar o botao de
     contato, e media os 85 — o botao nascia 101px dentro do card.

     `display: block` tambem e o que da a area de toque: o `.site-nav a` da
     regra base e inline, entao o alvo era a PALAVRA, e quem tocasse na altura
     do item mas fora do texto nao acionava nada. Em bloco, o alvo e a faixa
     inteira.

     15px e nao 16: em 16 o item mais longo ("Report CI PowerComm 2026")
     quebrava em duas linhas. */
  .site-nav a {
    font-size: .9375rem;
    display: block;
    padding: .875rem 1rem;
    border-radius: 12px;
  }
  .site-nav.is-open a { opacity: 1; }
  .site-nav.is-open a:active { background: var(--bone); }

  /* O CTA vem logo abaixo do card, na mesma largura. A referencia nao tem
     botao nenhum, mas aqui ele e a unica acao da pagina.
     O deslocamento e MEDIDO: o card fecha em 179px — tres itens de 54 mais 8
     de padding em cima e embaixo — e 12 de respiro. Um quarto item no menu
     soma 54px aqui. */
  /* O botao segue o card, com 60ms de atraso: os dois entram como um bloco,
     mas em sequencia — e o que dá a leitura de que ele pertence ao painel. */
  .btn-contato {
    display: inline-flex;
    position: absolute;
    /* o `top` e reescrito pelo js/main.js com a altura real do card; este
       valor e so o ponto de partida antes do primeiro clique */
    top: calc(100% + .625rem);
    right: 0;
    justify-content: center;
    height: 44px;
    width: min(66vw, 15.25rem);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    /* O MESMO GESTO DO CARD: sobe 8px e encolhe um tico, a partir do canto de
       cima a direita. Antes o `transform` era usado para POSICIONAR o botao
       (o JS escrevia um translateY com a altura do card), e por isso ele nao
       podia animar — entrava e saia aos solavancos. Agora a posicao e do
       `top`, escrito pelo js/main.js, e o transform fica livre para o gesto. */
    transform: translateY(-8px) scale(.96);
    transform-origin: 100% 0;
    transition: opacity .14s var(--ease), transform .14s var(--ease),
                visibility 0s linear .14s;
  }
  .header-pill:has(.site-nav.is-open) .btn-contato {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: none;
    transition: opacity .24s var(--ease) .06s,
                transform .26s cubic-bezier(.2, .9, .3, 1.08) .06s,
                visibility 0s;
    position: absolute;
    top: calc(100% + .625rem);
    right: 0;
    justify-content: center;
    height: 44px;
    width: min(66vw, 15.25rem);
    /* O `translateY` E POSTO PELO js/main.js, medindo a altura real do card no
       momento de abrir. Fixo aqui ele nao funciona: o item mais longo quebra
       em duas linhas conforme a largura da tela, e cada quebra desloca 25px —
       o botao ja apareceu por cima do card duas vezes por causa disso. */
  }
  .quote { margin-left: 0; }
  .quote-mark { position: static; margin-bottom: .75rem; }
  .quote-by { margin-left: 0; }
  .doc h3 { flex-direction: column; align-items: flex-start; gap: .625rem; }

  /* Sem .rail sticky nesse breakpoint, não há dois elementos fixos
     competindo — o header pode ficar visível o case inteiro, senão o
     corpo do texto fica sem nenhuma marca PowerComm. */
  .site-header.is-hidden {
    opacity: 1;
    transform: none;
    filter: none;          /* sem o desfoque da saída: aqui ela não acontece */
    pointer-events: auto;
  }
}

@media (max-width: 620px) {
  :root { --folga-header: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}