/* Orácula — sistema visual */
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(/fonts/manrope-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(/fonts/manrope-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(/fonts/manrope-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(/fonts/manrope-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --noite: #0D0A1D; --noite-2: #141030; --indigo: #1B1638; --veu: #251E4C; --veu-2: #2F2760;
  --ouro: #E9C46A; --ouro-claro: #F7E7B0; --ouro-profundo: #C9963C; --lavanda: #B8A6FF; --rosa: #F2A7BC; --verde: #8FD8B8; --erro: #FF9A9A;
  --texto: #F4EEE1; --texto-2: #CFC8EA; --texto-3: #958FB8;
  --linha: rgba(233, 196, 106, .2); --linha-2: rgba(184, 166, 255, .16);
  --vidro: rgba(27, 22, 56, .72);
  --raio: 18px; --raio-s: 12px;
  --sombra: 0 18px 50px rgba(4, 2, 14, .55);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ouro-grad: linear-gradient(135deg, #FFF1C9 0%, #EBC46C 38%, #FBE7B4 58%, #D49E45 100%);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--noite); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body::before { /* céu: névoas */
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 85% -5%, rgba(124, 92, 255, .28), transparent 70%),
    radial-gradient(55vw 45vh at -10% 30%, rgba(233, 121, 185, .12), transparent 70%),
    radial-gradient(70vw 50vh at 50% 110%, rgba(79, 195, 232, .10), transparent 70%),
    linear-gradient(180deg, #120D2A 0%, #0D0A1D 55%, #0A0817 100%);
}
body::after { /* céu: estrelas */
  content: ""; position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff8, transparent 60%), radial-gradient(1px 1px at 120px 80px, #fff6, transparent 60%),
    radial-gradient(1.5px 1.5px at 200px 150px, #ffe9b0aa, transparent 60%), radial-gradient(1px 1px at 280px 40px, #fff7, transparent 60%),
    radial-gradient(1px 1px at 330px 210px, #fff5, transparent 60%), radial-gradient(1.2px 1.2px at 60px 250px, #fff8, transparent 60%),
    radial-gradient(1px 1px at 160px 330px, #fff6, transparent 60%), radial-gradient(1.6px 1.6px at 360px 330px, #ffe9b099, transparent 60%);
  background-size: 400px 400px; animation: twinkle 120s linear infinite;
}
@keyframes twinkle { to { transform: translate3d(-400px, -200px, 0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } }

a { color: var(--ouro-claro); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: .005em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 6.2vw, 4.2rem); }
h2 { font-size: clamp(1.85rem, 4.4vw, 2.9rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
.gold { background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--texto-2); }
.faint { color: var(--texto-3); }
.small { font-size: .875rem; }
.center { text-align: center; }
.eyebrow { font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); margin-bottom: .9rem; display: inline-flex; gap: .5em; align-items: center; }
.eyebrow::before, .eyebrow::after { content: "✦"; font-size: .7em; opacity: .8; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.wrap-s { max-width: 760px; }
section { padding: 56px 0; }
@media (min-width: 800px) { section { padding: 84px 0; } .wrap { padding: 0 28px; } }

/* ---------- cabeçalho ---------- */
.top { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(13, 10, 29, .72); border-bottom: 1px solid var(--linha); }
.top .wrap { display: flex; align-items: center; gap: 14px; height: 64px; }
.logo img { height: 34px; width: auto; }
.nav { display: none; gap: 4px; margin-left: 12px; }
.nav a { color: var(--texto-2); padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .92rem; }
.nav a:hover, .nav a.on { color: var(--texto); background: rgba(233, 196, 106, .08); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.luas-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(233, 196, 106, .1); border: 1px solid var(--linha); color: var(--ouro-claro); font-weight: 700; font-size: .9rem; }
.luas-pill .moon { width: 18px; height: 18px; }
.plus-tag { font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: #1a1330; background: var(--ouro-grad); padding: 2px 7px; border-radius: 999px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--veu); border: 1px solid var(--linha); color: var(--ouro-claro); font-weight: 700; }
.menu-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linha); background: transparent; color: var(--texto); display: grid; place-items: center; cursor: pointer; }
.drawer { position: fixed; inset: 64px 0 auto 0; z-index: 39; background: rgba(13, 10, 29, .97); border-bottom: 1px solid var(--linha); padding: 12px 16px 20px; display: none; }
.drawer.open { display: block; }
.drawer a { display: block; padding: 12px 6px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--texto); font-weight: 600; }
@media (min-width: 900px) { .nav { display: flex; } .menu-btn, .drawer { display: none !important; } }

/* ---------- botões e campos ---------- */
.btn { --h: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer; font: 700 1rem/1 var(--sans); color: #1A1233; background: var(--ouro-grad); box-shadow: 0 10px 30px rgba(233, 196, 106, .25), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .15s, box-shadow .2s, filter .2s; text-align: center; }
.btn:hover { color: #1A1233; transform: translateY(-1px); box-shadow: 0 14px 36px rgba(233, 196, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-lg { --h: 58px; font-size: 1.06rem; padding: 0 30px; }
.btn-s { --h: 40px; font-size: .9rem; padding: 0 16px; }
.btn-ghost { background: transparent; color: var(--ouro-claro); border: 1px solid rgba(233, 196, 106, .45); box-shadow: none; }
.btn-ghost:hover { color: #fff; background: rgba(233, 196, 106, .08); box-shadow: none; }
.btn-soft { background: rgba(184, 166, 255, .12); color: var(--texto); border: 1px solid var(--linha-2); box-shadow: none; }
.btn-soft:hover { color: #fff; background: rgba(184, 166, 255, .2); box-shadow: none; }
.btn-block { width: 100%; }
.btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(26, 18, 51, .3); border-top-color: #1A1233; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; color: var(--ouro-claro); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .85rem; font-weight: 600; color: var(--texto-2); }
.input, textarea.input, select.input { width: 100%; min-height: 50px; padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(184, 166, 255, .25); background: rgba(10, 8, 24, .6); color: var(--texto); font: 500 1rem var(--sans); outline: none; transition: border .2s, box-shadow .2s; }
.input:focus { border-color: var(--ouro); box-shadow: 0 0 0 4px rgba(233, 196, 106, .15); }
textarea.input { min-height: 92px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: var(--texto-3); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--texto-2); }
.check input { margin-top: 4px; accent-color: var(--ouro); }
.err { color: var(--erro); font-size: .9rem; min-height: 1.2em; margin: 4px 0 10px; }

/* ---------- superfícies ---------- */
.panel { background: var(--vidro); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (min-width: 800px) { .panel { padding: 30px; } }
.panel-glow { position: relative; }
.panel-glow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(247, 231, 176, .7), rgba(184, 166, 255, .15) 40%, rgba(233, 196, 106, .55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--texto-2); background: rgba(184, 166, 255, .1); border: 1px solid var(--linha-2); }
.chip-gold { color: var(--ouro-claro); background: rgba(233, 196, 106, .1); border-color: var(--linha); }
.grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .g4 { grid-template-columns: repeat(4, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 700px) and (max-width: 999px) { .g4, .g5 { grid-template-columns: repeat(2, 1fr); } }
.divider { display: flex; align-items: center; gap: 14px; color: var(--ouro); opacity: .8; margin: 26px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--linha), transparent); }

/* ---------- hero ---------- */
.hero { padding: 36px 0 56px; position: relative; }
.hero .wrap { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hero { padding: 64px 0 90px; } .hero .wrap { grid-template-columns: 1.08fr .92fr; } }
.hero p.lead { font-size: 1.14rem; color: var(--texto-2); max-width: 36em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--texto-3); font-size: .86rem; font-weight: 600; }
.trust span::before { content: "✦ "; color: var(--ouro); }
.fan { position: relative; height: 360px; max-width: 460px; margin: 0 auto; width: 100%; }
@media (min-width: 900px) { .fan { height: 470px; } }
.fan img { position: absolute; left: 50%; top: 50%; width: 46%; max-width: 210px; border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(233, 196, 106, .15); transform-origin: 50% 120%; }
.fan img:nth-child(1) { transform: translate(-50%, -50%) rotate(-16deg) translateX(-34%); animation: floatA 7s ease-in-out infinite; }
.fan img:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; animation: floatB 6s ease-in-out infinite; }
.fan img:nth-child(3) { transform: translate(-50%, -50%) rotate(16deg) translateX(34%); animation: floatC 8s ease-in-out infinite; }
@keyframes floatA { 50% { transform: translate(-50%, -52%) rotate(-17deg) translateX(-34%); } }
@keyframes floatB { 50% { transform: translate(-50%, -58%); } }
@keyframes floatC { 50% { transform: translate(-50%, -48%) rotate(15deg) translateX(34%); } }
.fan::after { content: ""; position: absolute; inset: 15% 10%; z-index: -1; background: radial-gradient(closest-side, rgba(233, 196, 106, .22), transparent); filter: blur(10px); }

/* ---------- tiragens ---------- */
.spread-card { display: flex; flex-direction: column; gap: 10px; height: 100%; position: relative; transition: transform .2s, border-color .2s; color: var(--texto); }
.spread-card:hover { transform: translateY(-3px); border-color: rgba(233, 196, 106, .45); color: var(--texto); }
.spread-card .sym { font-size: 1.6rem; color: var(--ouro); line-height: 1; }
.spread-card h3 { margin: 0; font-size: 1.6rem; }
.spread-card p { color: var(--texto-2); font-size: .95rem; margin: 0; flex: 1; }
.spread-card .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: .88rem; color: var(--texto-3); }
.price { font-weight: 800; color: var(--ouro-claro); font-size: 1.12rem; }
.ribbon { position: absolute; top: 14px; right: 14px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1A1233; background: var(--ouro-grad); padding: 4px 9px; border-radius: 999px; }

.steps { counter-reset: s; }
.step { position: relative; padding-left: 64px; }
.step::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 1.4rem var(--serif); color: var(--ouro); border: 1px solid var(--linha); background: rgba(233, 196, 106, .06); }
.step h3 { font-size: 1.35rem; margin-bottom: .2em; }

.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(233, 196, 106, .08); border: 1px solid var(--linha); color: var(--ouro); font-size: 1.2rem; }
.feature h3 { font-size: 1.25rem; margin: 2px 0 4px; font-family: var(--sans); font-weight: 700; }
.feature p { color: var(--texto-2); font-size: .95rem; margin: 0; }

/* ---------- carta (componente) ---------- */
.tarot { position: relative; aspect-ratio: 300 / 520; perspective: 1200px; }
.tarot .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.tarot.flipped .inner { transform: rotateY(180deg); }
.tarot .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6.5% / 3.8%; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.tarot .face img { width: 100%; height: 100%; object-fit: cover; }
.tarot .front { transform: rotateY(180deg); }
.tarot.rev .front img { transform: rotate(180deg); }
.tarot.glow .face { box-shadow: 0 0 0 1px rgba(247, 231, 176, .4), 0 0 60px rgba(233, 196, 106, .35), 0 20px 50px rgba(0, 0, 0, .55); }
.tarot.golden .face { box-shadow: 0 0 0 2px #F7E7B0, 0 0 90px rgba(255, 214, 120, .7); }
.card-cap { text-align: center; margin-top: 10px; }
.card-cap b { display: block; font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.card-cap span { font-size: .8rem; color: var(--texto-3); }

/* ---------- ritual (embaralhar e escolher) ---------- */
.ritual { position: relative; }
.stack { position: relative; width: 150px; aspect-ratio: 300 / 520; margin: 10px auto 24px; }
.stack img { position: absolute; inset: 0; width: 100%; border-radius: 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, .55); }
.stack.shuffling img:nth-child(odd) { animation: riffleL .55s ease-in-out infinite; }
.stack.shuffling img:nth-child(even) { animation: riffleR .55s ease-in-out infinite; }
@keyframes riffleL { 50% { transform: translateX(-70%) rotate(-12deg); } }
@keyframes riffleR { 50% { transform: translateX(70%) rotate(12deg); } }
.deck-scroll { overflow-x: auto; overflow-y: visible; padding: 34px 8px 26px; margin: 0 -16px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.deck { display: flex; width: max-content; padding: 0 40px; }
.deck button { flex: 0 0 auto; width: 64px; margin-right: -38px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .25s, opacity .3s; transform-origin: 50% 100%; }
.deck button img { width: 100%; border-radius: 6px; box-shadow: -4px 4px 12px rgba(0, 0, 0, .55); pointer-events: none; }
.deck button:hover, .deck button:focus-visible { transform: translateY(-22px); outline: none; }
.deck button:focus-visible img { box-shadow: 0 0 0 2px var(--ouro); }
.deck button.taken { opacity: 0; pointer-events: none; transform: translateY(-60px) scale(.8); }
@media (min-width: 800px) { .deck button { width: 76px; margin-right: -50px; } }
.deck.dealing button { animation: deal .5s backwards; }
@keyframes deal { from { transform: translateY(-40px) rotate(-8deg); opacity: 0; } }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 10px; max-width: 640px; margin: 0 auto; }
.slot { aspect-ratio: 300 / 520; border-radius: 9px; border: 1px dashed rgba(233, 196, 106, .4); display: grid; place-items: center; text-align: center; font-size: .68rem; color: var(--texto-3); padding: 4px; position: relative; overflow: hidden; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; animation: drop .45s cubic-bezier(.2, .8, .2, 1.2); }
@keyframes drop { from { transform: translateY(-40px) scale(1.2); opacity: 0; } }
.pick-count { font: 700 1.1rem var(--sans); color: var(--ouro-claro); }

/* ---------- leitura ---------- */
.spread-board { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; margin: 0 auto; }
.spread-board.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 760px; }
.spread-board.n10 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 760px; }
@media (max-width: 560px) { .spread-board.n5, .spread-board.n10 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pos-label { font-size: .72rem; text-align: center; color: var(--texto-3); margin-top: 6px; line-height: 1.25; }
.reading-list { display: grid; gap: 16px; margin-top: 30px; }
.pos { display: grid; gap: 16px; grid-template-columns: 84px 1fr; align-items: start; }
@media (min-width: 700px) { .pos { grid-template-columns: 120px 1fr; gap: 24px; } }
.pos .tarot { width: 100%; }
.pos h3 { margin: 0; font-size: 1.45rem; }
.pos .hint { font-size: .82rem; color: var(--texto-3); margin-bottom: 8px; }
.pos .txt { color: var(--texto); }
.pos .txt strong { color: var(--ouro-claro); font-weight: 700; }
.pos .advice { margin-top: 10px; padding: 12px 14px; border-left: 2px solid var(--ouro); background: rgba(233, 196, 106, .06); border-radius: 0 12px 12px 0; font-style: italic; color: var(--ouro-claro); font-family: var(--serif); font-size: 1.15rem; }
.locked-txt { position: relative; user-select: none; }
.locked-txt .blur { filter: blur(6px); opacity: .55; }
.locked-txt .lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--ouro-claro); font-size: .92rem; }
.paywall { position: relative; overflow: hidden; }
.paywall .opts { display: grid; gap: 10px; margin: 16px 0; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linha-2); background: rgba(10, 8, 24, .45); cursor: pointer; color: var(--texto); text-align: left; font: inherit; width: 100%; transition: border .2s, background .2s; }
.opt:hover { border-color: rgba(233, 196, 106, .5); background: rgba(233, 196, 106, .06); }
.opt.best { border-color: rgba(233, 196, 106, .55); background: linear-gradient(135deg, rgba(233, 196, 106, .12), rgba(124, 92, 255, .08)); }
.opt b { display: block; font-size: 1rem; }
.opt small { color: var(--texto-3); font-size: .82rem; }
.opt .p { font-weight: 800; color: var(--ouro-claro); white-space: nowrap; }
.sticky-unlock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(13, 10, 29, .94); border-top: 1px solid var(--linha); backdrop-filter: blur(10px); display: flex; gap: 12px; align-items: center; justify-content: space-between; transform: translateY(110%); transition: transform .3s; }
.sticky-unlock.show { transform: none; }
@media (min-width: 900px) { .sticky-unlock { display: none; } }
.synth-block { margin-top: 14px; }
.synth-block h3 { font-size: 1.35rem; margin-bottom: 6px; }
.highlight { font-family: var(--serif); font-size: 2rem; line-height: 1.1; margin: 4px 0 8px; }
.answer-sim { color: var(--verde); } .answer-nao { color: var(--rosa); } .answer-talvez { color: var(--lavanda); }
.stars { display: flex; gap: 6px; }
.stars button { background: none; border: 0; font-size: 1.9rem; color: rgba(233, 196, 106, .3); cursor: pointer; padding: 0; line-height: 1; }
.stars button.on { color: var(--ouro); }

