/* Dinamica — design system v1.0 (Brandbook Dinamica Deck). Cores, fontes, raios e
   espaçamento derivados 1:1 do guia; ver /static/assets/README.md pros arquivos de logo. */

/* Escuro e o padrao da plataforma (nao seguimos mais prefers-color-scheme do SO).
   "Claro" e uma escolha explicita do professor, guardada em localStorage e aplicada
   via [data-theme="light"], que sobrepoe estes valores. */
:root {
  /* ===== Paleta de marca — não usar cor fora desta lista ===== */
  --c-esmeralda: #46e08a;
  --c-verde-vivo: #46e055;
  --c-grama: #73e046;
  --c-limao: #b4e046;
  --c-turquesa: #46e0be;
  --c-menta: #90e098;
  --c-esmeralda-profundo: #0c6b45;
  --grad-esmeralda: linear-gradient(120deg, #b4e046, #46e055, #46e0be);

  /* Noite/Superficie ajustados a pedido do usuario apos ver renderizado: os hex 1:1 do
     guia (#08160f/#12241b) liam "verde escuro" demais na tela — puxamos pra mais neutro
     (mais preto, menos saturado), mantendo o mesmo papel/hierarquia. */
  --c-noite: #0a0d0c;
  --c-superficie: #121714;
  --c-grafite: #14201a;
  --c-salvia: #5c6b63;
  --c-papel: #f4f8f5;
  --c-branco: #ffffff;
  --c-borda: #dce6df;

  --c-sucesso: #2fa968;
  --c-erro: #e5484d;
  --c-alerta: #f5a623;
  --c-info: #2aa7c2;

  /* ===== Papeis funcionais (o que o resto do CSS consome) ===== */
  --bg: var(--c-noite);
  --surface: var(--c-superficie);
  --surface-rgb: 18, 23, 20;
  --surface-2: #191f1b;
  --border: rgba(244, 248, 245, 0.1);
  --ink: var(--c-papel);
  --muted: var(--c-menta);

  --accent: var(--c-esmeralda);
  --accent-strong: var(--c-verde-vivo);
  --accent-soft: rgba(70, 224, 138, 0.08);

  /* preenchimento sólido (botão .btn-solid do guia) — sempre Esmeralda Profundo +
     texto Papel/branco, constante nos dois temas (é o único verde que funciona com
     texto claro em cima em qualquer fundo). Nao sobrescrever no bloco [data-theme="light"]. */
  --accent-solid: var(--c-esmeralda-profundo);
  --accent-solid-hover: color-mix(in srgb, var(--c-esmeralda-profundo) 85%, black);

  --warm: var(--c-limao);
  --warm-soft: rgba(180, 224, 70, 0.14);
  --on-warm: var(--c-noite);

  --chalk-bg: var(--c-noite);
  --chalk-bg-2: var(--c-superficie);
  --chalk-ink: var(--c-papel);
  --chalk-muted: var(--c-menta);

  --danger: var(--c-erro);
  --danger-soft: rgba(229, 72, 77, 0.14);

  /* ===== Espaçamento — base 8pt ===== */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px;

  /* ===== Raios ===== */
  --radius-sm: 12px;
  --radius-btn: 14px;
  --radius-tile: 18px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius: var(--radius-card);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.55);

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390e098' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  --bg: var(--c-papel);
  --surface: var(--c-branco);
  --surface-rgb: 255, 255, 255;
  --surface-2: #fbfdfb;
  --border: var(--c-borda);
  --ink: var(--c-grafite);
  --muted: var(--c-salvia);

  --accent: var(--c-esmeralda-profundo);
  --accent-strong: color-mix(in srgb, var(--c-esmeralda-profundo) 82%, black);
  --accent-soft: rgba(12, 107, 69, 0.08);

  --warm: var(--c-esmeralda-profundo);
  --warm-soft: rgba(12, 107, 69, 0.08);
  --on-warm: var(--c-papel);

  --chalk-bg: var(--c-noite);
  --chalk-bg-2: var(--c-superficie);
  --chalk-ink: var(--c-papel);
  --chalk-muted: var(--c-menta);

  --danger: var(--c-erro);
  --danger-soft: rgba(229, 72, 77, 0.08);

  --shadow: 0 1px 2px rgba(20, 32, 26, 0.05), 0 10px 28px -14px rgba(20, 32, 26, 0.22);

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a {
  color: inherit;
}

/* logo: troca automatica entre a versao reversa (fundo escuro) e grafite (fundo claro)
   conforme o tema — so importa em superficies que seguem o tema (sidebar/painel de marca
   sao sempre escuros e usam so a wordmark-reverse.png direto, sem essa troca) */
:root[data-theme="light"] .wordmark-dark {
  display: none !important;
}
:root[data-theme="light"] .wordmark-light {
  display: block !important;
}

::selection {
  background: var(--accent-soft);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Layout: sidebar estilo "quadro-negro" + conteudo em area clara de "caderno" */

/* Wave decorativa de fundo — video WebM com canal alpha (gerado localmente com
   ffmpeg/PIL/numpy, 960x540, ~32KB), cobrindo a viewport inteira (fixed), atras de
   tudo. A respiracao de opacidade ja vem "assada" nos pixels do video, entao o
   navegador so precisa decodificar/tocar o video (acelerado por hardware de video,
   nao pelo compositor de CSS) — nada de animation/filter aqui, foi exatamente isso
   que causava o travamento nas duas tentativas anteriores em CSS puro. Fica ANTES do
   .app-shell no HTML (nao dentro dele) de proposito, mesma razao de sempre: nao pode
   ser ancestral do popup do assistente (position:fixed). Facil de reverter: o script
   que gerou o video fica no historico da conversa, e e so trocar a tag <video> por
   uma <div> com gradiente de novo. Sem WebM (ex.: Safari), o video so nao carrega e
   fica transparente — nao quebra nada. */
.bg-wave {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bg-wave {
    display: none;
  }
}

/* graozinho sutil por cima do glow, pra tirar a cara de "gradiente CSS chapado"
   (referencia que o usuario mandou tinha esse grao). Facil de remover: e so tirar a
   div .bg-grain do template e este bloco. */
.bg-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* sem mix-blend-mode de proposito: como o .bg-wave logo abaixo anima opacidade,
     um blend-mode aqui obrigaria o navegador a recompor esse blend a cada frame da
     animacao dele (nao da pra cachear como camada independente). Opacidade lisa e
     compositavel sozinha, sem esse custo. */
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 860px) {
  .bg-grain,
  .bg-wave {
    display: none;
  }
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  background: var(--chalk-bg);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.035), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.025), transparent 50%);
  color: var(--chalk-ink);
  width: 264px;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  z-index: 40;
  transition: transform 0.2s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 22px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--chalk-ink);
}

