/* =========================================================
   Black 2026 (PF) — Contabilidade Facilitada
   Mesma identidade da Esquenta Black: preto profundo + laranja CF
   (#FF9933), títulos em Squada One, texto em Sora. CTA verde, como
   na maquete.
   ========================================================= */

:root {
  --fundo: #050403;
  --fundo-2: #0b0806;
  --texto: #f6f1ea;
  --texto-2: #e3d8cc;
  --apagado: #a89b8e;
  --laranja: #ff9933;
  --laranja-claro: #ffb45c;
  --laranja-luz: #ffd08a;
  --laranja-forte: #f26a0c;
  --verde: #00ff00;
  --erro: #ff6b5a;
  --linha: rgba(255, 255, 255, 0.08);
  --linha-laranja: rgba(255, 153, 51, 0.24);

  --gradiente-laranja: linear-gradient(180deg, #ffb45c 0%, #ff9933 45%, #f26a0c 100%);
  --gradiente-texto: linear-gradient(92deg, #ffd08a 0%, #ff9933 45%, #f26a0c 100%);
  --gradiente-verde: linear-gradient(180deg, #74ff74 0%, #00ff00 42%, #00d80b 100%);

  --fonte-titulo: "Squada One", "Arial Narrow", sans-serif;
  --fonte-texto: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  --curva-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gutter: 16px;
  /* respiro acima e abaixo de cada dobra: entre o conteúdo de duas dobras
     seguidas fica sempre o dobro deste valor */
  --respiro-dobra: clamp(64px, 7.5vw, 96px);
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--fundo);
}

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

body.lead-aberto { overflow: hidden; }

img, svg, picture { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
strong { font-weight: 700; color: var(--texto); }

::selection { background: var(--laranja); color: #1a0a00; }

/* ---------- Barra de rolagem ----------
   Chrome, Edge e Safari: polegar no gradiente laranja, que acende ao passar
   o mouse e ao arrastar. A borda transparente afasta o polegar do trilho.
   O Firefox não aceita esses pseudo-elementos e fica só com as cores. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fundo); }
::-webkit-scrollbar-track:vertical { box-shadow: inset 1px 0 0 var(--linha); }
::-webkit-scrollbar-track:horizontal { box-shadow: inset 0 1px 0 var(--linha); }
::-webkit-scrollbar-corner { background: var(--fundo); }

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--gradiente-laranja) padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.25);
}
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(90deg, #ffb45c 0%, #ff9933 45%, #f26a0c 100%) padding-box; }
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe2b0 0%, #ffb45c 40%, #ff9933 100%) padding-box;
  box-shadow: inset 0 0 6px rgba(255, 226, 176, 0.9);
}
::-webkit-scrollbar-thumb:active {
  border-width: 2px;
  background: linear-gradient(180deg, #fff1d6 0%, #ffd08a 35%, #ffb45c 100%) padding-box;
  box-shadow: inset 0 0 8px #fff1d6;
}

@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--laranja) var(--fundo); }
}

:focus-visible {
  outline: 2px solid var(--laranja-luz);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* texto dourado */
.destaque {
  background: var(--gradiente-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Atmosfera ---------- */
/* 100vh é a altura com a barra do navegador recolhida: o canvas não muda de
   tamanho quando a barra aparece ou some na rolagem do celular */
.brasas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.luz-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 130, 30, 0.1), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
  translate: var(--cx, -999px) var(--cy, -999px);
  will-change: translate;
}
.luz-cursor.is-ativa { opacity: 1; }

.grao {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grao 1.2s steps(6) infinite;
}

@keyframes grao {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

footer, .cruzamento { position: relative; z-index: 2; }

/* ---------- Tarjas ---------- */
.tarja {
  position: relative;
  overflow: hidden;
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.tarja__trilho {
  display: flex;
  width: max-content;
  animation: marquise 32s linear infinite;
}
.tarja__trilho--reverso { animation-direction: reverse; animation-duration: 38s; }

.tarja__grupo {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding-right: 0.75em;
}

.tarja b { font-weight: 400; font-size: 1.15em; transform: translateY(-0.03em); }

@keyframes marquise { to { transform: translateX(-50%); } }

/* ---------- Faixas em imagem (artes da Black November) ----------
   Cada arquivo tem exatamente um período da arte (largura = altura ×
   --proporcao). O trilho é uma fita com a imagem repetida, um período mais
   larga que a faixa, e anda um período por volta: o fim de uma volta é
   idêntico ao começo, e o laço fica sem emenda. */
.faixa {
  --altura: 44px;
  --periodo: calc(var(--altura) * var(--proporcao));
  position: relative;
  height: var(--altura);
  overflow: hidden;
  user-select: none;
}
.faixa__trilho {
  width: calc(100% + var(--periodo));
  height: 100%;
  background: var(--arte) 0 0 / var(--periodo) 100% repeat-x;
  animation: faixa-anda calc(var(--proporcao) * 1.5s) linear infinite;
}
.faixa__trilho--reverso { animation-direction: reverse; }

@keyframes faixa-anda { to { transform: translateX(calc(var(--periodo) * -1)); } }

.faixa--laranja-2pos { --arte: url("../img/faixa-laranja-2pos.webp"); --proporcao: 11.923; background: #fa862e; }
.faixa--laranja-vitalicio { --arte: url("../img/faixa-laranja-vitalicio.webp"); --proporcao: 11.8; background: #fa862e; }
.faixa--preta-2pos { --arte: url("../img/faixa-preta-2pos.png"); --proporcao: 11.862; background: #000; }
.faixa--preta-vitalicio { --arte: url("../img/faixa-preta-vitalicio.png"); --proporcao: 11.8; background: #000; }

.faixa--laranja-2pos,
.faixa--laranja-vitalicio { box-shadow: 0 14px 44px -10px rgba(255, 120, 20, 0.55); }
.faixa--preta-2pos,
.faixa--preta-vitalicio { border-block: 1px solid rgba(255, 153, 51, 0.45); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); }

/* faixa do topo, reta como na maquete */
.faixa--topo {
  --altura: clamp(36px, 3.6vw, 48px);
  z-index: 3;
  animation: tarja-entra 0.9s var(--curva-saida) both;
}

@keyframes tarja-entra {
  from { transform: translateY(-100%); }
  to { transform: none; }
}

.faixa--rodape { --altura: clamp(36px, 3.4vw, 46px); z-index: 2; }

/* reflexo que percorre a fita, por transform (sem repintar) */
.faixa::after,
.tarja::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 250%;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  animation: reflexo 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes reflexo {
  0%, 20% { transform: translateX(-90%); }
  60%, 100% { transform: translateX(30%); }
}

/* na Squada One o "1" parece um "I": o numeral vem da Sora */
.numeral {
  font-family: var(--fonte-texto);
  font-size: 0.86em;
  font-weight: 800;
  letter-spacing: 0;
}

/* tarjas cruzadas entre a dobra e o rodapé */
.cruzamento {
  height: clamp(110px, 15vw, 200px);
  margin-top: clamp(-40px, -3vw, -16px);
  overflow: clip;
  pointer-events: none;
}
.cruzamento .faixa {
  --altura: clamp(40px, 4.4vw, 60px);
  position: absolute;
  top: 50%;
  left: -8%;
  width: 116%;
}
.faixa--x1 { transform: translateY(-50%) rotate(-4deg); z-index: 2; }
.faixa--x2 { transform: translateY(-50%) rotate(3.2deg); z-index: 1; }

/* ---------- Botões ---------- */
.botao {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 16px 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s var(--curva-saida), box-shadow 0.35s, color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.botao > .icone { transition: transform 0.4s var(--curva-mola); }
.botao:active { transform: scale(0.97); }

.botao--primario {
  color: #031a00;
  background: var(--gradiente-verde);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(0, 90, 0, 0.35),
    0 12px 32px -10px rgba(0, 255, 0, 0.55),
    0 0 70px -18px rgba(0, 255, 0, 0.5);
}
.botao--primario:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(0, 90, 0, 0.35),
    0 18px 40px -10px rgba(0, 255, 0, 0.7),
    0 0 90px -12px rgba(0, 255, 0, 0.65);
}
.botao--primario:hover > .icone { transform: translateX(4px); }

.botao__brilho {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: brilho-botao 4.2s ease-in-out infinite;
}

@keyframes brilho-botao {
  0%, 55% { transform: translateX(-130%); }
  85%, 100% { transform: translateX(130%); }
}

.botao--grande { font-size: clamp(14px, 4.2vw, 17.5px); padding: 21px 30px; }

/* celular estreito: o texto do botão cabe numa linha só */
@media (max-width: 379px) {
  .botao--grande { padding-inline: 16px; font-size: 13.5px; letter-spacing: 0.01em; }
}
@media (max-width: 339px) {
  .heroi__acao .botao > .icone { display: none; }
}
.botao--bloco { width: 100%; }
.botao--compacto { font-size: 12.5px; padding: 12px 16px; gap: 0.45em; }

.botao--texto {
  background: none;
  color: var(--apagado);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 14px;
  padding: 12px;
}
.botao--texto:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 4px; }

.botao__carregando {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2.5px solid rgba(3, 26, 0, 0.25);
  border-top-color: #031a00;
  border-radius: 50%;
  opacity: 0;
  animation: girar-simples 0.7s linear infinite;
}
.botao.is-carregando { pointer-events: none; }
.botao.is-carregando .botao__texto,
.botao.is-carregando > .icone { opacity: 0; }
.botao.is-carregando .botao__carregando { opacity: 1; }

@keyframes girar-simples { to { transform: rotate(360deg); } }

/* ondas que saem do botão principal, como um chamado */
.halo-cta {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
}
.halo-cta::before,
.halo-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--verde);
  opacity: 0;
  pointer-events: none;
  animation: halo 2.8s var(--curva-saida) infinite;
}
.halo-cta::after { animation-delay: 1.4s; }
.halo-cta .botao { width: 100%; }

@keyframes halo {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.07, 1.45); opacity: 0; }
}

/* ---------- Pequenos componentes ---------- */
.ponto-vivo {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 12px var(--verde);
}
.ponto-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--verde);
  animation: pulso 1.8s var(--curva-saida) infinite;
}

@keyframes pulso {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(3); opacity: 0; }
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes respirar {
  0%, 100% { opacity: 0.85; scale: 1; }
  50% { opacity: 1; scale: 1.06; }
}

/* =========================================================
   Dobra única
   O herói não cria contexto de empilhamento (sem z-index): o fundo fica
   atrás das brasas e o conteúdo, na frente delas.
   ========================================================= */
.heroi {
  position: relative;
  display: block;
  padding-bottom: clamp(56px, 8vw, 96px);
  overflow: clip;
}

.heroi__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 88% 12%, rgba(242, 96, 12, 0.24), transparent 70%),
    radial-gradient(55% 40% at 0% 72%, rgba(242, 96, 12, 0.1), transparent 70%),
    radial-gradient(60% 30% at 50% 100%, rgba(242, 96, 12, 0.12), transparent 70%),
    linear-gradient(180deg, #0a0706 0%, var(--fundo) 100%);
}

.heroi__grade {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(30px, 6vw, 44px);
}

.heroi__texto { position: relative; z-index: 1; }

/* ---- assinatura: Black November | Contabilidade Facilitada | FBC ---- */
.assinatura {
  display: block;
  width: min(100%, 440px);
  margin-inline: auto;
  animation: surgir 0.9s 0.2s var(--curva-saida) both;
}
.assinatura img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 120, 20, 0.18));
}

/* divisória vertical entre logos (usada em "Quem somos") */
.assinatura__divisor {
  display: block;
  width: 1px;
  height: clamp(44px, 12vw, 58px);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}

/* ---- título ---- */
/* "Contabilidade Facilitada" não quebra (~12,4em): no celular estreito o
   corpo diminui para essa linha caber entre as margens */
.heroi__titulo {
  margin: clamp(28px, 7vw, 40px) 0 16px;
  font-size: min(clamp(27px, 7.3vw, 42px), calc((100vw - 2 * var(--gutter)) / 12.6));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  animation: surgir 0.9s 0.35s var(--curva-saida) both;
}

/* palavras subindo uma a uma (divididas em main.js) */
.heroi__titulo.is-dividido { animation: none; }
.palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.palavra > span {
  display: inline-block;
  animation: palavra-sobe 0.95s var(--curva-saida) both;
  animation-delay: calc(0.35s + var(--i, 0) * 45ms);
}
.heroi__titulo.is-dividido .destaque { background: none; color: inherit; }
/* degradê vertical: cada palavra tem o próprio fundo, e na horizontal
   cada uma começaria clara de novo */
