/*
 * astral.tec.br: o site do Astral.
 * Cores, fontes e céu vêm do design system Semente (src/index.css e docs/design-system-semente.md).
 * Sem JavaScript: a única animação é a Semente se desenhando no início.
 */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/manrope-latin-wght-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cinzel-latin-500-normal.woff2) format('woff2');
}

/* Tema cosmic (o do app). */
:root {
  color-scheme: dark;
  --background: 230 25% 7%;
  --foreground: 220 15% 95%;
  --muted: 220 10% 64%;
  --primary: 45 95% 58%;
  --gold-text: 45 95% 65%;
  --gold-deep: 35 90% 55%;
  --gold-light: 55 85% 60%;
  --on-gold: 230 25% 7%;
  --surface: 230 25% 10%;
  --cosmic-purple: 265 55% 45%;
  --cosmic-blue: 220 75% 45%;
  --nebula-pink: 330 65% 55%;
  --sky: url(/img/sky-dark.svg);
  --nebula: 1;

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-caps: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Tema claro (o pergaminho do app). */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: 40 35% 96%;
    --foreground: 235 35% 14%;
    --muted: 235 18% 38%;
    --primary: 38 92% 42%;
    --gold-text: 35 90% 30%;
    --gold-deep: 35 90% 48%;
    --gold-light: 55 80% 52%;
    --on-gold: 235 35% 14%;
    --surface: 40 40% 99%;
    --cosmic-purple: 265 50% 50%;
    --cosmic-blue: 220 70% 48%;
    --sky: url(/img/sky-light.svg);
    --nebula: 0.3;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* O céu fica parado atrás da página: estrelas do app (seed 21) e as quatro manchas de nébula. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--sky) center / cover no-repeat,
    radial-gradient(70% 38% at 88% 4%, hsl(var(--cosmic-purple) / calc(0.5 * var(--nebula))), transparent 70%),
    radial-gradient(60% 30% at 0% 26%, hsl(var(--cosmic-blue) / calc(0.32 * var(--nebula))), transparent 70%),
    radial-gradient(55% 26% at 78% 48%, hsl(var(--nebula-pink) / calc(0.14 * var(--nebula))), transparent 70%),
    radial-gradient(70% 30% at 20% 88%, hsl(var(--cosmic-purple) / calc(0.26 * var(--nebula))), transparent 70%),
    hsl(var(--background));
}

/* Nas páginas de leitura o céu fica mais calmo, para as estrelas não parecerem pontuação. */
.page-doc::before {
  opacity: 0.5;
}

::selection {
  background: hsl(var(--primary) / 0.32);
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Guarda o gradiente e o símbolo da Semente (display: none quebraria o gradiente). */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--on-gold));
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

.wrap {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
}
@media (min-width: 720px) {
  .wrap {
    width: min(100% - 64px, 1120px);
  }
}

/* ---------- Cabeçalho ---------- */

.site-header {
  padding-block: 20px;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 8px;
}
.brand-mark {
  width: 32px;
  height: 32px;
  flex: none;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(120deg, hsl(var(--gold-deep)), hsl(var(--primary)) 50%, hsl(var(--gold-light)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 2px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  font-size: 15px;
  font-weight: 500;
  color: hsl(var(--foreground) / 0.78);
  text-decoration: none;
  transition: color 120ms ease;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: hsl(var(--gold-text));
}
@media (max-width: 419px) {
  .site-nav ul {
    gap: 4px 16px;
  }
  .site-nav .nav-extra {
    display: none;
  }
}

/* Ícone da marca (Semente em linha), usado no cabeçalho e no rodapé. */
.semente-squares {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-opacity: 0.45;
}
.semente-arc {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.semente-dot {
  fill: hsl(var(--gold-light));
}
.stop-deep {
  stop-color: hsl(var(--gold-deep));
}
.stop-mid {
  stop-color: hsl(var(--primary));
}
.stop-light {
  stop-color: hsl(var(--gold-light));
}

/* ---------- Início ---------- */

.hero {
  padding-block: clamp(8px, 5vw, 64px) clamp(32px, 5vw, 56px);
}
.hero .wrap {
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 56px;
  }
}

.hero-text {
  max-width: 620px;
}
.hero h1 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero .lead {
  margin: 0 0 32px;
  max-width: 36em;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: hsl(var(--foreground) / 0.82);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.button-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(120deg, hsl(var(--gold-deep)), hsl(var(--primary)) 55%, hsl(var(--gold-light)));
  color: hsl(var(--on-gold));
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 32px -14px hsl(var(--primary) / 0.7);
  transition: filter 120ms ease;
}
.button-gold:hover {
  filter: brightness(1.06);
}
.store-note {
  margin: 0;
  font-size: 15px;
  color: hsl(var(--muted));
}
.link-quiet {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground) / 0.85);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: hsl(var(--primary) / 0.45);
}
.link-quiet:hover {
  color: hsl(var(--gold-text));
}

