/* ============================================================
   Grupo Karppa, base visual escura do site novo (etapa 1 do rebranding)

   Valores tirados do quadro visual aprovado (Main, Sistema e Formação).
   As páginas novas carregam SÓ este arquivo e o assets/js/movimento.js.
   O manual vivo, com cada peça funcionando, fica em /amostra/.

   Nomes em português de propósito: o styles.css de hoje já usa .btn,
   .card, .reveal e .eyebrow, e o cabeçalho e o rodapé novos vão morar
   em páginas que ainda carregam ele (etapa 4).

   Do quadro para a base:
     .card                       vira  .cartao
     .btn                        vira  .botao
     .btn-primary                vira  .botao-laranja
     .btn-white                  vira  .botao-branco
     .btn-ghost                  vira  .botao-contorno
     botão pequeno do cabeçalho  vira  .botao-p
     .eyebrow                    vira  .rotulo
     .grain                      vira  .grao
     .w (dentro do título)       vira  .palavra, dentro de um título .desfoque
     .reveal                     vira  .revelar
     .draw                       vira  .revelar.revelar-linha
     .tmarquee                   vira  .faixa > .faixa-trilho
     .tmarquee.rev               vira  .faixa-trilho.faixa-volta
     .beam                       vira  .feixe
     .halo                       vira  .halo
     .seg / .thumb               vira  .chave / .chave-pino
     .caret                      vira  .cursor
     cabeçalho com estilo inline vira  .cab e .cab-*
     rodapé com estilo inline    vira  .rod e .rod-*
   Nomes que a base criou além do quadro: .miolo, .secao, .secao-alt,
   .secao-topo, .pilha, .fundo-abertura, .fundo-fechamento, .t-abertura,
   .t-secao, .t-fechamento, .t-cartao, .apoio, .botoes, .grade,
   .depo (cartão de depoimento), .escrita, .so-leitor, .pular, e as peças
   visuais .icone, .lista-check, .brilho, .etiqueta e .flutua.

   Revisão de 21/10/2026 (pedido do Nícolas ao ver as primeiras páginas):
   títulos menores, menos respiro entre os blocos e o laranja também como
   destaque (a parte em itálico do título, o rótulo, os ícones e os vistos),
   no lugar do cinza. A regra antiga era laranja só no botão principal.

   Regra de ouro do movimento: nada aqui esconde conteúdo à espera do
   JavaScript. Quem esconde o que vai ser revelado é o próprio
   movimento.js, e só quando ele roda.
   ============================================================ */

/* ---------- 1. Fonte (as mesmas 12 do styles.css) ---------- */
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRounded-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRounded-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRounded-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRounded-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRounded-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRounded-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRoundedOblique-Regular.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRoundedOblique-Medium.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRoundedOblique-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRoundedOblique-Bold.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRoundedOblique-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archopada Rounded";
  src: url("../fonts/ArchopadaRoundedOblique-Black.woff2") format("woff2");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ---------- 2. Variáveis ---------- */
:root {
  --fonte: "Archopada Rounded", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fundo em degraus, do mais escuro ao mais claro */
  --fundo-rodape: #030405;
  --fundo: #050608;
  --fundo-alt: #08090c;
  --fundo-cartao-baixo: #0a0b0f;
  --fundo-cartao-alto: #0f1117;

  /* texto e seus tons */
  --texto: #f5f5f7;
  --texto-apoio: rgba(245, 245, 247, .6);
  --texto-rotulo: rgba(245, 245, 247, .5);
  --texto-apagado: rgba(245, 245, 247, .42);

  /* bordas */
  --borda-05: rgba(255, 255, 255, .05);
  --borda-06: rgba(255, 255, 255, .06);
  --borda-07: rgba(255, 255, 255, .07);
  --borda-08: rgba(255, 255, 255, .08);
  --borda-16: rgba(255, 255, 255, .16);

  /* marca */
  --laranja: #e63905;
  --laranja-hover: #c42e1f;
  --laranja-claro: #fe7959;   /* luz da borda */
  --destaque: #fe7959;        /* texto e ícone em destaque: itálico do título, rótulo, vistos */
  --destaque-fundo: rgba(254, 121, 89, .12);
  --destaque-borda: rgba(254, 121, 89, .24);
  --azul: #1c229c;
  --azul-vivo: #2738bf;       /* degradês */
  --tinta: #0a0a12;           /* texto do botão branco */

  /* raios */
  --raio: 24px;
  --raio-g: 28px;
  --raio-pilula: 999px;

  /* movimento */
  --curva: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--texto); }