.heroi__titulo.is-dividido .destaque .palavra > span {
  background: linear-gradient(180deg, #ffd08a 15%, #ff9933 55%, #f26a0c 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes palavra-sobe {
  from { transform: translateY(108%) rotate(5deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.heroi__apoio {
  max-width: 40ch;
  color: var(--apagado);
  font-size: clamp(16px, 4.4vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
  animation: surgir 0.9s 0.95s var(--curva-saida) both;
}
/* os três caminhos (Exame, prática, pós) saltam do texto */
.heroi__apoio strong { font-weight: 600; white-space: nowrap; }

/* ---- cartões das ofertas ---- */
.ofertas {
  display: grid;
  gap: 12px;
  margin: clamp(24px, 6vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}
.ofertas > li { display: grid; }

/* o cartão inteiro é um link para a dobra da oferta */
.oferta {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(242, 96, 12, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(12, 9, 7, 0.78);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  animation: surgir 0.9s var(--curva-saida) both;
  animation-delay: calc(1.1s + var(--d, 0) * 0.14s);
  transition: transform 0.5s var(--curva-saida), box-shadow 0.4s, border-color 0.4s;
}

/* holofote que segue o ponteiro */
.oferta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 153, 51, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
}
.oferta:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 153, 51, 0.3);
  box-shadow: 0 28px 50px -26px rgba(0, 0, 0, 0.9), 0 0 50px -24px rgba(255, 120, 20, 0.7);
}
.oferta:hover::before { opacity: 1; }
.oferta:focus-visible { outline-offset: 4px; border-radius: 18px; }

/* seta no canto: aponta para baixo, para a dobra da oferta, e dá um
   toque de tempos em tempos para mostrar que o cartão é clicável */
.oferta__seta {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--linha-laranja);
  border-radius: 50%;
  background: rgba(255, 153, 51, 0.08);
  color: var(--laranja);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.oferta__seta .icone {
  width: 15px;
  height: 15px;
  rotate: 90deg;
  animation: seta-convida 3.2s 3s ease-in-out infinite;
}
.oferta:hover .oferta__seta {
  border-color: var(--laranja);
  background: var(--laranja);
  color: #1a0a00;
}
.oferta:hover .oferta__seta .icone { animation: seta-desce 0.9s ease-in-out infinite; }

@keyframes seta-convida {
  0%, 70%, 100% { transform: none; }
  78% { transform: translateX(3px); }
  86% { transform: translateX(-1px); }
  92% { transform: translateX(2px); }
}
@keyframes seta-desce {
  0%, 100% { transform: none; }
  50% { transform: translateX(3px); }
}

/* cometa de luz contornando o cartão. A máscara deixa só a moldura de 1,5px;
   por dentro dela gira, por transform, um quadrado com o degradê cônico
   (lado de 142% do maior lado, para cobrir a diagonal) */
.oferta__borda {
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  overflow: hidden;
  container-type: size;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.oferta__borda::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 142cqmax;
  height: 142cqmax;
  margin: -71cqmax 0 0 -71cqmax;
  background: conic-gradient(transparent 0 66%, rgba(242, 106, 12, 0.7) 78%, #ffd08a 86%, rgba(255, 153, 51, 0.6) 90%, transparent 96%);
  animation: girar-simples 7s linear infinite;
}
.ofertas > li:nth-child(2) .oferta__borda::before { animation-delay: -3.5s; }

.oferta__divisor {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 153, 51, 0.5), transparent);
}

.oferta__icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 52px;
  color: var(--laranja);
}

/* ∞: laço laranja com um ponto de luz que não para de dar a volta */
.laco { width: 58px; height: auto; overflow: visible; }
.laco path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.laco__base {
  stroke: var(--laranja);
  stroke-width: 2.7;
  filter: drop-shadow(0 0 6px rgba(255, 120, 20, 0.55));
}
.laco__luz {
  stroke: #fff4e0;
  stroke-width: 1.6;
  stroke-dasharray: 12 88;
  filter: drop-shadow(0 0 3px #ffd08a) drop-shadow(0 0 6px #ff9933);
  animation: laco-luz 2.8s linear infinite;
}

@keyframes laco-luz { to { stroke-dashoffset: -100; } }

/* dois capelos: o segundo sai de trás do primeiro e volta */
.capelo {
  position: absolute;
  width: 50px;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 120, 20, 0.35));
  animation: capelo-pula 4.4s var(--curva-saida) infinite;
}
.capelo--bonus {
  opacity: 0;
  animation-name: capelo-bonus;
}

@keyframes capelo-pula {
  0%, 30% { transform: none; }
  38% { transform: translateY(-5px) rotate(-6deg); }
  48%, 100% { transform: none; }
}
@keyframes capelo-bonus {
  0%, 32% { opacity: 0; transform: translate(0, 0) scale(0.7) rotate(0); }
  44% { opacity: 1; transform: translate(9px, -11px) scale(0.86) rotate(14deg); }
  80% { opacity: 1; transform: translate(9px, -11px) scale(0.86) rotate(14deg); }
  92%, 100% { opacity: 0; transform: translate(0, 0) scale(0.7) rotate(0); }
}

.oferta__texto { min-width: 0; }
/* só o título desvia da seta do canto; o texto abaixo usa a largura toda */
.oferta__titulo {
  margin-bottom: 6px;
  padding-right: 28px;
  color: var(--laranja);
  font-family: var(--fonte-titulo);
  font-size: clamp(21px, 5.6vw, 24px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.oferta__texto p {
  color: var(--texto-2);
  font-size: 14.5px;
  line-height: 1.45;
  text-wrap: pretty;
}
.oferta__texto p + p { margin-top: 6px; }
.oferta__texto .oferta__realce,
.oferta__realce {
  color: var(--laranja);
  font-weight: 700;
}

/* o contador é decorativo (aria-hidden): fora da seleção, para que copiar
   o texto traga só o número do visualmente-oculto */
.contador {
  display: inline-block;
  -webkit-user-select: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* sublinhado que se desenha depois da entrada do cartão */
.sublinhado {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  animation: sublinhar 0.9s 2s var(--curva-saida) forwards;
}
@keyframes sublinhar { to { background-size: 100% 2px; } }

/* ---- chamada e botão ---- */
.heroi__acao {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-top: clamp(30px, 7vw, 36px);
  text-align: center;
  animation: surgir 0.9s 1.45s var(--curva-saida) both;
}
.heroi__convite {
  font-size: clamp(16px, 4.4vw, 19px);
  font-weight: 600;
}

/* ---- visual: no celular, foto esmaecida atrás da assinatura ---- */
.heroi__visual {
  --mx: 0;
  --my: 0;
  --sy: 0;
  position: absolute;
  top: -8px;
  right: calc(var(--gutter) * -1 - 12%);
  z-index: 0;
  width: min(86%, 460px);
  aspect-ratio: 1;
  opacity: 0.42;
  pointer-events: none;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 78%);
}

.heroi__vitrine,
.heroi__anel { display: none; }

.heroi__aura {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: -2;
  width: 105%;
  aspect-ratio: 1.2 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 128, 34, 0.55), rgba(242, 90, 12, 0.25) 45%, transparent 75%);
  filter: blur(18px);
  transform: translate(-50%, -50%) rotate(11.3deg);
  animation: respirar 6s ease-in-out infinite;
}

.heroi__especialista {
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: especialista-entra 1.5s 0.2s var(--curva-saida) both;
}
.heroi__especialista img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  max-width: none;
  height: auto;
  translate: calc(-50% + var(--mx) * 12px) calc(var(--sy) * 0.12px + var(--my) * 8px);
}

