/* Mapa astral. Segue o sistema das páginas novas: escopo por #id, paleta
   dourada, container largo e a mesma pilha de fontes da landing de IA. */

#mapa-astral-page {
  --ma-ink: #f8f1df;
  --ma-muted: #c8bdad;
  --ma-gold: #e4bd68;
  --ma-gold-light: #f5dda2;
  --ma-panel: rgba(24, 19, 35, .82);
  --ma-line: rgba(229, 191, 109, .22);
  color: var(--ma-ink);
}

/* O fundo vai no `body`, não no `main` nem numa camada fixa.
   - No `main` ele fica preso ao `max-width: 1100px` e vira uma faixa com
     bordas visíveis no meio da tela.
   - Numa camada `position: fixed` ele cobre a tela, mas passa a ser um plano
     estático sob um header `sticky` com `backdrop-filter` — combinação que
     produz artefato de repaint no header ao rolar, principalmente no celular.
   No body ele é full-bleed e rola junto, sem nenhum dos dois problemas. */
body.page-mapa-astral-page {
  background:
    radial-gradient(circle at 15% 8%, rgba(112, 70, 135, .2), transparent 31rem),
    radial-gradient(circle at 88% 13%, rgba(211, 168, 84, .13), transparent 28rem),
    linear-gradient(180deg, #0c0b18 0%, #100c1a 48%, #090a16 100%);
  background-attachment: scroll;
}

/* Guarda do truque de largura: o `translateX(-50%)` usa `100vw`, que inclui a
   barra de rolagem, e sem isto sobra uma faixa rolável à direita. A landing de
   IA faz o mesmo — eu tinha esquecido de copiar. */
html { overflow-x: hidden; }

#mapa-astral-page .ma-page {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  font-family: 'Raleway', system-ui, sans-serif;
  text-align: left;
}

@media (min-width: 1181px) {
  #mapa-astral-page { overflow: visible; }
  #mapa-astral-page .ma-page {
    width: min(1180px, calc(100vw - 40px));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

#mapa-astral-page .ma-page h1,
#mapa-astral-page .ma-page h2,
#mapa-astral-page .ma-page h3 {
  margin-top: 0;
  color: var(--ma-ink);
  font-family: 'Cinzel', Georgia, serif;
  line-height: 1.05;
  text-align: left;
}

#mapa-astral-page .ma-page p,
#mapa-astral-page .ma-page li {
  color: var(--ma-muted);
  text-align: left;
}

/* O style.css global pinta toda `main section` como painel com borda e limita
   a 900px; aqui as seções são faixas da página. Mesmo reset da landing de IA. */
#mapa-astral-page .ma-hero,
#mapa-astral-page .ma-panel,
#mapa-astral-page .ma-section,
#mapa-astral-page .ma-text-block,
#mapa-astral-page .ma-related,
/* Os capítulos do relatório são <section> e estavam de fora desta lista: cada
   um vinha com fundo, desfoque, canto arredondado, 25px de padding e um hover
   que mudava a borda — o cartão genérico do site, num documento que se lê
   corrido. E o `max-width: 900px` da regra global, sem margem automática,
   colava os capítulos à esquerda dentro do contêiner de 1180px: era isso que
   fazia o relatório parecer torto. O desenho pretendido são capítulos
   separados por um filete, e ele já existia logo abaixo. */
#mapa-astral-page .ma-chapter {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#mapa-astral-page .ma-chapter:hover { border-color: transparent; }

/* ------------------------------------------------------------------- hero */

#mapa-astral-page .ma-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
  align-items: start;
  gap: clamp(32px, 5vw, 68px);
  padding: 56px 0 64px;
}

/* A roda decorativa atras do hero.

   Sangra pela borda ESQUERDA, com o centro fora da tela: aparece so o arco
   direito, que dissolve antes de alcancar o texto. E ornamento de margem.

   A tentativa anterior era um anel em volta do formulario. A ideia soava bem
   — o formulario no centro do proprio mapa —, mas na tela o anel cortava o
   formulario e os glifos caiam sobre os rotulos.

   `pointer-events: none` porque pano de fundo nao pode roubar clique de campo. */
#mapa-astral-page .ma-hero__backdrop {
  position: absolute;
  top: 50%;
  left: -22%;
  transform: translateY(-50%);
  width: min(600px, 46%);
  z-index: 0;
  opacity: .3;
  pointer-events: none;

  /* Dissolve da esquerda para a direita: o arco e nitido na borda e some
     antes de chegar na coluna de texto. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 76%);
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 76%);
}

#mapa-astral-page .ma-hero__backdrop svg { display: block; width: 100%; height: auto; }
#mapa-astral-page .ma-hero__backdrop .ha-ring { fill: none; stroke: rgba(229, 191, 109, .5); stroke-width: 1; }
#mapa-astral-page .ma-hero__backdrop .ha-ring--faint { stroke: rgba(229, 191, 109, .25); }
#mapa-astral-page .ma-hero__backdrop .ha-spokes path { stroke: rgba(229, 191, 109, .3); stroke-width: 1; }
#mapa-astral-page .ma-hero__backdrop .ha-glyphs text {
  fill: rgba(229, 191, 109, .9);
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: middle;
}
#mapa-astral-page .ma-hero__backdrop .ha-bodies circle { fill: var(--ma-gold-light); }
#mapa-astral-page .ma-hero__backdrop .ha-aspect { fill: none; stroke: rgba(185, 156, 255, .5); stroke-width: .8; }

/* O conteudo sobe acima do pano de fundo. */
#mapa-astral-page .ma-hero__copy,
#mapa-astral-page .ma-form { position: relative; z-index: 1; }

/* No celular o formulario ocupa a largura toda e a roda atras dele viraria
   ruido sob os campos. */
@media (max-width: 780px) {
  #mapa-astral-page .ma-hero__backdrop { display: none; }
}

#mapa-astral-page .ma-eyebrow {
  margin: 0 0 20px;
  color: var(--ma-gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

#mapa-astral-page .ma-eyebrow span { margin-right: 8px; }

/* Escala pensada para Cinzel, que e mais larga que a serifada anterior: a
   medida antiga jogava o titulo para quatro linhas. E entreletra NEGATIVA nao
   serve aqui — Cinzel e desenhada a partir de capitulares romanas e precisa de
   ar entre as letras, nao de aperto. */
#mapa-astral-page .ma-hero h1 {
  max-width: 600px;
  margin-bottom: 24px;
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: .012em;
}

#mapa-astral-page .ma-hero h1 em {
  display: block;
  margin-top: .12em;
  color: var(--ma-gold-light);
  font-style: normal;
  font-weight: 500;
}

#mapa-astral-page .ma-hero__lead {
  max-width: 560px;
  margin: 0 0 28px;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.75;
}

#mapa-astral-page .ma-trust-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 12px 24px;
  color: #d8cebf;
  font-size: .78rem;
  list-style: none;
}