/* ---------- gamificação ---------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week .d { display: grid; justify-items: center; gap: 4px; font-size: .7rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; }
.week .m { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linha); display: grid; place-items: center; }
.week .done .m { background: radial-gradient(circle at 35% 35%, #FFF3D0, #E9C46A 55%, #B9852F); border-color: transparent; box-shadow: 0 0 14px rgba(233, 196, 106, .5); }
.week .today .m { outline: 2px solid rgba(233, 196, 106, .6); outline-offset: 2px; }
.bar { height: 10px; border-radius: 999px; background: rgba(184, 166, 255, .12); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ouro-grad); box-shadow: 0 0 12px rgba(233, 196, 106, .5); transition: width 1s ease; }
.stat { display: grid; gap: 2px; padding: 16px; border-radius: 16px; background: rgba(10, 8, 24, .4); border: 1px solid var(--linha-2); }
.stat b { font: 700 1.9rem/1 var(--serif); color: var(--ouro-claro); }
.stat span { font-size: .8rem; color: var(--texto-3); font-weight: 600; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.badge { padding: 14px; border-radius: 16px; border: 1px solid var(--linha-2); background: rgba(10, 8, 24, .35); text-align: center; opacity: .45; filter: grayscale(.8); }
.badge.on { opacity: 1; filter: none; border-color: var(--linha); background: linear-gradient(160deg, rgba(233, 196, 106, .1), rgba(124, 92, 255, .06)); }
.badge .bi { width: 46px; height: 46px; margin: 0 auto 8px; }
.badge b { display: block; font-size: .92rem; }
.badge small { color: var(--texto-3); font-size: .76rem; line-height: 1.35; display: block; margin-top: 2px; }
.levels { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.levels .lv { flex: 1; min-width: 64px; text-align: center; font-size: .78rem; color: var(--texto-3); }
.levels .lv svg { width: 34px; height: 34px; margin: 0 auto 6px; display: block; }
.levels .lv.on { color: var(--ouro-claro); }
.grim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
@media (min-width: 800px) { .grim-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
.grim-grid a, .grim-grid div { display: block; position: relative; border-radius: 8px; overflow: hidden; }
.grim-grid .locked img { filter: brightness(.45) saturate(.5); }
.grim-grid .locked::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 2rem var(--serif); color: rgba(247, 231, 176, .7); }

/* ---------- modal, toast, banner ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 80; background: rgba(5, 3, 14, .72); backdrop-filter: blur(6px); display: grid; place-items: end center; padding: 0; animation: fade .2s; }
@media (min-width: 640px) { .modal-bg { place-items: center; padding: 20px; } }
.modal { width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; background: linear-gradient(180deg, #1D1740, #15112F); border: 1px solid var(--linha); border-radius: 24px 24px 0 0; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow: var(--sombra); animation: up .3s cubic-bezier(.2, .8, .2, 1); position: relative; }
@media (min-width: 640px) { .modal { border-radius: 24px; padding: 30px; } }
.modal .x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .06); color: var(--texto); font-size: 1.3rem; cursor: pointer; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(10, 8, 24, .5); border: 1px solid var(--linha-2); margin-bottom: 18px; }
.tabs button { flex: 1; min-height: 40px; border-radius: 999px; border: 0; background: none; color: var(--texto-2); font: 700 .92rem var(--sans); cursor: pointer; }
.tabs button.on { background: var(--veu-2); color: var(--texto); }
.qr { width: 220px; height: 220px; margin: 10px auto; background: #fff; border-radius: 16px; padding: 10px; }
.qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.copy-box { display: flex; gap: 8px; }
.copy-box input { flex: 1; min-width: 0; font-size: .8rem; }
.waiting { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--texto-2); font-weight: 600; margin: 12px 0; }
.waiting .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .2; transform: scale(.6); } }
.toasts { position: fixed; z-index: 90; left: 50%; top: 76px; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 380px); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, #2A2257, #1B1638); border: 1px solid var(--linha); box-shadow: var(--sombra); font-weight: 600; font-size: .94rem; animation: toastIn .4s cubic-bezier(.2, .8, .2, 1.3); }
.toast .t-ic { font-size: 1.3rem; color: var(--ouro); }
.toast.err { border-color: rgba(255, 154, 154, .5); }
@keyframes toastIn { from { transform: translateY(-16px) scale(.96); opacity: 0; } }
.consent { position: fixed; z-index: 70; left: 10px; right: 10px; bottom: 10px; max-width: 620px; margin: 0 auto; padding: 12px 14px; border-radius: 16px; background: rgba(21, 17, 47, .97); border: 1px solid var(--linha); box-shadow: var(--sombra); display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; font-size: .82rem; line-height: 1.4; color: var(--texto-2); }
.consent > div:first-child { flex: 1 1 220px; }
.consent .row { display: flex; gap: 8px; }
.consent .btn-s { --h: 36px; padding: 0 14px; font-size: .84rem; }
.celebrate { text-align: center; }
.celebrate .big { font: 700 3.2rem/1 var(--serif); }
.stardust { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.stardust i { position: absolute; width: 8px; height: 8px; background: var(--ouro-claro); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: dust 1.6s ease-out forwards; }
@keyframes dust { to { transform: translate(var(--dx), var(--dy)) rotate(220deg) scale(.2); opacity: 0; } }

/* ---------- conteúdo editorial ---------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: 1.6em; font-size: 2rem; }
.prose h3 { margin-top: 1.3em; }
.prose p, .prose li { color: var(--texto-2); }
.prose strong { color: var(--texto); }
.faq details { border-bottom: 1px solid var(--linha-2); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--ouro); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--texto-2); margin: 10px 0 0; }
.card-page { display: grid; gap: 30px; }
@media (min-width: 860px) { .card-page { grid-template-columns: 340px 1fr; gap: 50px; } }
.card-page .tarot-static { max-width: 320px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 50px rgba(233, 196, 106, .18); }
.meaning { margin-bottom: 18px; }
.meaning h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro); margin-bottom: 6px; }
.crumbs { font-size: .82rem; color: var(--texto-3); margin-bottom: 14px; }
.crumbs a { color: var(--texto-2); }
.plans { display: grid; gap: 16px; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { display: flex; flex-direction: column; gap: 12px; }
.plan .amount { font: 700 2.6rem/1 var(--serif); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.plan li { padding-left: 26px; position: relative; color: var(--texto-2); }
.plan li::before { content: "✦"; position: absolute; left: 4px; color: var(--ouro); }
table.cmp { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.cmp th, table.cmp td { padding: 12px 10px; border-bottom: 1px solid var(--linha-2); text-align: left; }
table.cmp td:not(:first-child), table.cmp th:not(:first-child) { text-align: center; }

/* ---------- rodapé ---------- */
.foot { border-top: 1px solid var(--linha); padding: 42px 0 34px; margin-top: 40px; color: var(--texto-3); font-size: .88rem; background: rgba(8, 6, 18, .5); }
.foot .cols { display: grid; gap: 26px; }
@media (min-width: 800px) { .foot .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot h4 { color: var(--texto); font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.foot a { display: block; color: var(--texto-2); padding: 3px 0; }
.foot .legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .06); display: grid; gap: 6px; }

