:root {
  --bg: #02030a;
  --accent: #8fb6ff;
  --accent-warm: #ffb05a;
  --accent-cyan: #6ad4ff;
  --gold: #ffd58a;
  --text: #e6ecf5;
  --text-dim: #8a96ad;
  --title-font: "Chakra Petch";
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

/* Escala "para caber": o layout foi desenhado para telas largas (~2000px).
   Em telas mais estreitas encolhemos a fonte-raiz proporcionalmente — e como
   o site e quase todo em rem, TUDO encolhe junto, igual a dar zoom-out no
   navegador (que e justamente como o layout fica perfeito). A Terra (em vw)
   nao muda.
   - >= 2000px: 16px (1rem) — o tamanho "nativo" do design (ultrawide perfeita).
   - entre 1375px e 2000px: encolhe suave de 16px ate 11px.
   - <= 1375px: 11px (~69%), o ponto em que tudo cabe ao lado da Terra.
   Ajuste 0.8vw (forca do encolhimento) e os limites 11px / 16px se precisar. */
html { font-size: clamp(11px, 0.8vw, 16px); }
/* No mobile o layout ja se reorganiza (colunas empilham); usa tamanho cheio. */
@media (max-width: 700px) { html { font-size: 100%; } }

html,
body {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

/* ---------- Trilha numerológica (coluna discreta na borda esquerda) ---------- */
.number-rail {
  position: fixed;
  left: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  pointer-events: none; /* container não bloqueia drag do planeta */
  user-select: none;
  opacity: 0;
  animation: railFade 1.8s ease 0.6s forwards;
}

.number-glyph {
  position: relative;
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  font-feature-settings: "liga" off, "kern" on;
  font-variant-emoji: text;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1;
  color: rgba(234, 226, 255, 0.92);
  text-shadow:
    0 0 10px rgba(176, 140, 255, 0.55),
    0 0 22px rgba(176, 140, 255, 0.28),
    0 0 1px rgba(0, 0, 0, 0.6);
  letter-spacing: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}

.number-glyph:hover {
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 0 10px rgba(176, 140, 255, 0.7),
    0 0 22px rgba(176, 140, 255, 0.35);
  transform: scale(1.12);
}

/* Tooltip com o arquétipo do número */
.number-glyph::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 0.9rem);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(234, 226, 255, 0.9);
  background: rgba(14, 10, 28, 0.8);
  border: 1px solid rgba(176, 140, 255, 0.3);
  padding: 0.35rem 0.65rem;
  border-radius: 0.1875rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.number-glyph:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@keyframes railFade {
  to { opacity: 1; }
}

@media (max-height: 760px) {
  .number-rail { gap: 0.9rem; }
  .number-glyph { font-size: 1.6875rem; }
}

@media (max-width: 700px) {
  .number-rail { display: none; }
}

/* ---------- Card revelado ao clicar num número do rail ---------- */
.number-stage {
  position: fixed;
  top: 6rem;
  left: 5.5rem;
  z-index: 6;
  width: 16.25rem; /* era 16.25rem — em rem encolhe junto com a escala (uniforme) */
  padding: 1.6rem 1.4rem 1.4rem;
  background: rgba(8, 12, 22, 0.72);
  border: 1px solid rgba(143, 182, 255, 0.32);
  border-radius: 0.5rem;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
  font-family: "Inter", sans-serif;
}

.number-stage.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.num-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(143, 182, 255, 0.22);
  color: rgba(220, 232, 252, 0.65);
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: all 0.2s;
}

.num-close:hover {
  background: rgba(143, 182, 255, 0.15);
  color: white;
  border-color: rgba(143, 182, 255, 0.5);
}

.num-tag {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: rgba(143, 182, 255, 0.85);
  margin-bottom: 0.4rem;
}

.number-display {
  font-family: "Chakra Petch", "Inter", sans-serif;
  font-weight: 600;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, #ffffff, #c9dcff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(143, 182, 255, 0.35);
  margin-bottom: 0.4rem;
}