@keyframes especialista-entra {
  from { opacity: 0; transform: translateY(40px) scale(1.05); filter: blur(8px) brightness(0.4); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---- celular estreito: cartões mais compactos, "Escola Contábil" cabe ao
   lado da seta ---- */
@media (max-width: 379px) {
  .oferta { column-gap: 12px; padding-inline: 14px; }
  .oferta__icone, .laco { width: 46px; }
  .capelo { width: 42px; }
}

/* ---- cartões lado a lado a partir do celular grande ---- */
@media (min-width: 560px) {
  .ofertas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oferta { align-items: start; padding: 20px 16px; column-gap: 14px; }
  .oferta__icone { width: 50px; }
  .laco { width: 50px; }
  .capelo { width: 44px; }
  /* lado a lado, os dois títulos quebram em duas linhas e os textos
     começam na mesma altura */
  .oferta__titulo { max-width: calc(7.2em + 28px); text-wrap: balance; }
}

/* ---- tablet: tudo um pouco maior, ainda em uma coluna ---- */
@media (min-width: 640px) and (max-width: 959px) {
  .heroi__texto { max-width: 680px; margin-inline: auto; }
  .heroi__titulo { font-size: 44px; }
  .heroi__visual { width: 440px; right: -60px; }
}

/* =========================================================
   Computador: texto à esquerda, pôster à direita
   ========================================================= */
@media (min-width: 960px) {
  .heroi { padding-bottom: clamp(40px, 5vw, 72px); }
  .heroi__fundo {
    background:
      radial-gradient(48% 60% at 78% 46%, rgba(242, 96, 12, 0.22), transparent 70%),
      radial-gradient(40% 40% at 0% 100%, rgba(242, 96, 12, 0.1), transparent 70%),
      linear-gradient(180deg, #0a0706 0%, var(--fundo) 100%);
  }

  .heroi__grade {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    column-gap: clamp(16px, 2.4vw, 40px);
    max-width: 1360px;
    min-height: min(calc(100svh - 52px), 900px);
    padding-top: 20px;
  }
  /* contêiner de consulta: o corpo do título acompanha a largura da coluna */
  .heroi__texto { padding-block: 8px; container-type: inline-size; }

  .assinatura { width: min(100%, 500px); margin-inline: 0; }

  /* três linhas, com "Black do Contabilidade Facilitada" inteira na última.
     O corpo é limitado pela largura da coluna (essa linha mede ~16,7em) e
     pela altura da tela: em notebooks baixos o botão continua na primeira dobra */
  .heroi__titulo { margin: 26px 0 16px; font-size: clamp(30px, min(5.7cqi, 6.2svh), 56px); line-height: 1.08; }
  .heroi__titulo .destaque { display: block; white-space: nowrap; }
  .heroi__apoio { max-width: 44ch; font-size: clamp(16px, 1.4vw, 19px); }

  .ofertas { margin-top: 26px; }
  .oferta { padding-block: 18px; }

  /* coluna estreita (notebook pequeno): um cartão por linha, como no celular */
  @container (max-width: 620px) {
    .ofertas { grid-template-columns: minmax(0, 1fr); }
    .oferta { align-items: center; padding: 16px 18px; }
    .oferta__titulo { max-width: none; }
  }

  .heroi__acao { justify-items: start; gap: 12px; margin-top: 26px; text-align: left; }

  /* pôster */
  .heroi__visual {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    aspect-ratio: 0.84 / 1;
    margin-right: calc(var(--gutter) * -0.5);
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .heroi__vitrine,
  .heroi__anel { display: block; }

  /* foto do especialista: presa à base do pôster e sumindo nela */
  .heroi__especialista img {
    top: auto;
    bottom: 0;
    left: 52%;
    width: 104%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
  }
}

/* Vitrine: linhas de logos dos cursos correndo em sentidos alternados
   atrás do especialista. As linhas são montadas em main.js. */
.heroi__vitrine {
  position: absolute;
  inset: -18% -30% -10% -10%;
  z-index: -3;
  display: grid;
  align-content: center;
  gap: 12px;
  opacity: 0.18;
  rotate: -9deg;
  -webkit-mask-image:
    radial-gradient(closest-side at 50% 46%, #000 35%, transparent 100%),
    linear-gradient(180deg, #000 55%, transparent 85%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(closest-side at 50% 46%, #000 35%, transparent 100%),
    linear-gradient(180deg, #000 55%, transparent 85%);
  mask-composite: intersect;
  translate: calc(var(--mx) * -8px) calc(var(--sy) * 0.05px + var(--my) * -6px);
  pointer-events: none;
}

.vitrine__trilho {
  display: flex;
  width: max-content;
  animation: marquise var(--duracao, 60s) linear infinite;
}
.vitrine__linha:nth-child(even) .vitrine__trilho { animation-direction: reverse; }
.vitrine__grupo { display: flex; gap: 12px; padding-right: 12px; }

.vitrine__item {
  display: grid;
  place-items: center;
  width: 180px;
  height: 70px;
  flex: none;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.vitrine__item img {
  width: auto;
  height: auto;
  max-width: 154px;
  max-height: 50px;
  object-fit: contain;
}

.heroi__anel {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: -1;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: conic-gradient(transparent 0 70%, rgba(255, 180, 92, 0.9) 80%, transparent 90%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  animation: girar-simples 9s linear infinite;
  opacity: 0.8;
}
.heroi__anel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 153, 51, 0.18);
}

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* =========================================================
   Dobras 2 a 7
   Seções sem fundo opaco: as brasas aparecem por trás delas.
   ========================================================= */
.secao {
  position: relative;
  z-index: 2;
  padding-block: var(--respiro-dobra);
}

.sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--linha-laranja);
  border-radius: 999px;
  background: rgba(255, 153, 51, 0.06);
  color: var(--laranja-claro);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ponto-vivo--laranja { background: var(--laranja); box-shadow: 0 0 12px var(--laranja); }
.ponto-vivo--laranja::after { border-color: var(--laranja); }

.secao-cabecalho {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-bottom: clamp(32px, 5vw, 56px);
  text-align: center;
}

.secao-titulo {
  max-width: 18ch;
  font-family: var(--fonte-titulo);
  font-size: clamp(40px, 9.6vw, 76px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.secao-titulo--esquerda { max-width: 16ch; }
.sem-quebra { white-space: nowrap; }

.secao-apoio {
  max-width: 52ch;
  color: var(--texto-2);
  font-size: clamp(16px, 4.2vw, 19px);
  line-height: 1.55;
}

/* padrão de quebra para textos curtos (apoios, descrições, legendas):
   linhas de tamanho parecido, sem palavra sozinha na última */
.secao-apoio,
.publico__chamada,
.quadro__texto,
.aprovacao__selo,
.aprovacao__frase,
.rotinas__mais,
.rotina > span:last-child,
.pos-cartao__texto,
.indicador__rotulo,
.cf-cartao__rotulo { text-wrap: balance; }

.secao-acao { margin-top: 32px; }
.secao-acao--centro { display: flex; justify-content: center; margin-top: clamp(32px, 5vw, 48px); }

/* holofote que segue o ponteiro, comum aos cartões das dobras */
.quadro::before,
.pos-cartao::before,
.indicador::before,
.recurso::before,
.rotina::before,
.cf-cartao::before,
.credencial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 153, 51, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
}
.quadro:hover::before,
.pos-cartao:hover::before,
.indicador:hover::before,
.recurso:hover::before,
.rotina:hover::before,
.cf-cartao:hover::before,
.credencial:hover::before { opacity: 1; }

/* ---------- Dobra 2: para quem é ---------- */
/* brilho centrado abaixo do topo, para sumir antes da borda da seção */
.publico { background: radial-gradient(46% 26% at 50% 26%, rgba(242, 96, 12, 0.12), transparent 100%); }

.quadros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.quadro {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: space-between;
  gap: 26px;
  min-height: 196px;
  padding: 18px 16px 22px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(242, 96, 12, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(12, 9, 7, 0.74);
  overflow: hidden;
  transition: transform 0.5s var(--curva-saida), border-color 0.4s, box-shadow 0.4s;
}
/* fio de luz na base: cresce na entrada e completa no ponteiro */
.quadro::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--laranja), transparent);
  transform: scaleX(0);
  transition: transform 0.8s var(--curva-saida);
}
.quadro.is-visto::after { transform: scaleX(0.45); transition-delay: calc(0.5s + var(--d, 0) * 70ms); }
.quadro:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 153, 51, 0.3);
  box-shadow: 0 28px 50px -26px rgba(0, 0, 0, 0.9), 0 0 50px -24px rgba(255, 120, 20, 0.7);
}
.quadro:hover::after { transform: scaleX(1); transition-delay: 0s; }

.quadro__numero {
  position: absolute;
  top: 10px;
  right: 14px;
  color: transparent;
  font-family: var(--fonte-texto);
  font-size: clamp(38px, 10vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(255, 153, 51, 0.35);
  transition: -webkit-text-stroke-color 0.4s;
}
.quadro:hover .quadro__numero { -webkit-text-stroke-color: rgba(255, 180, 92, 0.8); }

.quadro__icone {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--linha-laranja);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 153, 51, 0.18), rgba(255, 153, 51, 0.04));
  box-shadow: 0 0 28px -10px rgba(255, 120, 20, 0.9);
  color: var(--laranja);
}
.quadro__icone .icone { width: 24px; height: 24px; }
/* o traço do ícone se desenha quando o quadro aparece (só com JavaScript,
   que é quem marca is-visto) */
html:not(.sem-js) .quadro__icone .icone { stroke-dasharray: 100; stroke-dashoffset: 100; }
.quadro.is-visto .quadro__icone .icone { animation: desenhar 1.6s calc(0.3s + var(--d, 0) * 90ms) var(--curva-saida) forwards; }

.quadro__texto {
  color: var(--texto-2);
  font-size: clamp(15px, 3.9vw, 21px);
  font-weight: 500;
  line-height: 1.32;
}
.quadro__texto strong { color: var(--texto); font-weight: 700; }

/* frase de fechamento + botão, logo abaixo dos quadros */
.fechamento.publico__fechamento { margin-top: clamp(36px, 5vw, 56px); gap: 22px; }
.publico__chamada {
  max-width: 30ch;
  font-size: clamp(20px, 5.4vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

@media (min-width: 760px) {
  .quadros { gap: 16px; }
  .quadro { min-height: 200px; padding: 26px 26px 30px; }
  .quadro__icone { width: 56px; height: 56px; border-radius: 16px; }
  .quadro__icone .icone { width: 28px; height: 28px; }
}

/* ---------- Dobra 3: Escola Contábil ----------
   Três telas: apresentação e prova (.escola), preparação para o Exame
   (.preparacao) e prática contábil (.pratica). Cada tela tem o próprio
   brilho, em posições alternadas, para marcar a passagem. */
.escola { background: radial-gradient(42% 34% at 26% 30%, rgba(242, 96, 12, 0.13), transparent 100%); }

.escola__grade {
  display: grid;
  gap: 28px;
  align-items: center;
}

/* arte "Escola Contábil vitalícia ∞" flutuando, com halo, brilho
   pulsando atrás do ∞ e um reflexo que atravessa a arte */
.escola__visual {
  position: relative;
  isolation: isolate;
  width: min(92vw, 460px);
  margin-inline: auto;
}
/* a flutuação fica num invólucro: o próprio .escola__visual já usa a
   animação de revelação ao rolar */
.escola__flutua {
  position: relative;
  isolation: isolate;
  animation: flutuar 7s ease-in-out infinite;
}
.escola__halo {
  position: absolute;
  inset: -10% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 128, 34, 0.3), transparent 72%);
  animation: respirar 5s ease-in-out infinite;
}
/* o ∞ fica na metade de baixo da arte, centrado */
.escola__brilho {
  position: absolute;
  left: 51%;
  top: 75%;
  z-index: -1;
  width: 60%;
  aspect-ratio: 2.2 / 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 170, 60, 0.7), rgba(242, 90, 12, 0.25) 55%, transparent 76%);
  filter: blur(10px);
  animation: brilho-infinito 3.2s ease-in-out infinite;
}
.escola__arte {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6));
}
/* reflexo: a camada tem o formato da arte (máscara) e por dentro dela
   passa uma faixa de luz, por transform */
.escola__reflexo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url("../img/escola-vitalicia.webp") center / 100% 100% no-repeat;
  mask: url("../img/escola-vitalicia.webp") center / 100% 100% no-repeat;
}
.escola__reflexo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: reflexo-arte 5.5s 1s ease-in-out infinite;
}

@keyframes brilho-infinito {
  0%, 100% { opacity: 0.55; scale: 0.92; }
  50% { opacity: 1; scale: 1.06; }
}
@keyframes reflexo-arte {
  0%, 30% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(220%); }
}

.escola__texto {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.escola__titulo { max-width: 20ch; font-size: clamp(34px, 8.2vw, 62px); }

/* números grandes com degradê (contadores e valores fixos) */
.aprovacao__numero .contador,
.indicador__valor,
.indicador__valor .contador,
.cf-cartao__valor,
.cf-cartao__valor .contador {
  background: var(--gradiente-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.aprovacao .contador,
.indicador .contador,
.cf-cartao .contador { text-align: inherit; }

/* subtítulos de bloco dentro das dobras (Sora, frase normal) */
.bloco-titulo {
  max-width: 26ch;
  font-size: clamp(24px, 5.6vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* ---- prova: +8 mil aprovados e a proporção da última edição ---- */
.aprovacao {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 26px;
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(22px, 4.5vw, 44px);
  border: 1px solid var(--linha-laranja);
  border-radius: 26px;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(242, 96, 12, 0.24), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(242, 96, 12, 0.1), transparent 70%),
    rgba(12, 9, 7, 0.82);
  box-shadow: 0 0 90px -40px rgba(255, 120, 20, 0.8);
  overflow: hidden;
}
.aprovacao__selo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--laranja-claro);
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 700;
  line-height: 1.35;
}
.aprovacao__selo .icone { width: 18px; height: 18px; color: var(--laranja); }
.aprovacao__numero { display: grid; margin-top: 12px; }
.aprovacao__numero .contador {
  font-family: var(--fonte-titulo);
  font-size: clamp(76px, 21vw, 150px);
  line-height: 0.88;
  filter: drop-shadow(0 0 30px rgba(255, 120, 20, 0.35));
}
.aprovacao__rotulo {
  margin-top: 6px;
  font-family: var(--fonte-titulo);
  font-size: clamp(24px, 6.4vw, 42px);
  line-height: 1;
  text-transform: uppercase;
}
.aprovacao__frase { color: var(--texto-2); font-size: clamp(16px, 4vw, 19px); line-height: 1.5; }
.realce-laranja { color: var(--laranja); }

/* 12 bonecos = 12 mil aprovados; os 4 primeiros acendem em laranja */
.bonecos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 14px);
  max-width: 440px;
  margin: 20px 0 14px;
  padding: 0;
  list-style: none;
}
.bonecos li {
  aspect-ratio: 0.8;
  background: rgba(255, 255, 255, 0.16);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Ccircle cx='10' cy='6' r='5.4'/%3E%3Cpath d='M0 25v-3.5A8.5 8.5 0 0 1 8.5 13h3a8.5 8.5 0 0 1 8.5 8.5V25z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Ccircle cx='10' cy='6' r='5.4'/%3E%3Cpath d='M0 25v-3.5A8.5 8.5 0 0 1 8.5 13h3a8.5 8.5 0 0 1 8.5 8.5V25z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bonecos li.is-nosso { background: var(--gradiente-laranja); }
.aprovacao.is-visto .bonecos li { animation: boneco-entra 0.55s calc(0.35s + var(--i, 0) * 70ms) var(--curva-mola) both; }
.aprovacao.is-visto .bonecos li.is-nosso {
  animation:
    boneco-entra 0.55s calc(0.35s + var(--i, 0) * 70ms) var(--curva-mola) both,
    boneco-brilha 2.6s calc(1.6s + var(--i, 0) * 120ms) ease-in-out infinite;
}

@keyframes boneco-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.6); }
  to { opacity: 1; transform: none; }
}
@keyframes boneco-brilha {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.bonecos__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--apagado);
  font-size: 12.5px;
}
.bonecos__marca { width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.bonecos__marca:not(:first-child) { margin-left: 8px; }
.bonecos__marca--nosso { background: var(--laranja); box-shadow: 0 0 8px var(--laranja); }

/* ---- preparação completa: título e lista numerada ---- */
.preparacao { background: radial-gradient(38% 40% at 10% 50%, rgba(242, 96, 12, 0.11), transparent 100%); }

.preparacao__grade { display: grid; gap: 28px; }
.preparacao__cabecalho {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.recursos {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.recurso,
.rotina {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--linha);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(12, 9, 7, 0.74);
  overflow: hidden;
  transition: transform 0.5s var(--curva-saida), border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
}
.recurso:hover,
.rotina:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 153, 51, 0.3);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.9), 0 0 50px -24px rgba(255, 120, 20, 0.7);
}
.recurso {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}
/* número vazado, como nos quadros da dobra 2 */
.recurso__numero {
  flex: none;
  min-width: 2ch;
  color: transparent;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(255, 153, 51, 0.5);
  transition: -webkit-text-stroke-color 0.4s;
}
.recurso:hover .recurso__numero { -webkit-text-stroke-color: rgba(255, 180, 92, 0.9); }
.recurso__icone,
.rotina__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--linha-laranja);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 153, 51, 0.18), rgba(255, 153, 51, 0.04));
  box-shadow: 0 0 24px -10px rgba(255, 120, 20, 0.9);
  color: var(--laranja);
  transition: transform 0.5s var(--curva-mola);
}
.recurso__icone .icone,
.rotina__icone .icone { width: 22px; height: 22px; }
.recurso:hover .recurso__icone,
.rotina:hover .rotina__icone { transform: rotate(-8deg) scale(1.08); }
/* a IA cintila */
.recurso:last-child .recurso__icone .icone { animation: cintilar 2.4s ease-in-out infinite; }