a:hover { color: #ffffff; }

button { font-family: inherit; }

p { margin: 0; }

/* foco bem visível (o quadro não tem, a base precisa ter) */
:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* some da tela e o leitor de tela lê */
.so-leitor {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Pular para o conteúdo": só aparece no foco do teclado */
.pular {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--raio-pilula);
  background: var(--texto);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.pular:focus,
.pular:focus-visible {
  transform: none;
  color: var(--tinta);
}

/* ---------- 4. Estrutura ---------- */
.miolo {
  width: 100%;
  max-width: calc(1240px + 2 * max(20px, 5vw));
  margin-inline: auto;
  padding-inline: max(20px, 5vw);
}

.secao {
  position: relative;
  padding-block: clamp(56px, 7.5vw, 104px);
  /* corta o que passa para os lados (luz difusa, etiqueta solta) sem
     criar rolagem: com clip, o cabeçalho fixo continua funcionando */
  overflow-x: clip;
}

.secao-alt {
  background: var(--fundo-alt);
  border-top: 1px solid var(--borda-05);
}

/* degradê da abertura (azul vindo do canto de cima) */
.fundo-abertura {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 70% at 15% 0%, rgba(39, 56, 191, .38) 0%, rgba(39, 56, 191, 0) 60%),
    var(--fundo);
}

/* degradê do fechamento (laranja e azul subindo do pé) */
.fundo-fechamento {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 70% at 50% 120%, rgba(230, 57, 5, .3) 0%, rgba(230, 57, 5, 0) 65%),
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(39, 56, 191, .4) 0%, rgba(39, 56, 191, 0) 70%),
    var(--fundo);
}

/* bloco de abertura de cada seção: rótulo, título e parágrafo */
.secao-topo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.secao-topo-centro {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* os blocos de uma seção um embaixo do outro (topo, conteúdo, nota),
   com o respiro padrão entre eles */
.pilha {
  display: flex;
  flex-direction: column;
  gap: var(--pilha-espaco, clamp(28px, 3.4vw, 44px));
}

/* grade que vira coluna única no celular */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grade-min, 300px)), 1fr));
  gap: var(--grade-espaco, 16px);
}

/* ---------- 5. Títulos ---------- */
h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* a parte em itálico do título vai em laranja: é o destaque da frase */
h1 em, h2 em, h3 em,
.t-abertura em, .t-secao em, .t-fechamento em, .t-cartao em {
  font-style: italic;
  color: var(--destaque);
}