.number-display.master {
  background: linear-gradient(120deg, #ffe7b8, #ffb05a);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 32px rgba(255, 176, 90, 0.45);
}

.num-name {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.num-period {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: rgba(180, 200, 230, 0.75);
  margin-bottom: 0.8rem;
}

.num-svg {
  width: 100%;
  height: 11.25rem;
  margin: 0.4rem 0 0.8rem;
  display: block;
}

.num-line {
  stroke: rgba(143, 182, 255, 0.55);
  stroke-width: 0.7;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation: drawNumLine 1.2s ease-out forwards;
}

@keyframes drawNumLine {
  to { stroke-dashoffset: 0; }
}

.num-star {
  opacity: 0;
  transform-origin: center;
  transform: scale(0);
  animation: appearNumStar 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes appearNumStar {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

.num-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: rgba(180, 200, 230, 0.8);
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .number-stage { display: none; }
}

/* Glyph ativo no rail (número selecionado) */
.number-glyph.active {
  color: rgba(224, 206, 255, 0.98);
  text-shadow:
    0 0 12px rgba(176, 140, 255, 0.75),
    0 0 24px rgba(176, 140, 255, 0.45);
  transform: scale(1.18);
}

/* Números mestres (11, 22, 33) — tom dourado para diferenciar */
.number-glyph.master {
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: rgba(255, 225, 165, 0.95);
  text-shadow:
    0 0 10px rgba(255, 200, 120, 0.6),
    0 0 22px rgba(255, 176, 90, 0.32),
    0 0 1px rgba(0, 0, 0, 0.6);
}

.number-glyph.master:hover {
  color: rgba(255, 240, 200, 1);
  text-shadow:
    0 0 14px rgba(255, 200, 120, 0.85),
    0 0 28px rgba(255, 176, 90, 0.5);
}

@media (max-height: 760px) {
  .number-glyph.master { font-size: 1.375rem; }
}

/* ---------- Forma do número projetada sobre o planeta ---------- */
/* Centro da Terra no viewport: iframe vai de -20vw a 100vw (centro em 40vw),
   verticalmente centralizada. SVG fixo nesse ponto. */
.planet-shape-svg {
  position: fixed;
  top: 50%;
  left: 40vw;
  /* O planeta ocupa ~70vh do viewport (FOV 38°, distância 4.2 no iframe).
     Os vértices da forma estão em r=60 dentro da viewBox 200 (60% do SVG),
     então SVG ~117vh faz com que o círculo dos vértices ≈ 70vh, alinhando
     com a borda da Terra. */
  width: min(117vh, 92vw);
  height: min(117vh, 92vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: 2;
}
.planet-shape-svg.visible { opacity: 1; }

/* Linhas mais grossas e luminosas em escala planeta */
.planet-shape-svg .num-line {
  stroke: rgba(205, 180, 255, 0.9);
  stroke-width: 0.5;
  filter: drop-shadow(0 0 4px rgba(176, 140, 255, 0.7))
          drop-shadow(0 0 10px rgba(176, 140, 255, 0.38));
}

/* Estrelas com glow mais intenso em escala planeta */
.planet-shape-svg .num-star {
  filter: drop-shadow(0 0 6px rgba(255, 230, 180, 0.95))
          drop-shadow(0 0 16px rgba(255, 200, 120, 0.5))
          drop-shadow(0 0 28px rgba(255, 176, 90, 0.22));
}

@media (max-width: 700px) {
  .planet-shape-svg { display: none; }
}

/* ---------- Iframe do planeta (asset hospedado) ---------- */
/* Largura 120vw + translateX(-20vw) coloca o centro do iframe (onde Terra
   e sol são renderizados) em 40vw — ou seja, 10vw à esquerda do centro real
   da tela. Iframe vai de -20vw a 100vw, cobrindo a tela toda. */
#planet-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 120vw;
  height: 100vh;
  transform: translateX(-20vw);
  border: 0;
  background: #000;
  z-index: 0;
  display: block;
}

/* ---------- HUD ---------- */
.hud-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
  padding: 0.85rem 1.8rem;
  background: #02030a;
  border-bottom: 1px solid rgba(143, 182, 255, 0.10);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Botão "Entrar" no topo direito — pill discreto que acende em âmbar */
.login-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.05rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(8, 12, 24, 0.45);
  border: 1px solid rgba(143, 182, 255, 0.22);
  border-radius: 62.4375rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s, background 0.25s, box-shadow 0.25s;
}
.login-btn svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
.login-btn:hover {
  color: #fff;
  border-color: var(--accent-warm);
  background: rgba(255, 176, 90, 0.1);
  box-shadow: 0 0 18px rgba(255, 176, 90, 0.18);
}
.login-btn:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .login-btn { padding: 0.45rem 0.7rem; letter-spacing: 0.12em; }
  .login-btn span { display: none; }   /* em telas pequenas, só o ícone */
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  color: var(--text);
  text-decoration: none;   /* .brand agora é link (volta ao topo) */
  cursor: pointer;
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.brand-mark {
  color: var(--accent-warm);
  font-size: 1.25rem;
  text-shadow: 0 0 12px rgba(255, 176, 90, 0.6);
  animation: brandPulse 3.4s ease-in-out infinite;
}

@keyframes brandPulse {
  0%, 100% {
    opacity: 0.67;
    text-shadow:
      0 0 10px rgba(255, 176, 90, 0.30);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 32px rgba(255, 176, 90, 1.0),
      0 0 64px rgba(255, 176, 90, 0.45);
  }
}

.hud-bottom {
  position: fixed;
  bottom: 1.6rem;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.status::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 10px var(--accent-warm);
  animation: blink 1.2s ease-in-out infinite;
}
.status.ready::before {
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* ---------- Hero — primeira tela; planeta atrás ---------- */
.content {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 6rem 5vw 5rem;
  pointer-events: none;
  text-align: right;
}

/* Backdrop sutil atrás da coluna direita (welcome + form) — gradient
   horizontal que fade pra transparente em direção ao planeta, então não
   tem aresta dura. backdrop-filter dá um leve blur no que está atrás. */
.content::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(
    to left,
    rgba(205, 180, 255, 0.22) 0%,
    rgba(205, 180, 255, 0.15) 35%,
    rgba(205, 180, 255, 0.06) 65%,
    transparent 100%
  );
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  /* Mask faz com que o backdrop-filter (blur) também faça fade, evitando
     a divisão dura onde o blur termina. */
  mask: linear-gradient(to left, #000 0%, #000 22%, transparent 100%);
  -webkit-mask: linear-gradient(to left, #000 0%, #000 22%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.welcome-block {
  margin-bottom: 2.8rem;
  pointer-events: none;
  max-width: 33.75rem; /* era 33.75rem — em rem encolhe junto com a escala */
  text-align: center;
}

.welcome-tag {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: 1.6rem;
  opacity: 0.85;
}

.welcome {
  font-family: var(--title-font), "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  line-height: 1.15;
  margin-bottom: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(120deg, #ffffff 0%, #d8e3f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(143, 182, 255, 0.22);
}

.welcome em {
  display: inline-block;
  margin-top: 0.4em;
  font-style: normal;
  font-weight: 300;
  font-size: 0.78em;
  letter-spacing: 0.22em;
  background: linear-gradient(120deg, #c8b3ff 0%, #8fb6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.welcome-sub {
  font-size: 1.02rem;
  color: rgba(220, 232, 252, 0.88);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.025em;
}

/* ---------- Formulário (minimal, flutuante) ---------- */
.form {
  width: min(23.75rem, 88vw); /* era 380px — em rem encolhe junto com a escala */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  pointer-events: auto;
  text-align: left;
}

.field {
  position: relative;
  padding-top: 1.4rem;
}

.field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(143, 182, 255, 0.25);
  color: var(--text);
  padding: 0.7rem 0;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 300;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 0.3s ease;
}

.field input::placeholder {
  color: transparent;
}

.field label {
  position: absolute;
  left: 0;
  top: 2.05rem;
  color: rgba(180, 198, 230, 0.85);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  transition: all 0.3s ease;
}

.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field input[type="date"] ~ label {
  top: 0;
  font-size: 0.72rem;
  color: #c9dcff;
  letter-spacing: 0.2em;
}

.field-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}

.field input:focus ~ .field-line {
  transform: scaleX(1);
}

.field input[type="date"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(0.2);
  cursor: pointer;
  opacity: 0.6;
}

.cta {
  margin-top: 0.6rem;
  background: transparent;
  border: 1px solid rgba(143, 182, 255, 0.4);
  color: var(--text);
  padding: 1.05rem 2rem;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--title-font), "Inter", sans-serif;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  align-self: flex-end;
  min-width: 12.5rem; /* era 12.5rem — em rem encolhe junto com a escala */
}

/* CTA do hero — fica dentro do welcome-block; precisa de pointer-events: auto
   porque o pai (welcome-block / content) tem pointer-events: none */
.hero-cta {
  pointer-events: auto;
  margin-top: 1.8rem;
  align-self: auto; /* anula o flex-end herdado de .cta — agora é inline-flex
                       e fica centralizado via text-align: center do pai */
}

.hero-cta:hover {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(255, 255, 255, 1);
  color: var(--bg);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.08),
    0 0 36px rgba(255, 255, 255, 0.5),
    0 0 80px rgba(255, 255, 255, 0.22);
}

.hero-cta:hover::before {
  opacity: 0;
}


.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(143, 182, 255, 0.15), rgba(200, 179, 255, 0.18));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta:hover {
  border-color: rgba(143, 182, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(143, 182, 255, 0.06), 0 0 30px rgba(143, 182, 255, 0.2);
}

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

.cta > span {
  position: relative;
  z-index: 1;
}

.cta-arrow {
  transition: transform 0.3s ease;
}
.cta:hover .cta-arrow {
  transform: translateX(6px);
}

/* ---------- Preview do Caminho de Vida (revelado pós-submit) ---------- */
.preview-block {
  position: absolute;
  top: 50%;
  right: 5vw;
  width: min(440px, 88vw);
  text-align: right;
  z-index: 4;
  opacity: 0;
  transform: translate(0, calc(-50% + 14px));
  pointer-events: none;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.preview-block.revealed {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}

.preview-tag {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: 0.6rem;
  opacity: 0.85;
}

.preview-greeting {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 232, 252, 0.78);
  margin-bottom: 0.2rem;
}

.preview-number {
  font-family: "Chakra Petch", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(5.5rem, 12vw, 9rem);
  line-height: 1;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, #ffffff, #c9dcff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(143, 182, 255, 0.4);
  margin: 0.2rem 0 0.6rem;
}

.preview-number.master {
  background: linear-gradient(120deg, #ffe7b8, #ffb05a);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 60px rgba(255, 176, 90, 0.5);
}

.preview-archetype {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.45rem;
}

.preview-essence {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: rgba(180, 200, 230, 0.85);
  margin-bottom: 1.1rem;
}

.preview-meta {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(220, 232, 252, 0.9);
  margin-bottom: 1.6rem;
}

.preview-cta {
  align-self: flex-end;
  margin-left: auto;
}

.preview-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-top: 1.4rem;
  line-height: 1.9;
  text-transform: uppercase;
}

/* Fade-out do bloco inicial quando o preview é revelado */
.welcome-block.faded,
.form.faded {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

@media (max-width: 700px) {
  .preview-block { right: 1.5rem; left: 1.5rem; width: auto; }
}

/* ---------- Mensagem de erro do formulário ---------- */
.form-error {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff9aa2;
  text-shadow: 0 0 12px rgba(255, 100, 110, 0.35);
  min-height: 1em;
  margin-top: -0.6rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  text-align: left;
}
.form-error.visible {
  opacity: 1;
}

/* ---------- Hint ---------- */
.hint {
  position: fixed;
  bottom: 4.4rem;
  left: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  pointer-events: none;
}

.dot {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

/* ---------- Animações de entrada ---------- */
.intro {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 1.4s cubic-bezier(0.2, 0.65, 0.3, 1) forwards;
}
.intro-1 { animation-delay: 0.4s; }
.intro-2 { animation-delay: 0.9s; }
.intro-3 { animation-delay: 1.4s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Fade overlay (transição de saída) ---------- */
.fade-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.fade-overlay.active {
  opacity: 1;
}

/* ---------- Indicador de scroll no fim do hero ---------- */
.scroll-cue {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-dim);
  pointer-events: none;
  opacity: 0;
  animation: cueFadeIn 1.2s ease 2.2s forwards, cueBounce 2.6s ease-in-out 3.4s infinite;
  z-index: 5;
}
.cue-arrow {
  font-size: 1.05rem;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(143, 182, 255, 0.55);
}

@keyframes cueFadeIn { to { opacity: 0.85; } }
@keyframes cueBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(7px); opacity: 1; }
}

/* ---------- Seção de apresentação do mapa ---------- */
.pitch {
  position: relative;
  z-index: 4;
  padding: 4.5rem 5vw 4rem;
  background: linear-gradient(
    180deg,
    transparent 0,
    rgba(2, 3, 10, 0.82) 140px,
    rgba(2, 3, 10, 0.95) 100%
  );
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

.pitch-block {
  max-width: 73.75rem;
  margin: 0 auto 3.5rem;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.pitch-block:last-child { margin-bottom: 0; }

/* Textos internos com largura confortável para leitura, mas o bloco em si
   permanece alinhado nos 1180px para que todas as seções tenham mesma borda */
.pitch-block > .pitch-title { max-width: 57.5rem; }
.pitch-block > .pitch-lead  { max-width: 45rem; }
.pitch-block > .deep-list   { max-width: 57.5rem; }

/* Primeiro bloco da apresentação: texto à esquerda + mini sistema solar à direita */
.intro-pitch,
.deep-pitch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4rem;
  align-items: center;
}
.intro-pitch-text,
.deep-pitch-text { max-width: 33.75rem; }

/* ---------- Pirâmide numerológica invertida (dinâmica) ---------- */
.depth-pyramid {
  width: 32.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.6rem 1rem;
  position: relative;
}

.depth-pyramid::before,
.depth-pyramid::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 0.875rem;
  background: linear-gradient(180deg, transparent, rgba(143, 182, 255, 0.5));
}
.depth-pyramid::before { top: 0; }
.depth-pyramid::after  { bottom: 0; background: linear-gradient(0deg, transparent, rgba(255, 176, 90, 0.6)); }

.pyramid-tag,
.pyramid-base-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(143, 182, 255, 0.72);
}
.pyramid-base-label {
  color: rgba(255, 176, 90, 0.78);
}

.pyramid-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  margin: 0.4rem 0;
}