.sidebar-brand svg {
  color: var(--c-esmeralda);
  flex-shrink: 0;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--chalk-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.nav-link:hover {
  background: var(--chalk-bg-2);
  color: var(--chalk-ink);
}

.nav-link.active {
  background: rgba(70, 224, 138, 0.12);
  color: var(--c-esmeralda);
  font-weight: 600;
}

.sidebar-spacer {
  flex: 1;
}

.profile-wrap {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 8px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 10px;
  border-radius: 10px;
  text-align: left;
  color: inherit;
  font: inherit;
}

.sidebar-user:hover {
  background: var(--chalk-bg-2);
}

.sidebar-user .chevron {
  color: var(--chalk-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.sidebar-user[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent-solid);
  color: var(--c-papel);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Anel de cota de aulas ao redor do avatar (sidebar) — só existe pra quem é
   assinante de um plano com teto (ver cota_aulas_ring em app/auth/deps.py; plano
   sem teto, tipo o Pro futuro, não mostra anel nenhum). Um único conic-gradient
   faz as duas partes: do início (0deg, que no conic-gradient é o TOPO do círculo
   — não confundir com o 0deg trigonométrico, que seria a direita) até --uso-pct
   vai de --c-esmeralda (claro) pra --c-esmeralda-profundo (escuro), sempre no
   sentido horário (padrão do conic-gradient, topo -> direita -> baixo -> esquerda)
   — quanto mais completo, mais escuro o verde no ponto atual; do --uso-pct até o
   fim, vira a "trilha" (cor neutra, tom fixo porque este canto da sidebar é
   sempre escuro, ver "Design system" no CLAUDE.md). A mask com radial-gradient
   recorta o miolo do círculo, sobrando só o anel. */
.avatar-ring-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.avatar-ring-wrap .avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(
    var(--c-esmeralda) 0deg,
    var(--c-esmeralda-profundo) calc(var(--uso-pct, 0) * 3.6deg),
    rgba(255, 255, 255, 0.14) calc(var(--uso-pct, 0) * 3.6deg),
    rgba(255, 255, 255, 0.14) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

/* Ancorado pela borda ESQUERDA (não centralizado): o avatar fica perto da borda
   esquerda da sidebar, então centralizar o tooltip nele estourava a janela e
   cortava o texto. Crescendo pra direita cabe tranquilo nos 264px da sidebar. */
.avatar-ring__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  transform: translateY(4px);
  background: var(--c-noite);
  color: var(--c-papel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow);
  border-radius: 10px;
  padding: 6px 11px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.avatar-ring-wrap:hover .avatar-ring__tip,
.avatar-ring-wrap:focus-within .avatar-ring__tip {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .avatar-ring__tip {
    transition: none;
  }
}

.sidebar-user-info {
  min-width: 0;
  flex: 1;
}

.sidebar-user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--chalk-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  font-size: 0.72rem;
  color: var(--chalk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Popover de perfil (tema / assinatura / sair) */

.profile-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  background: var(--chalk-bg-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
  padding: 10px;
  z-index: 50;
  animation: popup-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-menu[hidden] {
  display: none;
}

.profile-menu-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chalk-muted);
  padding: 4px 8px 6px;
}

.theme-switch {
  display: flex;
  gap: 3px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 9px;
  padding: 3px;
  margin: 0 2px 8px;
}

.theme-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px;
  border-radius: 7px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--chalk-muted);
}

.theme-opt:hover {
  color: var(--chalk-ink);
}

.theme-opt.active {
  background: var(--chalk-bg);
  color: var(--c-esmeralda);
}

.profile-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 4px;
}

/* Mesma cota do anel do avatar, repetida por extenso dentro do popover — pedido
   do usuário pra não depender só do hover (que só existe no avatar da sidebar). */
.profile-menu-quota {
  padding: 0 8px 8px;
}

.profile-menu-quota__bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-bottom: 6px;
}

.profile-menu-quota__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-esmeralda), var(--c-esmeralda-profundo));
}

.profile-menu-quota__nums {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--chalk-ink);
}

.profile-menu-quota__nums span:last-child {
  color: var(--chalk-muted);
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--chalk-ink);
}

.profile-menu-item:hover {
  background: var(--chalk-bg);
}

.profile-menu-item svg {
  color: var(--chalk-muted);
  flex-shrink: 0;
}

.profile-menu-item.danger {
  color: var(--c-erro);
}

.profile-menu-item.danger:hover {
  background: rgba(229, 72, 77, 0.12);
}

.profile-menu-item.danger svg {
  color: var(--c-erro);
}

.content-area {
  margin-left: 264px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar-mobile {
  display: none;
}

#sidebar-toggle {
  display: none;
}

@media (max-width: 860px) {
  .sidebar {
    transform: translateX(-100%);
  }
  #sidebar-toggle:checked ~ .app-shell .sidebar {
    transform: translateX(0);
  }
  .content-area {
    margin-left: 0;
  }
  .topbar-mobile {
    display: flex;
  }
  .sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 11, 0.45);
    z-index: 30;
  }
  #sidebar-toggle:checked ~ .sidebar-scrim {
    display: block;
  }
}

/* Componentes reutilizaveis */

.card {
  background: rgba(var(--surface-rgb), 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.field-label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.field-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.92rem;
  color: var(--ink);
  font-family: var(--font-body);
}

.field-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(70, 224, 138, 0.12);
}

/* seta customizada (sem o combo nativo do SO) + accent-color pra tirar o azul padrao
   do destaque de selecao em navegadores Chromium */
select.field-input {
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--accent);
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

select.field-input option {
  background: var(--surface);
  color: var(--ink);
}

/* Select customizado — o combo nativo do SO/navegador nao da pra restilizar o hover/
   selecao da lista (fica azul do sistema em vez da cor da marca). Reproduz o visual do
   .field-input com uma lista propria em vez de <select>. */