/* A Semente dentro do círculo do zodíaco: desenha-se uma vez e termina no ponto. */
.hero-mark {
  width: min(80vw, 400px);
  justify-self: center;
  order: -1;
  overflow: visible;
}
@media (min-width: 960px) {
  .hero-mark {
    width: 100%;
    max-width: 540px;
    order: 0;
  }
}
.hm-ring {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-opacity: 0.4;
  stroke-width: 0.2;
}
.hm-ticks {
  stroke: hsl(var(--primary));
  stroke-width: 0.2;
  stroke-linecap: round;
  stroke-opacity: 0.55;
}
.hm-ticks .hm-angle {
  stroke-opacity: 0.85;
}
.hm-squares {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 0.16;
  stroke-opacity: 0.5;
}
.hm-spiral {
  fill: none;
  stroke-width: 0.44;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hm-seed {
  fill: hsl(var(--gold-light));
}
.hm-glow-stop-in {
  stop-color: hsl(var(--gold-light));
  stop-opacity: 0.75;
}
.hm-glow-stop-mid {
  stop-color: hsl(var(--primary));
  stop-opacity: 0.22;
}
.hm-glow-stop-out {
  stop-color: hsl(var(--primary));
  stop-opacity: 0;
}
@media (prefers-color-scheme: light) {
  .hm-ring {
    stroke-opacity: 0.55;
  }
  .hm-squares {
    stroke-opacity: 0.65;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hm-ring,
  .hm-spiral {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .hm-ring {
    animation: draw 1.6s var(--ease) 0.1s forwards;
  }
  .hm-ticks {
    opacity: 0;
    animation: appear 0.9s ease 1s forwards;
  }
  .hm-squares {
    opacity: 0;
    animation: appear 1.2s ease 0.4s forwards;
  }
  .hm-spiral {
    animation: draw 2.4s cubic-bezier(0.55, 0, 0.3, 1) 0.5s forwards;
  }
  .hm-seed {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: seed 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 2.75s forwards;
  }
  .hm-glow {
    opacity: 0;
    animation: appear 1.6s ease-out 2.8s forwards;
  }
}

@keyframes draw {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
@keyframes appear {
  to {
    opacity: 1;
  }
}
@keyframes seed {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* O que tem no app: uma tábua de efemérides, um astro por linha. */
.section {
  padding-block: clamp(48px, 7vw, 96px);
}
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.section-intro {
  margin: 12px 0 0;
  max-width: 40em;
  color: hsl(var(--foreground) / 0.8);
}

.almanac {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid hsl(var(--primary) / 0.16);
}
.almanac li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 4px 20px;
  align-items: center;
  padding-block: 26px;
  border-top: 1px solid hsl(var(--primary) / 0.16);
}
.almanac .astro {
  grid-row: span 2;
  justify-self: center;
}
/* Cada astro tem um halo diferente; as margens deixam o disco com 64 px de altura útil. */
.almanac .astro-sun {
  margin-block: -16.5px;
}
.almanac .astro-moon {
  margin-block: -4px;
}
.almanac .astro-mercury {
  margin-block: -8px;
}
.almanac h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
}
.almanac p {
  margin: 0;
  color: hsl(var(--foreground) / 0.8);
}
@media (min-width: 760px) {
  .almanac li {
    grid-template-columns: 120px minmax(0, 15rem) minmax(0, 1fr);
    gap: 32px;
    padding-block: 30px;
  }
  .almanac .astro {
    grid-row: auto;
  }
  .almanac h3 {
    font-size: 32px;
  }
}

.plans {
  margin: 28px 0 0;
  max-width: 40em;
  color: hsl(var(--muted));
  font-size: 16px;
}

.note {
  max-width: 40em;
}
.note p {
  margin: 16px 0 0;
  color: hsl(var(--foreground) / 0.82);
}
.note a,
.prose a,
.site-footer a.inline {
  color: hsl(var(--gold-text));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--gold-text) / 0.45);
}
.note a:hover,
.prose a:hover,
.site-footer a.inline:hover {
  text-decoration-color: currentColor;
}

/* ---------- Páginas de texto (privacidade, termos, suporte, conta) ---------- */

.doc {
  padding-block: clamp(20px, 5vw, 56px) clamp(48px, 7vw, 88px);
}
.doc-head {
  max-width: 46rem;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.doc-head h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.doc-meta {
  margin: 0;
  font-size: 15px;
  color: hsl(var(--muted));
}
.doc-lead {
  margin: 20px 0 0;
  font-size: clamp(17px, 1.4vw, 19px);
  color: hsl(var(--foreground) / 0.85);
}

.doc-layout {
  display: grid;
  gap: 28px;
}
@media (min-width: 1024px) {
  .doc-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }
}

/* Índice: lista fixa ao lado no computador, gaveta no celular. */
.toc-desktop {
  display: none;
}
@media (min-width: 1024px) {
  .toc-desktop {
    display: block;
    position: sticky;
    top: 28px;
  }
  .toc-mobile {
    display: none;
  }
}
.toc-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--muted));
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc li {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  gap: 6px;
  padding-block: 5px;
  font-size: 14px;
  line-height: 1.4;
}
.toc .num {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: hsl(var(--gold-text));
  padding-top: 2px;
}
.toc a {
  color: hsl(var(--foreground) / 0.78);
  text-decoration: none;
}
.toc a:hover {
  color: hsl(var(--gold-text));
}
.toc-mobile {
  border: 1px solid hsl(var(--primary) / 0.2);
  border-radius: 18px;
  background: hsl(var(--surface) / 0.55);
}
.toc-mobile summary {
  position: relative;
  padding: 14px 44px 14px 18px;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.toc-mobile summary::-webkit-details-marker {
  display: none;
}
.toc-mobile ol {
  padding: 0 18px 14px;
}

.prose {
  max-width: 68ch;
}
.prose > :first-child {
  margin-top: 0;
}
.prose h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 56px 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, 3vw, 33px);
  line-height: 1.15;
  scroll-margin-top: 24px;
}
.prose h2 .num {
  flex: none;
  min-width: 2em;
  font-family: var(--font-caps);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: hsl(var(--gold-text));
}
.prose h3 {
  margin: 32px 0 10px;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 16px;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li {
  margin-bottom: 8px;
}
.prose li::marker {
  color: hsl(var(--primary));
}
.prose ol li::marker {
  font-weight: 700;
}
.prose strong {
  font-weight: 650;
}

/* O resumo no topo das páginas longas. */
.summary {
  margin: 0 0 8px;
  padding: 22px 26px 8px;
  border: 1px solid hsl(var(--primary) / 0.24);
  border-radius: 22px;
  background: hsl(var(--surface) / 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.summary h2 {
  margin: 0 0 12px;
  font-size: 24px;
}

/* Tabelas: viram fichas empilhadas no celular. */
.table {
  width: 100%;
  margin: 20px 0 28px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
}
.table th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid hsl(var(--primary) / 0.32);
  text-align: left;
  font-size: 14px;
  font-weight: 650;
  color: hsl(var(--muted));
}
.table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid hsl(var(--primary) / 0.13);
  vertical-align: top;
  color: hsl(var(--foreground) / 0.86);
}
.table td:first-child {
  font-weight: 650;
  color: hsl(var(--foreground));
}
@media (max-width: 719px) {
  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
  }
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .table tr {
    padding-block: 14px;
    border-bottom: 1px solid hsl(var(--primary) / 0.16);
  }
  .table td {
    padding: 0;
    border: 0;
  }
  .table td + td {
    margin-top: 8px;
  }
  .table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--muted));
  }
}

