/* =========================================================
   Esquenta Black 2026 — Contabilidade Facilitada
   Identidade: preto profundo + laranja CF (#FF9933),
   títulos em Squada One, texto em Sora.
   ========================================================= */

:root {
  --fundo: #050403;
  --fundo-2: #0b0806;
  --fundo-3: #120c08;
  --texto: #f6f1ea;
  --texto-2: #e3d8cc;
  --apagado: #a89b8e;
  --laranja: #ff9933;
  --laranja-claro: #ffb45c;
  --laranja-luz: #ffd08a;
  --laranja-forte: #f26a0c;
  --brasa: #e8590c;
  --vermelho: #e3261b;
  --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%);

  --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;
}

@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; }

: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);
}

/* texto dourado, sem animação de luz (o brilho fica só nos botões) */
.destaque,
.contagem__principal,
.realce {
  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 (nem é realocado) quando a barra aparece ou some na rolagem do
   celular. Sem mix-blend-mode: sobre o fundo quase preto, "screen" dava o
   mesmo resultado e forçava uma mesclagem da tela inteira a cada quadro. */
.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); }
}

section, 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); }
.tarja__barra { display: block; width: 2px; height: 0.85em; background: currentColor; opacity: 0.55; }
.tarja__ponto { display: block; width: 0.38em; height: 0.38em; border-radius: 50%; background: currentColor; }

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

/* reflexo que percorre a fita: a camada tem 2,5× a largura da fita e anda
   por transform (sem repintar), no mesmo percurso do antigo background-position */
.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%); }
}

.tarja--vermelha {
  color: #fff;
  font-size: clamp(17px, 2.1vw, 26px);
  padding: 0.5em 0 0.45em;
  background: linear-gradient(90deg, #8f0d08, #d8231a 25%, #ff3b2a 50%, #d8231a 75%, #8f0d08);
  box-shadow: 0 12px 40px -6px rgba(227, 38, 27, 0.45), inset 0 1px rgba(255, 255, 255, 0.28), inset 0 -1px rgba(0, 0, 0, 0.3);
}

.tarja--topo {
  z-index: 6;
  width: 112%;
  margin: 18px 0 0 -6%;
  transform: rotate(-1.8deg);
  animation: tarja-entra 1s var(--curva-saida) both;
}

@keyframes tarja-entra {
  from { transform: rotate(-1.8deg) translateY(-120%); opacity: 0; }
  to { transform: rotate(-1.8deg); opacity: 1; }
}

/* faixa laranja conforme o Figma (Frame 6): degradê vertical, texto preto,
   marca "Esquenta Black" empilhada, pontos redondos e ∞ em vetor */
.tarja--laranja {
  color: #000;
  font-size: clamp(26px, 3.4vw, 46px);
  padding: 0.14em 0 0.1em;
  background: linear-gradient(180deg, #fd9831 0%, #fa862e 50%, #f7742c 100%);
  box-shadow: 0 16px 50px -10px rgba(255, 120, 20, 0.55), inset 0 1px rgba(255, 255, 255, 0.35);
}
.tarja--laranja .tarja__grupo { gap: 0.36em; padding-right: 0.36em; }
.tarja--laranja .tarja__ponto { width: 0.26em; height: 0.26em; }

.tarja__marca {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 0.96em;
  line-height: 0.86;
}
.tarja__marca small {
  display: block;
  margin-bottom: 0.02em;
  font-family: var(--fonte-texto);
  font-size: 0.197em;
  font-weight: 400;
  letter-spacing: 0.79em;
  line-height: 1;
  /* o espaçamento largo deixa uma sobra à direita; compensa para alinhar com "BLACK" */
  margin-right: -0.79em;
}

.tarja__infinito {
  width: 0.83em;
  height: 0.48em;
  flex: none;
  fill: currentColor;
}

.tarja--escura {
  color: var(--laranja);
  font-size: clamp(16px, 1.9vw, 24px);
  padding: 0.55em 0 0.5em;
  background: #0d0906;
  border-block: 1px solid rgba(255, 153, 51, 0.45);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.tarja--escura::after { opacity: 0.35; }

/* cruzamento entre as dobras */
.cruzamento {
  height: clamp(120px, 15vw, 200px);
  margin-block: clamp(-60px, -4vw, -24px);
  overflow: clip;
  pointer-events: none;
}

.cruzamento .tarja {
  position: absolute;
  top: 50%;
  left: -8%;
  width: 116%;
}
.tarja--x1 { transform: translateY(-50%) rotate(-4deg); z-index: 2; }
.tarja--x2 { transform: translateY(-50%) rotate(3.2deg); z-index: 1; }

/* celular e tablet: sem as tarjas; o aviso de revelação e o CTA sobem para
   o lugar delas e saem do fim da lista de cursos */
.aviso-movel { position: relative; z-index: 2; }
@media (min-width: 960px) {
  .aviso-movel { display: none; }
}
@media (max-width: 959px) {
  .cruzamento,
  .cursos .cursos__rodape--lista { display: none; }
}

/* ---------- 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: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.35s, background-color 0.3s, border-color 0.3s, color 0.3s;
  -webkit-tap-highlight-color: transparent;
}


/* Teste A/B da cor dos CTAs (data-cta no <html>, sorteado no <head>).
   Laranja é o controle e também o padrão se o sorteio não rodar. */
.botao--primario {
  color: #1a0a00;
  background: var(--gradiente-laranja);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, 0.7),
    inset 0 -2px 0 rgba(150, 50, 0, 0.35),
    0 12px 32px -10px rgba(255, 120, 20, 0.75),
    0 0 70px -18px rgba(255, 120, 20, 0.7);
}
.botao--primario:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, 0.8),
    inset 0 -2px 0 rgba(150, 50, 0, 0.35),
    0 18px 40px -10px rgba(255, 120, 20, 0.9),
    0 0 90px -12px rgba(255, 120, 20, 0.85);
}

