.app-stores-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.app-stores-banner .app-stores-banner__gif {
  width: 100%;
  max-width: 346px;
  height: auto;
  display: block;
}
.app-stores-banner .app-stores-banner__buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.app-stores-banner .app-stores-banner__store-link {
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
}
.app-stores-banner .app-stores-banner__badge {
  width: 144px;
  height: auto;
  display: block;
}
.articles-search,
.articles-search-field,
.articles-search-results {
  --as-purple: #8845af;
  --as-purple-dark: #6e3691;
  --as-border: #b4adbf;
  --as-border-hover: #8e85a0;
  --as-bg: #fff;
  --as-text: #3a2f4a;
  --as-muted: #7a7188;
  --as-button-bg: #fafafa;
  --as-button-hover: rgba(136, 69, 175, 0.06);
  --as-card-hover: rgba(136, 69, 175, 0.04);
  --as-focus-ring: rgba(136, 69, 175, 0.18);
  --as-inset-shadow: rgba(58, 47, 74, 0.18);
  --as-inset-shadow-focused: rgba(58, 47, 74, 0.1);
  --as-dropdown-shadow: rgba(58, 47, 74, 0.1);
  --as-skeleton-base: #efe9f5;
  --as-skeleton-highlight: #f7f3fc;
  --as-retry-text: #fff;
}

@keyframes articles-search-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.articles-search-field {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--as-border);
  border-radius: 4px;
  background: var(--as-bg);
  box-shadow: inset 0 2px 4px var(--as-inset-shadow);
  transition: border-color 180ms ease, box-shadow 180ms ease;
  overflow: hidden;
}
.articles-search-field:hover {
  border-color: var(--as-border-hover);
}
.articles-search-field--focused {
  box-shadow: inset 0 2px 4px var(--as-inset-shadow-focused), 0 0 0 3px var(--as-focus-ring);
}
.articles-search-field--focused, .articles-search-field--focused:hover {
  border-color: var(--as-purple);
}
.articles-search-field .articles-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 18px;
  line-height: 1.4;
  background: transparent;
  color: var(--as-text);
  padding: 12px 16px;
}
.articles-search-field .articles-search-field__input::placeholder {
  color: var(--as-muted);
  font-size: 16px;
}
.articles-search-field .articles-search-field__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  border: none;
  border-left: 1px solid var(--as-border);
  border-radius: 0;
  cursor: pointer;
  background: var(--as-button-bg);
  transition: background 180ms ease;
  flex-shrink: 0;
}
.articles-search-field .articles-search-field__button:hover {
  background: var(--as-button-hover);
}
.articles-search-field .articles-search-field__icon {
  width: 18px;
  height: 18px;
  display: block;
  filter: none;
  transition: filter 180ms ease;
}
.articles-search-field .articles-search-field__button--active {
  background: var(--as-purple);
}
.articles-search-field .articles-search-field__button--active:hover {
  background: var(--as-purple-dark);
}
.articles-search-field .articles-search-field__button--active .articles-search-field__icon {
  filter: brightness(0) invert(1);
}

