/* =====================================================================
   Nature Brazil — sistema visual do painel e do admin
   Direção: luxo preto + dourado; cada plano tem a cor da sua gema.
   A cor do plano atual (--p1/--p2/--p3) tinge o painel inteiro.
   ===================================================================== */
:root{
  --bg:#050403;--bg2:#0b0907;--card:#0d0b08;--card2:#15120d;
  --gold:#cda449;--gold2:#e8cf8a;--gold3:#fff1c9;
  --text:#f4efe3;--muted:#a59d8d;--faint:#6f685c;
  --line:rgba(205,164,73,.28);--soft:rgba(255,255,255,.07);
  --green:#3ddc84;--red:#ff6b6b;--amber:#f5b94f;--blue:#6aa8ff;
  /* cor do plano atual (padrão: ouro) */
  --p1:#f3c76a;--p2:#b07a12;--p3:#fff1c9;--pglow:rgba(243,199,106,.35);
  --r:20px;--ease:cubic-bezier(.2,.7,.2,1);
}
/* paletas das gemas — usadas em [data-gem] */
[data-gem="esmeralda"]{--p1:#3fe39a;--p2:#0b7a4b;--p3:#c9ffe6;--pglow:rgba(63,227,154,.35)}
[data-gem="safira"]{--p1:#6aa8ff;--p2:#1c3fb8;--p3:#d6e6ff;--pglow:rgba(106,168,255,.38)}
[data-gem="ouro"]{--p1:#f3c76a;--p2:#b07a12;--p3:#fff1c9;--pglow:rgba(243,199,106,.38)}
[data-gem="diamante"]{--p1:#c9f1ff;--p2:#7b6cff;--p3:#ffffff;--pglow:rgba(170,200,255,.45)}
[data-gem="none"]{--p1:#e2bf6e;--p2:#4a360f;--p3:#fff1c9;--pglow:rgba(205,164,73,.25)}

*{box-sizing:border-box;margin:0}
html{height:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Segoe UI",Arial,Helvetica,sans-serif;line-height:1.5;min-height:100%;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* atmosfera: brilho da gema do plano + dourado + textura sutil */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% -8%,var(--pglow),transparent 60%),
    radial-gradient(700px 500px at -10% 30%,rgba(205,164,73,.09),transparent 60%),
    radial-gradient(800px 600px at 50% 120%,rgba(205,164,73,.07),transparent 60%),
    linear-gradient(180deg,#070604,#030302);transition:background .8s}
h1,h2,h3,.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
::selection{background:rgba(205,164,73,.35)}
/* barras de rolagem escuras (sem a barra branca padrão do navegador) */
*{scrollbar-width:thin;scrollbar-color:rgba(205,164,73,.35) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(205,164,73,.3);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(205,164,73,.5)}
::-webkit-scrollbar-corner{background:transparent}

/* ---------- topo ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(5,4,3,.72);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(205,164,73,.16)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--p1),transparent);opacity:.55}
.top .in{max-width:1240px;margin:0 auto;padding:0 20px;height:70px;display:flex;align-items:center;gap:18px}
.logo-site{height:46px;width:auto;display:block;filter:drop-shadow(0 4px 14px rgba(205,164,73,.25))}
/* logo "N" + nome da marca no estilo das artes (NATURE / B R A Z I L) */
.logo-wrap{display:flex;align-items:center;gap:10px;flex:none}
.wm{display:flex;flex-direction:column;align-items:center;font-family:Georgia,'Times New Roman',serif;text-transform:uppercase;line-height:1;
  font-size:18px;letter-spacing:.08em;background:linear-gradient(180deg,var(--gold3) 10%,var(--gold2) 45%,#b8862b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wm small{font-size:8.5px;letter-spacing:.62em;margin:5px -.62em 0 0;font-family:Georgia,serif}
.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;color:var(--gold);font-size:21px;white-space:nowrap}
.brand::before{content:"";width:30px;height:30px;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,var(--gold2),var(--gold),#7a5a1c,var(--gold2));box-shadow:0 0 18px rgba(205,164,73,.35)}
.tabs{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.03);border:1px solid var(--soft)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:13.5px;white-space:nowrap;
  color:var(--muted);transition:color .2s,background .25s}
.tabs a svg.i{width:16px;height:16px}
.tabs a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.tabs a.on{color:#241703;background:linear-gradient(180deg,var(--gold3) -40%,var(--gold2) 20%,var(--gold));
  box-shadow:0 4px 16px rgba(205,164,73,.3),inset 0 1px 0 rgba(255,255,255,.5)}

/* ---------- layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:30px 20px 70px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head h1{font-size:clamp(28px,3.4vw,38px);line-height:1.15}
.head p{margin-top:6px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold);letter-spacing:.18em;font-size:11.5px;text-transform:uppercase;margin-bottom:6px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.sec{margin-top:18px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.muted{color:var(--muted);font-size:13px}
.gold-t{color:var(--gold2)}
[data-tab]:not([hidden]){animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- cards ---------- */
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)) ,var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:22px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px -24px rgba(0,0,0,.8)}
.card h3{font-size:19px;color:var(--gold2);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.card h3 svg.i{color:var(--gold)}
.k{color:var(--muted);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.v{font:400 30px Georgia,serif;color:var(--text);margin:6px 0 4px;word-break:break-word;font-variant-numeric:tabular-nums}
.v small{font:600 13px "Segoe UI",Arial,sans-serif;color:var(--muted);margin-left:6px;letter-spacing:.04em}
.v.sm{font-size:22px}

/* cartões de estatística com ícone e acento */
.stat{transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.stat:hover{transform:translateY(-4px);border-color:rgba(205,164,73,.55);box-shadow:0 24px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(205,164,73,.08)}
.stat .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;color:var(--c,var(--gold2));
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 60%),color-mix(in srgb,var(--c,var(--gold)) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--gold)) 35%,transparent)}
.stat .ic svg.i{width:20px;height:20px}
.stat::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c,var(--gold)) 22%,transparent),transparent 70%);pointer-events:none}
.stat.green{--c:var(--green)}.stat.blue{--c:var(--blue)}.stat.amber{--c:var(--amber)}.stat.plan{--c:var(--p1)}