.custom-select {
  position: relative;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.custom-select-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.custom-select-trigger[aria-expanded="true"] .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  animation: popup-in 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-select-list[hidden] {
  display: none;
}

.custom-select-option {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.custom-select-option.selected {
  font-weight: 600;
  color: var(--accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--radius-btn);
  padding: 10px 18px;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.btn-primary {
  background: var(--accent-solid);
  color: var(--c-papel);
}

.btn-primary:hover {
  background: var(--accent-solid-hover);
}

.btn-warm {
  background: var(--warm);
  color: var(--on-warm);
}

.btn-warm:hover {
  filter: brightness(0.94);
}

/* CTA de maior destaque — reservar pra 1 por tela (guia de marca) */
.btn-gradient {
  position: relative;
  overflow: hidden;
  background: var(--grad-esmeralda);
  color: var(--c-noite);
  font-weight: 700;
}

/* brilho de "pedra preciosa": um reflexo fino e inclinado que varre da esquerda pra
   direita 1x no hover — mais sutil que passear as cores do gradiente inteiro */
.btn-gradient::after,
.nav-solid::after,
.chat-send-btn::after,
.sw-topcta::after,
.sw-btn--primary::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -35%;
  width: 22%;
  height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
  transform: skewX(-20deg);
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0;
}

.btn-gradient:hover::after,
.nav-solid:hover::after,
.chat-send-btn:hover::after,
.sw-topcta:hover::after,
.sw-btn--primary:hover::after {
  animation: gem-shine-sweep 1s ease-out 1;
}

@keyframes gem-shine-sweep {
  0% { left: -35%; opacity: 1; }
  85% { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-gradient:hover::after,
  .nav-solid:hover::after,
  .chat-send-btn:hover::after,
  .sw-topcta:hover::after,
  .sw-btn--primary:hover::after {
    animation: none;
  }
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.btn-ghost:hover {
  background: var(--accent-soft);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.badge-accent {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.badge-warm {
  background: var(--warm-soft);
  color: var(--warm);
}

.badge-muted {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}

.badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm);
}

.icon-tile {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-tile);
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* variante estatica (sem animacao) para ilustracoes de guia */
.icon-tile-outline-warm {
  background: var(--warm-soft);
  border: 1.5px solid var(--warm);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--muted);
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.icon-btn-danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.main-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.main-content.main-wide {
  max-width: 1180px;
}

/* Chat lateral de pesquisa (formulario de nova aula) */

.chat-panel {
  background: rgba(var(--surface-rgb), 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 640px;
  max-height: calc(100vh - 6rem);
  position: sticky;
  top: 1.5rem;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-bubble {
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 12px;
  max-width: 92%;
  white-space: pre-wrap;
}

.chat-bubble-user {
  background: var(--accent-solid);
  color: var(--c-papel);
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}

.chat-bubble-model {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}

.chat-use-btn {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: -4px;
}

.chat-use-btn:hover {
  color: var(--accent-strong);
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  min-height: 46px;
  max-height: 90px;
}

.chat-send-btn {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--grad-esmeralda);
  color: var(--c-noite);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.chat-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(70, 224, 138, 0.55);
  filter: brightness(1.04);
}

.chat-send-btn:disabled {
  opacity: 0.5;
}

.chat-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.chat-typing-dots {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.chat-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  opacity: 0.5;
  animation: chat-typing-bounce 1s infinite ease-in-out;
}

.chat-typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.chat-typing-text {
  font-size: 0.82rem;
  color: var(--muted);
}

@keyframes chat-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-3px); opacity: 1; }
}

/* Tela de carregamento durante a geracao da aula */

.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--chalk-bg);
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.04), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03), transparent 50%);
  color: var(--chalk-ink);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}

.loading-overlay.visible {
  display: flex;
}

.loading-gem {
  width: 64px;
  height: 64px;
  animation: loading-gem-pulse 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(70, 224, 138, 0.5));
}

.loading-gem stop.stop-1 { stop-color: var(--c-limao); }
.loading-gem stop.stop-2 { stop-color: var(--c-verde-vivo); }
.loading-gem stop.stop-3 { stop-color: var(--c-turquesa); }

@keyframes loading-gem-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 20px rgba(70, 224, 138, 0.5)); }
  50% { transform: scale(1.1) rotate(6deg); filter: drop-shadow(0 0 30px rgba(70, 224, 138, 0.8)); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-gem {
    animation: none;
  }
}

.loading-title {
  font-size: 1.4rem;
  font-weight: 700;
}

.loading-message {
  font-size: 0.9rem;
  color: var(--chalk-muted);
  max-width: 34ch;
  min-height: 1.3em;
}

/* Popup de video antes da pagina "Aprenda a usar" */

.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.video-modal-overlay.is-closed {
  display: none;
}

body.video-modal-open .sidebar,
body.video-modal-open .topbar-mobile {
  display: none;
}

.video-modal-box {
  width: 100%;
  max-width: min(94vw, 1360px);
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.video-modal-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--chalk-bg);
}

.video-modal-media video {
  width: 100%;
  height: 100%;
  display: block;
}

.video-modal-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--chalk-muted);
}

.video-modal-skip {
  align-self: center;
  /* overlay e sempre escuro (quase preto) independente do tema — cor fixa aqui
     em vez de herdar o --warm do .btn-warm, que troca de tom com o tema */
  background: var(--accent-solid);
  color: var(--c-papel);
}

/* ============================================================
   Item destacado do menu (Aprenda a usar) — efeito solid
   ============================================================ */

.nav-solid {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-tile);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-noite);
  background: var(--grad-esmeralda);
  box-shadow: 0 6px 16px -6px rgba(70, 224, 138, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.nav-solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 20px -6px rgba(70, 224, 138, 0.65);
  filter: brightness(1.04);
}

.nav-solid svg {
  flex-shrink: 0;
}

.nav-solid-active {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* ============================================================
   Animações — fade-in ao carregar e micro-interações
   ============================================================ */

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.content-area main,
main.max-w-5xl {
  /* opacity apenas (sem transform) para nao criar containing block e quebrar
     elementos com position: fixed (ex.: popup do assistente) dentro do main */
  animation: fade-in 0.5s ease both;
}

.reveal {
  opacity: 0;
  animation: fade-in-up 0.55s ease forwards;
}

.reveal-1 { animation-delay: 0.04s; }
.reveal-2 { animation-delay: 0.1s; }
.reveal-3 { animation-delay: 0.16s; }
.reveal-4 { animation-delay: 0.22s; }
.reveal-5 { animation-delay: 0.28s; }
.reveal-6 { animation-delay: 0.34s; }

/* Cards da grade recebem stagger suave */
.stagger > * {
  opacity: 0;
  animation: fade-in-up 0.55s ease forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.19s; }
.stagger > *:nth-child(4) { animation-delay: 0.26s; }
.stagger > *:nth-child(5) { animation-delay: 0.33s; }
.stagger > *:nth-child(6) { animation-delay: 0.40s; }
.stagger > *:nth-child(7) { animation-delay: 0.47s; }
.stagger > *:nth-child(8) { animation-delay: 0.54s; }

/* Hover de elevação para cartões clicáveis */
.lift-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lift-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(20, 32, 26, 0.06), 0 16px 32px -16px rgba(20, 32, 26, 0.3);
  border-color: var(--accent);
}