/* variante verde #00ff00; o brilho em volta acompanha a cor */
[data-cta="verde"] .botao--primario {
  color: #031a00;
  background: #00ff00;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    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);
}
[data-cta="verde"] .botao--primario:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    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__brilho {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.65) 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: 16.5px; padding: 20px 34px; }
.botao--bloco { width: 100%; }
.botao--compacto { font-size: 12.5px; padding: 12px 16px; gap: 0.45em; }

.botao--fantasma {
  color: var(--texto);
  font-size: 12.5px;
  padding: 11px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.botao--fantasma:hover { border-color: var(--laranja); color: var(--laranja-claro); }

.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(26, 10, 0, 0.25);
  border-top-color: #1a0a00;
  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); } }

/* ---------- Pequenos componentes ---------- */
.sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  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 {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--laranja);
  box-shadow: 0 0 12px var(--laranja);
}
.ponto-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--laranja);
  animation: pulso 1.8s var(--curva-saida) infinite;
}

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

/* =========================================================
   DOBRA 1 — Herói
   ========================================================= */
.heroi {
  padding-bottom: clamp(56px, 8vw, 96px);
  background:
    radial-gradient(70% 55% at 78% 42%, rgba(242, 96, 12, 0.2), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(242, 96, 12, 0.08), transparent 70%),
    linear-gradient(180deg, #080605 0%, var(--fundo) 100%);
  overflow: clip;
}

.cabecalho {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 26px;
  animation: surgir 0.9s 0.25s var(--curva-saida) both;
}

.cabecalho__marcas {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.marca-cf { height: 26px; width: auto; }
.marca-fbc { height: 30px; width: auto; }

.cabecalho__divisor {
  display: block;
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

@media (min-width: 640px) {
  .cabecalho { justify-content: flex-start; }
  .marca-cf { height: 30px; }
  .marca-fbc { height: 36px; }
}

.heroi__grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "visual" "texto";
}

/* ---- visual (pôster com o especialista) ---- */
.heroi__visual {
  grid-area: visual;
  position: relative;
  aspect-ratio: 1 / 1.24;
  margin-inline: calc(var(--gutter) * -1);
  isolation: isolate;
  --mx: 0;
  --my: 0;
  --sy: 0;
}

/* 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: -14% -45%;
  z-index: -3;
  display: grid;
  align-content: center;
  gap: 12px;
  opacity: 0.2;
  rotate: -9deg;
  /* some nas bordas e some antes do logo, para não disputar leitura */
  -webkit-mask-image:
    radial-gradient(closest-side at 50% 46%, #000 35%, transparent 100%),
    linear-gradient(180deg, #000 55%, transparent 80%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(closest-side at 50% 46%, #000 35%, transparent 100%),
    linear-gradient(180deg, #000 55%, transparent 80%);
  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; }

/* caixas no formato dos logos horizontais, para eles ocuparem a caixa */
.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);
}
/* limites em px: altura em % não vale dentro da grade da caixa, e o logo
   vertical da Escola estourava para a linha de baixo */
.vitrine__item img {
  width: auto;
  height: auto;
  max-width: 154px;
  max-height: 50px;
  object-fit: contain;
}

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

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

.heroi__anel {
  position: absolute;
  left: 50%;
  top: 46%;
  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));
  /* o anel é um círculo: girar o elemento equivale a girar o degradê, e
     transform roda sem repintar a cada quadro */
  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);
}

.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%;
  bottom: 24%;
  width: 100%;
  max-width: none;
  height: auto;
  translate: calc(-50% + var(--mx) * 12px) calc(var(--sy) * 0.12px + var(--my) * 8px);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 92%);
}

@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; }
}

/* chamada + data em cima do logo, num bloco só ancorado na base do pôster */
.heroi__assinatura {
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 3;
  width: 84%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: clamp(12px, 1.6vw, 18px);
}

.heroi__marca { position: relative; width: 100%; }

.heroi__logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 40px rgba(255, 120, 20, 0.18));
  animation: logo-entra 1.2s 0.7s var(--curva-saida) both;
}

@keyframes logo-entra {
  from { opacity: 0; transform: translateY(30px) scale(0.92); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 40px rgba(255, 120, 20, 0.18)); }
}


/* selo giratório com a data */
/* fica atrás do especialista (z-index abaixo do dele), no canto esquerdo */
.selo {
  position: absolute;
  top: 6%;
  left: calc(var(--gutter) + 2px);
  z-index: 0;
  width: clamp(92px, 24vw, 140px);
  aspect-ratio: 1;
  rotate: -10deg;
  translate: calc(var(--mx) * 18px) calc(var(--my) * 14px);
  animation: selo-entra 1s 1.1s var(--curva-mola) both;
}