#mapa-astral-page .ma-trust-list span { color: var(--ma-gold); }

/* --------------------------------------------------------------- formulário */

/* O formulário precisa de alguma contenção, mas caixa com borda, sombra forte
   e desfoque dá ar de modal empilhado. Aqui é só um véu escuro e um filete
   dourado à esquerda: separa do fundo sem parecer uma janela por cima dele. */
#mapa-astral-page .ma-form {
  padding: 4px 0 4px 28px;
  border-left: 1px solid rgba(229, 191, 109, .3);
}

#mapa-astral-page .ma-form__title {
  margin: 0 0 24px;
  font-size: 1.6rem;
  font-weight: 500;
}

#mapa-astral-page .ma-label {
  display: block;
  margin: 18px 0 7px;
  color: var(--ma-ink);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#mapa-astral-page .ma-label:first-of-type { margin-top: 0; }

#mapa-astral-page .ma-optional {
  color: var(--ma-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

#mapa-astral-page .ma-form input[type="text"],
#mapa-astral-page .ma-form input[type="date"],
#mapa-astral-page .ma-form input[type="time"],
#mapa-astral-page .ma-form select,
#mapa-astral-page textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(229, 191, 109, .2);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  color: var(--ma-ink);
  font-family: inherit;
  font-size: .98rem;
  color-scheme: dark;
}

#mapa-astral-page .ma-form input:focus,
#mapa-astral-page .ma-form select:focus,
#mapa-astral-page textarea:focus {
  outline: none;
  border-color: rgba(229, 191, 109, .6);
  box-shadow: 0 0 0 3px rgba(229, 191, 109, .13);
}

#mapa-astral-page #ma-time-wrap.is-disabled { opacity: .45; }

#mapa-astral-page .ma-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 4px;
  color: var(--ma-muted);
  font-size: .84rem;
  cursor: pointer;
}

/* O checkbox nao e um campo: sem esta regra o rotulo seguinte cola nele. */
#mapa-astral-page .ma-check + .ma-city-field .ma-label,
#mapa-astral-page .ma-check + .ma-label { margin-top: 22px; }

/* ----------------------------------------------------------- busca de cidade */

#mapa-astral-page .ma-city-field { position: relative; }

#mapa-astral-page .ma-city-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid rgba(229, 191, 109, .32);
  border-radius: 8px;
  background: #14111f;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
}

#mapa-astral-page .ma-city-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid rgba(229, 191, 109, .1);
  background: transparent;
  color: var(--ma-ink);
  font-family: inherit;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
}

#mapa-astral-page .ma-city-option:hover,
#mapa-astral-page .ma-city-option:focus-visible {
  background: rgba(229, 191, 109, .12);
}

#mapa-astral-page .ma-city-region {
  color: var(--ma-muted);
  font-size: .78rem;
  white-space: nowrap;
}

#mapa-astral-page .ma-city-chosen {
  display: block;
  margin-top: 6px;
  color: var(--ma-gold);
  font-size: .74rem;
}

#mapa-astral-page .ma-error {
  margin: 16px 0 0;
  color: #f0a1a1;
  font-size: .85rem;
}

/* ------------------------------------------------------------------ botões */

#mapa-astral-page .ma-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  margin-top: 22px;
  padding: 14px 22px;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: .96rem;
  font-weight: 750;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

#mapa-astral-page .ma-button--primary {
  background: linear-gradient(135deg, #f1d58f, #c9973d);
  box-shadow: 0 12px 34px rgba(204, 153, 58, .19);
  color: #211407;
}

#mapa-astral-page .ma-button--primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(204, 153, 58, .3);
}

#mapa-astral-page .ma-button:disabled { opacity: .6; cursor: default; }

#mapa-astral-page .ma-page .ma-form__note,
#mapa-astral-page .ma-page .ma-cta__note {
  margin: 10px 0 0;
  font-size: .74rem;
  text-align: center;
}

#mapa-astral-page .ma-back {
  display: inline-block;
  margin-bottom: 26px;
  padding: 9px 16px;
  border: 1px solid rgba(229, 191, 109, .28);
  border-radius: 999px;
  background: transparent;
  color: var(--ma-muted);
  font-family: inherit;
  font-size: .8rem;
  cursor: pointer;
}

#mapa-astral-page .ma-back:hover {
  border-color: rgba(229, 191, 109, .6);
  color: var(--ma-ink);
}

/* ---------------------------------------------------------------- resultado */

#mapa-astral-page .ma-panel--result { padding: 40px 0 20px; }

#mapa-astral-page .ma-page .ma-result-title {
  margin: 0 0 28px;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 500;
  text-align: center;
}

/* Sem caixas: três colunas separadas por filete, como uma ficha técnica.
   O peso vem da tipografia, não de moldura. */
#mapa-astral-page .ma-big-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto 40px;
  max-width: 720px;
}

#mapa-astral-page .ma-big-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-left: 1px solid rgba(229, 191, 109, .16);
  text-align: center;
}

#mapa-astral-page .ma-big-card:first-child { border-left: 0; }

#mapa-astral-page .ma-big-card.is-uncertain .ma-big-value {
  font-size: 1.2rem;
  opacity: .9;
}

#mapa-astral-page .ma-big-symbol {
  color: var(--ma-gold);
  font-size: 1.9rem;
  line-height: 1;
}

#mapa-astral-page .ma-big-label {
  color: var(--ma-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#mapa-astral-page .ma-big-value {
  color: var(--ma-gold-light);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
}

/* Aviso é nota de rodapé, não alerta: informa sem interromper a leitura. */
#mapa-astral-page .ma-warnings {
  max-width: 720px;
  margin: 0 auto 32px;
}

#mapa-astral-page .ma-page .ma-warnings p {
  margin: 0 0 8px;
  font-size: .84rem;
  font-style: italic;
  line-height: 1.7;
  opacity: .85;
  text-align: center;
}

#mapa-astral-page .ma-warnings p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- roda e tabelas */

#mapa-astral-page .ma-wheel {
  max-width: 620px;
  margin: 0 auto 36px;
}