/* ---------- admin ---------- */
.admin table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.admin th, .admin td { padding: 9px 8px; border-bottom: 1px solid var(--linha-2); text-align: left; vertical-align: top; }
.admin th { color: var(--texto-3); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.admin .kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.admin .tabs { max-width: 100%; overflow-x: auto; }
.admin .tabs button { flex: 0 0 auto; padding: 0 14px; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 10px; }
.chart i { flex: 1; background: var(--ouro-grad); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .9; position: relative; }
.chart i:hover::after { content: attr(data-t); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #000; padding: 3px 6px; border-radius: 6px; font-size: .72rem; color: #fff; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.tag.approved { background: rgba(143, 216, 184, .15); color: var(--verde); }
.tag.pending { background: rgba(233, 196, 106, .14); color: var(--ouro); }
.tag.rejected, .tag.expired, .tag.refunded { background: rgba(255, 154, 154, .14); color: var(--erro); }

.mini-fan { display: flex; justify-content: center; margin: 4px auto 18px; height: 120px; }
.mini-fan img { width: 64px; border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 24px rgba(233, 196, 106, .12); margin: 0 -14px; transform-origin: 50% 140%; }
.mini-fan img:nth-child(1) { transform: rotate(-24deg); } .mini-fan img:nth-child(2) { transform: rotate(-12deg) translateY(-6px); }
.mini-fan img:nth-child(3) { transform: translateY(-10px); z-index: 2; } .mini-fan img:nth-child(4) { transform: rotate(12deg) translateY(-6px); } .mini-fan img:nth-child(5) { transform: rotate(24deg); }

/* resposta do Sim ou Não e leitura da IA */
.answer-box { text-align: center; margin-top: 22px; }
.answer-big { font: 700 clamp(3rem, 13vw, 5.2rem)/1 var(--serif); letter-spacing: .03em; margin: 4px 0 8px; text-shadow: 0 0 40px currentColor; }
.answer-big.sim { color: var(--verde); } .answer-big.nao { color: var(--rosa); }
.answer-big small { display: block; font-size: .32em; letter-spacing: .02em; margin-top: 8px; text-shadow: none; }
.ai-box { margin-top: 22px; }
.ai-text p { font-size: 1.06rem; line-height: 1.75; }
.ai-text p strong { color: var(--ouro-claro); }
.ai-text p.conselho { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ouro-claro); border-left: 2px solid var(--ouro); padding: 6px 0 6px 14px; }
.ai-label { display: inline-flex; gap: 6px; align-items: center; font-size: .74rem; color: var(--texto-3); }
.shimmer { display: grid; gap: 10px; margin: 10px 0; }
.shimmer i { display: block; height: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(184,166,255,.08), rgba(233,196,106,.22), rgba(184,166,255,.08)); background-size: 200% 100%; animation: shim 1.4s linear infinite; }
.shimmer i:nth-child(2) { width: 92%; } .shimmer i:nth-child(3) { width: 84%; } .shimmer i:nth-child(4) { width: 70%; }
@keyframes shim { to { background-position: -200% 0; } }