/* ---------- cartão premium do plano (hero) ---------- */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-bottom:16px}
.pcard{position:relative;border-radius:26px;padding:28px;min-height:250px;overflow:hidden;isolation:isolate;color:#fff;
  background:
    radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--p1) 55%,transparent),transparent 55%),
    radial-gradient(90% 120% at 0% 100%,color-mix(in srgb,var(--p2) 75%,transparent),transparent 60%),
    linear-gradient(135deg,color-mix(in srgb,var(--p2) 70%,#000),#0a0806 70%);
  border:1px solid color-mix(in srgb,var(--p1) 45%,transparent);
  box-shadow:0 30px 70px -30px var(--pglow),inset 0 1px 0 rgba(255,255,255,.18)}
.pcard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.03) 22px 23px)}
.pcard::after{content:"";position:absolute;top:-60%;left:-30%;width:45%;height:220%;z-index:-1;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-40%}85%,100%{left:130%}}
.pcard .lbl{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.pcard .name{font:400 clamp(34px,4.4vw,50px) Georgia,serif;line-height:1.05;margin:8px 0 4px;
  background:linear-gradient(180deg,#fff 20%,var(--p3) 60%,var(--p1));-webkit-background-clip:text;background-clip:text;color:transparent}
.pcard .gem-xl{position:absolute;right:22px;top:20px;width:118px;height:100px;filter:drop-shadow(0 10px 28px var(--pglow));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.pcard .meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px}
.pcard .meta b{display:block;font:400 22px Georgia,serif}
.pcard .meta span{font-size:12px;opacity:.75;letter-spacing:.04em}
.pbar{height:10px;border-radius:10px;background:rgba(0,0,0,.35);margin:18px 0 8px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.pbar i{display:block;height:100%;width:0;border-radius:inherit;transition:width 1.4s var(--ease);
  background:linear-gradient(90deg,var(--p2),var(--p1),var(--p3));box-shadow:0 0 18px var(--pglow)}
.pcard .next{font-size:13px;opacity:.9}
.pcard .btn{margin-top:14px}

/* ---------- gemas (SVG) ---------- */
.gem{width:56px;height:48px;display:block}
.gem .f1{fill:var(--p1)}.gem .f2{fill:var(--p2)}.gem .f3{fill:var(--p3)}
.gem .hl{fill:#fff;opacity:.55}.gem .ln{fill:none;stroke:rgba(255,255,255,.45);stroke-width:.8}

/* ---------- jornada dos planos ---------- */
.journey{position:relative;padding:8px 6px 4px}
.journey .track{position:absolute;left:34px;right:34px;top:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.08)}
.journey .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;transition:width 1.6s var(--ease);
  background:linear-gradient(90deg,#3fe39a,#6aa8ff,#f3c76a,#c9f1ff);box-shadow:0 0 14px rgba(243,199,106,.35)}
.journey .nodes{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr)}
.jn{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.jn .dot{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#0d0b08;
  border:1px solid rgba(255,255,255,.12);transition:.4s var(--ease)}
.jn .dot .gem{width:32px;height:28px;opacity:.55;filter:grayscale(.35)}
.jn.done .dot{border-color:color-mix(in srgb,var(--p1) 60%,transparent);box-shadow:0 0 22px -4px var(--pglow)}
.jn.done .dot .gem{opacity:1;filter:none}
.jn.cur .dot{transform:scale(1.12);border:2px solid var(--p1);box-shadow:0 0 0 6px color-mix(in srgb,var(--p1) 14%,transparent),0 0 30px var(--pglow)}
.jn b{font:400 15px Georgia,serif;color:var(--text)}
.jn span{font-size:11.5px;color:var(--muted)}

/* ---------- botões ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:999px;
  font-weight:600;font-size:14px;border:1.5px solid rgba(205,164,73,.7);cursor:pointer;background:rgba(205,164,73,.04);color:var(--gold2);
  transition:transform .2s var(--ease),box-shadow .25s,background .2s,border-color .2s;overflow:hidden;white-space:nowrap}
.btn:hover{background:rgba(205,164,73,.12);border-color:var(--gold)}
.btn:active{transform:scale(.97)}
.btn.gold{border-color:transparent;color:#241703;
  background:linear-gradient(180deg,var(--gold3) -30%,var(--gold2) 25%,var(--gold) 70%,#a9822f);
  box-shadow:0 8px 24px -8px rgba(205,164,73,.6),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .7s var(--ease)}
.btn.gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(205,164,73,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.gold:hover::after{left:130%}
.btn.gem-btn{border-color:transparent;color:#0b0907;background:linear-gradient(180deg,var(--p3) -40%,var(--p1) 40%,var(--p2) 140%);
  box-shadow:0 10px 26px -10px var(--pglow),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.gem-btn:hover{transform:translateY(-2px)}
.btn.sm{padding:7px 14px;font-size:12.5px}
.btn.red{border-color:rgba(255,107,107,.6);color:var(--red);background:rgba(255,107,107,.05)}
.btn.red:hover{background:rgba(255,107,107,.12)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none}

/* ---------- formulários ---------- */
label{display:block;font-size:12.5px;color:var(--muted);margin:12px 0 6px;letter-spacing:.03em}
input,select,textarea{width:100%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 15px;
  outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.18)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(205,164,73,.14);background:rgba(0,0,0,.6)}
select option{background:#14110c}
.money-in{position:relative}
.money-in input{font:400 26px Georgia,serif;padding:14px 80px 14px 16px;letter-spacing:.01em}
.money-in span{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.08em}
.form{display:grid;gap:2px;max-width:480px}
.msg{font-size:13px;margin-top:10px;min-height:18px}
.msg.err{color:var(--red)}.msg.ok{color:var(--green)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{padding:6px 12px;border-radius:999px;font-size:12.5px;border:1px solid var(--soft);background:rgba(255,255,255,.03);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--gold);color:var(--gold2)}

/* ---------- tabelas ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -6px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
th{color:var(--faint);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:10px;
  border-bottom:1px solid var(--soft);white-space:nowrap}
td{padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.045);white-space:nowrap;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr,table tr{transition:background .2s}
tr:hover td{background:rgba(205,164,73,.035)}
.num{text-align:right;font-variant-numeric:tabular-nums}
td.pos{color:var(--green)}td.neg{color:#ff9b9b}
.who{display:flex;align-items:center;gap:10px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#1b1206;flex:none;
  background:linear-gradient(135deg,var(--gold2),var(--gold))}

/* ---------- estado vazio ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:var(--muted);padding:34px 10px;font-size:14px}
.empty svg.i{width:38px;height:38px;color:var(--gold);opacity:.55;stroke-width:1.2}
.empty b{color:var(--text);font-weight:600}

/* ---------- selos de status ---------- */
.st{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 9px;border-radius:999px;font-size:12px;font-weight:600;
  color:var(--sc);background:color-mix(in srgb,var(--sc) 12%,transparent);border:1px solid color-mix(in srgb,var(--sc) 30%,transparent)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.st.ok{--sc:var(--green)}.st.wait{--sc:var(--amber)}.st.bad{--sc:var(--red)}.st.neu{--sc:#9a9384}.st.wait::before{animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}

/* ---------- planos (cartões de gema) ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plan{position:relative;text-align:left;cursor:pointer;border-radius:24px;padding:24px 20px 20px;overflow:hidden;isolation:isolate;
  background:radial-gradient(130% 90% at 50% -10%,color-mix(in srgb,var(--p1) 22%,transparent),transparent 60%),var(--card);
  border:1px solid color-mix(in srgb,var(--p1) 30%,transparent);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.plan::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--p1) 30%,transparent),transparent 70%)}
.plan:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--p1) 70%,transparent);box-shadow:0 30px 60px -28px var(--pglow)}
.plan:hover::before{opacity:1}
.plan:hover .gem{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
.plan .gem{width:74px;height:62px;margin-bottom:16px;transition:transform .5s var(--ease);filter:drop-shadow(0 8px 20px var(--pglow))}
.plan .pn{font:400 26px Georgia,serif;color:var(--p1);display:block;line-height:1.1}
.plan .tier{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.plan .price{font:400 24px Georgia,serif;color:var(--text);margin:14px 0 2px}
.plan .price small{font:600 12px "Segoe UI",Arial;color:var(--p1);letter-spacing:.06em;margin-left:4px}
.plan .range{font-size:12.5px;color:var(--muted)}
.plan .desc{font-size:13px;color:#cfc8b9;margin-top:12px}
.plan .cta{margin-top:18px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--p1)}
.plan .cta svg.i{transition:transform .3s}
.plan:hover .cta svg.i{transform:translateX(4px)}
.plan.on{border:2px solid var(--p1);box-shadow:0 0 0 6px color-mix(in srgb,var(--p1) 10%,transparent),0 30px 60px -28px var(--pglow)}
.plan.off{opacity:.42;filter:saturate(.4);cursor:not-allowed}
.plan.off:hover{transform:none;box-shadow:none}
.ribbon{position:absolute;top:16px;right:-34px;transform:rotate(45deg);padding:5px 40px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#0b0907;background:linear-gradient(90deg,var(--p3),var(--p1));box-shadow:0 4px 14px var(--pglow)}

/* checkout */
.checkout{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.checkout .side{border-left:1px solid var(--soft);padding-left:26px}
.steps{list-style:none;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:#d4cdbf;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  color:var(--p1);border:1px solid color-mix(in srgb,var(--p1) 50%,transparent);background:color-mix(in srgb,var(--p1) 10%,transparent)}
.qr{max-width:190px;border-radius:14px;background:#fff;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.secure{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:12px}
.secure svg.i{color:var(--green);width:16px;height:16px}

/* produtos */
.prod{display:flex;flex-direction:column;gap:10px;padding:0;transition:transform .35s var(--ease),border-color .3s}
.prod:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--p1) 60%,transparent)}
.prod .ph{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--p1) 30%,transparent),transparent 60%),linear-gradient(135deg,var(--p2),#0b0907)}
.prod .ph img{width:100%;height:100%;object-fit:cover}
.prod .ph .gem{width:64px;height:54px;opacity:.9}
.prod .bd{padding:4px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod .bd h3{margin:0}
.prod.lock .ph{filter:grayscale(1) brightness(.5)}
.prod.lock{opacity:.7}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;color:var(--p1);
  border:1px solid color-mix(in srgb,var(--p1) 40%,transparent);background:color-mix(in srgb,var(--p1) 10%,transparent);width:max-content}
.tag svg.i{width:14px;height:14px}

/* rede */
.lvl{text-align:left}
.lvl .ring{--pct:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px;
  background:conic-gradient(var(--gold2) calc(var(--pct)*1%),rgba(255,255,255,.08) 0)}
.lvl .ring span{width:52px;height:52px;border-radius:50%;background:var(--card);display:grid;place-items:center;font:400 20px Georgia,serif;color:var(--gold2)}

/* indicação */
.copy{display:flex;gap:8px}
.copy input{font-family:Consolas,monospace;font-size:13px;color:var(--gold2)}
.refcard{background:radial-gradient(120% 120% at 100% 0%,rgba(205,164,73,.16),transparent 60%),var(--card)}
.code{font:700 22px Consolas,monospace;letter-spacing:.18em;color:var(--gold2);padding:10px 16px;border-radius:12px;display:inline-block;
  border:1px dashed rgba(205,164,73,.5);background:rgba(205,164,73,.06)}

/* coleção da marca (imagens dos produtos) */
.collection{display:grid;grid-template-columns:1.25fr 1fr 1fr .694fr;gap:14px;align-items:start}
.col-intro{display:flex;flex-direction:column;justify-content:center;gap:10px}
.col-intro .ingr{font-size:12px;color:var(--gold);letter-spacing:.04em}
.shot{position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1;isolation:isolate;
  background:#0b0907;transition:transform .45s var(--ease),border-color .3s,box-shadow .45s}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.88));z-index:0}
.shot.tall{aspect-ratio:310/447}
.shot .cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:1}
.shot .cap b{display:block;font:400 19px Georgia,serif;color:var(--gold2)}
.shot .cap span{font-size:12px;color:#ddd5c4}
.shot:hover{transform:translateY(-5px);border-color:rgba(205,164,73,.7);box-shadow:0 26px 50px -26px rgba(205,164,73,.45)}
.shot:hover img{transform:scale(1.06)}
.soon .shot{filter:saturate(.85)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;
  animation:fade .25s ease}
.modal .card{width:100%;max-width:520px;max-height:90vh;overflow:auto;animation:rise .35s var(--ease)}
@keyframes fade{from{opacity:0}}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;z-index:60;padding:12px 20px;border-radius:14px;font-size:14px;
  background:#16130e;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.6);transition:.35s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:1020px){.g4,.plans{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}
  .collection{grid-template-columns:1fr 1fr .694fr}.col-intro{grid-column:1/-1}}
@media(max-width:1180px){.top .wm{display:none}}
@media(max-width:820px){.g3{grid-template-columns:1fr 1fr}.checkout{grid-template-columns:1fr}.checkout .side{border-left:0;padding-left:0;border-top:1px solid var(--soft);padding-top:20px}}
@media(max-width:620px){
  .g4,.g3,.g2,.plans{grid-template-columns:1fr}
  .top .in{padding:0 12px;gap:10px;height:62px}.logo-site{height:38px}.brand span{display:none}
  .tabs a{padding:8px 10px}.tabs a .tl{display:none}.tabs a svg.i{width:18px;height:18px}
  .wrap{padding:22px 16px 56px}.pcard{padding:22px;min-height:0}.pcard .gem-xl{width:80px;height:68px;right:14px;top:14px}
  .journey .track{left:24px;right:24px;top:24px}.jn .dot{width:40px;height:40px}.jn .dot .gem{width:24px;height:20px}.jn span{display:none}
  .v{font-size:26px}
  .collection{grid-template-columns:1fr 1fr}.collection .shot.tall{aspect-ratio:1/1}.collection .shot.tall img{object-position:center 20%}
}