@keyframes selo-entra {
  from { opacity: 0; transform: scale(0.4) rotate(-90deg); }
  to { opacity: 1; transform: none; }
}

.selo__anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: girar-simples 22s linear infinite;
}
.selo__anel text {
  fill: var(--laranja);
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* o texto do miolo é medido pelo próprio selo (cqw), não pela tela:
   assim ele cabe no círculo em qualquer tamanho de selo */
.selo { container-type: inline-size; }
.selo__miolo {
  position: absolute;
  inset: 18%;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2a1a0e, #0a0705 70%);
  border: 1px solid rgba(255, 153, 51, 0.5);
  box-shadow: 0 0 30px -4px rgba(255, 120, 20, 0.55), inset 0 1px rgba(255, 255, 255, 0.12);
}
.selo__miolo strong {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 23cqw;
  line-height: 0.9;
  color: var(--texto);
}
.selo__miolo span {
  margin-top: 1cqw;
  font-size: 9.6cqw;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laranja-claro);
}

/* ---- texto ---- */
.heroi__texto {
  grid-area: texto;
  position: relative;
  z-index: 5;
  margin-top: -2%;
}

.heroi__alca { display: none; }

@media (min-width: 960px) {
  .heroi__titulo { margin-top: 20px; }
}

.heroi__titulo {
  margin: 10px 0 16px;
  font-size: clamp(31px, 3.45vw, 50px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.heroi__titulo .linha {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.heroi__titulo .linha > span {
  display: inline-block;
  animation: linha-sobe 1s var(--curva-saida) both;
}
.heroi__titulo .linha:nth-child(1) > span { animation-delay: 0.55s; }
.heroi__titulo .linha:nth-child(2) > span { animation-delay: 0.67s; }
.heroi__titulo .linha:nth-child(3) > span { animation-delay: 0.79s; }
.heroi__titulo .linha:nth-child(4) > span { animation-delay: 0.91s; }

@keyframes linha-sobe {
  from { transform: translateY(110%); }
  to { transform: none; }
}

.heroi__apoio {
  max-width: 34ch;
  color: var(--texto-2);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.45;
  animation: surgir 0.9s 0.95s var(--curva-saida) both;
}

.beneficios {
  display: grid;
  gap: 12px;
  margin: 26px 0 28px;
  padding: 0;
  list-style: none;
}
.beneficios li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  animation: surgir-lado 0.8s var(--curva-saida) both;
}
.beneficios li:nth-child(1) { animation-delay: 1.05s; }
.beneficios li:nth-child(2) { animation-delay: 1.15s; }
.beneficios li:nth-child(3) { animation-delay: 1.25s; }

.beneficios__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  color: var(--laranja);
  background: linear-gradient(160deg, rgba(255, 153, 51, 0.16), rgba(255, 153, 51, 0.04));
  border: 1px solid var(--linha-laranja);
  box-shadow: 0 0 24px -10px rgba(255, 120, 20, 0.8);
}
.beneficios__icone .icone { width: 21px; height: 21px; }

.heroi__acao { animation: surgir 0.9s 1.35s var(--curva-saida) both; }

.data-evento {
  animation: surgir 0.9s 1.2s var(--curva-saida) both;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border: 1px solid rgba(255, 153, 51, 0.42);
  border-radius: 999px;
  background: rgba(12, 8, 5, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.9), 0 0 32px -12px rgba(255, 120, 20, 0.6);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  white-space: nowrap;
}
.data-evento .icone { width: 20px; height: 20px; color: var(--laranja); }

.microcopia {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--apagado);
  font-size: 13px;
}
.microcopia .icone { width: 16px; height: 16px; color: var(--laranja); }

.heroi .botao--grande { width: 100%; }

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

.rolar { display: none; }

@media (min-width: 960px) {
  .heroi__grade {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-areas: "texto visual";
    align-items: center;
    column-gap: 16px;
    min-height: min(calc(100svh - 150px), 780px);
    padding-top: 12px;
  }
  .heroi__visual {
    aspect-ratio: 0.86 / 1;
    margin-inline: 0 calc(var(--gutter) * -0.5);
  }
  .heroi__vitrine { inset: -18% -30% -10% -6%; }
  .heroi__especialista img { width: 118%; bottom: 13%; left: 57%; }
  .heroi__assinatura { width: 88%; bottom: 2%; }
  .heroi__texto { margin-top: 0; padding-block: 24px; }
  .selo { top: 5%; left: 0; }
  .heroi .botao--grande { width: auto; }

  .rolar {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 5;
    display: block;
    width: 26px;
    height: 42px;
    translate: -50% 0;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    animation: surgir 1s 2s both;
  }
  .rolar span {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 3px;
    height: 8px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--laranja);
    animation: rolar 1.8s var(--curva-saida) infinite;
  }
}