.articles-search-results .articles-search-results__thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--as-border);
}
.articles-search-results .articles-search-results__text {
  flex: 1;
  min-width: 0;
}
.articles-search-results .articles-search-results__title {
  font-size: 14px;
  line-height: 1.3;
  color: var(--as-text);
  margin: 0 0 4px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.articles-search-results .articles-search-results__skeleton-card {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--as-border);
}
.articles-search-results .articles-search-results__skeleton-card:last-child {
  border-bottom: none;
}
.articles-search-results .articles-search-results__skeleton-thumb,
.articles-search-results .articles-search-results__skeleton-line {
  background: linear-gradient(90deg, var(--as-skeleton-base) 0%, var(--as-skeleton-highlight) 50%, var(--as-skeleton-base) 100%);
  background-size: 200% 100%;
  animation: articles-search-shimmer 1.5s infinite;
}
.articles-search-results .articles-search-results__skeleton-thumb {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  flex-shrink: 0;
}
.articles-search-results .articles-search-results__skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
}
.articles-search-results .articles-search-results__skeleton-line {
  height: 12px;
  width: 100%;
  border-radius: 4px;
}
.articles-search-results .articles-search-results__skeleton-line--80 {
  width: 80%;
}
.articles-search-results .articles-search-results__skeleton-line--60 {
  width: 60%;
}
.articles-search-results .articles-search-results__message {
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--as-muted);
  line-height: 1.5;
}
.articles-search-results .articles-search-results__retry {
  margin-top: 10px;
  background: var(--as-purple);
  color: var(--as-retry-text);
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 150ms ease;
}
.articles-search-results .articles-search-results__retry:hover {
  background: var(--as-purple-dark);
}
.articles-search-results .articles-search-results__card {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--as-border);
  transition: background 150ms ease;
}
.articles-search-results .articles-search-results__card:last-child {
  border-bottom: none;
}
.articles-search-results .articles-search-results__card:hover {
  background: var(--as-card-hover);
}
.articles-search-results .articles-search-results__found {
  font-size: 12px;
  color: var(--as-muted);
  padding: 10px 16px 6px;
  margin: 0;
  border-bottom: 1px solid var(--as-border);
}
.articles-search-results .articles-search-results__snippet {
  font-size: 12px;
  line-height: 1.4;
  color: var(--as-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}.articles-search {
  position: relative;
  width: 100%;
  margin-block: 20px 15px;
  font-family: inherit;
}
.articles-search .articles-search__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 460px;
  overflow-y: auto;
  background: var(--as-bg);
  border: 1px solid var(--as-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px var(--as-dropdown-shadow);
  z-index: 100;
  padding: 6px 0;
}
.articles-search .articles-search__dropdown::-webkit-scrollbar {
  width: 6px;
}
.articles-search .articles-search__dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.articles-search .articles-search__dropdown::-webkit-scrollbar-thumb {
  background: var(--as-border);
  border-radius: 3px;
}/*$vite$:1*/
.maintenance-message {
  --mm-text: #979797;
  width: 100%;
  margin: auto;
  display: flex;
  padding: 20px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.maintenance-message .maintenance-message__image {
  width: 100px;
  object-fit: contain;
  margin-bottom: -10px;
}
.maintenance-message .maintenance-message__text {
  margin: 0;
  font-size: 1em;
  text-align: center;
  color: var(--mm-text);
  white-space: pre-line;
}.sky-moment-panel {
  --smp-zebra-odd: #fff;
  --smp-zebra-even: #fafafa;
  --smp-fade-start: #fafafa01;
  --smp-text: #313131;
  --smp-text-secondary: #6a6a6a;
  --smp-title: #343f8f;
  --smp-primary: #343f8f;
  --smp-aspect-conjunction: #3b82f6;
  --smp-aspect-trine: #10b981;
  --smp-aspect-square: #ef4444;
  --smp-button-border: #d9d9d9;
  --smp-expand-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.514 8c.291-.003.57-.124.777-.338l5.379-5.65c.21-.22.33-.519.33-.831 0-.313-.117-.613-.327-.834A1.095 1.095 0 0 0 11.881 0c-.298 0-.583.123-.794.343L6.5 5.161 1.913.343A1.095 1.095 0 0 0 1.119 0C.822 0 .537.125.327.347.117.568-.001.868 0 1.18c0 .312.12.611.33.832L5.71 7.662c.106.11.232.196.37.254.138.058.286.086.435.084z' fill='%238d78aa'/%3E%3C/svg%3E");
  --smp-planet-filter: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sky-moment-panel--dark {
  --smp-zebra-odd: #1a1a1a;
  --smp-zebra-even: #242424;
  --smp-fade-start: #24242401;
  --smp-text: #e5e5e5;
  --smp-text-secondary: #a3a3a3;
  --smp-title: #8b9aff;
  --smp-primary: #8b9aff;
  --smp-aspect-conjunction: #60a5fa;
  --smp-aspect-trine: #34d399;
  --smp-aspect-square: #f87171;
  --smp-button-border: #4a4a4a;
  --smp-expand-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.514 8c.291-.003.57-.124.777-.338l5.379-5.65c.21-.22.33-.519.33-.831 0-.313-.117-.613-.327-.834A1.095 1.095 0 0 0 11.881 0c-.298 0-.583.123-.794.343L6.5 5.161 1.913.343A1.095 1.095 0 0 0 1.119 0C.822 0 .537.125.327.347.117.568-.001.868 0 1.18c0 .312.12.611.33.832L5.71 7.662c.106.11.232.196.37.254.138.058.286.086.435.084z' fill='%23ffffffff'/%3E%3C/svg%3E");
  --smp-planet-filter: invert(1);
}
.sky-moment-panel > div {
  width: 100%;
  display: flex;
  padding: 10px;
  align-items: center;
  flex-direction: column;
  background-color: var(--smp-zebra-odd);
}
.sky-moment-panel > div > div {
  width: 100%;
}
.sky-moment-panel .positioning__expand,
.sky-moment-panel .positioning__collapse {
  width: 100%;
  height: auto;
  padding: 10px;
  margin-top: 0px;
  border-radius: 100px;
  background-size: 16px 10px;
  background-position: center;
  background-repeat: no-repeat;
  transition: margin-top 0.3s ease-out;
  border-color: var(--smp-button-border);
  background-color: var(--smp-zebra-odd);
  background-image: var(--smp-expand-icon);
}
.sky-moment-panel .positioning__collapse {
  margin-top: 15px;
  transform: rotate(180deg);
}
.sky-moment-panel .button.button--full {
  height: 27px;
}
.sky-moment-panel .positioning__fade {
  background-image: linear-gradient(var(--smp-fade-start) 0%, 20%, var(--smp-zebra-even) 95%);
}
.sky-moment-panel .aspects__title {
  color: var(--smp-title);
}
.sky-moment-panel .positions__item {
  color: var(--smp-text);
  background-color: var(--smp-zebra-odd);
}
.sky-moment-panel .positions__item:nth-child(even) {
  background-color: var(--smp-zebra-even);
}
.sky-moment-panel .positions [class*=planet--]::before {
  filter: var(--smp-planet-filter);
}
.sky-moment-panel .positions__planet a {
  color: var(--smp-primary);
}
.sky-moment-panel .positions__degree {
  color: var(--smp-text-secondary);
}
.sky-moment-panel .aspects__item {
  color: var(--smp-text);
  background-color: var(--smp-zebra-even);
}
.sky-moment-panel .aspects__item:nth-child(even) {
  background-color: var(--smp-zebra-odd);
}
.sky-moment-panel .aspects__planet {
  color: var(--smp-text);
}
.sky-moment-panel .aspects__orb {
  color: var(--smp-text-secondary);
}
.sky-moment-panel .aspects__aspect--conjunction {
  color: var(--smp-aspect-conjunction);
}
.sky-moment-panel .aspects__aspect--trine,
.sky-moment-panel .aspects__aspect--sextile {
  color: var(--smp-aspect-trine);
}
.sky-moment-panel .aspects__aspect--square,
.sky-moment-panel .aspects__aspect--opposition {
  color: var(--smp-aspect-square);
}/*$vite$:1*/
.aspects {
  margin-top: 30px;
}
.aspects__title {
  color: #343f8f;
  display: grid;
  grid-template-columns: 112px 40px;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 10px;
}
.aspects__item {
  background: #fafafa;
  display: grid;
  grid-template-columns: 66px 62px 82px 25px;
  color: #313131;
  font-size: 16px;
  align-content: center;
  height: 40px;
  padding: 0 10px 2px;
  justify-content: space-between;
  align-items: center;
}
.aspects__item:nth-child(even) {
  background: #fff;
}
.aspects__planet, .aspects__aspect {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aspects__aspect {
  font-size: 12px;
  padding-top: 2px;
}
.aspects__aspect--conjunction {
  color: #83a3bd;
}
.aspects__aspect--square, .aspects__aspect--opposition {
  color: #fe6363;
}
.aspects__aspect--trine, .aspects__aspect--sextile {
  color: #4ccf93;
}
.aspects__orb {
  font-size: 12px;
  color: #6a6a6a;
  padding-top: 2px;
}.positions__help {
  border-radius: 5px;
  background: #5769ef;
  width: 15px;
  height: 15px;
  display: inline-block;
  font-size: 12px;
  color: #fff;
  font-weight: 900;
  position: relative;
  top: -5px;
  line-height: 15px;
  text-decoration: none;
}
.positions [class*=planet--]::before {
  width: 13px;
  height: 13px;
  background-size: 13px;
  display: inline-block;
  opacity: 0.4;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.positions .planet--moon::before,
.positions .planet--jupiter::before {
  background-size: 10px;
}
.positions .planet--mercury::before,
.positions .planet--saturn::before {
  background-size: 8px;
}
.positions .planet--venus::before,
.positions .planet--lilith::before {
  background-size: 9px;
}
.positions .planet--uranus::before,
.positions .planet--quiron::before {
  background-size: 7px;
}
.positions .planet--neptune::before {
  background-size: 12px;
}
.positions .planet--pluto::before {
  background-size: 11px;
}
.positions [class*=sign--]::before {
  width: 20px;
  height: 23px;
  background-size: 20px;
  display: inline-block;
  position: relative;
  top: 6px;
  margin-right: 4px;
}
.positions__item {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 60px 50px;
  color: #313131;
  font-size: 14px;
  align-content: center;
  height: 40px;
  padding: 0 10px 2px;
}
.positions__item:nth-child(even) {
  background: #fafafa;
}
.positions__planet {
  align-self: center;
  font-size: 16px;
}
.positions__planet--moon {
  display: grid;
  grid-template-columns: 20px 50px 60px;
  align-items: center;
}
.positions__planet a {
  color: #5769ef;
  font-size: 12px;
  line-height: 13px;
  position: relative;
  height: 27px;
  display: flex;
  align-items: center;
  cursor: default;
  text-decoration: none;
}
.positions__planet a::before {
  content: "";
  position: absolute;
  left: -17px;
  width: 9px;
  height: 15px;
  opacity: 0.5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 9px;
  top: 7px;
  background-image: url("/assets/images/chevron-right-dark.svg");
}
.positions__sign {
  align-self: center;
  font-weight: 900;
  padding-bottom: 8px;
}
.positions__degree {
  align-self: center;
  color: #6a6a6a;
  font-weight: 900;
}
.positions__degree small {
  font-size: 11px;
  font-weight: 400;
  margin-left: 3px;
}
.positions__modal-title {
  font-weight: 900;
  display: block;
  text-transform: uppercase;
}
.positions__modal p {
  font-size: 16px;
  color: #313131;
  line-height: 22px;
  margin: 15px 0 20px;
}
.positions__modal a {
  float: right;
  cursor: default;
}.positioning {
  position: relative;
}
.positioning.expandable-content--expanded .positioning__fade {
  display: none;
}
.positioning__fade {
  background-image: linear-gradient(rgba(255, 255, 255, 0.001) 0%, 20%, #fafafa 95%);
  height: 50px;
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
}
.positioning__expand, .positioning__collapse {
  background-image: url("/assets/images/chevron-bottom-default.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  height: 33px;
}
.positioning__expand span, .positioning__collapse span {
  display: none;
}
.positioning__collapse {
  transform: rotate(180deg);
}/*$vite$:1*/
@charset "UTF-8";
/*
 * ArticleTemplate: módulo do shell de conteúdo emitido por
 * `Astrolink/website/article_template/` (artigo, interpretação, casa, planeta, signo).
 *
 * O nome do arquivo de saída (`articletemplate.module.css`) vem do nome DESTE arquivo em
 * minúsculas, e é o que as páginas importam via `getRevisionContent`.
 *
 * Divide a página com `articles.container.css`, que cobre os botões, o cartão de autor e o
 * banner de lojas; aqui ficam a ESTRUTURA do shell e a tipografia do corpo. Regra que
 * parece repetir uma de lá é override de escopo, e a disputa é resolvida por
 * ESPECIFICIDADE: a ordem de carga dos dois arquivos não é garantida.
 *
 * Cor: nenhum hex literal. Os tokens novos e o tema escuro ficam em
 * `_articleTemplate.tokens.scss`; os 29 pré-existentes seguem no `:root` de
 * `Astrolink/website/css/style.css`, porque têm consumidor fora dos containers de artigo.
 */
/*
 * Tokens de cor da área de conteúdo. Os 29 PRÉ-EXISTENTES continuam no `:root` de
 * `Astrolink/website/css/style.css`: têm consumidor fora dos containers de artigo
 * (`painel_biorhythm.php`, `painel_minhas_consultas.php`), então mover é card próprio.
 *
 * `body.theme-dark` é escrito pelo PHP por `contentThemeBodyClass()`. O bloco escuro revalora
 * TAMBÉM os 7 pré-existentes que a área consome, e vence o `:root` do legado por
 * ESPECIFICIDADE — a ordem de carga é irrelevante.
 */
:root {
  /* ---- página de conteúdo (tema claro) ---- */
  --content-bg: #ffffff;
  --content-title-color: #313131; /* $titleColor = $gray900 */
  --content-paragraph-color: #313131; /* $paragraphColor = $gray900 */
  --content-anchor-color: #a126c3; /* $anchorColor = $purple500 */
  --content-muted: #6b6b6b;
  --content-separator: #ebebeb; /* LineSeparator = $gray200 */
  --content-categories-rule: #dfdfdf; /* régua do accordion de categorias = $gray300 */
  /* Sobre a FOTO da faixa de cadastro, que é escura nos dois temas: este token não
   * inverte no escuro. */
  --content-on-photo: #ffffff;
  --content-cta-bg: #f5f2fa;
  --content-cta-button: #a126c3; /* $purple500 do stitches — a cor chapada do botão do Next */
  --content-cta-border: #d9cfe6;
  --content-accent: #a126c3; /* $purple500 */
  --content-bar-gradient-from: #31095b;
  --content-bar-gradient-to: #953ee2;
  /* O círculo cheio dos botões de rede: $purple600 do stitches, não o $purple500 do resto. */
  --content-social-bg: #8c26bf;
  --content-social-glyph: #ffffff;
}

body.theme-dark {
  /* pré-existentes: declarados no legado, revalorados aqui */
  --color-black: #e8e4f5;
  --color-white: #12101a;
  --darker-grey: #cfc9e0;
  --color-hover: #2a2637;
  --regular-grey: #b8b2c8;
  --title-blue: #9aa6ef;
  --text-purple: #c79bea;
  /* página de conteúdo */
  --content-bg: #12101a;
  --content-title-color: #e8e4f5;
  --content-paragraph-color: #b8b2c8;
  --content-anchor-color: #c79bea;
  --content-muted: #8b8598;
  --content-separator: #2a2637;
  --content-categories-rule: #2a2637;
  --content-cta-bg: #1c1828;
  --content-cta-button: #953ee2;
  --content-cta-border: #3a3150;
  --content-accent: #b894ef;
  --content-bar-gradient-from: #31095b;
  --content-bar-gradient-to: #953ee2;
  /* Um tom acima no escuro, como o botão do CTA; o glifo segue branco nos dois temas. */
  --content-social-bg: #953ee2;
}

.aspects {
  margin-top: 30px;
}
.aspects__title {
  color: #343f8f;
  display: grid;
  grid-template-columns: 112px 40px;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 10px;
}
.aspects__item {
  background: #fafafa;
  display: grid;
  grid-template-columns: 66px 62px 82px 25px;
  color: #313131;
  font-size: 16px;
  align-content: center;
  height: 40px;
  padding: 0 10px 2px;
  justify-content: space-between;
  align-items: center;
}
.aspects__item:nth-child(even) {
  background: #fff;
}
.aspects__planet, .aspects__aspect {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aspects__aspect {
  font-size: 12px;
  padding-top: 2px;
}
.aspects__aspect--conjunction {
  color: #83a3bd;
}
.aspects__aspect--square, .aspects__aspect--opposition {
  color: #fe6363;
}
.aspects__aspect--trine, .aspects__aspect--sextile {
  color: #4ccf93;
}
.aspects__orb {
  font-size: 12px;
  color: #6a6a6a;
  padding-top: 2px;
}

.positioning {
  position: relative;
}
.positioning.expandable-content--expanded .positioning__fade {
  display: none;
}
.positioning__fade {
  background-image: linear-gradient(rgba(255, 255, 255, 0.001) 0%, 20%, #fafafa 95%);
  height: 50px;
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
}
.positioning__expand, .positioning__collapse {
  background-image: url("/assets/images/chevron-bottom-default.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  height: 33px;
}
.positioning__expand span, .positioning__collapse span {
  display: none;
}
.positioning__collapse {
  transform: rotate(180deg);
}

.positions__help {
  border-radius: 5px;
  background: #5769ef;
  width: 15px;
  height: 15px;
  display: inline-block;
  font-size: 12px;
  color: #fff;
  font-weight: 900;
  position: relative;
  top: -5px;
  line-height: 15px;
  text-decoration: none;
}
.positions [class*=planet--]::before {
  width: 13px;
  height: 13px;
  background-size: 13px;
  display: inline-block;
  opacity: 0.4;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.positions .planet--moon::before,
.positions .planet--jupiter::before {
  background-size: 10px;
}
.positions .planet--mercury::before,
.positions .planet--saturn::before {
  background-size: 8px;
}
.positions .planet--venus::before,
.positions .planet--lilith::before {
  background-size: 9px;
}
.positions .planet--uranus::before,
.positions .planet--quiron::before {
  background-size: 7px;
}
.positions .planet--neptune::before {
  background-size: 12px;
}
.positions .planet--pluto::before {
  background-size: 11px;
}
.positions [class*=sign--]::before {
  width: 20px;
  height: 23px;
  background-size: 20px;
  display: inline-block;
  position: relative;
  top: 6px;
  margin-right: 4px;
}
.positions__item {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 60px 50px;
  color: #313131;
  font-size: 14px;
  align-content: center;
  height: 40px;
  padding: 0 10px 2px;
}
.positions__item:nth-child(even) {
  background: #fafafa;
}
.positions__planet {
  align-self: center;
  font-size: 16px;
}
.positions__planet--moon {
  display: grid;
  grid-template-columns: 20px 50px 60px;
  align-items: center;
}
.positions__planet a {
  color: #5769ef;
  font-size: 12px;
  line-height: 13px;
  position: relative;
  height: 27px;
  display: flex;
  align-items: center;
  cursor: default;
  text-decoration: none;
}
.positions__planet a::before {
  content: "";
  position: absolute;
  left: -17px;
  width: 9px;
  height: 15px;
  opacity: 0.5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 9px;
  top: 7px;
  background-image: url("/assets/images/chevron-right-dark.svg");
}
.positions__sign {
  align-self: center;
  font-weight: 900;
  padding-bottom: 8px;
}
.positions__degree {
  align-self: center;
  color: #6a6a6a;
  font-weight: 900;
}
.positions__degree small {
  font-size: 11px;
  font-weight: 400;
  margin-left: 3px;
}
.positions__modal-title {
  font-weight: 900;
  display: block;
  text-transform: uppercase;
}
.positions__modal p {
  font-size: 16px;
  color: #313131;
  line-height: 22px;
  margin: 15px 0 20px;
}
.positions__modal a {
  float: right;
  cursor: default;
}

/* Bootstrap 3 declara `html { font-size: 10px }`; sem esta regra todo `rem` do artigo renderiza
 * a 62,5%. Escopo: só as páginas que escrevem `content-root` no `<html>`. */
html.content-root {
  font-size: 16px;
}

/* ── FUNDO E CONTAINER ───────────────────────────────────────────────────── */
.content-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--content-bg);
}

/* Absoluto e `aria-hidden`, atrás de tudo: faixa de respiro no mobile, imagem no desktop. */
.content-page__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 471.6px;
  pointer-events: none;
}

html.content-root body {
  background-image: none;
}

.content-page__grid {
  /* Bootstrap 3 declara `body { font-size: 14px }`. Fica no grid, não no `<body>`: o cromo do
   * legado é desenhado para 14px. */
  font-size: 1rem;
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  /* A ordem visual das sete regiões é definida só aqui: o shell as emite sempre na ordem do
   * DOM, e `order` não posiciona região neste arquivo. */
  grid-template-areas: "header" "cta" "body" "share" "left" "right" "auth";
}

.content-page__grid--interpretation {
  grid-template-areas: "header" "cta" "body" "left" "share" "right" "auth";
}

.content-page__header {
  grid-area: header;
}

.content-page__cta {
  grid-area: cta;
}

.content-page__body {
  grid-area: body;
}

.content-page__share {
  grid-area: share;
}

.content-page__grid--interpretation .content-page__share {
  margin-bottom: 24px;
}

.content-page__side--left {
  grid-area: left;
}

.content-page__side--right {
  grid-area: right;
}

.content-page__auth {
  grid-area: auth;
}

/* `header` e `body` são as únicas regiões com marcação no SSR; o resto do grid é montado pelo
 * `articletemplate.module.js`. `display: block` é obrigatório: elemento desconhecido é `inline`,
 * e antes do grid aplicado o artigo renderizaria em linha. */
article-template,
article-head,
article-body,
article-rising-positions,
article-planet-in-signs,
article-planet-in-houses,
article-signs-on-astrolink,
article-user-position {
  display: block;
}

/* ── AS SUPERFÍCIES DAS REGIÕES ──────────────────────────────────────────── */
.content-page__header,
.content-page__cta,
.content-page__body,
.content-page__share,
.content-page__side,
.content-page__auth {
  width: 100%;
  background-color: var(--content-bg);
}

.content-page__header,
.content-page__cta,
.content-page__body,
.content-page__share,
.content-page__side {
  padding-right: 10px;
  padding-left: 10px;
}

/* Fora de `p`/`li` o corpo tem o `<a class="btn-default btn2">` de `interpretacao.php`, que
 * não pode sublinhar. */
.content-page__body p a,
.content-page__body li a {
  text-decoration: underline;
}

.content-page__body p a:has(img),
.content-page__body li a:has(img) {
  text-decoration: none;
}

/*
 * Tipografia do corpo. Precisa vencer `.article-format #article_body p, b` (1,1,1) de
 * `articles.container.css`, que também dá 18px ao `b`, e o `p { font-family: Lato !important }` de `ui.css`.
 */
.content-page__grid #article_body.content-page__body p,
.content-page__grid #article_body.content-page__body li,
.content-page__grid #article_body.content-page__body b,
.content-page__grid #article_body.content-page__body strong {
  color: var(--content-paragraph-color);
}
.content-page__grid #article_body.content-page__body p,
.content-page__grid #article_body.content-page__body li {
  font-family: "Noto Serif Georgian", serif !important;
  font-size: 1rem;
  font-weight: var(--weight-normal);
  line-height: 30px;
  letter-spacing: normal;
}
.content-page__grid #article_body.content-page__body p {
  margin: 0 0 32px;
}
.content-page__grid #article_body.content-page__body li {
  margin-bottom: 5px;
}
.content-page__grid #article_body.content-page__body li:last-of-type {
  margin-bottom: 0;
}
.content-page__grid #article_body.content-page__body li::marker {
  color: var(--content-title-color);
}
.content-page__grid #article_body.content-page__body li p {
  margin: 0;
}
.content-page__grid #article_body.content-page__body h2 {
  font-size: 1.375rem;
}
.content-page__grid #article_body.content-page__body h3 {
  font-size: 1.25rem;
}
.content-page__grid #article_body.content-page__body p b,
.content-page__grid #article_body.content-page__body p strong,
.content-page__grid #article_body.content-page__body li b,
.content-page__grid #article_body.content-page__body li strong {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.content-page__grid #article_body.content-page__body p a:not(.article__button),
.content-page__grid #article_body.content-page__body li a:not(.article__button) {
  color: var(--content-anchor-color);
}
.content-page__grid #article_body.content-page__body img {
  max-width: 100%;
  height: auto;
}