@keyframes cintilar {
  0%, 100% { opacity: 1; transform: none; }
  50% { opacity: 0.55; transform: scale(0.86) rotate(12deg); }
}

/* ---- muito além do Exame CFC: 6 rotinas (ícone à esquerda, nome e
   descrição à direita) ---- */
.pratica { background: radial-gradient(46% 26% at 50% 24%, rgba(242, 96, 12, 0.12), transparent 100%); }

.rotinas {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rotina {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 14px;
  padding: 14px 16px;
  border-radius: 16px;
}
.rotina__icone { grid-row: span 2; align-self: center; }
.rotina strong { align-self: end; font-size: 16px; font-weight: 800; line-height: 1.25; }
.rotina > span:last-child { align-self: start; color: var(--texto-2); font-size: 13.5px; line-height: 1.4; }

.rotinas__mais {
  max-width: 60ch;
  margin: 26px auto 0;
  color: var(--texto-2);
  font-size: clamp(15px, 3.8vw, 17px);
  line-height: 1.5;
  text-align: center;
}
.rotinas__mais strong { color: var(--laranja); }

@media (min-width: 640px) {
  .rotinas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (min-width: 960px) {
  .escola__grade { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; }
  .escola__visual { width: 100%; max-width: 480px; }
  .escola__texto { justify-items: start; text-align: left; }
  .aprovacao { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 56px; }
  /* os 12 bonecos numa linha só */
  .bonecos { grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: none; gap: 8px; }

  .preparacao__grade { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 64px; }
  .preparacao__cabecalho { justify-items: start; text-align: left; }
  .preparacao .bloco-titulo { font-size: clamp(32px, 3.4vw, 46px); }

  /* lista num painel só, com divisórias, em vez de um cartão por item */
  .recursos {
    gap: 0;
    border: 1px solid var(--linha);
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      rgba(12, 9, 7, 0.74);
    overflow: hidden;
  }
  .recurso {
    gap: 20px;
    padding: 20px 28px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 18px;
  }
  .recurso + .recurso { border-top: 1px solid var(--linha); }
  .recurso:hover { transform: none; box-shadow: none; background-color: rgba(255, 153, 51, 0.05); }
  .recurso__numero { font-size: 30px; }
  .recurso__icone { width: 48px; height: 48px; border-radius: 14px; }

  .rotinas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .rotina { gap: 4px 16px; padding: 22px; border-radius: 18px; }
  .rotina__icone { width: 52px; height: 52px; border-radius: 14px; }
  .rotina__icone .icone { width: 24px; height: 24px; }
  .rotina strong { font-size: 18px; }
}

/* ---------- Dobra 4: Pós-graduações ----------
   Duas telas: a oferta (.pos) e os cursos (.pos-cursos) */
/* brilho atrás da conta */
.pos { background: radial-gradient(44% 30% at 50% 64%, rgba(242, 96, 12, 0.16), transparent 100%); }
.pos .secao-titulo { max-width: 20ch; font-size: clamp(32px, 7.8vw, 64px); }

/* sua pós + outra pós = preço de 1 */
.formula {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(6px, 2.2vw, 24px);
  max-width: 760px;
  margin: 0 auto;
}
.formula__item {
  position: relative;
  display: grid;
  flex: 1 1 0;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-width: 0;
  max-width: 200px;
  padding: clamp(18px, 3.4vw, 30px) 8px clamp(14px, 2.6vw, 22px);
  border: 1px solid var(--linha);
  border-radius: clamp(18px, 3vw, 24px);
  background: rgba(255, 255, 255, 0.03);
  font-size: clamp(12px, 3.3vw, 17px);
  font-weight: 600;
  text-align: center;
}
.formula__capelo {
  width: clamp(38px, 10vw, 72px);
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 120, 20, 0.35));
}
.formula__item--gratis {
  border-color: rgba(0, 255, 0, 0.45);
  box-shadow: 0 0 40px -18px rgba(0, 255, 0, 0.7);
}
.formula__etiqueta {
  position: absolute;
  top: -11px;
  left: 50%;
  translate: -50% 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gradiente-verde);
  color: #031a00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.formula__sinal {
  align-self: center;
  color: var(--laranja);
  font-family: var(--fonte-titulo);
  font-size: clamp(28px, 7vw, 60px);
  line-height: 1;
}
.formula__item--total {
  border-color: rgba(255, 153, 51, 0.5);
  background: radial-gradient(100% 100% at 50% 0%, rgba(242, 96, 12, 0.28), transparent 75%), rgba(255, 255, 255, 0.02);
  box-shadow: 0 0 44px -20px rgba(255, 120, 20, 0.9);
}
.formula__item--total strong {
  font-family: var(--fonte-titulo);
  font-size: clamp(22px, 6vw, 46px);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  background: var(--gradiente-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* as peças da conta entram uma a uma e o "grátis" pulsa depois */
.formula.is-visto > * { animation: peca-entra 0.7s var(--curva-mola) both; }
.formula.is-visto > :nth-child(2) { animation-delay: 0.15s; }
.formula.is-visto > :nth-child(3) { animation-delay: 0.3s; }
.formula.is-visto > :nth-child(4) { animation-delay: 0.45s; }
.formula.is-visto > :nth-child(5) { animation-delay: 0.6s; }
.formula.is-visto .formula__item--gratis { animation: peca-entra 0.7s 0.3s var(--curva-mola) both, pulso-verde 2.4s 1.4s ease-in-out infinite; }

@keyframes peca-entra {
  from { opacity: 0; transform: translateY(16px) scale(0.85); }
  to { opacity: 1; transform: none; }
}
@keyframes pulso-verde {
  0%, 100% { box-shadow: 0 0 40px -18px rgba(0, 255, 0, 0.7); }
  50% { box-shadow: 0 0 56px -10px rgba(0, 255, 0, 0.9); }
}

/* link para a tela dos cursos, com a seta apontando para baixo */
.seguir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s;
}
.seguir .icone { rotate: 90deg; color: var(--laranja); animation: seguir 1.8s ease-in-out infinite; }
.seguir:hover { color: var(--texto); }

@keyframes seguir {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 5px; }
}

/* ---- cursos ---- */
.pos-cursos .secao-titulo { max-width: 20ch; font-size: clamp(32px, 7.4vw, 56px); }

/* cada cartão é um botão: abre o cadastro marcando o curso (cta_origem) */
.lista-pos {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-pos > li { display: grid; }
.pos-cartao {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 16px;
  width: 100%;
  padding: 0 18px 20px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(12, 9, 7, 0.74);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.5s var(--curva-saida), border-color 0.4s, box-shadow 0.4s;
}
/* fio de luz na base, como nos quadros da dobra 2 */
.pos-cartao::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--laranja), transparent);
  transform: scaleX(0);
  transition: transform 0.6s var(--curva-saida);
}
.pos-cartao:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 153, 51, 0.35);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9), 0 0 50px -24px rgba(255, 120, 20, 0.7);
}
.pos-cartao:hover::after { transform: scaleX(1); }

/* faixa do logo: mesma altura em todos os cartões, separada do texto */
.pos-cartao__marca {
  display: grid;
  place-items: center;
  justify-self: stretch;
  height: 92px;
  margin-inline: -18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--linha);
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(242, 96, 12, 0.16), transparent 75%),
    rgba(255, 255, 255, 0.02);
}
.pos-cartao img {
  width: auto;
  height: 56px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.6));
  transition: transform 0.6s var(--curva-mola);
}
.pos-cartao:hover img { transform: scale(1.06); }
/* o nome já está no logo: fica só para leitores de tela */
.pos-cartao__nome {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pos-cartao__texto { color: var(--texto-2); font-size: 14.5px; line-height: 1.5; }
.pos-cartao__acao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--laranja-claro);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pos-cartao__acao .icone { width: 15px; height: 15px; transition: transform 0.4s var(--curva-mola); }
.pos-cartao:hover .pos-cartao__acao .icone { transform: translateX(4px); }

/* colunas só quando cada descrição ainda cabe em duas linhas */
@media (min-width: 640px) {
  .lista-pos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .lista-pos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .pos-cartao { padding-inline: 20px; }
  .pos-cartao__marca { margin-inline: -20px; }
  .pos-cartao img { height: 58px; }
}

/* ---------- Dobra 5: Quem somos ----------
   Duas telas: FBC (texto | números) e CF (vitrine | texto, espelhada) */
.quem {
  overflow: clip;
  background: radial-gradient(40% 40% at 76% 56%, rgba(242, 96, 12, 0.11), transparent 100%);
}
.quem--cf { background: radial-gradient(40% 40% at 26% 50%, rgba(242, 96, 12, 0.12), transparent 100%); }

.quem .container { position: relative; z-index: 1; }

.quem__bloco {
  display: grid;
  gap: 32px;
  align-items: center;
}
.quem__texto {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
.quem__logo { width: auto; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7)); }
.quem__logo--fbc { height: clamp(52px, 11vw, 68px); }
.quem__logo--cf { height: clamp(36px, 8vw, 48px); }
.quem .bloco-titulo { max-width: 22ch; }

.quem__numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.indicador {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 20px 16px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(242, 96, 12, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(12, 9, 7, 0.74);
  overflow: hidden;
  transition: transform 0.5s var(--curva-saida), border-color 0.4s;
}
.indicador:hover { transform: translateY(-3px); border-color: rgba(255, 153, 51, 0.3); }
.indicador__icone { width: 22px; height: 22px; margin-bottom: 8px; color: var(--laranja); }
/* números na Sora: na Squada One o "1" parece um "I" (100K+, 1 mi+) */
.indicador__valor {
  font-family: var(--fonte-texto);
  font-size: clamp(30px, 8vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}
.indicador__rotulo { color: var(--texto-2); font-size: 13.5px; line-height: 1.35; }

/* vitrine do CF: um cartão grande (alunos) e quatro menores */
.vitrine-cf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cf-cartao {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 176px;
  padding: 22px 12px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(12, 9, 7, 0.74);
  text-align: center;
  overflow: hidden;
  transition: transform 0.5s var(--curva-saida), border-color 0.4s, box-shadow 0.4s;
}
.cf-cartao:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 153, 51, 0.3);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.9), 0 0 50px -24px rgba(255, 120, 20, 0.7);
}
.cf-cartao--grande {
  grid-column: 1 / -1;
  min-height: 250px;
  border-color: var(--linha-laranja);
  background:
    radial-gradient(70% 70% at 50% 30%, rgba(242, 96, 12, 0.26), transparent 72%),
    rgba(12, 9, 7, 0.82);
  box-shadow: 0 0 80px -40px rgba(255, 120, 20, 0.9);
}
.cf-cartao__halo {
  position: absolute;
  top: 12%;
  left: 50%;
  z-index: -1;
  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(255, 128, 34, 0.38), transparent 72%);
  animation: respirar 5s ease-in-out infinite;
}
/* capelo jogado para o alto, de tempos em tempos */
.cf-cartao__capelo {
  width: clamp(92px, 22vw, 130px);
  height: auto;
  margin-bottom: 8px;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(255, 120, 20, 0.4));
  animation: capelo-joga 4.5s ease-in-out infinite;
}
@keyframes capelo-joga {
  0%, 55%, 100% { transform: none; }
  68% { transform: translateY(-18px) rotate(-10deg); }
  80% { transform: translateY(-6px) rotate(6deg); }
  90% { transform: none; }
}