/* Contato em destaque (suporte e exclusão de conta). */
.contact-card {
  margin: 0 0 8px;
  padding: 24px 26px;
  border: 1px solid hsl(var(--primary) / 0.28);
  border-radius: 22px;
  background: hsl(var(--surface) / 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.contact-card p {
  margin: 0;
}
.contact-card .email {
  display: inline-block;
  margin: 6px 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.15;
  color: hsl(var(--gold-text));
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-card .email:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.contact-card .hint {
  font-size: 15px;
  color: hsl(var(--foreground) / 0.78);
}

/* Perguntas frequentes. */
.faq {
  margin: 0 0 8px;
}
.faq details {
  border-top: 1px solid hsl(var(--primary) / 0.16);
}
.faq details:last-child {
  border-bottom: 1px solid hsl(var(--primary) / 0.16);
}
.faq summary {
  position: relative;
  padding: 17px 40px 17px 0;
  list-style: none;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after,
.toc-mobile summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid hsl(var(--gold-text));
  border-bottom: 1.5px solid hsl(var(--gold-text));
  transform: translateY(-70%) rotate(45deg);
  transition: transform 180ms var(--ease);
}
.toc-mobile summary::after {
  right: 22px;
}
.faq details[open] > summary::after,
.toc-mobile[open] > summary::after {
  transform: translateY(-25%) rotate(225deg);
}
.faq .answer {
  padding: 0 0 18px;
  color: hsl(var(--foreground) / 0.86);
}
.faq .answer > :last-child {
  margin-bottom: 0;
}

/* ---------- Rodapé ---------- */

.site-footer {
  margin-top: 24px;
  padding-block: 36px 44px;
  border-top: 1px solid hsl(var(--primary) / 0.14);
  font-size: 15px;
  color: hsl(var(--muted));
}
.site-footer .wrap {
  display: grid;
  gap: 22px;
}
@media (min-width: 760px) {
  .site-footer .wrap {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 48px;
  }
}
.site-footer .brand-mark {
  width: 26px;
  height: 26px;
}
.site-footer .brand-name {
  font-size: 23px;
}
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .footer-nav ul {
    justify-content: flex-end;
  }
}
.footer-nav a {
  color: hsl(var(--foreground) / 0.82);
  text-decoration: none;
}
.footer-nav a:hover {
  color: hsl(var(--gold-text));
}
.legal-line {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 404 ---------- */

.lost {
  padding-block: clamp(48px, 12vw, 140px);
}
.lost h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 60px);
  line-height: 1.05;
}
.lost p {
  margin: 0 0 28px;
  max-width: 34em;
  color: hsl(var(--foreground) / 0.82);
}

/* =====================================================================
   Movimento e universo (segunda rodada do site)
   ===================================================================== */

/* O céu em profundidade: um canvas fixo entre a nébula e a página. */
.sky-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Com o canvas, o SVG de estrelas estático sai; fica só a nébula. */
body.tem-ceu::before {
  background:
    radial-gradient(70% 38% at 88% 4%, hsl(var(--cosmic-purple) / calc(0.5 * var(--nebula))), transparent 70%),
    radial-gradient(60% 30% at 0% 26%, hsl(var(--cosmic-blue) / calc(0.32 * var(--nebula))), transparent 70%),
    radial-gradient(55% 26% at 78% 48%, hsl(var(--nebula-pink) / calc(0.14 * var(--nebula))), transparent 70%),
    radial-gradient(70% 30% at 20% 88%, hsl(var(--cosmic-purple) / calc(0.26 * var(--nebula))), transparent 70%),
    hsl(var(--background));
  opacity: 1;
}
.page-doc .sky-canvas {
  opacity: 0.55;
}

/* ---------- Transições entre páginas ---------- */
@view-transition {
  navigation: auto;
}
.site-header .brand {
  view-transition-name: brand;
}
.site-header {
  view-transition-name: header;
}
main {
  view-transition-name: main;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
::view-transition-old(main) {
  animation: sai 260ms var(--ease) both;
}
::view-transition-new(main) {
  animation: entra 460ms var(--ease) 120ms both;
}
@keyframes sai {
  to {
    opacity: 0;
    transform: translateY(-14px);
    filter: blur(4px);
  }
}
@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- Cabeçalho com os caminhos ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(hsl(var(--background) / 0.78), hsl(var(--background) / 0.2));
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid hsl(var(--primary) / 0.3);
  border-radius: 999px;
  background: hsl(var(--surface) / 0.5);
  color: hsl(var(--gold-text));
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  margin: 0 auto;
  position: relative;
  transition: transform 220ms var(--ease), background 160ms;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}
.nav-toggle[aria-expanded='true'] span {
  background: transparent;
}
.nav-toggle[aria-expanded='true'] span::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] span::after {
  transform: translateY(-6px) rotate(-45deg);
}
.site-nav .nav-sep {
  width: 1px;
  height: 16px;
  background: hsl(var(--primary) / 0.3);
  align-self: center;
}
@media (max-width: 759px) {
  /* Sem o desfoque: ele prenderia o menu fixo dentro do cabeçalho. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(hsl(var(--background) / 0.9), hsl(var(--background) / 0));
  }
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 31;
  }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-content: center;
    background: hsl(var(--background) / 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms var(--ease), visibility 0s linear 240ms;
  }
  .site-nav.aberto {
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms var(--ease);
  }
  .site-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .site-nav a {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 500;
  }
  .site-nav .nav-sep {
    width: 40px;
    height: 1px;
  }
  .site-nav .nav-extra {
    display: block;
  }
  body.menu-aberto {
    overflow: hidden;
  }
}

/* ---------- Revelação na rolagem ---------- */
.revela {
  animation: revela linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 55%;
}
@keyframes revela {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* Texto que se desvela: um fio de ouro varre a linha e a leitura aparece atrás dele. */
.revela-fio {
  animation: desvela linear both;
  animation-timeline: view();
  animation-range: entry 10% entry 70%;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@keyframes desvela {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}
.sem-scroll-timeline .revela,
.sem-scroll-timeline .revela-fio {
  animation: none;
  opacity: 0;
  transform: translateY(28px);
  -webkit-mask-image: none;
  mask-image: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.sem-scroll-timeline .revela.visto,
.sem-scroll-timeline .revela-fio.visto {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .revela,
  .revela-fio,
  .sem-scroll-timeline .revela,
  .sem-scroll-timeline .revela-fio {
    animation: none;
    opacity: 1;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Os astros das seções sobem mais devagar que o texto. */
.flutua {
  animation: flutua linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}
@keyframes flutua {
  from {
    transform: translateY(40px) rotate(-2deg);
  }
  to {
    transform: translateY(-40px) rotate(2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .flutua {
    animation: none;
  }
}

/* O fio de ouro que liga os passos e se desenha com a rolagem. */
.fio {
  position: absolute;
  left: 31px;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(hsl(var(--primary) / 0), hsl(var(--primary) / 0.45) 12%, hsl(var(--primary) / 0.45) 88%, hsl(var(--primary) / 0));
  transform-origin: top;
  animation: fio linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 80%;
  pointer-events: none;
}
@keyframes fio {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
.sem-scroll-timeline .fio {
  animation: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fio {
    animation: none;
    transform: none;
  }
}

/* ---------- Início: o céu de hoje no anel ---------- */
.hm-astro {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: astro-chega 0.9s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
  filter: drop-shadow(0 0 3px hsl(var(--primary) / 0.5));
}
@keyframes astro-chega {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hm-astro {
    animation: none;
    opacity: 1;
  }
}
.hero-figure {
  margin: 0;
  justify-self: center;
  width: min(80vw, 400px);
  order: -1;
}
@media (min-width: 960px) {
  .hero-figure {
    width: 100%;
    max-width: 540px;
    order: 0;
  }
}
.hero-figure .hero-mark {
  width: 100%;
  overflow: visible;
}
.hero-legenda {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  color: hsl(var(--muted));
}

/* ---------- O céu de hoje: a lista ---------- */
.ceu-hoje ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.ceu-hoje li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid hsl(var(--primary) / 0.14);
}
.ceu-hoje li img {
  grid-row: span 2;
  justify-self: center;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.ceu-nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.1;
}
.ceu-pos {
  font-size: 14px;
  color: hsl(var(--foreground) / 0.8);
}
.ceu-grau {
  color: hsl(var(--muted));
  font-variant-numeric: tabular-nums;
}
.ceu-rx {
  color: hsl(var(--gold-text));
  text-decoration: none;
}
.ceu-data {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  color: hsl(var(--muted));
}

/* ---------- Como funciona ---------- */
.como ol {
  position: relative;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 44px;
}
.como li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.como .passo {
  width: 64px;
  height: 64px;
  border: 1px solid hsl(var(--primary) / 0.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-caps);
  font-size: 18px;
  color: hsl(var(--gold-text));
  background: hsl(var(--background) / 0.9);
  position: relative;
  z-index: 1;
}
.como h3 {
  margin: 12px 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
}
.como p {
  margin: 0;
  max-width: 44em;
  color: hsl(var(--foreground) / 0.82);
}
@media (min-width: 900px) {
  .como ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
  .como li {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .como .fio {
    left: 0;
    top: 32px;
    width: 100%;
    height: 1px;
    transform-origin: left;
    background: linear-gradient(90deg, hsl(var(--primary) / 0), hsl(var(--primary) / 0.45) 10%, hsl(var(--primary) / 0.45) 90%, hsl(var(--primary) / 0));
    animation-name: fio-h;
  }
}
@keyframes fio-h {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- Os três caminhos ---------- */
.caminhos {
  display: grid;
  gap: 18px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 960px) {
  .caminhos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.caminho {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 28px 26px 26px;
  border: 1px solid hsl(var(--primary) / 0.2);
  border-radius: 22px;
  background: linear-gradient(160deg, hsl(var(--surface) / 0.72), hsl(var(--surface) / 0.4));
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 300ms var(--ease), transform 500ms var(--ease);
}
.caminho:hover {
  border-color: hsl(var(--primary) / 0.55);
  transform: translateY(-4px);
}
.caminho img {
  position: absolute;
  right: -12%;
  bottom: -14%;
  width: 62%;
  z-index: -1;
  opacity: 0.9;
  transition: transform 900ms var(--ease);
}
.caminho:hover img {
  transform: translate(-4%, -4%) rotate(3deg);
}
.caminho .sk {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: hsl(var(--gold-text));
}
.caminho h3 {
  margin: 10px 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.05;
}
.caminho p {
  margin: 0 0 auto;
  max-width: 24em;
  padding-right: 20%;
  color: hsl(var(--foreground) / 0.82);
}
.caminho .ir {
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--gold-text));
}
.caminho:hover .ir {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Seções do início ---------- */
.section-eyelead {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: hsl(var(--gold-text));
}
.cta-final {
  text-align: center;
  padding-block: clamp(56px, 10vw, 128px);
}
.cta-final h2 {
  margin: 0 auto 20px;
  max-width: 16em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.cta-final .cta-row {
  justify-content: center;
}
.cta-final .brand-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
}

/* ---------- Páginas de conteúdo (Astrologia, Numerologia, Védico) ---------- */
.topico-hero {
  position: relative;
  padding-block: clamp(24px, 6vw, 72px) clamp(32px, 6vw, 72px);
}
.topico-hero .wrap {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) {
  .topico-hero .wrap {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 48px;
  }
}
.topico-hero .eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-caps);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: hsl(var(--gold-text));
}
.topico-hero h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(42px, 6.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.topico-hero .lead {
  margin: 0;
  max-width: 34em;
  font-size: clamp(17px, 1.5vw, 19px);
  color: hsl(var(--foreground) / 0.84);
}
.topico-astro {
  justify-self: center;
  width: min(56vw, 280px);
  order: -1;
  filter: drop-shadow(0 30px 60px hsl(var(--primary) / 0.18));
}
@media (min-width: 900px) {
  .topico-astro {
    order: 0;
    width: 100%;
    max-width: 420px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .topico-astro {
    animation: astro-entra 1.6s var(--ease) both;
  }
}
@keyframes astro-entra {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.92);
  }
}

.topico {
  padding-block: clamp(40px, 6vw, 80px);
}
.topico .prose {
  max-width: 68ch;
}
.topico h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.topico .prose p {
  color: hsl(var(--foreground) / 0.84);
}
.topico .prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  margin: 28px 0 8px;
}

/* A grade dos doze: signos, casas, bhavas. */
.doze {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.doze li {
  position: relative;
  padding: 20px 20px 18px;
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: 18px;
  background: hsl(var(--surface) / 0.45);
  transition: border-color 300ms var(--ease), background 300ms var(--ease);
}
.doze li:hover {
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--surface) / 0.7);
}
.doze .glifo {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 26px;
  line-height: 1;
  color: hsl(var(--gold-text));
  font-variant-emoji: text;
}
.doze .num {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: hsl(var(--gold-text));
}
.doze h3 {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.1;
}
.doze .meta {
  margin: 0 0 8px;
  font-size: 13px;
  color: hsl(var(--muted));
}
.doze p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: hsl(var(--foreground) / 0.84);
}
.doze .sk {
  display: block;
  font-size: 13px;
  color: hsl(var(--muted));
  font-style: italic;
}

/* Os aspectos: o ângulo desenhado. */
.aspectos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.aspectos li {
  padding: 18px 18px 16px;
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: 18px;
  background: hsl(var(--surface) / 0.45);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
}
.aspectos svg {
  width: 56px;
  height: 56px;
}
.aspectos .anel {
  fill: none;
  stroke: hsl(var(--primary) / 0.35);
  stroke-width: 1;
}
.aspectos .corda {
  stroke: hsl(var(--gold-text));
  stroke-width: 1.6;
  stroke-linecap: round;
}
.aspectos .ponto {
  fill: hsl(var(--gold-light));
}
.aspectos h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
}
.aspectos .meta {
  display: block;
  margin: 3px 0 0;
  font-size: 13px;
  color: hsl(var(--muted));
}
.aspectos p {
  margin: 0;
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.5;
  color: hsl(var(--foreground) / 0.84);
}

/* A conta à mostra: o exemplo da numerologia. */
.conta {
  margin: 28px 0 0;
  padding: 24px 26px;
  border: 1px solid hsl(var(--primary) / 0.28);
  border-radius: 22px;
  background: hsl(var(--surface) / 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-x: auto;
}
.conta .nome {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin: 0 0 14px;
}
.conta .letra {
  display: grid;
  width: 30px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
}
.conta .letra small {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--gold-text));
}
.conta .letra.vogal small {
  color: hsl(280 65% 70%);
}
@media (prefers-color-scheme: light) {
  .conta .letra.vogal small {
    color: hsl(280 60% 42%);
  }
}
.conta .espaco {
  width: 14px;
}
.conta .linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid hsl(var(--primary) / 0.14);
  font-size: 15px;
  color: hsl(var(--foreground) / 0.84);
}
.conta .linha b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: hsl(var(--gold-text));
}
.conta .linha .eq {
  color: hsl(var(--muted));
}
.conta .resultado {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
}
.conta .resultado b {
  margin-left: 8px;
  font-size: 44px;
  font-weight: 600;
  color: hsl(var(--gold-text));
}

/* Os nove números. */
.nove {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.nove li {
  padding: 22px 20px 18px;
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: 18px;
  background: hsl(var(--surface) / 0.45);
}
.nove .n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 54px;
  line-height: 0.9;
  color: hsl(var(--gold-text));
}
.nove h3 {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
}
.nove p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: hsl(var(--foreground) / 0.84);
}
.nove .mestre .n {
  background: linear-gradient(120deg, hsl(var(--gold-deep)), hsl(var(--primary)) 50%, hsl(var(--gold-light)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tabela dos grahas. */
.grahas {
  width: 100%;
  margin: 28px 0 0;
  border-collapse: collapse;
  font-size: 15px;
}
.grahas th {
  text-align: left;
  padding: 0 14px 10px 0;
  font-size: 13px;
  font-weight: 650;
  color: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--primary) / 0.32);
}
.grahas td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid hsl(var(--primary) / 0.13);
  vertical-align: top;
}
.grahas td:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  white-space: nowrap;
}
.grahas .dev {
  font-size: 18px;
  color: hsl(var(--gold-text));
}
@media (max-width: 640px) {
  .grahas thead {
    display: none;
  }
  .grahas tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 14px;
    padding: 12px 0;
    border-bottom: 1px solid hsl(var(--primary) / 0.14);
  }
  .grahas td {
    padding: 0;
    border: 0;
  }
  .grahas td:first-child {
    grid-row: span 2;
  }
}