/* ── CTA DE CONTEÚDO ─────────────────────────────────────────────────────── */
.content-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px 0;
  margin: 20px 0 30px;
  text-align: center;
}

.content-cta__title {
  font-size: 1rem;
  font-weight: var(--weight-normal);
  line-height: 1.5;
  color: var(--content-paragraph-color);
}

/*
 * Chapado, com a borda na cor do fundo: é o átomo `Button` do Next. O legado veste este
 * botão com `.button-articles`, que é um gradiente: daí o `background-image: none`.
 */
.content-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  border: solid 1px var(--content-cta-button);
  background-color: var(--content-cta-button);
  background-image: none;
  /* 18px aqui e 24px no desktop; o `.button-articles` do legado dá 14px. */
  font-size: 1.125rem;
}

/*
 * O Bootstrap 3 do legado põe `white-space: nowrap` no `.btn`, então o rótulo não quebrava: na
 * coluna lateral, mais estreita que o corpo, o botão estourava o container: o `padding: 20px
 * 25px` do `.button-articles` somado a 24px de fonte no desktop não cabe em uma linha. Desce de
 * `.content-page__grid` para vencer o `.btn` (0,1,0) por especificidade, porque a ordem de carga
 * entre `articles.container.css` e este arquivo não é garantida.
 */
