/* Astralis · estilos partilhados */
:root{
  --bg:#0B0A1A; --bg2:#0F0D22; --surface:#13112A; --surface2:#1A1736; --deep:#221C46;
  --line:#2E2950; --line2:#4A4372;
  --text:#D6D1E6; --head:#F6EBD3; --muted:#A49DBD; --muted2:#8C86A3;
  --gold:#E2BE7A; --gold2:#F3D9A4; --ink:#1A1530;
  --pink:#F28FB0; --blue:#7FB3E0; --green:#A7C76B; --lilac:#B9AEF0; --tense:#E07A5F;
  --display:'Cormorant Garamond', Georgia, serif; --body:'Jost', system-ui, sans-serif;
  --glyph:'Noto Sans Symbols','Segoe UI Symbol','DejaVu Sans',serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6}
.sky{background-color:var(--bg);background-image:
  radial-gradient(1px 1px at 12% 8%,#ffffffb0 50%,transparent 51%),radial-gradient(1px 1px at 78% 4%,#ffffffa0 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 33% 22%,#F3D9A4c0 50%,transparent 51%),radial-gradient(1px 1px at 91% 31%,#ffffff90 50%,transparent 51%),
  radial-gradient(1px 1px at 6% 44%,#ffffff80 50%,transparent 51%),radial-gradient(1.5px 1.5px at 64% 15%,#ffffffb0 50%,transparent 51%),
  radial-gradient(1px 1px at 48% 37%,#ffffff70 50%,transparent 51%),radial-gradient(1px 1px at 85% 52%,#F3D9A490 50%,transparent 51%)}
a{color:var(--gold)} a:hover{color:var(--gold2)}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--display);color:var(--head);font-weight:600;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,6vw,68px)} h2{font-size:clamp(28px,3.6vw,42px)} h3{font-size:24px}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.narrow{max-width:640px;margin:0 auto;padding:0 16px}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)} .small{font-size:14px} .tiny{font-size:12px;color:var(--muted2)}
.glyph{font-family:var(--glyph)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}

/* cabeçalho */
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;max-width:1160px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;color:var(--gold2);text-decoration:none}
.logo span{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:.26em}
.top nav{display:flex;gap:20px;font-size:14px}
.top nav a{color:var(--muted);text-decoration:none} .top nav a:hover{color:var(--head)}
@media(max-width:720px){.top nav{display:none}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:0;
  background:var(--gold);color:var(--ink);font:500 17px var(--body);text-decoration:none;cursor:pointer;transition:transform .15s, background .15s}