@keyframes rolar {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* =========================================================
   Herói no celular e no tablet
   A primeira dobra concentra o que decide a conversão: logo, data,
   título e botão. O restante (a frase da oferta e os benefícios)
   vem numa folha logo abaixo.
   ========================================================= */
@media (max-width: 959px) {
  .heroi { padding-bottom: 0; }
  .cabecalho { padding-top: 22px; }

  /* a coluna de texto se desfaz para os filhos entrarem na grade e
     serem reordenados: capa, título, botão e, por último, a folha */
  .heroi__grade { grid-template-areas: none; }
  .heroi__texto { display: contents; }
  .heroi__visual { grid-area: auto; order: 1; }
  .heroi__titulo { order: 2; }
  .heroi__acao { order: 3; }
  .heroi__detalhes { order: 4; }

  /* capa: altura calculada para caberem capa + título + botão na tela
     (descontando tarja e cabeçalho acima, título e botão abaixo) */
  .heroi__visual {
    aspect-ratio: auto;
    height: clamp(228px, calc(100svh - 352px), 440px);
    container-type: size;
  }
  .heroi__vitrine { opacity: 0.14; }
  .heroi__aura { top: 44%; }
  .heroi__anel { top: 40%; width: 78%; }

  .heroi__especialista img {
    top: 0;
    bottom: auto;
    left: 58%;
    width: min(108cqw, 80cqh);
    /* só a base da camisa se dissolve; o Gabriel fica opaco */
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 74%, transparent 98%);
  }

  .heroi__assinatura {
    bottom: 4px;
    width: calc(100% - 2 * var(--gutter));
    gap: 8px;
  }
  .heroi__marca { width: min(56%, 240px, 58cqh); }
  .data-evento { gap: 8px; padding: 6px 14px 6px 10px; font-size: 13.5px; }
  .data-evento .icone { width: 16px; height: 16px; }

  /* celular e tablet: sem o selo giratório */
  .selo { display: none; }

  /* título na primeira dobra, livre das linhas forçadas do computador */
  .heroi__titulo {
    margin: 16px auto 0;
    max-width: 20ch;
    font-size: clamp(24px, 6.7vw, 32px);
    line-height: 1.12;
    text-align: center;
    text-wrap: balance;
    animation: surgir 0.9s 0.5s var(--curva-saida) both;
  }
  .heroi__titulo .linha { display: inline; overflow: visible; padding: 0; margin: 0; }
  .heroi__titulo .linha > span { display: inline; animation: none; }

  /* botão + microcópia, com respiro generoso antes da folha */
  .heroi__acao {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-bottom: 52px;
    text-align: center;
  }
  .heroi__acao .microcopia { margin-top: 0; justify-content: center; }
  .heroi .botao--grande { width: 100%; max-width: 440px; }

  /* folha */
  .heroi__detalhes {
    position: relative;
    margin: 0 calc(var(--gutter) * -1);
    /* sem respiro embaixo: o espaço até o próximo bloco vem do cartão do aviso */
    /* laterais = margem da página, para alinhar com o aviso e os cursos */
    padding: 30px var(--gutter) 0;
    border-radius: 28px 28px 0 0;
    background:
      radial-gradient(90% 55% at 50% 0%, rgba(242, 96, 12, 0.16), transparent 70%),
      linear-gradient(180deg, #110b07 0%, var(--fundo) 80%);
    box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.9);
    text-align: center;
  }
  .heroi__detalhes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 170, 90, 0.75), transparent);
  }
  .heroi__alca {
    display: block;
    width: 40px;
    height: 4px;
    margin: -14px auto 22px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
  }

  /* a frase da oferta em destaque */
  .heroi__apoio {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 20px;
    border: 1px solid var(--linha-laranja);
    border-radius: 20px;
    background:
      radial-gradient(100% 90% at 50% 0%, rgba(242, 96, 12, 0.2), transparent 70%),
      rgba(255, 255, 255, 0.02);
    box-shadow: 0 0 50px -24px rgba(255, 120, 20, 0.7);
    color: var(--texto);
    font-size: clamp(21px, 5.6vw, 28px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  /* benefícios num cartão agrupado, com divisórias */
  .beneficios {
    max-width: 560px;
    gap: 0;
    margin: 16px auto 0;
    border: 1px solid var(--linha);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
    text-align: left;
  }
  .beneficios li {
    gap: 14px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.35;
  }
  .beneficios li + li { border-top: 1px solid var(--linha); }
  .beneficios__icone { width: 36px; height: 36px; border-radius: 10px; }
  .beneficios__icone .icone { width: 19px; height: 19px; }
}

/* tablet: mesma estrutura, em escala maior */
@media (min-width: 760px) and (max-width: 959px) {
  .heroi__visual { height: clamp(360px, calc(100svh - 420px), 640px); }
  .heroi__marca { width: min(46%, 340px, 58cqh); }
  .data-evento { font-size: 16px; padding: 8px 18px 8px 14px; }
  .heroi__titulo { font-size: 42px; max-width: 18ch; }
}

/* =========================================================
   DOBRA 2 — Cursos
   ========================================================= */
.cursos {
  padding-block: clamp(64px, 8vw, 116px) clamp(40px, 6vw, 72px);
  background: radial-gradient(55% 35% at 50% 8%, rgba(242, 96, 12, 0.12), transparent 70%);
}

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

/* Três linhas fixas. A fonte acompanha a largura útil para a linha mais
   longa ("Todos os nossos cursos e pós") caber inteira até no celular. */
.secao-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: min(72px, calc((100vw - 2 * var(--gutter)) / 12.1));
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.secao-titulo__linha { display: block; white-space: nowrap; }

/* =========================================================
   Lista de cursos
   Escola Contábil num cartão de destaque na largura toda; os demais
   em blocos de 2 em 2. Todos os blocos seguem a mesma grade interna
   (topo · logo · oferta oculta). Os logos horizontais usam uma escala
   única sobre o tamanho do Figma (--w = largura × 0,6, no HTML), para a
   tarja "Pós-graduação" sair do mesmo tamanho em todos.
   ========================================================= */
.lista-cursos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.curso {
  --mx: 50%;
  --my: 50%;
  --escala-logo: 1;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr;
  min-height: 150px;
  /* número, cadeado e faixa "Mais procurado" ficam fora do fluxo; o padding
     é simétrico para o logo ficar no centro real do bloco */
  padding: 34px 14px;
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  overflow: hidden;
  transition: border-color 0.4s, transform 0.5s var(--curva-saida), box-shadow 0.4s;
}

/* holofote que segue o ponteiro */
.curso::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(255, 153, 51, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
}

/* borda iluminada que segue o ponteiro */
.curso::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255, 190, 120, 0.95), transparent 60%);
  -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);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.curso:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9), 0 0 50px -24px rgba(255, 120, 20, 0.7); }