.btn,
.icon-btn,
.nav-link {
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .content-area main,
  main.max-w-5xl,
  .reveal,
  .stagger > *,
  .loading-gem,
  .nav-solid,
  .lift-hover,
  .btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Busca + abas + estrela de favorito (lista de aulas)
   ============================================================ */

.search-box {
  position: relative;
  flex: 1;
}
.search-box > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search-box input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 34px 9px 38px;
  font-size: 0.92rem;
  color: var(--ink);
  font-family: var(--font-body);
}
.search-box input:focus {
  border-color: var(--accent);
}

.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.search-clear:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.search-clear[hidden] {
  display: none;
}

.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tab:hover {
  color: var(--ink);
}
.tab.tab-active {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: var(--shadow);
}
.tab .tab-count {
  font-size: 0.72rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 1px 7px;
}

.star-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--muted);
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.star-btn:hover {
  background: var(--warm-soft);
  color: var(--warm);
}
.star-btn.is-fav {
  color: var(--warm);
}
.star-btn.just-toggled {
  animation: star-pop 0.32s ease;
}
@keyframes star-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ============================================================
   Assistente de redação — botão flutuante + popup
   ============================================================ */

.assist-fab-wrap {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
}

.assist-balloon {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  animation: balloon-float 3.5s ease-in-out infinite;
}
.assist-balloon::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
@keyframes balloon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.assist-fab {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--grad-esmeralda);
  color: var(--c-noite);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px -8px rgba(70, 224, 138, 0.5);
  flex-shrink: 0;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.assist-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 34px -8px rgba(70, 224, 138, 0.65);
}
.assist-fab::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--c-esmeralda);
  opacity: 0.35;
  animation: assist-pulse 2.4s ease-out infinite;
}
@keyframes assist-pulse {
  0% { transform: scale(1); opacity: 0.4; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}
.assist-fab .shine {
  animation: shine-twinkle 2.2s ease-in-out infinite;
}
@keyframes shine-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.55; transform: scale(0.82) rotate(12deg); }
}

.assist-popup {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 61;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 130px);
  background: rgba(var(--surface-rgb), 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: 0 24px 60px -16px rgba(20, 32, 26, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: popup-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popup-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.assist-popup[hidden] {
  display: none;
}

.assist-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.assist-header .assist-title {
  flex: 1;
}
.assist-close {
  color: var(--muted);
  padding: 6px;
  border-radius: 8px;
}
.assist-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* botão indicativo de inserir texto no formulário */
.insert-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 9px 14px;
  border-radius: var(--radius-btn);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--on-warm);
  background: var(--warm);
  box-shadow: 0 6px 14px -6px rgba(180, 224, 70, 0.5);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.insert-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.insert-btn.inserted {
  background: var(--accent-solid);
  color: var(--c-papel);
  box-shadow: none;
  cursor: default;
}
.insert-btn .insert-arrow {
  animation: insert-nudge 1.4s ease-in-out infinite;
}
@keyframes insert-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* destaque momentâneo no campo de textos quando recebe conteúdo */
@keyframes field-flash {
  0% { box-shadow: 0 0 0 0 rgba(180, 224, 70, 0.5); }
  100% { box-shadow: 0 0 0 6px rgba(180, 224, 70, 0); }
}
.field-flash {
  animation: field-flash 0.9s ease;
  border-color: var(--warm) !important;
}

@media (max-width: 560px) {
  .assist-balloon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assist-fab::before,
  .assist-fab .shine,
  .assist-balloon,
  .insert-btn .insert-arrow,
  .assist-popup {
    animation: none !important;
  }
}

/* ============================================================
   Página "Aprenda a usar" — guias
   ============================================================ */

.guide-hero {
  background: var(--chalk-bg);
  background-image:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.04), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.03), transparent 50%);
  color: var(--chalk-ink);
  border-radius: var(--radius-panel);
  padding: 28px 28px;
}

.step-card {
  position: relative;
  padding-left: 4px;
}
.step-num {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent-solid);
  color: var(--c-papel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.guide-illustration {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* ============================================================
   Login / Cadastro — split screen com hover
   ============================================================ */

.auth-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.auth-panel {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.auth-panel-brand {
  position: relative;
  /* fica acima do .bg-wave/.bg-grain (fixed, z-index:auto) — o vídeo decorativo só
     deve aparecer atrás do lado do formulário, não deste painel. */
  z-index: 1;
  background: var(--chalk-bg);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.045), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.03), transparent 50%);
  color: var(--chalk-ink);
}

/* Transparente de propósito: deixa o .bg-wave/.bg-grain do body (mesmo fundo
   decorativo do resto da plataforma) aparecer atrás do formulário. */
.auth-panel-form {
  background: transparent;
}

.auth-brand-inner {
  max-width: 420px;
  width: 100%;
}

.auth-form-inner {
  max-width: 380px;
  width: 100%;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: inherit;
  margin-bottom: 32px;
}

.auth-illustration {
  margin-bottom: 28px;
  opacity: 0.95;
}

/* Mockup dos 2 PDFs (mesma linguagem visual da secao "Prova" da landing) — troca
   o wireframe generico antigo por algo que remete de verdade ao produto entregue. */
.auth-doc-stage {
  position: relative;
  width: 168px;
  height: 148px;
  margin: 0;
}

.auth-doc {
  position: absolute;
  top: 0;
  left: 50%;
  width: 128px;
  height: 148px;
  background: var(--c-papel);
  border-radius: 12px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55);
  padding: 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.auth-doc__tag {
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  /* cor fixa (nao --accent): o cartao e sempre "papel" claro, independente do
     tema ativo do site — precisa do verde que tem contraste em fundo claro. */
  background: rgba(12, 107, 69, 0.1);
  color: var(--c-esmeralda-profundo);
}

.auth-doc__line {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: rgba(10, 15, 13, 0.1);
}

.auth-doc--back {
  z-index: 1;
  opacity: 0.92;
  transform: translate(-50%, 10px) rotate(-7deg);
  animation: auth-doc-float-back 6s ease-in-out infinite;
}

.auth-doc--front {
  z-index: 2;
  transform: translate(-50%, -6px) rotate(4deg);
  animation: auth-doc-float-front 6s ease-in-out infinite;
}