.cf-cartao__valor {
  font-family: var(--fonte-texto);
  font-size: clamp(28px, 7.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.cf-cartao--grande .cf-cartao__valor { font-size: clamp(44px, 11vw, 68px); }
.cf-cartao__rotulo { color: var(--texto-2); font-size: 13.5px; line-height: 1.35; }
.cf-cartao--grande .cf-cartao__rotulo { font-size: 16px; font-weight: 600; }

.cf-cartao__arte {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin-bottom: 8px;
  color: var(--laranja);
}
.cf-cartao__arte--pessoas .icone { width: 56px; height: 56px; stroke-width: 1.7; }
.cf-cartao__redes {
  display: grid;
  grid-template-columns: repeat(2, 30px);
  gap: 6px;
}
.cf-cartao__redes svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--laranja);
  color: #1a0a00;
  transition: transform 0.4s var(--curva-mola);
}
.cf-cartao:hover .cf-cartao__redes svg { transform: scale(1.12); }
.cf-cartao:hover .cf-cartao__redes svg:nth-child(2) { transition-delay: 0.05s; }
.cf-cartao:hover .cf-cartao__redes svg:nth-child(3) { transition-delay: 0.1s; }
.cf-cartao:hover .cf-cartao__redes svg:nth-child(4) { transition-delay: 0.15s; }
.cf-cartao__google { flex-direction: column; gap: 8px; }
.cf-cartao__g { width: 38px; height: 38px; }
.estrelas { display: flex; gap: 3px; }
.estrelas svg { width: 15px; height: 15px; fill: #ffc400; }
/* as cinco estrelas entram uma a uma quando o cartão aparece */
.cf-cartao.is-visto .estrelas svg { animation: estrela-entra 0.5s var(--curva-mola) both; }
.cf-cartao.is-visto .estrelas svg:nth-child(1) { animation-delay: 0.4s; }
.cf-cartao.is-visto .estrelas svg:nth-child(2) { animation-delay: 0.5s; }
.cf-cartao.is-visto .estrelas svg:nth-child(3) { animation-delay: 0.6s; }
.cf-cartao.is-visto .estrelas svg:nth-child(4) { animation-delay: 0.7s; }
.cf-cartao.is-visto .estrelas svg:nth-child(5) { animation-delay: 0.8s; }
@keyframes estrela-entra {
  from { opacity: 0; transform: scale(0.2) rotate(-60deg); }
  to { opacity: 1; transform: none; }
}
.cf-cartao__simbolo { width: 58px; height: auto; filter: drop-shadow(0 0 14px rgba(255, 120, 20, 0.4)); }

@media (min-width: 960px) {
  .quem__bloco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .quem__texto { justify-items: start; text-align: left; }
  .quem__numeros { gap: 16px; }
  .indicador { gap: 8px; padding: 28px 26px; }
  .indicador__icone { width: 26px; height: 26px; margin-bottom: 14px; }
  .indicador__rotulo { font-size: 14.5px; }

  /* CF: texto em cima e vitrine em quatro colunas, com o cartão grande
     ocupando 2 × 2 e os quatro menores ao lado */
  .quem__bloco--cf { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .quem__bloco--cf .vitrine-cf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .cf-cartao--grande { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 0; }
  .cf-cartao { min-height: 172px; }
  .cf-cartao__valor { font-size: 34px; }
  .cf-cartao--grande .cf-cartao__valor { font-size: 56px; }
}

/* com largura para as duas colunas: CF espelhado, vitrine à esquerda */
@media (min-width: 1200px) {
  .quem__bloco--cf { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; }
  .quem__bloco--cf .vitrine-cf { order: -1; }
  .quem--cf .bloco-titulo { font-size: 36px; }
}

/* ---------- Dobra 6: Quem é Gabriel Rabelo ----------
   Celular: cabeçalho, foto e lista. Computador: texto à esquerda e foto
   à direita, com aura, anel girando e a base da foto sumindo no fundo. */
.gabriel {
  overflow: clip;
  background: radial-gradient(36% 42% at 72% 50%, rgba(242, 96, 12, 0.13), transparent 100%);
}

.gabriel__grade {
  display: grid;
  grid-template-areas: "cabecalho" "visual" "lista";
  gap: 28px;
}

.gabriel__cabecalho {
  grid-area: cabecalho;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.gabriel__perfil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-2);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}
.gabriel__perfil svg { width: 20px; height: 20px; color: var(--laranja); }
.gabriel__perfil:hover { color: var(--laranja-claro); }

.gabriel__visual {
  grid-area: visual;
  position: relative;
  isolation: isolate;
  width: min(92vw, 420px);
  margin-inline: auto;
  /* base e lateral direita da foto (camisa cortada) somem no fundo */
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 97%), linear-gradient(90deg, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 58%, transparent 97%), linear-gradient(90deg, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.gabriel__aura {
  position: absolute;
  left: 46%;
  top: 44%;
  z-index: -2;
  width: 104%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 128, 34, 0.42), rgba(242, 90, 12, 0.16) 50%, transparent 76%);
  filter: blur(14px);
  animation: respirar 6s ease-in-out infinite;
}
/* mesmo anel do herói, centrado atrás da cabeça */
.gabriel__anel {
  position: absolute;
  left: 46%;
  top: 40%;
  z-index: -1;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: conic-gradient(transparent 0 70%, rgba(255, 180, 92, 0.9) 80%, transparent 90%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  animation: girar-simples 9s linear infinite;
  opacity: 0.8;
}
.gabriel__anel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 153, 51, 0.18);
}
/* a flutuação fica num invólucro: o .gabriel__visual já usa a revelação */
.gabriel__flutua { animation: flutuar 7s ease-in-out infinite; }
.gabriel__foto {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}