.curso:hover::before, .curso:hover::after { opacity: 1; }
.curso:active { transform: scale(0.98); border-color: var(--linha-laranja); }

/* número e cadeado ficam no canto superior, fora do fluxo: assim o topo
   de todos os blocos é igual, com ou sem a faixa "Mais procurado" */
.curso__topo {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
}
.curso__topo:has(.curso__etiqueta) { top: 36px; }

.curso__numero {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  line-height: 1;
  color: rgba(255, 153, 51, 0.55);
}

.curso__cadeado {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: rgba(255, 153, 51, 0.65);
}

.curso__logo {
  grid-row: 1;
  display: grid;
  place-items: center;
  min-height: 84px;
}
.curso__logo img {
  width: calc(var(--w) * var(--escala-logo) * 1px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.6));
  transition: transform 0.6s var(--curva-mola);
}
.curso:hover .curso__logo img { transform: scale(1.05); }

.curso__etiqueta {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gradiente-laranja);
  color: #1a0a00;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

/* "Mais procurado": faixa de ponta a ponta no topo do bloco */
.curso:has(.curso__topo .curso__etiqueta) {
  border-color: rgba(255, 153, 51, 0.4);
  box-shadow: 0 0 44px -24px rgba(255, 120, 20, 0.7);
}
.curso__topo .curso__etiqueta {
  position: absolute;
  top: -36px;
  left: -14px;
  right: -14px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 5px;
  border-radius: 0;
  border-bottom: 1px solid var(--linha-laranja);
  background: linear-gradient(90deg, rgba(255, 153, 51, 0.06), rgba(255, 153, 51, 0.22), rgba(255, 153, 51, 0.06));
  color: var(--laranja-claro);
  font-size: 9.5px;
  letter-spacing: 0.16em;
}
.curso__topo .curso__etiqueta::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--laranja);
  box-shadow: 0 0 8px var(--laranja);
  animation: piscar 1.6s ease-in-out infinite;
}

/* =========================================================
   Destaque: Escola Contábil
   ========================================================= */
.curso--destaque {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  justify-items: center;
  row-gap: 20px;
  min-height: 0;
  padding: 34px 20px 28px;
  border-color: transparent;
  border-radius: 24px;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(242, 96, 12, 0.3), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(242, 96, 12, 0.1), transparent 70%),
    linear-gradient(180deg, #160e08, #0b0806);
  box-shadow: 0 0 80px -30px rgba(255, 120, 20, 0.9), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  text-align: center;
}

/* Borda de luz girando, a mesma da contagem regressiva.
   A máscara deixa só a moldura de 1,5px; por dentro dela gira, por transform,
   um quadrado com o degradê cônico. O lado do quadrado (142% do maior lado
   da borda) cobre a diagonal, então os cantos nunca ficam descobertos. Girar
   o quadrado em volta do centro dá o mesmo desenho que girar o ângulo do
   degradê, sem repintar a cada quadro. */
.destaque__borda,
.painel__borda {
  position: absolute;
  inset: 0;
  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;
}
.destaque__borda::before,
.painel__borda::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 142cqmax;
  height: 142cqmax;
  margin: -71cqmax 0 0 -71cqmax;
  animation: girar-simples 8s linear infinite;
}
.destaque__borda::before {
  background: conic-gradient(rgba(255, 153, 51, 0.25) 0 55%, #f26a0c 70%, #ffd08a 80%, #ff9933 86%, rgba(255, 153, 51, 0.25) 96%);
}

.curso--destaque .curso__numero { display: none; }
.destaque__marca {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(150px, 42vw, 200px);
  aspect-ratio: 1;
}
.destaque__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 128, 34, 0.35), transparent 72%);
  animation: respirar 5s ease-in-out infinite;
}
.destaque__halo::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 153, 51, 0.35);
  animation: girar-simples 40s linear infinite;
}
.destaque__marca img {
  position: relative;
  width: 62%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7));
}

.destaque__texto { display: grid; justify-items: center; gap: 12px; }

.destaque__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(38px, 10.5vw, 64px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.destaque__titulo .destaque { display: block; }

.curso__destaque-linha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texto-2);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
}
.curso__destaque-linha .icone { width: 22px; height: 22px; color: var(--laranja); }

/* área visual à direita do banner: globo de miniaturas recortado do
   banner do Figma, com borda transparente para fundir no fundo do cartão */
