/* ==========================================================================
   COMPONENTES DO EVENTO
   Montados a partir dos componentes básicos. Nenhum valor solto:
   tudo vem de tokens.css.
   ========================================================================== */

/* ==========================================================================
   1. HERO — universo animado reativo ao mouse
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(44rem, 92vh);
  padding: var(--space-24) 0 var(--space-20);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-3xl);
  background: radial-gradient(120% 120% at 20% 0%, var(--violet-800) 0%, var(--violet-950) 70%);
}

/* Camadas do universo. O JS move cada uma com uma profundidade diferente. */
.hero__sky {
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 78% 28%, rgba(209, 45, 224, 0.38), transparent 62%),
    radial-gradient(32rem 26rem at 88% 62%, rgba(52, 216, 245, 0.22), transparent 62%),
    radial-gradient(40rem 34rem at 12% 84%, rgba(130, 87, 230, 0.3), transparent 62%);
  filter: blur(6px);
  will-change: transform;
  transition: transform var(--dur-slower) var(--ease-out);
}

/* Planeta — o "universo" do nome do evento, com anel em órbita */
.hero__planet {
  position: absolute;
  right: -6rem;
  top: 50%;
  width: clamp(20rem, 42vw, 34rem);
  aspect-ratio: 1;
  translate: 0 -50%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--dur-slower) var(--ease-out);
}

/* O planeta é montado em três camadas para que só a do meio gire.
   Girar um transform é barato; animar filtro ou cor de um círculo
   grande e desfocado derruba o quadro em celular. */
.hero__planet-body {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 90px rgba(130, 87, 230, 0.45);
}

.hero__planet-body::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 210deg, #34D8F5, #8257E6, #D12DE0, #5B36A3, #34D8F5);
  animation: planet-spin 42s linear infinite;
}

/* Sombreamento e brilho especular ficam parados sobre o giro. */
.hero__planet-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.45), transparent 44%),
    radial-gradient(circle at 76% 80%, rgba(7, 3, 18, 0.92), transparent 58%);
}

@keyframes planet-spin {
  to { transform: rotate(360deg); }
}

.hero__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: conic-gradient(from 0deg, transparent 0%, rgba(52, 216, 245, 0.75) 22%, rgba(209, 45, 224, 0.75) 48%, transparent 72%) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  transform: rotate3d(1, 0.35, 0, 74deg);
  animation: ring-spin 18s linear infinite;
}

.hero__ring--outer {
  inset: -9%;
  animation-duration: 28s;
  animation-direction: reverse;
  opacity: 0.55;
}

@keyframes ring-spin {
  to { transform: rotate3d(1, 0.35, 0, 74deg) rotate(360deg); }
}

/* Véu para garantir contraste do texto sobre o planeta */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(95deg, var(--violet-950) 6%, rgba(13, 6, 32, 0.82) 38%, transparent 68%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 38rem;
  padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.6vw, var(--fs-6xl));
  font-weight: var(--fw-extrabold);
  line-height: 0.98;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-hi);
  text-wrap: balance;
}

.hero__title em {
  display: block;
  font-style: normal;
  background: linear-gradient(100deg, var(--cyan-300) 0%, var(--magenta-300) 58%, var(--violet-200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  margin-top: var(--space-6);
  max-width: 34rem;
  font-size: clamp(var(--fs-md), 1.6vw, var(--fs-lg));
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  text-wrap: pretty;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text);
}

.hero__meta-item .icon {
  color: var(--cyan-400);
}

.hero__meta-item strong {
  color: var(--text-hi);
  font-weight: var(--fw-bold);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__seats {
  margin-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--text-low);
}

/* Entrada escalonada no carregamento */
.hero__inner > * {
  animation: hero-in var(--dur-slower) var(--ease-out) both;
}
.hero__eyebrow { animation-delay: 60ms; }
.hero__title { animation-delay: 140ms; }
.hero__sub { animation-delay: 220ms; }
.hero__meta { animation-delay: 300ms; }
.hero__actions { animation-delay: 380ms; }
.hero__seats { animation-delay: 460ms; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding: var(--space-16) 0 var(--space-12); border-radius: var(--radius-2xl); }
  .hero__planet { right: -34%; top: 14%; width: 26rem; translate: 0; opacity: 0.55; }
  .hero__veil { background: linear-gradient(180deg, rgba(13, 6, 32, 0.4) 0%, rgba(13, 6, 32, 0.88) 55%); }
  .hero__inner { max-width: none; }
}

/* ==========================================================================
   2. DIFERENCIAIS — box com ícone + texto
   ========================================================================== */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5);
}

