/* =====================================================================
   VERSÃO 1 · CLARO E QUENTE
   A identidade Terap.IA canônica: creme, coral, Cormorant Garamond e a
   constelação decorativa. É a mesma linguagem do formulário do webinário,
   então o formulário entra na página sem parecer enxerto.
   ===================================================================== */
:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  --bg: #fdfcfa;
  --card: #ffffff;
  --field-bg: #fffefc;
  --opt-bg: #ffffff;
  --track: #efe8df;

  --ink: #3b342e;
  --ink-soft: #7c7268;
  --ink-faint: #b5a998;

  --accent: #a02b2d;
  --accent-deep: #872325;
  --accent-soft: #faefe9;
  --accent-line: #efd8cb;
  --on-accent: #ffffff;

  --line: #ebe4da;
  --dot-line: #d9cfc2;

  --red: #c25b57;
  --red-soft: rgba(194, 91, 87, .12);
  --red-line: #e9c4c2;

  --ok-bg: #eff4ee;
  --ok-line: #d8e4d6;
  --ok-ink: #5f7a62;

  --keyword-bg: #eff4ee;
  --keyword-line: #d8e4d6;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(59,52,46,.05), 0 10px 34px rgba(59,52,46,.07);
  --shadow-up: 0 2px 4px rgba(59,52,46,.06), 0 16px 44px rgba(59,52,46,.11);
  --shadow-accent: 0 6px 20px rgba(160,43,45,.24);

  --wrap: 640px;
  --stage-w: 420px;
}

/* constelação: os pontos de sol do logo viram rede neural */
.decor { position: fixed; pointer-events: none; z-index: 0; opacity: .5; }
.decor-tr { top: -30px; right: -70px; width: min(340px, 58vw); }
.decor-bl { bottom: -50px; left: -80px; width: min(300px, 52vw); }
@media (max-width: 480px) {
  .decor-tr { top: -40px; right: -90px; }
  .decor-bl { bottom: -60px; left: -95px; }
}

.brandbar { padding-top: 30px; }
.brandbar img { width: min(190px, 66vw); }

/* o vídeo ganha um respiro quente em volta */
.stage { position: relative; }
.stage::before {
  content: ""; position: absolute; inset: -22px -14px;
  background: radial-gradient(60% 50% at 50% 40%, rgba(245,135,79,.12), transparent 72%);
  pointer-events: none; z-index: -1;
}

.ap-success .check svg { stroke: var(--ok-ink); }

/* a dobra da aplicação nasce num painel quente que a separa do vídeo */
.apply {
  margin-top: 8px;
  background: linear-gradient(180deg, #fff8f3 0%, rgba(255,248,243,0) 62%);
  border-top: 1px solid var(--accent-line);
  border-radius: 24px 24px 0 0;
  padding: 40px 18px 0;
  margin-left: -18px; margin-right: -18px;
}
.divider { justify-content: center; color: var(--accent); }

.closer p { color: var(--ink); }