.destaque__visual { display: none; }

@media (min-width: 780px) {
  .lista-cursos { gap: 16px; }
  .curso { --escala-logo: 1.25; min-height: 176px; padding: 40px 20px; }
  .curso__topo { top: 16px; left: 20px; right: 20px; }
  .curso__topo:has(.curso__etiqueta) { top: 44px; }
  .curso__topo .curso__etiqueta { top: -44px; left: -20px; right: -20px; padding: 8px 10px 7px; font-size: 10px; }
  .curso__logo { min-height: 96px; }

  .curso--destaque {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    column-gap: 40px;
    padding: 30px 48px;
    text-align: left;
  }
  .destaque__marca { width: 190px; }
  .destaque__texto { justify-items: start; gap: 14px; }
  .destaque__titulo { font-size: clamp(52px, 5.4vw, 76px); }
  .curso__destaque-linha { font-size: 18px; }

  .destaque__visual {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-width: 240px;
  }
  .destaque__visual img {
    /* o globo sangra para fora do banner à direita e embaixo */
    width: 320px;
    max-width: none;
    height: auto;
    margin: -36px -48px -36px 0;
  }
}

/* tela média: o globo à direita não cabe junto; fica logo | texto */
@media (min-width: 780px) and (max-width: 1099px) {
  .curso--destaque { grid-template-columns: auto minmax(0, 1fr); }
  .destaque__visual { display: none; }
}

/* celular: Escola Contábil segue na largura toda; os demais em 2 colunas */
@media (max-width: 559px) {
  .lista-cursos { gap: 8px; }
  .curso { min-height: 140px; }
  /* bloco justo ao logo: linha do número (10px + 16px) + 12px até o logo;
     embaixo 16px, para os cursos não ficarem distantes um do outro */
  .curso:not(.curso--destaque) { min-height: 0; padding: 38px 8px 16px; border-radius: 14px; }
  .curso__topo,
  .curso__topo:has(.curso__etiqueta) { top: 10px; left: 10px; right: 10px; }
  .curso__numero { font-size: 13px; }
  .curso__cadeado { width: 13px; height: 13px; }

  /* "Mais procurado" vira selo na linha do número: assim o topo é igual
     nos dois blocos da fileira e o logo continua no centro */
  .curso__topo .curso__etiqueta {
    position: static;
    margin-inline: auto;
    gap: 4px;
    padding: 3px 7px 2px;
    border: 1px solid var(--linha-laranja);
    border-radius: 999px;
    font-size: 7.5px;
    letter-spacing: 0.1em;
  }
  .curso__topo .curso__etiqueta::before { width: 4px; height: 4px; }

  /* escala única, proporcional à largura do bloco: Reforma (--w 223,2)
     ocupa ~97%; Departamento Pessoal e Setor Público param em 100% */
  .curso__logo { min-height: 0; }
  .curso__logo img { width: calc(var(--w) / 230 * 100%); }

  /* Escola Contábil compacta, no arranjo do banner (logo | texto), para
     o destaque e a grade caberem juntos numa tela de celular */
  .curso--destaque {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    column-gap: 14px;
    min-height: 0;
    padding: 18px 16px;
    border-radius: 18px;
    text-align: left;
  }
  .destaque__marca { width: 92px; }
  .destaque__texto { justify-items: start; gap: 8px; }
  .destaque__titulo { font-size: clamp(24px, 7.8vw, 34px); }
  .curso__destaque-linha { gap: 6px; font-size: 12px; line-height: 1.3; text-wrap: balance; }
  .curso__destaque-linha .icone { flex: none; width: 16px; height: 16px; }
  .curso--destaque .curso__etiqueta { padding: 3px 7px; font-size: 8px; letter-spacing: 0.04em; }
}

/* selo "Mais procurado" apertado entre número e cadeado */
@media (max-width: 389px) {
  .curso__topo .curso__etiqueta { letter-spacing: 0.06em; }
  .curso__topo .curso__etiqueta::before { display: none; }
}

@media (max-width: 359px) {
  .curso--destaque { column-gap: 10px; padding-inline: 12px; }
  .destaque__marca { width: 76px; }
  .curso__topo .curso__etiqueta { padding-inline: 5px; font-size: 7px; letter-spacing: 0.03em; }
  .curso--destaque .curso__etiqueta { padding: 3px 6px; font-size: 7px; letter-spacing: 0.02em; }
}

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

/* ---- celular e tablet: aviso + botão num cartão, no lugar das tarjas ---- */
@media (max-width: 559px) {
  .cursos .secao-cabecalho { gap: 16px; margin-bottom: 28px; }
}

/* mesmo respiro (48px) antes e depois do cartão: benefícios → aviso → cursos */
@media (max-width: 959px) {
  .cursos { padding-top: 48px; }
  .aviso-movel .cursos__rodape--cartao {
    position: relative;
    gap: 18px;
    max-width: 560px;
    margin: 48px auto 0;
    padding: 26px 20px 20px;
    border: 1px solid var(--linha-laranja);
    border-radius: 22px;
    background:
      radial-gradient(80% 70% at 50% 0%, rgba(242, 96, 12, 0.2), transparent 70%),
      linear-gradient(180deg, #120c08, #080605);
    overflow: hidden;
  }
  .cursos__rodape .aviso-revelacao {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
  }
  .cursos__rodape .aviso-revelacao .icone {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 12px;
    border-radius: 50%;
    border: 1px solid var(--linha-laranja);
    background: rgba(255, 153, 51, 0.1);
    animation: cadeado-pulsa 2.6s ease-in-out infinite;
  }
  .cursos__rodape .botao { width: 100%; }
}

@keyframes cadeado-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 51, 0.35), 0 0 24px -6px rgba(255, 120, 20, 0.6); }
  50% { box-shadow: 0 0 0 10px rgba(255, 153, 51, 0), 0 0 30px -4px rgba(255, 120, 20, 0.8); }
}