.pyramid-row {
  display: flex;
  gap: 0.375rem;
}

.pyramid-cell {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.98rem;
  font-weight: 500;
  color: rgba(220, 232, 252, 0.82);
  background: rgba(8, 12, 22, 0.5);
  border: 1px solid rgba(143, 182, 255, 0.15);
  border-radius: 0.1875rem;
  text-shadow: 0 0 8px rgba(143, 182, 255, 0.35);
  transition: color 0.5s ease, background 0.5s ease,
              border-color 0.5s ease, text-shadow 0.5s ease,
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.pyramid-cell.flash {
  color: #ffffff;
  background: rgba(143, 182, 255, 0.22);
  border-color: rgba(143, 182, 255, 0.65);
  text-shadow:
    0 0 12px rgba(143, 182, 255, 0.95),
    0 0 24px rgba(143, 182, 255, 0.55);
  transform: scale(1.12);
}

/* Última linha (a raiz / essência) — destaque dourado */
.pyramid-row.pyramid-root .pyramid-cell {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--accent-warm);
  background: rgba(255, 176, 90, 0.10);
  border-color: rgba(255, 176, 90, 0.55);
  text-shadow:
    0 0 16px rgba(255, 215, 138, 0.85),
    0 0 34px rgba(255, 176, 90, 0.5);
  animation: pyramidRootPulse 3.2s ease-in-out infinite;
}

