:root{
  --bg:#0a0a0a;--panel:#111213;--panel2:#171819;--line:#2b2b2b;
  --gold:#d9b66f;--gold2:#f1d28f;--text:#f2eee7;--muted:#9d978e;--danger:#c86b62;
  --serif:Georgia,"Times New Roman",serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --sidebar-w:240px;
  /* Grimorius Purple & Gold — electric violet from the ad, used as a DISCREET
     accent (progress, trend, selected states). Gold stays the primary accent.
     Dark surfaces dominate; purple is ~3% of the surface area. */
  --gr-purple:#9228F5;--gr-purple-bright:#AD40FF;--gr-purple-soft:#B98BE8;--gr-purple-muted:#352043;
  --gr-border-accent:#5A386F;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
a,button,.btn,.nav-item,.tv-card,.pact-card,.entity-card,.radio-card,.lang,label,[role=button]{-webkit-user-select:none;user-select:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%;height:auto}
/* long tokens (emails, urls, descriptions) never overflow on narrow screens */
h1,h2,h3,p,.history-main div,.pact-card p{overflow-wrap:anywhere;word-break:break-word}

/* Material Symbols */
.mi{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:'liga';user-select:none}

/* ===== Layout: mobile-first (single column) ===== */
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* Sidebar as off-canvas drawer on mobile */
.sidebar{position:fixed;top:0;left:0;z-index:60;width:min(80vw,290px);height:100vh;height:100dvh;
  border-right:1px solid var(--line);padding:max(22px,env(safe-area-inset-top)) 14px calc(22px + env(safe-area-inset-bottom));background:#0b0c0d;
  transform:translateX(-100%);transition:transform .24s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.nav-open .sidebar{transform:translateX(0)}
.sidebar-overlay{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .24s}
body.nav-open .sidebar-overlay{opacity:1;visibility:visible}
.brand{display:block;margin:4px 10px 26px}
.brand img{width:142px}
.nav-item{display:flex;align-items:center;gap:13px;padding:13px 13px;border-radius:11px;color:#aaa49a;margin:4px 0;font-size:14px}
.nav-item:hover,.nav-item.active{background:#171819;color:var(--gold2)}
.nav-item .ico{width:22px;color:var(--gold);font-size:22px}
.nav-item .ico-svg{display:inline-flex;align-items:center;justify-content:center;height:22px}
.nav-item .ico-svg svg{width:21px;height:21px;display:block}
.sidebar-bottom{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
[data-subscription-link]{position:relative}
.sub-dot{display:none;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-left:auto;box-shadow:0 0 6px var(--gold)}
[data-subscription-link][data-active="1"] .sub-dot{display:inline-block}

.main{min-width:0;flex:1;display:flex;flex-direction:column}

/* Topbar */
.topbar{height:58px;display:flex;align-items:center;gap:8px;padding:0 max(12px,env(safe-area-inset-left));
  border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(10,10,10,.92);backdrop-filter:blur(14px);z-index:30}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
/* on very narrow screens, let the ether chip hide its word, keeping the number */
@media(max-width:400px){
  .ether .ether-label{display:none}
  .topbar .lang-trigger{padding:7px 7px}
  .topbar .lang-trigger .lang-code{display:none}
}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#141516;color:var(--text);cursor:pointer}
.icon-btn .mi{font-size:24px}
.menu-toggle{display:inline-flex;flex:none}
.brand-mobile{flex:none}
.brand-mobile img{height:26px;display:block}
@media(max-width:420px){.brand-mobile{display:none}}
.ether{display:inline-flex;align-items:center;gap:6px;border:1px solid #4b402d;border-radius:999px;padding:7px 11px;color:var(--gold2);font-size:12px;white-space:nowrap}
.ether .mi{font-size:16px}
.avatar{flex:none;width:36px;height:36px;border:1px solid #555;border-radius:50%;display:grid;place-items:center;font-family:var(--serif)}

.content{width:100%;max-width:1100px;margin:auto;padding:22px max(16px,env(safe-area-inset-left)) 110px}

/* ===== Components ===== */
.page-head{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.page-head h1,h1{font:400 clamp(26px,7vw,30px)/1.15 var(--serif);margin:0}
.page-head p{color:var(--muted);margin:6px 0 0}
/* a "voltar" style button in a page-head should sit inline, not stretch */
.page-head .btn{align-self:flex-start}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #5b4828;border-radius:10px;padding:12px 16px;cursor:pointer;background:linear-gradient(180deg,#ebcb8a,#d6ae64);color:#18130d;font-weight:700;font-size:13px;min-height:44px}
.btn:hover{filter:brightness(1.04)}
.btn .mi{font-size:19px}
.btn.secondary{background:#151617;color:#ddd2bf;border-color:#343434}
.btn.danger{background:#1b1110;color:#e69a91;border-color:#66352f}
.btn.link{background:none;border:none;color:var(--muted);padding:7px}

.card{border:1px solid var(--line);border-radius:14px;background:#101112;padding:18px}
.card h3{display:flex;align-items:center;gap:8px}
.card h3 .mi{color:var(--gold);font-size:21px}
.grid{display:grid;gap:14px}
.grid.two,.grid.three{grid-template-columns:1fr}
/* [hidden] must win over .grid{display:grid} so the archived oracle group
   stays hidden by default (no JS needed) and when toggled back to active. */
.oracle-group[hidden]{display:none}

.pact-card{display:block;border:1px solid var(--line);border-radius:14px;padding:18px;background:#111213;transition:.16s}
.pact-card:hover{border-color:#5a482d;transform:translateY(-1px)}
.pact-card h3{font:400 22px var(--serif);margin:0 0 7px}
.muted{color:var(--muted)}
.small{font-size:12px}
.badge{display:inline-block;border:1px solid #3c352a;border-radius:999px;padding:5px 8px;font-size:10px;color:#c5b99f}
.badge.gold{border-color:#745b30;color:var(--gold2)}
.progress{height:5px;border-radius:99px;background:#272727;overflow:hidden;margin:14px 0 5px}
.progress span{display:block;height:100%;background:var(--gold)}

.form-group{margin:0 0 18px}
.form-group label{display:block;margin:0 0 7px;color:#c8c2b9;font-size:12px}
.field{width:100%;background:#0c0d0e;border:1px solid #343434;color:var(--text);border-radius:10px;padding:13px;outline:none}
.field:focus{border-color:#75603b}
textarea.field{min-height:120px;resize:vertical}
.duration{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.radio-card input{display:none}
.radio-card span{display:block;border:1px solid #343434;border-radius:10px;padding:16px 8px;text-align:center;color:#bbb;background:#101112}
.radio-card input:checked+span{border-color:var(--gold);color:var(--gold2);background:#17150f}
.actions{display:flex;gap:10px;flex-wrap:wrap}
/* Mobile: action buttons go full-width and stack, like a native app */
.actions .btn,.actions>form{flex:1 1 100%}
.actions>form{display:flex}
.actions>form .btn{flex:1 1 auto;width:100%}
@media(min-width:560px){
  .actions .btn,.actions>form{flex:0 0 auto}
  .actions>form .btn{width:auto}
}

.flash{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid #3c3c3c;border-radius:10px;margin-bottom:18px;background:#131415;font-size:13px}
.flash.success{border-color:#46624c;color:#b6d7bb}
.flash.error{border-color:#693d39;color:#e9aaa3}
.flash.info{border-color:#5b4a30;color:#e7cb91}

.entity-list{display:grid;grid-template-columns:1fr;gap:10px}
.entity-card{border:1px solid var(--line);padding:18px;border-radius:12px}
.entity-card .symbol{font-size:26px;color:var(--gold)}
.entity-card h3{font:400 20px var(--serif);margin:10px 0 5px}

/* Tarot */
.tarot-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tarot-card{min-height:clamp(150px,42vw,220px);border:1px solid #6d5732;border-radius:11px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;text-align:center;background:radial-gradient(circle at 50% 30%,#282114,#121212 55%)}
.tarot-card strong{font-size:clamp(12px,3.4vw,15px);line-height:1.2}
.tarot-card .roman{font:400 clamp(24px,7vw,32px) var(--serif);color:var(--gold2)}
.tarot-art{width:100%;height:auto;border-radius:7px;display:block;margin:6px 0;object-fit:cover}
@media(min-width:560px){.tarot-cards{display:flex;flex-wrap:wrap}.tarot-card{flex:0 1 150px}}
.tarot-card.reversed{transform:rotate(180deg)}
.reading{border-left:2px solid var(--gold);padding:4px 14px;font:400 clamp(16px,4.2vw,18px)/1.6 var(--serif);color:#d8c9ae}
.reading p{margin:12px 0}
.reading p:first-child{margin-top:0}
.reading p:last-child{margin-bottom:0}
.reading strong{color:var(--gold2);font-weight:600}
.reading em{color:#e8dcc2}

/* History list (clickable readings) */
.history-list{display:flex;flex-direction:column}
.history-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.history-item:hover{color:var(--gold2)}
.history-main{flex:1;min-width:0}
.history-chevron{color:var(--muted);font-size:22px;flex:none}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:flex-end;justify-content:center;z-index:100}
.modal.open{display:flex}
.modal-box{max-width:580px;width:100%;border:1px solid #4a3c28;border-radius:16px 16px 0 0;background:#111213;padding:22px 20px calc(22px + env(safe-area-inset-bottom));max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-box h1{font-size:clamp(24px,6vw,30px)}

/* Confirm dialog */
.confirm-modal{z-index:300}
.confirm-box{max-width:440px}
.confirm-title{font:400 clamp(21px,5vw,26px) var(--serif);margin:0 0 10px}
.confirm-text{color:var(--text);margin:0;line-height:1.5;font-size:15px}
.confirm-actions{display:flex;gap:10px;margin-top:22px}
.confirm-actions .btn{flex:1 1 auto}
@media(min-width:560px){.confirm-actions{justify-content:flex-end}.confirm-actions .btn{flex:0 0 auto;min-width:120px}}

.legal{max-width:850px}
.legal h2{font:400 24px var(--serif);margin-top:30px}
.legal p,.legal li{color:#b6afa4;line-height:1.75}
.empty{border:1px dashed #333;border-radius:14px;padding:42px 18px;text-align:center;color:var(--muted)}

/* Guest / landing */
.guest{min-height:100vh;background:radial-gradient(circle at 75% 5%,rgba(218,181,111,.08),transparent 30%),#090a0b}
.guest-nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1160px;margin:auto;padding:0 max(16px,env(safe-area-inset-left))}
.guest-nav img{width:112px}
.guest-nav .actions{gap:8px;flex-wrap:nowrap;width:auto}
.guest-nav .actions .btn{flex:0 0 auto}
.guest-wrap{max-width:1160px;margin:auto;padding:0 max(16px,env(safe-area-inset-left))}
@media(max-width:380px){.guest-nav img{width:96px}}
.hero{display:grid;grid-template-columns:1fr;gap:28px;padding:36px 0 56px}
.hero h1{font-size:clamp(34px,9vw,42px);letter-spacing:-.03em;line-height:1.08}
.hero h1 em{font-style:normal;color:var(--gold2)}
.hero p{color:#c4bcb1;font-size:16px;line-height:1.7}
.hero img.preview{width:100%;border-radius:18px;border:1px solid #383838;box-shadow:0 30px 90px #000}
.kicker{color:var(--gold);text-transform:uppercase;font-size:10px;letter-spacing:.2em}
.guest-section{padding:56px 0;border-top:1px solid var(--line)}
.guest-section h2{font:400 clamp(26px,7vw,32px) var(--serif);margin:0 0 14px}
.offer{max-width:680px;margin:auto;text-align:center;border:1px solid #564526;border-radius:18px;padding:clamp(20px,5vw,28px);background:#101112}
.offer .price{font:400 clamp(32px,8vw,38px) var(--serif);color:var(--gold2)}
/* Subscription price block (trial-first). Legacy monthly-equivalent styles below
   are unused; the trial breakdown uses the .price-trial rules further down. */
.price-block{margin:4px 0 2px}
.price-block .price-monthly{display:inline-flex;align-items:baseline;gap:4px;justify-content:center}
.price-block .price-per{font:400 clamp(14px,3.5vw,18px) var(--serif);color:var(--gold2);opacity:.85}
/* Charged-amount line ({annual} / 12 months): less weight than the headline,
   but clearly legible — no ultra-low contrast, never hidden. */
.price-block .price-cycle{margin-top:6px;font-size:14px;color:var(--text);opacity:.9}
.price-block .price-cycle[hidden]{display:none}
.auth-box{max-width:480px;margin:24px auto;border:1px solid var(--line);border-radius:16px;padding:clamp(18px,5vw,24px);background:#101112}
.auth-box h1{font-size:clamp(26px,7vw,30px);margin-bottom:20px}
.check-row{display:flex;gap:10px;align-items:flex-start;color:#aaa;font-size:13px;line-height:1.5;margin:12px 0}
.check-row input[type=checkbox],.check-row input[type=radio]{margin-top:2px;width:18px;height:18px;flex:none}
/* Language switcher (flags) */
.lang-switch{position:relative}
.lang-trigger{display:inline-flex;align-items:center;gap:7px;cursor:pointer;line-height:1;
  background:linear-gradient(180deg,#17181b,#121315);color:#e7ddc9;border:1px solid #3a3327;
  border-radius:10px;padding:8px 10px;min-height:40px;font:inherit;font-size:13px;font-weight:600;letter-spacing:1px}
.lang-trigger:hover{border-color:#5a482d}
.lang-trigger:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,182,111,.14)}
.lang-flag{display:block;width:20px;height:14px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.lang-caret{font-size:18px;color:#b9ad93;transition:transform .18s ease}
.lang-switch.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;margin:0;padding:6px;list-style:none;
  min-width:184px;border:1px solid #3a3327;border-radius:12px;background:#141517;
  box-shadow:0 14px 36px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease}
.lang-switch.open .lang-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.lang-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#e7ddc9;
  text-decoration:none;font-size:14px;font-weight:500;letter-spacing:0}
.lang-opt:hover{background:#1d1f22}
.lang-opt.is-active{color:var(--gold2)}
.lang-opt .lang-name{flex:1}
.lang-check{font-size:18px;color:var(--gold)}

/* Billing: active plan premium block */
.active-plan{position:relative;text-align:center}
.active-seal{width:60px;height:60px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;
  color:#18130d;background:radial-gradient(circle at 50% 35%,#f1d28f,#d6ae64);
  box-shadow:0 10px 30px rgba(214,174,100,.35)}
.active-seal .mi{font-size:34px}
.active-plan h2{font:400 clamp(26px,7vw,32px) var(--serif);margin:6px 0 4px;color:var(--gold2)}
.active-feats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 18px}
.active-feats .feat{display:inline-flex;align-items:center;gap:6px;border:1px solid #3c352a;border-radius:999px;
  padding:7px 12px;font-size:12px;color:#d8cdbb;background:rgba(217,182,111,.06)}
.active-feats .feat .mi{font-size:16px;color:var(--gold)}

/* ===== Tablet and up ===== */
@media(min-width:720px){
  .page-head{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:20px}
  .page-head h1,h1{font-size:38px}
  .content{padding:34px 26px 70px}
  .grid.two{grid-template-columns:repeat(2,1fr)}
  .grid.three{grid-template-columns:repeat(3,1fr)}
  .entity-list{grid-template-columns:repeat(2,1fr)}
  .duration{grid-template-columns:repeat(4,1fr)}
  .modal{align-items:center;padding:20px}
  .modal-box{border-radius:16px}
  .hero h1{font-size:60px}
  .guest-nav img{width:150px}
}

/* ===== Desktop: fixed sidebar ===== */
@media(min-width:960px){
  .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr}
  .sidebar{position:sticky;transform:none;width:auto;height:100vh;z-index:10;padding:24px 14px;display:flex;flex-direction:column}
  .sidebar-bottom{margin-top:auto;border-top:0;padding-top:0}
  .sidebar-overlay,.menu-toggle,.brand-mobile{display:none}
  .topbar{height:64px;padding:0 28px;justify-content:flex-end}
  .content{padding:42px 34px 80px}
  .entity-list{grid-template-columns:repeat(3,1fr)}
  .hero{grid-template-columns:1fr 1fr;gap:48px;min-height:calc(100vh - 64px);align-items:center;padding:48px 0 70px}
  .hero h1{font-size:72px;letter-spacing:-.05em}
  .guest-section h2{font-size:44px}
}

/* ===== Dynamic feedback (JS) ===== */

/* Toasts */
.toast-wrap{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:calc(100% - 28px);max-width:460px;pointer-events:none}
.toast{pointer-events:auto;padding:13px 15px;border-radius:12px;border:1px solid #3c3c3c;background:#15161a;color:var(--text);font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(14px);transition:opacity .28s,transform .28s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{border-color:#693d39;color:#f0b4ad}
.toast.success{border-color:#46624c;color:#bfe0c4}
.toast.info{border-color:#5b4a30;color:#ecd199}
@media(min-width:720px){.toast-wrap{left:auto;right:24px;transform:none;bottom:24px}}

/* Button loading state */
.btn.is-loading{position:relative;color:transparent !important;pointer-events:none;opacity:.85}
.btn.is-loading .mi{opacity:0}
.btn.is-loading::after{content:"";position:absolute;width:17px;height:17px;border:2px solid rgba(24,19,13,.35);border-top-color:#18130d;border-radius:50%;animation:grim-spin .7s linear infinite}
.btn.secondary.is-loading::after,.btn.danger.is-loading::after{border-color:rgba(230,220,200,.3);border-top-color:#e6dcc8}
@keyframes grim-spin{to{transform:rotate(360deg)}}

/* Ether refresh button: compact, inline with the balance; spins while loading. */
.ether-refresh{width:34px;height:34px}
.ether-refresh .mi{font-size:20px}
.ether-refresh.is-loading{pointer-events:none}
.ether-refresh.is-loading .mi{animation:grim-spin .7s linear infinite}
@media(prefers-reduced-motion:reduce){.ether-refresh.is-loading .mi{animation:none !important}}

/* Shuffling placeholder cards */
.tarot-card.is-shuffling{align-items:center;justify-content:center;color:var(--muted);animation:grim-pulse 1s ease-in-out infinite}
.tarot-card.is-shuffling .roman{opacity:.5}
@keyframes grim-pulse{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:.9;transform:translateY(-4px)}}
.tarot-card.is-shuffling:nth-child(2){animation-delay:.15s}
.tarot-card.is-shuffling:nth-child(3){animation-delay:.3s}

/* Reveal animation for result */
.reading-result.reveal{animation:grim-reveal .45s ease}
@keyframes grim-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .toast,.btn.is-loading::after,.tarot-card.is-shuffling,.reading-result.reveal{animation:none !important;transition:none !important}
}

/* ===== PWA install modal (full-screen) ===== */
body.pwa-open{overflow:hidden}
.pwa-modal[hidden]{display:none !important}
.pwa-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  background:radial-gradient(circle at 50% 20%,rgba(218,181,111,.12),transparent 45%),rgba(7,8,9,.97);
  animation:grim-reveal .3s ease}
.pwa-box{width:100%;max-width:420px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.pwa-icon{border-radius:22px;border:1px solid #4a3c28;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.pwa-box h2{font:400 clamp(26px,7vw,32px) var(--serif);margin:4px 0 0}
.pwa-box p{margin:0;line-height:1.6}
.pwa-box .pwa-ios{display:flex;align-items:center;gap:7px;justify-content:center;color:var(--gold2)}
.pwa-box .pwa-ios .mi{font-size:18px}
.pwa-actions{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:10px}
.pwa-actions .btn{width:100%}
@media(min-width:600px){.pwa-modal{align-items:center}}

/* ===== Codex: TV-box experience ===== */
.codex{display:flex;flex-direction:column;gap:30px}

/* Hero */
.codex-hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,6vw,46px);min-height:clamp(260px,52vw,380px);display:flex;align-items:flex-end;
  background:
    radial-gradient(120% 140% at 85% 15%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%),
    linear-gradient(180deg,#0d0e10,#141210)}
.codex-hero-glyph{position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  font-size:clamp(180px,52vw,440px);line-height:.8;color:var(--accent);opacity:.22;
  text-shadow:0 0 60px color-mix(in srgb,var(--accent) 60%,transparent);pointer-events:none;user-select:none}
.codex-hero-body{position:relative;max-width:560px}
.codex-hero-title{font:400 clamp(34px,10vw,64px)/1 var(--serif);margin:8px 0 10px}
.codex-hero-domain{color:var(--accent);font-size:clamp(13px,3.6vw,16px);margin:0 0 10px;font-weight:600}
.codex-hero-summary{color:#cdc6ba;line-height:1.6;margin:0 0 18px}

/* Rows */
.codex-row-wrap{display:flex;flex-direction:column;gap:12px}
.codex-row-head h2{display:flex;align-items:center;gap:9px;font:400 clamp(20px,5.5vw,26px) var(--serif);margin:0}
.codex-row-head h2 .mi{color:var(--gold);font-size:22px}
.codex-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:10px 2px 4px}
.codex-row:focus{outline:none}
.codex-row:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:12px}
@media(min-width:560px){.codex-row{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.codex-row{grid-template-columns:repeat(4,1fr)}}

/* TV card */
.tv-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#101112;
  display:flex;flex-direction:column;cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.tv-card-art{position:relative;aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(100% 100% at 50% 20%, color-mix(in srgb,var(--accent) 30%,#15130f), #101112 70%)}
.tv-glyph{font-size:clamp(64px,20vw,120px);line-height:1;color:var(--accent);
  text-shadow:0 0 30px color-mix(in srgb,var(--accent) 55%,transparent)}
.tv-card .tv-ico{font-size:clamp(48px,14vw,78px);color:var(--accent)}
.tv-card-meta{padding:12px 13px;display:flex;flex-direction:column;gap:4px;min-height:0}
.tv-card-meta strong{font:400 clamp(16px,4.6vw,19px) var(--serif)}
.tv-card.concept .tv-card-meta .small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tv-card>*{pointer-events:none} /* clique sempre cai no card, não em filhos */
.tv-card:active{transform:scale(.98)}
/* Premium zoom + glow only where a precise pointer exists (desktop) or via keyboard focus */
@media(hover:hover) and (pointer:fine){
  .tv-card:hover,.tv-card.is-focus{transform:scale(1.06);border-color:var(--accent);
    box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent);outline:none;z-index:2}
}
.tv-card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent);outline:none}

/* ===== Codex detail (immersive) ===== */
.codex-detail{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;
  padding-top:6px}
.codex-backdrop{position:fixed;right:-10%;top:12%;z-index:-1;font-size:min(90vw,620px);line-height:.8;
  color:var(--accent);opacity:.08;pointer-events:none;user-select:none}
.codex-detail-top{margin-bottom:4px}
.codex-detail-head{display:flex;align-items:center;gap:16px}
.codex-detail-glyph{flex:none;width:clamp(66px,18vw,96px);height:clamp(66px,18vw,96px);border-radius:20px;
  display:grid;place-items:center;font-size:clamp(38px,11vw,56px);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));
  background:radial-gradient(100% 100% at 50% 15%, color-mix(in srgb,var(--accent) 28%,#141210), #101112)}
.codex-detail-head h1{font:400 clamp(32px,9vw,52px)/1 var(--serif);margin:0}
.codex-detail-domain{color:var(--accent);font-weight:600;margin:8px 0 0}
.codex-detail-summary{font:400 clamp(18px,4.6vw,22px)/1.6 var(--serif);color:#ddd3c2;margin:4px 0}
.codex-epigraph{font:italic 400 clamp(19px,5vw,26px)/1.5 var(--serif);color:var(--accent);
  margin:6px 0 2px;padding-left:16px;border-left:2px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.codex-lore{display:flex;flex-direction:column;gap:14px}
.codex-lore p{font:400 clamp(16px,4.4vw,18.5px)/1.75 var(--serif);color:#ddd3c2;margin:0}
.codex-lore p:first-child::first-letter{font-size:2.6em;line-height:.9;float:left;
  padding:4px 10px 0 0;color:var(--accent);font-family:var(--serif)}
.codex-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));color:#d8cdbb;
  border-radius:999px;padding:6px 12px;font-size:12px;text-transform:capitalize;
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.codex-voice p{font:400 clamp(16px,4.4vw,18px)/1.65 var(--serif);color:#d8c9ae;margin:8px 0 0}
.codex-voice .mi{color:var(--accent)}
.codex-consult{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.codex-consult>div{min-width:0;flex:1 1 220px}
.codex-consult p{margin:6px 0 0}
.codex-consult .btn{flex:none}
.codex-disclaimer{margin-top:4px}

@media(prefers-reduced-motion:reduce){
  .tv-card{transition:none !important}
}

/* ===== Post-login hub (oracle picker) ===== */
/* Reuses .tv-card look but with larger, library/TV-box proportions. Grid fills
   the remaining content width (sidebar already consumed on desktop) and reflows
   1->2->3->4 columns by available space, never squeezing cards to force columns. */
.hub-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:460px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:720px){.hub-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.hub-grid{grid-template-columns:repeat(4,1fr)}}
.hub-card{min-height:clamp(280px,42vw,340px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),rgba(10,10,10,.98))}
.hub-card .tv-card-art{aspect-ratio:auto;flex:1}
.hub-card .tv-ico{font-size:clamp(56px,11vw,86px);transition:transform .2s ease}
.hub-card .tv-card-meta{padding:16px 18px 20px;gap:6px}
.hub-card .tv-card-meta .small{line-height:1.5}
@media(hover:hover) and (pointer:fine){
  .hub-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
  .hub-card:hover,.hub-card.is-focus{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 60%,var(--line));
    box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--accent) 22%,transparent)}
  .hub-card:hover .tv-ico,.hub-card.is-focus .tv-ico{transform:scale(1.08)}
}
@media(prefers-reduced-motion:reduce){.hub-card,.hub-card .tv-ico{transition:none !important}}

/* ===== Deluxe theme: premium finish across the app ===== */

/* Ambient glow behind the content area (subtle, centered) */
.main{position:relative}
.main::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% -5%, rgba(217,182,111,.08), transparent 60%),
    radial-gradient(40% 30% at 90% 110%, rgba(176,111,196,.05), transparent 60%)}

/* Comfortable centered reading width for form-centric pages */
.content{display:flex;flex-direction:column}
.content>.page-head,.content>.card,.content>.grid,.content>.empty,.content>.flash,.content>form.card,.content>.actions,.content>.codex,.content>.reading-result{width:100%}

/* Cards: layered gradient + hairline highlight + depth */
.card{background:linear-gradient(180deg,#141518,#0e0f11);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.35);
  border-radius:16px}
.card h3{letter-spacing:.2px}

/* Buttons: richer gold, soft glow on hover, crisp press */
.btn{background:linear-gradient(180deg,#f0d396,#d8ac60)}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:linear-gradient(180deg,#1a1b1d,#141517)}
.btn.danger{background:linear-gradient(180deg,#211313,#190f0f)}

/* Fields: deluxe focus ring */
.field{background:#0b0c0e;border-radius:11px;transition:border-color .18s,box-shadow .18s}
.field:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,182,111,.14)}

/* Page head: a refined accent rule under the title */
.page-head h1,h1{letter-spacing:.3px}
.page-head{position:relative}

/* Pact cards: premium hover lift + accent sheen */
.pact-card{background:linear-gradient(180deg,#141518,#0e0f11);
  box-shadow:0 10px 28px rgba(0,0,0,.32)}
.pact-card:hover{border-color:#6a5636;box-shadow:0 16px 42px rgba(0,0,0,.5)}
.pact-card .progress span{background:linear-gradient(90deg,var(--gold),var(--gold2))}

/* Badges: subtle glow */
.badge.gold{background:rgba(217,182,111,.08);box-shadow:0 0 0 1px rgba(116,91,48,.4)}

/* Billing offer: hero-grade treatment */
.offer{background:
  radial-gradient(100% 80% at 50% 0%, rgba(217,182,111,.14), transparent 55%),
  linear-gradient(180deg,#15130f,#0f0f10);
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.offer .price{text-shadow:0 0 30px rgba(241,210,143,.25)}

/* Entity list cards (fallback grid) get the same lift */
.entity-card{background:linear-gradient(180deg,#141518,#0e0f11);transition:transform .18s,border-color .18s,box-shadow .18s}
.entity-card:hover{transform:translateY(-2px);border-color:#5a482d;box-shadow:0 14px 36px rgba(0,0,0,.45)}

/* Gentle entrance for main content (feels responsive/alive) */
@media(prefers-reduced-motion:no-preference){
  .content>*{animation:grim-rise .4s ease both}
  .content>*:nth-child(2){animation-delay:.04s}
  .content>*:nth-child(3){animation-delay:.08s}
  .content>*:nth-child(4){animation-delay:.12s}
}
@keyframes grim-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Empty state: more inviting */
.empty{background:linear-gradient(180deg,#121316,#0d0e10)}

/* Tarot result + reading: premium framing */
.reading-result{background:
  radial-gradient(120% 60% at 50% 0%, rgba(217,182,111,.08), transparent 55%),
  linear-gradient(180deg,#141518,#0e0f11)}

/* Topbar ether chip: subtle inner glow */
.ether{background:rgba(217,182,111,.06);box-shadow:0 0 0 1px rgba(75,64,45,.6) inset}
.avatar{background:linear-gradient(180deg,#1a1b1d,#131416)}
/* ===== Deluxe v2: Codex-grade finish across every page ===== */

/* App chrome: subtle film-grain depth + warmer ambient */
.sidebar{background:linear-gradient(180deg,#0c0d0f,#09090a)}
.nav-item{transition:background .16s,color .16s}
.nav-item.active{box-shadow:inset 2px 0 0 var(--gold)}
.topbar{box-shadow:0 1px 0 rgba(255,255,255,.02)}

/* Page head: serif kicker rule + accent underline like codex row heads */
.page-head h1,h1{position:relative}
.page-head>div>h1::after,.content>.page-head h1::after{content:"";display:block;width:46px;height:2px;margin-top:12px;
  background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px}
.page-head p{line-height:1.6}

/* Section headers inside cards: match codex-row-head weight */
.card h3,.pact-card h3{font-family:var(--serif);font-weight:400}
.card h3 .mi{text-shadow:0 0 18px rgba(217,182,111,.35)}

/* Cards: hairline top highlight for a milled-edge, deluxe look */
.card,.offer,.pact-card,.entity-card,.reading-result,.empty{position:relative}
.card::before,.offer::before,.pact-card::before,.entity-card::before,.reading-result::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,transparent,rgba(241,210,143,.28),transparent);pointer-events:none}

/* Pact cards: entity glyph backdrop + accent sheen, echoing tv-card */
.pact-card{overflow:hidden}
.pact-card::after{content:attr(data-glyph);position:absolute;right:-6px;bottom:-18px;
  font-size:104px;line-height:1;color:var(--gold);opacity:.06;pointer-events:none;user-select:none}
.pact-card:hover::after{opacity:.1}
.pact-card .badge{position:relative;z-index:1}

/* Tap feedback on interactive surfaces (mobile-first, native feel) */
.pact-card:active,.entity-card:active,.history-item:active,.icon-btn:active,.feat:active{transform:scale(.985)}
.icon-btn{transition:transform .12s,border-color .16s,background .16s}
.icon-btn:hover{border-color:#4a3c28;background:#17181a}

/* History rows: gold edge on hover, roomier touch target */
.history-item{border-radius:12px;padding:14px 10px;transition:background .14s}
.history-item:hover{background:rgba(217,182,111,.05)}

/* Radio/duration cards: deluxe selected glow */
.radio-card input:checked+span{box-shadow:0 0 0 1px var(--gold),0 8px 22px rgba(217,182,111,.14)}
.radio-card span{transition:border-color .16s,box-shadow .16s,background .16s}

/* Tarot cards: deeper vignette + gilt frame */
.tarot-card{box-shadow:inset 0 0 40px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.4)}
.tarot-card .roman{text-shadow:0 0 24px rgba(241,210,143,.3)}

/* Avatar + ether chip: refined gilt ring */
.avatar{border-color:#5a482d;color:var(--gold2)}
.ether{border-color:#5a482d}

/* Flash messages: softer deluxe panel */
.flash{border-radius:12px;background:linear-gradient(180deg,#141518,#101113)}

/* Modal: codex-grade framing on mobile sheet */
.modal-box{box-shadow:0 -20px 60px rgba(0,0,0,.6)}
.modal-box::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:44px;height:4px;border-radius:99px;background:#3a3327}
@media(min-width:720px){.modal-box::before{display:none}}

/* Auth boxes: match offer hero treatment */
.auth-box{background:radial-gradient(120% 80% at 50% 0%,rgba(217,182,111,.08),transparent 55%),linear-gradient(180deg,#141210,#0f0f10);
  box-shadow:0 24px 70px rgba(0,0,0,.5)}

/* Regional pricing shows a placeholder while a price is temporarily unavailable */
.price-skeleton{color:#8c8372;letter-spacing:2px}

/* Ether pack bonus badge (e.g. +15%) */
.pack-bonus{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;
  vertical-align:middle;color:#18130d;background:linear-gradient(180deg,#f1d28f,#d6ae64)}

/* DEV-ONLY country simulator (never rendered in production) */
.debug-country{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;border-radius:10px;
  background:repeating-linear-gradient(45deg,#1a1206,#1a1206 6px,#15100a 6px,#15100a 12px);
  border:1px dashed #6b5120;color:#e7ddc9;font-size:12px}
.debug-country-tag{font-size:9px;font-weight:800;letter-spacing:1px;color:#18130d;background:var(--gold,#d9b66f);
  padding:1px 5px;border-radius:5px}
.debug-country-label{color:#8c8372;text-transform:uppercase;letter-spacing:1px;font-size:9px}
.debug-country select{background:#17181b;color:#e7ddc9;border:1px solid #3a3327;border-radius:7px;
  padding:3px 6px;font:inherit;font-size:12px;cursor:pointer}
.debug-country-cur{font-weight:700;letter-spacing:.5px;color:var(--gold2,#e3c687)}
/* Hide the DEV country simulator in mobile layout (even with APP_DEBUG on).
   Below 960px the app is in its mobile layout (desktop sidebar starts at 960). */
@media(max-width:959px){.debug-country{display:none !important}}

/* ===== Admin panel ===== */
.nav-section{margin:16px 10px 6px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#6f6a60}
.admin-search{display:flex;align-items:center;gap:6px;flex:1;min-width:0;max-width:420px;border:1px solid var(--line);border-radius:10px;background:#0c0d0e;padding:0 10px;height:40px}
.admin-search .mi{color:var(--muted);font-size:20px}
.admin-search input{flex:1;min-width:0;background:none;border:0;color:var(--text);outline:none;height:100%}
@media(max-width:600px){.admin-search{display:none}}

.admin-cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.admin-cards{grid-template-columns:1fr 1fr}}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
@media(min-width:720px){.stat-grid{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}}
.stat{display:block;border:1px solid var(--line);border-radius:10px;padding:12px;background:#0d0e0f;color:inherit}
a.stat:hover{border-color:#5a482d}
.stat-n{font:400 26px var(--serif);color:var(--gold2)}
.stat-l{font-size:11px;color:var(--muted);margin-top:2px}

.admin-cols{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(min-width:900px){.admin-cols{grid-template-columns:1fr 1fr}}

.admin-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.admin-filters .field{flex:1;min-width:160px}
.admin-filters select.field{flex:0 0 auto;min-width:160px}

.admin-tabs{display:flex;gap:6px;flex-wrap:wrap}
.admin-tabs .tab{padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted)}
.admin-tabs .tab.active,.admin-tabs .tab:hover{border-color:#5a482d;color:var(--gold2);background:#17150f}

/* tables (also styles the previously-unstyled moderation table) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.grid-table{width:100%;border-collapse:collapse;font-size:13px}
.grid-table th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.grid-table td{padding:10px;border-bottom:1px solid #1c1c1c;vertical-align:middle}
.grid-table tr:hover td{background:#0e0f10}
.grid-table a{color:var(--gold2)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.small{font-size:12px}

/* key/value blocks */
.kv{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;padding:10px;background:#0d0e0f}
.m-label{font-size:11px;color:var(--muted)}
.m-value{font:400 20px var(--serif);color:var(--gold2)}
.kv-list{margin:8px 0 0}
.kv-list>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid #1c1c1c}
.kv-list>div:first-child{border-top:0}
.kv-list dt{color:var(--muted);font-size:12px;margin:0}
.kv-list dd{margin:0;text-align:right;overflow-wrap:anywhere}

/* badges with semantic colors */
.badge.ok{border-color:#46624c;color:#b6d7bb}
.badge.warn{border-color:#6b5a2f;color:#e7cb91}
.badge.danger{border-color:#693d39;color:#e9aaa3}

.pager{display:flex;align-items:center;gap:12px;margin-top:14px}
.btn.small{min-height:34px;padding:7px 10px;font-size:12px}

/* support thread */
.thread{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.msg{border:1px solid var(--line);border-radius:12px;padding:12px;background:#0d0e0f;max-width:92%}
.msg.from-admin{align-self:flex-end;border-color:#4b402d;background:#15140f}
.msg.from-user{align-self:flex-start}
.msg-meta{margin-bottom:4px}
.msg-body{line-height:1.5}

/* user-side discreet manage section */
.manage-section{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.manage-section h3{margin:0 0 4px;font-weight:600}

/* ============================================================
   Public acquisition landing (.lp) — mobile-first, cinematic.
   Reuses global tokens (--gold/--gold2/--bg/--line/--serif).
   Visual direction from example.html; real product content.
   ============================================================ */
.lp{--lp-amber:#f4ce74;--lp-amber2:#ffe6a7}
/* Decorative hero elements (rotated phone + floating cards + glow) can bleed a
   few px past the viewport on mobile. Clip horizontally so the page never scrolls
   sideways, without creating a scroll container (keeps sticky/anchors working). */
.lp{overflow-x:clip;position:relative}
.lp *{box-sizing:border-box}
/* Constellation backdrop: spans the whole landing, sits behind all content.
   Content sections establish their own stacking so they always render on top. */
.lp-constellations{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lp-constellations svg{position:absolute;inset:0;width:100%;height:100%}
/* Indra's net: a dense mesh of fine threads joining tiny jewel-nodes. Threads
   are barely-there so the web reads as texture, not as foreground lines. */
.lp-constellations .lp-net-threads line{stroke:#f4ce74;stroke-width:.6;opacity:.045}
/* nodes graded by brightness; most are tiny, a few glow like jewels */
.lp-constellations .s-sm{fill:#cdd6e8;opacity:.24}
.lp-constellations .s-md{fill:#e9d6a8;opacity:.45;filter:drop-shadow(0 0 2px rgba(255,230,167,.45))}
.lp-constellations .s-br{fill:#ffe6a7;opacity:.72;filter:drop-shadow(0 0 4px rgba(255,230,167,.8))}
/* only the bright jewels twinkle, slightly out of phase */
.lp-constellations .s-br{animation:lp-twinkle 5s ease-in-out infinite}
.lp-constellations .s-br:nth-of-type(2n){animation-delay:1.4s}
.lp-constellations .s-br:nth-of-type(3n){animation-delay:2.8s}
@keyframes lp-twinkle{0%,100%{opacity:.42}50%{opacity:.78}}
.lp>section,.lp>.lp-footer{position:relative;z-index:1}
.lp .lp-gold{color:var(--gold2)}
.lp .lp-eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--gold);font-size:.72rem;font-weight:800;margin:0 0 10px}
.lp h1,.lp h2,.lp h3{font-family:var(--serif);font-weight:400}

/* Primary CTA — unmistakable, warm, button-shaped */
.lp .lp-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 24px;border-radius:999px;background:linear-gradient(100deg,#efbd59,#ffe39b,#e9b44b);color:#171008;border:1px solid rgba(255,237,189,.7);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.86rem;transition:transform .18s ease,filter .18s ease}
.lp .lp-cta:hover{transform:translateY(-2px);filter:brightness(1.03)}
.lp .lp-cta:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(244,206,116,.4)}
.lp .lp-cta-block{width:100%;min-height:58px}
/* Trial-first primary CTA: the dominant commercial element on the landing. */
.lp .lp-cta-trial{font-size:.92rem}
/* Secondary free-consultation entry: a discreet gold link with an arrow, clearly
   subordinate to the trial CTA (no fill, no border, lighter weight). */
.lp .lp-cta-link{display:inline-flex;align-items:center;gap:6px;margin-top:4px;background:none;border:0;padding:4px 2px;color:rgba(217,182,111,.82);font-weight:600;font-size:.86rem;letter-spacing:.01em;text-transform:none;transition:color .18s ease}
.lp .lp-cta-link:hover{color:#ffe39b}
.lp .lp-cta-link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(244,206,116,.3);border-radius:6px}
/* Secondary CTA — free consultation. Same pill shape, outlined (gold on dark) so
   it reads as the lighter, no-commitment option next to the primary buy CTA. */
.lp .lp-cta-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 22px;border-radius:999px;background:transparent;color:var(--gold2);border:1px solid rgba(217,182,111,.5);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease}
.lp .lp-cta-ghost:hover{transform:translateY(-2px);border-color:var(--gold);color:#ffe39b;background:rgba(217,182,111,.08)}
.lp .lp-cta-ghost:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(244,206,116,.3)}
@media(prefers-reduced-motion:reduce){.lp .lp-cta-ghost{transition:none}.lp .lp-cta-ghost:hover{transform:none}}

/* HERO */
.lp-hero{display:grid;grid-template-columns:1fr;gap:34px;padding:28px 0 36px}
.lp-hero h1{font-size:clamp(2.6rem,10vw,3.6rem);line-height:.98;letter-spacing:-.04em;margin:4px 0 18px;text-wrap:balance}
.lp-lead{font-family:var(--serif);font-size:clamp(1.3rem,5vw,1.6rem);line-height:1.12;color:#f2ddb4;margin:0 0 10px}
.lp-sub{color:#c4bbad;font-size:1rem;line-height:1.6;margin:0 0 12px;max-width:560px}
.lp-semantic{color:#9d978c;font-size:.92rem;line-height:1.55;margin:0 0 22px;max-width:580px}
.lp-offer{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:4px}
.lp-age{color:#8f887d;font-size:.78rem;margin:16px 0 0}

/* Trial headline used by the pricebox / checkout breakdown. The hero no longer
   shows a separate trial block: its single 7-day mention lives in the CTA. */
.trial-head{font:400 clamp(1.9rem,8vw,2.6rem) var(--serif);color:var(--gold2);line-height:1.05;text-shadow:0 0 30px rgba(241,210,143,.22);text-transform:uppercase;letter-spacing:.02em}

/* Trial billing breakdown (pricebox / checkout / billing): transparent terms. */
.price-trial{text-align:left}
.lp-pricebox .price-trial,.lp-pricebox .trial-head{text-align:center}
.lp-pricebox .price-trial .trial-terms{margin-left:auto;margin-right:auto}
.price-trial .trial-head{margin-bottom:12px}
.price-trial .trial-terms{display:grid;gap:6px;margin:0;max-width:360px}
.price-trial .trial-terms>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.price-trial .trial-terms dt{color:#cfc5b4;font-size:.95rem}
/* Billing values are secondary to the "7 DIAS GRÁTIS" headline: softer gold,
   lighter weight, no shout. The future annual charge stays clearly legible and
   must not wrap between amount and currency (white-space:nowrap). */
.price-trial .trial-terms dd{margin:0;color:var(--gold2);font-weight:600;font-size:1rem;white-space:nowrap}
.price-trial .trial-terms dd[data-price-annual]{color:#d8c7a4;font-weight:500;font-size:.95rem}
/* "Após 7 dias" row: slightly smaller than the "Hoje" row. */
.price-trial .trial-terms>div:has(dd[data-price-annual]) dt,
.price-trial .trial-terms>div:has(dd[data-price-annual]) dd{font-size:.82rem}
.price-trial .trial-note{margin-top:12px;line-height:1.5}
.nowrap{white-space:nowrap}
/* Same restraint for the larger /consulta surfaces that reuse the annual value. */
.upsell-terms [data-price-annual],.plan-modal-terms dd[data-price-annual]{white-space:nowrap}
.lp-mobilebar-price .price-block-lp .price-amount{font:400 1.5rem var(--serif)}
.lp-mobilebar-price .price-block-lp{align-items:flex-start}
.lp-mobilebar-price .price-block-lp .price-cycle-note{font-size:.72rem;margin-top:1px;padding:0;border:0;background:none}

/* HERO stage: phone mock + floating real tarot cards */
.lp-stage{position:relative;display:grid;place-items:center;min-height:440px;isolation:isolate}
.lp-glow{position:absolute;width:min(460px,90vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(236,181,76,.16),rgba(128,74,14,.07) 40%,transparent 68%);z-index:-2}
.lp-phone{width:min(300px,74vw);aspect-ratio:.52;background:linear-gradient(145deg,#2a2317,#090806 42%,#171009);border-radius:40px;border:1px solid rgba(255,222,144,.4);padding:9px;box-shadow:0 42px 110px rgba(0,0,0,.6),0 0 70px rgba(207,129,27,.08);transform:rotate(2deg);position:relative;z-index:3}
.lp-screen{height:100%;border-radius:33px;overflow:hidden;padding:14px 15px 16px;display:flex;flex-direction:column;background:radial-gradient(260px 160px at 50% 0,rgba(211,142,35,.16),transparent 66%),linear-gradient(180deg,#11100e,#080806 72%)}
/* Top bar mirrors the real app chrome: back · brand · ready badge. */
.lp-screen-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:11px;border-bottom:1px solid rgba(244,206,116,.12)}
.lp-screen-back{color:#8f8778;font-size:1rem}
.lp-screen-logo{font-family:var(--serif);letter-spacing:.18em;color:var(--gold2);font-size:.8rem;margin-right:auto;margin-left:8px}
.lp-screen-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#130e07;background:linear-gradient(100deg,#ba8230,#eccb77,#ae7220)}
/* Pseudo Oracle document — same editorial shape as the real PDF body. */
.lp-doc{flex:1;overflow:hidden;margin-top:14px;position:relative}
.lp-doc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(180deg,transparent,#0a0806)}
.lp-doc-eyebrow{display:flex;align-items:center;gap:7px;margin:0;color:#9a8e78;font-size:.56rem;font-weight:700;letter-spacing:.16em}
.lp-doc-glyph{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--accent,rgba(244,206,116,.5));color:var(--accent,var(--gold));font-size:.7rem}
.lp-doc-h{margin:14px 0 0;font-family:var(--serif);font-weight:400;font-size:.78rem;color:#f0d68f;letter-spacing:.02em}
.lp-doc-quote{margin:6px 0 0;padding-left:10px;border-left:2px solid var(--accent,rgba(244,206,116,.5));font-family:var(--serif);font-style:italic;font-size:.82rem;line-height:1.35;color:#e8dcc3}
.lp-doc-lede{margin:6px 0 0;font-size:.72rem;line-height:1.5;color:#cfc6b7}
/* Three-card spread, like the real Oracle reading. */
.lp-doc-spread{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lp-doc-cardfig{margin:0;text-align:center}
.lp-doc-cardfig img{width:100%;height:auto;border-radius:5px;border:1px solid rgba(244,206,116,.4);box-shadow:0 5px 14px rgba(0,0,0,.5)}
.lp-doc-cardfig figcaption{margin-top:4px;font-size:.48rem;letter-spacing:.08em;text-transform:uppercase;color:#938a7b}
.lp-doc-read{margin:9px 0 0;font-size:.68rem;line-height:1.5;color:#b7ae9f}
.lp-doc-checklist{margin:6px 0 0;padding-left:16px;color:#c3baac;font-size:.68rem;line-height:1.5}
.lp-doc-checklist li{margin-top:2px}
/* PDF chip pinned at the bottom, like the real "Ver Oráculo (PDF)" action. */
.lp-doc-pdf{position:relative;z-index:1;margin-top:10px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1px solid rgba(244,206,116,.3);color:#e7d3a5;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.lp-doc-pdf .mi{font-size:.9rem;color:var(--gold)}
.lp-float{position:absolute;width:120px;height:auto;border-radius:12px;border:1px solid rgba(244,206,116,.4);box-shadow:0 28px 70px rgba(0,0,0,.5);z-index:1}
.lp-float-1{left:2%;bottom:8%;transform:rotate(-15deg)}
.lp-float-2{right:2%;bottom:12%;transform:rotate(14deg)}

/* SECTION scaffolding */
.lp-block{padding:52px 0;border-top:1px solid var(--line)}
.lp-head{max-width:720px;margin:0 auto 30px;text-align:center}
.lp-head h2{font-size:clamp(1.9rem,6.5vw,2.9rem);line-height:1;letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance}
.lp-head p{color:#9f978b;margin:0 auto;max-width:560px;line-height:1.6}

/* PRODUCT cards */
.lp-product-grid{display:grid;grid-template-columns:1fr;gap:14px}
.lp-pcard{border:1px solid var(--line);border-radius:18px;padding:22px;background:radial-gradient(300px 180px at 20% 0,rgba(244,206,116,.06),transparent 62%),rgba(255,255,255,.015)}
.lp-pcard-ico{color:var(--gold);font-size:30px}
.lp-pcard h3{font-size:1.2rem;color:#f0debb;margin:12px 0 7px}
.lp-pcard p{color:#998f82;margin:0;font-size:.9rem;line-height:1.55}

/* ORACLE gallery (real entities) */
.lp-oracle-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp-ocard{border:1px solid var(--line);border-radius:18px;padding:18px 16px;background:radial-gradient(220px 170px at 50% 10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),linear-gradient(180deg,#100d09,#0b0907);transition:transform .18s ease,border-color .18s ease}
.lp-ocard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.lp-oglyph{width:56px;height:56px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:14px;display:grid;place-items:center;font-family:var(--serif);font-size:1.7rem;color:var(--accent);background:rgba(255,255,255,.02)}
.lp-ocard h3{font-size:1.1rem;color:#f0dbb1;margin:0 0 6px}
.lp-ocard p{margin:0;color:#958d80;font-size:.8rem;line-height:1.5}

/* EXAMPLE flow */
.lp-flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px;max-width:760px;margin:0 auto}
.lp-step{border:1px solid var(--line);border-radius:18px;padding:20px 22px;background:#0c0a08;position:relative}
.lp-step-mid{border-color:rgba(244,206,116,.26);background:linear-gradient(145deg,rgba(244,206,116,.06),rgba(255,255,255,.012))}
.lp-step-label{display:block;color:#d1ad5d;text-transform:uppercase;letter-spacing:.13em;font-size:.62rem;font-weight:800;margin-bottom:8px}
.lp-step p{margin:0;color:#c4bcae;font-size:.92rem;line-height:1.55}
.lp-step-q{font-family:var(--serif);font-size:1.15rem;color:#f2e2c3}
.lp-note{text-align:center;color:#81796f;font-size:.78rem;margin:18px auto 0;max-width:560px}

/* USE cases */
.lp-use-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.lp-use{padding:20px 16px;background:rgba(255,255,255,.014)}
.lp-use b{font-family:var(--serif);font-size:1.05rem;color:#e9d7b4;display:block;margin-bottom:6px}
.lp-use p{color:#8e8679;font-size:.82rem;line-height:1.5;margin:0}

/* TRUST band — verifiable reassurances, same brutalist card language as USE. */
.lp-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp-trust-item{padding:20px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.014)}
.lp-trust-ico{display:block;font-size:26px;color:var(--gold2,#d9b66f);margin-bottom:10px}
.lp-trust-item b{font-family:var(--serif);font-size:1.02rem;color:#e9d7b4;display:block;margin-bottom:6px}
.lp-trust-item p{color:#8e8679;font-size:.82rem;line-height:1.5;margin:0}

/* HOW it works */
.lp-how{display:grid;grid-template-columns:1fr;gap:12px;max-width:820px;margin:0 auto}
.lp-howitem{padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.014)}
.lp-howitem small{color:#a88337;letter-spacing:.12em;font-weight:800}
.lp-howitem h3{font-size:1.2rem;margin:9px 0 6px;color:#e9d6b2}
.lp-howitem p{color:#91897c;font-size:.88rem;margin:0;line-height:1.55}

/* PRICING */
.lp-pricing{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.lp-pricing-copy{text-align:center}
.lp-pricing-copy h2{font-size:clamp(2rem,7vw,3rem);line-height:1;letter-spacing:-.03em;margin:0}
.lp-pricebox{border:1px solid rgba(244,206,116,.36);border-radius:24px;padding:26px 22px;background:radial-gradient(460px 240px at 50% 0,rgba(244,206,116,.09),transparent 62%),rgba(255,255,255,.018);max-width:520px;margin:0 auto;width:100%}
.lp-pricebox .price-block{text-align:center}
.lp-bonus{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px auto 0;padding:9px 14px;border:1px solid rgba(244,206,116,.4);border-radius:999px;background:rgba(244,206,116,.08);color:var(--gold2);font-size:.9rem;font-weight:600;text-align:center}
.lp-bonus .mi{font-size:18px;flex:none}
.lp-features{list-style:none;padding:0;margin:20px 0 22px;display:grid;gap:11px}
.lp-features li{display:flex;gap:10px;align-items:center;color:#cfc5b4;font-size:.92rem}
.lp-check{color:var(--gold);font-size:18px;flex:none}
.lp-secure{text-align:center;color:#817a70;font-size:.76rem;margin:11px 0 0}

/* FAQ */
.lp-faq{width:min(760px,100%);margin:auto;border-top:1px solid var(--line)}
.lp-faq details{border-bottom:1px solid var(--line)}
.lp-faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 2px;font-family:var(--serif);font-size:1.08rem;color:#e8d8ba;position:relative}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary:after{content:"+";position:absolute;right:4px;top:17px;color:var(--gold);font-family:var(--sans);font-size:1.4rem}
.lp-faq details[open] summary:after{content:"\2212"}
.lp-faq details p{margin:0;padding:0 2px 20px;color:#958d81;font-size:.9rem;line-height:1.6}

/* FOOTER */
.lp-footer{border-top:1px solid var(--line);padding:30px 0 110px;color:#777066;font-size:.78rem}
.lp-footer-top{display:flex;flex-direction:column;gap:16px}
.lp-footer-top strong{font-family:var(--serif);letter-spacing:.24em;color:#cdbf9f;display:block;margin-bottom:4px}
.lp-footer-top span{color:#8a8276;font-size:.74rem}
.lp-footer-links{display:flex;gap:16px;flex-wrap:wrap}
.lp-footer-links a:hover{color:var(--gold2)}
.lp-disclaimer{margin:20px 0 0;color:#6c665d;line-height:1.6;max-width:720px}

/* MOBILE sticky CTA bar */
.lp-mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(7,6,5,.97) 26%)}
.lp-mobilebar-inner{display:flex;align-items:center;gap:12px;background:rgba(12,10,7,.94);border:1px solid var(--line);border-radius:16px;padding:9px 9px 9px 15px;max-width:560px;margin:auto}
.lp-mobilebar-price{flex:1;min-width:0}
.lp-mobilebar-price .price-block{margin:0}
.lp-mobilebar-price .price-monthly{justify-content:flex-start}
.lp-mobilebar-price .price-cycle{font-size:.68rem;margin-top:1px}
.lp-mobilebar .lp-cta{min-height:44px;padding:0 18px;font-size:.74rem;flex:none}

/* ---- Tablet / desktop ---- */
@media(min-width:720px){
  .lp-product-grid{grid-template-columns:1fr 1fr}
  .lp-oracle-gallery{grid-template-columns:repeat(3,1fr)}
  .lp-flow-steps{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .lp-use-grid{grid-template-columns:repeat(4,1fr)}
  .lp-trust-grid{grid-template-columns:repeat(4,1fr)}
  .lp-how{grid-template-columns:repeat(3,1fr)}
  .lp-footer-top{flex-direction:row;justify-content:space-between;align-items:center}
}
@media(min-width:960px){
  .lp-hero{grid-template-columns:1.05fr .95fr;gap:48px;padding:48px 0 60px;align-items:center}
  .lp-offer{flex-direction:row;align-items:center;gap:22px;flex-wrap:wrap}
  .lp-stage{min-height:560px}
  .lp-phone{width:min(330px,30vw)}
  .lp-float{width:150px}
  /* Keep the floating cards tucked inside the stage so the rotated right card
     is never clipped by the section's overflow-x:clip. */
  .lp-float-1{left:6%}
  .lp-float-2{right:6%}
  .lp-block{padding:84px 0}
  .lp-pricing{grid-template-columns:.9fr 1.1fr;gap:48px}
  .lp-pricing-copy{text-align:left}
  .lp-pricing-copy h2{margin:12px 0 0}
  .lp-mobilebar{display:none}
}

@media(prefers-reduced-motion:reduce){
  .lp .lp-cta,.lp-ocard{transition:none}
  .lp .lp-cta:hover,.lp-ocard:hover{transform:none}
  .lp-constellations .s-br{animation:none}
}

/* Character-limit progress bar (textarea[data-maxchars]) */
.charbar{display:flex;align-items:center;gap:10px;margin-top:6px}
.charbar-track{flex:1;height:6px;border-radius:4px;background:rgba(138,109,47,.16);overflow:hidden}
.charbar-fill{height:100%;width:0;background:var(--accent,#8a6d2f);transition:width .12s linear}
.charbar-count{font-size:12px;color:var(--muted,#6e6557);white-space:nowrap;font-variant-numeric:tabular-nums}
.charbar.is-warn .charbar-fill{background:#c7922f}
.charbar.is-full .charbar-fill{background:#b4542f}
.charbar.is-full .charbar-count{color:#b4542f}

/* ===== Runes ===== */
.rune-stones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rune-stone{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:10px 4px;min-width:0}
.rune-pos{font-size:clamp(10px,2.8vw,12px);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);max-width:100%}
/* Disc scales with its column so three fit any width; aspect-ratio keeps it round. */
.rune-disc{width:100%;max-width:120px;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid #6d5732;background:radial-gradient(circle at 50% 32%,#2b2416,#121212 62%);
  box-shadow:inset 0 0 36px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.4)}
.rune-glyph{font-size:clamp(30px,11vw,62px);line-height:1;color:var(--gold2);text-shadow:0 0 22px rgba(241,210,143,.35)}
.rune-stone.reversed .rune-disc{border-color:#7a5a2c}
.rune-stone.reversed .rune-glyph{transform:rotate(180deg)}
.rune-name{font-size:clamp(13px,3.6vw,16px)}
.rune-mark{color:var(--muted);min-height:16px}
@media(min-width:560px){.rune-stones{display:flex;flex-wrap:wrap;justify-content:center}.rune-stone{flex:0 1 150px}}

/* ===== I Ching ===== */
.hexagram-pair{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.hexagram-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.hex-caption{letter-spacing:.05em;text-transform:uppercase}
.hexagram{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 14px;border:1px solid #6d5732;border-radius:12px;
  background:radial-gradient(circle at 50% 20%,#282114,#121212 60%);min-width:150px}
.hex-glyph{font-size:clamp(44px,12vw,60px);line-height:1;color:var(--gold2);text-shadow:0 0 22px rgba(241,210,143,.3)}
.hex-lines{display:flex;flex-direction:column;gap:7px;width:clamp(96px,30vw,130px)}
.hex-line{display:flex;gap:10px;height:12px}
.hex-line .bar{flex:1;background:linear-gradient(180deg,#e9d6a6,#c9a85f);border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.hex-line.changing .bar{background:linear-gradient(180deg,#fff2cf,#f1d28f);box-shadow:0 0 10px rgba(241,210,143,.7)}
.hex-line.changing{position:relative}
.hex-line.changing::after{content:"";position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--gold2);box-shadow:0 0 8px rgba(241,210,143,.9)}
.hex-name{font-size:clamp(13px,3.6vw,16px);text-align:center}
.hexagram-arrow{color:var(--gold2);font-size:28px;display:flex;align-items:center}
.hex-changing{text-align:center}
.hex-changing strong{color:var(--gold2)}
/* Mobile: stack the two hexagrams of a transformation, arrow points down */
@media(max-width:559px){
  .hexagram-pair.has-transform{flex-direction:column}
  .hexagram-pair.has-transform .hexagram-arrow{transform:rotate(90deg)}
}

/* ===== Omikuji ===== */
.omikuji-title-kanji{font-size:.78em;color:var(--gold2);margin-right:2px}
/* Ritual box (visual only; the draw is server-side) */
.omikuji-box{display:none;flex-direction:column;align-items:center;gap:0;margin:6px 0 14px}
.omikuji-box.show{display:flex}
.omikuji-box-body{width:clamp(74px,22vw,96px);height:clamp(100px,30vw,132px);border-radius:12px 12px 10px 10px;
  background:linear-gradient(170deg,#3a2d12,#191307);border:1px solid #6d5732;
  box-shadow:inset 0 0 30px rgba(0,0,0,.55),0 12px 28px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;transform-origin:50% 100%}
.omikuji-box-kanji{font-size:clamp(30px,9vw,42px);color:var(--gold2);text-shadow:0 0 18px rgba(241,210,143,.4)}
.omikuji-stick{width:4px;height:0;background:linear-gradient(180deg,#e9d6a6,#c9a85f);border-radius:3px;margin-top:-6px;transition:height .35s ease}
.omikuji-box.shaking .omikuji-box-body{animation:omikuji-shake .5s ease-in-out 2}
.omikuji-box.drawn .omikuji-stick{height:clamp(40px,12vw,56px)}
@keyframes omikuji-shake{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-7deg) translateY(-3px)}40%{transform:rotate(6deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(4deg)}}

/* The fortune slip: ivory identity inside the black/gold app */
.omikuji-paper{background:linear-gradient(180deg,#f6f1e4,#efe7d4);color:#1a1813;border-radius:10px;padding:22px 20px;
  border:1px solid #d8cba6;box-shadow:0 14px 36px rgba(0,0,0,.5);max-width:560px;margin:0 auto;
  position:relative;overflow:hidden}
.omikuji-paper::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#b4472f,#c9a85f,#b4472f)}
.omikuji-head{text-align:center;border-bottom:1px solid #d8cba6;padding-bottom:12px;margin-bottom:14px}
.omikuji-no{font-size:clamp(18px,5vw,22px);color:#b4472f;letter-spacing:.08em}
.omikuji-no-label{font-size:12px;color:#6a6250;letter-spacing:.04em;margin-top:2px}
.omikuji-grade{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:2px}
.omikuji-kanji{font-size:clamp(44px,14vw,66px);line-height:1;color:#1a1813}
.omikuji-romaji{font-size:clamp(16px,4.4vw,20px);letter-spacing:.06em;color:#7a1f12;font-weight:600}
.omikuji-fortune-label{font-size:13px;color:#6a6250;text-transform:uppercase;letter-spacing:.08em}
.omikuji-paper.tone-caution .omikuji-no,.omikuji-paper.tone-caution .omikuji-romaji{color:#7a1f12}
.omikuji-poem{font:italic 400 clamp(16px,4.4vw,19px)/1.6 var(--serif);text-align:center;color:#3b352a;margin:0 0 14px}
.omikuji-general{font-size:15px;line-height:1.6;color:#2a261e;margin:0 0 14px}
.omikuji-section{margin:12px 0}
.omikuji-section h4{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#8a2a1a}
.omikuji-section p{margin:0;font-size:15px;line-height:1.6;color:#2a261e}
.omikuji-warning h4{color:#8a2a1a}
.omikuji-cats{display:grid;gap:10px;margin:14px 0;padding:12px 0;border-top:1px solid #d8cba6;border-bottom:1px solid #d8cba6}
.omikuji-cat-head{font-size:13px;font-weight:600;color:#7a1f12;letter-spacing:.03em}
.omikuji-cat-kanji{color:#1a1813;margin-right:3px}
.omikuji-cat p{margin:2px 0 0;font-size:14px;line-height:1.55;color:#2a261e}
.omikuji-summary{margin-top:14px;padding-top:12px;border-top:1px solid #d8cba6;font:600 clamp(15px,4vw,17px)/1.5 var(--serif);color:#1a1813;text-align:center}
.omikuji-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.omikuji-actions form{margin:0}
.omikuji-paper.leaving{animation:omikuji-leave .6s ease forwards}
@keyframes omikuji-leave{to{transform:translateY(-14px) rotate(-2deg) scale(.96);opacity:.35;filter:saturate(.6)}}
/* Gradual reveal of the paper after the shake */
.omikuji-paper.revealing{animation:omikuji-unfold .55s ease}
@keyframes omikuji-unfold{from{opacity:0;transform:translateY(12px) scaleY(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .omikuji-box.shaking .omikuji-box-body,.omikuji-paper.revealing,.omikuji-paper.leaving{animation:none !important}
  .omikuji-stick{transition:none !important}
}

/* ===== Omikuji lifecycle (saved / archived + burn) ===== */
.omikuji-actions-wrap{margin-top:18px}
.omikuji-choices{display:flex;flex-direction:column;gap:10px}
.omikuji-choices .btn{width:100%;justify-content:center}
.omikuji-leave-btn{background:linear-gradient(180deg,#241512,#190f0e);color:#e0a893;border-color:#6b3a2d}
.omikuji-leave-btn .mi{color:#d98a6a}
/* Saved panel */
.omikuji-saved-panel{text-align:center;border:1px solid #6d5732;border-radius:12px;padding:16px 14px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(241,210,143,.08),transparent 60%),#121212}
.omikuji-saved-mark{font:400 clamp(16px,4.4vw,19px) var(--serif);color:var(--gold2);display:flex;align-items:center;justify-content:center;gap:6px}
.omikuji-saved-panel p{margin:6px auto 12px;max-width:40ch}
.omikuji-saved-tag{color:var(--gold2)}
/* History head + filter */
.omikuji-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.omikuji-history-head h3{margin:0}
.omikuji-filter{display:flex;gap:6px}
.omikuji-filter .chip{text-transform:none;cursor:pointer;text-decoration:none}
.omikuji-filter .chip.active{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--gold2);border-color:var(--gold)}
@media(min-width:560px){.omikuji-choices{flex-direction:row}.omikuji-choices .btn{flex:1}}

/* Ritual closure */
.omikuji-closure{text-align:center}
.omikuji-closure-inner{padding:14px 10px}
.omikuji-closure-mark{font-size:40px;color:#c98a5f;opacity:.85;margin-bottom:6px}
.omikuji-closure-mark .mi{font-size:40px}
.omikuji-closure h2{font:400 clamp(22px,6vw,30px) var(--serif);margin:0 0 8px}
.omikuji-closure .actions{flex-wrap:wrap;gap:10px;margin-top:16px}
.omikuji-closure.revealing{animation:omikuji-unfold .5s ease}

/* Burn: darkening edges -> warm glow -> embers -> ash, elegant and dark. */
.omikuji-paper.burning{animation:omikuji-burn 2.1s ease-in forwards;transform-origin:50% 60%;will-change:transform,opacity,filter}
.omikuji-paper.burning::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:radial-gradient(120% 60% at 50% 100%,rgba(255,150,40,.0),transparent);
  animation:omikuji-ember 2.1s ease-in forwards;mix-blend-mode:screen}
@keyframes omikuji-burn{
  0%{filter:none;opacity:1;transform:scale(1)}
  25%{filter:sepia(.3) brightness(.96);box-shadow:inset 0 0 0 2px rgba(60,30,10,.0),0 0 0 rgba(0,0,0,0)}
  45%{filter:sepia(.6) brightness(.9) contrast(1.05);box-shadow:inset 0 -30px 40px rgba(90,40,10,.5)}
  70%{filter:sepia(1) brightness(.7) contrast(1.1);box-shadow:inset 0 -60px 60px rgba(50,20,8,.75);transform:scale(.985) rotate(-.4deg)}
  100%{filter:brightness(.2) grayscale(1);opacity:0;transform:scale(.95) translateY(8px) rotate(-1deg)}
}
@keyframes omikuji-ember{
  0%,20%{background:radial-gradient(120% 60% at 50% 100%,rgba(255,150,40,0),transparent)}
  50%{background:radial-gradient(130% 70% at 50% 100%,rgba(255,150,40,.45),rgba(180,60,20,.25) 40%,transparent 70%)}
  80%{background:radial-gradient(150% 90% at 50% 90%,rgba(255,120,30,.55),rgba(120,40,15,.3) 45%,transparent 75%)}
  100%{background:radial-gradient(160% 100% at 50% 80%,rgba(120,60,30,0),transparent)}
}
/* Reduced motion / fallback: simple fade, same functional outcome. */
.omikuji-paper.fading{animation:omikuji-fade .4s ease forwards}
@keyframes omikuji-fade{to{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){
  .omikuji-paper.burning{animation:omikuji-fade .4s ease forwards}
  .omikuji-paper.burning::after{animation:none;display:none}
  .omikuji-closure.revealing{animation:none}
}

/* ===== Landing showcase (real reading pieces) ===== */
.lp-showcase{display:grid;grid-template-columns:1fr;gap:14px}
.lp-show-card{border:1px solid var(--line);border-radius:18px;padding:20px 18px;background:radial-gradient(320px 200px at 20% 0,rgba(244,206,116,.05),transparent 62%),rgba(255,255,255,.014);display:flex;flex-direction:column}
.lp-show-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.lp-show-ico{color:var(--gold);font-size:26px;flex:none;margin-top:2px}
.lp-show-head h3{margin:0;font-size:1.15rem;color:#f0debb}
.lp-show-head p{margin:3px 0 0;color:#948b7e;font-size:.82rem;line-height:1.45}
.lp-show-q{margin:0 0 14px;padding-left:11px;border-left:2px solid rgba(244,206,116,.4);font-family:var(--serif);font-style:italic;font-size:.95rem;line-height:1.4;color:#e4d7bd}
/* Runes: keep three discs tidy inside the card. */
.lp-show-runes{margin-top:auto}
.lp-show-runes .rune-disc{max-width:84px}
.lp-show-runes .rune-glyph{font-size:clamp(26px,8vw,42px)}
.lp-show-runes .rune-name{font-size:13px}
/* Tarot: three real card faces in a tidy row. */
.lp-show-tarot{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lp-show-tarot img{width:100%;height:auto;border-radius:7px;border:1px solid rgba(244,206,116,.4);box-shadow:0 8px 20px rgba(0,0,0,.5)}
/* I Ching: center the hexagram piece. */
.lp-show-hex{display:flex;justify-content:center;margin-top:auto}
/* Omikuji: a compact slip, same ivory identity. */
.lp-show-omikuji{margin:auto auto 0;max-width:300px;padding:18px 16px}
.lp-show-omikuji .omikuji-head{margin-bottom:10px;padding-bottom:10px}
.lp-show-omikuji .omikuji-kanji{font-size:clamp(38px,11vw,52px)}
.lp-show-omikuji .omikuji-poem{margin:0;font-size:clamp(14px,3.6vw,16px)}
@media(min-width:720px){
  .lp-showcase{grid-template-columns:repeat(2,1fr);align-items:stretch}
}
@media(min-width:1040px){
  .lp-showcase{grid-template-columns:repeat(4,1fr)}
}

/* ===== Consulta Guiada ===== */
/* Reuses the Grimorius design language (vars, .card, .btn, .field, .eyebrow).
   Scoped under .guided so it never leaks into other screens. */
.guided{max-width:820px;margin:0 auto}
.guided .eyebrow{display:block;font:600 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.guided h1,.guided h2{font-family:var(--serif);font-weight:400}
.guided h2{font-size:clamp(24px,5vw,34px);margin:4px 0 10px}
.guided p{color:var(--muted)}
.guided .wide{width:100%;margin-top:14px}
.guided-micro{display:block;font-size:12px;color:var(--muted);margin-top:12px}
.guided-error{color:var(--danger);font-size:13px;min-height:18px;margin-top:6px}
.guided-narrow{max-width:520px}
/* Email-gate value preview: states the reading is READY + free, before the form. */
.guided-gate-perks{list-style:none;margin:4px 0 16px;padding:0;display:grid;gap:8px}
.guided-gate-perks li{display:flex;align-items:center;gap:10px;color:var(--text);font-size:14px;line-height:1.4}
.guided-gate-perks .mi{color:var(--gold);font-size:18px;flex:none}

/* start screen — premium entry experience */
/* ===== Consulta — opening screen (crystal ball hero) ===== */
.guided-start{position:relative;max-width:560px;margin:0 auto;width:100%;text-align:center;--cb-size:230px}
.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}
.content:has(.guided-start){padding-top:clamp(16px,4vh,40px);align-items:center}
.guided-start>*{position:relative}
.guided-start .crystal{margin-bottom:6px}

/* Centered header under the ball. */
.guided-start-head{text-align:center;margin:0 auto 18px}
.guided-start-head .eyebrow{display:inline-block;font:600 11px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.guided-start-head h1{font:400 clamp(26px,5vw,38px)/1.14 var(--serif);margin:0;letter-spacing:.2px}
.guided-lead{font-size:clamp(14px,2vw,16px);line-height:1.55;color:var(--muted);max-width:460px;margin:10px auto 0}

/* "Ver exemplos" collapsible */
.guided-examples-toggle{margin:14px 0 0;text-align:left}
.guided-examples-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:600 13px/1 var(--sans);color:var(--gold);padding:6px 0}
.guided-examples-btn .mi{font-size:18px;transition:transform .2s}
.guided-examples-btn.is-open .mi{transform:rotate(180deg)}
.guided-examples-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}

/* ---- Ask surface: the primary action, prominent and centered ---- */
/* Open form (no card): the crystal ball is the hero above it. */
.guided-ask{text-align:left}
.guided-field-wrap{position:relative}
/* auto-grow textarea: no ugly inner scrollbar (JS caps the height) */
.guided-textarea{min-height:200px;max-height:460px;font-size:16px;line-height:1.6;padding:16px 16px 30px;
  background:#0b0c0e;border:1px solid #343434;border-radius:14px;resize:none;overflow-y:auto}
.guided-textarea::placeholder{color:#8f887d}
.guided-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,182,111,.14)}
.guided-field-label{display:block;font:600 13px/1.4 var(--sans);letter-spacing:.02em;color:var(--text);margin:0 0 8px}
.guided-helper{margin:8px 2px 0;font:400 12.5px/1.5 var(--sans);color:var(--muted)}
.guided-counter{position:absolute;right:14px;bottom:11px;font-size:11px;color:#8f887d;letter-spacing:.03em;pointer-events:none}

/* Primary button: gold, confident, part of the design. */
.guided-submit{margin-top:16px;gap:9px;min-height:52px;font-size:15px}
.guided-submit-arrow{font-size:19px;transition:transform .18s ease}
.guided-submit:hover .guided-submit-arrow{transform:translateX(3px)}
.guided-submit:disabled{opacity:.6}
.guided-submit.is-loading{position:relative;color:transparent}
.guided-submit.is-loading .guided-submit-label,.guided-submit.is-loading .guided-submit-arrow{visibility:hidden}
.guided-submit.is-loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(24,19,13,.35);
  border-top-color:#18130d;border-radius:50%;animation:grim-spin .7s linear infinite}
.guided-ask-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.guided-ask-hint .mi{font-size:16px;color:var(--gold)}

/* Example starters: compact full-width rows inside the "Ver exemplos" list. */
.guided-suggestion{display:block;width:100%;text-align:left;font:inherit;font-size:13.5px;color:#d8cdb8;
  background:#15161a;border:1px solid var(--line);border-radius:10px;padding:11px 14px;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s}
.guided-suggestion:hover{border-color:#6d5732;background:#1d1b16;color:var(--gold2)}
.guided-suggestion:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,182,111,.14)}

/* ---- "How it works": three discreet horizontal steps at the foot ---- */
.guided-how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0}
@media(max-width:620px){.guided-how{grid-template-columns:1fr;gap:12px}}
.guided-how-step{display:flex;flex-direction:column;gap:4px;padding:14px 4px;text-align:center;align-items:center}
.guided-how-ico{font-size:22px;color:var(--gold);opacity:.9}
.guided-how-step strong{font:400 15px/1.3 var(--serif);color:var(--text)}
.guided-how-desc{font-size:12.5px;line-height:1.5;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .guided-submit-arrow{transition:none}
}

/* ---- Etapa 1: theme picker (one decision = one screen) ---- */
/* A touch wider than the text screen so three tiles breathe; the submit stays
   above the fold on desktop and large/visible on mobile. */
.guided-start:has(.guided-topics){max-width:640px}
.guided-start-time{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.guided-start-time .mi{font-size:15px;color:var(--gold)}
.guided-topics{margin:18px 0 20px}
.guided-topics-form .guided-submit{margin-top:4px}
/* The topic tiles are more compact than the quiz scenes (6 at a glance). */
.guided-topics .guided-tile{min-height:108px;padding:16px}
.guided-topics .guided-tile-art{width:46px;height:46px}
.guided-topics .guided-tile-art .mi{font-size:25px}
@media(max-width:420px){
  .guided-topics .guided-tile{min-height:96px;padding:13px}
}

/* ---- /consulta entry: richer tiles + a quiet trust strip (CRO polish,
   SCOPED to the start screen so the quiz scenes stay untouched). ---- */
/* A faint gold hairline sweeps in on hover/selection and the icon warms up, so
   the choice feels tactile and premium without leaving the brutalist language. */
.guided-topics .guided-tile{overflow:hidden}
.guided-topics .guided-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(217,182,111,.12),transparent 60%);opacity:0;transition:opacity .25s}
.guided-topics .guided-tile:hover::before,.guided-topics .guided-tile.is-selected::before{opacity:1}
.guided-topics .guided-tile:hover .guided-tile-art,.guided-topics .guided-tile.is-selected .guided-tile-art{
  box-shadow:0 0 0 1px rgba(217,182,111,.35),0 8px 20px rgba(217,182,111,.12)}
.guided-topics .guided-tile-label{font-weight:500}

/* Trust strip: three honest micro-reassurances under the themes. */
.guided-start-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;
  margin:4px auto 0;padding:14px 10px 0;max-width:520px;border-top:1px solid rgba(255,255,255,.06)}
.guided-start-trust li{display:flex;align-items:center;gap:7px;font:500 12.5px/1.3 var(--sans);color:var(--muted)}
.guided-start-trust .mi{font-size:16px;color:var(--gold)}
@media(max-width:420px){
  .guided-start-trust{gap:6px 14px;font-size:12px}
}

/* ---- Etapa 2: optional details ---- */
.guided-examples-open{margin-top:16px}
.guided-examples-caption{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.04em;color:var(--muted);margin:0 0 2px}
.guided-skip{display:block;margin:12px auto 0;background:none;border:0;cursor:pointer;
  font:600 13px/1 var(--sans);color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:8px}
.guided-skip:hover{color:var(--text)}

/* ===== Consulta Guiada — wizard scenes ===== */
.guided-scene{max-width:760px;margin:0 auto;width:100%}
.content:has(.guided-scene){padding-top:18px;align-items:center}

/* compact top bar: back · progress dots · count · exit */
.guided-scene-bar{display:flex;align-items:center;gap:12px;margin:0 0 26px}
.guided-scene-back{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--muted);
  border:1px solid var(--line);background:#121315;flex:none;transition:border-color .18s,color .18s}
.guided-scene-back:hover{color:var(--text);border-color:#5a482d}
.guided-scene-progress{display:flex;align-items:center;gap:7px;flex:1}
/* A continuous progress bar that grows through the quiz, giving a clear
   "almost there" momentum cue (replaces the step dots on the quiz scenes). */
.guided-progress-track{flex:1;height:3px;border-radius:3px;background:#2d2a24;overflow:hidden}
.guided-progress-fill{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--gold2,#d9b66f),var(--gold));transition:width .45s cubic-bezier(.22,.61,.36,1)}
/* Dots are still used by the Perfil do Consulente test (profile/test.php). */
.guided-dot{width:9px;height:9px;border-radius:50%;background:#2d2a24;transition:background .25s,transform .25s}
.guided-dot.is-done{background:var(--gold)}
.guided-dot.is-current{background:var(--gr-purple-bright);transform:scale(1.3);box-shadow:0 0 12px rgba(173,64,255,.55)}
.guided-scene-count{font:600 11px/1 var(--sans);letter-spacing:.06em;color:var(--muted);flex:none}
.guided-scene-exit{font:600 12px/1 var(--sans);color:var(--muted);text-decoration:none;padding:8px;flex:none}
.guided-scene-exit:hover{color:var(--text)}

.guided-scene-head{margin:0 0 22px;max-width:620px}
.guided-scene-head .eyebrow{display:block;font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.guided-scene-head h2{font:400 clamp(22px,4.2vw,32px)/1.15 var(--serif);margin:0}

/* selectable tiles — TV-box feel, perceptible art, clear states */
.guided-scene-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px}
.guided-scene-cards.is-image{grid-template-columns:repeat(2,1fr)}
/* Keep TWO columns on mobile (never collapse to a single column of rows). */
@media(max-width:720px){.guided-scene-cards{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:420px){
  .guided-scene-cards{gap:8px}
  .guided-tile{min-height:104px;padding:14px}
  .guided-tile-art{width:44px;height:44px}
  .guided-tile-art .mi{font-size:24px}
  .guided-tile-label{font-size:15px}
}

.guided-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;
  font:inherit;color:var(--text);cursor:pointer;border:1px solid #2b2b2b;border-radius:16px;padding:18px;min-height:132px;
  background:linear-gradient(180deg,#17181b,#0f1012);
  transition:border-color .2s,transform .15s,box-shadow .2s,background .2s}
.guided-tile:hover{border-color:#6d5732;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.guided-tile:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,182,111,.18)}
.guided-tile.is-selected{border-color:var(--gold);background:linear-gradient(180deg,#241d12,#15110b);
  box-shadow:0 0 0 1px rgba(217,182,111,.4),0 16px 36px rgba(0,0,0,.45);animation:guided-pick .3s ease}
@keyframes guided-pick{0%{transform:scale(.99)}55%{transform:scale(1.012)}100%{transform:scale(1)}}
.guided-tile-art{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;flex:none;
  background:radial-gradient(circle at 50% 30%,#2a2416,#121212 72%);border:1px solid #3a3327}
.guided-tile-art .mi{font-size:28px;color:var(--gold2)}
.guided-tile.is-selected .guided-tile-art{border-color:#6d5732}
.guided-tile-label{font:400 16px/1.3 var(--serif);margin-top:auto}
.guided-tile-check{position:absolute;top:12px;right:12px;font-size:18px;color:#18130d;background:var(--gold);
  border-radius:50%;width:24px;height:24px;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.guided-tile.is-selected .guided-tile-check{opacity:1;transform:scale(1)}

/* image tiles (symbolic image step): art fills the top */
.guided-tile.is-image{padding:10px;gap:10px;align-items:stretch}
.guided-tile.is-image .guided-tile-art{width:100%;height:auto;aspect-ratio:16/10;border-radius:12px;background:none;border:0}
.guided-tile.is-image .guided-tile-art img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.guided-tile.is-image .guided-tile-label{padding:0 6px 6px;text-align:center;margin-top:0}

/* Quiz-scene tiles: same quiet gold sheen as the /consulta entry, SCOPED to the
   scenes so the effect is consistent across the funnel. */
.guided-scene-cards .guided-tile{overflow:hidden}
.guided-scene-cards .guided-tile:not(.is-image)::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,rgba(217,182,111,.12),transparent 60%);
  opacity:0;transition:opacity .25s}
.guided-scene-cards .guided-tile:hover::before,.guided-scene-cards .guided-tile.is-selected::before{opacity:1}
.guided-scene-cards .guided-tile:not(.is-image):hover .guided-tile-art,.guided-scene-cards .guided-tile:not(.is-image).is-selected .guided-tile-art{
  box-shadow:0 0 0 1px rgba(217,182,111,.35),0 8px 20px rgba(217,182,111,.12)}
@media(prefers-reduced-motion:reduce){
  .guided-progress-fill{transition:none}
}

.guided-scene-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
.guided-scene-next{gap:8px}
.guided-scene-next .mi{font-size:19px;transition:transform .18s}
.guided-scene-next:hover:not(:disabled) .mi{transform:translateX(3px)}
.guided-scene-next:disabled{opacity:.5}

/* scene entry transition (discreet; disabled for reduced motion) */
.guided-scene[data-guided-scene]{animation:guided-scene-in .28s ease}
@keyframes guided-scene-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .guided-scene[data-guided-scene],.guided-tile.is-selected{animation:none}
  .guided-dot,.guided-tile,.guided-tile-check,.guided-scene-next .mi{transition:none}
}

/* result */
.guided-result-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.guided-result-sigil{width:72px;height:72px;opacity:.85}
.guided-question{font:italic clamp(18px,3.4vw,22px)/1.5 var(--serif);color:var(--text);border-left:2px solid var(--gold);padding-left:18px;margin:22px 0}
.guided-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
@media(max-width:560px){.guided-split{grid-template-columns:1fr}}
.guided .card{margin:14px 0}
.guided-oracle{display:flex;align-items:center;gap:18px}
.guided-oracle img{width:72px;height:72px;flex:none}
.guided-insight{border-left:2px solid var(--gold);padding:10px 20px;margin:24px 0}
.guided-insight p{font:clamp(18px,3.2vw,22px)/1.45 var(--serif);color:var(--text)}
.guided-symbol h3,.guided-section h3,.guided-reading h3{font-family:var(--serif);font-weight:400}
.guided-reading p{color:var(--text)}
.guided-cta-row{display:flex;gap:12px;margin:20px 0}
.guided-price{font:400 clamp(30px,6vw,40px) var(--serif);color:var(--text);margin:18px 0 6px}
.guided-price small{font:14px var(--sans);color:var(--muted)}
.guided-offer,.guided-upsell{margin:36px 0}
/* Inside the result page the offer must line up with the question/insight
   (full width, left-aligned) instead of the narrow centered billing offer. */
.guided-result .offer{max-width:none;margin:28px 0;text-align:left}
.guided-result .offer .btn.wide{margin-top:6px}
.guided-offer .tag,.guided-result .tag{display:inline-block;font-size:11px;padding:6px 12px;border:1px solid var(--line);border-radius:30px;color:var(--gold);margin:6px 0}
.guided-member-actions,.guided-login-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

/* ===== Consulta Gratuita (free_reading): editorial, premium, self-contained.
   The free reading leads and occupies most of the page; the paid card sits after
   an explicit end divider and reads as optional deepening, never a paywall. ===== */
.guided-free{max-width:680px;margin:0 auto}
.guided-free .free-section{margin:30px 0}
.guided-free .free-h{font:400 clamp(20px,3.6vw,26px)/1.25 var(--serif);color:var(--text);margin:0 0 14px}
.guided-free .free-h3{font:400 clamp(16px,2.6vw,18px) var(--serif);color:var(--text);margin:0 0 4px}
.guided-free .free-prose p{color:var(--text);line-height:1.72;margin:0 0 14px;font-size:clamp(15px,2.2vw,16px)}
.guided-free .free-prose p:last-child{margin-bottom:0}

/* ===== Consulta gratuita as a PERSONAL LETTER from "Seu Oraculista".
   A compact editorial correspondence: narrow reading column, serif only for
   highlights, minimal ornament. ===== */
.free-letter{max-width:680px;margin:0 auto}

/* Letterhead: Grimorius mark + persona + discreet "personal reading" label */
.letter-head{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.letter-mark{flex:none;width:34px;height:34px;opacity:.95}
.letter-from{font:400 clamp(17px,2.6vw,19px) var(--serif);color:var(--text)}
.letter-tag{margin-left:auto;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.letter-emailed{margin:0 0 18px}

/* The question, as a quiet quote the letter answers */
.letter-question{margin:0 0 22px;padding:0 0 0 16px;border-left:2px solid color-mix(in srgb,var(--gold) 55%,var(--line))}
.letter-question .eyebrow{display:block;color:var(--gold);letter-spacing:.2em;margin:0 0 6px}
.letter-question blockquote{margin:0;font:italic 400 clamp(18px,3.2vw,22px)/1.45 var(--serif);color:var(--text)}

/* The message body: short paragraphs, comfortable reading */
.letter-body p{font:400 clamp(16px,2.3vw,18px)/1.75 var(--sans);color:#ece7df;margin:0 0 16px}

/* The single highlighted central question, raised inside the flow */
.letter-question-beat{font:italic 400 clamp(18px,3vw,22px)/1.5 var(--serif)!important;color:var(--text)!important;
  margin:22px 0!important;padding:2px 0 2px 18px;border-left:2px solid var(--gold)}

/* Recommended oracle, introduced inside the letter (compact, integrated) */
.letter-oracle{display:flex;align-items:flex-start;gap:14px;margin:22px 0;padding:16px 18px;
  border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));border-radius:14px;
  background:radial-gradient(120% 100% at 0% 0%,rgba(217,182,111,.08),transparent 60%),#101113}
.letter-oracle-glyph{flex:none;font-size:30px;color:var(--gold2);margin-top:2px}
.letter-oracle-text{margin:0;font:400 clamp(16px,2.3vw,18px)/1.6 var(--sans);color:var(--muted)}
.letter-oracle-text .eyebrow{display:block;color:var(--gold);letter-spacing:.2em;margin:0 0 2px}
.letter-oracle-name{display:block;font:400 clamp(22px,4vw,27px) var(--serif);color:var(--text);margin:0 0 6px}
.letter-oracle-reason{display:block}

/* Brief, natural sign-off */
.letter-signoff{font:400 clamp(16px,2.3vw,18px)/1.6 var(--sans)!important;color:var(--muted)!important;margin:24px 0 0!important}
.letter-signoff-name{font-family:var(--serif);font-size:1.15em;color:var(--text)}

/* The central knot — main free insight */
.free-knot{border-left:2px solid var(--gold);padding:4px 0 4px 20px}
.free-knot .eyebrow{color:var(--gold);letter-spacing:.2em}
.free-knot-lead{font:400 clamp(19px,3.4vw,24px)/1.4 var(--serif);color:var(--text);margin:8px 0 0}
.free-knot-support{color:var(--muted);line-height:1.65;margin:12px 0 0}

/* Advice list */
.free-advice-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.free-advice-item{display:flex;gap:16px;align-items:flex-start}
.free-advice-num{flex:none;font:400 20px/1 var(--serif);color:var(--gold);min-width:30px;padding-top:2px}
.free-advice-item p{color:var(--muted);line-height:1.65;margin:0}

/* Point of attention */
.free-attention{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);
  border-left:2px solid var(--gold);border-radius:12px;padding:16px 18px;margin:28px 0;
  background:radial-gradient(120% 100% at 0% 0%,rgba(217,182,111,.08),transparent 60%),#101112}
.free-attention .mi{color:var(--gold);font-size:22px;flex:none;margin-top:2px}
.free-attention .eyebrow{display:block;color:var(--gold);margin:0 0 4px}
.free-attention p{color:var(--muted);line-height:1.6;margin:0}

/* Reflection question */
.free-reflect{text-align:center;padding:8px 0}
.free-reflect .eyebrow{color:var(--gold);letter-spacing:.22em}
.free-reflect-q{font:italic 400 clamp(19px,3.6vw,25px)/1.5 var(--serif);color:var(--text);margin:12px auto 0;max-width:560px}

/* Recommended oracle */
/* Recommended oracle — a point of desire, "chosen for you" */
.free-oracle{position:relative;border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));border-radius:16px;
  padding:26px 22px 22px;margin:8px 0 4px;overflow:hidden;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  background:radial-gradient(120% 100% at 50% 0%,rgba(217,182,111,.12),transparent 55%),linear-gradient(180deg,#17171a,#0e0f11)}
.free-oracle:hover{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--gold) 18%,transparent)}
.free-oracle-seal{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:#0e0f11;background:linear-gradient(180deg,var(--gold2),var(--gold));
  border-radius:999px;padding:6px 12px;margin:0 0 16px}
.free-oracle-seal .mi{font-size:14px}
.free-oracle-body{display:flex;align-items:center;gap:18px}
.free-oracle-glyph-wrap{flex:none;display:grid;place-items:center;width:66px;height:66px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));
  background:radial-gradient(circle at 50% 32%,rgba(217,182,111,.22),transparent 70%),#121214}
.free-oracle-glyph{font-size:36px;color:var(--gold2)}
.free-oracle .eyebrow{display:block;color:var(--gold);letter-spacing:.2em;margin:0 0 4px}
.free-oracle-name{font:400 clamp(26px,5vw,34px)/1.05 var(--serif);color:var(--text);margin:0 0 8px;letter-spacing:-.01em}
.free-oracle p{color:var(--muted);line-height:1.6;margin:0;max-width:52ch}
@media(max-width:480px){.free-oracle-body{gap:14px}.free-oracle-glyph-wrap{width:56px;height:56px}.free-oracle-glyph{font-size:30px}}

/* Synthesis / close */
.free-synth{border-left:2px solid var(--gold);padding:4px 0 4px 20px}
.free-synth .eyebrow{color:var(--gold);letter-spacing:.2em}
.free-synth-lead{font:400 clamp(19px,3.4vw,24px)/1.4 var(--serif);color:var(--text);margin:8px 0 0}
.free-synth-support{color:var(--muted);line-height:1.65;margin:12px 0 0}

/* Explicit end of the free consultation */
.free-end{display:flex;align-items:center;gap:16px;margin:40px 0 32px}
.free-end-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.free-end-label{flex:none;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* Bridge: what the full reading can explore (dynamic deepening dimensions) */
.free-deepen{border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;margin:36px 0 24px;
  background:radial-gradient(130% 100% at 0% 0%,rgba(217,182,111,.07),transparent 60%),#0f1012}
.free-deepen .eyebrow{color:var(--gold);letter-spacing:.22em}
.free-deepen .free-h{margin:8px 0 4px}
.free-deepen-lead{color:var(--muted);line-height:1.6;margin:0 0 18px}
.free-deepen-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.free-deepen-item{display:flex;gap:16px;align-items:flex-start}
.free-deepen-num{flex:none;font:400 20px/1 var(--serif);color:var(--gold);min-width:30px;padding-top:2px}
.free-deepen-item h3{margin:0 0 4px}
.free-deepen-item p{color:var(--muted);line-height:1.6;margin:0}
@media(max-width:560px){.free-deepen-num{min-width:26px;font-size:18px}}

/* Optional deepening (complete_reading) — elegant, not aggressive */
.complete-offer{margin:0 0 24px}
.complete-perks{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.complete-perks li{display:flex;align-items:flex-start;gap:10px;color:var(--text);font-size:14px;line-height:1.4}
.complete-perks .mi{color:var(--gold);font-size:18px;flex:none}
.guided-free .complete-offer .guided-price{margin:16px 0 2px}
.complete-single{display:block;font-size:12px;color:var(--muted);letter-spacing:.04em;margin:0 0 10px}
.complete-reassure{display:block;font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
.guided-free .complete-offer{text-align:left}
.free-disclaimer{margin-top:18px;line-height:1.5}
@media(max-width:560px){.free-advice-num{min-width:26px;font-size:18px}}

/* Continuity section: the free offer reads as the next step of the reading,
   not an isolated ad. A barely-there distinct surface + tighter top gap.
   It must span the full reading column (match the oracle card), not the narrow
   centered billing-offer width that leaves empty space on desktop. */
.guided-free .complete-offer{max-width:none;width:100%;margin:6px 0 20px;text-align:left;
  border-color:color-mix(in srgb,var(--gold) 24%,var(--line));border-radius:16px;
  padding:clamp(16px,4vw,22px);background:radial-gradient(130% 100% at 50% 0%,rgba(217,182,111,.06),transparent 60%),#101113}
.guided-free .complete-offer h2{margin:6px 0 8px}
.guided-free .complete-offer>p{margin:0 0 4px}
.guided-free .complete-offer .eyebrow{color:var(--gold);letter-spacing:.2em}

/* Premium polish: staggered fade-in. The hidden start state applies ONLY once JS
   arms it (.reveal-on on the wrapper), so with JS disabled everything is visible.
   The observer then adds .is-in to fade blocks in; reduced-motion gets no motion. */
.guided-free.reveal-on .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.guided-free.reveal-on .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.guided-free.reveal-on .reveal{opacity:1;transform:none;transition:none}}

/* Mobile: the letter should feel like an intimate, comfortable message. */
@media(max-width:560px){
  .guided-free{max-width:100%}
  .letter-head{margin-bottom:16px}
  .letter-question{margin-bottom:18px}
  .letter-body p{line-height:1.8;margin-bottom:14px}
  .letter-oracle{padding:14px 16px}
  .letter-question-beat{margin:18px 0!important}
}

/* home featured card accent */
.hub-card-featured{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.hub-card-featured .hub-card-cta{display:inline-block;margin-top:8px;font:600 12px/1 var(--sans);letter-spacing:.08em;color:var(--accent);text-transform:uppercase}

/* Consulta Guiada — tabs (Nova Consulta / Minhas Consultas). Centered pill. */
.guided-tabs{display:flex;width:max-content;gap:4px;border:1px solid var(--line);border-radius:12px;padding:4px;background:#101113;margin:22px auto}
.guided-tab{padding:8px 16px;border-radius:9px;font:600 13px/1 var(--sans);color:var(--muted);text-decoration:none;transition:background .18s,color .18s}
.guided-tab:hover{color:var(--text)}
.guided-tab.is-active{background:linear-gradient(180deg,#f0d396,#d8ac60);color:#18130d}

/* Consulta Guiada — history list */
.guided-history-back{max-width:820px;margin:0 auto 10px}
.guided-history-empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 20px}
.guided-history-list{display:flex;flex-direction:column;gap:12px}
.guided-history-item{display:flex;justify-content:space-between;align-items:center;gap:16px}
.guided-history-main{min-width:0}
.guided-history-q{font:400 clamp(16px,3.4vw,19px)/1.4 var(--serif);color:var(--text);margin:6px 0 10px}
.guided-history-meta{display:flex;flex-wrap:wrap;gap:8px}
.guided-history-meta .guided-chip.is-complete{color:#b6d7bb;border-color:#46624c}
.guided-history-actions{display:flex;flex-direction:column;gap:8px;flex:none;align-items:stretch}
@media(max-width:620px){
  .guided-history-item{flex-direction:column;align-items:stretch}
  .guided-history-actions{flex-direction:row;flex-wrap:wrap}
}

/* ===== Perfil do Consulente — typology test wizard ===== */
.profile-test-lead{font-size:15px;line-height:1.55;color:var(--muted);margin:12px 0 0}
.pt-scene{display:none}
.pt-scene.is-active{display:block;animation:guided-scene-in .26s ease}
.pt-identity{display:flex;flex-direction:column;gap:4px}
.pt-choices{display:grid;grid-template-columns:1fr;gap:10px;margin:4px 0 0}
.pt-choice{min-height:0;padding:16px;justify-content:flex-start}
.pt-choice .guided-tile-label{font-size:16px;line-height:1.4;margin-top:0}
.pt-dob{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px}
.pt-dob .field{width:100%}

/* Agree/Disagree: two square tv-box tiles, side by side on any screen.
   Disagree = red, Agree = green, in both the resting and selected states. */
.pt-agree{grid-template-columns:1fr 1fr;gap:14px;max-width:460px;margin:18px auto 0}
.pt-agree .pt-choice{aspect-ratio:1/1;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:18px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.pt-agree .pt-choice-icon{font-size:40px;line-height:1}
.pt-agree .guided-tile-label{font-size:18px;font-weight:600;margin:0}

/* Disagree — red */
.pt-agree .pt-disagree{border-color:rgba(198,90,84,.5);color:#e2a7a3}
.pt-agree .pt-disagree .pt-choice-icon{color:#d6837d}
.pt-agree .pt-disagree:hover{border-color:#c65a54;box-shadow:0 0 0 2px rgba(198,90,84,.25)}
.pt-agree .pt-disagree.is-selected{border-color:#c65a54;background:rgba(198,90,84,.16);
  box-shadow:0 0 0 2px rgba(198,90,84,.4);color:#f1cbc8}
.pt-agree .pt-disagree.is-selected .pt-choice-icon{color:#e9958f}

/* Agree — green */
.pt-agree .pt-agree-btn{border-color:rgba(90,170,110,.5);color:#a6d6b4}
.pt-agree .pt-agree-btn .pt-choice-icon{color:#79c091}
.pt-agree .pt-agree-btn:hover{border-color:#5aaa6e;box-shadow:0 0 0 2px rgba(90,170,110,.25)}
.pt-agree .pt-agree-btn.is-selected{border-color:#5aaa6e;background:rgba(90,170,110,.16);
  box-shadow:0 0 0 2px rgba(90,170,110,.4);color:#c6e9cf}
.pt-agree .pt-agree-btn.is-selected .pt-choice-icon{color:#8fd3a2}

@media(min-width:560px){.pt-agree .pt-choice{aspect-ratio:auto;min-height:150px}}
.profile-test-done-cta{max-width:420px;margin:8px auto 0}
@media(prefers-reduced-motion:reduce){.pt-scene.is-active{animation:none}}

/* ===== Full reading loading veil (Consulta) ===== */
.guided-loading{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 40%,rgba(23,19,42,.86),rgba(14,11,26,.97));
  backdrop-filter:blur(4px);animation:guided-loading-in .4s ease}
.guided-loading[hidden]{display:none}
.guided-loading-inner{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:24px;max-width:420px}
.guided-loading .crystal{--cb-size:200px;margin-bottom:8px}
.guided-loading-title{font-size:18px;font-weight:600;color:#f3f0ff;margin:8px 0 0;letter-spacing:.3px}
.guided-loading-phrase{font-size:14px;line-height:1.55;color:var(--muted);margin:6px 0 0;min-height:2.6em;
  transition:opacity .26s ease}
body.is-loading-locked{overflow:hidden}
@keyframes guided-loading-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.guided-loading{animation:none}.guided-loading-phrase{transition:none}}

/* ===== Crystal ball — the Consulta visual guide ===== */
.crystal{width:var(--cb-size,180px);max-width:62vw;margin:0 auto;display:block;line-height:0;
  transition:width .3s ease,opacity .3s ease,transform .3s ease}
.crystal-svg{width:100%;height:auto;display:block;overflow:visible}

/* idle: energy breathes + filaments drift (asymmetric, not a spinner) */
.crystal-halo{transform-origin:100px 92px;animation:cb-halo 7s ease-in-out infinite}
.cb-core{transform-origin:100px 96px;animation:cb-core 5.5s ease-in-out infinite}
.cb-filaments{transform-origin:100px 96px}
.cb-fil{animation:cb-drift 9s ease-in-out infinite}
.cb-fil-2{animation-duration:11s;animation-direction:alternate-reverse}
.cb-fil-3{animation-duration:7.5s}
.cb-spark{animation:cb-spark 4s ease-in-out infinite}
.cb-spark-b{animation-duration:5.5s;animation-delay:.6s}
.cb-spark-c{animation-duration:6.2s;animation-delay:1.1s}
.cb-spark-d{animation-duration:4.8s;animation-delay:.3s}
.crystal-shine{animation:cb-shine 8s ease-in-out infinite}

@keyframes cb-halo{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes cb-core{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes cb-drift{0%{transform:rotate(-4deg) translateY(2px)}50%{transform:rotate(5deg) translateY(-3px)}100%{transform:rotate(-4deg) translateY(2px)}}
@keyframes cb-spark{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.95;transform:translateY(-4px)}}
@keyframes cb-shine{0%,100%{opacity:.1}50%{opacity:.22}}

/* --- state: typing (energy gathers, no per-key flashes) --- */
.crystal.is-typing .cb-core{animation-duration:3.4s}
.crystal.is-typing .cb-fil{animation-duration:6s}
/* --- state: a short confirm pulse on selection --- */
.crystal.is-pulse .crystal-halo{animation:cb-pulse .5s ease}
.crystal.is-pulse .cb-core{animation:cb-pulse-core .5s ease}
@keyframes cb-pulse{0%{transform:scale(1);opacity:.8}40%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:.85}}
@keyframes cb-pulse-core{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
/* --- state: advancing (energy reshapes briefly) --- */
.crystal.is-advancing .cb-filaments{animation:cb-advance .45s ease}
@keyframes cb-advance{0%{transform:rotate(0) scale(1)}50%{transform:rotate(12deg) scale(.92)}100%{transform:rotate(0) scale(1)}}
/* --- state: processing (more concentrated inner movement) --- */
.crystal.is-processing .cb-core{animation-duration:1.8s}
.crystal.is-processing .cb-fil{animation-duration:3.2s}
.crystal.is-processing .crystal-halo{animation-duration:3s}
/* --- state: settled (result) --- */
.crystal.is-settled .cb-core{animation-duration:7s}
.crystal.is-settled .cb-fil{animation-duration:13s}

/* entry */
.crystal{opacity:0;transform:translateY(6px) scale(.98);animation:cb-enter .5s ease forwards}
@keyframes cb-enter{to{opacity:1;transform:none}}

/* keyboard open / tight height: shrink the ornament to free the field + button */
.crystal.is-compact{--cb-size:96px;opacity:.9}

@media(max-width:640px){.crystal{--cb-size:148px}}
@media(max-width:380px){.crystal{--cb-size:128px}}

/* reduced motion: a calm static sphere, no looping animation */
@media(prefers-reduced-motion:reduce){
  .crystal,.crystal-halo,.cb-core,.cb-fil,.cb-spark,.crystal-shine,
  .crystal.is-pulse .crystal-halo,.crystal.is-pulse .cb-core,
  .crystal.is-advancing .cb-filaments{animation:none}
  .crystal{opacity:1;transform:none}
}

/* Crystal SVG icon inside a hub tv-card (matches the .tv-ico font size) */
.tv-ico-svg{color:var(--accent);display:inline-flex}
.tv-ico-svg svg{width:clamp(56px,11vw,86px);height:auto}

/* ============================================================
   Consulta — redesigned RESULT reading (unlocked). Dark theme on
   screen; dedicated light print styles at the end of this block.
   The tiragem is the hero; the interpretation reads in a column.
   ============================================================ */
.guided-read{max-width:860px;margin:0 auto;width:100%}

/* 1. Opening */
.read-open{display:grid;grid-template-columns:1fr auto;gap:22px 28px;align-items:start;margin:4px 0 10px}
.read-kicker{display:inline-block;font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.read-title{font:400 clamp(30px,7vw,46px)/1.05 var(--serif);color:var(--text);margin:8px 0 10px;letter-spacing:-.01em}
.read-title:focus{outline:none}
.read-question{font:italic 400 clamp(17px,3.4vw,21px)/1.5 var(--serif);color:#e4dccd;margin:0;overflow-wrap:anywhere}
.read-byline{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12.5px;margin:12px 0 0;letter-spacing:.02em}
.read-open-aside{display:flex;flex-direction:column;align-items:center;gap:14px;--cb-size:96px}
.read-open-aside .crystal{max-width:96px}
.read-pdf{white-space:nowrap}

/* 2. Tiragem — the gold-lit hero */
.read-draw{position:relative;margin:14px 0 8px;padding:clamp(22px,5vw,40px) clamp(14px,4vw,34px);border-radius:18px;
  border:1px solid #3a2f1a;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%,rgba(201,152,56,.22),rgba(16,13,9,.4) 55%,#0c0a07 100%)}
.read-draw::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 10%,rgba(241,210,143,.16),transparent 70%)}
.tiragem{position:relative}

/* Tarot row — real card art, adaptive to the number of cards */
.tiragem-tarot-row{display:grid;gap:clamp(10px,2.6vw,20px);justify-items:center;grid-template-columns:repeat(3,minmax(0,1fr))}
.tiragem-tarot-row[data-count="1"]{grid-template-columns:minmax(0,220px)}
.tiragem-tarot-row[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;margin:0 auto}
.tiragem-tarot-row[data-count="4"],.tiragem-tarot-row[data-count="5"]{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
/* width:100% makes every card fill its (equal) grid column; without it a card
   only grew to its image's intrinsic width, so lower-resolution PNGs rendered
   smaller than the others. The art holds a fixed tarot aspect ratio and the img
   covers it, so a different source resolution never changes the card size. */
.tiragem-card{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;width:100%;max-width:220px}
.tiragem-card-art{position:relative;width:100%;aspect-ratio:220/374;border-radius:10px;overflow:hidden;border:1px solid #6d5732;
  box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 0 0 1px rgba(241,210,143,.08);line-height:0;background:#120f0a}
.tiragem-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.tiragem-card-art.reversed img{transform:rotate(180deg)}
.tiragem-card-roman{position:absolute;top:6px;left:0;right:0;text-align:center;z-index:1;font:400 15px var(--serif);
  color:var(--gold2);text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* Rune row — reuse the stone surface, lit for the result */
.tiragem-rune-row{display:grid;gap:clamp(10px,2.6vw,22px);justify-items:center;grid-template-columns:repeat(3,minmax(0,1fr))}
.tiragem-rune-row[data-count="1"]{grid-template-columns:minmax(0,150px)}
.tiragem-rune-row[data-count="4"],.tiragem-rune-row[data-count="5"]{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.tiragem-rune{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.tiragem-rune-stone{width:100%;max-width:138px;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid #7a5f30;background:radial-gradient(circle at 50% 30%,#342a18,#120f0a 64%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.55),0 14px 32px rgba(0,0,0,.5)}
.tiragem-rune-glyph{font-size:clamp(34px,12vw,66px);line-height:1;color:var(--gold2);text-shadow:0 0 26px rgba(241,210,143,.4)}
.tiragem-rune-stone.reversed .tiragem-rune-glyph{transform:rotate(180deg)}

/* Shared caption */
.tiragem-cap{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0}
.tiragem-cap strong{font:400 clamp(15px,3.6vw,19px) var(--serif);color:var(--text);line-height:1.2}
.tiragem-pos{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tiragem-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:3px 9px;border:1px solid #745b30;
  border-radius:999px;color:var(--gold2);text-transform:uppercase;letter-spacing:.06em}
.tiragem-tag .mi{font-size:13px}

/* I Ching + Omikuji reuse their own components, just centered in the hero */
.tiragem-iching,.tiragem-omikuji,.tiragem-fallback{display:flex;justify-content:center}
.tiragem-fallback h3{font:400 clamp(20px,5vw,28px) var(--serif);color:var(--gold2);text-align:center}

/* Mobile PDF under the tiragem */
.read-pdf-mobile{display:none;margin:16px 0 4px}
.read-pdf-mobile .btn{justify-content:center}

/* In-page nav */
.read-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.read-nav-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.read-nav ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.read-nav a{display:inline-block;padding:7px 13px;border-radius:9px;font:600 13px/1 var(--sans);color:var(--muted);transition:background .16s,color .16s}
.read-nav a:hover,.read-nav a:focus-visible{background:#17150f;color:var(--gold2)}

/* Reading sections + comfortable column */
.read-section{margin:24px 0}
.read-section:focus{outline:none}
.read-h{font:400 clamp(22px,5vw,28px) var(--serif);color:var(--text);margin:0 0 14px}
.read-h3{display:flex;align-items:center;gap:8px;font:400 clamp(17px,4vw,20px) var(--serif);color:var(--gold2);margin:0 0 8px}
.read-h3 .mi{font-size:20px;color:var(--gold)}
.read-prose{max-width:none}
.read-prose p{font:400 clamp(15.5px,2.4vw,17px)/1.7 var(--sans);color:#d8d2c7;margin:0 0 14px;
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* Narrow screens: too few words per line for clean justify — go ragged-right. */
@media(max-width:620px){.read-prose p{text-align:left;hyphens:none}}
.read-prose p:last-child{margin-bottom:0}
.read-engine{border-left:2px solid var(--gold);padding-left:18px}
.read-engine p{font-family:var(--serif);color:#d8c9ae;line-height:1.7}
.read-engine strong{color:var(--gold2)}.read-engine em{color:#e8dcc2}
.read-block{margin:18px 0}
.read-block:last-child{margin-bottom:0}

/* Synthesis lede + compact metadata (no big single-sentence cards) */
.read-lede{font:400 clamp(17px,3.2vw,21px)/1.6 var(--serif);color:var(--text);max-width:60ch;margin:0 0 16px}
.read-meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.read-meta li{display:inline-flex;align-items:center;gap:7px;max-width:100%;font-size:13px;line-height:1.4;color:#c9c2b6;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.read-meta .mi{font-size:16px;color:var(--gold);flex:none}

/* Reflection cards */
.read-reflect .read-block{margin:0 0 12px}
.read-reflect .read-block:last-child{margin-bottom:0}
.read-reflect-card{border:1px solid #3a2f1a;border-radius:14px;padding:16px 18px;
  background:radial-gradient(130% 120% at 0 0,rgba(201,152,56,.1),#101013 60%)}

/* Per-element expandable detail */
.read-el-list{display:flex;flex-direction:column;gap:10px}
.read-el{border:1px solid var(--line);border-radius:12px;background:#101013;overflow:hidden}
.read-el>summary{display:flex;align-items:center;gap:14px;padding:12px 14px;cursor:pointer;list-style:none}
.read-el>summary::-webkit-details-marker{display:none}
.read-el>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.read-el-mark{flex:none;width:46px;height:60px;display:flex;align-items:center;justify-content:center}
.read-el-mark img{max-width:46px;max-height:60px;border-radius:5px;border:1px solid #6d5732;display:block}
.read-el-mark img.reversed{transform:rotate(180deg)}
.read-el-glyph{font-size:34px;line-height:1;color:var(--gold2)}
.read-el-glyph.reversed{display:inline-block;transform:rotate(180deg)}
.read-el-id{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;flex:1}
.read-el-id strong{font:400 17px var(--serif);color:var(--text)}
.read-el-pos{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.read-el-chevron{color:var(--muted);flex:none;transition:transform .2s ease}
.read-el[open] .read-el-chevron{transform:rotate(180deg)}
.read-el-body{margin:0;padding:0 16px 14px 74px;color:#c3bcb0;font-size:14px;line-height:1.6}

/* Actions */
.read-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.guided-read .guided-member{margin:16px 0 0}

/* Annual-plan upsell on the result page: full-width (aligned with the reading
   column), centered content, bolder and conversion-oriented. */
.guided-read .guided-upsell{max-width:none;margin:28px 0 0;text-align:center;
  padding:clamp(26px,5vw,38px);border:1px solid #6a521f;border-radius:18px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(217,182,111,.20), transparent 60%),
    linear-gradient(180deg,#191510,#0f0f10);
  box-shadow:0 26px 70px rgba(0,0,0,.55)}
.guided-read .guided-upsell .eyebrow{color:var(--gold2)}
.guided-read .guided-upsell h2{font:400 clamp(24px,5.5vw,32px) var(--serif);color:var(--text);margin:6px 0 8px}
.guided-read .guided-upsell>p{max-width:560px;margin:0 auto 16px}
.upsell-perks{list-style:none;margin:0 auto 20px;padding:0;max-width:440px;text-align:left;display:grid;gap:9px}
.upsell-perks li{display:flex;align-items:flex-start;gap:10px;color:var(--text);font-size:14.5px;line-height:1.4}
.upsell-perks .mi{color:var(--gold2);font-size:20px;flex:none;margin-top:1px}
.upsell-price-row{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0 18px}
.upsell-price-main{display:flex;align-items:baseline;gap:8px}
.guided-read .guided-upsell .guided-price{font:400 clamp(40px,10vw,54px) var(--serif);color:var(--gold2);margin:0;
  text-shadow:0 0 32px rgba(241,210,143,.3)}
.upsell-per{font:15px var(--sans);color:var(--muted)}
.upsell-cycle-note{display:inline-block;font:600 13px var(--sans);color:var(--gold2);
  background:rgba(217,182,111,.12);border:1px solid rgba(217,182,111,.35);border-radius:30px;padding:5px 14px}
.upsell-cta{max-width:460px;margin:0 auto;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.upsell-cta .mi{font-size:20px}
.upsell-reassure{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.upsell-reassure .mi{font-size:15px}
/* Trial-first headline on the /consulta surfaces: "7 DIAS GRÁTIS" is the biggest
   element; billing terms sit below in smaller, legible text. */
.trial-head-lg{font:400 clamp(2.1rem,8vw,3rem) var(--serif);color:var(--gold2);line-height:1.05;
  text-transform:uppercase;letter-spacing:.02em;text-align:center;text-shadow:0 0 30px rgba(241,210,143,.22);margin:2px 0 10px}
.upsell-terms{margin:14px auto 0;max-width:460px;line-height:1.5}
.plan-modal-sub{color:var(--text);font-size:15px;line-height:1.5;margin:0 auto 14px;max-width:360px}
.plan-modal-separate{margin:0 0 14px}
/* /consulta/result dual offer: trial (recommended) + single avulsa (alternative).
   Two columns on desktop, stacked on mobile. The trial stays the lead but is
   lighter than before; the avulsa reads as a legitimate second choice. */
/* Both options are ALWAYS stacked (desktop + mobile), editorial and compact.
   Subtle neo-brutalism: defined 1px borders, 8–12px radii, solid surfaces,
   tiny offset shadow only on hover — ~80% Grimorius, ~20% editorial brutalism. */
.deepen-options{margin:4px auto 0;max-width:460px;display:flex;flex-direction:column}

/* Recommended trial card — the lead: gold border, warm tint, filled gold CTA. */
.trial-offer{position:relative;display:flex;flex-direction:column;border:1px solid var(--gold);border-radius:12px;
  padding:14px 16px 12px;background:rgba(241,210,143,.045)}
.trial-badge{display:inline-block;align-self:center;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:#120d06;background:var(--gold2);border:1px solid #c9a85f;border-radius:8px;padding:4px 10px;margin-bottom:8px}
.trial-offer .trial-head-lg,.trial-modal-card .trial-head-lg{margin:0 0 10px;font-size:clamp(1.6rem,5.5vw,2.1rem)}
.trial-offer .trial-terms,.trial-modal-card .trial-terms{display:grid;gap:4px;margin:0 auto 12px;max-width:300px;width:100%}
.trial-offer .trial-terms>div,.trial-modal-card .trial-terms>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.trial-offer .trial-terms dt,.trial-modal-card .trial-terms dt{color:#cfc5b4;font-size:.9rem}
.trial-offer .trial-terms dd,.trial-modal-card .trial-terms dd{margin:0;color:var(--gold2);font-weight:600;font-size:.95rem}
.trial-offer .trial-terms dd.trial-today,.trial-modal-card .trial-terms dd.trial-today{font-size:1.15rem;font-weight:700}
.trial-offer .trial-terms dd[data-price-annual],.trial-modal-card .trial-terms dd[data-price-annual]{color:#b7ac97;font-weight:500;font-size:.85rem}
.trial-accept{display:flex;gap:7px;align-items:flex-start;text-align:left;margin:0 auto 10px;max-width:320px;font-size:.74rem;color:#9a9183;line-height:1.35}
.trial-accept input{margin-top:1px;flex:0 0 auto;width:24px;height:24px;accent-color:var(--gold);cursor:pointer}
.trial-accept a{color:var(--gold2);text-decoration:underline}
.trial-offer form{margin-top:auto}
.trial-note{font-size:.72rem;color:#8f8674;margin:8px auto 0;max-width:320px;line-height:1.4}
.trial-note-stays{color:#746c5e}

/* Separator: short horizontal rule with a centered label, always inline. */
.offer-sep{display:flex;align-items:center;gap:12px;color:#9a917f;margin:12px auto;max-width:460px}
.offer-sep-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(241,210,143,.3),transparent)}
.offer-sep-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;max-width:7rem;text-align:center;line-height:1.3}

/* Single avulsa — a legitimate, clearly clickable second choice. Solid graphite
   surface, slightly lighter than the page, with a defined border. */
.single-offer{display:flex;flex-direction:column;justify-content:center;text-align:center}
.single-offer-alt{border:1px solid #3a3730;border-radius:12px;padding:14px 16px;background:var(--panel2)}
.single-title{display:block;font:600 .95rem var(--sans);color:var(--gold2);margin:0 0 4px;letter-spacing:.01em}
.single-offer-alt .guided-price{font-size:2rem;font-weight:700;color:var(--text);margin:0 0 2px;letter-spacing:-.01em}
.single-offer-alt .complete-single{margin:0 0 10px;font-size:11px;letter-spacing:.03em}
.single-offer-alt form{margin-top:auto}

/* Avulsa CTA: dark, physical button with an evident gold border — reads as a
   real action, never disabled. Matches the trial CTA width and height. */
.btn.single-cta{background:#1c1d1f;color:var(--gold2);border:1.5px solid var(--gold);font-weight:600;
  box-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform 150ms ease,box-shadow 150ms ease,background-color 150ms ease,border-color 150ms ease,filter 150ms ease}
.btn.single-cta:hover{background:#232527;border-color:var(--gold2);transform:translateY(-2px);box-shadow:0 4px 0 rgba(0,0,0,.4);filter:none}
.btn.single-cta:active{transform:translateY(0);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn.single-cta .mi{font-size:19px}
.single-offer-alt:hover{border-color:#4a463d}

/* Keyboard focus: clearly visible on both CTAs. */
.deepen-options .btn:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .btn.single-cta{transition:background-color 120ms ease,border-color 120ms ease}
  .btn.single-cta:hover,.btn.single-cta:active{transform:none}
}

/* Compact "Liberar gratuitamente" button that opens the trial modal. The gold
   fill keeps it the primary action; a small badge marks it as recommended. */
.btn.trial-open{position:relative;gap:8px;padding:13px 16px;min-height:48px;margin-bottom:16px}
.trial-open-badge{font:700 9px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold2);background:rgba(24,19,13,.22);border:1px solid rgba(24,19,13,.3);border-radius:6px;padding:3px 7px}
.trial-open-label{font-weight:700}
/* Caption under the trial button: states the commercial nature (trial -> annual
   subscription, card, cancel) up front so it never reads as a one-off purchase. */
.btn.trial-open{margin-bottom:6px}
.trial-open-sub{display:block;max-width:460px;margin:0 auto 16px;text-align:center;line-height:1.4}

/* Next-step benefits: title + short description, compact and scannable. */
.complete-perks .perk-text{display:flex;flex-direction:column;gap:2px}
.complete-perks .perk-text strong{color:var(--text);font-weight:600;font-size:14px;line-height:1.35}
.complete-perks .perk-desc{color:var(--muted);font-size:12.5px;line-height:1.4}

/* Trial detail modal (opened from that button): holds the former inline card. */
.trial-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.trial-modal[hidden]{display:none}
.trial-modal-backdrop{position:absolute;inset:0;background:rgba(8,7,12,.72);backdrop-filter:blur(3px)}
body.trial-modal-open{overflow:hidden}
.trial-modal-card{position:relative;z-index:1;width:100%;max-width:400px;max-height:92vh;overflow:auto;text-align:center;
  border:1px solid var(--gold);border-radius:16px;padding:clamp(22px,5vw,30px) clamp(18px,4vw,24px);
  background:radial-gradient(120% 90% at 50% -10%, rgba(241,210,143,.14), transparent 60%),linear-gradient(180deg,#17140f,#0f0f10);
  box-shadow:0 30px 90px rgba(0,0,0,.6);animation:plan-modal-in .3s ease}
.trial-modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer}
.trial-modal-close:hover{background:rgba(255,255,255,.12);color:var(--text)}
.trial-modal-card .trial-badge{margin-bottom:8px}
.trial-modal-card .trial-head-lg{margin-top:0}
@media(prefers-reduced-motion:reduce){.trial-modal-card{animation:none}}

/* Mobile: full-width CTAs, comfortable tap targets, tight but breathable spacing. */
@media(max-width:600px){
  .deepen-options{max-width:none}
  .single-offer-alt{padding:15px 14px}
  .deepen-options .btn{width:100%;min-height:48px}
}
.plan-modal-terms{display:grid;gap:6px;margin:4px auto 10px;max-width:320px}
.plan-modal-terms>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.plan-modal-terms dt{color:var(--muted);font-size:14px}
.plan-modal-terms dd{margin:0;color:var(--gold2);font-weight:700;font-size:15px}
.plan-modal-renew{margin:0 0 14px}
.plan-modal-trial{margin-top:4px}

/* Guest plan modal on /consulta/result: promotes the annual plan while making
   clear the result is already available (not a second charge). */
.plan-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.plan-modal[hidden]{display:none}
.plan-modal-backdrop{position:absolute;inset:0;background:rgba(8,7,12,.72);backdrop-filter:blur(3px)}
body.plan-modal-open{overflow:hidden}
.plan-modal-card{position:relative;z-index:1;width:100%;max-width:440px;max-height:92vh;overflow:auto;
  text-align:center;border:1px solid #6a521f;border-radius:18px;padding:clamp(24px,5vw,34px);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(217,182,111,.20), transparent 60%),
    linear-gradient(180deg,#191510,#0f0f10);
  box-shadow:0 30px 90px rgba(0,0,0,.6);animation:plan-modal-in .3s ease}
@keyframes plan-modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.plan-modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer}
.plan-modal-close:hover{background:rgba(255,255,255,.12);color:var(--text)}
.plan-modal-card .eyebrow{color:var(--gold2)}
.plan-modal-card h2{font:400 clamp(22px,5.5vw,28px) var(--serif);color:var(--text);margin:6px 0 10px}
.plan-modal-reassure{display:flex;align-items:flex-start;gap:8px;justify-content:center;text-align:left;
  color:var(--text);font-size:14.5px;line-height:1.4;background:rgba(90,170,110,.1);
  border:1px solid rgba(90,170,110,.3);border-radius:12px;padding:10px 14px;margin:0 0 12px}
.plan-modal-reassure .mi{color:#7cc08f;font-size:20px;flex:none}
.plan-modal-body{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 16px}
.plan-modal-card .upsell-perks{margin:0 auto 18px}
.plan-modal-skip{margin-top:10px}
@media(prefers-reduced-motion:reduce){.plan-modal-card{animation:none}}

/* Mobile layout */
@media(max-width:720px){
  .read-open{grid-template-columns:1fr}
  .read-open-aside{flex-direction:row;justify-content:space-between;width:100%;--cb-size:64px;align-items:center}
  .read-open-aside .crystal{max-width:64px;margin:0}
  .read-open-aside .read-pdf{display:none}
  .read-pdf-mobile{display:block}
  .read-nav{overflow-x:visible}
  .read-nav ul{width:100%}
  .read-el-body{padding-left:16px}
}
@media(max-width:460px){
  .tiragem-tarot-row[data-count="4"],.tiragem-tarot-row[data-count="5"],
  .tiragem-rune-row[data-count="4"],.tiragem-rune-row[data-count="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Entry motion — brief, respects reduced motion */
@media(prefers-reduced-motion:no-preference){
  .read-draw [data-reveal]>*,.read-draw>[data-reveal]{animation:read-rise .5s ease both}
  .tiragem-card{animation:read-rise .5s ease both}
  .tiragem-card:nth-child(2){animation-delay:.07s}
  .tiragem-card:nth-child(3){animation-delay:.14s}
  .tiragem-rune:nth-child(2){animation-delay:.07s}
  .tiragem-rune:nth-child(3){animation-delay:.14s}
}
@keyframes read-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== Print: light paper, hide chrome, keep symbols/captions ===== */
@media print{
  .no-print{display:none !important}
  body{background:#fff !important;color:#1a1813 !important}
  .sidebar,.topbar,.content{all:unset}
  .content{display:block;max-width:none;margin:0;padding:0}
  .guided-read{max-width:none}
  .read-kicker{color:#8a6d2f !important}
  .read-title,.read-question,.read-h,.read-lede,.tiragem-cap strong,.read-prose p,.read-el-id strong{color:#1a1813 !important}
  .read-h3{color:#7a5f23 !important}
  .read-byline,.tiragem-pos,.read-el-pos,.read-meta li{color:#4a443a !important}
  .read-question{font-style:italic}
  .read-draw{background:none !important;border:1px solid #cdbf9c;box-shadow:none}
  .read-draw::before{display:none}
  .tiragem-card-art{box-shadow:none;border:1px solid #b9a46f;background:#fff}
  .tiragem-rune-stone{background:#f3eddc !important;border:1px solid #b9a46f;box-shadow:none}
  .tiragem-rune-glyph,.read-el-glyph{color:#7a5f23 !important;text-shadow:none}
  .read-engine{border-left:2px solid #b9a46f}
  .read-engine p,.read-engine strong,.read-engine em{color:#2a261e !important}
  .read-meta li,.tiragem-tag{border-color:#cdbf9c}
  .read-reflect-card{background:none !important;border:1px solid #cdbf9c}
  .read-el{border:1px solid #cdbf9c;background:#fff}
  .read-el-body{color:#2a261e !important}
  .read-el>summary{list-style:none}
  .read-el[open] .read-el-chevron,.read-el-chevron{display:none}
  details.read-el{page-break-inside:avoid}
  .read-section,.read-block,.tiragem-card,.tiragem-rune,.hexagram,.omikuji-paper{page-break-inside:avoid}
  .read-h{page-break-after:avoid}
  details:not([open])>*:not(summary){display:revert}
  details.read-el>.read-el-body{display:block !important}
}

/* ===== Consulta Guiada — trend + direct answer (full reading) ===== */
/* Discreet purple-bordered card for the symbolic trend. Never relies on color
   alone: an icon + the written label carry the meaning (WCAG). */
.read-trend{display:flex;gap:14px;align-items:flex-start;margin:22px 0 8px;padding:18px 18px;
  background:linear-gradient(180deg,rgba(53,32,67,.35),rgba(20,17,25,.2));
  border:1px solid var(--gr-border-accent);border-left:3px solid var(--gr-purple-bright);border-radius:14px}
.read-trend-glyph{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--gr-purple-muted);color:var(--gr-purple-soft);border:1px solid var(--gr-border-accent)}
.read-trend-glyph .mi{font-size:22px}
.read-trend-body{min-width:0}
.read-trend .eyebrow{color:var(--gr-purple-soft)}
.read-trend-label{margin:2px 0 4px;font:600 17px/1.3 var(--sans);color:var(--text)}
.read-trend-lead{margin:0 0 6px;font:400 15px/1.5 var(--sans);color:var(--text)}
.read-trend-reason{margin:0;font:400 13px/1.55 var(--sans);color:var(--muted)}
/* Trend level accents (subtle left border tint only; text always states it). */
.read-trend[data-trend="favorable"]{border-left-color:#7fc8a0}
.read-trend[data-trend="mod_favorable"]{border-left-color:var(--gr-purple-soft)}
.read-trend[data-trend="undefined"]{border-left-color:var(--gold)}
.read-trend[data-trend="mod_unfavorable"]{border-left-color:#d9a05b}
.read-trend[data-trend="unfavorable"]{border-left-color:var(--danger)}
/* The direct answer — the first thing the person reads after the trend. */
.read-answer{margin:14px 0 6px;padding:16px 18px;background:var(--panel2);border:1px solid var(--line);border-radius:14px}
.read-answer .read-h3{margin:0 0 6px}
.read-answer p{margin:0;font:400 15.5px/1.6 var(--sans);color:var(--text)}
@media(prefers-reduced-motion:reduce){.read-trend{transition:none}}

/* Compaixão do Oráculo — the Oraculist's courtesy message above the reading.
   Warm gold accent, neo-brutalist frame, no melodrama, no price/coupon chrome. */
.read-compassion{display:flex;gap:14px;align-items:flex-start;margin:18px 0 10px;padding:20px 20px;
  background:linear-gradient(180deg,rgba(241,210,143,.08),rgba(20,17,25,.15));
  border:1px solid #6a521f;border-left:3px solid var(--gold2);border-radius:14px}
.read-compassion-mark{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(241,210,143,.12);color:var(--gold2);border:1px solid #6a521f}
.read-compassion-mark .mi{font-size:22px}
.read-compassion-body{min-width:0}
.read-compassion-body p{margin:0 0 10px;font:400 15.5px/1.65 var(--sans);color:var(--text)}
.read-compassion-sign{margin:4px 0 0!important;font:400 14px/1.5 var(--serif);color:var(--gold2)}

/* ============================================================================
   Consulta Guiada V2 — ISOLATED typography/layout namespace (.gr-v2).
   Nothing here uses a bare V1 selector, so V1 readings are byte-for-byte
   unaffected. Follows the V2 spec §10 type scale (desktop 18/1.7 body, 34-38
   title, 25-28 section, 20-22 subhead; mobile 17-18/1.65) with a comfortable
   measure (~68ch) and generous spacing.
   ========================================================================== */
.gr-v2{max-width:720px;margin:0 auto;padding:8px 2px}
.gr-v2 .gr-v2-head{margin:0 0 14px}
.gr-v2-kicker{display:block;font:600 13px/1.3 var(--sans);letter-spacing:.14em;color:var(--gold2);text-transform:uppercase;margin-bottom:8px}
.gr-v2-title{font:400 clamp(28px,6vw,38px)/1.2 var(--serif);color:var(--text);margin:0 0 10px}
.gr-v2-question{font:400 clamp(17px,2.4vw,19px)/1.6 var(--sans);color:var(--muted);margin:0 0 6px;max-width:68ch}
.gr-v2-byline{font:500 14px/1.4 var(--sans);color:var(--muted);margin:0 0 10px}
.gr-v2-pdf{margin-top:6px}
.gr-v2-section{margin:0 0 30px;max-width:68ch}
.gr-v2-h{font:400 clamp(25px,4.2vw,28px)/1.3 var(--serif);color:var(--text);margin:0 0 14px}
.gr-v2-h3{font:600 clamp(20px,3vw,22px)/1.35 var(--sans);color:var(--gold2);margin:22px 0 8px}
.gr-v2-prose p{font:400 18px/1.7 var(--sans);color:var(--text);margin:0 0 16px;max-width:68ch;text-align:justify;text-align-last:left;hyphens:auto;overflow-wrap:break-word}
.gr-v2-lede{font:400 clamp(18px,2.6vw,20px)/1.7 var(--sans);color:var(--text);margin:0;max-width:68ch;text-align:justify;text-align-last:left;hyphens:auto}
.gr-v2-block{margin:0 0 8px}
.gr-v2-micro{display:block;font:400 14px/1.6 var(--sans);color:var(--muted);margin:18px 0 0;max-width:68ch}
/* Direct answer — the first substantive beat, visually anchored. */
.gr-v2-answer{padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--gold2);border-radius:14px;background:var(--panel2)}
.gr-v2-answer .gr-v2-h{margin-bottom:8px}
.gr-v2-answer-body{font:400 18px/1.7 var(--sans);color:var(--text);margin:0 0 10px;text-align:justify;text-align-last:left;hyphens:auto}
.gr-v2-trend{display:flex;align-items:center;gap:8px;font:400 16px/1.5 var(--sans);color:var(--text);margin:0 0 4px}
.gr-v2-trend .mi{color:var(--gold2)}
.gr-v2-trend-why{font:400 14px/1.55 var(--sans);color:var(--muted);margin:0}
.gr-v2-answer[data-trend="favorable"]{border-left-color:#7fc8a0}
.gr-v2-answer[data-trend="mod_unfavorable"],.gr-v2-answer[data-trend="challenging"]{border-left-color:#d9a05b}
.gr-v2-answer[data-trend="unfavorable"]{border-left-color:var(--danger)}
.gr-v2-answer[data-trend="ambivalent"]{border-left-color:var(--gr-purple-soft,#b08fd0)}
.gr-v2-answer[data-trend="transformative"]{border-left-color:#8a6dc0}
.gr-v2-draw{margin:4px 0 18px}
.gr-v2-engine{margin-top:8px}
.gr-v2-compassion{display:flex;gap:14px;align-items:flex-start;margin:4px 0 24px;padding:20px;border:1px solid #6a521f;border-left:3px solid var(--gold2);border-radius:14px;background:linear-gradient(180deg,rgba(241,210,143,.08),rgba(20,17,25,.15))}
.gr-v2-compassion-mark{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(241,210,143,.12);color:var(--gold2);border:1px solid #6a521f}
.gr-v2-compassion-mark .mi{font-size:22px}
.gr-v2-compassion p{font:400 16.5px/1.65 var(--sans);color:var(--text);margin:0 0 10px;text-align:justify;text-align-last:left;hyphens:auto}
.gr-v2-compassion-sign{font:400 14px/1.5 var(--serif);color:var(--gold2);margin:4px 0 0!important}
.gr-v2-actions{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0}
/* Dynamic spread (1..6 cards): responsive grid, never a fixed 3-up assumption.
   Each card carries its role as a caption; the count drives the columns. */
.gr-v2-spread-reason{font:400 15px/1.6 var(--sans);color:var(--muted);margin:0 0 14px;max-width:68ch}
.gr-v2-spread{display:grid;gap:clamp(12px,2.4vw,18px);justify-items:center;grid-template-columns:repeat(3,minmax(0,1fr))}
.gr-v2-spread[data-count="1"]{grid-template-columns:minmax(0,220px)}
.gr-v2-spread[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px}
.gr-v2-spread[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:460px}
.gr-v2-spread[data-count="5"],.gr-v2-spread[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.gr-v2-spread-card{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;width:100%;max-width:200px}
.gr-v2-spread-art{position:relative;width:100%;aspect-ratio:220/374;border-radius:10px;overflow:hidden;border:1px solid #6d5732;box-shadow:0 12px 30px rgba(0,0,0,.5);line-height:0;background:#120f0a}
.gr-v2-spread-art img{width:100%;height:100%;object-fit:cover;display:block}
.gr-v2-spread-art.reversed img{transform:rotate(180deg)}
.gr-v2-spread-cap{text-align:center;display:flex;flex-direction:column;gap:5px;margin-top:4px}
.gr-v2-spread-role{font:600 11px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold2);margin-bottom:1px}
.gr-v2-spread-cap strong{font:400 15px/1.35 var(--serif);color:var(--text);display:block}
.gr-v2-spread-tag{font:500 12px/1.3 var(--sans);color:var(--muted);display:inline-flex;align-items:center;gap:3px}
@media(max-width:560px){
  .gr-v2-prose p,.gr-v2-answer-body{font-size:17px;line-height:1.65}
  .gr-v2-section{margin-bottom:26px}
  .gr-v2-spread[data-count="5"],.gr-v2-spread[data-count="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Post-courtesy invite (spec §6): discreet, after the full reading, never a
   pop-up and never using the person's hardship to sell. No struck-through price. */
.guided-compassion-invite{max-width:none;margin:28px 0 0;text-align:center;
  padding:clamp(22px,4.5vw,32px);border:1px solid var(--line);border-radius:16px;background:var(--panel2)}
.guided-compassion-invite .eyebrow{color:var(--gold2)}
.compassion-invite-lead{max-width:560px;margin:8px auto 10px;font:400 15.5px/1.6 var(--sans);color:var(--text)}
.compassion-invite-free{max-width:520px;margin:0 auto 18px}
.compassion-invite-actions{display:grid;gap:10px;max-width:420px;margin:0 auto}
.compassion-invite-terms{max-width:520px;margin:14px auto 0}

/* ============================================================================
   Consulta Guiada V2 — EDITORIAL refinement (Magnum Opus / Fase 5).
   Mystic-editorial + sophisticated neo-brutalism: expressive type, strong
   contrast, generous whitespace, discreet manuscript detailing. All still under
   .gr-v2 so V1 and other pages are untouched. No decorative clutter (no stars,
   crystal balls, nebulae); the only ornaments are a hairline rule and numerals.
   ========================================================================== */
/* Wider editorial canvas on desktop so the reading does not feel cramped. The
   container is roomy (full .content width), while the TEXT columns keep a
   comfortable ~66ch measure (see the prose cap below) so lines never get too long
   to read. Structural elements (header, spread, index) use the full width. */
.gr-v2{max-width:none;padding:12px 2px 8px}
/* Title lockup: eyebrow with a short rule, a strong serif title, question quote. */
.gr-v2-head{position:relative;margin:0 0 clamp(22px,4vw,34px);padding-bottom:18px;border-bottom:1px solid var(--line)}
.gr-v2-kicker{display:flex;align-items:center;gap:10px;font:600 12.5px/1.3 var(--sans);letter-spacing:.2em}
.gr-v2-kicker::before{content:"";width:26px;height:1px;background:var(--gold2);display:inline-block;flex:none}
.gr-v2-title{font:400 clamp(32px,6.8vw,48px)/1.06 var(--serif);letter-spacing:-.01em;margin:12px 0 18px;max-width:20ch}
/* The question preview, as a real editorial pull: eyebrow label + a large quote
   on a discreet panel with a manuscript quote mark. No longer a thin grey line. */
.gr-v2-question{position:relative;margin:0;padding:18px 22px 18px 26px;background:linear-gradient(180deg,rgba(241,210,143,.055),rgba(20,17,25,.1));border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 12px 12px 0}
.gr-v2-question::before{content:"\201C";position:absolute;left:10px;top:2px;font:400 44px/1 var(--serif);color:var(--gold);opacity:.5}
.gr-v2-question-label{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.gr-v2-question blockquote{margin:0;font:400 clamp(18px,2.2vw,22px)/1.5 var(--serif);color:#ece5d8}
.gr-v2-byline{margin-top:14px;font:600 12.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* READING MEASURE: the canvas is wide, but running text stays ~66ch so lines are
   comfortable to read. Headers/sections span the canvas; only the prose columns
   are capped. The cap is left-aligned (not centered) to keep the editorial axis. */
.gr-v2-prose,.gr-v2-answer-body,.gr-v2-lede,.gr-v2-qa-q,.gr-v2-spread-reason,.gr-v2-micro{max-width:66ch}
.gr-v2-compassion{max-width:72ch}
.gr-v2-prose p{max-width:66ch}
.gr-v2-question{max-width:70ch}
.gr-v2-answers,.gr-v2-answer{max-width:72ch}
.gr-v2-index{max-width:72ch}
/* Lede with an understated initial emphasis (not a heavy drop cap). */
.gr-v2-opening .gr-v2-lede{font:400 clamp(19px,2.8vw,22px)/1.65 var(--serif);color:#ece5d8}
.gr-v2-opening .gr-v2-lede::first-letter{font-size:1.5em;color:var(--gold2);font-weight:600}
/* Editorial section header: a quiet numeral + a hairline, no boxed cards. */
.gr-v2-section{position:relative;margin:0 0 clamp(30px,5vw,42px)}
.gr-v2-h{position:relative;font:400 clamp(24px,4vw,30px)/1.25 var(--serif);letter-spacing:-.005em;padding-top:14px;border-top:1px solid var(--line)}
.gr-v2-opening{border:0}
.gr-v2-opening .gr-v2-lede{padding-top:0}
.gr-v2-h3{font:600 15px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold2);margin:24px 0 8px}
/* Answer block: keep the anchored feel but lighter, editorial, not a chat card. */
.gr-v2-answer{border-radius:12px;background:linear-gradient(180deg,rgba(241,210,143,.05),rgba(20,17,25,.12))}
.gr-v2-trend{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
/* Pull-quote for a memorable, organically-generated highlight (§22). Used
   sparingly by the view; never a stock phrase. */
.gr-v2-pull{margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--gold2);
  font:400 clamp(20px,3.2vw,24px)/1.4 var(--serif);color:var(--gold2);letter-spacing:-.01em}
/* Desktop question index (anchor nav) for multi-question readings (§20). */
.gr-v2-index{margin:0 0 clamp(26px,4vw,36px);padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.gr-v2-index .eyebrow,.gr-v2-index-label{display:block;font:600 11.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.gr-v2-index ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.gr-v2-index li{display:flex;gap:10px;align-items:baseline}
.gr-v2-index .n{font:600 13px/1.4 var(--sans);color:var(--gold2);flex:none;min-width:1.4em}
.gr-v2-index a{color:var(--text);font:400 15px/1.45 var(--sans);border-bottom:1px solid transparent}
.gr-v2-index a:hover{border-bottom-color:var(--gold2);color:var(--gold2)}
/* Per-question answer entry in the editorial flow. */
.gr-v2-qa{scroll-margin-top:72px;margin:0 0 28px;padding:0 0 24px;border-bottom:1px solid var(--line)}
.gr-v2-qa:last-child{border-bottom:0;padding-bottom:0}
.gr-v2-qa-num{font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--gold);display:block;margin:0 0 6px}
.gr-v2-qa-q{font:400 clamp(19px,3vw,23px)/1.3 var(--serif);color:var(--text);margin:0 0 10px}
/* The card chip that binds a question to its drawn card (rev 3 integrated block).
   A quiet manuscript tag, with clear spacing between role and card name. */
.gr-v2-qa-card{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;font:400 13.5px/1.4 var(--sans)}
.gr-v2-qa-card .mi{font-size:17px;color:var(--gold)}
.gr-v2-qa-card-role{font:600 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gr-v2-qa-card-name{font:400 14.5px/1.3 var(--serif);color:var(--gold2);padding-left:8px;border-left:1px solid var(--line)}
/* Desktop editorial card composition: image + reading side by side. */
@media(min-width:760px){
  .gr-v2-spread[data-count="1"]{grid-template-columns:minmax(0,240px)}
  .gr-v2-card-editorial{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;margin:0 0 22px}
  .gr-v2-card-editorial .gr-v2-spread-card{max-width:150px}
}
/* Reveal animation, progressive enhancement, honoring reduced-motion. */
@media(prefers-reduced-motion:no-preference){
  .gr-v2.reveal-on .gr-v2-section,.gr-v2.reveal-on .gr-v2-index{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
  .gr-v2.reveal-on .gr-v2-section.is-in,.gr-v2.reveal-on .gr-v2-index.is-in{opacity:1;transform:none}
}
@media(max-width:560px){
  .gr-v2-title{font-size:clamp(28px,8vw,34px)}
  .gr-v2-index{padding:14px}
}
@media print{
  .gr-v2-index,.gr-v2-actions{display:none}
  .gr-v2 .gr-v2-section{break-inside:avoid}
}