.cursos__rodape {
  display: grid;
  justify-items: center;
  gap: 22px;
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
}

.aviso-revelacao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px dashed rgba(255, 153, 51, 0.38);
  border-radius: 999px;
  background: rgba(255, 153, 51, 0.05);
  color: var(--texto-2);
  font-size: 14.5px;
  text-align: left;
}
.aviso-revelacao .icone { width: 18px; height: 18px; color: var(--laranja); }

@media (max-width: 479px) {
  .aviso-revelacao { border-radius: 16px; }
  .cursos__rodape .botao { width: 100%; }
}

/* =========================================================
   DOBRA 3 — Contagem regressiva
   ========================================================= */
.contagem { padding-block: clamp(32px, 5vw, 64px) clamp(72px, 9vw, 128px); }

.painel {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 26px;
  padding: clamp(26px, 4vw, 52px) clamp(20px, 4vw, 52px);
  border-radius: 28px;
  background:
    radial-gradient(55% 80% at 8% 50%, rgba(242, 96, 12, 0.26), transparent 65%),
    radial-gradient(40% 60% at 100% 100%, rgba(242, 96, 12, 0.1), transparent 70%),
    linear-gradient(180deg, var(--fundo-3), #070504);
  box-shadow: inset 0 0 0 1px rgba(255, 153, 51, 0.14), 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  text-align: center;
}

/* moldura girando: mesma técnica de .destaque__borda (em Cursos) */
.painel__borda::before {
  background: conic-gradient(transparent 0 58%, #f26a0c 72%, #ffd08a 80%, #ff9933 86%, transparent 96%);
  animation-duration: 7s;
}

/* ampulheta */
.ampulheta {
  position: relative;
  justify-self: center;
  width: clamp(84px, 22vw, 150px);
}
.ampulheta__brilho {
  position: absolute;
  inset: -25% -60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 128, 34, 0.55), transparent 75%);
  filter: blur(14px);
  animation: respirar 4s ease-in-out infinite;
}
.ampulheta__svg { position: relative; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(255, 120, 20, 0.45)); }

.ampulheta__corpo {
  transform-box: view-box;
  transform-origin: 60px 100px;
  animation: ampulheta-vira 8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.areia {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.areia--cima { animation: areia-esvazia 8s linear infinite; }
.areia--baixo { animation: areia-enche 8s linear infinite; }
.areia__fio {
  stroke-dasharray: 3 5;
  animation: areia-cai 0.35s linear infinite, areia-fio 8s linear infinite;
}

@keyframes ampulheta-vira {
  0%, 84% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
@keyframes areia-esvazia {
  0% { transform: scaleY(1); }
  82%, 100% { transform: scaleY(0); }
}
@keyframes areia-enche {
  0% { transform: scaleY(0.02); }
  82%, 100% { transform: scaleY(1); }
}
@keyframes areia-cai { to { stroke-dashoffset: -8; } }
@keyframes areia-fio {
  0%, 80% { opacity: 1; }
  83%, 100% { opacity: 0; }
}

.contagem__titulo { display: grid; gap: 6px; margin-bottom: 22px; }
.contagem__pre {
  color: var(--texto-2);
  font-size: clamp(17px, 1.8vw, 23px);
  font-weight: 400;
}
.contagem__principal {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(30px, 3.7vw, 52px);
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
  animation-delay: 0.8s;
}

.relogio {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 12px);
}

.relogio__unidade {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  flex: 1;
  max-width: 118px;
  padding: 16px 6px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--linha-laranja);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 20px 40px -22px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.relogio__unidade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 10px);
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px rgba(255, 255, 255, 0.05);
}

.relogio__num {
  display: block;
  min-width: 2ch;
  font-family: var(--fonte-titulo);
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--gradiente-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 120, 20, 0.35));
}
/* o JavaScript alterna data-vira entre "a" e "b" a cada troca de dígito:
   mudar o nome da animação a reinicia sem forçar um cálculo de layout */
.relogio__num[data-vira="a"] { animation: digito-rola-a 0.55s var(--curva-saida); }
.relogio__num[data-vira="b"] { animation: digito-rola-b 0.55s var(--curva-saida); }

@keyframes digito-rola-a {
  0% { transform: translateY(-55%) scale(0.9); opacity: 0; filter: blur(4px); }
  100% { transform: none; opacity: 1; filter: drop-shadow(0 0 16px rgba(255, 120, 20, 0.35)); }
}
@keyframes digito-rola-b {
  0% { transform: translateY(-55%) scale(0.9); opacity: 0; filter: blur(4px); }
  100% { transform: none; opacity: 1; filter: drop-shadow(0 0 16px rgba(255, 120, 20, 0.35)); }
}