#mapa-astral-page .cw { width: 100%; height: auto; }
#mapa-astral-page .cw-ring { fill: none; stroke: rgba(229, 191, 109, .3); stroke-width: 1; }
#mapa-astral-page .cw-ring--faint { stroke: rgba(229, 191, 109, .14); }
#mapa-astral-page .cw-sign-sector { stroke: none; }
#mapa-astral-page .cw-sign-divider { stroke: rgba(229, 191, 109, .25); stroke-width: 1; }
#mapa-astral-page .cw-sign {
  fill: var(--ma-gold-light);
  font-size: 22px;
  text-anchor: middle;
  dominant-baseline: central;
}
#mapa-astral-page .cw-cusp { stroke: rgba(229, 191, 109, .2); stroke-width: 1; }
#mapa-astral-page .cw-cusp--angular { stroke: rgba(229, 191, 109, .5); stroke-width: 1.6; }
#mapa-astral-page .cw-house {
  fill: var(--ma-muted);
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: central;
}
#mapa-astral-page .cw-aspect { stroke-width: 1; }
#mapa-astral-page .cw-body-tick { stroke: rgba(229, 191, 109, .28); stroke-width: 1; }
#mapa-astral-page .cw-body {
  fill: var(--ma-ink);
  font-size: 20px;
  text-anchor: middle;
  dominant-baseline: central;
}
#mapa-astral-page .cw-body.is-retrograde { fill: #e9a3a3; }
#mapa-astral-page .cw-degree {
  fill: var(--ma-muted);
  font-size: 10px;
  text-anchor: middle;
  dominant-baseline: central;
}
#mapa-astral-page .cw-axis { stroke: rgba(229, 191, 109, .55); stroke-width: 1.4; }
#mapa-astral-page .cw-axis-label {
  fill: var(--ma-gold);
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

#mapa-astral-page .ma-table {
  width: 100%;
  max-width: 780px;
  margin: 0 auto 32px;
  border-collapse: collapse;
  font-size: .9rem;
}

#mapa-astral-page .ma-table th,
#mapa-astral-page .ma-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(229, 191, 109, .12);
  color: var(--ma-muted);
  text-align: left;
}

#mapa-astral-page .ma-table thead th {
  color: var(--ma-gold);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#mapa-astral-page .ma-table tbody th { color: var(--ma-ink); font-weight: 600; }

#mapa-astral-page .ma-page .ma-panel--result h3 {
  max-width: 780px;
  margin: 0 auto 14px;
  font-size: 1.5rem;
  font-weight: 500;
}

/* ------------------------------------------------------------------- CTA */

/* Esta é a única que continua se destacando, e de propósito: é a oferta.
   Mas com regra em cima e embaixo em vez de moldura fechada. */
#mapa-astral-page .ma-cta {
  max-width: 640px;
  margin: 56px auto 0;
  padding: 34px 0 8px;
  border-top: 1px solid rgba(229, 191, 109, .35);
  text-align: center;
}

#mapa-astral-page .ma-page .ma-cta p { text-align: center; }
#mapa-astral-page .ma-page .ma-cta .ma-label { text-align: center; }
#mapa-astral-page .ma-page .ma-cta h3 { text-align: center; }

#mapa-astral-page .ma-cta__kicker {
  margin: 0 0 6px;
  color: var(--ma-gold);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#mapa-astral-page .ma-cta h3 { margin: 0 0 12px; font-size: 1.7rem; font-weight: 500; }

/* --------------------------------------------------------------- leitura */

#mapa-astral-page .ma-reading {
  max-width: 720px;
  margin: 0 auto;
}

#mapa-astral-page .ma-reading p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.8;
}

#mapa-astral-page .ma-reading h3 {
  margin: 32px 0 12px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ma-gold-light);
}

/* ---------------------------------------------------------------- seções */

#mapa-astral-page .ma-section {
  max-width: 780px;
  margin: 0 auto 56px;
}

/* Os títulos acompanham o resultado, que é centrado. A prosa continua à
   esquerda: texto longo centralizado é cansativo de ler. */
#mapa-astral-page .ma-page .ma-section > h2 { text-align: center; }

#mapa-astral-page .ma-section h2 {
  margin: 0 0 20px;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 500;
}

#mapa-astral-page .ma-section h3 {
  margin: 28px 0 8px;
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .98rem;
  font-weight: 700;
}

#mapa-astral-page .ma-section p { margin: 0 0 16px; line-height: 1.8; }

#mapa-astral-page .ma-faq { padding: 18px 0; border-bottom: 1px solid rgba(229, 191, 109, .12); }
#mapa-astral-page .ma-faq h3 {
  margin: 0 0 8px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
}

/* -------------------------------------------------------------- relacionados */

#mapa-astral-page .ma-related {
  margin: 0 0 40px;
  padding-top: 44px;
  border-top: 1px solid rgba(229, 191, 109, .16);
}

#mapa-astral-page .ma-related h2 { margin: 0 0 24px; font-size: 2rem; font-weight: 500; }

#mapa-astral-page .ma-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

#mapa-astral-page .ma-related-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 0 18px 20px;
  border-left: 1px solid rgba(229, 191, 109, .2);
  text-decoration: none;
  transition: border-color .25s ease, padding-left .25s ease;
}

#mapa-astral-page .ma-related-card:hover {
  border-left-color: var(--ma-gold);
  padding-left: 26px;
}

#mapa-astral-page .ma-related-q {
  color: var(--ma-gold-light);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.28rem;
}

#mapa-astral-page .ma-related-note { color: var(--ma-muted); font-size: .82rem; }

#mapa-astral-page .ma-page .ma-credits { font-size: .78rem; text-align: center; }
#mapa-astral-page .ma-credits a { color: var(--ma-gold); }

/* ------------------------------------------------------------ responsivo */

@media (max-width: 980px) {
  #mapa-astral-page .ma-hero { grid-template-columns: 1fr; padding: 36px 0 44px; }
}

@media (max-width: 720px) {
  #mapa-astral-page .ma-big-three,
  #mapa-astral-page .ma-related-grid { grid-template-columns: 1fr; }
  #mapa-astral-page .ma-form {
    padding: 0;
    border-left: 0;
    border-top: 1px solid rgba(229, 191, 109, .25);
    padding-top: 28px;
  }
  #mapa-astral-page .ma-table { font-size: .82rem; }
  #mapa-astral-page .ma-table th,
  #mapa-astral-page .ma-table td { padding: 7px 8px; }
}

/* ------------------------------------------------ textos do mapa grátis */

/* Fica entre os avisos e a roda: é a primeira coisa legível de quem chegou
   sem saber ler um mapa, e é o que dá sentido à leitura paga logo abaixo. */
#mapa-astral-page .ma-texts {
  max-width: 720px;
  margin: 0 auto 36px;
}

#mapa-astral-page .ma-page .ma-texts > h3 {
  margin: 0 0 18px;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

#mapa-astral-page .ma-page .ma-text-block {
  padding: 20px 0;
  border-bottom: 1px solid rgba(229, 191, 109, .12);
}

#mapa-astral-page .ma-page .ma-text-block:last-child { border-bottom: 0; }

#mapa-astral-page .ma-text-block h4 {
  margin: 0 0 8px;
  color: var(--ma-gold-light);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
}

#mapa-astral-page .ma-text-block h4 span { margin-right: 8px; color: var(--ma-gold); }

#mapa-astral-page .ma-text-block p {
  margin: 0;
  font-size: .96rem;
  line-height: 1.8;
}

/* ---------------------------------------------- o mapa como conjunto */

#mapa-astral-page .ma-summary {
  max-width: 720px;
  margin: 8px auto 40px;
}

#mapa-astral-page .ma-page .ma-summary > h3 {
  margin: 0 0 22px;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

#mapa-astral-page .ma-balance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

