/* ==========================================================================
   Valderez Astrologia — componentes das páginas da versão ocidental já vestidas
   com o pacote de design (docs/design/valderez-1.0/assets/css/components.css):
   tipografia, botões, campos, consentimento, cartões, preço, FAQ, artigo, grades.
   Cabeçalho, rodapé, menu e cookies estão no casca.css. Tokens: tema.css (gerado
   de paleta.py). Estas páginas NÃO carregam o base.css.
   `.is-hover` / `.is-focus` só servem para fotografar estados em /estilo.
   ========================================================================== */
*{box-sizing:border-box}
[data-theme]{background:var(--background);color:var(--text)}
body{margin:0;background:var(--background);color:var(--text);font:400 var(--body-size)/var(--body-line) var(--font-sans)}
img,svg{max-width:100%;height:auto}
button,input,select{font:inherit}
button,a,input,summary{ -webkit-tap-highlight-color:transparent}
a{color:var(--accent);text-underline-offset:4px}
p{margin:0 0 24px}
h1,h2,h3,h4{font-family:var(--font-editorial);font-weight:600;margin:0 0 24px;overflow-wrap:break-word}
h1{font-size:var(--h1-size);line-height:var(--h1-line);letter-spacing:-.025em}
h2{font-size:var(--h2-size);line-height:var(--h2-line)}
h3{font-size:var(--h3-size);line-height:var(--h3-line)}
h4{font-size:var(--h4-size);line-height:var(--h4-line)}
:focus-visible,.is-focus{outline:3px solid var(--focus);outline-offset:3px}
.section{padding-block:64px}
.surface{background:var(--surface);color:var(--text)}
.stack>*+*{margin-top:24px}
.row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.grid{display:grid;gap:24px}
.split{display:grid;gap:48px;align-items:center}
.caption{font-size:var(--caption-size);line-height:var(--caption-line);color:var(--text-muted)}
.eyebrow{font-size:14px;line-height:22px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--rose);margin-bottom:16px}
.secondary{color:var(--text-secondary)}
.muted{color:var(--text-muted)}
.accent{color:var(--rose)}
.narrow{max-width:720px;margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 24px;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:600 var(--button-size)/var(--button-line) var(--font-sans);text-decoration:none;cursor:pointer;text-align:center;max-width:100%}
.button:hover,.button.is-hover{background:var(--accent-hover)}
.button--secondary{background:transparent;color:var(--accent);border-color:var(--border)}
.button--secondary:hover,.button--secondary.is-hover{background:var(--surface);color:var(--text);border-color:var(--accent)}
.button:disabled{cursor:not-allowed;background:var(--surface);color:var(--text-muted);border-color:var(--border);border-style:dashed}
.button[aria-busy=true]{cursor:wait;border-style:solid}
.spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;flex-shrink:0}
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field label{font-weight:600}
.field input{width:100%;min-width:0;min-height:52px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);color:var(--text)}
.field input::placeholder{color:var(--text-muted);opacity:1}
.field input:hover,.field input.is-hover{border-color:var(--accent)}
.field input:disabled{background:var(--background);color:var(--text-muted);border-style:dashed;cursor:not-allowed}
.field input[readonly]{background:var(--background)}
.field input[aria-invalid=true]{border:2px solid var(--error)}
.help,.field-error,.field-success{font-size:14px;line-height:22px;margin:0}
.help{color:var(--text-muted)}
.field-error{color:var(--error)}
.field-success{color:var(--success)}
.consent{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding-block:10px;cursor:pointer}
.consent input{flex:0 0 20px;width:20px;height:20px;margin:4px 0 0;accent-color:var(--accent)}
.consent:has(:disabled){cursor:not-allowed;color:var(--text-muted)}
.card{padding:32px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card)}
.card>:last-child{margin-bottom:0}
.result-card{border-top:3px solid var(--rose)}
.result-card .value{font:600 38px/44px var(--font-editorial)}
.notice{padding:20px 24px;border:1px solid currentColor;border-radius:8px;background:var(--surface);color:var(--success)}
.notice--error{color:var(--error)}
.price{font:600 44px/50px var(--font-editorial);margin-bottom:8px;overflow-wrap:anywhere}
.price-card .button{width:100%;margin-top:24px}
.price-card .caption{margin:0}
.faq{border-bottom:1px solid var(--border);padding:20px 0}
.faq summary{cursor:pointer;min-height:44px;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:600}
.faq summary::after{content:'+';color:var(--accent);font-size:24px}
.faq[open] summary::after{content:'−'}
.faq p{margin-top:16px;color:var(--text-secondary)}
summary::-webkit-details-marker{display:none}
.article{max-width:var(--article);overflow-wrap:break-word}
.article p,.article li{line-height:1.85}
.article h2,.article h3,.article h4{margin-top:48px;scroll-margin-top:24px}
.article blockquote{border-left:3px solid var(--rose);margin:32px 0;padding:16px 24px;background:var(--surface);color:var(--text-secondary)}
.article li+li{margin-top:12px}
.article a{overflow-wrap:anywhere}
.table-wrap{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;border-bottom:1px solid var(--border);padding:12px}
caption{text-align:left;font-weight:600;padding-bottom:12px}
.toc{align-self:start;border-left:2px solid var(--rose);padding-left:24px}
.toc a{display:block;padding:8px 0}
.reading-layout{display:grid;gap:48px}
.hero{padding:64px 0 80px}
.hero .secondary{max-width:500px}
.hero-art{min-width:0}
.trust{display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--text-secondary);margin-top:32px}
.trust span{border-left:1px solid var(--border);padding-left:12px}
.stepbar{display:flex;gap:12px;flex-wrap:wrap;padding:0;list-style:none;color:var(--text-muted);font-size:14px;margin:0 0 32px}
.stepbar [aria-current=step]{color:var(--accent);font-weight:600}
.stepbar li+li:before{content:' / ';margin-right:12px}
.loading{padding:48px 24px;text-align:center}
.loading .spinner{width:48px;height:48px;margin-bottom:24px}
.gallery-section{padding:48px 0;border-bottom:1px solid var(--border)}
.swatch{height:64px;border-radius:8px;margin-bottom:8px;border:1px solid var(--border)}
.example{margin-bottom:24px}
.example>.caption{margin:0 0 12px}
@media(min-width:768px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.section{padding-block:80px}}
@media(min-width:1100px){.split{grid-template-columns:1fr 1fr;gap:64px}.hero{padding-block:88px}.reading-layout{grid-template-columns:230px minmax(0,720px);gap:64px}.toc{position:sticky;top:32px}}
@media(max-width:767px){.card{padding:24px}.hero{padding-top:48px}.hero .button{width:100%}.hero-art{max-width:480px;margin:auto}.trust{display:grid;gap:12px}.article h2{margin-top:40px}}
@media(prefers-reduced-motion:no-preference){.button{transition:background-color .18s,border-color .18s}.spinner{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}}
@media print{body,[data-theme]{background:white;color:#142234}.section{padding:16px}.reading-layout{display:block}.article{max-width:none}}
/* Impede que o tamanho intrínseco de imagens alargue a coluna móvel. */
.split>*{min-width:0}
.split{grid-template-columns:minmax(0,1fr)}
.hero-art{width:100%}
@media(min-width:1100px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* — Acréscimos do site (peças que o pacote não desenhou, com os mesmos tokens) — */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
h1 em, h2 em { font-style: normal; color: var(--rose); }
.lede { font-size: 18px; line-height: 30px; color: var(--text-secondary); max-width: 560px; }
.field .opcional { font-weight: 400; color: var(--text-muted); }
.field select { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-control); background: var(--surface); color: var(--text); }
.form-erro { margin: 0; padding: 12px 16px; border: 1px solid currentColor; border-radius: var(--radius-control);
  background: var(--surface); color: var(--error); font-size: 14px; line-height: 22px; }
/* Escolha em "pílulas" (radio): o rótulo inteiro é clicável. */
.escolha { border: 0; margin-inline: 0; margin-bottom: 0; padding: 0; min-width: 0; }
.escolha legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.escolha .opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.escolha label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); cursor: pointer; }
.escolha input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.escolha label:has(input:checked) { border: 2px solid var(--accent); padding: 9px 15px; font-weight: 600; }
.escolha label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Lista numerada de vantagens (lista de espera). */
.vantagens { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; }
.vantagens li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.vantagens .num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--rose); color: var(--rose); font: 600 14px/1 var(--font-sans); }
.vantagens b { display: block; font-weight: 600; }
.vantagens span { color: var(--text-secondary); font-size: var(--caption-size); line-height: var(--caption-line); }
/* Citação curta com filete rosa (ex.: revisão da Dona Valderez). */
.destaque { margin: 32px 0 0; padding: 16px 24px; border-left: 3px solid var(--rose); background: var(--surface); }
.destaque b { display: block; font: 600 var(--h4-size)/var(--h4-line) var(--font-editorial); margin-bottom: 4px; }
.destaque p { margin: 0; color: var(--text-secondary); }
.chip { display: inline-block; margin: 0 0 16px; padding: 4px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text-secondary); font-size: 14px; line-height: 22px; font-weight: 600; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pronto { display: grid; gap: 16px; justify-items: start; }
.pronto .brand-mark { width: 48px; height: 48px; color: var(--rose); }
.pronto h2 { margin: 0; }
.pronto p { margin: 0; }
/* No celular, o formulário vem antes da ilustração (quem chega do vídeo vê os
   campos na primeira tela); no desktop, a ilustração fica na coluna do texto. */