.content-page__grid .content-cta__button {
  max-width: 100%;
  white-space: normal;
}

.content-cta__icon {
  flex: 0 0 auto;
  width: 24px;
  height: auto;
  object-fit: contain;
}

/* ── COLUNAS ─────────────────────────────────────────────────────────────── */
.content-page__side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── COMPARTILHAMENTO ────────────────────────────────────────────────────── */
.content-page__share {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
}
.content-page__share::before {
  display: block;
  width: 100%;
  height: 0;
  margin-bottom: 24px;
  border-top: solid 1px var(--content-separator);
  content: "";
}

/*
 * A regua de baixo do artigo nao e do share: e a regua que abre a coluna esquerda, que la vem
 * logo depois dele na ordem das areas. Aqui a esquerda vem ANTES do share, entao nao ha bloco
 * seguinte para trazer regua e o share precisa desenhar a propria. So no mobile, como a de la.
 */
.content-page__grid--interpretation .content-page__share::after {
  display: block;
  width: 100%;
  height: 0;
  margin-top: 24px;
  border-top: solid 1px var(--content-separator);
  content: "";
}

/*
 * O `nav` do Next é um grid de sete colunas (`1fr repeat(5, minmax(auto, 80px)) 1fr`) com cada
 * rede posicionada por `nth-of-type`. As duas colunas `1fr` só centralizam as cinco do meio, e
 * é o que `justify-content` faz aqui, com o mesmo resultado e sem as cinco regras de posição.
 */
.content-share {
  display: grid;
  justify-content: center;
  width: 100%;
  grid-template-columns: repeat(5, minmax(auto, 80px));
}

/* Leva o bloco no seletor pelo mesmo motivo do card de relacionados: `.legacy p` (0,1,1) de
 * `ui.css`/`defaulttext.module.css` venceria a classe sozinha. */
.content-page__share .content-share__label {
  grid-column: 1/-1;
  margin-bottom: 12px;
  font-weight: var(--weight-bold);
  color: var(--content-paragraph-color);
  text-align: center;
  opacity: 0.68;
}

.content-share__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5px;
  margin-inline: 10px;
  cursor: pointer;
  /* As bordas externas do grid não levam margem: o Next zera nas redes 1 e 5. */
}
.content-share__link:first-of-type {
  margin-inline-start: 0;
}
.content-share__link:last-of-type {
  margin-inline-end: 0;
}
.content-share__link:focus-visible {
  filter: brightness(1.5);
}

.content-share__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  padding: 1px;
  background-color: var(--content-social-bg);
  border-radius: 100%;
}
.content-share__icon svg {
  width: 22px;
  height: 22px;
}
.content-share__icon {
  /*
   * Serve às cinco redes de uma vez: os SVGs vêm do Next com `fill="none"` no `<g>` de fora, e
   * `fill` declarado NO `path` vence o valor herdado do ancestral.
   */
}
.content-share__icon svg path {
  fill: var(--content-social-glyph);
}

.content-share__name {
  color: var(--content-paragraph-color);
  font-size: 1rem;
  text-align: center;
  opacity: 0.68;
}

/* ── SEÇÃO DE AUTH (área `auth`) ─────────────────────────────────────────── */
/* Um dos DOIS `.content-block--auth-section` da página; o outro está na coluna direita.
 * São distinguidos PELA ÁREA (ver `_articleTemplate.blocks.scss`). */
.content-page__auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 10px 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("/assets/images/neo-structure/articles/signup-mobile.webp");
  /*
   * A foto é escura nos dois temas, então o texto usa `--content-on-photo`, que não
   * inverte, e não `--content-paragraph-color`, que inverte.
   */
  color: var(--content-on-photo);
}

/* ── A FAIXA COM O FORMULÁRIO (fim do artigo) ────────────────────────────── */
/* O modificador existe porque a MESMA região serve à interpretação, que ali mostra um CTA
 * e não o formulário. */
.content-page__auth--form > h2,
.content-page__auth--form > p {
  text-align: center;
}
.content-page__auth--form > .auth-section__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--weight-black);
  line-height: 1.2;
  color: inherit;
}
.content-page__auth--form > .auth-section__description {
  margin: 8px 0 33px;
  font-size: 1rem;
  line-height: 1.75;
  color: inherit;
}
.content-page__auth--form > .auth-section__form {
  /*
   * O limite tem que chegar no próprio `<auth-functional>`: elemento desconhecido é
   * inline, e a árvore React que ele monta ignora o `max-width` do wrapper.
   */
}
.content-page__auth--form > .auth-section__form auth-functional {
  display: block;
  max-width: 100%;
  overflow-x: hidden;
}
.content-page__auth--form > .auth-section__form auth-functional > div {
  max-width: 350px;
}

/*
 * O RODAPÉ DE LINKS.
 *
 * `footer.module.css` e `common.module.css` trazem a base, mas o LAYOUT (larguras, direção
 * das colunas, alinhamentos) mora em `lpbirthchartpayment.container.css`, escopado em
 * `.page` — o wrapper das LPs. Carregar a folha inteira não serve: dos 520 seletores, 28
 * estão FORA do `.page`, inclusive uma regra de `html` e treze da modal. Então as regras
 * estão transcritas aqui com o `.page` trocado pelo escopo do rodapé, e o breakpoint de
 * 1024px é o de lá.
 *
 * Os `#6a6a6a` e o `#fff` abaixo são EXCEÇÃO consciente à regra de não usar hex: o rodapé é
 * cromo, não entra no tema escuro, e precisa continuar idêntico ao das LPs.
 */