.btn:hover{background:var(--gold2);color:var(--ink)} .btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:wait}
.btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold2)} .btn.ghost:hover{background:#E2BE7A14}
.btn.full{width:100%}
.link{background:none;border:0;color:var(--gold);font:inherit;cursor:pointer;padding:0;min-height:44px;text-decoration:underline}

/* cartões */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.card.gold{border-color:var(--gold);background:var(--deep)}
.quote{padding:18px;border-radius:14px;background:var(--deep);font-family:var(--display);font-size:23px;line-height:1.35;color:var(--head)}
.chips{display:flex;gap:8px}
.chip{flex:1 1 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.chip b{font-weight:500;color:var(--head);font-size:15px}
.chip i{font-style:normal;font-size:18px;color:var(--gold2);font-family:var(--glyph)}
.lab{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.locked{filter:blur(5px);user-select:none;pointer-events:none}

/* formulário */
.form{padding:22px 18px;border:1px solid #3A3460;border-radius:18px;background:#14122BE6;display:flex;flex-direction:column;gap:16px}
.form-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)} .form-head b{color:var(--gold2);font-weight:500}
progress{width:100%;height:6px;accent-color:var(--gold)}
label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#C9C3DB}
.f input,.f select,select.f,input.f{min-height:48px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;background:#0E0C22;color:var(--head);font:16px var(--body);width:100%}
.f input:focus,.f select:focus,select.f:focus{outline:2px solid var(--gold);outline-offset:1px}
fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:8px} legend{padding:0;margin-bottom:6px;font-size:14px;color:#C9C3DB}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;color:var(--text);cursor:pointer;font-size:15px}
.seg input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:500}
.seg input:focus-visible+span{outline:2px solid var(--gold2);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#C9C3DB;line-height:1.45}
.check input{width:22px;height:22px;flex-shrink:0;margin-top:1px;accent-color:var(--gold)}
.err{color:#F2A08F;font-size:14px;min-height:1em}
.sug{position:relative}
.sug ul{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#17142F;border:1px solid var(--line2);border-radius:10px;max-height:260px;overflow:auto}
.sug li button{width:100%;text-align:left;min-height:44px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--head);font:15px var(--body);cursor:pointer}
.sug li button:hover,.sug li button:focus{background:#2A2450;outline:none}
.sug li small{color:var(--muted);margin-left:6px}
.hidden{display:none!important}

/* carta */
.carta{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
.carta .ring{fill:none;stroke:#4A4372;stroke-width:1.2} .carta .cusp{stroke:#3A3460;stroke-width:1} .carta .axis{stroke:var(--gold);stroke-width:1.6}
.carta .tick{stroke:var(--head);stroke-width:1.2}
.carta .sign{font-size:30px;font-family:var(--glyph)} .carta .fogo{fill:#F28F6B} .carta .terra{fill:var(--green)} .carta .ar{fill:var(--gold2)} .carta .agua{fill:var(--blue)}
.carta .pl{font-size:30px;fill:#fff;font-family:var(--glyph)} .carta .deg{font-size:17px;fill:var(--muted);font-family:var(--body)}
.carta .hnum{font-size:17px;fill:var(--muted2);font-family:var(--body)} .carta .axlab{font-size:19px;font-weight:600;fill:var(--gold);font-family:var(--body)}
.carta .a-tensa{stroke:var(--tense);stroke-width:1.3} .carta .a-suave{stroke:var(--blue);stroke-width:1.3}

/* leitura */
.reading p{max-width:62ch}
.reading h2{margin-top:34px} .reading h3{margin-top:22px;font-family:var(--body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500}
.reading strong{color:var(--head);font-weight:500}
.reading .lead{font-family:var(--display);font-size:24px;line-height:1.3;color:var(--head)}
.datecard{display:flex;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.datecard .d{flex-shrink:0;width:46px;text-align:center;font-family:var(--display);line-height:1.05;color:var(--gold2)}
.datecard .d b{display:block;font-size:28px;font-weight:600} .datecard .d span{font-size:13px}
details summary{cursor:pointer;list-style:none} details summary::-webkit-details-marker{display:none}
.why summary{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:500;color:var(--gold)}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.tabs button{flex-shrink:0;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--head);font:14px var(--body);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:500}
.tabs button:disabled{opacity:.45;cursor:default}

/* planos */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.plan{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 18px;border:1px solid var(--line2);border-radius:16px;background:#14122B}
.plan.best{border:1.5px solid var(--gold);background:var(--deep)}
.plan .badge{position:absolute;top:-12px;left:18px;padding:2px 12px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:500;letter-spacing:.08em}
.plan .price{font-family:var(--display);font-size:32px;font-weight:600;color:var(--gold2)}
.plan .prom{font-family:var(--display);font-style:italic;font-size:20px;color:var(--gold2)}
.plan input{position:absolute;opacity:0}
label.plan{cursor:pointer} label.plan:has(input:checked){outline:2px solid var(--gold);outline-offset:2px}

/* rodapé */
footer{border-top:1px solid var(--line);margin-top:60px;padding:28px 0 40px;font-size:13px;color:var(--muted2)}
footer .wrap{display:flex;flex-direction:column;gap:10px}
footer a{color:var(--muted)}

/* carregamento */
.loader{display:flex;flex-direction:column;align-items:center;gap:14px;padding:80px 16px;text-align:center}
.orbit{width:64px;height:64px;border:1.5px solid var(--line2);border-top-color:var(--gold);border-radius:50%;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.orbit{animation:none}}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden} .bar i{display:block;height:100%;background:var(--gold);width:0;transition:width .6s}
.reading .plans{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* planos: gancho, número de temas, CTA */
.plan .hook{font-family:var(--display);font-size:22px;line-height:1.2;color:var(--head)}
.plan .temas{display:inline-flex;align-self:flex-start;padding:3px 12px;border-radius:999px;border:1px solid var(--gold);color:var(--gold2);font-size:13px}
.plan .cta{margin-top:auto;padding-top:6px;font-weight:500}
.err:empty{display:none}