.t-abertura {
  font-size: clamp(2.375rem, 3.6vw + 1rem, 4rem);      /* 38 a 64 px */
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.t-secao {
  font-size: clamp(1.875rem, 2.2vw + 1rem, 2.75rem);   /* 30 a 44 px */
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.t-fechamento {
  font-size: clamp(2.125rem, 2.8vw + 1rem, 3.25rem);   /* 34 a 52 px */
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.t-cartao {
  font-size: clamp(1.3125rem, .7vw + 1rem, 1.625rem);  /* 21 a 26 px */
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* parágrafo de abertura */
.apoio {
  font-size: clamp(1.0625rem, .15vw + 1rem, 1.125rem); /* 17 a 18 px */
  line-height: 1.6;
  color: var(--texto-apoio);
  max-width: 580px;
}

/* ---------- 6. Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--raio-pilula);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--curva), background-color .2s, border-color .2s, color .2s;
}
.botao:active { transform: scale(.98); }
.botao:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: var(--raio-pilula);
}

.botao-laranja {
  position: relative;
  overflow: hidden;
  background: var(--laranja);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 30px rgba(230, 57, 5, .28);
}
.botao-laranja:hover { background: var(--laranja-hover); color: #ffffff; }
/* o brilho que passa a cada 5 s */
.botao-laranja::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 65%);
  transform: translateX(-130%);
  animation: brilho 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brilho {
  0%, 62% { transform: translateX(-130%); }
  86%, 100% { transform: translateX(130%); }
}

.botao-branco { background: var(--texto); color: var(--tinta); }
.botao-branco:hover { background: #ffffff; color: var(--tinta); }

.botao-contorno {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borda-16);
}
.botao-contorno:hover { border-color: rgba(255, 255, 255, .4); color: #ffffff; }

.botao-p { padding: 8px 18px; font-size: 14px; }

/* fila de botões: lado a lado no computador, empilhados no celular */
.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 520px) {
  .botoes > .botao:not(.botao-p) { flex: 1 1 100%; }
}

/* ---------- 7. Cartão e rótulo ---------- */
.cartao {
  background: linear-gradient(180deg, var(--fundo-cartao-alto) 0%, var(--fundo-cartao-baixo) 100%);
  border: 1px solid var(--borda-07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  border-radius: var(--raio);
}

.rotulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--destaque);
}

/* ---------- 8. Grão de filme ---------- */
.grao {
  position: absolute;
  inset: 0;
  background-image: url("../img/grao.webp");
  background-repeat: repeat;
  background-size: 128px 128px;
  opacity: .55;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* o conteúdo da seção fica por cima do grão */
.grao ~ * {
  position: relative;
  z-index: 1;
}

/* ---------- Peças visuais (revisão de 21/10) ----------
   Para a página não ser só texto no fundo preto. */

/* ícone laranja num quadradinho escuro (cartões, listas, passos) */
.icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--destaque);
  background: linear-gradient(180deg, rgba(254, 121, 89, .16) 0%, rgba(254, 121, 89, .05) 100%);
  border: 1px solid var(--destaque-borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.icone svg { display: block; width: 22px; height: 22px; }
.icone-p { width: 32px; height: 32px; border-radius: 9px; }
.icone-p svg { width: 16px; height: 16px; }

/* lista com visto laranja (o que vem em cada plano, o que está incluso) */
.lista-check {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-check > li {
  position: relative;
  padding-left: 30px;
  line-height: 1.45;
}
.lista-check > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7959' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    var(--destaque-fundo);
}

/* luz difusa atrás de uma imagem ou de uma tela. O pai precisa de
   position: relative, e a imagem vai por cima com position: relative.
   O tamanho vem de --brilho-tamanho. */
.brilho {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: var(--brilho-tamanho, 560px);
  max-width: 140%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(circle at 42% 40%, rgba(230, 57, 5, .4) 0%, rgba(230, 57, 5, 0) 46%),
    radial-gradient(circle at 60% 62%, rgba(39, 56, 191, .55) 0%, rgba(39, 56, 191, 0) 60%);
}
.brilho-laranja { background: radial-gradient(circle, rgba(230, 57, 5, .42) 0%, rgba(230, 57, 5, 0) 62%); }
.brilho-azul { background: radial-gradient(circle, rgba(39, 56, 191, .6) 0%, rgba(39, 56, 191, 0) 62%); }
/* a luz cresce e diminui devagar */
.brilho.respira { animation: brilho-respira 9s ease-in-out infinite; }
@keyframes brilho-respira {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* etiqueta: a pílula branca com ícone laranja do quadro (as categorias
   que flutuam em volta do título, um aviso em cima de uma tela).
   Para girar a etiqueta e ainda fazer flutuar, o .flutua vai num
   elemento de fora e o giro na própria etiqueta. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--raio-pilula);
  background: rgba(245, 245, 247, .95);
  color: var(--tinta);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.etiqueta-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--laranja);
  color: #ffffff;
}
.etiqueta-icone svg { display: block; width: 15px; height: 15px; }

/* sobe e desce devagar; o atraso vem de --flutua-atraso */
.flutua {
  animation: flutua 7s ease-in-out infinite;
  animation-delay: var(--flutua-atraso, 0s);
}
@keyframes flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------- 9. Palavra saindo do desfoque ----------
   CSS puro: anima no carregamento sem esperar o JavaScript.
   Cada palavra leva --i (0, 1, 2...) para o atraso em escada. */
.desfoque .palavra {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(16px);
  animation: palavra-entra 1.1s var(--curva) forwards;
  animation-delay: calc(var(--i, 0) * 80ms + 50ms);
}
@keyframes palavra-entra {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- 10. Revelar na rolagem ----------
   Quem esconde e revela é o movimento.js, e só o que está abaixo da
   tela. Sem o script, nada fica escondido. Ele usa a animação de
   script do navegador (element.animate), que não briga com a transição
   nem com a animação que a página der ao mesmo elemento (o cartão que
   sobe no hover, a borda que gira) e não deixa nada preso no fim.
   O ponto de partida vem destas variáveis, com o padrão entre
   parênteses: --revelar-x (0px), --revelar-y (48px), --revelar-giro
   (0deg) e --revelar-atraso (0s). Duração de .9s, na --curva. */
/* a linha que se desenha da esquerda (parte de scaleX(0)) */
.revelar-linha { transform-origin: left center; }

/* ---------- 11. Faixa rolando sem parar ----------
   Nos depoimentos, uma linha só (pedido do Nícolas em 21/10): a
   .faixa-volta continua aqui para outros usos, como uma faixa de logos.
   Sem JavaScript (ou com menos movimento): parada e arrastável de lado.
   O movimento.js duplica os itens, calcula --faixa-tempo e
   --faixa-volta e marca .faixa--rodando. O espaço entre os itens é
   MARGEM do item, nunca gap, para a volta fechar sem pulo. */
.faixa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.faixa-trilho {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 8%;
  padding-inline: 8%;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.faixa-trilho::-webkit-scrollbar { height: 6px; }
.faixa-trilho::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 6px; }
.faixa-trilho::-webkit-scrollbar-track { background: transparent; }
.faixa-trilho > * {
  flex: 0 0 auto;
  margin: 0 16px 0 0;
  scroll-snap-align: start;
}

.faixa--rodando .faixa-trilho {
  width: max-content;
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
  animation: faixa-anda var(--faixa-tempo, 90s) linear infinite;
}
.faixa--rodando .faixa-volta { animation-direction: reverse; }
.faixa--rodando .faixa-trilho:hover,
.faixa--rodando:focus-within .faixa-trilho,
.faixa.fora-da-tela .faixa-trilho {
  animation-play-state: paused;
}
@keyframes faixa-anda {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--faixa-volta, 0px)), 0, 0); }
}