@keyframes auth-doc-float-back {
  0%, 100% { transform: translate(-50%, 10px) rotate(-7deg); }
  50% { transform: translate(-50%, 2px) rotate(-7deg); }
}

@keyframes auth-doc-float-front {
  0%, 100% { transform: translate(-50%, -6px) rotate(4deg); }
  50% { transform: translate(-50%, -14px) rotate(4deg); }
}

.auth-headline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
  text-wrap: balance;
}

.auth-subline {
  color: var(--chalk-muted);
  margin-bottom: 22px;
}

.auth-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.auth-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--chalk-ink);
}

.auth-checklist svg {
  color: var(--accent);
  background: var(--chalk-bg-2);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .auth-panel-brand {
    display: none;
  }
  .auth-panel {
    padding: 32px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-doc--back,
  .auth-doc--front {
    animation: none;
  }
}

/* ============================================================
   Landing — "como funciona" e banner final de CTA
   ============================================================ */

.how-it-works {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: start;
}

.how-step {
  text-align: center;
  padding: 4px 10px;
}

.how-step-icon-wrap {
  position: relative;
  width: 52px;
  margin: 0 auto 14px;
}

.how-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step-num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent-solid);
  color: var(--c-papel);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step h3 {
  margin-bottom: 4px;
}

.how-connector {
  color: var(--border);
  align-self: center;
  margin-top: 26px;
  transform: rotate(180deg);
}

.cta-band {
  background: var(--chalk-bg);
  background-image:
    radial-gradient(circle at 22% 25%, rgba(255, 255, 255, 0.05), transparent 55%),
    radial-gradient(circle at 82% 75%, rgba(255, 255, 255, 0.035), transparent 50%);
  color: var(--chalk-ink);
  border-radius: var(--radius-panel);
  padding: 48px 32px;
  text-align: center;
}

@media (max-width: 760px) {
  .how-it-works {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .how-connector {
    display: none;
  }
}

/* ==========================================================================
   Pagina 404
   ==========================================================================
   Layout de numero gigante + frase grande + um botao, centralizado com muito
   respiro em volta. O "404" e a propria etiqueta da pagina, entao nao ha
   eyebrow nem icone: o vazio em volta e o que da o impacto, e qualquer
   elemento a mais rouba dele. */
.erro-404 {
  /* 245px = cabecalho (73) + rodape (88) + padding vertical do <main> (80), com
     uns poucos px de folga. Todos esses valores sao fixos e nao mudam com a
     altura da tela, entao a conta vale em qualquer monitor. Sem isso o bloco
     ficaria mais curto que o espaco util e assentaria acima do centro optico.
     Em tela baixa o min-height simplesmente cede e a pagina rola. */
  min-height: calc(100vh - 245px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Simetrico: com justify-content:center, padding desigual desloca o bloco pro
     lado do menor valor e tira o alinhamento do centro optico. */
  padding: 40px 0;
}

.erro-404__numero {
  font-size: clamp(6.5rem, 21vw, 15rem);
  font-weight: 800;
  /* line-height abaixo de 1 tira o espaco morto que a fonte reserva acima e
     abaixo dos numeros — em corpo desse tamanho, o padrao abriria um buraco
     visivel entre o numero e a frase. */
  line-height: 0.82;
  letter-spacing: -0.045em;
  /* Cor solida, nao degrade em texto: o truque de background-clip renderiza
     visivelmente mais fino/apagado (ja documentado na secao da landing), e num
     numero deste tamanho isso apareceria muito. var(--accent) ja resolve pro
     verde certo em cada tema: claro no escuro, profundo no claro. */
  color: var(--accent);
  margin-bottom: 22px;
}

.erro-404__titulo {
  font-size: clamp(1.55rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* Largura em ch em vez de <br> fixo: a frase quebra sozinha em duas linhas no
     desktop e se reorganiza no celular, sem quebra forcada em lugar errado. */
  max-width: 22ch;
  margin: 0 auto 26px;
}

.erro-404__ajuda {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 22px;
}
.erro-404__ajuda a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Toast (aviso flutuante no canto superior direito)
   ==========================================================================
   Aviso que aparece sozinho e some sozinho, sem bloquear nada — diferente do
   modal, que exige uma decisao. Usado hoje pra avisar sobre o e-mail que pode
   cair no spam. Fica FORA do fluxo (position: fixed), entao pode ser incluido
   em qualquer pagina sem mexer no layout dela. */
.toast-area {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 300; /* acima do modal-overlay (200): um aviso nunca deve ficar atras */
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* A area nao intercepta clique; so os toasts dentro dela. Sem isso, uma faixa
     invisivel no canto da tela engoliria cliques em botoes do site. */
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  width: 340px;
  max-width: calc(100vw - 40px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 15px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  /* Mesmo "vidro fosco" dos cards do app. O blur aqui e estatico (nao anima),
     entao nao cai no gotcha de performance de filter animado. */
  background: rgba(var(--surface-rgb), 0.92);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32);
  animation: toast-entra 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast[hidden] {
  display: none;
}
.toast--saindo {
  animation: toast-sai 0.26s ease-in forwards;
}

@keyframes toast-entra {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-sai {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

.toast__icone {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.toast__conteudo {
  flex: 1;
  min-width: 0;
}
.toast__titulo {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.toast__texto {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}
.toast__fechar {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--muted);
  line-height: 0;
}
.toast__fechar:hover {
  color: var(--ink);
}

/* Em celular o toast ocupa a largura util e nasce colado no topo, senao 340px
   fixos passariam da borda em tela de 360px. */
@media (max-width: 480px) {
  .toast-area {
    top: 12px;
    right: 12px;
    left: 12px;
  }
  .toast {
    width: auto;
  }
}

/* Quem pediu menos movimento no sistema recebe o toast ja no lugar, sem deslize.
   O aviso continua aparecendo — o que sai e a animacao, nao a informacao. */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast--saindo {
    animation: none;
  }
}

/* ==========================================================================
   Zona de perigo (exclusao de conta) + modal de confirmacao
   ==========================================================================
   A zona de perigo fica separada do card do formulario, com bastante respiro e
   uma borda tenue na cor de erro: precisa ser encontravel (a LGPD garante o
   direito de apagar os dados) sem competir com o botao de salvar. */
.danger-zone {
  margin-top: 40px;
  padding: 20px;
  border: 1px solid var(--danger-soft);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}
.danger-zone__titulo {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--danger);
  margin-bottom: 6px;
}
.danger-zone__texto {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Vazado, nao solido: o botao que ABRE a confirmacao nao deve parecer o botao
   que executa. O solido (.btn-danger) fica so dentro do modal, no passo em que
   a acao realmente acontece. */
.btn-danger-ghost {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}
.btn-danger-ghost:hover {
  background: var(--danger-soft);
}
.btn-danger {
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
}
.btn-danger:hover {
  filter: brightness(1.08);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 8, 6, 0.72);
  /* blur ESTATICO (aparece junto com o modal e nao muda mais). Animar blur num
     elemento do tamanho da viewport trava de verdade — ver o gotcha de
     performance no CLAUDE.md. Por isso a animacao abaixo mexe so em opacity. */
  backdrop-filter: blur(8px);
  animation: modal-surge 0.16s ease-out;
}
.modal-overlay[hidden] {
  display: none;
}
@keyframes modal-surge {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-caixa {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.modal-icone-alerta {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--danger-soft);
  color: var(--danger);
  margin-bottom: 14px;
}
.modal-titulo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.modal-texto {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 10px;
}
.modal-texto strong {
  color: var(--ink);
}
.modal-lista {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.modal-lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 3px 0;
}
.modal-lista li svg {
  color: var(--danger);
  flex-shrink: 0;
}
.modal-botoes {
  display: flex;
  gap: 10px;
}

/* Em tela pequena os dois botoes empilham, com o CANCELAR embaixo — assim o
   polegar descansa longe do botao destrutivo. */
@media (max-width: 420px) {
  .modal-botoes {
    flex-direction: column-reverse;
  }
}

/* ==========================================================================
   Documentos legais (Termos de Uso, Politica de Privacidade)
   ==========================================================================
   Paginas de texto corrido longo. A largura e limitada a 68ch (nao a largura do
   container) porque linha longa demais e o que mais cansa em leitura de texto
   denso — ~65-75 caracteres e a faixa confortavel. */
.legal-doc {
  max-width: 68ch;
}
.legal-doc h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 32px 0 10px;
  color: var(--ink);
}
.legal-doc p,
.legal-doc li {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 12px;
}
.legal-doc strong {
  color: var(--ink);
  font-weight: 600;
}
.legal-doc ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 16px;
}
.legal-doc a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Bloco de destaque pros pontos que o usuario REALMENTE precisa ler (revisar o
   conteudo da IA, transferencia internacional de dados). Borda so na esquerda em
   vez de caixa fechada: destaca sem quebrar o fluxo da leitura. */
.legal-doc .legal-callout {
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
  margin: 16px 0 20px;
}

.legal-doc .legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 0.88rem;
}
.legal-doc .legal-table th,
.legal-doc .legal-table td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--muted);
}
.legal-doc .legal-table th {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
}

/* Em tela estreita a tabela rola sozinha em vez de espremer as colunas ate o
   texto virar uma coluna de uma letra — o resto da pagina nunca rola na
   horizontal, so a tabela. */
@media (max-width: 640px) {
  .legal-doc .legal-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .legal-doc .legal-table td {
    white-space: normal;
    min-width: 150px;
  }
}

/* ==========================================================================
   scroll-world engine (plugin scroll-world@scroll-world) — adaptacao pro tema
   escuro da Dinamica. O engine (static/js/scroll-world.js) injeta seu proprio
   CSS num @layer sw; qualquer regra fora de @layer aqui tem prioridade
   automatica, entao so precisamos sobrescrever os tokens e os poucos
   seletores que assumem fundo claro (texto branco em cima de --sw-ink/
   --sw-accent, que na Dinamica sao tons claros, nao escuros — ver regra de
   contraste "Esmeralda clara vs Esmeralda Profundo" no CLAUDE.md). Pagina
   inteira e o motor de scroll (sem hibrido com secoes estaticas). */
/* Tokens semanticos (nao as constantes fixas da paleta) — assim o motor
   acompanha sozinho o tema ativo (data-theme) da pagina em vez de ficar
   preso ao escuro: --ink/--muted/--accent ja trocam de tom sozinhos entre
   claro/escuro em :root[data-theme="light"] (ver topo do arquivo). */
.sw-root {
  --sw-bg: var(--bg);
  --sw-ink: var(--ink);
  --sw-ink-soft: var(--muted);
  --sw-accent: var(--accent);
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-display);
}
/* A landing tem seu proprio header fixo (.lp-header, fora do engine) que
   funciona a pagina inteira (antes, dentro e depois das cenas de video) —
   entao a topbar que o proprio engine desenha (marca generica + nav + CTA)
   fica sem uso aqui. */