.footer--links {
  /*
   * A BASE DO `em`. O rodapé é dimensionado em `em` (`.footer__container` tem `46.5em`,
   * `61em`, `73.2em` por breakpoint) e resolve contra 16px nas LPs, que não carregam
   * Bootstrap. Aqui o Bootstrap declara `body { font-size: 14px }` e o rodapé fica FORA do
   * `.content-page__grid`, então herdava 14px: `73.2em` virava 1024px em vez de 1171px.
   */
  font-size: 1rem;
  line-height: normal;
  /*
   * Nas LPs o rodapé herda `color: #fff` do `.page`; aqui herdaria o cinza do corpo do
   * legado.
   */
  color: #fff;
  /*
   * NEUTRALIZA o `defaulttext.module.css`, que esta página carrega no `<head>` e declara
   * `p, li { font-size: 18px; line-height: 30px }` em escopo GLOBAL. Regra direta no
   * elemento vence a herança, então o `.footer__navigation { font-size: .813em }` não
   * chegava aos links (que vivem dentro de `<li>`) e o rodapé crescia de 374px para 577px
   * de altura. A LP não carrega esse arquivo.
   */
}
.footer--links p,
.footer--links li {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  margin-bottom: 0;
}
.footer--links .footer__title {
  width: 188px;
}
.footer--links .footer__title--international {
  font-size: 1.2em;
  color: #6a6a6a;
  padding-bottom: 1.5em;
}
.footer--links .footer__download {
  display: flex;
}
.footer--links .footer__download a + a {
  margin-left: 10px;
}
.footer--links .footer__container > div:first-child {
  display: flex;
  flex-direction: column;
}
.footer--links .footer__container--international {
  flex-direction: column;
}
.footer--links .footer__container > div {
  flex-grow: 3;
}
.footer--links .footer__container.footer__container--not-i18n > div:first-of-type {
  flex-grow: unset;
}
.footer--links .footer__title {
  width: 188px;
}
.footer--links .footer__title--international {
  display: none;
}
.footer--links .footer__brazilian {
  flex-grow: 5;
  display: flex;
  flex-direction: row;
}
.footer--links .footer__brazilian img {
  width: 34px;
}
.footer--links .footer__brazilian p {
  color: #6a6a6a;
  padding: 0.625em 3% 0 3%;
}
.footer--links .footer__navigation {
  color: #4e61ee;
}
.footer--links .footer__navigation--marketing a {
  color: #9931B0;
}
.footer--links .footer__anchor--international {
  font-size: 1em;
  margin: 0 0 2.188em 0;
}
.footer--links .footer__copyright--international > small {
  font-size: 0.8em;
}

@media only screen and (max-width: 767px) {
  .footer--links * {
    line-height: 1.5;
  }
  .footer--links .footer__brazilian {
    width: 250px;
  }
  .footer--links .footer__title--international {
    text-align: center;
    padding-bottom: 0.3em;
  }
  .footer--links .footer__anchor--international {
    text-align: center;
  }
  .footer--links .footer__copyright--international {
    text-align: center;
  }
  .footer--links .footer__container--international {
    align-items: center;
    flex-direction: column;
  }
}
@media screen and (min-width: 1024px) {
  .footer--links .footer__container--international {
    flex-direction: row-reverse;
  }
  .footer--links .footer__container--international > div {
    flex-grow: unset;
  }
  .footer--links .footer__container--international .footer__navigation {
    margin: 0 0 2.125em;
    text-align: right;
  }
  .footer--links .footer__container--international .footer__social-media-container--international {
    grid-row: unset;
    margin: 20px 0px;
  }
  .footer--links .footer__container--international .footer__copyright--international {
    margin-bottom: 20px;
  }
  .footer--links .footer__container--international .footer__address a {
    text-decoration: none;
  }
  .footer--links .footer__social-media-container--international nav {
    justify-content: flex-start;
  }
  .footer--links .footer__social-media {
    justify-content: flex-start;
  }
}
/*
 * ArticleTemplate › cabeçalho de conteúdo.
 *
 * As linhas emitidas por `article_template/content_header.php`: breadcrumb → título →
 * descrição → infos → switch de tema → tempo de leitura → separador → imagem. É uma grade
 * de duas colunas em que só o par switch/tempo-de-leitura se divide.
 *
 * Todo seletor desce de `.content-page__header` de propósito: `.article-format h1` (0,1,1)
 * alcança o `<h1>` daqui pelo grid da página e precisa perder por ESPECIFICIDADE, já que a
 * ordem de carga dos dois arquivos não é garantida.
 */
/* O shell monta este bloco como `<header>`, e o `style.css` do legado centraliza todo `header`
 * abaixo de 768px. */
.content-page__header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  text-align: left;
}
.content-page__header > * {
  grid-column: 1/3;
}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.content-page__header .content-header__breadcrumb {
  overflow: hidden;
  max-width: 100%;
  width: fit-content;
  margin: 8px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: transparent;
}

/* Grade de colunas automáticas, não flex: é o que mantém cada item na largura do próprio
 * conteúdo e deixa o `text-overflow` cortar só o que estourar. */
.content-page__header .content-header__breadcrumb-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-page__header .content-header__breadcrumb-li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.content-page__header .content-header__breadcrumb-item {
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--weight-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Link: cor de âncora, sublinhado e alvo de toque de 24px (WCAG 2.5.8). */
.content-page__header a.content-header__breadcrumb-item {
  min-width: 24px;
  min-height: 24px;
  color: var(--content-anchor-color);
  text-decoration: underline;
}
.content-page__header a.content-header__breadcrumb-item:hover, .content-page__header a.content-header__breadcrumb-item:focus {
  color: var(--content-anchor-color);
  text-decoration: underline;
}

.content-page__header .content-header__breadcrumb-li:first-child a.content-header__breadcrumb-item {
  justify-content: center;
}

/* Item corrente: `<p>`, sem sublinhado e na cor de parágrafo. */
.content-page__header p.content-header__breadcrumb-item {
  display: block;
  color: var(--content-paragraph-color);
  text-decoration: none;
}

/*
 * Entra como MÁSCARA e não como `background-image` para a cor vir do token: o Next alterna
 * entre um SVG cinza e um branco conforme o tema, e aqui um arquivo só serve aos dois.
 */
.content-page__header .content-header__breadcrumb-item::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 10px;
  margin: 0 7px;
  display: inline-block;
  background-color: var(--content-muted);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("/assets/images/neo-structure/chevrons/double-chevrons/double-right-gray-chevron.svg");
  -webkit-mask-image: url("/assets/images/neo-structure/chevrons/double-chevrons/double-right-gray-chevron.svg");
}

.content-page__header .content-header__breadcrumb-li:first-child .content-header__breadcrumb-item::before {
  display: none;
}

/* O ícone de casa: 12px, na cor do link. */
.content-page__header .content-header__breadcrumb-home {
  width: 0.75rem;
  height: 0.75rem;
  fill: var(--content-anchor-color);
}

/* ── título e descrição ─────────────────────────────────────────────────── */
.content-page__header .content-header__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 7px;
  margin: 0 0 10px;
  font-size: 1.575rem;
  font-weight: var(--weight-black);
  line-height: normal;
  text-align: left;
  color: var(--content-title-color);
  /*
   * O shell entrega o título como STRING de i18n; quando ela trouxer os `<img>` de ícone
   * de planeta/signo, é esta regra que os dimensiona; sem ícone, é inerte. O `filter` do
   * tema escuro substitui o `style="filter: invert(100%)"` inline de `planeta.php`: os
   * ícones são pretos sobre transparente e somem no fundo escuro.
   */
}
.content-page__header .content-header__title img {
  width: auto;
  height: 27px;
  object-fit: contain;
}

body.theme-dark .content-page__header .content-header__title img {
  filter: invert(1) brightness(1.5);
}

.content-page__header .content-header__description {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: var(--weight-normal);
  line-height: 1.4;
  color: var(--content-paragraph-color);
}

/* ── linha de infos (autor, categoria, datas) ───────────────────────────── */
.content-page__header .content-header__infos {
  display: flex;
  flex-direction: column;
  gap: 5px 0;
  margin-bottom: 10px;
}