.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-glass);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Brilho que acompanha o cursor dentro do card (posição vinda do JS) */
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(14rem 14rem at var(--mx, 50%) var(--my, 0%), rgba(209, 45, 224, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.feature:hover {
  transform: translateY(-4px);
  border-color: var(--border-magenta);
  box-shadow: var(--shadow-3), var(--glow-magenta-soft);
}

.feature:hover::before {
  opacity: 1;
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: linear-gradient(140deg, rgba(209, 45, 224, 0.18), rgba(52, 216, 245, 0.1));
  color: var(--cyan-300);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.feature:hover .feature__icon {
  color: var(--magenta-300);
  border-color: var(--border-magenta);
}

.feature__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
  line-height: var(--lh-snug);
}

.feature__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
}

/* Variante numerada — para etapas ou números do evento */
.feature--stat .feature__num {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  background: linear-gradient(100deg, var(--cyan-300), var(--magenta-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Variante horizontal compacta */
.feature--inline {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}

.feature--inline .feature__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

/* ==========================================================================
   3. PROGRAMAÇÃO — blocos da noite
   ========================================================================== */

.agenda {
  display: grid;
  gap: var(--space-4);
}

.agenda__card {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-glass);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.agenda__card:hover {
  border-color: var(--border-cyan);
  background: var(--surface-1);
  transform: translateX(4px);
}

.agenda__card.is-now {
  border-color: var(--border-magenta);
  background: linear-gradient(100deg, rgba(209, 45, 224, 0.12), transparent 60%), var(--surface-1);
  box-shadow: var(--glow-magenta-soft);
}

.agenda__time {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-right: var(--space-6);
  border-right: 1px solid var(--border);
}

.agenda__hour {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

.agenda__dur {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-low);
}

.agenda__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.agenda__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.agenda__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.agenda__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  text-wrap: pretty;
}

.agenda__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.agenda__host {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.agenda__host strong {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

@media (max-width: 720px) {
  .agenda__card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
  }
  .agenda__time {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-3);
    padding: 0 0 var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .agenda__hour { font-size: var(--fs-xl); }
}

/* ==========================================================================
   4. CONVIDADOS
   ========================================================================== */

.speakers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-6);
}

.speaker {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface-glass);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.speaker:hover {
  transform: translateY(-6px);
  border-color: var(--border-magenta);
  box-shadow: var(--shadow-3), var(--glow-magenta-soft);
}

/* Moldura com aura, igual à referência dos palestrantes */
.speaker__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 70% 30%, rgba(209, 45, 224, 0.45), transparent 70%),
    radial-gradient(60% 60% at 20% 80%, rgba(52, 216, 245, 0.3), transparent 70%),
    var(--violet-700);
}

.speaker__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.speaker:hover .speaker__media img {
  transform: scale(1.04);
}

/* Silhueta usada quando ainda não há foto do convidado */
.speaker__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.28);
}

.speaker__placeholder .icon {
  width: 5rem;
  height: 5rem;
  stroke-width: 1;
}

.speaker__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(7, 3, 18, 0.92) 100%);
  pointer-events: none;
}

.speaker__tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
}

.speaker__name {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  text-shadow: 0 2px 12px rgba(7, 3, 18, 0.8);
  text-wrap: balance;
}

.speaker__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1 1 auto;
}

.speaker__role {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--cyan-400);
}

.speaker__bio {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  text-wrap: pretty;
}

/* Bio longa: corta em 4 linhas e abre no modal pelo botão */
.speaker__bio--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.speaker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* Variante horizontal — para destaque de convidado principal */
.speaker--feature {
  display: grid;
  grid-template-columns: minmax(12rem, 20rem) 1fr;
  align-items: stretch;
}

.speaker--feature .speaker__media {
  aspect-ratio: auto;
  min-height: 100%;
}

.speaker--feature .speaker__body {
  padding: var(--space-8);
  justify-content: center;
  gap: var(--space-4);
}

@media (max-width: 720px) {
  .speaker--feature { grid-template-columns: 1fr; }
  .speaker--feature .speaker__media { aspect-ratio: 16 / 10; }
  .speaker--feature .speaker__body { padding: var(--space-6); }
}

/* ==========================================================================
   5. CONTADOR REGRESSIVO
   ========================================================================== */

.countdown {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-glass-strong);
  backdrop-filter: blur(8px);
}

.countdown__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

/* Troca de dígito: pequena batida, sem redesenhar a caixa */
.countdown__num.is-ticking {
  animation: tick var(--dur-base) var(--ease-spring);
}