.sw-topbar {
  display: none;
}
/* As particulas flutuantes ("bolinhas") do engine nao tem flag de config pra
   desligar sozinhas (so o gradiente/glow do sky tem, via atmosphere:false) —
   escondendo por CSS. Sem elas, a esmeralda aparece direto ao entrar na cena,
   sem esse efeito extra antes. */
.sw-particles {
  display: none;
}
/* O hint de scroll do proprio engine (.sw-hint) fica ligado, mas so aparece
   DENTRO do motor de scroll-world — ele e um dos elementos do #world que a
   nossa logica de handoff (script em landing.html) esmaece pra dentro/fora
   junto com o resto do chrome, entao nao aparece nem no hero estatico (onde
   temos o .lp-hero__hint proprio) nem no conteudo estatico depois. Texto
   customizado via config.hint no mountScrollWorld (senao usa o default em
   ingles "scroll").*/
/* Route rail (bolinhas de navegacao lateral, direita) — tirado a pedido:
   quebrava o efeito limpo de entrada na cena. A barra de progresso do topo
   (.sw-scrollbar) fica, so reposicionada (ver abaixo) pra nao ficar escondida
   atras do header fixo da landing. */
.sw-route {
  display: none;
}
.sw-scrollbar {
  top: 67px; /* logo abaixo do .lp-header fixo (~66px de altura) */
}

/* CTAs que levam pro app (topbar + CTA das cenas) usam o mesmo degrade +
   brilho de pedra preciosa do botao "Aprenda a usar" (.nav-solid), em vez do
   preenchimento solido generico do engine. */
.sw-topcta,
.sw-btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--grad-esmeralda);
  color: var(--c-noite);
  font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(70, 224, 138, 0.5);
}
.sw-topcta:hover,
.sw-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 20px -6px rgba(70, 224, 138, 0.65);
}
.sw-route__label {
  background: rgba(var(--surface-rgb), 0.85);
  backdrop-filter: blur(6px);
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
}

