/* ============================================================================
   RÉPLICA LOCAL — cartacanalizada.online
   CSS transcrito literalmente de /assets/styles-C-Ro3jds.css.

   A ORDEM DOS BLOCOS ABAIXO REPRODUZ A CASCATA DO ORIGINAL:
     1) reset / base            (era @layer base)
     2) tokens :root            (era sem camada, mas não conflita — vem cedo)
     3) componentes             (era @layer components)
     4) utilitários Tailwind    (era @layer utilities — vence "componentes")
     5) regras sem camada       (venciam TUDO no original)
     6) media queries mobile    (na MESMA ordem do arquivo original)

   ATENÇÃO: NÃO reordene as media queries. Várias regras do original só
   "perdem" por estarem antes de outras no arquivo (ex.: .headline nunca
   chega a 1.35rem em telas de 360px — o 1.42rem da media de 380px vence).
   ============================================================================ */

/* ---------------------------------------------------------------- 1. RESET */
*,::after,::before{box-sizing:border-box;border:0 solid;margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit;background:transparent;letter-spacing:inherit}
button{cursor:pointer;appearance:button}
a{color:inherit;text-decoration:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
textarea{resize:vertical}
[hidden]{display:none!important}
*{border-color:var(--border)}
html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;-webkit-tap-highlight-color:transparent;max-width:100vw;overflow-x:hidden}
body{background-color:var(--background);color:var(--foreground);font-family:var(--font-sans);max-width:100vw;min-height:100vh;font-weight:300;position:relative;overflow-x:hidden}
img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
::selection{color:var(--cream);background-color:#d5a13c4d}

/* ------------------------------------------------- 2. TOKENS (tema escuro) */
:root{
  --font-sans:"Montserrat",sans-serif;
  /* No CSS original --font-serif TAMBÉM aponta para Montserrat (bug do site). */
  --font-serif:"Montserrat",sans-serif;
  --radius:.625rem;
  --background:#1a0f2e;--foreground:#ede6f5;--card:#3c2a5e;--card-foreground:#ede6f5;
  --primary:#d4af6a;--primary-foreground:#1a0f2e;--secondary:#2a1b45;--secondary-foreground:#ede6f5;
  --muted:#2a1b45;--muted-foreground:#b9a9d0;--accent:#d4af6a;--accent-foreground:#1a0f2e;
  --gold:#d4af6a;--gold-deep:#b08f4a;--gold-soft:#c6b4e0;--ink:#1a0f2e;--cream:#ede6f5;--success:#7ecb9a;
  --destructive:#e62c2c;--destructive-foreground:#f8f8f8;
  --border:#d4af6a38;--input:#ede6f50f;--ring:#d4af6a80;
  --gradient-gold:linear-gradient(135deg, #e3c489, #b08f4a);
  --gradient-gold-line:linear-gradient(90deg, transparent, #d4af6a, transparent);
  --shadow-gold:0 10px 40px -10px #d4af6a59;
  --star-color:237, 230, 245
}
/* Tema claro do original — mantido por fidelidade (a réplica não tem toggle,
   igual ao site em produção, que também não renderiza o botão .theme-toggle). */
:root[data-theme=light]{
  --background:#f7f1e5;--foreground:#34251a;--card:#fcf8f0;--card-foreground:#34251a;
  --primary:#a76c12;--primary-foreground:#fcf8f0;--secondary:#ebe4d6;--secondary-foreground:#34251a;
  --muted:#ebe4d6;--muted-foreground:#64523d;--accent:#a76c12;--accent-foreground:#fcf8f0;
  --gold:#a76c12;--gold-deep:#894c06;--gold-soft:#765e44;--ink:#25170c;--cream:#34251a;--success:#007742;
  --border:#a76c1238;--input:#34251a0a;--ring:#a76c1266;
  --gradient-gold:linear-gradient(135deg, #b37903, #8e5300);
  --gradient-gold-line:linear-gradient(90deg, transparent, #a76c12, transparent);
  --shadow-gold:0 10px 40px -14px #8e530059;
  --star-color:168, 132, 58;
  --stars-opacity:.35
}
:root[data-theme=light] body{background:radial-gradient(1200px 800px at 50% -10%,#f8eace 0%,transparent 60%),var(--background)}

/* ---------------------------------------------------- 3. @keyframes do site */
@keyframes pulse-soft{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes fade-in-up{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes btn-pulse{0%,to{transform:scale(1);box-shadow:0 0 #d5a13c73}50%{transform:scale(1.025);box-shadow:0 0 0 14px #d5a13c00}}
@keyframes dot-blink{0%,to{opacity:1;box-shadow:0 0 #ff5f5f99}50%{opacity:.55;box-shadow:0 0 0 8px #ff5f5f00}}

/* ============================================================================
   4. COMPONENTES  (era @layer components — perde para utilitários e p/ o
      bloco "sem camada" mais abaixo, exatamente como no original)
   ============================================================================ */
.stars-bg{pointer-events:none;z-index:0;background:radial-gradient(1px 1px at 15% 20%,rgba(var(--star-color),.7) 0%,transparent 100%),radial-gradient(1px 1px at 30% 60%,rgba(var(--star-color),.5) 0%,transparent 100%),radial-gradient(1px 1px at 50% 15%,rgba(var(--star-color),.6) 0%,transparent 100%),radial-gradient(1px 1px at 70% 40%,rgba(var(--star-color),.4) 0%,transparent 100%),radial-gradient(1px 1px at 85% 70%,rgba(var(--star-color),.7) 0%,transparent 100%),radial-gradient(1px 1px at 20% 80%,rgba(var(--star-color),.5) 0%,transparent 100%),radial-gradient(1px 1px at 60% 85%,rgba(var(--star-color),.6) 0%,transparent 100%),radial-gradient(2px 2px at 90% 10%,rgba(var(--star-color),.8) 0%,transparent 100%),radial-gradient(1px 1px at 40% 45%,rgba(var(--star-color),.4) 0%,transparent 100%),radial-gradient(1px 1px at 75% 90%,rgba(var(--star-color),.5) 0%,transparent 100%);opacity:var(--stars-opacity,1);position:fixed;inset:0}
.gold-line{background:var(--gradient-gold-line);width:60px;height:1px;margin:1.125rem auto}
.headline{font-family:var(--font-serif);color:var(--cream);letter-spacing:.5px;font-size:clamp(2rem,5vw,2.4rem);font-weight:300;line-height:1.2}
.headline em{color:var(--gold);font-style:italic}
.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);font-size:.6875rem;font-weight:300}
.pain-block{text-align:left;background:#d5a13c0f;border:1px solid #d5a13c26;border-radius:.75rem;padding:1.75rem 1.5rem}
.pain-block p{font-family:var(--font-serif);color:#d7c9ae;margin-bottom:.875rem;font-size:1.1875rem;font-weight:300;line-height:1.75}
.pain-block p:last-child{margin-bottom:0}
.pain-block strong{color:var(--gold);font-weight:400}
.what-card{background:#ffffff08;border:1px solid #ffffff0f;border-radius:.625rem;align-items:flex-start;gap:.875rem;padding:1rem 1.125rem;display:flex}
.what-card .icon{flex-shrink:0;margin-top:2px;font-size:1.375rem}
.what-card .text{color:#ddd0b4;font-size:.9375rem;font-weight:300;line-height:1.7}
.what-card .text b{color:var(--gold);margin-bottom:4px;font-size:1rem;font-weight:500;display:block}
.urgency-bar{text-align:center;color:var(--gold);letter-spacing:.4px;background:linear-gradient(135deg,#d5a13c2e,#b478251f);border:1.5px solid #d5a13c80;border-radius:.625rem;padding:1.1rem 1.25rem;font-size:.9375rem;font-weight:500;animation:4s ease-in-out infinite pulse-soft;box-shadow:0 8px 28px -10px #d5a13c59}
.urgency-bar span{font-weight:700}
.form-label{letter-spacing:.02em;text-transform:none;color:var(--cream);margin-bottom:.5rem;font-size:1rem;font-weight:500;display:block}
.form-input{color:#361717;width:100%;font-family:var(--font-sans);background:#f8f1e3eb;border:1px solid #d5a13c59;border-radius:.5rem;outline:none;padding:1rem 1.1rem;font-size:1.05rem;font-weight:400;transition:border-color .3s,box-shadow .3s,background .3s}
.form-input:focus{background:#fff8ea;border-color:#b47825;box-shadow:0 0 0 3px #d5a13c2e}
::placeholder{opacity:1}
.form-input::placeholder{color:#6f6149;font-size:1rem;font-weight:400}
textarea.form-input{resize:none;min-height:120px;line-height:1.6}
.btn-gold{background:var(--gradient-gold);width:100%;color:var(--ink);font-family:var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:none;border-radius:.625rem;padding:1.0625rem 1.5rem;font-size:.875rem;font-weight:500;transition:transform .2s,opacity .2s,box-shadow .3s}
.btn-gold:hover{opacity:.92;box-shadow:var(--shadow-gold);transform:translateY(-1px)}
.btn-gold:active{transform:scale(.99)}
.step-title{font-family:var(--font-serif);color:var(--cream);letter-spacing:.2px;text-wrap:balance;max-width:22ch;margin-inline:auto;font-size:clamp(1.5rem,4.6vw,2rem);font-weight:400;line-height:1.28}
.step-title--wide{max-width:30ch}
.step-desc{color:#eaddc1;font-size:1.125rem;font-weight:400;line-height:1.7}
.checkout-box{background:#d5a13c0d;border:1px solid #d5a13c33;border-radius:.875rem;padding:1.75rem 1.5rem}
.order-row{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:.625rem 0;display:flex}
.order-row:last-child{border-bottom:none;padding-bottom:0}
.delivery-note{color:var(--success);background:#73ce9514;border:1px solid #73ce9533;border-radius:.625rem;align-items:flex-start;gap:.625rem;padding:.875rem 1.125rem;font-size:.8125rem;line-height:1.6;display:flex}
.trust-pill{color:var(--gold-soft);background:#ffffff0a;border:1px solid #ffffff12;border-radius:1.25rem;align-items:center;gap:.375rem;padding:.4375rem .8125rem;font-size:.75rem;font-weight:300;display:inline-flex}
.recap{color:var(--gold-soft);background:#ffffff08;border:1px solid #ffffff0d;border-radius:.625rem;padding:1rem 1.125rem;font-size:.8125rem;line-height:1.7}
.recap strong{color:var(--gold);font-weight:500}
.symbol-pulse{animation:3s ease-in-out infinite pulse-soft}
.depo-track{scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;gap:.875rem;padding-bottom:.25rem;display:flex;overflow-x:auto}
.depo-track:active{cursor:grabbing}
.depo-track::-webkit-scrollbar{display:none}
.depo-item{scroll-snap-align:start;background:var(--card);border:1px solid var(--border);border-radius:.9rem;flex:none;justify-content:center;align-items:center;width:240px;height:400px;padding:.75rem;display:flex;overflow:hidden;box-shadow:0 10px 28px -16px #000000b3}
.depo-item img{object-fit:contain;pointer-events:none;border-radius:.5rem;width:auto;max-width:100%;height:auto;max-height:100%;display:block}
.depo-dots{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.9rem;display:flex}
.depo-dot{background:var(--gold-soft);opacity:.35;cursor:pointer;border:none;border-radius:999px;width:8px;height:8px;transition:all .25s}
.depo-dot.is-active{opacity:1;background:var(--gold);width:22px}
/* Media query que no original está DENTRO do @layer components -> é totalmente
   anulada pelo bloco @media(max-width:640px) "sem camada" mais abaixo.
   Mantida aqui, na mesma posição, para replicar a cascata exata. */
@media(max-width:640px){.depo-item{width:min(78vw,300px);height:420px}}

/* ============================================================================
   5. UTILITÁRIOS (equivalentes às classes Tailwind usadas no markup)
      --spacing = .25rem
   ============================================================================ */
.relative{position:relative}
.z-10{z-index:10}
.mx-auto{margin-inline:auto}
.w-full{width:100%}
.max-w-\[600px\]{max-width:600px}
.px-5{padding-inline:1.25rem}
.min-h-screen{min-height:100vh}
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-center{justify-content:center}
.text-center{text-align:center}
.text-left{text-align:left}
.py-16{padding-block:4rem}
.py-12{padding-block:3rem}
.pt-2{padding-top:.5rem}
.pt-8{padding-top:2rem}
.pb-6{padding-bottom:1.5rem}
.pb-8{padding-bottom:2rem}
.pb-10{padding-bottom:2.5rem}
.pb-14{padding-bottom:3.5rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-2\.5{margin-bottom:.625rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-7{margin-bottom:1.75rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mt-2{margin-top:.5rem}
.mt-5{margin-top:1.25rem}
.gap-5{gap:1.25rem}
.gap-2\.5{gap:.625rem}
.h-24{height:6rem}
.w-32{width:8rem}
.text-xs{font-size:.75rem;line-height:1.3333}
/* .text-destructive NAO existe no CSS original: as mensagens de erro herdam --foreground (#ede6f5). Nao recriar. */
.text-\[var\(--gold\)\]{color:var(--gold)}
.text-\[var\(--gold-soft\)\]\/70{color:var(--gold-soft)}
@supports (color:color-mix(in lab,red,red)){
  .text-\[var\(--gold-soft\)\]\/70{color:color-mix(in oklab,var(--gold-soft) 70%,transparent)}
}

/* ============================================================================
   6. REGRAS SEM CAMADA — venciam tudo no original.
      Transcritas na MESMA ORDEM do arquivo styles-C-Ro3jds.css.
   ============================================================================ */
.animate-fade-in-up{animation:.8s both fade-in-up}
/* No original: filter:blur() (sem argumento — vale 0 pela spec). Escrevemos
   blur(0px) para garantir que nenhuma engine descarte a declaração e deixe
   os cards permanentemente desfocados. Visualmente idêntico. */
.reveal{opacity:0;filter:blur(6px);will-change:opacity,transform,filter;transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),filter 1.1s cubic-bezier(.16,1,.3,1);transform:translateY(34px)scale(.985)}
.reveal.is-visible{opacity:1;filter:blur(0px);transform:translateY(0)scale(1)}
.back-btn{color:var(--gold-soft);font-family:var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #d5a13c40;border-radius:999px;align-items:center;gap:.5rem;padding:.5rem .875rem;font-size:.7rem;font-weight:400;transition:all .25s;display:inline-flex}
.back-btn:hover{color:var(--gold);border-color:#d5a13c8c;transform:translate(-2px)}
.back-btn svg{width:14px;height:14px}
.exit-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#080000d9;justify-content:center;align-items:center;padding:1.25rem;animation:.45s both fade-in-up;display:flex;position:fixed;inset:0}
.exit-modal{text-align:center;background:linear-gradient(#1e0305,#170002);border:1px solid #d5a13c59;border-radius:1.125rem;width:100%;max-width:460px;padding:2.25rem 1.75rem 1.75rem;animation:.55s cubic-bezier(.16,1,.3,1) both fade-in-up;position:relative;box-shadow:0 30px 80px -20px #000000b3,0 0 0 1px #d5a13c14,inset 0 1px #d5a13c26}
.exit-modal:before{content:"";z-index:-1;filter:blur(12px);opacity:.7;background:linear-gradient(135deg,#d5a13c66,#0000 40%,#d5a13c40);border-radius:1.125rem;position:absolute;inset:-1px}
.exit-close{color:var(--gold-soft);opacity:.55;cursor:pointer;background:0 0;border:none;padding:.25rem .5rem;font-size:1.25rem;line-height:1;transition:opacity .2s;position:absolute;top:.75rem;right:.875rem}
.exit-close:hover{opacity:1}
.exit-eyebrow{font-family:var(--font-sans);letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:.875rem;font-size:.7rem}
.exit-title{font-family:var(--font-serif);color:var(--cream);margin-bottom:1rem;font-size:1.625rem;font-weight:300;line-height:1.25}
.exit-title em{color:var(--gold);font-style:italic}
.exit-text{color:#c2b6a2;margin-bottom:1.5rem;font-size:.875rem;font-weight:300;line-height:1.7}
.exit-text strong{color:var(--gold-soft);font-weight:500}
.exit-symbol{margin-bottom:.5rem;font-size:2rem;animation:3s ease-in-out infinite pulse-soft}
:root[data-theme=light] .what-card{background:#fffbf3d9;border-color:#a76c122e;box-shadow:0 1px #a76c120d,0 12px 30px -20px #5f40252e}
:root[data-theme=light] .what-card .text b{color:var(--ink)}
:root[data-theme=light] .pain-block{background:#fffbf3b3;border-color:#a76c122e}
:root[data-theme=light] .pain-block p{color:#3e2f23}
:root[data-theme=light] .urgency-bar{color:var(--gold-deep);background:#a76c1214;border-color:#a76c124d}
:root[data-theme=light] .form-input{color:#2c1e13;background:#fffffff2;border-color:#a76c124d}
:root[data-theme=light] .form-input:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px #a76c1226}
:root[data-theme=light] .checkout-box{background:#fffbf3d9;border-color:#a76c1238}
:root[data-theme=light] .order-row{border-bottom-color:#a76c121f}
:root[data-theme=light] .recap{color:#574331;background:#fffbf3b3;border-color:#a76c1226}
:root[data-theme=light] .trust-pill{color:var(--gold-deep);background:#fffbf3cc;border-color:#a76c122e}
:root[data-theme=light] .step-desc{color:#544438}
:root[data-theme=light] .headline,:root[data-theme=light] .step-title{color:var(--ink)}
:root[data-theme=light] .headline em{color:var(--gold-deep)}
:root[data-theme=light] .exit-overlay{background:#d8ccb8b3}
:root[data-theme=light] .exit-modal{background:linear-gradient(#fffbf3,#f7f1e5);border-color:#a76c1259;box-shadow:0 30px 80px -20px #5f402540,inset 0 1px #fff9}
:root[data-theme=light] .exit-title{color:var(--ink)}
:root[data-theme=light] .exit-text{color:#544438}
/* .theme-toggle existe no CSS original, mas o site NUNCA renderiza esse botão.
   Mantido por fidelidade de folha de estilo. */
.theme-toggle{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--gold);font-family:var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;background:#1e030599;border:1px solid #d5a13c4d;border-radius:999px;align-items:center;gap:.5rem;padding:.5rem .875rem .5rem .625rem;font-size:.68rem;font-weight:400;transition:all .3s;display:inline-flex;position:fixed;top:1rem;right:1rem;box-shadow:0 4px 18px -8px #0006}
.theme-toggle:hover{border-color:var(--gold);box-shadow:var(--shadow-gold);transform:translateY(-1px)}
.theme-toggle svg{width:16px;height:16px}
:root[data-theme=light] .theme-toggle{color:var(--gold-deep);background:#ffffffbf;border-color:#a76c1259;box-shadow:0 6px 20px -10px #5f40254d}

/* ---- MEDIA #8 (480px) ---- */
@media(max-width:480px){.theme-toggle{padding:.4rem .7rem .4rem .55rem;font-size:.62rem}}

.tarologa-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#23070880;border:1px solid #d5a13c40;border-radius:18px;align-items:flex-start;gap:1rem;padding:1.1rem;display:flex;box-shadow:0 10px 30px -18px #00000080}
.tarologa-photo{object-fit:cover;object-position:center top;border:2px solid var(--gold);width:96px;height:96px;box-shadow:0 0 0 3px #d5a13c26,var(--shadow-gold);border-radius:50%;flex-shrink:0}
.tarologa-name{font-family:var(--font-serif);color:var(--cream);letter-spacing:.5px;margin:0 0 .4rem;font-size:1.25rem}
.tarologa-bio{font-family:var(--font-sans);color:#c2b6a2;font-size:.82rem;font-weight:300;line-height:1.6}
:root[data-theme=light] .tarologa-card{background:#fffbf4d9;border-color:#a76c124d}
:root[data-theme=light] .tarologa-bio{color:#3e2f23}

/* ---- MEDIA #9 (420px) ---- */
@media(max-width:420px){
  .tarologa-card{text-align:center;flex-direction:column;align-items:center}
  /* Regra MORTA no original: a media de 480px (posterior) impõe 84px. */
  .tarologa-photo{width:110px;height:110px}
}

.bonus-box{background:linear-gradient(140deg,#d5a13c14,#23070880);border:1px dashed #d5a13c73;border-radius:16px;padding:1.2rem 1.1rem}
.bonus-intro{font-family:var(--font-sans);color:#cec2af;margin-bottom:.8rem;font-size:.85rem;font-weight:300;line-height:1.6}
.bonus-list{flex-direction:column;gap:.55rem;margin:0;padding:0;list-style:none;display:flex}
.bonus-list li{font-family:var(--font-sans);color:var(--cream);align-items:flex-start;gap:.55rem;font-size:.82rem;font-weight:300;line-height:1.55;display:flex}
.bonus-list li span{color:var(--gold);flex-shrink:0;margin-top:1px}
.price-old{font-family:var(--font-sans);color:#8a7f6cb3;font-size:.78rem;text-decoration:line-through #d5a13c99}
.launch-tag{font-family:var(--font-sans);letter-spacing:.5px;color:var(--gold);text-align:center;font-size:.7rem;font-style:italic;font-weight:300}
.guarantee-seal{background:#23070873;border:1px solid #d5a13c4d;border-radius:16px;align-items:center;gap:1rem;padding:1rem 1.1rem;display:flex}
.seal-badge{color:#281606;width:70px;height:70px;font-family:var(--font-serif);background:radial-gradient(circle at 30% 30%,#fac463,#bf8100);border:2px dashed #4e341f;border-radius:50%;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:flex;box-shadow:0 6px 20px -6px #d5a13c80,inset 0 0 0 4px #ffe0ac66}
.seal-label{letter-spacing:2px;font-size:.55rem;font-weight:600;font-family:var(--font-sans);margin-top:2px}
.seal-text{font-family:var(--font-sans);color:#c8bca9;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:300;line-height:1.55;display:flex}
.seal-text strong{color:var(--cream);font-weight:500}
:root[data-theme=light] .guarantee-seal{background:#fffbf4cc;border-color:#a76c1259}
:root[data-theme=light] .seal-text{color:#392a1e}
.checkout-title{font-family:var(--font-sans);color:var(--cream);letter-spacing:.4px;margin-bottom:.4rem;font-size:clamp(1.6rem,5vw,2rem);font-weight:600;line-height:1.25}
.checkout-subtitle{color:#d7c9ae;font-size:1rem;font-weight:300}
.offer-card{background:#2307088c;border:1px solid #d5a13c33;border-radius:16px;flex-direction:column;gap:.65rem;padding:1.3rem 1.25rem 1.1rem;transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;position:relative}
.offer-card--featured{border:2px solid var(--gold);background:linear-gradient(160deg,#d5a13c29,#23070899);transform:scale(1.015);box-shadow:0 18px 50px -18px #d5a13c73}
.offer-badge{background:var(--gradient-gold);color:var(--ink);font-family:var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:.3rem .85rem;font-size:.62rem;font-weight:700;position:absolute;top:-.7rem;left:50%;transform:translate(-50%);box-shadow:0 6px 16px -4px #d5a13c80}
.offer-headline{font-family:var(--font-sans);color:var(--cream);font-size:1.0625rem;font-weight:600;line-height:1.4}
.offer-desc{color:#d7c9ae;font-size:.9rem;font-weight:300;line-height:1.6}
.offer-desc strong{color:var(--gold);font-weight:500}
.offer-price{align-items:baseline;gap:.4rem;margin-top:.15rem;display:flex}
.offer-price .cur{font-family:var(--font-sans);color:var(--gold);font-size:1rem;font-weight:500}
.offer-price .val{font-family:var(--font-sans);color:var(--gold);font-size:2rem;font-weight:700;line-height:1}
.offer-btn{background:var(--gradient-gold);width:100%;color:var(--ink);font-family:var(--font-sans);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;border:none;border-radius:.625rem;margin-top:.35rem;padding:.95rem 1rem;font-size:.9rem;font-weight:600;transition:transform .2s,box-shadow .3s}
.offer-btn:hover{box-shadow:var(--shadow-gold);transform:translateY(-1px)}
.offer-btn--ghost{color:var(--gold);background:0 0;border:1.5px solid #d5a13c80}
.trust-badge{color:#c8b39c;text-align:center;opacity:.92;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;margin:.65rem 0 0;font-size:.72rem;line-height:1.3;display:flex}
.trust-stars{color:var(--gold);letter-spacing:.05em;font-size:.78rem}
:root[data-theme=light] .offer-card{background:#fffbf4e6;border-color:#a76c1240}
/* Código MORTO no original: perde para o !important de .offer-card--featured
   redeclarado mais abaixo. No tema claro o card destacado continua roxo. */
:root[data-theme=light] .offer-card--featured{border-color:var(--gold-deep);background:linear-gradient(160deg,#fff0d680,#fffbf4e6);box-shadow:0 18px 50px -18px #a76c124d}
:root[data-theme=light] .offer-headline{color:var(--ink)}
:root[data-theme=light] .offer-desc{color:#46372b}
:root[data-theme=light] .offer-price .cur,:root[data-theme=light] .offer-price .val{color:var(--gold-deep)}
:root[data-theme=light] .checkout-title{color:var(--ink)}
:root[data-theme=light] .checkout-subtitle{color:#544438}
:root[data-theme=light] .offer-btn--ghost{color:var(--gold-deep);border-color:#a76c1299}

/* ---- MEDIA #10 (480px) — bloco grande ---- */
@media(max-width:480px){
  .stars-bg{background-size:200% 200%}
  main>div.relative.z-10{padding-left:1rem;padding-right:1rem}
  .headline{font-size:1.55rem!important;line-height:1.2!important}
  .eyebrow{letter-spacing:.18em;font-size:.62rem!important}
  section{padding-top:2rem!important;padding-bottom:2rem!important}
  .tarologa-card{gap:.85rem;padding:.9rem}
  .tarologa-photo{width:84px;height:84px}
  .tarologa-name{font-size:1.1rem}
  .tarologa-bio{font-size:.78rem}
  .bonus-box{padding:1rem .9rem}
  .bonus-intro{font-size:.8rem}
  .checkout-box,.guarantee-seal{padding:1rem!important}
  .order-row{font-size:.78rem}
  .offer-card{padding:1.1rem .95rem}
  .offer-card--featured{transform:none}
  .offer-headline{font-size:.98rem}
  .offer-price .val{font-size:1.7rem}
  .offer-card--featured .offer-price .val{font-size:1.95rem}
  .checkout-title{font-size:1.5rem}
  .exit-modal{padding:1.75rem 1.25rem 1.25rem}
}

/* ---- MEDIA #11 (360px) ---- */
@media(max-width:360px){
  main>div.relative.z-10{padding-left:.85rem;padding-right:.85rem}
  /* Regra MORTA: a media de 380px (posterior) impõe 1.42rem. */
  .headline{font-size:1.35rem!important}
  .tarologa-photo{width:76px;height:76px}
}

.hero-image{width:100%;max-width:420px;box-shadow:var(--shadow-gold);object-fit:cover;border:1px solid #d5a13c40;border-radius:.875rem}
.btn-pulse{animation:2.2s ease-in-out infinite btn-pulse}
.what-card{align-items:center;gap:1.05rem;padding:1.25rem}
.what-card .icon{background:#d5a13c1f;border:1px solid #d5a13c59;border-radius:999px;place-items:center;width:46px;height:46px;margin-top:0;font-size:1.5rem;display:grid}
.what-card .text{color:#eaddc1;font-size:1.0625rem;font-weight:400;line-height:1.65}
.what-card .text b{letter-spacing:.2px;margin-bottom:6px;font-size:1.1875rem;font-weight:600}
:root[data-theme=light] .what-card .text{color:#392a1e}
.section-title{font-family:var(--font-sans);color:var(--cream);text-align:center;letter-spacing:.3px;font-size:clamp(1.35rem,4.5vw,1.75rem);font-weight:700;line-height:1.3}
:root[data-theme=light] .section-title{color:var(--ink)}
.checkout-hero,.step-image{aspect-ratio:1;object-fit:cover;width:100%;max-width:380px;box-shadow:var(--shadow-gold);border:1px solid #d5a13c4d;border-radius:1rem;margin:0 auto 1.5rem;display:block}

/* ---- MEDIA #12 (640px) ---- */
@media(max-width:640px){.checkout-hero,.step-image{border-radius:.85rem;max-width:100%}}

.offer-list{flex-direction:column;gap:.55rem;margin:.2rem 0 0;padding:0;list-style:none;display:flex}
.offer-list li{color:#f1e3c7;align-items:flex-start;gap:.6rem;font-size:1rem;font-weight:400;line-height:1.55;display:flex}
.offer-list li span.tick{color:var(--gold);flex-shrink:0;font-size:1rem}
:root[data-theme=light] .offer-list li{color:#392a1e}
.offer-headline{font-size:1.2rem}
.offer-desc{color:#eaddc1;font-size:1rem;font-weight:400}
.checkout-title{text-wrap:balance;max-width:18ch;margin-inline:auto;font-size:clamp(1.5rem,5.5vw,2.1rem)}
.checkout-subtitle{font-size:1.05rem}
.recap{font-size:1.05rem;line-height:1.6}
.tarologa-bio{font-size:.98rem;line-height:1.6}

/* ---- MEDIA #13 (480px) — ajuste fino (tudo anulado pela media #15) ---- */
@media(max-width:480px){
  .offer-headline{font-size:1.05rem}
  .offer-list li{font-size:.95rem}
  .what-card .text{font-size:1rem}
  .what-card .text b{font-size:1.1rem}
}

:root:not([data-theme=light]) body{background:radial-gradient(1100px 700px at 50% -10%,#2a1b45 0%,transparent 62%),var(--background)}
:root:not([data-theme=light]) .what-card,:root:not([data-theme=light]) .offer-card,:root:not([data-theme=light]) .guarantee-seal,:root:not([data-theme=light]) .tarologa-card,:root:not([data-theme=light]) .recap,:root:not([data-theme=light]) .checkout-box,:root:not([data-theme=light]) .pain-block,:root:not([data-theme=light]) .exit-modal{background:var(--card)}
@supports (color:color-mix(in lab,red,red)){
  :root:not([data-theme=light]) .what-card,:root:not([data-theme=light]) .offer-card,:root:not([data-theme=light]) .guarantee-seal,:root:not([data-theme=light]) .tarologa-card,:root:not([data-theme=light]) .recap,:root:not([data-theme=light]) .checkout-box,:root:not([data-theme=light]) .pain-block,:root:not([data-theme=light]) .exit-modal{background:color-mix(in srgb,var(--card) 82%,#12081f)}
}
:root:not([data-theme=light]) .what-card,:root:not([data-theme=light]) .offer-card,:root:not([data-theme=light]) .guarantee-seal,:root:not([data-theme=light]) .tarologa-card,:root:not([data-theme=light]) .recap,:root:not([data-theme=light]) .checkout-box,:root:not([data-theme=light]) .pain-block,:root:not([data-theme=light]) .exit-modal{border-color:#d4af6a47}
:root:not([data-theme=light]) .what-card .text,:root:not([data-theme=light]) .offer-list li,:root:not([data-theme=light]) .pain-block p,:root:not([data-theme=light]) .offer-desc,:root:not([data-theme=light]) .seal-text{color:var(--cream)}
:root:not([data-theme=light]) .trust-pill{background:var(--card)}
@supports (color:color-mix(in lab,red,red)){
  :root:not([data-theme=light]) .trust-pill{background:color-mix(in srgb,var(--card) 70%,transparent)}
}
:root:not([data-theme=light]) .trust-pill{color:var(--cream)}
.what-card .thumb{object-fit:cover;border:1px solid #d4af6a73;border-radius:14px;flex-shrink:0;width:78px;height:78px;box-shadow:0 8px 22px -12px #d4af6a99}

/* ---- MEDIA #14 (480px) ---- */
@media(max-width:480px){.what-card .thumb{border-radius:12px;width:62px;height:62px}}

.urgency-bar{justify-content:center;align-items:center;gap:.6rem;display:flex;color:var(--cream)!important;background:linear-gradient(135deg,#d4af6a29,#3c2a5e99)!important;border:1.5px solid #d4af6a8c!important;font-size:1.02rem!important;animation:none!important}
.urgency-bar span{color:var(--gold)}
.urgency-dot{background:#ff5f5f;border-radius:50%;flex-shrink:0;width:10px;height:10px;animation:1.4s ease-in-out infinite dot-blink;box-shadow:0 0 #ff5f5fb3}
.offer-card--featured{border:2px solid var(--gold)!important;background:linear-gradient(165deg,#4a3372,#2a1b45)!important;box-shadow:0 22px 60px -20px #d4af6a8c!important}
.offer-card--simple{background:#2a1b458c!important;border:1px solid #ede6f524!important}
.offer-title{font-family:var(--font-sans);color:var(--gold);letter-spacing:.2px;margin-top:.35rem;font-size:clamp(1.5rem,5.4vw,1.9rem);font-weight:800;line-height:1.2}
.offer-card--simple .offer-title{color:var(--cream);font-size:clamp(1.3rem,4.6vw,1.6rem);font-weight:700}
.offer-highlight{color:#ede6f5;background:#25d36624;border:1px solid #25d36680;border-radius:.7rem;align-items:center;gap:.55rem;margin-top:.35rem;padding:.75rem .9rem;font-size:1rem;font-weight:600;line-height:1.35;display:flex}
.offer-highlight svg{color:#25d366;flex-shrink:0}
.offer-badge{padding:.38rem 1rem!important;font-size:.72rem!important}
.guarantee-seal{gap:1.15rem;padding:1.15rem 1.2rem}
.seal-badge{color:#1a0f2e;background:radial-gradient(circle at 32% 28%,#f0dca8,#b08f4a 70%);border:none;width:92px;height:92px;position:relative;box-shadow:0 10px 26px -8px #d4af6a99,inset 0 0 0 2px #1a0f2e59,inset 0 0 0 6px #f0dca88c}
.seal-badge:before{content:"";border:1px solid #d4af6a8c;border-radius:50%;position:absolute;inset:-7px}
.seal-num{font-size:2rem;font-weight:800}
.seal-label{letter-spacing:3px;font-size:.58rem;font-weight:700}
.seal-text{font-size:.95rem}
.seal-text strong{color:var(--gold);font-size:1.05rem;font-weight:700}
.section-title{letter-spacing:.3px;font-size:clamp(1.45rem,4.6vw,1.9rem);font-weight:600}
.what-card{gap:1.15rem;padding:1.6rem 1.5rem}
.what-card .text{text-align:left;line-height:1.75}
.what-card .text b{margin-bottom:.5rem;font-weight:700}
.pain-block{padding:2rem 1.75rem}
.tarologa-card{padding:1.6rem 1.4rem}
.tarologa-bio{text-align:left}
.recap{padding:1.25rem}
.offer-card{text-align:left;gap:1rem;padding:1.9rem 1.5rem 1.6rem}
.offer-list{gap:1rem;margin-top:.35rem}
.offer-list li{line-height:1.6}
.offer-price{margin-top:.5rem}
.offer-price .val{letter-spacing:-.5px;font-size:2.6rem}
.offer-card--featured .offer-price .val{font-size:3rem}
.btn-gold,.offer-btn{background:var(--gold);color:#2a1b08;letter-spacing:.6px;padding:1.15rem 1.5rem;font-weight:700}
.btn-gold:hover,.offer-btn:hover{background:var(--gold-deep);color:#1c1205;opacity:1}
.offer-btn--ghost,.offer-btn--ghost:hover{color:var(--gold);border:2px solid var(--gold);background:0 0;font-weight:600}
.offer-btn--ghost:hover{background:#d4af6a1f}
.faq-section{margin-top:3rem;margin-bottom:3rem}
.faq-list{flex-direction:column;gap:.85rem;display:flex}
.faq-item{border:1px solid var(--border);background:var(--card);border-radius:.9rem}
@supports (color:color-mix(in lab,red,red)){.faq-item{background:color-mix(in srgb,var(--card) 82%,#12081f)}}
.faq-item{transition:border-color .25s;overflow:hidden}
:root[data-theme=light] .faq-item{background:var(--card)}
.faq-item.is-open{border-color:var(--gold)}
.faq-question{cursor:pointer;text-align:left;width:100%;font-family:var(--font-sans);color:var(--cream);background:0 0;border:none;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.35rem;font-size:1.05rem;font-weight:600;line-height:1.45;display:flex}
.faq-icon{color:var(--gold);flex-shrink:0;font-size:1.6rem;line-height:1}
.faq-answer{grid-template-rows:0fr;transition:grid-template-rows .32s;display:grid}
.faq-item.is-open .faq-answer{grid-template-rows:1fr}
.faq-answer>p{color:var(--muted-foreground);margin:0;padding:0 1.35rem;font-size:1rem;line-height:1.75;transition:padding .32s;overflow:hidden}
.faq-item.is-open .faq-answer>p{padding:0 1.35rem 1.35rem}
.site-footer{z-index:10;background:var(--background);margin-top:3.5rem;position:relative}
@supports (color:color-mix(in lab,red,red)){.site-footer{background:color-mix(in srgb,var(--background) 70%,#000)}}
.site-footer{border-top:1px solid var(--border)}
:root[data-theme=light] .site-footer{background:var(--background)}
@supports (color:color-mix(in lab,red,red)){:root[data-theme=light] .site-footer{background:color-mix(in srgb,var(--background) 85%,#000)}}
.site-footer-inner{text-align:center;flex-direction:column;gap:.6rem;max-width:600px;margin-inline:auto;padding:2.75rem 1.25rem 3rem;display:flex}
.footer-brand{color:var(--gold-soft);letter-spacing:.4px;font-size:.9rem;font-weight:600}
.footer-text{color:var(--muted-foreground);font-size:.8rem}
.footer-links{color:var(--muted-foreground);justify-content:center;gap:.5rem;font-size:.8rem;display:flex}
.footer-links a{color:var(--muted-foreground);text-underline-offset:3px;text-decoration:underline}
.footer-links a:hover{color:var(--gold)}

/* ---- MEDIA #15 (640px) — BLOCO MESTRE MOBILE ---- */
@media(max-width:640px){
  .depo-track{align-items:flex-start;gap:.6rem;padding-bottom:.15rem}
  .pain-block p{margin-bottom:.7rem;font-size:1rem;line-height:1.65}
  .depo-item{border-radius:.85rem;width:calc(100vw - 2.25rem);max-width:420px;height:auto;padding:.75rem}
  .depo-item img{object-fit:contain;width:100%;max-width:100%;height:auto;max-height:62vh}
  .depo-dots{gap:.4rem;margin-top:.55rem}
  .section-title{line-height:1.28;font-size:1.45rem!important}
  .headline{font-size:1.6rem!important;line-height:1.22!important}
  .checkout-title{line-height:1.25;font-size:1.55rem!important}
  .eyebrow{font-size:.66rem!important}
  .offer-headline,.tarologa-name{font-size:1.15rem}
  .faq-question{padding:1rem 1.05rem;font-size:1rem}
  .faq-answer>p{padding:0 1.05rem;font-size:.95rem;line-height:1.65}
  .faq-item.is-open .faq-answer>p{padding:0 1.05rem 1.05rem}
  .what-card .text b{font-size:1.0625rem}
  .what-card .text,.offer-list li,.offer-desc,.recap,.tarologa-bio,.checkout-subtitle,.seal-text{line-height:1.6;font-size:.95rem!important}
  .bonus-intro,.order-row,.footer-text,.footer-links{font-size:.85rem}
  section{padding-top:1.75rem!important;padding-bottom:1.75rem!important}
  .faq-section{margin-top:2rem;margin-bottom:2rem}
  .site-footer{margin-top:2.25rem}
  .site-footer-inner{gap:.45rem;padding:1.75rem 1.15rem 2rem}
  .what-card{gap:.85rem;padding:1.05rem 1rem}
  .pain-block{padding:1.25rem 1.1rem}
  .recap{padding:1rem}
  .tarologa-card{gap:.9rem;padding:1.1rem 1rem}
  .bonus-box{padding:1rem .9rem}
  .faq-list{gap:.6rem}
  .offer-card{gap:.7rem;padding:1.2rem 1.05rem 1.1rem}
  .offer-list{gap:.55rem}
  .offer-price .val{font-size:2.1rem}
  .offer-card--featured .offer-price .val{font-size:2.35rem}
  /* Alvo de toque de 48px — única garantia de touch target do site. */
  .btn-gold,.offer-btn{letter-spacing:.4px;min-height:48px;padding:.85rem 1.1rem;font-size:.92rem}
  .checkout-hero,.step-image{aspect-ratio:4/3}
  .checkout-hero,.step-image,.hero-image{margin-bottom:1rem}
  .guarantee-seal{padding:1rem!important}
  .seal-num{font-size:1.7rem}
}

/* ---- MEDIA #16 (380px) ---- */
@media(max-width:380px){
  .section-title{font-size:1.32rem!important}
  .headline{font-size:1.42rem!important}
  .checkout-title{font-size:1.4rem!important}
  .depo-item{width:calc(100vw - 2rem)}
}

/* ---- MEDIA #17 (640px) — ÚLTIMO BLOCO: formulários + scrollbar ---- */
@media(max-width:640px){
  html,body{scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar{width:0;height:0;display:none}
  body::-webkit-scrollbar{width:0;height:0;display:none}
  .step-title{font-size:1.45rem!important;line-height:1.28!important}
  .step-title--wide{font-size:1.35rem!important}
  .step-desc{font-size:.95rem!important;line-height:1.55!important}
  .form-label{margin-bottom:.3rem!important;font-size:.85rem!important}
  /* font-size 1rem (=16px) impede o zoom automático do Safari iOS no focus. */
  .form-input{border-radius:.7rem!important;padding:.8rem .9rem!important;font-size:1rem!important}
  textarea.form-input{min-height:120px}
  .urgency-bar{padding:.8rem .9rem!important;font-size:.9rem!important}
  .urgency-bar span{font-size:.9rem!important}
  .pain-block p{font-size:.97rem!important}
  .what-card .thumb{width:58px!important;height:58px!important}
  .back-btn{font-size:.82rem!important}
  .hero-image{aspect-ratio:4/3}
  section{padding-top:1.5rem!important;padding-bottom:1.75rem!important}
  section.min-h-screen{min-height:auto!important}
}

/* ============================================================================
   7. AUXILIAR EXCLUSIVO DA RÉPLICA
   O React montava/desmontava cada <section> conforme a etapa. Aqui todas as
   etapas existem no DOM e são alternadas por display:none.
   ============================================================================ */
.is-hidden{display:none!important}
/* LP tarot: a mensagem de erro do formulario aparece em vermelho claro (no original ficava invisivel) */
.text-destructive{color:#ff8a8a!important}