@keyframes tick {
  0% { transform: translateY(-4px); opacity: 0.35; }
  100% { transform: none; opacity: 1; }
}

.countdown__label {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-low);
  text-transform: lowercase;
}

.countdown__sep {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink-600);
  margin-top: -0.75rem;
}

/* Variante grande — usada no rodapé */
.countdown--lg .countdown__unit {
  min-width: 5.5rem;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.countdown--lg .countdown__num {
  font-size: var(--fs-4xl);
}

.countdown--lg .countdown__label {
  font-size: var(--fs-2xs);
}

/* Estado encerrado */
.countdown.is-over .countdown__unit {
  opacity: 0.5;
}

/* Barra de topo: contador + CTA (referência ref_sync1) */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface-glass-strong);
  backdrop-filter: blur(16px);
}

.topbar__msg {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-hi);
}

.topbar__msg .icon {
  color: var(--magenta-400);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; justify-content: center; padding: var(--space-3) var(--space-4); }
  .topbar__msg { width: 100%; justify-content: center; text-align: center; font-size: var(--fs-xs); }
  .topbar__right { width: 100%; flex-wrap: wrap; justify-content: center; }
  .countdown__unit { min-width: 2.9rem; padding: var(--space-2); }
  .countdown__num { font-size: var(--fs-lg); }
}

/* Abaixo disso as caixas param de ter largura fixa e passam a dividir a
   linha em partes iguais — é o que impede o contador de estourar a tela. */
@media (max-width: 560px) {
  .countdown {
    width: 100%;
    gap: var(--space-1);
  }
  .countdown__unit {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-2) var(--space-1);
  }
  .countdown__label {
    font-size: 0.625rem;
    letter-spacing: 0;
  }
  /* Repete flex e min-width porque `.countdown--lg .countdown__unit` tem
     especificidade maior que a regra genérica logo acima. */
  .countdown--lg .countdown__unit {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-3) var(--space-1);
  }
  .countdown--lg .countdown__num { font-size: var(--fs-2xl); }
  .countdown--lg .countdown__label { font-size: 0.625rem; }
  .topbar__right .btn { width: 100%; }
}

/* ==========================================================================
   6. TRILHO LATERAL FIXO COM CTA
   ========================================================================== */

.rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-rail);
  display: flex;
  align-items: stretch;
}

.rail__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 13.5rem;
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--surface-glass-strong);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-4);
  transform: translateX(calc(100% - 0px));
  transition: transform var(--dur-slow) var(--ease-out);
}

.rail.is-open .rail__card,
.rail:hover .rail__card,
.rail:focus-within .rail__card {
  transform: none;
}

.rail__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--action-gradient);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  writing-mode: vertical-rl;
  cursor: pointer;
  box-shadow: var(--glow-magenta), var(--sheen);
  order: -1;
  transition: filter var(--dur-fast) var(--ease-out);
}

.rail__tab:hover {
  filter: brightness(1.1);
}

.rail__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.rail__tab .icon {
  writing-mode: horizontal-tb;
}

.rail__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
  line-height: var(--lh-snug);
}

.rail__seats {
  font-size: var(--fs-2xs);
  color: var(--text-low);
}

.rail__bar {
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--violet-600);
  overflow: hidden;
}

.rail__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--action-gradient);
  transition: width var(--dur-slower) var(--ease-out);
}

/* No celular vira barra inferior, que é onde o polegar alcança */
@media (max-width: 860px) {
  .rail {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    flex-direction: column;
  }
  .rail__tab { display: none; }
  .rail__card {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: 0;
    transform: none;
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }
  .rail__bar { display: none; }
  /* width:auto anula o .btn--block que o botão carrega da versão desktop:
     na barra inferior ele divide a linha com o texto, não ocupa tudo. */
  .rail__card .btn { flex: none; width: auto; }
  .rail__title { min-width: 0; }
  .rail__seats { display: none; }
}

/* ==========================================================================
   7. FORMULÁRIO DE INSCRIÇÃO
   ========================================================================== */

.signup {
  position: relative;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.signup::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(28rem 18rem at 100% 0%, rgba(209, 45, 224, 0.14), transparent 65%);
}

.signup__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.signup__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-hi);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.signup__sub {
  font-size: var(--fs-sm);
  color: var(--text-mid);
  line-height: var(--lh-relaxed);
}

.signup__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.signup__grid .field--full {
  grid-column: 1 / -1;
}

.signup__foot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.signup__legal {
  font-size: var(--fs-2xs);
  line-height: 1.55;
  color: var(--text-low);
}