@keyframes pyramidRootPulse {
  0%, 100% {
    text-shadow: 0 0 14px rgba(255, 215, 138, 0.7), 0 0 28px rgba(255, 176, 90, 0.4);
    box-shadow: 0 0 0 rgba(255, 176, 90, 0);
  }
  50% {
    text-shadow: 0 0 22px rgba(255, 215, 138, 1), 0 0 44px rgba(255, 176, 90, 0.7);
    box-shadow: 0 0 24px rgba(255, 176, 90, 0.25);
  }
}

.pyramid-row.pyramid-root .pyramid-cell.flash {
  transform: scale(1.18);
}

@media (max-width: 900px) {
  .intro-pitch,
  .deep-pitch {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .depth-pyramid {
    margin: 0 auto;
    width: 100%;
    max-width: 22.5rem;
  }
  .pyramid-stack { gap: 0.1875rem; }
  .pyramid-row { gap: 0.1875rem; }
  .pyramid-cell { width: 1.25rem; height: 1.25rem; font-size: 0.7rem; border-radius: 2px; }
  .pyramid-row.pyramid-root .pyramid-cell { width: 2.125rem; height: 2.125rem; font-size: 1.05rem; }
}

/* ---------- Mini sistema solar ---------- */
.mini-solar {
  position: relative;
  width: 25rem;
  height: 25rem;
  flex-shrink: 0;
}

.mini-solar .sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.375rem;
  height: 2.375rem;
  margin: -1.1875rem 0 0 -1.1875rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d6 0%, #ffd58a 45%, #ffb05a 100%);
  box-shadow:
    0 0 22px rgba(255, 215, 138, 0.85),
    0 0 60px rgba(255, 176, 90, 0.55),
    0 0 120px rgba(255, 176, 90, 0.22);
  z-index: 2;
  animation: solarSunPulse 4.2s ease-in-out infinite;
}

@keyframes solarSunPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.92; }
}

.mini-solar .orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(143, 182, 255, 0.42);
  border-radius: 50%;
  animation: solarOrbitSpin linear infinite;
}

.mini-solar .orbit-1 { width: 5.5rem;  height: 5.5rem;  margin: -2.75rem  0 0 -2.75rem;  animation-duration: 6s;  }
.mini-solar .orbit-2 { width: 9.25rem; height: 9.25rem; margin: -4.625rem  0 0 -4.625rem;  animation-duration: 10s; animation-direction: reverse; }
.mini-solar .orbit-3 { width: 13.4375rem; height: 13.4375rem; margin: -6.7188rem 0 0 -6.7188rem; animation-duration: 16s; }
.mini-solar .orbit-4 { width: 18.125rem; height: 18.125rem; margin: -9.0625rem 0 0 -9.0625rem; animation-duration: 24s; animation-direction: reverse; }
.mini-solar .orbit-5 { width: 23.5rem; height: 23.5rem; margin: -11.75rem 0 0 -11.75rem; animation-duration: 36s; }

@keyframes solarOrbitSpin {
  to { transform: rotate(360deg); }
}

.mini-solar .planet {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  background: white;
}