#mapa-astral-page .ma-page .ma-balance h4,
#mapa-astral-page .ma-page .ma-highlight h4 {
  margin: 0 0 12px;
  color: var(--ma-gold);
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#mapa-astral-page .ma-bar {
  display: grid;
  grid-template-columns: 4.5rem 1fr 1.4rem;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

#mapa-astral-page .ma-bar.is-empty { opacity: .45; }

#mapa-astral-page .ma-bar__label {
  color: var(--ma-muted);
  font-size: .82rem;
}

#mapa-astral-page .ma-bar__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(229, 191, 109, .1);
}

#mapa-astral-page .ma-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}

/* As cores dos elementos são as mesmas dos setores da roda, para o olho
   ligar a barra ao desenho sem precisar de legenda. */
#mapa-astral-page .ma-bar__fill--fogo  { background: #e27a4a; }
#mapa-astral-page .ma-bar__fill--terra { background: #96a86c; }
#mapa-astral-page .ma-bar__fill--ar    { background: #e2c574; }
#mapa-astral-page .ma-bar__fill--agua  { background: #7a9cd6; }
#mapa-astral-page .ma-bar__fill--modality { background: var(--ma-gold); }

#mapa-astral-page .ma-bar__count {
  color: var(--ma-ink);
  font-size: .84rem;
  text-align: right;
}

#mapa-astral-page .ma-page .ma-summary__note {
  margin: 20px 0 0;
  font-size: .86rem;
  font-style: italic;
  line-height: 1.7;
}

#mapa-astral-page .ma-highlight {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(229, 191, 109, .12);
}

#mapa-astral-page .ma-page .ma-highlight p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.75;
}

@media (max-width: 720px) {
  #mapa-astral-page .ma-balance { grid-template-columns: 1fr; gap: 24px; }
}


/* ------------------------------------------------- tabelas em tela estreita */

/* Cinco colunas não cabem em 360px. Antes o excesso era simplesmente cortado;
   agora a tabela rola dentro do próprio bloco, sem empurrar a página. */
#mapa-astral-page .ma-table-wrap {
  max-width: 780px;
  margin: 0 auto 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#mapa-astral-page .ma-table-wrap .ma-table {
  margin: 0;
  min-width: 460px;
}

#mapa-astral-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------- celular */

@media (max-width: 560px) {
  /* O hero perde o respiro grande: em tela pequena ele só atrasa o formulário. */
  #mapa-astral-page .ma-hero { padding: 28px 0 36px; gap: 26px; }
  #mapa-astral-page .ma-hero h1 { font-size: 2.1rem; }

  /* Os três do essencial empilham em duas colunas, não em três apertadas. */
  #mapa-astral-page .ma-big-three { grid-template-columns: 1fr; gap: 18px; }
  #mapa-astral-page .ma-big-card {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    border-left: 0;
    border-bottom: 1px solid rgba(229, 191, 109, .14);
    padding: 10px 0;
    text-align: left;
  }
  #mapa-astral-page .ma-big-card:last-child { border-bottom: 0; }
  #mapa-astral-page .ma-big-symbol { font-size: 1.2rem; }

  #mapa-astral-page .ma-wheel { margin-bottom: 28px; }
  #mapa-astral-page .ma-bar { grid-template-columns: 3.8rem 1fr 1.2rem; gap: 8px; }
}

/* ------------------------------------------------------- barra de ações */

#mapa-astral-page .ma-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

#mapa-astral-page .ma-actions .ma-back { margin-bottom: 0; }

#mapa-astral-page .ma-back--print {
  border-color: rgba(229, 191, 109, .5);
  color: var(--ma-gold-light);
}

/* O cabeçalho do documento não aparece na tela: lá a pessoa já sabe de quem
   é o mapa. Ele existe para o papel, que circula sem contexto. */
#mapa-astral-page .ma-print-header { display: none; }
#mapa-astral-page .ma-sheet-brand { display: none; }

/* =========================================================================
   IMPRESSÃO / PDF

   Sem biblioteca: a impressão do próprio navegador gera o PDF. O texto sai
   vetorial e selecionável e a roda SVG sai nítida em qualquer zoom — o que
   `html2canvas` não consegue, porque rasteriza tudo.

   O site é escuro; o documento é claro. Então aqui é inversão completa, não
   ajuste: fundo branco, tinta escura, e as cores da roda repintadas.
   ========================================================================= */

/* ------------------------------------------------------- a oferta paga

   Dois niveis lado a lado. O relatorio e o produto de topo e recebe destaque
   visual; a pergunta avulsa continua acessivel, porque e a porta de entrada de
   quem nao quer gastar 30 creditos de uma vez. */

#mapa-astral-page .ma-offer {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--ma-line);
}
#mapa-astral-page .ma-offer__kicker {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ma-gold); margin: 0 0 10px;
}
#mapa-astral-page .ma-offer > h3 {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: clamp(21px, 3.4vw, 27px); color: var(--ma-gold-light);
  margin: 0 0 28px; line-height: 1.32;
}
#mapa-astral-page .ma-offer__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

#mapa-astral-page .ma-tier {
  padding: 26px 24px;
  background: var(--ma-panel);
  border: 1px solid var(--ma-line);
  border-radius: 16px;
  display: flex; flex-direction: column;
}

/* O destaque e borda dourada e um leve brilho, nao escala nem sombra: a pagina
   inteira e escura, e cartao "elevado" aqui so vira mancha. */
#mapa-astral-page .ma-tier--feature {
  border-color: rgba(229, 191, 109, .5);
  background:
    linear-gradient(180deg, rgba(229, 191, 109, .07), transparent 40%),
    var(--ma-panel);
}
#mapa-astral-page .ma-tier__badge {
  align-self: flex-start; margin: 0 0 12px; padding: 4px 11px;
  border-radius: 999px; background: var(--ma-gold); color: #17121f;
  font-family: 'Raleway', system-ui, sans-serif; font-weight: 600;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
#mapa-astral-page .ma-tier__name {
  font-family: "Cinzel", Georgia, serif; font-size: 19px;
  color: var(--ma-gold-light); margin: 0 0 4px;
}
#mapa-astral-page .ma-tier__price {
  font-family: 'Raleway', system-ui, sans-serif; font-size: 13px;
  color: var(--ma-muted); margin: 0 0 16px;
}
#mapa-astral-page .ma-tier__price strong {
  font-size: 26px; color: var(--ma-ink); margin-right: 5px; font-weight: 600;
}
#mapa-astral-page .ma-tier__desc {
  color: var(--ma-muted); margin: 0 0 18px; font-size: 15px; line-height: 1.68;
}
#mapa-astral-page .ma-tier__list {
  list-style: none; margin: 0 0 22px; padding: 0;
  font-size: 14px; color: var(--ma-muted); line-height: 1.55;
}
#mapa-astral-page .ma-tier__list li {
  padding-left: 20px; margin-bottom: 8px; position: relative;
}
#mapa-astral-page .ma-tier__list li::before {
  content: "\00B7"; position: absolute; left: 6px; top: -2px;
  color: var(--ma-gold); font-size: 20px; line-height: 1;
}