.content-page__header .content-header__infos-author,
.content-page__header .content-header__infos-published,
.content-page__header .content-header__infos-updated {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--content-paragraph-color);
}
.content-page__header .content-header__infos-author a,
.content-page__header .content-header__infos-published a,
.content-page__header .content-header__infos-updated a {
  font-size: inherit;
  cursor: pointer;
  color: var(--content-anchor-color);
}

/* ── switch de tema e tempo de leitura ──────────────────────────────────── */
.content-page__header .content-header__theme-switch {
  display: flex;
  align-items: center;
  grid-column: 1/2;
  justify-self: flex-start;
}

.content-page__header .content-header__reading-time {
  display: inline-flex;
  align-items: center;
  grid-column: 2/3;
  justify-self: flex-end;
  font-size: 0.875rem;
  color: var(--content-paragraph-color);
  filter: opacity(0.8);
  /*
   * SVG INLINE (partial `article_template/reading_time.php`): a cor vem do `fill`, que
   * herda o token daqui, sem depender de asset externo.
   */
}
.content-page__header .content-header__reading-time > .reading-time__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  fill: var(--content-paragraph-color);
}

/* ── régua e imagem ─────────────────────────────────────────────────────── */
.content-page__header .content-header__separator {
  height: 0;
  margin: 9px 0 24px;
  border-top: solid 1px var(--content-separator);
}

.content-page__header .content-header__image {
  height: auto;
  margin: 0 0 14px;
  /* `.article-img` (articles.container.css) traz o `margin-top` da imagem do corpo, e o `<img>`
   * sai com `width`/`height` do crop: sem `height: auto` o `contain` deixa faixas vazias. */
}
.content-page__header .content-header__image .content-header__image-file {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 0;
  object-fit: contain;
}

/* ── O SWITCH DE TEMA ─────────────────────────────────────────────────────── */
/* O markup vem do módulo React `themeswitch`, que NÃO emite CSS próprio, então a aparência
 * mora aqui. As quatro cores do controle no Next são literais locais e não entraram no
 * contrato de tokens: a pista usa a superfície de CTA e o polegar usa o acento. */
.theme-switch {
  display: inline-flex;
  align-items: center;
}

.theme-switch__button {
  position: relative;
  overflow: hidden;
  width: 56px;
  height: 31px;
  padding: 0 3px;
  border: none;
  border-radius: 99px;
  cursor: pointer;
  background-color: var(--content-cta-bg);
  transition: background-color 500ms;
}

.theme-switch__thumb {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26.2px;
  height: 26.2px;
  border-radius: 99%;
  background-color: var(--content-accent);
  transform: translate(0, -50%);
  transition: transform 500ms, background-color 500ms;
}
.theme-switch__thumb::before {
  width: 75%;
  height: 75%;
  background-color: var(--content-bg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("/assets/images/neo-structure/utils/switch-moon.svg");
  -webkit-mask-image: url("/assets/images/neo-structure/utils/switch-moon.svg");
  content: "";
}

.theme-switch__clouds {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 28.5px;
  object-fit: contain;
  transform: translateY(28.5px);
  transition: transform 500ms;
}

.theme-switch__star {
  position: absolute;
  top: 25%;
  right: 11%;
  width: 14px;
  object-fit: contain;
  transform-origin: center;
  transition: transform 500ms;
}

/* As três estrelas diferem só em posição e tamanho. Cada uma leva o seu modificador, em vez
 * do `nth-of-type` do Next, que ali conta junto com a nuvem. */
.theme-switch__star--second {
  top: 16%;
  right: 33%;
  width: 9.8px;
}

.theme-switch__star--third {
  top: 57%;
  right: 30%;
  width: 6.8px;
}

/* Estado claro: o polegar corre para a direita e vira sol; as nuvens sobem. */
.theme-switch__button[aria-checked=true] {
  background-color: var(--content-cta-border);
}
.theme-switch__button[aria-checked=true] .theme-switch__thumb {
  background-color: var(--content-cta-button);
  /*
   * 90%, não 110%: o curso do polegar é `56 - 3 - 3 - 26.2 = 23.6px`, que é 90% da
   * largura dele. 110% dá 28.8px e o `overflow: hidden` corta o sol.
   */
  transform: translate(90%, -50%);
}
.theme-switch__button[aria-checked=true] .theme-switch__thumb::before {
  mask-image: url("/assets/images/neo-structure/utils/bt-light-sun-ic.svg");
  -webkit-mask-image: url("/assets/images/neo-structure/utils/bt-light-sun-ic.svg");
}
.theme-switch__button[aria-checked=true] .theme-switch__clouds {
  transform: translateY(0);
}
.theme-switch__button[aria-checked=true] .theme-switch__star {
  transform: scale(0);
}

.theme-switch__label {
  margin-left: 6px;
  font-size: 0.875rem;
  color: var(--content-paragraph-color);
}

/* ── DESKTOP ─────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1000px) {
  .content-page__header {
    padding-top: 16px;
  }
  .content-page__header .content-header__breadcrumb {
    margin: 0 0 11px;
  }
}
/*
 * ArticleTemplate › wrapper de bloco e catálogo.
 *
 * As páginas escrevem TODO bloco dentro de `.content-block` mais um modificador derivado do
 * nome (`related_articles` → `.content-block--related-articles`). O wrapper é o gancho único
 * de espaçamento: nenhuma regra daqui precisa saber quais blocos existem.
 *
 * Os dois `.content-block--auth-section` da página são distinguidos PELA ÁREA, não por
 * classe: em `.content-page__side--right` é o botão de mapa astral, em `.content-page__auth`
 * é a seção de cadastro.
 */
/* ── WRAPPER ─────────────────────────────────────────────────────────────── */
.content-block {
  width: 100%;
  margin-bottom: 24px;
}
.content-block:last-child {
  margin-bottom: 0;
}

.content-page__grid--interpretation .content-page__side--left .content-block:last-child {
  margin-bottom: 24px;
}

/* ── separator ──────────────────────────────────────────────────────────── */
.content-block--separator {
  margin-bottom: 0;
}

.separator__rule {
  height: 0;
  margin: 24px 0;
  border: none;
  border-top: solid 1px var(--content-separator);
}

/* ── GRADES DE POSIÇÃO ───────────────────────────────────────────────────── */
/* `planet_positions` e `rising_positions` produzem o MESMO markup; só a contagem de colunas no
 * mobile difere: duas para planeta, uma para ascendente, cujos rótulos não cabem em meia
 * largura. */
.content-block--planet-positions .planet-positions__title,
.content-block--rising-positions .planet-positions__title {
  margin: 0 0 12px;
  font-size: 1.375rem;
  font-weight: var(--weight-black);
  line-height: 1.2;
  text-align: left;
  color: var(--content-title-color);
}

.planet-positions__list {
  display: grid;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-block--planet-positions .planet-positions__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-block--rising-positions .planet-positions__list {
  grid-template-columns: minmax(0, 1fr);
}

.planet-positions__item {
  display: block;
  margin: 0;
}

.planet-positions__link {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--content-anchor-color);
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────────
 * CATEGORIAS
 *
 * Abaixo do desktop o gate `isMobile()` do servidor já não declara o bloco; esta regra cobre
 * a faixa intermediária, em que a lista vem mas não cabe em uma coluna.
 * ────────────────────────────────────────────────────────────────────────── */
.content-block--categories {
  display: none;
}

/*
 * A ORDEM dos itens não é CSS: vem da coluna `ordination`, por `getContentSidebarTree()`
 * (ver `ArticlesCategoriesRepository`).
 */
.categories__title {
  margin: 0 0 12px;
  font-size: 1.375rem;
  font-weight: var(--weight-black);
  line-height: 1.2;
  text-align: left;
  color: var(--content-paragraph-color);
}

.categories__list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A régua fica no ITEM de primeiro nível — link solto ou grupo — e o último não tem. */
.categories__list > .categories__link,
.categories__group {
  display: block;
  border-bottom: solid 1px var(--content-categories-rule);
}
.categories__list > .categories__link:last-child,
.categories__group:last-child {
  border-bottom: none;
}

/* Link de primeiro nível e gatilho compartilham a caixa, como no Next. */
.categories__list > .categories__link,
.categories__trigger {
  display: flex;
  align-items: center;
  margin: 2px;
  padding: 10px 0;
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
  color: var(--content-paragraph-color);
  text-decoration: none;
  transition: color 0.3s ease-out;
}

.categories__group {
  /* Some o triângulo nativo: o indicador é o `+`/`-` do `::after`. */
}
.categories__group > summary {
  position: relative;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
.categories__group > summary::-webkit-details-marker {
  display: none;
}
.categories__group > summary {
  /* `+` fechado, `-` aberto: é a variante `icon="matematic"` do gatilho do Next. */
}
.categories__group > summary::after {
  content: "+";
  position: absolute;
  top: 44%;
  right: 1%;
  display: block;
  width: 0.625em;
  height: 0.625em;
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--content-anchor-color);
  transform: translateY(-50%);
}
.categories__group[open] > summary {
  font-weight: var(--weight-black);
  color: var(--content-anchor-color);
}
.categories__group[open] > summary::after {
  content: "-";
}

/*
 * A ABERTURA. A altura é animável pela grade (`grid-template-rows` de `0fr` a `1fr`, filho
 * interno com `min-height: 0`), mas o gatilho NÃO é o `[open]` sozinho: fechado, o navegador
 * não renderiza o conteúdo do `<details>`, então na abertura não há valor anterior de onde
 * transicionar. Quem inverte a ordem dos dois sentidos é `article_template/js/
 * categories-accordion.js`, e o contrato com ele é o `data-collapsed` abaixo.
 *
 * `visibility` entra junto pelo que o `overflow` não resolve: tira o conteúdo fechado da
 * árvore de acessibilidade e do "localizar na página". Ela interpola em degrau e só vira
 * `hidden` no FIM, então o fechamento aparece inteiro.
 */
.categories__content {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 300ms cubic-bezier(0.87, 0, 0.13, 1), visibility 300ms;
}

.categories__group[open] > .categories__content {
  grid-template-rows: 1fr;
  visibility: visible;
}

/*
 * O estado intermediário do JS: `[open]` já entrou (ou ainda não saiu) e a grade fica presa em
 * `0fr` — é o ponto de partida da abertura e o de chegada do fechamento. Sem JS o atributo
 * nunca aparece e o accordion volta a abrir seco, sem quebrar.
 */
.categories__group[open][data-collapsed] > .categories__content {
  grid-template-rows: 0fr;
  visibility: hidden;
}

/* As filhas: recuo de 24px e respiro de 10px depois da última. */
.categories__content-inner {
  min-height: 0;
  overflow: hidden;
  padding-left: 24px;
}
.categories__content-inner > .categories__link {
  display: block;
  padding: 5px 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--content-paragraph-color);
  text-decoration: none;
}
.categories__content-inner > .categories__link:last-of-type {
  margin-bottom: 10px;
}

.categories__link--current {
  font-weight: var(--weight-bold);
  color: var(--content-anchor-color);
}

/* ── POSIÇÃO DO USUÁRIO ──────────────────────────────────────────────────── */
.content-block--user-position .user-position__title {
  display: flex;
  align-items: center;
  gap: 0 8px;
  margin: 0 0 6px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--content-title-color);
}
.content-block--user-position .user-position__title img {
  width: auto;
  height: 22px;
  object-fit: contain;
}

