/* curso.css · #curso — "ainda não abriu", sem fingir nada.
   Vidro bem fosco sobre uma luz lenta: dá para ver que existe algo atrás (a luz de uma tela),
   não o quê. Título, estado, texto e botão nítidos por cima. Menor e mais quieto que o ebook.
   Um único movimento: a luz deriva devagar (só enquanto a seção está na tela; curso.js liga).
   Movimento reduzido: luz parada. */

.curso { padding-top: clamp(8px, 3vh, 40px); scroll-margin-top: 0; }

.curso__conteudo { position: relative; }

/* a luz por trás do vidro: uma "tela" fria e um reflexo quente, sempre dentro da área do vidro */
.curso__luz {
  position: absolute; z-index: 0;
  inset: 22% 16%;
  max-width: 700px;
  margin-inline: auto;
  pointer-events: none;
}
.curso__tela {
  position: absolute; left: 6%; top: 8%;
  width: 52%; aspect-ratio: 16 / 9;
  max-height: 84%;
  border-radius: 14px;
  background:
    linear-gradient(165deg, rgb(236 240 247 / .95), rgb(178 190 212 / .7) 46%, rgb(132 104 88 / .55));
  box-shadow: 0 0 60px 18px rgb(205 214 232 / .22);
  animation: curso-deriva 26s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.curso__tela::after {
  /* reflexo quente (a cor média de um vídeo do canal), do outro lado */
  content: "";
  position: absolute; left: 92%; top: 18%;
  width: 38%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(176 120 84 / .55), transparent);
}
.curso--ativo .curso__tela { animation-play-state: running; }
@keyframes curso-deriva {
  from { transform: translate3d(-4%, 6%, 0); }
  to   { transform: translate3d(62%, -4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .curso__tela { animation: none; transform: translate3d(28%, 0, 0); }
}

/* o vidro: bem fosco */
.curso__bloco {
  --vidro-filtro: blur(44px) saturate(150%) brightness(1.04);
  --vidro-fundo: rgb(255 255 255 / .045);
  --vidro-recuo: 22px;
  position: relative; z-index: 1;
  max-width: 960px;
  margin-inline: auto;
  padding: 28px 22px 22px;
  display: grid;
  gap: 18px;
}
.curso__cabeca { display: grid; justify-items: start; gap: 14px; }
.curso__estado {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: var(--t-pequeno); line-height: 1.3;
  color: var(--vidro-texto-2);
  background: rgb(255 255 255 / .07);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
}
.curso__ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgb(var(--gelo-rgb) / .7);
}
.curso__titulo {
  font-size: clamp(1.875rem, 4.2vw, 3rem);
  line-height: 1.04; letter-spacing: -.032em;
  max-width: 13ch;
}
.curso__corpo { display: grid; gap: 18px; justify-items: start; }
.curso__texto {
  max-width: 30em;
  font-size: var(--t-corpo); line-height: 1.5;
  color: var(--vidro-texto-2);
}
.curso__bloco .botao {
  width: 100%;
  min-height: 52px;
  padding: 12px 22px;
  white-space: normal;
  line-height: 1.25;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .curso__bloco {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: clamp(32px, 5vw, 64px);
    align-items: end;
    padding: clamp(36px, 4.4vw, 52px) clamp(32px, 4.4vw, 56px);
  }
  .curso__texto { font-size: var(--t-lead); line-height: 1.45; }
  .curso__bloco .botao { width: auto; font-size: 1rem; }
}