/* cartão de depoimento (o que roda na faixa) */
.depo {
  width: min(360px, 80vw);
  margin: 0;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.depo-frase {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(245, 245, 247, .82);
}
.depo-quem {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  font-size: 14px;
  line-height: 1.35;
  color: var(--texto-rotulo);
}
.depo-quem strong { color: var(--texto); font-weight: 700; }
.depo-foto {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
@media (max-width: 520px) {
  .depo { padding: 22px; }
}

/* ---------- 12. Bordas com luz ----------
   Um elemento só: borda transparente de 1 px, o recheio pintado no
   padding-box e a luz girando no border-box. Para trocar o recheio,
   redefina --dentro (camadas terminadas em padding-box). */
@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* luz laranja clara correndo na borda (cartão Pro do Sistema), 6 s por volta */
.feixe {
  --dentro:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(230, 57, 5, .16) 0%, rgba(230, 57, 5, 0) 70%) padding-box,
    linear-gradient(180deg, #12141c 0%, #0b0c11 100%) padding-box;
  border: 1px solid transparent;
  border-radius: calc(var(--raio-g) + 1px);
  background:
    var(--dentro),
    conic-gradient(from var(--ang, 0deg),
      rgba(254, 121, 89, 0) 0deg,
      rgba(254, 121, 89, 0) 250deg,
      rgba(254, 121, 89, .95) 320deg,
      rgba(254, 121, 89, 0) 360deg) border-box,
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) border-box;
  animation: borda-gira 6s linear infinite;
}

/* borda em degradê azul e laranja girando (cartão do formulário da Formação), 9 s por volta */
.halo {
  --dentro: linear-gradient(180deg, #11131b 0%, #0a0b10 100%) padding-box;
  border: 1px solid transparent;
  border-radius: 31px;
  background:
    var(--dentro),
    conic-gradient(from var(--ang, 0deg),
      rgba(39, 56, 191, .95),
      rgba(254, 121, 89, .9),
      rgba(39, 56, 191, .15),
      rgba(39, 56, 191, .95)) border-box;
  animation: borda-gira 9s linear infinite;
}

@keyframes borda-gira {
  to { --ang: 360deg; }
}
.feixe.fora-da-tela,
.halo.fora-da-tela {
  animation-play-state: paused;
}

/* ---------- 13. Chave deslizante ----------
   O pino lê --chave-n (quantas opções) e --chave-i (qual está ativa).
   O movimento.js põe as duas; sem ele, fica na primeira. */
.chave {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 4px;
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--borda-08);
}
.chave > button {
  position: relative;
  z-index: 2;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--texto-apoio);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s;
}
.chave > button[aria-pressed="true"] { color: var(--tinta); }
.chave > button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: var(--raio-pilula);
}
.chave-pino {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--chave-n, 2));
  border-radius: var(--raio-pilula);
  background: var(--texto);
  transform: translateX(calc(100% * var(--chave-i, 0)));
  transition: transform .45s var(--curva);
  pointer-events: none;
}
/* chave de muitas opções (os 4 perfis da Formação): no celular vira
   grade de 2 colunas e a opção ativa ganha o fundo claro */