.content-block--user-position .user-position__description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--content-paragraph-color);
}

/* ── SEÇÃO DE AUTH — as DUAS ocorrências, separadas pela área ────────────── */
/* Coluna direita: o convite ao mapa astral. */
.content-page__side--right .content-block--auth-section .auth-section__title {
  margin: 0 0 6px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--content-title-color);
}
.content-page__side--right .content-block--auth-section .auth-section__description {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--content-paragraph-color);
}
.content-page__side--right .content-block--auth-section {
  /* O botão de quem já está logado só aparece no desktop: no mobile a mesma ação já está
   * no CTA de conteúdo. */
}
.content-page__side--right .content-block--auth-section .auth-section__button {
  display: none;
}

/* Área `auth`: a faixa de cadastro sobre foto. */
.content-page__auth .content-block--auth-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 350px;
  margin: 0 auto;
  text-align: center;
}
.content-page__auth .content-block--auth-section .auth-section__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: var(--weight-black);
  line-height: 1.3;
  color: inherit;
}
.content-page__auth .content-block--auth-section .auth-section__description {
  margin: 0 0 33px;
  font-size: 1rem;
  line-height: 1.75;
  color: inherit;
}
.content-page__auth .content-block--auth-section {
  /* Dentro da faixa o CTA ocupa a largura toda e não repete a margem. */
}
.content-page__auth .content-block--auth-section .content-cta {
  width: 100%;
  margin: 0;
}

/* ── ARTIGOS RELACIONADOS ────────────────────────────────────────────────── */
.content-block--related-articles .related-articles__title {
  margin: 0 0 14.4px;
  font-size: 1.375rem;
  font-weight: var(--weight-black);
  line-height: 1.2;
  text-align: left;
  color: var(--content-paragraph-color);
}

/* Duas colunas (`1fr auto`) e cinco linhas: a grade só existe para a última linha, onde
 * tempo de leitura e "+ Leia mais" dividem a largura. */
.related-articles__item {
  display: grid;
  gap: 8px 0;
  width: 100%;
  margin-bottom: 33px;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(5, auto);
}
.related-articles__item:last-child {
  margin-bottom: 0;
}
.related-articles__item > * {
  grid-column: 1/3;
  font-size: 1rem;
  color: var(--content-paragraph-color);
}

.related-articles__image-link {
  display: block;
  line-height: 0;
  /* O `<picture>` é caixa inline por padrão e não repassa a largura ao `<img>`: sem isto a
   * imagem calcula 100% de uma caixa que encolheu no conteúdo. */
}
.related-articles__image-link > picture {
  display: block;
  width: 100%;
}

.related-articles__image {
  display: block;
  width: 100%;
  height: 192px;
  object-fit: contain;
  border-radius: 4px;
}

/* A categoria: 12px, peso normal, CAIXA ALTA. */
.related-articles__category {
  margin: 0;
  font-size: 0.75rem;
  font-weight: var(--weight-normal);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--content-paragraph-color);
}

.related-articles__headline {
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--content-paragraph-color);
  text-decoration: none;
}

/* Mesma disputa: `articles.container.css` tem `.article-format a:hover` (0,1,1), e o grid da
 * página carrega `article-format` — sem o bloco no seletor o hover virava o azul do legado. */
.content-block--related-articles .related-articles__headline:hover, .content-block--related-articles .related-articles__headline:focus {
  color: var(--content-paragraph-color);
  text-decoration: none;
}

/*
 * OS DOIS `<p>` DO CARD levam o bloco no seletor porque `ui.css` e `defaulttext.module.css`
 * trazem `.legacy p` — e o `<body>` do legado tem a classe `legacy`. Uma classe só (0,1,0)
 * perde para ela (0,1,1) e o texto ficava no cinza do legado, sem inverter no tema escuro.
 */
.content-block--related-articles .related-articles__description {
  margin: 0;
  line-height: 1.66;
  color: var(--content-paragraph-color);
}

/* A última linha: tempo de leitura à esquerda, "+ Leia mais" à direita. */
.content-block--related-articles .related-articles__reading-time {
  display: inline-flex;
  align-items: center;
  grid-row: 5/6;
  grid-column: 1/2;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--content-paragraph-color);
  filter: opacity(0.8);
  /* Mesmo relógio do cabeçalho — o card do Next também o traz. */
}
.content-block--related-articles .related-articles__reading-time > .reading-time__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  fill: var(--content-paragraph-color);
}

.related-articles__more {
  grid-row: 5/6;
  grid-column: 2/3;
  justify-self: flex-end;
  font-weight: var(--weight-black);
  color: var(--content-anchor-color);
  text-decoration: underline;
}

.content-block--related-articles .related-articles__more:hover, .content-block--related-articles .related-articles__more:focus {
  color: var(--content-anchor-color);
  text-decoration: underline;
}

/* ── CÉU DO MOMENTO ──────────────────────────────────────────────────────── */
/*
 * Só o CABEÇALHO mora aqui. A tabela de posições e aspectos é do container React
 * `Common/SkyMoment`, que é o mesmo da StationeryHome e traz as próprias cores por objeto de
 * tema (`SkyMomentTheme`) — daí o `useLegacyTheme`, que observa a classe do `<body>`.
 *
 * O bloco substituiu o `sky_moment.php` com `readmore` de jQuery; o expandir/recolher agora é
 * o do próprio `Positioning`.
 */
.content-block--sky-moment .sky-moment__title {
  margin: 0 0 4px;
  font-size: 1.375rem;
  font-weight: var(--weight-black);
  line-height: 1.2;
  text-align: left;
  color: var(--content-paragraph-color);
}

/*
 * Leva o bloco no seletor pelo mesmo motivo do cartão de relacionados: `.legacy p` (0,1,1) de
 * `ui.css`/`defaulttext.module.css` venceria a classe sozinha.
 */
.content-block--sky-moment .sky-moment__date {
  margin: 0 0 10px;
  font-size: 0.625rem;
  line-height: normal;
  text-transform: uppercase;
  color: var(--content-paragraph-color);
  opacity: 0.68;
}