/* As 27 nakshatras. */
.nakshatras {
  columns: 2;
  column-gap: 28px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
@media (min-width: 760px) {
  .nakshatras {
    columns: 3;
  }
}
.nakshatras li {
  break-inside: avoid;
  padding: 7px 0;
  border-top: 1px solid hsl(var(--primary) / 0.12);
}
.nakshatras b {
  font-weight: 650;
}
.nakshatras i {
  color: hsl(var(--muted));
}

/* A faixa "no Astral". */
.no-app {
  margin: 36px 0 0;
  padding: 26px 28px;
  border: 1px solid hsl(var(--primary) / 0.3);
  border-radius: 22px;
  background: linear-gradient(160deg, hsl(var(--surface) / 0.75), hsl(var(--surface) / 0.45));
  display: grid;
  gap: 8px;
}
.no-app .sk {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: hsl(var(--gold-text));
}
.no-app h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
}
.no-app p {
  margin: 0;
  color: hsl(var(--foreground) / 0.84);
}

/* Navegação entre caminhos ao pé das páginas. */
.proximo {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .proximo {
    grid-template-columns: 1fr 1fr;
  }
}
.proximo a {
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  border: 1px solid hsl(var(--primary) / 0.2);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: hsl(var(--surface) / 0.45);
  transition: border-color 300ms var(--ease);
}
.proximo a:hover {
  border-color: hsl(var(--primary) / 0.55);
}
.proximo .sk {
  font-size: 13px;
  color: hsl(var(--muted));
}
.proximo b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
}