.relogio__rotulo {
  color: #bfb2a6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.relogio__sep {
  display: none;
  align-self: center;
  margin-top: -22px;
  font-family: var(--fonte-titulo);
  font-size: 38px;
  color: rgba(255, 153, 51, 0.55);
  animation: piscar 1s steps(2, jump-none) infinite;
}

@keyframes piscar { 50% { opacity: 0.15; } }

.painel__lateral { display: grid; justify-items: center; gap: 20px; }
.painel__lateral p {
  max-width: 36ch;
  color: var(--texto-2);
  font-size: 15.5px;
  line-height: 1.6;
}

@media (max-width: 479px) {
  .painel__lateral .botao { width: 100%; }
}

@media (max-width: 559px) {
  .relogio__rotulo { font-size: 9.5px; letter-spacing: 0.06em; }
}

@media (min-width: 560px) {
  .relogio__sep { display: block; }
}

@media (min-width: 760px) {
  .painel {
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 36px;
    text-align: left;
    align-items: center;
  }
  .ampulheta { grid-row: span 2; }
  .relogio { justify-content: flex-start; }
  .painel__lateral { justify-items: start; }
  .painel__lateral p { max-width: 52ch; }
}

@media (min-width: 1100px) {
  .painel { grid-template-columns: 160px minmax(0, 1fr) 312px; column-gap: 40px; }
  .ampulheta { grid-row: auto; }
  .painel__lateral {
    align-self: stretch;
    align-content: center;
    padding-left: 34px;
    border-left: 1px solid rgba(255, 153, 51, 0.18);
  }
}

/* ---------- 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__marcas { display: flex; align-items: center; gap: 14px; opacity: 0.85; }
.rodape__marcas img:first-child { height: 24px; width: auto; }
.rodape__marcas img:last-child { height: 28px; width: auto; }
.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__logo { display: none; height: 34px; width: auto; }
.dock__relogio { display: grid; line-height: 1.1; 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__tempo {
  font-family: var(--fonte-titulo);
  font-size: 21px;
  color: var(--laranja);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dock .botao { margin-left: auto; }

@media (min-width: 400px) {
  .dock__logo { display: block; }
}

@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); }
  .dock__logo { height: 36px; }
  .dock__relogio { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
}

/* =========================================================
   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__etapa { animation: surgir 0.6s var(--curva-saida) both; }
.lead__etapa[hidden] { display: none; }

.lead__logo { width: 148px; height: auto; margin-bottom: 16px; }

.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;
  transform-origin: left center;
  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; color: var(--laranja); }

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

.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; } }

.sucesso__data {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 22px 0 18px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--linha-laranja);
  background: rgba(255, 153, 51, 0.06);
  text-align: left;
}
.sucesso__data .icone { width: 28px; height: 28px; color: var(--laranja); }
.sucesso__data strong { display: block; font-size: 17px; }
.sucesso__data span { color: var(--apagado); font-size: 12.5px; }

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

/* celular: folha mais enxuta, botão sem cortar o texto, fechar fora da faixa */
@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: 124px; 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; }
  .formulario__nota .icone { flex: none; }
}

/* 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; }
}

/* ---------- 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) * 70ms);
}

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

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

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

/* animações contínuas param enquanto o bloco está fora da tela (a classe
   is-fora é posta em main.js). A paralaxe do herói fica de fora: ela segue a
   rolagem e precisa estar no lugar certo quando o herói volta. */
.is-fora :not(.heroi__vitrine, .heroi__especialista img),
.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) {
  /* a luz segue o mouse: sem mouse, era uma camada de 640 × 640 parada */
  .luz-cursor { display: none; }

  /* desfoque do que está por trás é refeito a cada quadro de rolagem;
     no lugar dele, um fundo um pouco mais fechado */
  .dock {
    background: rgba(14, 10, 7, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .data-evento {
    background: rgba(12, 8, 5, 0.8);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .lead__veu {
    background: rgba(3, 2, 1, 0.78);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* os degradês radiais já são suaves; o blur por cima pesava sem mudar o desenho */
  .heroi__aura,
  .ampulheta__brilho,
  .sucesso__marca::before { filter: none; }

  /* grão: camada com a tela mais uma margem, em vez de 2× a tela em cada lado */
  .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 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); }
}

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

/* Paralaxe de rolagem do herói nas telas de toque: amarrada à rolagem pelo
   próprio navegador (animation-timeline), fora da thread principal. Mesmo
   percurso do JavaScript do computador: nos primeiros 120vh de rolagem, a
   vitrine desce 0,05 e o especialista 0,12 do que se rolou. Navegadores sem
   suporte ficam sem a paralaxe, como antes em movimento reduzido. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @media not all and (hover: hover) and (pointer: fine) {
      .heroi__vitrine {
        animation: paralaxe-vitrine linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 120vh;
      }
      .heroi__especialista img {
        animation: paralaxe-especialista linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 120vh;
      }
    }
  }
}

@keyframes paralaxe-vitrine {
  from { translate: 0 0; }
  to { translate: 0 6vh; }
}
@keyframes paralaxe-especialista {
  from { translate: -50% 0; }
  to { translate: -50% 14.4vh; }
}

/* ---------- 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;
  }
  [data-revelar] { opacity: 1; }
  .brasas, .luz-cursor, .grao { display: none; }
}