/* O botao encosta no fundo do cartao para os dois alinharem embaixo, mesmo com
   quantidades diferentes de texto acima. */
#mapa-astral-page .ma-tier .ma-button { margin-top: auto; width: 100%; }
#mapa-astral-page .ma-tier__note {
  margin: 10px 0 0; text-align: center;
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 12px; color: #8f8676;
}
#mapa-astral-page .ma-tier textarea { margin-bottom: 18px; }

/* --------------------------------------------------- o documento pago

   Tipografia de livro, nao de pagina web: serifa no corpo, capitular na
   abertura de cada capitulo, sumario numerado. E o que separa um relatorio de
   R$ 19,90 de um post de blog. */

#mapa-astral-page .ma-report__cover {
  text-align: center; padding: 8px 0 34px;
  border-bottom: 1px solid var(--ma-line); margin-bottom: 30px;
}
#mapa-astral-page .ma-report__eyebrow {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ma-gold); margin: 0 0 12px;
}
#mapa-astral-page .ma-report__cover h2 {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: clamp(28px, 5vw, 38px); color: var(--ma-gold-light); margin: 0 0 10px;
}
#mapa-astral-page .ma-report__meta {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 14px; color: var(--ma-muted); margin: 0;
}

#mapa-astral-page .ma-report__toc {
  padding: 24px 26px; margin-bottom: 12px;
  background: var(--ma-panel); border: 1px solid var(--ma-line); border-radius: 14px;
}
#mapa-astral-page .ma-report__toc h3 {
  margin: 0 0 14px; font-family: 'Raleway', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ma-gold);
}
#mapa-astral-page .ma-report__toc ol {
  margin: 0; padding: 0; list-style: none; counter-reset: cap;
  columns: 2; column-gap: 30px;
}
#mapa-astral-page .ma-report__toc li {
  counter-increment: cap; margin: 0 0 9px; padding-left: 30px; position: relative;
  font-family: Georgia, 'Times New Roman', serif; font-size: 18px;
  color: var(--ma-ink); break-inside: avoid;
}
#mapa-astral-page .ma-report__toc li::before {
  content: counter(cap, decimal-leading-zero); position: absolute; left: 0; top: 3px;
  font-family: 'Raleway', system-ui, sans-serif; font-size: 11px; color: var(--ma-gold);
}

#mapa-astral-page .ma-chapter { margin-top: 46px; }
#mapa-astral-page .ma-chapter + .ma-chapter {
  border-top: 1px solid var(--ma-line); padding-top: 42px;
}
#mapa-astral-page .ma-chapter h3 {
  font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: 23px;
  color: var(--ma-gold-light); margin: 0 0 18px; line-height: 1.32;
}
#mapa-astral-page .ma-chapter__num {
  display: block; font-family: 'Raleway', system-ui, sans-serif;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ma-gold); margin-bottom: 9px; font-weight: 600;
}
#mapa-astral-page .ma-chapter p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px; line-height: 1.74; color: var(--ma-ink); margin: 0 0 17px;
  /* Justificado com hifenizacao. Em portugues, justificar sem hifenizar abre
     rios de espaco no meio do paragrafo — as duas coisas andam juntas. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
#mapa-astral-page .ma-chapter p:first-of-type::first-letter {
  float: left; font-family: "Cinzel", Georgia, serif; font-size: 50px;
  line-height: .86; padding: 5px 10px 0 0; color: var(--ma-gold);
}

#mapa-astral-page .ma-report__colophon {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--ma-line);
  font-family: 'Raleway', system-ui, sans-serif; font-size: 12px; color: #8f8676;
}
#mapa-astral-page .ma-report__colophon p { margin: 0 0 4px; color: #8f8676; }

/* A ultima pagina nao termina em ficha tecnica. O relatorio fica salvo na
   conta, e a pessoa precisa saber disso — e saber por onde voltar. */
#mapa-astral-page .ma-report__outro {
  margin-top: 46px;
  padding: 34px 30px;
  text-align: center;
  border: 1px solid var(--ma-line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(229, 191, 109, .07), transparent 55%),
    var(--ma-panel);
}
#mapa-astral-page .ma-report__outro .ma-outro-glyph {
  display: block; color: var(--ma-gold); font-size: 17px; margin-bottom: 14px;
}
#mapa-astral-page .ma-report__outro h4 {
  margin: 0 0 12px;
  font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: 21px;
  color: var(--ma-gold-light);
}
#mapa-astral-page .ma-report__outro p {
  max-width: 46ch; margin: 0 auto 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px; line-height: 1.65; color: var(--ma-muted);
}
#mapa-astral-page .ma-report__outro .ma-outro-site {
  display: inline-block; margin-top: 12px;
  font-family: 'Raleway', system-ui, sans-serif; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ma-gold);
}

@media (max-width: 620px) {
  #mapa-astral-page .ma-report__toc ol { columns: 1; }
  #mapa-astral-page .ma-chapter p { font-size: 18px; }
}

/* ------------------------------------------ o pago na primeira dobra

   Um bloco discreto sob o formulario, nao um banner. A pagina ranqueia por
   "mapa astral gratis" e a promessa gratuita tem que continuar sendo a
   primeira coisa que se le — mas quem chega pela busca precisa saber, ja ali,
   que existe um produto pago depois. */

#mapa-astral-page .ma-hero__upsell {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  background: rgba(229, 191, 109, .05);
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
#mapa-astral-page .ma-hero__upsell:hover,
#mapa-astral-page .ma-hero__upsell:focus-visible {
  border-color: rgba(229, 191, 109, .5);
  background: rgba(229, 191, 109, .1);
}
#mapa-astral-page .ma-hero__upsell-tag {
  flex: none;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(229, 191, 109, .16);
  color: var(--ma-gold);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#mapa-astral-page .ma-hero__upsell-text {
  flex: 1;
  color: var(--ma-muted);
  font-size: .84rem;
  line-height: 1.5;
}
#mapa-astral-page .ma-hero__upsell-text strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ma-ink);
  font-weight: 600;
}
#mapa-astral-page .ma-hero__upsell-go {
  flex: none;
  color: var(--ma-gold);
  font-size: 1.1rem;
}

/* ------------------------------------------------ a secao de venda */

#mapa-astral-page .ma-section--report {
  padding: 64px 0;
  border-top: 1px solid var(--ma-line);
}
#mapa-astral-page .ma-section--report h2 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 500;
  color: var(--ma-gold-light);
}
/* O h2 destas secoes ja vem centralizado do sistema da pagina (a secao de
   guia faz igual). Entao a abertura inteira se centraliza junto — eyebrow a
   esquerda sob um titulo centralizado ficava torto. O conteudo em duas
   colunas abaixo volta a alinhar a esquerda. */