/* ---------- Mais movimento: o anel gira ao descer, a entrada é mais lenta ---------- */
.hero-mark {
  animation: gira linear both;
  animation-timeline: scroll(root);
  animation-range: 0 120vh;
}
@keyframes gira {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(28deg);
  }
}
.hero-text {
  animation: afasta linear both;
  animation-timeline: scroll(root);
  animation-range: 0 90vh;
}
@keyframes afasta {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-60px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark,
  .hero-text {
    animation: none;
  }
}
.sem-scroll-timeline .hero-mark,
.sem-scroll-timeline .hero-text {
  animation: none;
}

/* Cada card chega num tempo: a grade entra como uma onda. */
.doze li.revela,
.nove li.revela,
.aspectos li.revela,
.caminhos li.revela {
  animation-range: entry 0% entry 60%;
}
.doze li.revela:nth-child(4n+2),
.nove li.revela:nth-child(4n+2),
.aspectos li.revela:nth-child(3n+2),
.caminhos li.revela:nth-child(2) {
  animation-range: entry 8% entry 70%;
}
.doze li.revela:nth-child(4n+3),
.nove li.revela:nth-child(4n+3),
.aspectos li.revela:nth-child(3n),
.caminhos li.revela:nth-child(3) {
  animation-range: entry 16% entry 80%;
}
.doze li.revela:nth-child(4n),
.nove li.revela:nth-child(4n) {
  animation-range: entry 24% entry 90%;
}
@keyframes revela {
  from {
    opacity: 0;
    transform: translateY(56px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* A transição entre páginas, mais lenta e com o céu parado. */
::view-transition-old(main) {
  animation: sai 320ms var(--ease) both;
}
::view-transition-new(main) {
  animation: entra 720ms var(--ease) 160ms both;
}
@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(8px);
  }
}

/* ---------- Páginas dos signos ---------- */
.signo-hero .eyebrow a {
  color: inherit;
  text-decoration: none;
}
.signo-hero .eyebrow a:hover {
  text-decoration: underline;
}
.signo-glifo {
  display: inline-block;
  margin-right: 0.18em;
  font-variant-emoji: text;
  color: hsl(var(--gold-text));
  font-size: 0.8em;
  vertical-align: 0.05em;
}
.signo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.signo-nav a {
  padding: 10px 16px;
  border: 1px solid hsl(var(--primary) / 0.35);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground) / 0.9);
  text-decoration: none;
  background: hsl(var(--surface) / 0.5);
  transition: border-color 200ms, color 200ms;
}
.signo-nav a:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--gold-text));
}
.signo-parte {
  scroll-margin-top: 70px;
  border-top: 1px solid hsl(var(--primary) / 0.14);
}
.signo-curto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  color: hsl(var(--gold-text));
  margin: 0 0 20px;
}
.signo-lema {
  font-size: 19px;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.destaques {
  display: grid;
  gap: 8px;
  margin: 22px 0 28px;
  padding: 18px 22px;
  list-style: none;
  border: 1px solid hsl(var(--primary) / 0.26);
  border-radius: 18px;
  background: hsl(var(--surface) / 0.55);
  font-size: 15px;
}
.destaques li {
  margin: 0;
  padding-left: 18px;
  position: relative;
}
.destaques li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--primary));
}
.signo-parte .prose h4 {
  margin: 22px 0 6px;
  font-size: 17px;
  font-weight: 650;
  color: hsl(var(--gold-text));
}
.outros-signos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 28px;
}
.outros-signos a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  background: hsl(var(--surface) / 0.45);
  transition: border-color 200ms;
}
.outros-signos a span {
  font-variant-emoji: text;
  color: hsl(var(--gold-text));
  font-size: 20px;
}
.outros-signos a:hover,
.outros-signos a[aria-current='page'] {
  border-color: hsl(var(--primary) / 0.6);
}
.doze a.card-link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.doze li:has(.card-link) h3::after {
  content: ' →';
  color: hsl(var(--gold-text));
  font-size: 0.7em;
}
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 20px;
  margin: 0 0 20px;
  padding: 16px 20px;
  border-left: 2px solid hsl(var(--primary) / 0.5);
  background: hsl(var(--surface) / 0.4);
  border-radius: 0 14px 14px 0;
}
.ficha div {
  display: grid;
  gap: 2px;
}
.ficha dt {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: hsl(var(--muted));
}
.ficha dd {
  margin: 0;
  font-size: 15px;
  color: hsl(var(--foreground) / 0.9);
}