.arte-celular { display: block; }
.arte-desktop { display: none; }
@media (min-width: 1100px) { .arte-celular { display: none; } .arte-desktop { display: block; margin-top: 32px; } }
.arte-celular img { display: block; width: min(100%, 360px); margin: 48px auto 0; }
/* Lista de espera: no celular, título → formulário → vantagens → ilustração;
   no desktop, o texto à esquerda e o formulário à direita. */
.lista-grade { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "form" "mais"; }
.lista-grade > * { min-width: 0; }
.lista-intro { grid-area: intro; } .lista-form { grid-area: form; } .lista-mais { grid-area: mais; }
.lista-arte { display: block; width: min(100%, 420px); margin: 48px auto 0; }
.lista-intro > :last-child, .lista-mais > :first-child { margin-top: 0; }
@media (min-width: 1100px) {
  .lista-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; row-gap: 0;
    grid-template-areas: "intro form" "mais form"; align-items: start; }
  .lista-mais { margin-top: 32px; }
}

/* Cidade de nascimento: o autocomplete do site (combobox com setas, Enter e Esc;
   a lista é um listbox), no visual do pacote. */
.auto { position: relative; }
.auto ul { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px;
  list-style: none; max-height: 280px; overflow: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-control); box-shadow: var(--shadow-card); }