.signup__legal a {
  color: var(--text-mid);
}

/* Estado de sucesso — substitui o formulário */
.signup__success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.signup.is-done .signup__form { display: none; }
.signup.is-done .signup__head { display: none; }
.signup.is-done .signup__success { display: flex; animation: fade-up var(--dur-slow) var(--ease-out) both; }

.signup__check {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success);
}

.signup__check .icon {
  width: 2rem;
  height: 2rem;
  stroke-width: 2;
}

@media (max-width: 640px) {
  .signup__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */

.faq {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.faq .accordion__trigger {
  font-size: var(--fs-md);
}

/* ==========================================================================
   9. CTA ANIMADO — 3 variações para usar entre as dobras
   ========================================================================== */

/* Empilhamento do bloco, de baixo para cima:
   fundo opaco do .cta → aurora (::before) → varredura (::after) → conteúdo.
   As camadas ficam em z-index positivo de propósito: em negativo elas
   pintariam ATRÁS do fundo opaco e sumiriam. */
.cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2xl);
  background: var(--violet-900);
}

/* Aurora em movimento lento no fundo do bloco */
.cta::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  /* Raios em porcentagem: acompanham o tamanho do bloco, então a aurora
     tem a mesma presença na faixa estreita e no fecho de página largo. */
  background:
    radial-gradient(42% 68% at 26% 42%, rgba(209, 45, 224, 0.78), transparent 62%),
    radial-gradient(36% 60% at 78% 64%, rgba(52, 216, 245, 0.52), transparent 62%),
    radial-gradient(46% 72% at 56% 10%, rgba(130, 87, 230, 0.66), transparent 62%);
  filter: blur(18px);
  animation: cta-drift 16s var(--ease-in-out) infinite alternate;
}

@keyframes cta-drift {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to { transform: translate3d(5%, 4%, 0) scale(1.12); }
}

/* Varredura de brilho que cruza o bloco */
.cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: cta-sweep 5.5s var(--ease-in-out) infinite;
}

@keyframes cta-sweep {
  0% { left: -50%; }
  60%, 100% { left: 115%; }
}

.cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  /* Véu forte onde o texto começa, quase transparente à direita, para a
     aurora aparecer sem custar contraste na leitura. */
  background: linear-gradient(100deg, rgba(13, 6, 32, 0.92) 8%, rgba(13, 6, 32, 0.34) 100%);
}

.cta__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 3.4vw, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  line-height: 1.06;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-hi);
  text-wrap: balance;
}

.cta__sub {
  margin-top: var(--space-4);
  max-width: 34rem;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  text-wrap: pretty;
}

.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  flex: none;
}

/* Variação A — faixa compacta para o meio das dobras */
.cta--strip .cta__inner {
  padding: var(--space-6) var(--space-8);
  gap: var(--space-6);
}

.cta--strip .cta__title {
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
}

.cta--strip .cta__sub {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

/* Variação B — card estreito para barra lateral ou fim de seção */
.cta--card .cta__inner {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--space-8);
}

.cta--card .cta__title {
  font-size: var(--fs-xl);
}

.cta--card .cta__actions {
  width: 100%;
  margin-top: var(--space-6);
}

.cta--card .cta__actions .btn {
  width: 100%;
}

/* Variação C — centralizada, para o fecho da página.
   Aqui o texto ocupa a largura toda, então o véu é uniforme. */
.cta--center .cta__inner,
.cta--card .cta__inner {
  background: linear-gradient(160deg, rgba(13, 6, 32, 0.86), rgba(13, 6, 32, 0.68));
}

.cta--center .cta__inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta--center .cta__sub {
  margin-inline: auto;
}

.cta--center .cta__actions {
  align-items: center;
  margin-top: var(--space-8);
}

/* Botão que respira — só na chamada principal, nunca em mais de um por dobra */
.btn--pulse {
  animation: btn-pulse 2.8s var(--ease-in-out) infinite;
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: var(--glow-magenta-soft), var(--sheen); }
  50% { box-shadow: 0 10px 40px rgba(209, 45, 224, 0.6), var(--sheen); }
}

@media (max-width: 860px) {
  .cta__inner { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .cta__actions { width: 100%; }
  .cta__actions .btn { width: 100%; }
}

/* ==========================================================================
   SEÇÃO — cabeçalho reutilizável de dobra
   ========================================================================== */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 44rem;
  margin-bottom: var(--space-10);
}

.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-head__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 3.2vw, var(--fs-3xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-hi);
  text-wrap: balance;
}

.section-head__sub {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-mid);
  text-wrap: pretty;
}