/* =====================================================================
   O kit "o que o céu guarda": Abóbada, Lanterna, Astrolábio, Véu, Passagem
   ===================================================================== */

/* ---------- Abóbada ---------- */
body.tem-abobada .sky-canvas {
  opacity: 0;
  transition: opacity 1.4s ease;
}
body.abobada-viva .sky-canvas {
  opacity: 1;
}
/* Sem 3D, o canvas 2D entra na hora. */
body.tem-abobada:not(.abobada-viva) .sky-canvas {
  opacity: 1;
}
.page-doc.tem-abobada .sky-canvas {
  opacity: 0.6;
}

/* ---------- O início como céu inteiro ---------- */
.hero-ceu {
  position: relative;
  min-height: calc(100svh - 72px);
  display: grid;
  align-items: end;
  padding-block: 10vh 8vh;
}
.hero-ceu .wrap {
  display: block;
  max-width: 1120px;
}
.hero-ceu .hero-text {
  max-width: 720px;
}
.hero-ceu h1 {
  font-size: clamp(46px, 7.4vw, 96px);
  line-height: 0.98;
  margin-bottom: 26px;
}
/* A Semente do início: o único desenho em HTML sobre o céu em 3D. */
.hero-semente {
  position: absolute;
  right: clamp(16px, 6vw, 96px);
  top: 4vh;
  width: clamp(150px, 26vw, 380px);
  pointer-events: none;
  overflow: visible;
}
@media (max-width: 759px) {
  .hero-semente {
    position: static;
    width: 56vw;
    margin: 0 auto 6vh;
  }
  .hero-ceu {
    align-items: start;
    padding-top: 4vh;
  }
}
.hero-lema {
  margin: 0 0 18px;
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: hsl(var(--gold-text));
}
.hero-ceu .lead {
  max-width: 34em;
}
.hero-hoje {
  margin: 28px 0 0;
  font-size: 15px;
  color: hsl(var(--muted));
}
.hero-hoje b {
  font-weight: 600;
  color: hsl(var(--foreground) / 0.85);
}