/* Painel de "vidro fosco" atras do texto de cada cena — mesma linguagem de
   .card/.chat-panel do resto do site — em vez do scrim generico do engine
   (um gradiente so do lado esquerdo, que nao funciona quando a copy alterna
   de lado). Cada .sw-copy ja carrega seu proprio fundo, entao o scrim global
   fica desligado. max-height + overflow e uma rede de seguranca: mesmo que o
   texto de alguma cena seja mais longo que o previsto, ele rola dentro do
   proprio painel em vez de vazar pra fora da tela (foi exatamente isso que
   quebrou a versao anterior — titulo grande demais nao cabia na viewport). */
.sw-copylayer::before {
  display: none;
}
.sw-copy {
  background: rgba(var(--surface-rgb), 0.72);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--radius-panel);
  padding: clamp(18px, 1.6vw + 1vh, 30px) clamp(22px, 2vw + 1vh, 36px);
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
  max-height: min(64vh, 560px);
  overflow-y: auto;
  scrollbar-width: none;
}
.sw-copy::-webkit-scrollbar {
  display: none;
}

/* Tipografia chamativa nas cenas de video, mas responsiva tambem a altura da
   tela (vh no calc), nao so largura — evita estourar em telas baixas/largas
   (notebook 16:9 curto, por exemplo). O titulo ganha um leve degrade papel ->
   cor de destaque da cena ativa. */