/* ── BLOQUEIO DE ARTIGO PREMIUM ───────────────────────────────────────────── */
/* Vive DENTRO de `#article_body`, e os seletores descem do id porque
 * `.article-format #article_body p` (0,2,1) alcança os parágrafos do cartão. */
#article_body {
  /*
   * `defaulttext.module.css` declara `p, li { color: #4a4a4a }` em escopo GLOBAL, e o `<li>`
   * não tinha quem o vencesse: ficava cinza-escuro no tema escuro.
   */
}
#article_body li {
  color: var(--regular-grey);
}
#article_body .article-paywall {
  position: relative;
  margin-top: -120px;
  padding-top: 120px;
}
#article_body .article-paywall__veil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: linear-gradient(to bottom, transparent, var(--content-bg));
  pointer-events: none;
}
#article_body .article-paywall__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 32px;
  border: solid 1px var(--content-cta-border);
  border-radius: 13px;
  background-color: var(--content-cta-bg);
}
#article_body .article-paywall__illustration {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin-bottom: 16px;
  object-fit: contain;
}
#article_body .article-paywall__eyebrow {
  margin-bottom: 8px;
  font-size: var(--text-small-size);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-muted);
}
#article_body .article-paywall__headline {
  margin-bottom: 20px;
  font-size: var(--text-regular-size);
  line-height: 1.5;
  color: var(--content-paragraph-color);
}
#article_body .article-paywall__highlight {
  font-weight: var(--weight-black);
  color: var(--content-accent);
}
#article_body .article-paywall__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  margin-bottom: 14px;
}
#article_body .article-paywall__button img {
  width: 24px;
  height: auto;
  object-fit: contain;
}
#article_body .article-paywall__footnote {
  margin: 0;
  font-size: var(--text-small-size);
  line-height: 1.5;
  color: var(--content-muted);
}
#article_body .article-paywall__footnote a {
  color: var(--content-anchor-color);
  text-decoration: underline;
}

/* A caixa do `.article__info` tem gradiente e NÃO inverte com o tema, então o texto dentro dela
 * usa `--content-on-photo`, que também não inverte. */
body.theme-dark #article_body .article__info > ul li,
body.theme-dark #article_body .article__info > ul a {
  color: var(--content-on-photo);
}

/* ── DESKTOP ─────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1000px) {
  .content-block--planet-positions .planet-positions__list,
  .content-block--rising-positions .planet-positions__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /*
   * O ESPAÇAMENTO DA COLUNA DIREITA é POR COMPONENTE, não uniforme: o `.content-block` dá
   * 24px a todos, mas os vãos medidos contra a referência são 10px depois do banner do app,
   * 16px antes do botão de mapa e 22px depois dele, 20px depois das categorias e zero
   * depois dos relacionados. Ficam aqui porque no Next também são de `@desktopMin`.
   */
  .content-page__side--right .content-block--download-app {
    margin-bottom: 10px;
  }
  .content-page__side--right .content-block--search-desk {
    margin-bottom: 0;
  }
  .content-page__side--right {
    /* O botão vem embrulhado no `.content-cta`, que traz `20px 0 30px` do CTA do corpo —
     * zerada aqui para a margem do bloco valer sozinha. */
  }
  .content-page__side--right .content-block--auth-section {
    margin: 16px 0 22px;
  }
  .content-page__side--right .content-block--auth-section > .content-cta {
    margin: 0;
  }
  /* No desktop o corpo do accordion vai a 18px e o indicador a 24px. */
  .content-block--categories {
    display: block;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .categories__list > .categories__link,
  .categories__trigger,
  .categories__content-inner > .categories__link {
    font-size: 1.125rem;
  }
  .categories__group > summary::after {
    font-size: 1.5rem;
  }
  /* No desktop a imagem do card cai para 159px e a seção perde a margem de baixo. */
  .content-block--related-articles {
    align-items: flex-start;
    margin-bottom: 30px;
  }
  .related-articles__image {
    height: 159px;
  }
  /* Roxo chapado, 20px de rótulo, 60px de altura e SEM ícone — o ícone de lua era do botão
   * antigo do legado. */
  .content-page__side--right .content-block--auth-section .auth-section__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin-bottom: 22px;
    font-size: 1.25rem;
  }
  .content-page__side--right .content-block--auth-section .auth-section__button > img {
    display: none;
  }
  .content-page__side--right .content-block--auth-section .content-cta {
    gap: 0;
    margin: 0 0 22px;
  }
  .content-page__side--right .content-block--auth-section .content-cta__button {
    width: 100%;
    height: 60px;
    padding: 0;
    font-size: 1.25rem;
  }
  .content-page__side--right .content-block--auth-section .content-cta__icon {
    display: none;
  }
  .content-page__auth .content-block--auth-section {
    align-items: flex-start;
    max-width: none;
    text-align: left;
  }
  .content-page__auth .content-block--auth-section .auth-section__title {
    font-size: 1.75rem;
  }
  .content-page__auth .content-block--auth-section .auth-section__description {
    font-size: 1.125rem;
  }
  #article_body .article-paywall__card {
    padding: 32px 40px 40px;
  }
}
@media screen and (min-width: 1025px) {
  .content-page__grid #article_body.content-page__body p {
    margin-bottom: 30px;
  }
  .content-page__grid #article_body.content-page__body p,
  .content-page__grid #article_body.content-page__body li {
    font-size: 1.125rem;
  }
  .content-page__grid #article_body.content-page__body li {
    margin-bottom: 10px;
  }
}
/* ── DESKTOP ─────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1000px) {
  .content-page__bg {
    height: 406px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url("/assets/images/rebranding-desktop-bg-logged.jpg");
  }
  .content-page__bg::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-image: linear-gradient(to right, var(--content-bar-gradient-from), var(--content-bar-gradient-to));
    content: "";
  }
  .content-page__grid {
    width: 1178px;
    max-width: 100%;
    margin: 0 auto;
    align-items: flex-start;
    grid-template-columns: minmax(0, 809px) minmax(0, 369px);
    /* A coluna direita é UMA área que atravessa as seis linhas da esquerda. */
    grid-template-areas: "header right" "cta    right" "body   right" "share  right" "left   right" "auth   right";
  }
  .content-page__grid--interpretation {
    grid-template-areas: "header right" "cta    right" "body   right" "left   right" "share  right" "auth   right";
  }
  .content-page__header,
  .content-page__cta,
  .content-page__body,
  .content-page__share,
  .content-page__side--left,
  .content-page__auth {
    padding-right: 30px;
    padding-left: 24px;
  }
}
@media screen and (min-width: 1000px) {
  .content-page__side--right {
    height: 100%;
    align-items: stretch;
    /* 24px à direita e zero à esquerda, como o Next computa nesta coluna. */
    padding: 46px 24px 0 0;
  }
  .content-cta__title {
    font-size: 1.125rem;
  }
  .content-cta__button {
    font-size: 1.5rem;
  }
  .content-page__share::before {
    margin-bottom: 30px;
  }
  /* Aqui o share ja desenha a propria linha acima de si pelo `::before`, e a regua que abre
   * a coluna logo abaixo dele duplica o traco. Some so a regua de abertura: a de conteudo,
   * que divide signos de casas na interpretacao, nao leva o modificador e continua valendo. */
  .content-block--separator-opening {
    display: none;
  }
  .content-page__grid--interpretation .content-page__share::after {
    display: none;
  }
  /* Sem aquela regua, o share encostaria no bloco seguinte. */
  .content-page__share {
    margin-bottom: 24px;
  }
  .content-page__auth {
    padding-top: 35px;
    padding-bottom: 35px;
    background-image: url("/assets/images/neo-structure/articles/signup-mobile-desk.webp");
  }
  /*
   * 2 colunas x 4 linhas. As linhas 1 e 4 ficam vazias de propósito: são o respiro que
   * centra a chamada verticalmente contra o formulário.
   */
  .content-page__auth--form {
    display: grid;
    padding-right: 65px;
    padding-left: 51px;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: repeat(2, 1fr);
  }
  .content-page__auth--form > h2,
  .content-page__auth--form > p {
    text-align: left;
  }
  .content-page__auth--form > .auth-section__title {
    grid-area: 2/1/3/2;
    font-size: 1.75rem;
  }
  .content-page__auth--form > .auth-section__description {
    grid-area: 3/1/4/2;
    font-size: 1.125rem;
  }
  .content-page__auth--form {
    /* O `max-width: 350px` do bloco base continua valendo: não soltar aqui. */
  }
  .content-page__auth--form > .auth-section__form {
    grid-area: 1/2/5/3;
    justify-self: flex-end;
  }
}/*$vite$:1*/