/* ---------- Lanterna ---------- */
.lanterna {
  position: relative;
  --lx: 30%;
  --ly: 20%;
  -webkit-mask-image: radial-gradient(circle 260px at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.16) 100%);
  mask-image: radial-gradient(circle 260px at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.16) 100%);
  transition: -webkit-mask-position 120ms linear, mask-position 120ms linear;
}
.lanterna.acesa,
.sem-scroll-timeline .lanterna {
  -webkit-mask-image: none;
  mask-image: none;
}
@media (prefers-color-scheme: light) {
  .lanterna {
    -webkit-mask-image: radial-gradient(circle 260px at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0.35) 100%);
    mask-image: radial-gradient(circle 260px at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0.35) 100%);
  }
}
.penumbra {
  padding-block: clamp(56px, 10vw, 128px);
}
.penumbra .wrap {
  max-width: 860px;
}
.penumbra h2 {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.penumbra p {
  margin: 0 0 1em;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 31px);
  line-height: 1.4;
  color: hsl(var(--foreground));
}
.penumbra p em {
  color: hsl(var(--gold-text));
  font-style: italic;
}
.penumbra .dica {
  margin-top: 22px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: hsl(var(--muted));
}

/* ---------- Astrolábio: o mapa se monta na rolagem ---------- */
.astrolabio {
  position: relative;
  height: 340vh;
  view-timeline-name: --astrolabio;
  view-timeline-axis: block;
}
.astrolabio .palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}
.astrolabio .wrap {
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .astrolabio .wrap {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
  }
}
.astrolabio .mapa {
  width: min(78vw, 560px);
  justify-self: center;
  overflow: visible;
}
@media (max-width: 899px) {
  .astrolabio .mapa {
    width: min(70vw, 360px);
  }
}
.astrolabio .legendas {
  position: relative;
  min-height: 12em;
}
.astrolabio .legenda {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.astrolabio .legenda .num {
  font-family: var(--font-caps);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: hsl(var(--gold-text));
}
.astrolabio .legenda h3 {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.05;
}
.astrolabio .legenda p {
  margin: 0;
  max-width: 30em;
  font-size: 17px;
  color: hsl(var(--foreground) / 0.84);
}
/* Camadas do mapa. */
.m-anel {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 0.35;
  stroke-opacity: 0.7;
}
.m-anel-fino {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 0.2;
  stroke-opacity: 0.4;
}
.m-ticks {
  stroke: hsl(var(--primary));
  stroke-width: 0.25;
  stroke-opacity: 0.6;
}
.m-casas line {
  stroke: hsl(var(--primary));
  stroke-width: 0.2;
  stroke-opacity: 0.45;
}
.m-casas .m-eixo {
  stroke-width: 0.45;
  stroke-opacity: 0.9;
}
.m-casas text {
  font-family: var(--font-caps);
  font-size: 3px;
  fill: hsl(var(--gold-text));
  text-anchor: middle;
}
.m-aspectos line {
  stroke-width: 0.3;
  stroke-linecap: round;
}
.m-aspectos .harm {
  stroke: hsl(200 85% 60%);
}
.m-aspectos .tenso {
  stroke: hsl(0 75% 60%);
}
.m-astros image {
  filter: drop-shadow(0 0 2px hsl(var(--primary) / 0.5));
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m-anel,
    .m-anel-fino {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: draw linear both;
      animation-timeline: --astrolabio;
      animation-range: cover 0% cover 18%;
    }
    .m-ticks {
      opacity: 0;
      animation: appear linear both;
      animation-timeline: --astrolabio;
      animation-range: cover 10% cover 20%;
    }
    .m-casas {
      opacity: 0;
      animation: appear linear both;
      animation-timeline: --astrolabio;
      animation-range: cover 24% cover 40%;
    }
    .m-astros image {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      animation: astro-chega linear both;
      animation-timeline: --astrolabio;
      animation-range: cover 46% cover 62%;
    }
    .m-astros image:nth-child(2n) {
      animation-range: cover 50% cover 66%;
    }
    .m-astros image:nth-child(3n) {
      animation-range: cover 54% cover 70%;
    }
    .m-aspectos line {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: draw linear both;
      animation-timeline: --astrolabio;
      animation-range: cover 72% cover 88%;
    }
    .astrolabio .legenda {
      animation: legenda linear both;
      animation-timeline: --astrolabio;
    }
    .astrolabio .legenda:nth-child(1) {
      animation-range: cover 0% cover 26%;
    }
    .astrolabio .legenda:nth-child(2) {
      animation-range: cover 22% cover 50%;
    }
    .astrolabio .legenda:nth-child(3) {
      animation-range: cover 46% cover 74%;
    }
    .astrolabio .legenda:nth-child(4) {
      animation-range: cover 70% cover 100%;
    }
  }
}
@keyframes legenda {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  18%,
  82% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-18px);
  }
}
/* Sem rolagem dirigida (ou com "reduzir movimento"): tudo visível, sem palco fixo. */
.sem-scroll-timeline .astrolabio,
.reduz .astrolabio {
  height: auto;
}
.sem-scroll-timeline .astrolabio .palco,
.reduz .astrolabio .palco {
  position: static;
  height: auto;
  padding-block: 48px;
}
.sem-scroll-timeline .astrolabio .legenda,
.reduz .astrolabio .legenda {
  position: static;
  opacity: 1;
  margin-bottom: 28px;
}
@media (prefers-reduced-motion: reduce) {
  .astrolabio {
    height: auto;
  }
  .astrolabio .palco {
    position: static;
    height: auto;
    padding-block: 48px;
  }
  .astrolabio .legenda {
    position: static;
    opacity: 1;
    margin-bottom: 28px;
  }
}