.mini-solar .planet-1 {
  width: 0.375rem; height: 0.375rem; top: -0.1875rem; margin-left: -0.1875rem;
  background: #ffd58a;
  box-shadow: 0 0 7px rgba(255, 215, 138, 0.85);
}
.mini-solar .planet-2 {
  width: 0.5625rem; height: 0.5625rem; top: -0.2812rem; margin-left: -0.2812rem;
  background: #f5e8c8;
  box-shadow: 0 0 10px rgba(245, 232, 200, 0.7);
}
.mini-solar .planet-3 {
  width: 0.6875rem; height: 0.6875rem; top: -0.3438rem; margin-left: -0.3438rem;
  background: radial-gradient(circle at 35% 35%, #8fb6ff, #2a4a8a);
  box-shadow: 0 0 12px rgba(143, 182, 255, 0.7);
}
.mini-solar .planet-4 {
  width: 0.5625rem; height: 0.5625rem; top: -0.2812rem; margin-left: -0.2812rem;
  background: #ff7a4a;
  box-shadow: 0 0 11px rgba(255, 122, 74, 0.65);
}
.mini-solar .planet-5 {
  width: 1rem; height: 1rem; top: -0.5rem; margin-left: -0.5rem;
  background: radial-gradient(circle at 35% 35%, #d4b890, #8a6a4a);
  box-shadow: 0 0 15px rgba(212, 184, 144, 0.6);
}

/* Mobile: empilha o solar abaixo do texto e reduz um pouco */
@media (max-width: 900px) {
  .intro-pitch {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 57.5rem;
  }
  .mini-solar {
    margin: 0 auto;
    width: 20.3125rem;
    height: 20.3125rem;
  }
  .mini-solar .orbit-5 { width: 18.75rem; height: 18.75rem; margin: -9.375rem 0 0 -9.375rem; }
  .mini-solar .orbit-4 { width: 14.875rem; height: 14.875rem; margin: -7.4375rem 0 0 -7.4375rem; }
  .mini-solar .orbit-3 { width: 11.125rem; height: 11.125rem; margin: -5.5625rem 0 0 -5.5625rem; }
  .mini-solar .orbit-2 { width: 7.625rem; height: 7.625rem; margin: -3.8125rem 0 0 -3.8125rem; }
  .mini-solar .orbit-1 { width: 4.5rem;  height: 4.5rem;  margin: -2.25rem 0 0 -2.25rem; }
}
.pitch-block.in-view {
  opacity: 1;
  transform: translateY(0);
}

.pitch-tag {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: 1rem;
  opacity: 0.85;
}

.pitch-title {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(120deg, #ffffff 0%, #d8e3f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 50px rgba(143, 182, 255, 0.18);
  margin-bottom: 1.4rem;
}
.pitch-title.big {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  background: linear-gradient(120deg, #ffe7b8 0%, #ffb05a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 60px rgba(255, 176, 90, 0.3);
}

.pitch-lead {
  font-size: 1.05rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(220, 232, 252, 0.92);
  max-width: 42.5rem;
  margin-bottom: 1rem;
}
.pitch-lead.muted {
  color: var(--text-dim);
  font-style: italic;
}
.pitch-lead strong {
  color: var(--gold);
  font-weight: 500;
}

/* Pilares como faixas horizontais — superfície do planeta entrando pela esquerda */
.pillars {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 2.4rem;
}
.pillar {
  position: relative;
  display: flex;
  align-items: center;
  /* padding-left maior pra acomodar a curva da superfície */
  padding: 1.8rem 2.2rem 1.8rem 11.25rem;
  min-height: 10.625rem;
  background: rgba(18, 12, 34, 0.55);
  border: 1px solid rgba(176, 140, 255, 0.34);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease, background 0.35s ease;
}
.pillar:hover {
  border-color: rgba(176, 140, 255, 0.5);
  background: rgba(26, 16, 44, 0.72);
  transform: translateX(4px);
}

/* Planeta posicionado mais à esquerda do card; overflow hidden do .pillar
   recorta a esfera, deixando aparecer só a curva da superfície (formato de lua) */
.pillar-planet {
  position: absolute;
  top: 50%;
  left: -11.25rem;
  transform: translateY(-50%);
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Limb darkening (escurece sutilmente as bordas para dar profundidade esférica) */
.pillar-planet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 45%, transparent 50%, rgba(0,0,0,0.25) 85%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

.pillar-body { flex: 1; min-width: 0; }

.pillar-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.6rem;
}
.pillar h3 {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.pillar p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(220, 232, 252, 0.78);
  max-width: 45rem;
}

/* ===== Temas planetários — só backgrounds, geometria igual em todos ===== */

/* 01 — SOL (textura NASA SDO via Wikipedia, fallback gradiente) */
.pillar.pillar-sol .pillar-planet {
  background-image:
    url("https://upload.wikimedia.org/wikipedia/commons/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg"),
    radial-gradient(circle at 60% 50%, #fff7d6 0%, #ffd58a 30%, #ffb05a 65%, #c4640e 100%);
  box-shadow:
    0 0 80px rgba(255, 176, 90, 0.55),
    0 0 160px rgba(255, 176, 90, 0.25);
  animation: pillarSunPulse 4s ease-in-out infinite;
}
@keyframes pillarSunPulse {
  0%, 100% { box-shadow: 0 0 70px rgba(255,176,90,0.45), 0 0 140px rgba(255,176,90,0.2); }
  50%      { box-shadow: 0 0 100px rgba(255,176,90,0.65), 0 0 180px rgba(255,176,90,0.3); }
}
/* Sol é estrela — não tem lado escuro; suaviza o limb darkening */
.pillar.pillar-sol .pillar-planet::after {
  background: radial-gradient(circle at 60% 45%, transparent 75%, rgba(255, 90, 20, 0.18) 95%, rgba(255, 90, 20, 0.3) 100%);
}
.pillar.pillar-sol .pillar-num { color: #ffd58a; }

/* 02 — MERCÚRIO */
.pillar.pillar-mercurio .pillar-planet {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_mercury.jpg"),
    radial-gradient(circle at 60% 50%, #d8d2c6 0%, #908880 55%, #4a4540 100%);
}
.pillar.pillar-mercurio .pillar-num { color: #c8c2b8; }

/* 03 — VÊNUS */
.pillar.pillar-venus .pillar-planet {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_venus_atmosphere.jpg"),
    radial-gradient(circle at 60% 50%, #f8dfa8 0%, #c48a48 55%, #6a3a10 100%);
}
.pillar.pillar-venus .pillar-num { color: #f5dca0; }

/* 04 — TERRA */
.pillar.pillar-terra .pillar-planet {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_earth_daymap.jpg"),
    radial-gradient(circle at 60% 50%, #6fb4e0 0%, #2a5a8a 55%, #061a3a 100%);
}
.pillar.pillar-terra .pillar-num { color: #6ad4ff; }

/* 05 — MARTE */
.pillar.pillar-marte .pillar-planet {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_mars.jpg"),
    radial-gradient(circle at 60% 50%, #e08560 0%, #a04020 50%, #4a1808 100%);
}
.pillar.pillar-marte .pillar-num { color: #ff8a5a; }

/* 06 — JÚPITER */
.pillar.pillar-jupiter .pillar-planet {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_jupiter.jpg"),
    radial-gradient(circle at 60% 50%, #f0c890 0%, #b87838 55%, #5a2c0c 100%);
}
.pillar.pillar-jupiter .pillar-num { color: #e8c098; }

/* 07 — SATURNO (com anel atravessando o card) */
.pillar.pillar-saturno .pillar-planet {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_saturn.jpg"),
    radial-gradient(circle at 60% 50%, #f4dca0 0%, #b48848 55%, #5a3408 100%);
}
.pillar.pillar-saturno .pillar-planet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 1.375rem;
  margin: -0.6875rem 0 0 -100%;
  border-radius: 50%;
  background: transparent;
  border-top: 2px solid rgba(220, 200, 160, 0.6);
  border-bottom: 2px solid rgba(220, 200, 160, 0.35);
  transform: rotate(-18deg);
  box-shadow: 0 0 14px rgba(220, 200, 160, 0.3);
  z-index: 2; /* fica acima do limb darkening (::after) */
}
.pillar.pillar-saturno .pillar-num { color: #e8d4a0; }

/* 08 — URANO */
.pillar.pillar-urano .pillar-planet {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_uranus.jpg"),
    radial-gradient(circle at 60% 50%, #c8e8f0 0%, #5a90a4 55%, #1c4858 100%);
}
.pillar.pillar-urano .pillar-num { color: #b8e0e8; }

/* 09 — NETUNO (azul profundo, kármico) */
.pillar.pillar-netuno .pillar-planet {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_neptune.jpg"),
    radial-gradient(circle at 60% 50%, #6a9cf0 0%, #2050b8 55%, #081a4a 100%);
}
.pillar.pillar-netuno .pillar-num { color: #6a9cf0; }

/* Mobile: padding e planeta reduzidos */
@media (max-width: 700px) {
  .pillar {
    padding: 1.5rem 1.4rem 1.5rem 8.125rem;
    min-height: 8.75rem;
  }
  .pillar-planet {
    width: 12.5rem;
    height: 12.5rem;
    left: -10rem;
  }
  .pillar.pillar-saturno .pillar-planet::before {
    width: 180%; margin-left: -90%;
  }
  .pillar p { max-width: none; }
}

/* Lista das camadas profundas */
.deep-list {
  list-style: none;
  margin-top: 2rem;
}
.deep-list li {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.9rem;
  border-bottom: 1px solid rgba(143, 182, 255, 0.12);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(220, 232, 252, 0.85);
}
.deep-list li:last-child { border-bottom: none; }
.deep-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 1.2rem;
  color: var(--accent-warm);
  opacity: 0.75;
  font-size: 0.82rem;
}
.deep-list strong {
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Grade de entrega */
.delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.3rem;
  margin-top: 2.4rem;
}
.deliver {
  text-align: center;
  padding: 1.9rem 1.2rem;
  border: 1px solid rgba(143, 182, 255, 0.18);
  border-radius: 0.375rem;
  background: rgba(8, 12, 22, 0.55);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.deliver:hover {
  border-color: rgba(255, 176, 90, 0.4);
  transform: translateY(-3px);
}
.deliver-icon {
  display: block;
  font-size: 1.7rem;
  color: var(--accent-warm);
  margin-bottom: 0.9rem;
  text-shadow: 0 0 18px rgba(255, 176, 90, 0.55);
}
.deliver h4 {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  color: var(--text);
}
.deliver p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(220, 232, 252, 0.72);
}

/* ===== Seção de embarque / inscrição ===== */
.embark-block {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 6rem 2rem 5rem;
  margin-bottom: 0 !important;
}

/* Gradiente de fundo profundo */
.embark-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 25%, rgba(25, 45, 100, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 15% 75%, rgba(18, 35, 75, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 85% 80%, rgba(60, 35, 10, 0.2) 0%, transparent 55%);
  pointer-events: none;
}

/* Linha separadora no topo */
.embark-block::after {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 182, 255, 0.3) 40%, rgba(255, 176, 90, 0.2) 60%, transparent);
}

/* ---------- Grid de duas colunas: nave + form ---------- */
.embark-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 73.75rem;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .embark-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
}

/* ---------- Ilustração da nave ---------- */
.embark-rocket-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.rocket-illustration {
  width: 100%;
  max-width: 26.25rem;
  max-height: 78vh;
  height: auto;
  filter: drop-shadow(0 0 35px rgba(255, 176, 90, 0.18));
}

/* Sutil bob vertical do corpo do foguete (vibração antes do lançamento) */
@keyframes rocket-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.rocket-body {
  animation: rocket-bob 3.2s ease-in-out infinite;
  transform-origin: 200px 580px;
  transform-box: fill-box;
}

/* Cintilação das chamas */
@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1)    scaleX(1);    opacity: 0.95; }
  25%      { transform: scaleY(1.18) scaleX(0.90); opacity: 1; }
  50%      { transform: scaleY(0.90) scaleX(1.08); opacity: 0.92; }
  75%      { transform: scaleY(1.08) scaleX(0.95); opacity: 1; }
}
.flame-outer,
.flame-middle,
.flame-core {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}
.flame-outer  { animation: flame-flicker 0.55s linear infinite; }
.flame-middle { animation: flame-flicker 0.42s linear infinite reverse; }
.flame-core   { animation: flame-flicker 0.30s linear infinite; }

/* Fumaça subindo e dissolvendo */
@keyframes smoke-rise {
  0%   { transform: translateY(0) scale(1);     opacity: 0.7; }
  100% { transform: translateY(-50px) scale(1.7); opacity: 0;   }
}
.smoke-puff {
  transform-box: fill-box;
  transform-origin: center center;
  animation: smoke-rise 3.5s ease-out infinite;
}
.smoke-1 { animation-delay: 0s;   }
.smoke-2 { animation-delay: 0.5s; }
.smoke-3 { animation-delay: 1.0s; }
.smoke-4 { animation-delay: 1.7s; }
.smoke-5 { animation-delay: 2.3s; }
.smoke-6 { animation-delay: 2.8s; }

/* Estrelas cintilando */
@keyframes star-twinkle {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 0.25; }
}
.rocket-stars circle {
  animation: star-twinkle 3s ease-in-out infinite;
}
.rocket-stars circle:nth-child(3n)   { animation-duration: 4.5s; animation-delay: 0.6s; }
.rocket-stars circle:nth-child(3n+1) { animation-duration: 2.8s; animation-delay: 1.2s; }

/* ---------- Conteúdo / form ---------- */
.embark-content {
  position: relative;
  z-index: 1;
  max-width: 36.25rem;
  width: 100%;
}

@media (max-width: 900px) {
  .embark-content {
    margin: 0 auto;
  }
}

.embark-title {
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.1;
  margin: 0.6rem 0 1.3rem;
  text-shadow:
    0 0 40px rgba(255,213,138,0.4),
    0 0 90px rgba(255,176,90,0.18);
}

.embark-sub {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(220,232,252,0.68);
  margin-bottom: 2.6rem;
}

/* ---------- Formulário ---------- */
.embark-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.embark-fields {
  display: flex;
  gap: 0.7rem;
  width: 100%;
}

.embark-input {
  flex: 1;
  padding: 0.88rem 1.1rem;
  background: rgba(236, 240, 250, 0.12);
  border: 1px solid rgba(190, 208, 245, 0.45);
  border-radius: 0.375rem;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  outline: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.embark-input::placeholder { color: rgba(222, 230, 246, 0.58); }
.embark-input:focus {
  background: rgba(236, 240, 250, 0.18);
  border-color: rgba(190, 208, 245, 0.7);
  box-shadow: 0 0 0 3px rgba(143,182,255,0.15);
}

/* Opt-in da newsletter — checkbox custom que combina com o botão dourado */
.embark-optin {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-dim);
  text-align: left;
  margin-top: -0.2rem;
}
.embark-optin input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.embark-optin-box {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 1px;
  border: 1px solid rgba(190, 208, 245, 0.45);
  border-radius: 0.25rem;
  background: rgba(236, 240, 250, 0.1);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.embark-optin:hover .embark-optin-box { border-color: rgba(190, 208, 245, 0.75); }
.embark-optin input:checked + .embark-optin-box {
  background: var(--gold);
  border-color: var(--gold);
}
.embark-optin input:checked + .embark-optin-box::after {
  content: "";
  position: absolute;
  left: 0.3438rem;
  top: 1.5px;
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid #08090f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.embark-optin input:focus-visible + .embark-optin-box {
  box-shadow: 0 0 0 3px rgba(143, 182, 255, 0.22);
}

.embark-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 2.6rem;
  background: var(--gold);
  color: #08090f;
  border: none;
  border-radius: 0.375rem;
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 28px rgba(255,213,138,0.35),
    0 0 70px rgba(255,213,138,0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.embark-btn:hover {
  background: #ffe8a8;
  transform: translateY(-2px);
  box-shadow:
    0 0 38px rgba(255,213,138,0.5),
    0 0 100px rgba(255,213,138,0.22);
}
.embark-btn:active { transform: translateY(0); }

.embark-btn-star {
  font-size: 0.72rem;
  opacity: 0.75;
}

.embark-fine {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: rgba(210, 220, 242, 0.62);
  line-height: 1.45;
}

/* Preço promocional de lançamento — fonte serifada (Cormorant), discreta */
.embark-promo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(200, 212, 235, 0.6);
  text-align: center;
  margin-top: 0.05rem;
}
.embark-promo-tag {
  display: block;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 176, 90, 0.68);
  margin-bottom: 0.05rem;
}
.embark-promo s {
  color: rgba(180, 195, 225, 0.4);
  text-decoration-thickness: 1px;
}
.embark-promo strong {
  font-weight: 600;
  font-size: 1.05em;
  color: rgba(255, 213, 138, 0.85);
}

/* ---------- Estado de sucesso ---------- */
.embark-thanks {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  animation: fadeInUp 0.6s ease forwards;
}
.embark-thanks[aria-hidden="false"] { display: flex; }

.embark-thanks-star {
  font-size: 2.2rem;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255,213,138,0.65), 0 0 60px rgba(255,213,138,0.25);
  animation: pulse 2.5s ease-in-out infinite;
}
.embark-thanks-title {
  font-family: "Chakra Petch", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.embark-thanks-sub {
  font-size: 0.95rem;
  color: rgba(220,232,252,0.62);
  line-height: 1.65;
}

/* Link de validação visível apenas no modo dev (mock magic-link) */
.embark-dev-link {
  margin-top: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  background: rgba(143, 182, 255, 0.08);
  border: 1px dashed rgba(143, 182, 255, 0.35);
  border-radius: 0.25rem;
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.embark-dev-link:hover {
  background: rgba(143, 182, 255, 0.15);
  border-color: rgba(143, 182, 255, 0.6);
}
.embark-dev-link .dev-tag {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm);
  padding: 0.2rem 0.5rem;
  background: rgba(255, 176, 90, 0.12);
  border-radius: 2px;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 700px) {
  .embark-fields { flex-direction: column; }
  .embark-title  { font-size: 2rem; }
  #epw-neptune   { display: none; }
  #epw-jupiter canvas { width: 6.875rem !important; height: 6.875rem !important; }
  #epw-saturn  canvas { width: 5rem  !important; height: 5rem  !important; }
  #epw-earth   canvas { width: 3.4375rem  !important; height: 3.4375rem  !important; }
  #epw-mars    canvas { width: 2.5rem  !important; height: 2.5rem  !important; }
}

/* CTA final (legado) */
.cta-block {
  text-align: center;
  padding-top: 2rem;
}
.cta-block .pitch-lead {
  margin-left: auto;
  margin-right: auto;
}
.pitch-cta {
  margin-top: 2rem;
}

/* ---------- Editor de textos ---------- */
.editor-toggle {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background: rgba(8, 12, 22, 0.78);
  border: 1px solid rgba(143, 182, 255, 0.32);
  color: rgba(220, 232, 252, 0.75);
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
  z-index: 200;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.editor-toggle:hover {
  background: rgba(8, 12, 22, 0.95);
  border-color: var(--accent);
  color: white;
  transform: scale(1.08);
}
body.editing .editor-toggle {
  background: var(--accent-warm);
  color: #1a1208;
  border-color: var(--accent-warm);
  box-shadow: 0 6px 24px rgba(255, 176, 90, 0.5);
}

.editor-bar {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-160%);
  z-index: 200;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.65rem 1rem;
  background: rgba(8, 12, 22, 0.94);
  border: 1px solid rgba(143, 182, 255, 0.3);
  border-radius: 0.375rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 0.45s cubic-bezier(0.2, 0.65, 0.3, 1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  max-width: 94vw;
  flex-wrap: wrap;
  justify-content: center;
}
body.editing .editor-bar {
  transform: translateX(-50%) translateY(0);
}

.editor-label {
  color: var(--accent-warm);
  font-weight: 600;
  padding-right: 0.8rem;
  border-right: 1px solid rgba(143, 182, 255, 0.18);
}
.editor-hint {
  color: var(--text-dim);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: none;
  padding-right: 0.4rem;
}
.editor-btn {
  background: transparent;
  border: 1px solid rgba(143, 182, 255, 0.3);
  color: var(--text);
  padding: 0.45rem 0.95rem;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.editor-btn:hover {
  background: rgba(143, 182, 255, 0.15);
  border-color: var(--accent);
  color: white;
}
.editor-btn.ghost {
  border-color: rgba(143, 182, 255, 0.18);
  color: var(--text-dim);
}
.editor-btn:not(.ghost) {
  background: rgba(255, 176, 90, 0.12);
  border-color: rgba(255, 176, 90, 0.6);
  color: var(--accent-warm);
}
.editor-btn:not(.ghost):hover {
  background: var(--accent-warm);
  color: #1a1208;
}

/* Quando o modo edição está ativo, todos os elementos editáveis ganham
   contorno e cursor de texto. Pointer-events religados onde necessário. */
body.editing .welcome-block,
body.editing .pitch-block,
body.editing [contenteditable="true"] {
  pointer-events: auto;
}

body.editing [contenteditable="true"] {
  outline: 1px dashed rgba(255, 176, 90, 0.45);
  outline-offset: 5px;
  cursor: text;
  border-radius: 2px;
  transition: outline-color 0.2s ease, background 0.2s ease;
}
body.editing [contenteditable="true"]:hover {
  outline-color: rgba(255, 176, 90, 0.85);
  background: rgba(255, 176, 90, 0.05);
}
body.editing [contenteditable="true"]:focus {
  outline: 2px solid var(--accent-warm);
  outline-offset: 5px;
  background: rgba(255, 176, 90, 0.08);
}

/* Desabilita autoplay e navegação por links durante edição */
body.editing .hero-cta,
body.editing .pitch-cta {
  cursor: default;
}

@media (max-width: 700px) {
  .editor-toggle { bottom: 0.8rem; right: 0.8rem; width: 2.375rem; height: 2.375rem; }
  .editor-bar { font-size: 0.6rem; padding: 0.5rem 0.6rem; gap: 0.5rem; }
  .editor-hint { display: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 700px) {
  .content { padding: 5rem 1.5rem 6rem; }
  .welcome-block { margin-bottom: 2.4rem; }
  .form { gap: 1.6rem; }
  .hint { bottom: 1rem; padding: 0 1rem; text-align: center; }
  .hud-bottom { font-size: 0.62rem; padding: 0 1rem; }
  .pitch { padding: 3rem 1.5rem 2.5rem; }
  .pitch-block { margin-bottom: 3rem; }
  .pillars, .delivery-grid { gap: 1rem; }
  .scroll-cue { font-size: 0.55rem; }
}

/* ====== HERO MOBILE — planeta menor/centralizado, título acima, texto+CTA
   abaixo, vértices visíveis (sem números nem trilha lateral) ====== */
@media (max-width: 700px) {
  /* Planeta (iframe): quadrado centralizado que cabe inteiro na tela.
     A Terra ocupa ~69% da ALTURA do iframe (FOV vertical fixo de 38°), então
     um quadrado de lado L mostra a Terra com diâmetro ~0.69·L, centralizada.
     A máscara radial desfaz as quinas do iframe (funde no fundo, sem emenda
     nem "borrão" lateral). */
  #planet-frame {
    /* Quadrado por vw puro: NÃO usa vh (que oscila no iOS quando a barra de
       endereço aparece/some, fazendo o planeta "pular" de tamanho). */
    width: 99vw;   /* raio +15% (era 86vw) */
    height: 99vw;
    left: 48%;   /* leve nudge p/ esquerda: compensa o peso do lado iluminado */
    top: 44%;    /* mais pra cima (era 50%) */
    transform: translate(-50%, -50%);
    -webkit-mask: radial-gradient(closest-side circle, #000 78%, transparent 100%);
    mask: radial-gradient(closest-side circle, #000 78%, transparent 100%);
  }

  /* Some o backdrop lilás borrado da direita (o "borrão lateral") */
  .content::before { display: none; }

  /* Vértices de volta, sobre o planeta. Vértices em r=60 no viewBox 200 (60%
     do SVG); Terra = 0.69·L → SVG = L·0.69/0.60 ≈ L·1.15 alinha à borda.
     O autoplay (main.js) cicla as formas; trilha e card de número seguem
     escondidos no mobile, então aparece só a forma sobre o planeta. */
  .planet-shape-svg {
    display: block;
    left: 48%;   /* acompanha o nudge do planeta p/ os vértices ficarem alinhados */
    top: 44%;    /* acompanha a subida do planeta */
    width: calc(99vw * 1.15);
    height: calc(99vw * 1.15);
  }

  /* "ASTRUN // " some da tag — fica só "NUMEROLOGIA // AUTOCONHECIMENTO" */
  .welcome-tag .tag-pre { display: none; }

  /* Hero em coluna de tela cheia: cabeça (tag+título) no topo, pé (texto+CTA)
     levantado, planeta fixo no meio. O padding-bottom grande puxa o texto/CTA
     pra dentro da tela (pode encostar no planeta — ok) e garante o botão
     visível mesmo com a barra de endereço do Safari. */
  .content.hero {
    align-items: stretch;
    text-align: center;
    justify-content: flex-start;
    padding: 4rem 1.4rem 17vh;
  }
  .content.hero .welcome-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: none;
    width: 100%;
    margin: 0;
  }
  .content.hero .scroll-cue { display: none; }

  /* Leve escurecido atrás do texto inferior pra leitura sobre o planeta. */
  .welcome-foot { position: relative; }
  .welcome-foot::before {
    content: "";
    position: absolute;
    inset: -1.2rem -1rem -1.6rem;
    background: radial-gradient(115% 100% at 50% 58%, rgba(2, 3, 10, 0.85) 0%, rgba(2, 3, 10, 0.5) 48%, transparent 80%);
    z-index: -1;
    pointer-events: none;
  }

  /* Sem texto descritivo no mobile; o título desce pra perto do botão. */
  .content.hero .welcome-sub { display: none; }
  .content.hero .welcome { margin-bottom: 0; }
  .content.hero .hero-cta { margin-top: 1.3rem; }
}

@media (max-height: 700px) {
  .content { justify-content: flex-start; padding-top: 7rem; }
  .welcome-block { margin-bottom: 1.8rem; }
}

/* Mensagem do formulário de embarque (ex.: email já cadastrado) */
.embark-error {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: #ffb38a;
  line-height: 1.5;
}
.embark-error a {
  color: var(--accent-warm, #ffb05a);
  font-weight: 600;
  text-decoration: underline;
}
.embark-error[hidden] { display: none; }