.auto li { padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.auto li[aria-selected=true], .auto li:hover { background: var(--background); outline: 2px solid var(--accent); outline-offset: -2px; }
.auto li small { color: var(--text-muted); }
.auto.estatico ul { position: static; margin-top: 4px; }

/* ==========================================================================
   Fase B — home, /mapa (formulário, carregando, amostra, completo), 404,
   páginas de texto. Mesmos tokens; nada de cor escrita.
   ========================================================================== */
.section--escura { padding-block: 64px; }
@media (min-width: 768px) { .section--escura { padding-block: 80px; } }
.row .button { flex: 0 1 auto; }
.lista-check { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.lista-check li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--text-secondary); }
.lista-check li::before { content: "✓"; color: var(--rose); font-weight: 600; }

/* Como funciona: três passos numerados (01 · …). */
.passos { display: grid; gap: 32px; counter-reset: passo; }
.passo h3::before { counter-increment: passo; content: "0" counter(passo) " · "; color: var(--rose); }
@media (min-width: 768px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Os quatro produtos (home). */
.produtos { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 768px) { .produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod { display: flex; flex-direction: column; gap: 8px; }
.prod.anchor { border-top: 3px solid var(--rose); }
.prod h3 { margin: 0; }
.prod p { margin: 0; color: var(--text-secondary); }
.prod .plab { font-size: 14px; line-height: 22px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--rose); }
.prod .pprice { font: 600 40px/46px var(--font-editorial); }
.prod .pprice small { font: 400 16px/1 var(--font-sans); color: var(--text-muted); text-decoration: line-through; margin-left: 8px; }
.prod .poff { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--accent);
  color: var(--on-accent); font: 600 12px/20px var(--font-sans); vertical-align: middle; }
.prod .peco { color: var(--success); font-size: 14px; font-weight: 600; }
.prod .pcombo, .prod .ptaxa { font-size: 14px; line-height: 22px; color: var(--text-muted); }
.prod .button { margin-top: auto; align-self: flex-start; }
.prod .pprice + .ptaxa { margin-top: -6px; }