/* Com `.ma-page` no seletor: `#mapa-astral-page .ma-page p` alinha todo
   paragrafo a esquerda e tem especificidade maior que `#id .classe`. Sem
   isto a centralizacao nao pega, e o motivo nao e obvio ao ler o arquivo. */
#mapa-astral-page .ma-page .ma-section--report .ma-eyebrow { text-align: center; }
#mapa-astral-page .ma-page .ma-report-lead {
  max-width: 62ch;
  margin: 0 auto 44px;
  text-align: center;
  font-size: 1.06rem;
  line-height: 1.75;
}

#mapa-astral-page .ma-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

/* Os doze capitulos numerados. E a prova de que o documento tem tamanho —
   dizer "15 paginas" convence menos que mostrar o sumario. */
#mapa-astral-page .ma-report-chapters {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cap;
  columns: 2;
  column-gap: 30px;
}
#mapa-astral-page .ma-report-chapters li {
  counter-increment: cap;
  position: relative;
  margin: 0 0 11px;
  padding-left: 30px;
  color: var(--ma-muted);
  font-size: .94rem;
  break-inside: avoid;
}
#mapa-astral-page .ma-report-chapters li::before {
  content: counter(cap, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--ma-gold);
  font-size: .7rem;
  font-weight: 700;
}

#mapa-astral-page .ma-report-buy {
  padding: 30px 28px;
  border: 1px solid rgba(229, 191, 109, .4);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(229, 191, 109, .08), transparent 45%),
    var(--ma-panel);
}
#mapa-astral-page .ma-report-price {
  margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  line-height: 1;
}
#mapa-astral-page .ma-report-price strong {
  color: var(--ma-ink);
  font-size: 2.9rem;
  font-weight: 500;
}
#mapa-astral-page .ma-report-once {
  margin: 8px 0 22px;
  color: var(--ma-muted);
  font-size: .82rem;
}
#mapa-astral-page .ma-report-perks {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  line-height: 1.6;
}
#mapa-astral-page .ma-report-perks li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 22px;
  color: var(--ma-muted);
}
#mapa-astral-page .ma-report-perks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--ma-gold);
  font-size: .8rem;
}
#mapa-astral-page .ma-report-buy .ma-button { width: 100%; }
#mapa-astral-page .ma-report-step {
  margin: 12px 0 0;
  text-align: center;
  color: #8f8676;
  font-size: .76rem;
}

@media (max-width: 860px) {
  #mapa-astral-page .ma-report-grid { grid-template-columns: 1fr; }
  #mapa-astral-page .ma-report-chapters { columns: 1; }
}

@media print {
  /* Sem margem de página: o fundo escuro tem que sangrar até a borda do papel.
     Com margem, o navegador deixa uma moldura branca em volta e o documento
     passa a parecer uma página web impressa, não um produto. O respiro vem do
     `padding` do conteúdo, logo abaixo — assim o texto não encosta na borda,
     mas o fundo vai até ela. */
  /* Margem zero: o fundo escuro sangra ate a borda do papel. Qualquer margem
     aqui aparece como faixa clara no topo e no rodape de toda folha — foi o
     que aconteceu na tentativa anterior. O respiro vem do padding. */
  @page {
    size: A4;
    margin: 0;
  }

  #mapa-astral-page {
    padding: 13mm;
  }

  /* O documento mantém a identidade do site: fundo escuro, tinta clara, dourado
     nos títulos. É um arquivo para guardar e mandar no WhatsApp, não uma folha
     de escritório — e ali o escuro é o que parece produto.

     `print-color-adjust: exact` é obrigatório: sem ele o navegador descarta
     fundos na impressão, e aí sobraria texto claro sobre papel branco, ou seja,
     invisível. Com ele, o fundo vai junto mesmo com "gráficos de plano de fundo"
     desmarcado. */
  html, body.page-mapa-astral-page {
    background: #0f0c1a !important;
    color: #f8f1df !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #mapa-astral-page,
  #mapa-astral-page * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Fora tudo que é navegação ou interação: no papel não serve para nada. */
  .site-header,
  .site-footer,
  #mapa-astral-page [data-panel="form"],
  #mapa-astral-page .ma-actions,
  #mapa-astral-page .ma-cta,
  #mapa-astral-page .ma-related,
  #mapa-astral-page .ma-section--faq,
  #mapa-astral-page .ma-back,
  .account-widget,
  dialog {
    display: none !important;
  }

  /* Painéis escondidos por `hidden` precisam reaparecer: o documento leva o
     mapa e a leitura juntos, mesmo que na tela só um esteja visível. */
  #mapa-astral-page [data-panel="chart"],
  #mapa-astral-page [data-panel="reading"] {
    display: block !important;
    padding: 0 !important;
  }

  #mapa-astral-page .ma-page {
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* ------------------------------------------------- cabeçalho do documento */

  /* O titulo do painel e da tela. No papel quem identifica o documento e o
     bloco de identidade logo abaixo, com marca, nome, data e local. Os dois
     juntos pareciam duas capas empilhadas. */
  #mapa-astral-page .ma-result-title { display: none !important; }

  #mapa-astral-page .ma-print-header {
    display: block !important;
    margin-bottom: 9mm;
    padding-bottom: 5mm;
    border-bottom: 1px solid rgba(229, 191, 109, .45);
    text-align: center;
  }

  #mapa-astral-page .ma-print-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 5mm;
  }

  /* A marca da primeira folha e a capa do documento: maior que o cabeco que
     se repete nas outras, com o simbolo acima. */
  #mapa-astral-page .ma-print-brand { flex-direction: column; gap: 10px; }
  #mapa-astral-page .ma-print-brand::before {
    content: "\2726";
    color: var(--ma-gold) !important;
    font-size: 15pt;
    line-height: 1;
  }
  #mapa-astral-page .ma-print-brand img { width: 46px; height: 46px; }

  #mapa-astral-page .ma-print-brand span {
    color: var(--ma-gold) !important;
    font-family: "Cinzel", Georgia, serif;
    font-size: 19pt;
    font-weight: 600;
    letter-spacing: .1em;
  }

  /* O convite fecha o documento e nao pode ser cortado ao meio. */
  #mapa-astral-page .ma-report__outro { break-inside: avoid; }

  /* `.ma-page p` tem especificidade maior que o `text-align` herdado do
     cabeçalho, então centralizar precisa ser explícito aqui — mesma armadilha
     que já apareceu três vezes nesta folha. */
  #mapa-astral-page .ma-page .ma-print-title,
  #mapa-astral-page .ma-page .ma-print-data,
  #mapa-astral-page .ma-page .ma-print-source { text-align: center !important; }

  #mapa-astral-page .ma-print-title {
    margin: 0 0 2mm;
    color: var(--ma-gold-light) !important;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 21pt;
  }

  #mapa-astral-page .ma-print-data {
    margin: 0 0 1mm;
    color: var(--ma-muted) !important;
    font-size: 9.5pt;
  }

  #mapa-astral-page .ma-print-source {
    margin: 3mm 0 0;
    color: rgba(200, 189, 173, .7) !important;
    font-size: 7.5pt;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  #mapa-astral-page .ma-result-title { display: none !important; }

  /* --------------------------------------------------------------- conteúdo */

  /* As cores da tela já são as certas; aqui só garantimos que nada herdou
     preto de alguma regra de impressão do navegador. */
  #mapa-astral-page .ma-page p,
  #mapa-astral-page .ma-page li,
  #mapa-astral-page .ma-table td,
  #mapa-astral-page .ma-table tbody th { color: var(--ma-muted) !important; }

  #mapa-astral-page .ma-page h1,
  #mapa-astral-page .ma-page h2,
  #mapa-astral-page .ma-page h3 { color: var(--ma-ink) !important; }

  #mapa-astral-page .ma-text-block,
  #mapa-astral-page .ma-highlight,
  #mapa-astral-page .ma-summary,
  #mapa-astral-page .ma-big-card { break-inside: avoid; }

  #mapa-astral-page .ma-table-wrap { overflow: visible !important; }
  #mapa-astral-page .ma-table { min-width: 0 !important; }

  /* A roda mantém as cores da tela — só encolhe para caber na página. */
  #mapa-astral-page .ma-wheel {
    max-width: 140mm;
    margin: 0 auto 8mm;
    break-inside: avoid;
  }

  /* --------------------------------------------------------- quebra de página */

  /* A leitura começa em página nova: ela é o documento de verdade, e emendar
     na tabela faria as duas coisas parecerem uma só. */
  #mapa-astral-page [data-panel="reading"] { break-before: page; }
  #mapa-astral-page .ma-reading h3 { break-after: avoid; }
  #mapa-astral-page .ma-reading p { orphans: 3; widows: 3; }

  /* O guia de leitura entra no PDF: transforma o documento grátis em algo que
     ensina a ler o próprio mapa, em vez de só listar posições. Começa em página
     nova para não brigar com as tabelas. */
  #mapa-astral-page .ma-section--guide {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    break-before: page;
  }

  #mapa-astral-page .ma-section--guide h3 { break-after: avoid; }
  #mapa-astral-page .ma-section--guide p { orphans: 3; widows: 3; }

  /* A leitura vazia não deve gerar uma folha em branco. */
  #mapa-astral-page [data-panel="reading"]:has(#ma-reading:empty) {
    display: none !important;
  }
}