@media (max-width: 640px) {
  .chave-quebra {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--raio);
  }
  .chave-quebra .chave-pino { display: none; }
  .chave-quebra > button { padding: 12px 14px; white-space: normal; }
  .chave-quebra > button[aria-pressed="true"] { background: var(--texto); }
}

/* ---------- 14. Escrita automática e número ---------- */
.cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -3px;
  background: var(--texto);
  animation: cursor-pisca 1s steps(2) infinite;
}
@keyframes cursor-pisca {
  50% { opacity: 0; }
}

.escrita { white-space: pre-line; }
/* o movimento.js põe o texto pronto, invisível, por baixo do que está
   sendo escrito: assim a caixa não muda de altura enquanto escreve */
.escrita-caixa { display: grid; }
.escrita-caixa > .escrita-molde,
.escrita-caixa > .escrita-viva { grid-area: 1 / 1; }
.escrita-molde { visibility: hidden; }

[data-numero],
[data-valor-mensal],
.numero {
  font-variant-numeric: tabular-nums;
}

/* ---------- 15 e 16. Cabeçalho e rodapé ----------
   Moram em assets/css/cab-rod.css desde a etapa 4 (22/10/2026): as páginas
   antigas (blog, contato, privacidade, 404) também usam o menu e o rodapé
   novos e carregam só aquele arquivo, sem o base.css. Toda página nova
   carrega os dois. */

/* ---------- 17. Menos movimento ----------
   Para tudo: o que anima aparece pronto e parado. */
@media (prefers-reduced-motion: reduce) {
  .botao-laranja::after { animation: none; display: none; }

  .desfoque .palavra {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }

  /* o revelar nem começa: o movimento.js não esconde nada com menos movimento */

  .faixa--rodando .faixa-trilho { animation: none; }

  .feixe, .halo { animation: none; }

  .cursor { display: none; animation: none; }

  .flutua, .brilho.respira { animation: none; }

  .chave-pino { transition: none; }
  .chave > button { transition: none; }

  .botao, .cab-link, .rod-link { transition: none; }
  .botao:active { transform: none; }
}