/* As 8 dimensões do casal. */
.dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
@media (min-width: 900px) { .dims { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dim { background: var(--surface); padding: 20px 16px; }
.dim .dico { color: var(--rose); display: block; margin-bottom: 8px; }
.dim .dn { font: 600 18px/24px var(--font-editorial); color: var(--rose); }
.dim .dt { font-weight: 600; margin: 4px 0 2px; }
.dim .dd { font-size: 14px; line-height: 22px; color: var(--text-secondary); }

/* Card do casal (bloco escuro: data-theme="dark"). A rosa das 8 dimensões usa os
   nomes antigos (--saffron, --blush…), que no :root são as cores do tema escuro. */
.galeria { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .galeria { max-width: 360px; margin-inline: auto; } }
.cardc { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 24px; background: var(--surface); color: var(--text); }
.cardc .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; color: var(--rose); }
.cardc .wm { font: 500 18px/1 var(--font-editorial); color: var(--text); }
.cardc .who { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.cardc .score { font: 600 56px/1 var(--font-editorial); }
.cardc .score span { font-size: 22px; color: var(--text-muted); }
.cardc .scorelab { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); margin-top: 6px; font-weight: 600; }
.cardc .bar { height: 5px; border-radius: 3px; background: var(--background); margin: 18px 0; overflow: hidden; }
.cardc .bar i { display: block; height: 100%; border-radius: 3px; background: var(--rose); }
.cardc .insight { font: 500 19px/26px var(--font-editorial); }
.rosa-mini { margin: 14px auto 4px; max-width: 170px; }
.rosa-mini svg, .rosa svg { width: 100%; height: auto; display: block; }

.depoimentos { display: grid; gap: 24px; }
@media (min-width: 768px) { .depoimentos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.depo { margin: 0; border-left: 3px solid var(--rose); padding: 4px 0 4px 20px; }
.depo blockquote { margin: 0; font: 500 20px/28px var(--font-editorial); }
.depo figcaption { margin-top: 10px; font-size: 14px; color: var(--text-muted); }

/* Faixa "é um casal?" entre produtos. */
.cross { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cross h3, .cross p { margin: 0; }

/* /mapa: formulário. */
.campos-2 { display: grid; gap: 24px; }
@media (min-width: 600px) { .campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field .consent { min-height: 44px; padding-block: 6px; }
.cidade-status { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.cidade-status.ok { color: var(--success); }
.field input.escolhida { border-color: var(--success); }
.estado[hidden] { display: none !important; }
.estado:focus { outline: none; }
.estado h1:focus, .estado h2:focus { outline: none; }
/* No celular o formulário vem antes da ilustração e dos selos. */
.mapa-grade { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "arte"; }
.mapa-grade > * { min-width: 0; }
.mapa-intro { grid-area: intro; } .mapa-form { grid-area: form; } .mapa-arte { grid-area: arte; }
.mapa-arte img { display: block; width: min(100%, 420px); margin-inline: auto; }
@media (max-width: 1099px) { .mapa-intro .trust { display: none; } }  /* no celular, os campos sobem para a primeira tela */
@media (min-width: 1100px) {
  .mapa-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; row-gap: 32px;
    grid-template-areas: "intro form" "arte form"; align-items: start; }
}

/* /mapa: amostra e completo. */
.aviso { margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: var(--radius-control); background: var(--surface); color: var(--text-secondary); font-size: 14px; line-height: 22px; }
.nota { font-size: 14px; line-height: 22px; color: var(--text-muted); }
.resultado-topo { margin-bottom: 32px; }
.resultado-topo h2, .resultado-topo h1 { margin-bottom: 8px; }
.grau { margin: 0 0 12px; font-size: 14px; color: var(--text-muted); }
.result-card h3 { margin-bottom: 4px; }
.aviso-email { margin: 0 0 24px; }
.aviso-email p { margin: 0; }
.aviso-email .row { margin-top: 16px; }
.price-card .ptaxa { margin: 0 0 4px; }
.resumo { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 32px; }
.resumo div { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.resumo small { display: block; color: var(--text-muted); font-size: 14px; }
.resumo strong { font: 600 22px/28px var(--font-editorial); }
@media (max-width: 599px) { .resumo { grid-template-columns: 1fr; } }
.roda-e-tabela { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .roda-e-tabela { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.roda svg { width: 100%; height: auto; display: block; }
td.num, .num { font-variant-numeric: tabular-nums; }
abbr[title] { text-decoration: none; cursor: help; }
.aspectos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.aspectos li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-control);
  border: 1px solid var(--border); background: var(--surface); }
.barras { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; font-size: 14px; }
.barras i { display: block; height: 8px; border-radius: 4px; background: var(--rose); }
.bloco { margin-top: 48px; scroll-margin-top: 24px; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 32px; }
.ia-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.feedback { text-align: left; }
.feedback .fb-botoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* 404 */
.nao-achei img { display: block; width: min(100%, 360px); margin: 48px auto 0; }
/* Peças montadas por JavaScript compartilhado com a védica (analytics.js: "isso fez
   sentido?"; amostra-email.js): usam .btn/.btn-outline, que aqui viram o botão
   secundário do pacote. */
.fb-pergunta { font: 600 var(--h4-size)/var(--h4-line) var(--font-editorial); margin: 0 0 16px; }
.fb-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.btn-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 24px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--accent);
  font: 600 var(--button-size)/var(--button-line) var(--font-sans); cursor: pointer; text-decoration: none; }
.btn.btn-outline:hover { background: var(--surface); color: var(--text); border-color: var(--accent); }
.btn.btn-outline:disabled { cursor: not-allowed; color: var(--text-muted); border-style: dashed; }

/* ==========================================================================
   Fase C — sinastria, numerologia, tarot, blog, /live. Mesmos tokens.
   ========================================================================== */
.pessoa { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; margin: 0; min-width: 0; display: grid; gap: 16px; background: var(--background); }
.pessoa legend { padding: 0 8px; font-size: 14px; line-height: 22px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--rose); }
.moldura { font: 500 24px/32px var(--font-editorial); max-width: 52ch; }
.pontos { display: grid; gap: 24px; }
@media (min-width: 768px) { .pontos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ponto { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; background: var(--surface); }
.ponto .rot { font-size: 14px; line-height: 22px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--rose); margin-bottom: 8px; }
.ponto.forte { border-top: 3px solid var(--success); } .ponto.forte .rot { color: var(--success); }
.ponto.atencao { border-top: 3px solid var(--gold); } .ponto.atencao .rot { color: var(--gold); }
.ponto h3 { margin: 0 0 8px; }
.ponto p { margin: 0 0 8px; color: var(--text-secondary); }
.ponto p:last-child { margin-bottom: 0; }
.esmaecido { position: relative; max-height: 9.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, currentColor 35%, transparent); mask-image: linear-gradient(180deg, currentColor 35%, transparent); }
.como-fica { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .como-fica { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
/* a rosa das 8 dimensões desenha com os nomes antigos (tema escuro): num bloco escuro */
.rosa-bloco { margin: 0; padding: 24px; border-radius: var(--radius-card); background: var(--background); color: var(--text); }
.rosa-bloco figcaption { margin-top: 8px; text-align: center; font-size: 14px; color: var(--text-muted); }
.rosa-bloco svg { width: 100%; height: auto; display: block; max-width: 460px; margin-inline: auto; }
.comparacao .marca-c { text-align: center; width: 24%; }
.share { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.share .cardc { width: min(100%, 340px); }
.honesty { font-size: 14px; line-height: 22px; color: var(--text-muted); max-width: 60ch; }
.faq-card summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* Numerologia */
.numeros { display: grid; gap: 24px; }
@media (min-width: 768px) { .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tarot: as cartas (static/ocidental/_carta.html) desenham com os nomes antigos (tema
   escuro): a mesa é um bloco escuro. */
.mesa { padding: 32px 24px; border-radius: var(--radius-card); }
.tiragem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 600px; margin-inline: auto; }
.tiragem .posicao { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.rotulo-pos { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--rose); }
.contador { font-size: 14px; color: var(--text-muted); }
.field textarea { width: 100%; min-height: 96px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text); font: inherit; resize: vertical; }

/* Blog */
.artigos { display: grid; gap: 24px; }
@media (min-width: 768px) { .artigos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.artigo-card h2 { font-size: var(--h3-size); line-height: var(--h3-line); margin-bottom: 8px; }
.artigo-card h2 a { color: var(--text); text-decoration: none; }
.artigo-card h2 a:hover { text-decoration: underline; }
.chamada { margin-top: 48px; }
/* Números em destaque com algarismos alinhados (a Cormorant usa os "antigos", que
   descem abaixo da linha): preço, índice, notas. */
.price, .prod .pprice, .cardc .score, .result-card .value, .resumo strong, .num-destaque { font-variant-numeric: lining-nums; }
.tiragem .posicao:nth-child(2) .carta { animation-delay: .15s; }
.tiragem .posicao:nth-child(3) .carta { animation-delay: .3s; }
.posicao .frase { color: var(--text-secondary); font-size: 15px; line-height: 24px; margin: 0; max-width: 26ch; }
.pergunta-vista { font: 500 22px/30px var(--font-editorial); color: var(--rose); margin: 0 0 24px; }
@media (max-width: 640px) {
  .tiragem { grid-template-columns: 1fr; gap: 20px; }
  .tiragem .posicao { flex-direction: row; text-align: left; align-items: center; gap: 16px; }
  .tiragem .posicao .carta { width: 96px; flex: none; padding: 10px 6px; }
  .tiragem .carta .nome { font-size: 15px; } .tiragem .carta .num { font-size: 17px; }
  .posicao .texto-pos { display: flex; flex-direction: column; gap: 4px; }
}
.field .consent { font-weight: 400; }