/* ------------------------------------------- o relatorio impresso (PDF)

   Um capitulo por pagina. O documento tem doze; deixa-los correr emendados
   transformaria quinze paginas num bloco so, e a divisao e justamente o que
   faz aquilo parecer um documento guardavel. */
@media print {
  /* A marca no alto de cada bloco que inicia folha. Nao e `position: fixed`:
     fixo no print e posicionado dentro da caixa da pagina, entao ele comeca na
     mesma linha do texto e encosta nele. */
  #mapa-astral-page .ma-sheet-brand {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 0 0 10mm;
  }

  /* Filetes que morrem nas pontas, como cabeco de livro. Uma linha inteira de
     margem a margem pesaria mais que o titulo do capitulo logo abaixo. */
  #mapa-astral-page .ma-sheet-brand::before,
  #mapa-astral-page .ma-sheet-brand::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 191, 109, .5));
  }
  #mapa-astral-page .ma-sheet-brand::after { transform: scaleX(-1); }

  #mapa-astral-page .ma-sheet-brand__mark {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  #mapa-astral-page .ma-sheet-brand img { width: 13px; height: 13px; opacity: .9; }
  #mapa-astral-page .ma-sheet-brand span {
    font-family: "Cinzel", Georgia, serif;
    font-size: 7.5pt;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ma-gold) !important;
    white-space: nowrap;
  }

#mapa-astral-page .ma-report__cover {
    break-before: page;
    break-after: page;
    padding-top: 22mm;
  }

  /* O sumario NAO forca quebra depois de si: o primeiro capitulo ja tem
     `break-before: page`, e as duas regras juntas produziam uma folha em
     branco entre eles. */
  #mapa-astral-page .ma-report__toc { break-after: auto; }
  #mapa-astral-page .ma-chapter {
    break-before: page; margin-top: 0; padding-top: 0; border-top: 0;
  }
  #mapa-astral-page .ma-chapter h3 { break-after: avoid; }
  #mapa-astral-page .ma-chapter p { orphans: 3; widows: 3; }
  /* Sem quebra antes: tres linhas de ficha nao valem uma folha. Ele fecha a
     pagina onde o convite terminou. */
  #mapa-astral-page .ma-report__colophon {
    break-before: auto;
    break-inside: avoid;
    margin-top: 20mm;
  }

  /* A oferta nao vai para o papel: quem imprime ja comprou. */
  #mapa-astral-page .ma-offer,
  #mapa-astral-page .ma-section--report,
  #mapa-astral-page .ma-hero__upsell { display: none !important; }

  /* Roda e balanco numa folha; posicoes e angulos na seguinte. Antes a tabela
     comecava numa pagina e vazava para a outra, que terminava pela metade —
     parecia que nao coubera, e nao uma escolha. */
  #mapa-astral-page .ma-tables { break-before: page; }
  #mapa-astral-page .ma-table-wrap { break-inside: avoid; }

  /* Telemetria (modelo, tokens, custo) e nossa, nao do cliente. Existe so no
     preview local, mas a regra fica aqui para nunca vazar por descuido. */
  #mapa-astral-page .medidas { display: none !important; }

  /* A faixa .divisor so existe no preview local; escondê-lo mantém o PDF de teste
     igual ao que a página publicada produz. */
  #mapa-astral-page .divisor { display: none !important; }
}

/* ===================================================================
   PAINEL EMPILHADO — o relatório mostra o documento inteiro

   A vista do relatório (e a da leitura) empilha o painel da roda em
   cima. Quem manda é o painel do topo: é dele a barra de ações, porque
   é no topo que a pessoa cai e é lá que "Salvar em PDF" precisa estar.
   Os de baixo viram continuação e escondem a própria barra — senão
   apareceria um segundo "Salvar em PDF" no meio do documento.
   =================================================================== */

#mapa-astral-page .ma-panel.is-stacked > .ma-actions { display: none; }

/* O de baixo encosta no de cima: o respiro já veio do painel anterior, e somar
   os dois abriria um vão no meio do documento. */
#mapa-astral-page .ma-panel.is-stacked { padding-top: 0; }

/* ------------------------------------------------- o botão de salvar em PDF

   Era um contorno igual ao "voltar", e ficava perdido: baixar o documento é o
   que a pessoa quer fazer depois de pagar por ele, e concorria em silêncio com
   um link de navegação. Agora é sólido, dourado, com ícone — e vem primeiro na
   linha, porque a ordem visual é a ordem da intenção. */