.credenciais {
  grid-area: lista;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.credencial {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(12, 9, 7, 0.74);
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1.4;
  text-wrap: pretty;
  overflow: hidden;
  transition: transform 0.5s var(--curva-saida), border-color 0.4s, box-shadow 0.4s;
}
.credencial:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 153, 51, 0.3);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.9), 0 0 50px -24px rgba(255, 120, 20, 0.7);
}
.credencial strong { color: var(--texto); font-weight: 700; }
.credencial em { color: var(--texto); }
.credencial__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--linha-laranja);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 153, 51, 0.18), rgba(255, 153, 51, 0.04));
  box-shadow: 0 0 24px -10px rgba(255, 120, 20, 0.9);
  color: var(--laranja);
  transition: transform 0.5s var(--curva-mola);
}
.credencial__icone .icone { width: 20px; height: 20px; }
.credencial:hover .credencial__icone { transform: rotate(-8deg) scale(1.08); }
/* 100.000 alunos: o fecho da lista, em destaque */
.credencial--destaque {
  border-color: var(--linha-laranja);
  background:
    radial-gradient(70% 120% at 0% 50%, rgba(242, 96, 12, 0.24), transparent 72%),
    rgba(12, 9, 7, 0.82);
  font-size: 16px;
}
.credencial--destaque strong {
  background: var(--gradiente-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (min-width: 640px) {
  .credenciais { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .credencial--destaque { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .gabriel__grade {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-areas: "cabecalho visual" "lista visual";
    align-content: center;
    column-gap: 48px;
    row-gap: 26px;
  }
  .gabriel__cabecalho { justify-items: start; text-align: left; }
  .gabriel__visual { align-self: center; width: 100%; max-width: 480px; }
}

/* ---------- Dobra 7: Depoimentos ---------- */
/* mural em duas linhas correndo em sentidos opostos (montado em main.js);
   para quando o ponteiro está em cima, para dar tempo de ler */
.mural {
  display: grid;
  gap: 14px;
  padding-block: 6px;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mural__trilho {
  display: flex;
  width: max-content;
  animation: marquise 70s linear infinite;
}
.mural__linha--reversa .mural__trilho { animation-direction: reverse; animation-duration: 80s; }
.mural:hover .mural__trilho { animation-play-state: paused; }

.mural__grupo {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0 14px 0 0;
  list-style: none;
}
.mural__grupo > li { display: flex; }

.depoimento {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  width: clamp(270px, 76vw, 360px);
  margin: 0;
  padding: 22px 22px 20px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(242, 96, 12, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(12, 9, 7, 0.8);
}
.depoimento__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.depoimento__aspas { width: 28px; height: 28px; color: var(--laranja); fill: rgba(255, 153, 51, 0.15); }
/* nota do Google: cinco estrelas e o "G" */
.depoimento__nota { display: flex; align-items: center; gap: 8px; }
.depoimento__nota .estrelas svg { width: 14px; height: 14px; }
.depoimento__google { width: 18px; height: 18px; flex: none; }
.depoimento blockquote strong { color: var(--texto); font-weight: 700; }
.depoimento blockquote { margin: 0; color: var(--texto-2); font-size: 15px; line-height: 1.55; }
.depoimento figcaption { display: flex; align-items: center; gap: 12px; }
.depoimento__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--gradiente-laranja);
  color: #1a0a00;
  font-weight: 800;
}
.depoimento figcaption strong { display: block; font-size: 14.5px; }
.depoimento figcaption small { color: var(--apagado); font-size: 12.5px; }

.fechamento {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-top: clamp(44px, 6vw, 72px);
  text-align: center;
}

/* =========================================================
   Computador: cada dobra cabe numa tela
   O conteúdo de cada seção cabe na altura da tela (medido em 1536 × 766,
   um notebook 1920 × 1080 com zoom de 125%). O espaço entre as dobras é
   o mesmo em todas (--respiro-dobra) e o de cima desvia da pílula fixa
   do topo (.dock).
   ========================================================= */
@media (min-width: 1100px) {
  .heroi { padding-bottom: 0; }
  /* faixa do topo + herói = uma tela */
  .heroi__grade { min-height: calc(100svh - clamp(36px, 3.6vw, 48px)); }

  /* coluna limitada: sem minmax(0, …) a coluna toma a largura do mural de
     depoimentos (max-content) e o contêiner centralizado sai da tela */
  .secao {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .secao-cabecalho { gap: 12px; margin-bottom: 26px; }
  .secao-titulo { max-width: none; font-size: clamp(40px, 7svh, 60px); }
  .secao-apoio { font-size: 17px; }
  .secao-acao--centro { margin-top: 24px; }

  /* ---- Para quem é: os quatro quadros numa linha ---- */
  .quadros { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
  .quadro { min-height: 0; gap: 34px; padding: 24px 22px 26px; }
  .quadro__numero { font-size: 56px; }
  .fechamento.publico__fechamento { margin-top: 30px; gap: 18px; }
  .publico__chamada { max-width: 46ch; font-size: 26px; }

  /* ---- Escola: arte e título em cima, prova embaixo ---- */
  .escola__visual { max-width: 440px; justify-self: center; }
  .escola__titulo { max-width: 22ch; font-size: clamp(40px, 6.6svh, 56px); }
  .aprovacao { margin-top: 40px; padding: 28px 40px; }
  .aprovacao__numero .contador { font-size: 104px; }
  .aprovacao__rotulo { font-size: 30px; }
  .aprovacao__frase { font-size: 17px; }
  .bonecos { margin: 16px 0 10px; }

  /* ---- Pós: a oferta e os cursos ---- */
  .pos .secao-titulo { max-width: 24ch; font-size: clamp(44px, 7.6svh, 64px); }
  .pos .secao-cabecalho { margin-bottom: 40px; }
  .pos .secao-acao--centro { margin-top: 36px; }
  .pos-cursos .secao-titulo { max-width: none; font-size: clamp(36px, 6svh, 52px); }
  .lista-pos { gap: 14px; }
  .pos-cartao { gap: 12px; padding-bottom: 18px; }
  .pos-cartao__marca { height: 82px; }
  .pos-cartao img { height: 52px; }
  .pos-cartao__texto { font-size: 13.5px; line-height: 1.45; }

  /* ---- Quem somos ---- */
  .quem .secao-cabecalho { margin-bottom: 40px; }

  /* ---- Depoimentos ---- */
  .depoimentos .secao-cabecalho { margin-bottom: 24px; }
  .mural { gap: 12px; }
  .depoimento { gap: 14px; width: 380px; padding: 18px 20px; }
  /* uma linha só: a segunda repete os mesmos cartões e a dobra passaria
     da altura da tela */
  .mural__linha--reversa { display: none; }
  .depoimentos .fechamento { gap: 12px; margin-top: 28px; }
}

/* telas mais baixas (notebook 1366 × 768, 1920 × 1080 com 150%): o texto
   do herói e o conteúdo das dobras encolhem por inteiro, na mesma
   proporção, para continuar cabendo */
@media (min-width: 1100px) and (max-height: 739px) {
  .heroi__texto,
  .secao > * { zoom: 0.92; }
}
@media (min-width: 1100px) and (max-height: 689px) {
  .heroi__texto,
  .secao > * { zoom: 0.85; }
}

/* rolagem que encaixa no começo de cada dobra; "proximity" só alinha
   quando a rolagem para perto do começo, sem prender o leitor */
@media (min-width: 1100px) and (min-height: 680px) {
  html { scroll-snap-type: y proximity; }
  .heroi,
  .secao { scroll-snap-align: start; }
}

/* ---------- Revelação ao rolar ---------- */
[data-revelar] { opacity: 0; }
[data-revelar].is-visto {
  opacity: 1;
  animation: revelar 0.9s var(--curva-saida) backwards;
  animation-delay: calc(var(--d, 0) * 80ms);
}

@keyframes revelar {
  from { opacity: 0; transform: translateY(30px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

.sem-js [data-revelar] { opacity: 1; }

/* ---------- Rodapé ---------- */
.rodape {
  padding: 32px 0 calc(32px + var(--espaco-dock, 0px));
  border-top: 1px solid var(--linha);
  background: #030202;
}
.rodape__grade {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.rodape__marca { width: min(100%, 380px); height: auto; opacity: 0.9; }
.rodape__legal { color: #7d7166; font-size: 12.5px; }

@media (min-width: 760px) {
  .rodape__grade { grid-template-columns: auto auto; justify-content: space-between; text-align: left; }
}

/* =========================================================
   Dock — dock inferior no celular, pílula no topo no computador
   ========================================================= */
.dock {
  position: fixed;
  z-index: 40;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 9px 9px 14px;
  border-radius: 18px;
  background: rgba(14, 10, 7, 0.82);
  border: 1px solid rgba(255, 153, 51, 0.24);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.85), 0 0 40px -22px rgba(255, 120, 20, 0.6);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 24px));
  transition: transform 0.6s var(--curva-saida), opacity 0.4s;
}
.dock.is-visivel { opacity: 1; pointer-events: auto; transform: none; }

.dock__texto { display: grid; line-height: 1.15; min-width: 0; }
.dock__rotulo {
  color: var(--apagado);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dock__chamada {
  color: var(--laranja);
  font-family: var(--fonte-titulo);
  font-size: 21px;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}
.dock .botao { margin-left: auto; }

@media (max-width: 359px) {
  .dock { gap: 8px; padding-left: 14px; }
  .dock__rotulo { display: none; }
}

@media (min-width: 960px) {
  .dock {
    left: 50%;
    right: auto;
    top: 16px;
    bottom: auto;
    gap: 18px;
    padding: 7px 7px 7px 20px;
    border-radius: 999px;
    transform: translate(-50%, calc(-100% - 30px));
  }
  .dock.is-visivel { transform: translate(-50%, 0); }
}

/* =========================================================
   Formulário — gaveta lateral (computador) / folha inferior (celular)
   ========================================================= */
.lead {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}
.lead.is-aberto { visibility: visible; transition-delay: 0s; }

.lead__veu {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 1, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.45s;
}
.lead.is-aberto .lead__veu { opacity: 1; }

/* partículas que escapam por trás do painel (desenhadas em main.js) */
.lead__particulas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.lead.is-aberto .lead__particulas { opacity: 1; }

.lead__painel {
  --arrasto: 0px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 94svh;
  border-radius: 26px 26px 0 0;
  border: 1px solid rgba(255, 153, 51, 0.24);
  border-bottom: 0;
  background:
    radial-gradient(120% 55% at 100% 0%, rgba(242, 96, 12, 0.24), transparent 60%),
    radial-gradient(80% 40% at 0% 100%, rgba(242, 96, 12, 0.1), transparent 60%),
    var(--fundo-2);
  box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  outline: none;
  transform: translateY(calc(100% + 20px));
  transition: transform 0.6s var(--curva-saida);
}
.lead.is-aberto .lead__painel { transform: translateY(var(--arrasto)); }
.lead__painel.is-arrastando { transition: none; }

.lead__alca {
  display: grid;
  place-items: center;
  padding: 10px 0 8px;
  cursor: grab;
  touch-action: none;
}
.lead__alca span { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); }

.lead__fechar {
  position: absolute;
  top: 26px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 7, 5, 0.85);
  color: var(--texto);
  cursor: pointer;
  transition: transform 0.4s var(--curva-mola), border-color 0.3s;
}
.lead__fechar:hover { transform: rotate(90deg); border-color: var(--laranja); }
.lead__fechar .icone { width: 18px; height: 18px; }

.lead__faixa {
  position: relative;
  overflow: hidden;
  padding: 8px 0 7px;
  background: linear-gradient(90deg, #d9580a, #ff9933 30%, #ffb45c 50%, #ff9933 70%, #d9580a);
  color: #140800;
  font-family: var(--fonte-titulo);
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.lead__faixa .tarja__trilho { animation-duration: 18s; }
.lead__faixa .tarja__grupo { display: flex; gap: 0.7em; padding-right: 0.7em; }
.lead__faixa b { font-weight: 400; }

.lead__conteudo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px clamp(20px, 5vw, 36px) calc(24px + env(safe-area-inset-bottom));
}
.lead__conteudo::-webkit-scrollbar { width: 8px; }
.lead__conteudo::-webkit-scrollbar-track { background: transparent; box-shadow: none; }
.lead__conteudo::-webkit-scrollbar-thumb { border-width: 2px; }

.lead__etapa { animation: surgir 0.6s var(--curva-saida) both; }
.lead__etapa[hidden] { display: none; }

.lead__logo { width: 116px; height: auto; margin-bottom: 18px; }

.lead__titulo {
  margin-bottom: 10px;
  font-size: clamp(25px, 3vw, 31px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  outline: none;
}

.lead__subtitulo {
  margin-bottom: 24px;
  color: #cfc3b7;
  font-size: 14.5px;
  line-height: 1.55;
}

.formulario { display: grid; gap: 14px; }

.campo { position: relative; }

.campo__entrada {
  width: 100%;
  height: 60px;
  padding: 22px 16px 7px 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  font-weight: 500;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
  -webkit-appearance: none;
  appearance: none;
}
.campo__entrada:hover { border-color: rgba(255, 255, 255, 0.24); }
.campo__entrada:focus {
  outline: none;
  border-color: var(--laranja);
  background: rgba(255, 153, 51, 0.05);
  box-shadow: 0 0 0 4px rgba(255, 153, 51, 0.16);
}
.campo__entrada:-webkit-autofill {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 60px #1a120c inset;
  caret-color: var(--texto);
}

.campo__rotulo {
  position: absolute;
  left: 48px;
  top: 30px;
  translate: 0 -50%;
  color: var(--apagado);
  font-size: 15px;
  pointer-events: none;
  transition: top 0.25s var(--curva-saida), font-size 0.25s var(--curva-saida), color 0.25s, letter-spacing 0.25s;
}
.campo__entrada:focus + .campo__rotulo,
.campo__entrada:not(:placeholder-shown) + .campo__rotulo {
  top: 17px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laranja-claro);
}

.campo__icone {
  position: absolute;
  left: 16px;
  top: 30px;
  translate: 0 -50%;
  width: 19px;
  height: 19px;
  color: #8e8177;
  pointer-events: none;
  transition: color 0.25s;
}
.campo:focus-within .campo__icone { color: var(--laranja); }

.campo__erro {
  display: block;
  margin-top: 6px;
  padding-left: 4px;
  color: var(--erro);
  font-size: 12.5px;
}
.campo__erro:empty { display: none; }

.campo.is-invalido .campo__entrada {
  border-color: #ff5a48;
  box-shadow: 0 0 0 4px rgba(255, 90, 72, 0.12);
  animation: tremer 0.42s;
}
.campo.is-invalido .campo__icone { color: var(--erro); }
.campo.is-valido .campo__icone { color: var(--laranja); }

@keyframes tremer {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario .botao { margin-top: 4px; }

.formulario__falha { color: var(--erro); font-size: 13.5px; text-align: center; }
.formulario__falha:empty { display: none; }

.formulario__nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--apagado);
  font-size: 12.5px;
  text-align: center;
}
.formulario__nota .icone { width: 14px; height: 14px; flex: none; color: var(--laranja); }

/* confirmação */
.lead__etapa--sucesso { display: grid; justify-items: center; text-align: center; padding-top: 8px; }
.lead__etapa--sucesso .lead__subtitulo { margin-bottom: 26px; }

.sucesso__marca {
  position: relative;
  width: 92px;
  margin-bottom: 18px;
}
.sucesso__marca::before {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 128, 34, 0.5), transparent 75%);
  filter: blur(10px);
  animation: respirar 3s ease-in-out infinite;
}
.sucesso__marca svg { position: relative; width: 100%; height: auto; overflow: visible; }
.sucesso__marca circle {
  fill: rgba(255, 153, 51, 0.1);
  stroke: var(--laranja);
  stroke-width: 3;
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: desenhar 0.8s 0.1s var(--curva-saida) forwards;
}
.sucesso__marca path {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: desenhar 0.5s 0.65s var(--curva-saida) forwards;
}

@keyframes desenhar { to { stroke-dashoffset: 0; } }

.lead__etapa--sucesso .botao--texto { margin-top: 8px; }

/* aviso antes do Typeform: contagem e barra que enche no tempo da espera
   (--espera vem de main.js) */
.lead__etapa--sucesso .lead__subtitulo:has(+ .aviso__contagem) { margin-bottom: 18px; }
.aviso__contagem { margin: 0 0 12px; color: var(--apagado); font-size: 14px; }
.aviso__contagem strong { color: var(--laranja); font-variant-numeric: tabular-nums; }
.aviso__barra {
  display: block;
  width: 100%;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.aviso__barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gradiente-laranja);
  transform-origin: left;
  animation: aviso-enche var(--espera, 4s) linear both;
}
@keyframes aviso-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* celular: folha mais enxuta, botão sem cortar o texto */
@media (max-width: 767px) {
  /* alça (23px) + faixa (31px) + respiro: o X fica ao lado do logo */
  .lead__fechar { top: 70px; right: 16px; width: 36px; height: 36px; }
  .lead__conteudo { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  .lead__logo { width: 100px; margin-bottom: 14px; }
  .lead__titulo { margin-bottom: 8px; font-size: clamp(22px, 6.6vw, 27px); }
  .lead__subtitulo { margin-bottom: 20px; font-size: 14px; line-height: 1.5; }

  .formulario { gap: 12px; }
  .campo__entrada { height: 56px; padding-top: 20px; }
  .campo__rotulo,
  .campo__icone { top: 28px; }
  .campo__entrada:focus + .campo__rotulo,
  .campo__entrada:not(:placeholder-shown) + .campo__rotulo { top: 15px; }

  .formulario .botao {
    padding: 17px 20px;
    font-size: clamp(13px, 3.9vw, 15px);
    letter-spacing: 0.02em;
    white-space: normal;
    text-wrap: balance;
  }
  .formulario__nota { font-size: 12px; line-height: 1.4; }
}

/* celular baixo (ex.: 320 × 568): sem logo, para o formulário caber sem rolar */
@media (max-width: 767px) and (max-height: 640px) {
  .lead__etapa--form .lead__logo { display: none; }
  .lead__fechar { top: 64px; }
  .lead__conteudo { padding-top: 14px; }
  .lead__titulo { padding-right: 44px; }
  .lead__subtitulo { margin-bottom: 14px; font-size: 13.5px; }
  .formulario { gap: 10px; }
  .campo__entrada { height: 52px; padding-top: 18px; }
  .campo__rotulo,
  .campo__icone { top: 26px; }
  .campo__entrada:focus + .campo__rotulo,
  .campo__entrada:not(:placeholder-shown) + .campo__rotulo { top: 14px; }
  .formulario .botao { padding-block: 15px; }
}

@media (min-width: 768px) {
  .lead__painel {
    left: auto;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: min(480px, calc(100% - 24px));
    max-height: none;
    border-radius: 26px;
    border-bottom: 1px solid rgba(255, 153, 51, 0.24);
    box-shadow: -30px 0 90px rgba(0, 0, 0, 0.7);
    transform: translateX(calc(100% + 30px));
    transition: transform 0.7s var(--curva-saida);
  }
  .lead.is-aberto .lead__painel { transform: none; }
  .lead__alca { display: none; }
  .lead__fechar { top: 46px; right: 18px; }
  .lead__conteudo { padding: 34px 38px 32px; display: grid; align-content: center; }
}

/* =========================================================
   Celular
   Menos rolagem e mais toque: listas longas viram carrossel (pós) e
   stories (credenciais do Gabriel), grades mais justas, e o cartão que
   passa pelo meio da tela acende no lugar do hover (is-foco, em main.js).
   ========================================================= */

/* pontos do carrossel e barras dos stories: só existem no celular */
.carrossel__pontos { display: none; }
.stories { display: contents; }
.stories__barras { display: none; }

@media (max-width: 959px) {
  .dock__rotulo { overflow: hidden; text-overflow: ellipsis; }
}

/* dock no celular: mais longe da borda, fundo opaco (nada vaza por trás) e
   espaço garantido para o texto e o botão, de 320 a 639px. "html" na
   frente vence o fundo translúcido das telas de toque (ver Desempenho) */
@media (max-width: 639px) {
  html .dock {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 12px;
    min-height: 62px;
    padding: 8px 8px 8px 18px;
    border-radius: 20px;
    background:
      radial-gradient(80% 140% at 0% 0%, rgba(242, 96, 12, 0.16), transparent 70%),
      linear-gradient(180deg, #19110b, #0d0907);
  }
  .dock__texto { flex: 1; gap: 4px; }
  /* "Contabilidade Facilitada" em caixa baixa: em maiúsculas espaçadas não
     cabe ao lado do botão */
  .dock__rotulo { display: block; font-size: 11.5px; letter-spacing: 0.01em; text-transform: none; }
  .dock__chamada { font-size: 19px; line-height: 1; }
  .dock .botao { flex: none; padding: 14px 15px; font-size: 12px; letter-spacing: 0.02em; }
}
/* abaixo de 390px o dock aperta (sem a seta no botão) para
   "Contabilidade Facilitada" caber inteiro */
@media (max-width: 389px) {
  html .dock { gap: 8px; padding-left: 14px; }
  .dock__rotulo { font-size: 10.5px; }
  .dock .botao { padding-inline: 11px; }
  .dock .botao > .icone { display: none; }
}
@media (max-width: 359px) {
  .dock__rotulo { font-size: 10px; }
  .dock__chamada { font-size: 17px; }
  .dock .botao { padding-inline: 9px; font-size: 11px; letter-spacing: 0; }
}

/* ---- voltar ao topo, com o anel da leitura em volta ---- */
.topo {
  position: fixed;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 39;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #19110b, #0d0907);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.85), 0 0 30px -14px rgba(255, 120, 20, 0.7);
  color: var(--laranja);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.35s, transform 0.5s var(--curva-saida), bottom 0.6s var(--curva-saida);
  -webkit-tap-highlight-color: transparent;
}
.topo.is-visivel { opacity: 1; pointer-events: auto; transform: none; }
.topo:active { transform: scale(0.92); transition-duration: 0.15s; }
.topo > .icone { position: relative; width: 20px; height: 20px; rotate: -90deg; }
.topo__anel { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.topo__anel circle { fill: none; stroke: rgba(255, 153, 51, 0.16); stroke-width: 2; }
.topo__anel .topo__lido {
  stroke: var(--laranja);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(255, 153, 51, 0.8));
}
/* com o dock na base da tela, o botão sobe para ficar acima dele */
@media (max-width: 959px) {
  .dock.is-visivel ~ .topo { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (min-width: 960px) {
  .topo { right: 24px; bottom: 24px; width: 52px; height: 52px; }
  .topo:hover { color: #1a0a00; background: var(--gradiente-laranja); }
}

/* ---- herói no celular e no tablet: pôster, como na LP da Black ----
   CF | FBC no topo, a foto com a vitrine de logos atrás e, subindo sobre a
   base da foto, título ("…começa na Black November"), apoio, ofertas e
   botão, tudo centralizado. A assinatura do computador sai: o título já
   diz Black November. */
.titulo-celular { display: none; }
.heroi__marcas { display: none; }

@media (max-width: 959px) {
  .heroi { padding-bottom: 56px; }
  .heroi__grade { padding-top: 22px; }
  .heroi__texto { display: contents; }

  .heroi__marcas {
    position: relative;
    z-index: 3;
    order: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    animation: surgir 0.9s 0.2s var(--curva-saida) both;
  }
  .heroi__marcas img:first-child { width: auto; height: 20px; }
  .heroi__marcas img:last-child { width: auto; height: 25px; }
  .heroi__marcas .assinatura__divisor { height: 24px; }

  .heroi__visual {
    order: 1;
    position: relative;
    top: auto;
    right: auto;
    justify-self: center;
    width: min(calc(100% + var(--gutter) * 2), 560px);
    margin-top: -6px;
    /* o pôster vai até o peito: a foto some logo abaixo da gola e o Black
       November entra ali */
    aspect-ratio: 1 / 0.72;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .heroi__vitrine,
  .heroi__anel { display: block; }
  .heroi__vitrine { inset: -14% -45%; opacity: 0.16; }
  .heroi__anel { top: 46%; width: 74%; }
  .heroi__aura { top: 46%; }
  .heroi__especialista img {
    top: 3%;
    width: 94%;
    -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 66%);
    mask-image: linear-gradient(180deg, #000 42%, transparent 66%);
  }

  .assinatura { display: none; }
  .titulo-computador { display: none; }
  .titulo-celular { display: inline; }

  /* título: o logo Black November empilhado, logo abaixo da gola, por
     cima da base da foto (que já sumiu no fundo) */
  .heroi__titulo {
    position: relative;
    z-index: 3;
    order: 3;
    margin: calc(min(100vw, 560px) * -0.04) auto 10px;
    color: var(--texto-2);
    font-size: clamp(17px, 4.7vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-align: center;
  }
  .heroi__titulo .heroi__logo {
    display: block;
    width: min(60vw, 300px);
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 120, 20, 0.18));
    animation: surgir 0.9s 0.35s var(--curva-saida) both;
  }
  /* apoio em duas linhas: o texto mede ~53em, e o corpo acompanha a
     largura (11,3px em 360px, até 14px). Os negritos podem quebrar no meio,
     senão travam a divisão e sobra uma terceira linha */
  .heroi__apoio strong { white-space: normal; }
  .heroi__apoio {
    order: 4;
    max-width: none;
    margin-inline: auto;
    font-size: min(14px, calc((100vw - 2 * var(--gutter)) / 29));
    line-height: 1.45;
    text-align: center;
    text-wrap: balance;
  }
  .ofertas { order: 5; }
  .heroi__acao { order: 6; gap: 10px; margin-top: 20px; }
}

@media (min-width: 640px) and (max-width: 959px) {
  .heroi__grade { max-width: 720px; }
}

/* ---- ofertas do herói: dois cartões lado a lado, separados por "ou" ----
   Cartões compactos, da mesma altura, só com ícone e nome. As frases
   ficam no computador e nas dobras da Escola e das Pós.
   Cada cartão continua levando à sua dobra (seta no canto). */
@media (max-width: 559px) {
  .ofertas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
  }
  .ofertas > li { position: relative; }
  /* "ou" num círculo no meio do vão: entra só 7px em cada cartão */
  .ofertas > li + li::before {
    content: "ou";
    position: absolute;
    top: 50%;
    left: -7px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    translate: -50% -50%;
    border: 1px solid var(--linha-laranja);
    border-radius: 50%;
    background: #120c08;
    box-shadow: 0 0 0 3px var(--fundo);
    color: var(--laranja-claro);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .oferta {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: start;
    row-gap: 10px;
    padding: 12px 12px 14px;
    border-radius: 16px;
    text-align: left;
  }
  .oferta__borda,
  .oferta__divisor,
  .oferta__texto p { display: none; }
  .oferta__texto { display: contents; }
  .oferta__seta { top: 10px; right: 10px; width: 24px; height: 24px; }
  .oferta__seta .icone { width: 13px; height: 13px; }
  .oferta__icone { width: 34px; height: 28px; }
  .oferta__icone .laco { width: 34px; }
  .oferta__icone .capelo { width: 30px; }
  .oferta__titulo { margin: 0; padding: 0; font-size: 18px; line-height: 1; }
}

/* celular de tela baixa (iPhone SE; iPhone comum com as barras do Safari):
   pôster mais curto e ofertas sem ícone, para o botão caber na primeira
   tela */
@media (max-width: 639px) and (max-height: 720px) {
  .heroi__grade { padding-top: 14px; }
  .heroi__marcas img:first-child { height: 18px; }
  .heroi__marcas img:last-child { height: 22px; }
  .heroi__marcas .assinatura__divisor { height: 20px; }
  .heroi__visual { aspect-ratio: 1 / 0.62; }
  .heroi__titulo { margin-top: calc(min(100vw, 560px) * -0.01); }
  .heroi__titulo .heroi__logo { width: min(50vw, 250px); }
  .ofertas { margin-top: 18px; }
  .oferta__icone { display: none; }
}

/* ---- mural de depoimentos arrastável (main.js põe is-rolavel e move
   cada linha por scrollLeft) ---- */
.mural.is-rolavel .mural__linha {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.mural.is-rolavel .mural__linha::-webkit-scrollbar { display: none; }
.mural.is-rolavel .mural__trilho { animation: none; }
.is-arrastando { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.lista-pos.is-arrastando { scroll-snap-type: none; }
@media (hover: hover) and (pointer: fine) {
  .lista-pos { cursor: grab; }
}

@media (max-width: 639px) {
  /* o mesmo respiro em todas as dobras, só menor */
  :root { --respiro-dobra: 48px; }
  .secao-cabecalho { gap: 16px; margin-bottom: 28px; }

  /* títulos de seção num corpo que cabe em três ou quatro linhas */
  .secao-titulo { font-size: clamp(32px, 9vw, 40px); }
  .pos .secao-titulo,
  .pos-cursos .secao-titulo { font-size: clamp(30px, 8.4vw, 38px); }

  /* ---- Para quem é: os quatro num painel só, uma linha por item ---- */
  .quadros {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--linha);
    border-radius: 22px;
    background:
      radial-gradient(90% 50% at 100% 0%, rgba(242, 96, 12, 0.1), transparent 70%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      rgba(12, 9, 7, 0.78);
    overflow: hidden;
  }
  .quadro {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icone texto numero";
    align-items: center;
    align-content: normal;
    gap: 14px;
    min-height: 0;
    padding: 16px 18px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .quadro + .quadro { border-top: 1px solid var(--linha); }
  .quadro:hover,
  .quadros .quadro.is-foco { transform: none; box-shadow: none; background-color: rgba(255, 153, 51, 0.05); }
  .quadro__icone { grid-area: icone; width: 46px; height: 46px; border-radius: 13px; }
  .quadro__icone .icone { width: 22px; height: 22px; }
  .quadro__texto { grid-area: texto; font-size: 16px; text-wrap: pretty; }
  .quadro__numero { grid-area: numero; position: static; font-size: 30px; }
  /* o fio de luz da base só acende na linha em foco */
  .quadro.is-visto::after { transform: scaleX(0); }
  .quadros .quadro.is-foco::after { transform: scaleX(1); }

  /* ---- Escola: a arte já diz "Escola Contábil"; sai a etiqueta repetida ---- */
  .escola__texto > .sobretitulo { display: none; }
  .escola__visual { width: min(62vw, 260px); }
  .escola__titulo { max-width: 22ch; font-size: clamp(28px, 8vw, 34px); }

  /* ---- Escola: preparação num painel só, rotinas em duas colunas ---- */
  .recursos {
    gap: 0;
    border: 1px solid var(--linha);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      rgba(12, 9, 7, 0.74);
    overflow: hidden;
  }
  .recurso { padding: 13px 16px; border: 0; border-radius: 0; background: none; font-size: 15px; }
  .recurso + .recurso { border-top: 1px solid var(--linha); }
  .recurso__icone { width: 40px; height: 40px; }
  .recurso__icone .icone { width: 20px; height: 20px; }

  .rotinas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rotina {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 4px;
    padding: 16px 14px;
  }
  .rotina__icone { grid-row: auto; align-self: start; width: 40px; height: 40px; margin-bottom: 10px; }
  .rotina__icone .icone { width: 20px; height: 20px; }
  .rotina strong { align-self: start; font-size: 15px; hyphens: auto; }
  .rotina > span:last-child { font-size: 13px; }
  .rotinas__mais { margin-top: 22px; }

  /* ---- Pós: carrossel que encaixa um cartão por vez, com o próximo à
     mostra; os pontos embaixo dizem onde se está (main.js) ---- */
  .lista-pos {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .lista-pos::-webkit-scrollbar { display: none; }
  .lista-pos > li { flex: 0 0 min(80%, 320px); scroll-snap-align: center; }
  /* dentro do carrossel os cartões não esperam a revelação vertical */
  .lista-pos > li[data-revelar] { opacity: 1; animation: none; }
  .lista-pos.is-acenando > li { animation: acenar 1.2s var(--curva-saida); }

  .lista-pos.is-carrossel .pos-cartao {
    opacity: 0.5;
    transform: scale(0.94);
    transition: transform 0.5s var(--curva-saida), opacity 0.5s, border-color 0.4s, box-shadow 0.4s;
  }
  .lista-pos.is-carrossel > li.is-ativo .pos-cartao {
    opacity: 1;
    transform: none;
    border-color: rgba(255, 153, 51, 0.38);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9), 0 0 50px -24px rgba(255, 120, 20, 0.7);
  }
  .lista-pos.is-carrossel > li.is-ativo .pos-cartao::after { transform: scaleX(1); }

  .carrossel__pontos { display: flex; justify-content: center; margin-top: 10px; }
  .carrossel__ponto {
    display: grid;
    place-items: center;
    width: 18px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: width 0.4s var(--curva-saida);
    -webkit-tap-highlight-color: transparent;
  }
  .carrossel__ponto::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.24);
    transition: width 0.4s var(--curva-saida), background-color 0.3s, box-shadow 0.3s;
  }
  .carrossel__ponto.is-ativo { width: 32px; }
  .carrossel__ponto.is-ativo::before { width: 22px; background: var(--laranja); box-shadow: 0 0 10px var(--laranja); }

  /* ---- Quem somos: números e vitrine mais baixos ---- */
  .indicador { padding: 18px 14px; }
  .indicador__icone { margin-bottom: 4px; }

  .cf-cartao { min-height: 0; padding: 20px 12px; }
  .cf-cartao__arte { min-height: 50px; margin-bottom: 6px; }
  .cf-cartao__arte--pessoas .icone { width: 46px; height: 46px; }
  /* o cartão grande deita: capelo à esquerda, número e rótulo à direita */
  .cf-cartao--grande {
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: start;
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
    padding: 26px 16px;
    text-align: left;
  }
  .cf-cartao--grande .cf-cartao__halo { top: 50%; left: 30%; translate: -50% -50%; }
  .cf-cartao--grande .cf-cartao__capelo { grid-row: span 2; width: clamp(70px, 20vw, 92px); margin: 0; }
  .cf-cartao--grande .cf-cartao__valor { align-self: end; font-size: clamp(32px, 9.4vw, 44px); }
  .cf-cartao--grande .cf-cartao__rotulo { align-self: start; font-size: 15px; }

  /* ---- Gabriel: as credenciais passam como stories sobre a foto ----
     (is-stories é posto em main.js; sem ele, fica a lista normal) */
  .gabriel__grade:has(.credenciais.is-stories) { grid-template-areas: "cabecalho" "visual"; }
  .credenciais.is-stories { display: grid; grid-template-columns: minmax(0, 1fr); }
  .stories:has(.is-stories) {
    grid-area: visual;
    align-self: end;
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: -8px;
    padding: 12px 14px 16px;
    border: 1px solid var(--linha-laranja);
    border-radius: 20px;
    background:
      radial-gradient(80% 120% at 0% 100%, rgba(242, 96, 12, 0.2), transparent 70%),
      rgba(12, 9, 7, 0.88);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9), 0 0 50px -28px rgba(255, 120, 20, 0.8);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .stories__barras {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    margin-bottom: 14px;
  }
  .stories__barra { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
  .stories__barra i {
    display: block;
    height: 100%;
    background: var(--laranja);
    transform: scaleX(0);
    transform-origin: left;
  }
  .stories__barra.is-lida i { transform: none; }
  .stories__barra.is-atual i { animation: story-barra 4.2s linear forwards; }
  .stories.is-pausado .stories__barra.is-atual i { animation-play-state: paused; }

  /* sem o fundo do cartão, o overflow cortaria o brilho do ícone num retângulo */
  /* a revelação ao rolar animaria a opacidade de todas de uma vez, e elas
     apareceriam sobrepostas: nos stories quem mostra é is-atual */
  .credenciais.is-stories > .credencial {
    animation: none;
    grid-area: 1 / 1;
    align-self: center;
    overflow: visible;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 16px;
    opacity: 0;
    transform: translateX(18px);
    pointer-events: none;
    transition: opacity 0.4s, transform 0.55s var(--curva-saida);
  }
  .credenciais.is-stories > .credencial.is-saindo { transform: translateX(-18px); }
  .credenciais.is-stories > .credencial.is-atual { opacity: 1; transform: none; }
  .credenciais.is-stories .credencial__icone { width: 46px; height: 46px; border-radius: 14px; }
  .credenciais.is-stories .credencial__icone .icone { width: 22px; height: 22px; }
}

@keyframes acenar {
  0%, 100% { translate: 0 0; }
  40% { translate: -48px 0; }
}
@keyframes story-barra { to { transform: none; } }

@media (max-width: 359px) {
  .rotina { padding-inline: 12px; }
  .rotina strong { font-size: 14px; }
}

/* ---- celular: corpo de leitura, prova mais enxuta, alvos de 44px e
   depoimentos um por vez ---- */
@media (max-width: 639px) {
  /* apoios e chamadas em corpo de leitura: o destaque fica com os títulos */
  .secao-apoio { font-size: 15px; }
  .bloco-titulo { font-size: 22px; }
  /* convite numa linha só: o corpo acompanha a largura (a frase mede ~25em) */
  .heroi__convite {
    color: var(--apagado);
    font-size: min(11px, calc((100vw - 2 * var(--gutter)) / 25.5));
    font-weight: 500;
    white-space: nowrap;
  }
  .publico__chamada { max-width: 26ch; font-size: 16px; line-height: 1.35; }
  .fechamento.publico__fechamento { gap: 18px; }
  .rotinas__mais { font-size: 14px; }
  .quem .secao-apoio { max-width: 34ch; }

  /* prova da Escola: o número continua o maior da dobra, mas cabe com folga */
  /* número e rótulo lado a lado; os 12 bonecos numa linha só, separados
     do número por um fio */
  .aprovacao { gap: 16px; margin-top: 32px; padding: 20px 18px; border-radius: 22px; }
  .aprovacao__selo { font-size: 12.5px; }
  .aprovacao__numero { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
  .aprovacao__numero .contador { font-size: 58px; }
  .aprovacao__rotulo { margin-top: 0; font-size: 19px; line-height: 1.05; text-wrap: balance; }
  .aprovacao__grafico { padding-top: 16px; border-top: 1px solid var(--linha); }
  .aprovacao__frase { font-size: 14.5px; }
  .bonecos { grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: none; gap: 4px; margin: 14px 0 10px; }
  .bonecos__legenda { font-size: 12px; }

  /* toque: alvos de pelo menos 44px */
  .carrossel__ponto { width: 22px; height: 44px; }
  .carrossel__ponto.is-ativo { width: 34px; }
  .carrossel__pontos { margin-top: 2px; }
  .gabriel__perfil { min-height: 44px; padding-inline: 10px; }
  .seguir { min-height: 44px; }

  /* depoimentos: uma linha só, um cartão no centro e os vizinhos à mostra;
     main.js passa um por vez */
  .mural__linha--reversa { display: none; }
  .mural.is-rolavel .mural__linha { scroll-snap-type: x mandatory; }
  .mural.is-rolavel .mural__linha.is-arrastando { scroll-snap-type: none; }
  .mural.is-rolavel .mural__grupo > li { scroll-snap-align: center; }
  .depoimento { width: min(82vw, 330px); gap: 14px; padding: 20px 18px 18px; }
  .depoimento blockquote { font-size: 14px; line-height: 1.55; }
  .depoimentos .fechamento { margin-top: 32px; }
}

/* ---- celular: ritmo vertical único em todas as dobras ----
   12px dentro dos cabeçalhos (etiqueta, título, apoio), 24px do cabeçalho
   ao conteúdo, 20px do conteúdo a uma nota ou chamada e 28px até o botão.
   Fica por último no bloco do celular para valer sobre os ajustes de cada
   dobra. */
@media (max-width: 639px) {
  :root {
    --ritmo-cabecalho: 12px;
    --ritmo-conteudo: 24px;
    --ritmo-nota: 20px;
    --ritmo-acao: 28px;
  }

  /* textos de apoio e chamadas um pouco menores */
  .secao-apoio { font-size: 14px; line-height: 1.55; }
  .publico__chamada { max-width: 28ch; font-size: 15px; line-height: 1.4; }

  /* cabeçalhos */
  .secao-cabecalho,
  .escola__texto,
  .preparacao__cabecalho,
  .quem__texto,
  .gabriel__cabecalho { gap: var(--ritmo-cabecalho); }
  .secao-cabecalho { margin-bottom: var(--ritmo-conteudo); }

  /* cabeçalho → conteúdo */
  .escola__grade,
  .preparacao__grade,
  .quem__bloco,
  .gabriel__grade { gap: var(--ritmo-conteudo); }
  .aprovacao { margin-top: var(--ritmo-conteudo); }

  /* conteúdo → nota ou chamada → botão */
  .rotinas__mais { margin-top: var(--ritmo-nota); }
  .fechamento.publico__fechamento { margin-top: var(--ritmo-conteudo); gap: 16px; }
  .secao-acao--centro,
  .fechamento { margin-top: var(--ritmo-acao); }
  .depoimentos .fechamento { margin-top: var(--ritmo-acao); gap: 10px; }
  /* os pontos do carrossel têm 44px de altura (alvo de toque), quase todo
     vazio: o botão encosta um pouco mais para manter a mesma distância
     visual */
  .carrossel__pontos + .secao-acao--centro { margin-top: 12px; }

  /* "+8 mil" nunca quebra; o rótulo ao lado fica com o resto da largura */
  .aprovacao__numero .contador { flex: none; white-space: nowrap; }
  .aprovacao__rotulo { flex: 1; min-width: 0; }
  /* descrições das rotinas: quebra natural, sem forçar linhas iguais */
  .rotina > span:last-child { text-wrap: pretty; }
}

/* ---- toque: aperto nos cartões clicáveis e foco de rolagem ---- */
@media not all and (hover: hover) and (pointer: fine) {
  .oferta,
  .pos-cartao { -webkit-tap-highlight-color: transparent; }
  .oferta:active,
  .lista-pos > li.is-ativo .pos-cartao:active,
  .pos-cartao:active { transform: scale(0.97); transition-duration: 0.15s; }

  .quadro.is-foco,
  .rotina.is-foco,
  .indicador.is-foco,
  .cf-cartao.is-foco {
    border-color: rgba(255, 153, 51, 0.32);
    box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.9), 0 0 50px -24px rgba(255, 120, 20, 0.7);
  }
  .quadro.is-foco::before,
  .rotina.is-foco::before,
  .indicador.is-foco::before,
  .cf-cartao.is-foco::before,
  .recurso.is-foco::before { opacity: 1; }
  .quadro.is-foco::after { transform: scaleX(1); transition-delay: 0s; }
  .quadro.is-foco .quadro__numero { -webkit-text-stroke-color: rgba(255, 180, 92, 0.8); }
  .recurso.is-foco .recurso__numero { -webkit-text-stroke-color: rgba(255, 180, 92, 0.9); }
  .recurso.is-foco .recurso__icone,
  .rotina.is-foco .rotina__icone { transform: rotate(-8deg) scale(1.08); }
}

/* =========================================================
   Desempenho
   ========================================================= */

/* animações contínuas param enquanto o bloco está fora da tela (a classe
   is-fora é posta em main.js) */
.is-fora *,
.is-fora ::before,
.is-fora ::after { animation-play-state: paused !important; }

.dock:not(.is-visivel) .botao__brilho,
.lead:not(.is-aberto) .tarja__trilho,
.lead:not(.is-aberto) .botao__brilho { animation-play-state: paused; }

/* Telas de toque (celular e tablet). Os efeitos ficam; saem só os custos
   que o celular sente a cada quadro de rolagem. */
@media not all and (hover: hover) and (pointer: fine) {
  .luz-cursor { display: none; }

  /* desfoque do que está por trás é refeito a cada quadro de rolagem */
  .dock {
    background: rgba(14, 10, 7, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .lead__veu {
    background: rgba(3, 2, 1, 0.78);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .heroi__aura,
  .escola__brilho,
  .sucesso__marca::before { filter: none; }

  .grao { inset: -40px; animation-name: grao-leve; }

  /* revelação sem o blur, que pesava com vários cartões entrando juntos */
  [data-revelar].is-visto { animation-name: revelar-leve; }
}

@keyframes revelar-leve {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

@keyframes grao-leve {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-24px, 16px); }
  40% { transform: translate(16px, -24px); }
  60% { transform: translate(-16px, -8px); }
  80% { transform: translate(24px, 24px); }
  100% { transform: translate(0, 0); }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  .capelo--bonus, .laco__luz, .halo-cta::before, .halo-cta::after, .escola__reflexo { display: none; }
  .brasas, .luz-cursor, .grao { display: none; }
  [data-revelar] { opacity: 1; }
  html:not(.sem-js) .quadro__icone .icone { stroke-dashoffset: 0; }
  /* mural parado vira uma faixa de rolagem lateral */
  .mural { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .mural__trilho { animation: none; padding-inline: var(--gutter); }
}