.sw-copy__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  font-weight: 800;
}
.sw-copy__title {
  font-size: clamp(1.9rem, 1.6vw + 2vh, 3.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--sw-ink) 35%, color-mix(in srgb, var(--sw-accent) 65%, var(--sw-ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sw-copy__body {
  font-size: clamp(0.98rem, 0.5vw + 0.8vh, 1.16rem);
  line-height: 1.55;
  max-width: 42ch;
}

/* Variante com a copy no lado direito da tela (cenas pares) — so em telas
   largas; no mobile o engine ja ancora tudo embaixo, ocupando a largura
   toda. */
@media (min-width: 861px) {
  /* O engine posiciona a copy com top:50% mas sobrescreve o transform
     (translateY(-50%)) a cada frame no read() com um leve drift em vh — o
     efeito colateral e que a copy "pendura" pra baixo do meio da tela (topo no
     meio, corpo descendo) e a CTA some embaixo em telas menores. Restauramos a
     centralizacao vertical de verdade com !important (regra de autor com
     !important vence estilo inline sem !important), ancorando um pouco abaixo
     do meio (52% — ficava alto demais em 45%, colado no topo da tela).
     Perde-se o micro-drift de parallax do engine — irrelevante. */
  .sw-copy {
    top: 52%;
    transform: translateY(-50%) !important;
  }
  .sw-copy--right {
    left: auto;
    right: clamp(18px, 5vw, 64px);
    text-align: right;
  }
  .sw-copy--right .sw-copy__tags {
    justify-content: flex-end;
  }
  .sw-copy--right .sw-copy__cta {
    justify-content: flex-end;
  }
}

/* Cena "por que existimos": o video (esmeralda-half2.mp4) e todo sobre fundo
   preto solido (o video-fonte troca de branco pra preto logo antes do corte
   entre as 2 cenas — ver CLAUDE.md). O painel de vidro fosco/texto dessa
   cena usa as cores do modo escuro em vez do modo claro fixo do resto da LP,
   senao ficaria sem contraste em cima do preto. Aplicado via classe
   (adicionada por JS em landing.html, mesma tecnica de .sw-copy--right) —
   nao mexe no arquivo vendorizado do engine. --sw-accent NAO precisa de
   override aqui: e setado inline por elemento (scene.style.setProperty) pelo
   proprio engine a partir do "accent" de cada secao no mount, e estilo
   inline sempre vence regra de stylesheet sem !important — por isso a cor
   clara (#46e08a) ja vem direto da config da secao 'proposito', nao daqui. */
.sw-copy--dark {
  --sw-bg: var(--c-noite);
  --sw-ink: var(--c-papel);
  --sw-ink-soft: var(--c-menta);
  --ink: var(--c-papel);
  --surface-rgb: 18, 23, 20;
}

/* Cena clara ("O problema"): titulo/corpo do painel reforcados pra ficarem
   mais "aparentes" (pedido do usuario, 2 rodadas — a 1a so ajustou o
   breakpoint do degrade e ainda ficou "apagado" na pratica). Causa real: o
   truque de `background-clip:text` + `color:transparent` (degrade de texto)
   renderiza visivelmente mais fraco/fino que cor solida em varios navegadores
   (a suavizacao de fonte nao lida bem com clip+transparencia) — mesmo com os
   dois stops do degrade sendo cores escuras, o texto lia cinza-claro na
   pratica. Pedido do usuario foi literal: "colocar as cores que usamos no
   site" — as outras headings da LP (.lp-h2 etc.) sao cor solida, sem degrade
   nenhum. Entao aqui tambem: solido, sem clip-text. Escopado com
   :not(.sw-copy--dark) de proposito — a 2a cena (escura) ja estava com a cor
   "perfeita" segundo o usuario (mesmo com o degrade), entao essas regras nao
   devem alcancar ela. */
.sw-copy:not(.sw-copy--dark) .sw-copy__title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--sw-ink);
}
.sw-copy:not(.sw-copy--dark) .sw-copy__body {
  color: var(--sw-ink);
}

/* Palavras de efeito, centralizadas no espaco vazio entre o emerald e a
   borda da tela, do lado OPOSTO ao card de texto de cada cena (ver JS em
   landing.html — filhas de .sw-scene, herdam o fade de opacidade da propria
   cena). So UMA palavra visivel por vez (ver .sw-keywords__item abaixo):
   todas ocupam a MESMA celula de grid (grid-area:1/1, mesmo truque da secao
   "Como funciona" no CLAUDE.md), entao a posicao nao muda quando a palavra
   troca, so o texto.
   O ponto de ancoragem partiu do CENTRO do vao entre o emerald e a borda da
   tela — medido direto nos posters (emerald-left-first.jpg /
   emerald-mid-2.jpg) via canvas: o emerald ocupa ~39%-61% da largura em
   1280x800 (objeto-position "center" no eixo horizontal faz ele ficar
   sempre exatamente nos 50%, ver scroll-world.js), o que da ~30% de
   distancia do centro da cena pra fora. Ajustado depois pra ~34% a pedido
   do usuario (queria as palavras um pouco mais pra fora, mais perto da
   borda). `translate(-50%,-50%)` centraliza a palavra nesse ponto (em vez
   de crescer a partir de uma borda), com texto tambem centralizado
   (`text-align:center`). */
.sw-keywords {
  position: absolute;
  top: 50%;
  /* Grupo do lado ESQUERDO do emerald (cena sem --right): centro do vao
     fica pra a ESQUERDA do centro da cena. */
  left: calc(50% - clamp(220px, 34vw, 500px));
  text-align: center;
  transform: translate(-50%, -50%);
  display: grid;
  pointer-events: none;
  /* Lado de onde a palavra desliza ao aparecer. */
  --desloca: -30px;
  /* .sw-scene tem will-change:opacity, entao cria seu proprio contexto de
     empilhamento — .sw-scene__video (video/still) tem z-index:1 dentro
     desse contexto, e sem um z-index explicito aqui as palavras (z-index
     "auto") ficavam ATRAS do video, invisiveis mesmo estando no DOM certo.
     2 garante que ficam por cima. */
  z-index: 2;
}
.sw-keywords--right {
  /* Grupo do lado DIREITO do emerald: centro do vao fica pra a DIREITA do
     centro da cena. */
  left: calc(50% + clamp(220px, 34vw, 500px));
  --desloca: 30px;
}
/* Cor da palavra segue o fundo do VIDEO da cena (branco/preto solido, ver
   CLAUDE.md "O video"), nao a cor de destaque — pedido explicito do usuario.
   Cena clara (1a) fica com o default (preto); a escura (2a) recebe esse
   modificador (mesma tecnica de .sw-copy--dark, aplicado por JS). */
.sw-keywords--dark .sw-keywords__item {
  color: #fff;
}

/* Revelacao palavra por palavra conforme a cena avanca: cada palavra fica
   visivel só entre o proprio limiar de entrada (--limiar) e o limiar da
   PROXIMA palavra (--limiar-fim, ver JS em landing.html) — quando uma
   termina, a seguinte ja esta assumindo a mesma posicao (grid-area 1/1
   acima), entao uma some enquanto a outra aparece no lugar exato.
   --sw-progress (0->1) e publicado pelo motor a cada frame (patch 4 no
   scroll-world.js). --entra/--sai viram 0->1 numa faixa curta ao redor de
   cada limiar (o *14 define a largura do fade: ~0,07 de progresso — mais
   estreito que o *9 antigo de proposito, senao com o vao entre limiares
   as duas janelas se sobrepõem inteiras e a palavra nunca chega a opacidade
   1); revelado e o menor dos dois, entao fica cheio só no meio da janela.
   So opacity e transform mudam — os dois sao baratos de animar; qualquer
   filter/blur aqui recairia no problema de performance documentado no CLAUDE.md. */
.sw-keywords__item {
  grid-area: 1 / 1;
  --entra: clamp(0, calc((var(--sw-progress, 0) - var(--limiar, 0)) * 14), 1);
  --sai: clamp(0, calc((var(--limiar-fim, 1) - var(--sw-progress, 0)) * 14), 1);
  --revelado: min(var(--entra), var(--sai));
  /* Inter (var(--sw-font-display) ja resolve pra Inter — ver .sw-root em
     cima), peso Light (300) a pedido do usuario — precisa vir carregado
     explicitamente no <link> do Google Fonts em landing.html, senao o
     navegador sintetiza um "light" falso (ou cai no 400 mais proximo). */
  font-family: var(--sw-font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  /* Tom neutro escuro do design system (nao #000 puro) — mesma logica de
     --c-noite/--c-grafite no resto do app: nunca preto/branco cru, sempre os
     neutros dessaturados da paleta (ver "Design system Dinamica" no
     CLAUDE.md). So a cena de fundo claro usa isso; a de fundo escuro
     (.sw-keywords--dark abaixo) continua clara, por contraste. */
  color: var(--c-noite);
  line-height: 1.05;
  /* Opacidade maxima de 75% (nao 100%) a pedido do usuario — revelado
     continua controlando o fade in/out entre 0 e 1, so o teto que baixou. */
  opacity: calc(var(--revelado) * 0.75);
  transform: translateX(calc((1 - var(--entra)) * var(--desloca)));
}
.sw-keywords__item { font-size: clamp(2rem, 2vw + 2.1vh, 3.6rem); }

@media (prefers-reduced-motion: reduce) {
  /* Mantem o aparecer/sumir (que acompanha a leitura), tira so o deslizamento. */
  .sw-keywords__item { transform: none; }
}
@media (max-width: 860px) {
  .sw-keywords { display: none; }
}

@media (max-width: 860px) {
  .sw-copy {
    max-height: min(56vh, 480px);
  }
  .sw-copy__title {
    font-size: clamp(1.8rem, 6vw + 1vh, 2.6rem);
  }
  .sw-copy__body {
    font-size: clamp(0.95rem, 3vw + 0.6vh, 1.08rem);
  }
}

/* ---- Cena de intro (splash "Dinamica" + emerald parado, ANTES do video
   rolar) e cena de outro (segura o ultimo frame). Ambas sao cenas do engine
   sem clip (so o still), entao o emerald fica estatico; a copy vira o
   wordmark centralizado (intro) ou nada (outro). Removem o painel de vidro e
   o numero "NN / NN". ---- */
.sw-copy--intro,
.sw-copy--outro {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-height: none;
  text-align: center;
}
.sw-copy--intro .sw-copy__num,
.sw-copy--outro .sw-copy__num {
  display: none;
}
.sw-intro-mark {
  display: block;
  margin: 0 auto;
  height: clamp(40px, 8vh, 78px);
  width: auto;
}
.sw-intro-tagline {
  margin-top: 18px;
  font-size: clamp(0.95rem, 0.4vw + 0.9vh, 1.15rem);
  letter-spacing: 0.02em;
  color: var(--muted);
}
@media (min-width: 861px) {
  .sw-copy--intro,
  .sw-copy--outro {
    top: 24% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(90vw, 640px);
  }
}
@media (max-width: 860px) {
  .sw-copy--intro,
  .sw-copy--outro {
    top: 16% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100%;
    max-height: none;
  }
}

/* ---- conteudo estatico apos as cenas de video (elementos classicos de
   landing page pra converter) ---- */
.lp-content {
  position: relative;
  z-index: 45; /* acima do sky/stage/copylayer/route/hint (0-40), abaixo da
                  topbar fixa (50), que continua servindo de header do site */
}
.lp-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.06;
}
.lp-card-text {
  font-size: 1.05rem;
  line-height: 1.6;
}
.lp-cta-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.9vw, 2.8rem);
  line-height: 1.08;
}