#mapa-astral-page .ma-actions { align-items: center; }

#mapa-astral-page .ma-back--print {
  order: -1;
  padding: 12px 22px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8c97a, #c9a961);
  color: #17121f;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(201, 169, 97, .22);
  transition: filter .2s ease, transform .2s ease;
}

#mapa-astral-page .ma-back--print:hover {
  border: none;
  color: #17121f;
  filter: brightness(1.07);
  transform: translateY(-1px);
}

#mapa-astral-page .ma-back--print::before {
  content: "⭳";
  margin-right: 9px;
  font-size: 1.05em;
}

@media (max-width: 560px) {
  #mapa-astral-page .ma-back--print { width: 100%; text-align: center; }
}

/* A oferta some quando o documento está na tela.

   Empilhar a roda acima do relatório trouxe junto o bloco que vende o
   relatório — e vender para quem acabou de comprar, na mesma tela em que o
   produto foi entregue, é o pior lugar possível para um preço. O convite da
   pergunta ao mapa vai junto: ele também mora nesse bloco, e o relatório já
   traz o próprio fechamento no fim.

   O gancho não pode ser `.is-stacked`: a oferta mora no painel da roda, que
   nessa vista é justamente o que NÃO está empilhado. Quem decide é a presença
   do relatório na tela, e ele é um irmão — daí o `:has()` no contêiner. */
#mapa-astral-page .ma-experience:has([data-panel="report"]:not([hidden])) .ma-offer {
  display: none;
}

/* A seção de venda do relatório, mais abaixo na página, some pelo mesmo
   motivo — e também durante a geração: anunciar o preço de um produto para
   quem está esperando esse produto ficar pronto é pior ainda.

   O guia de leitura e o FAQ continuam: são conteúdo, não oferta. */
#mapa-astral-page .ma-page:has([data-panel="report"]:not([hidden])) .ma-section--report,
#mapa-astral-page .ma-page:has([data-panel="working"]:not([hidden])) .ma-section--report {
  display: none;
}

/* ===================================================================
   A TELA DE ESPERA

   Aparece entre o pagamento e o documento. Doze capítulos levam de 15 a
   35 segundos — tempo demais para uma tela parada logo depois de alguém
   pagar R$ 19,90. Antes a espera inteira morava no texto de um botão.

   Não há porcentagem: seria inventada. O que combate a sensação de
   travado é a frase mudar dizendo o que está sendo escrito agora.
   =================================================================== */

#mapa-astral-page .ma-panel--working { padding: 72px 0 96px; }

#mapa-astral-page .ma-working {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

#mapa-astral-page .ma-working__wheel {
  width: 132px;
  margin: 0 auto 30px;
  opacity: .55;
  animation: ma-working-spin 26s linear infinite;
}

#mapa-astral-page .ma-working__wheel svg { display: block; width: 100%; height: auto; }
#mapa-astral-page .ma-working__wheel .ha-ring { fill: none; stroke: rgba(229, 191, 109, .55); stroke-width: 1; }
#mapa-astral-page .ma-working__wheel .ha-ring--faint { stroke: rgba(229, 191, 109, .28); }
#mapa-astral-page .ma-working__wheel .ha-spokes path { stroke: rgba(229, 191, 109, .32); stroke-width: 1; }
#mapa-astral-page .ma-working__wheel .ha-glyphs text {
  fill: rgba(229, 191, 109, .9);
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: middle;
}
#mapa-astral-page .ma-working__wheel .ha-bodies circle { fill: var(--ma-gold-light); }
#mapa-astral-page .ma-working__wheel .ha-aspect { fill: none; stroke: rgba(185, 156, 255, .5); stroke-width: .8; }

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

/* Movimento constante numa tela cheia incomoda quem tem sensibilidade
   vestibular, e a informação aqui não depende dele. */
@media (prefers-reduced-motion: reduce) {
  #mapa-astral-page .ma-working__wheel { animation: none; }
  #mapa-astral-page .ma-working__bar span { animation: none; width: 40%; }
}

#mapa-astral-page .ma-working__kicker {
  margin: 0 0 8px;
  color: var(--ma-gold);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
}

#mapa-astral-page .ma-page .ma-working__title {
  margin: 0 0 26px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 500;
  text-align: center;
}

#mapa-astral-page .ma-page .ma-working__step {
  min-height: 1.6em;
  margin: 0 0 18px;
  color: var(--ma-ink);
  font-size: 1.02rem;
  text-align: center;
}

#mapa-astral-page .ma-working__bar {
  overflow: hidden;
  height: 3px;
  margin: 0 auto 30px;
  border-radius: 999px;
  background: rgba(229, 191, 109, .14);
}

/* Vaivém, e não preenchimento: uma barra que enche até 90% e para diz uma
   coisa falsa sobre quanto falta. */
#mapa-astral-page .ma-working__bar span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ma-gold), transparent);
  animation: ma-working-slide 1.9s ease-in-out infinite;
}

@keyframes ma-working-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(265%); }
}

#mapa-astral-page .ma-page .ma-working__note,
#mapa-astral-page .ma-page .ma-working__where {
  margin: 0 auto 14px;
  max-width: 430px;
  font-size: .88rem;
  line-height: 1.65;
  text-align: center;
}

#mapa-astral-page .ma-page .ma-working__note strong { color: var(--ma-ink); }

#mapa-astral-page .ma-page .ma-working__where {
  padding-top: 16px;
  border-top: 1px solid rgba(229, 191, 109, .16);
  color: var(--ma-muted);
  font-size: .82rem;
}

/* Miniatura do botão de saldo do cabeçalho: apontar para "seu saldo no topo"
   com o desenho dele ao lado é o que faz a pessoa achar de primeira. */
#mapa-astral-page .ma-working__chip {
  display: inline-block;
  margin: 0 3px;
  padding: 2px 9px;
  border: 1px solid rgba(229, 191, 109, .4);
  border-radius: 999px;
  color: var(--ma-gold-light);
  font-size: .76rem;
  white-space: nowrap;
}

/* A espera não é documento: não entra no PDF. */
@media print {
  #mapa-astral-page [data-panel="working"] { display: none !important; }
}

/* O relatório na tela é uma coluna, como no papel.

   Capa, sumário e capítulos passam a dividir a mesma medida, centrada. Antes
   cada um tinha a sua: capa e sumário ocupavam os 1180px do contêiner e os
   capítulos paravam em 900 colados à esquerda — três alinhamentos diferentes
   no mesmo documento.

   A medida não é o contêiner inteiro de propósito: 1180px de texto justificado
   dá uma linha longa demais para o olho voltar sem se perder. Aqui a linha fica
   perto da do PDF, que é o que já estava bom. */
#mapa-astral-page .ma-report {
  max-width: 900px;
  margin-inline: auto;
}

/* No papel quem define a largura é a folha; esta medida atrapalharia. */
@media print {
  #mapa-astral-page .ma-report { max-width: none; margin-inline: 0; }
}