/* ---------- Véu ---------- */
.veu {
  animation: veu linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}
@keyframes veu {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
.sem-scroll-timeline .veu {
  animation: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.sem-scroll-timeline .veu.visto {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .veu,
  .sem-scroll-timeline .veu {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* ---------- Passagem ---------- */
.passagem {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: hsl(var(--background));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.passagem svg {
  width: clamp(96px, 18vw, 180px);
  overflow: visible;
}
.passagem .p-arc {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.passagem .p-dot {
  fill: hsl(var(--gold-light));
  opacity: 0;
}
.passagem.saindo {
  visibility: visible;
  animation: passagem-fecha 520ms var(--ease) forwards;
}
.passagem.saindo .p-arc {
  animation: draw 480ms cubic-bezier(0.55, 0, 0.3, 1) 60ms forwards;
}
.passagem.saindo .p-dot {
  animation: appear 120ms ease 460ms forwards;
}
.passagem.chegando {
  visibility: visible;
  opacity: 1;
  animation: passagem-abre 640ms var(--ease) 80ms forwards;
}
.passagem.chegando .p-arc {
  stroke-dashoffset: 0;
  animation: desfaz 520ms cubic-bezier(0.55, 0, 0.3, 1) forwards;
}
.passagem.chegando .p-dot {
  opacity: 1;
  animation: some 200ms ease 300ms forwards;
}
@keyframes passagem-fecha {
  from {
    opacity: 0;
  }
  30%,
  100% {
    opacity: 1;
  }
}
@keyframes passagem-abre {
  0%,
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes desfaz {
  to {
    stroke-dashoffset: -1;
  }
}
@keyframes some {
  to {
    opacity: 0;
  }
}
/* Com a passagem, a transição de documento fica só no conteúdo, mais curta. */
::view-transition-old(main) {
  animation: sai 200ms var(--ease) both;
}
::view-transition-new(main) {
  animation: entra 520ms var(--ease) 60ms both;
}

/* ---------- Os três caminhos, mais cinema ---------- */
.caminho {
  min-height: 440px;
  background: linear-gradient(170deg, hsl(var(--surface) / 0.55), hsl(var(--surface) / 0.15));
}
.caminho img {
  right: -14%;
  bottom: -16%;
  width: 58%;
  opacity: 0.95;
  animation: flutua-leve 9s ease-in-out infinite;
}
.caminhos li:nth-child(2) .caminho img {
  animation-delay: -3s;
}
.caminhos li:nth-child(3) .caminho img {
  animation-delay: -6s;
}
@keyframes flutua-leve {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .caminho img {
    animation: none;
  }
}
.hm-squares-grande {
  stroke-width: 0.5;
}
.hm-spiral-grande {
  stroke-width: 1.4;
}

/* ---------- Astros em 3D ---------- */
.astro3d {
  position: relative;
  aspect-ratio: 1;
  filter: none;
}
.astro3d canvas {
  position: absolute;
  inset: -22%;
  width: 144%;
  height: 144%;
  opacity: 0;
  transition: opacity 900ms ease;
}
.astro3d img {
  width: 100%;
  height: 100%;
  transition: opacity 600ms ease;
}
.astro3d.vivo canvas {
  opacity: 1;
}
.astro3d.vivo img {
  opacity: 0;
}