:root { --acento:#8b5cf6; --acento2:color-mix(in srgb, var(--acento) 55%, #fff); --acento-suave:color-mix(in srgb, var(--acento) 16%, transparent); --acento-brilho:color-mix(in srgb, var(--acento) 55%, transparent);
  --bg:#07060d; --bg2:#0d0b17; --bg3:#151226; --linha:color-mix(in srgb, var(--acento) 26%, #15121f); --texto:#f1effa; --texto2:#a29fb8; --ok:#22c55e; --azul:#2f7bff;
  --bs-body-bg:#07060d; --bs-body-color:#f1effa; --bs-border-color:#2a2442; --bs-secondary-color:#a29fb8; }
body { background: radial-gradient(1100px 520px at 80% -120px, color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%), radial-gradient(900px 400px at 0 100%, color-mix(in srgb, var(--acento) 9%, transparent), transparent 70%), var(--bg); color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; min-height: 100vh; }
a { text-decoration: none; }
.text-body-secondary, .muted { color: var(--texto2) !important; }
.topo { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.5rem; border-bottom:1px solid var(--linha); background:rgba(9,10,14,.85); backdrop-filter: blur(6px); position:sticky; top:0; z-index:20; }
.marca { font-weight:800; font-size:1.2rem; color:#fff; letter-spacing:.2px; } .marca b { color: var(--acento); }
.topo nav a { color: var(--texto2); margin-left:1.1rem; font-weight:600; font-size:.92rem; } .topo nav a:hover { color:#fff; }
.btn-acento { background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 82%, #fff), var(--acento)); border:0; color:#fff; font-weight:700; border-radius:.7rem; padding:.7rem 1.3rem; box-shadow: 0 8px 22px -8px var(--acento-brilho), 0 1px 0 rgba(255,255,255,.25) inset; }
.btn-acento:hover { color:#fff; filter:brightness(1.08); }
.btn-borda { border:1px solid var(--linha); color:var(--texto); background:var(--bg3); border-radius:.7rem; padding:.55rem 1.1rem; font-weight:600; } .btn-borda:hover { border-color:var(--acento); color:#fff; }
.cartao { background: linear-gradient(180deg,#110e1f,#0a0814); border:1px solid var(--linha); border-radius:1rem; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -22px rgba(0,0,0,.9); }
.heroi { text-align:center; padding:4.5rem 1rem 2.5rem; max-width:900px; margin:0 auto; }
.heroi h1 { font-size: clamp(2rem,5vw,3.2rem); font-weight:800; line-height:1.1; } .heroi h1 span { background:linear-gradient(90deg,var(--acento2),var(--acento)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.heroi p { color:var(--texto2); font-size:1.1rem; max-width:640px; margin:1rem auto 0; }
.recursos { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; max-width:1100px; margin:0 auto 3rem; padding:0 1rem; }
.recursos .cartao { padding:1.2rem; } .recursos i { font-size:1.5rem; color:var(--acento); } .recursos h6 { margin:.6rem 0 .25rem; font-weight:700; } .recursos p { margin:0; font-size:.85rem; color:var(--texto2); }
.planos { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem; max-width:1100px; margin:0 auto; padding:0 1rem 4rem; }
.plano { padding:1.6rem; display:flex; flex-direction:column; position:relative; } .plano.destaque { border-color:var(--acento); box-shadow:0 0 0 1px var(--acento-suave), 0 24px 50px -24px var(--acento-brilho); }
.plano .faixa { position:absolute; top:-.7rem; left:50%; transform:translateX(-50%); background:var(--acento); color:#fff; font-size:.7rem; font-weight:800; padding:.2rem .8rem; border-radius:2rem; letter-spacing:.5px; }
.plano h3 { font-size:1.15rem; font-weight:700; } .plano .preco { font-size:2.3rem; font-weight:800; margin:.4rem 0; } .plano .preco small { font-size:.9rem; font-weight:500; color:var(--texto2); }
.plano ul { list-style:none; padding:0; margin:1rem 0 1.4rem; flex:1; } .plano li { padding:.35rem 0; font-size:.92rem; } .plano li i { color:var(--ok); margin-right:.5rem; }
.form-control, .form-select { background:#0a0814; border:1px solid var(--linha); color:var(--texto); border-radius:.65rem; padding:.7rem .85rem; }
.form-control:focus, .form-select:focus { background:#0a0814; color:#fff; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.form-label { font-weight:600; font-size:.85rem; }
.slug-box { display:flex; align-items:stretch; } .slug-box input { border-radius:.65rem 0 0 .65rem; } .slug-box span { display:flex; align-items:center; padding:0 .9rem; background:var(--bg3); border:1px solid var(--linha); border-left:0; border-radius:0 .65rem .65rem 0; color:var(--texto2); font-size:.92rem; white-space:nowrap; }
.slug-msg { font-size:.8rem; min-height:1.2rem; margin-top:.35rem; } .slug-msg.ok { color:var(--ok); } .slug-msg.erro { color:#ff6b6b; }
.pagina { max-width:1100px; margin:0 auto; padding:2rem 1rem 4rem; }
.pagina-estreita { max-width:520px; margin:0 auto; padding:2rem 1rem 4rem; }
.pill { display:inline-block; padding:.2rem .65rem; border-radius:2rem; font-size:.72rem; font-weight:700; border:1px solid; } .pill.ativo,.pill.pago { color:#4ade80; border-color:#166534; background:rgba(34,197,94,.1); }
.pill.suspenso,.pill.erro,.pill.expirado { color:#f87171; border-color:#7f1d1d; background:rgba(239,68,68,.1); } .pill.aguardando,.pill.provisionando,.pill.pendente { color:#fbbf24; border-color:#78350f; background:rgba(245,158,11,.1); } .pill.excluido,.pill.cancelado { color:#9ca3af; border-color:#374151; }
.table { --bs-table-bg:transparent; --bs-table-color:var(--texto); --bs-table-border-color:var(--linha); --bs-table-hover-bg:rgba(255,255,255,.03); }
.table th { color:var(--texto2); font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.stat { padding:1.1rem 1.3rem; } .stat .n { font-size:1.9rem; font-weight:800; } .stat .l { color:var(--texto2); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; }
.menu-adm { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.5rem; } .menu-adm a { padding:.5rem 1rem; border-radius:.6rem; color:var(--texto2); font-weight:600; font-size:.9rem; border:1px solid transparent; } .menu-adm a:hover { color:#fff; background:var(--bg3); } .menu-adm a.ativo { color:#fff; background:var(--bg3); border-color:var(--linha); }
.pix-qr { width:230px; height:230px; background:#fff; border-radius:.8rem; padding:.5rem; }
.toast-lic { position:fixed; right:1rem; top:1rem; z-index:99; background:#10311d; border:1px solid #166534; color:#bbf7d0; padding:.7rem 1rem; border-radius:.7rem; display:none; } .toast-lic.erro { background:#3a1212; border-color:#7f1d1d; color:#fecaca; }
@media (max-width:640px) { .topo { padding:.8rem 1rem; } .topo nav a { margin-left:.7rem; } .heroi { padding-top:3rem; } }


/* ===== V11 — vitrine (página inicial) ===== */
.topo { gap:1.2rem; padding:.9rem clamp(1rem,4vw,4rem); background:rgba(8,7,14,.82); }
.marca { display:inline-flex; align-items:center; gap:.65rem; font-size:1.25rem; letter-spacing:.8px; text-transform:uppercase; font-weight:700; }
.marca svg { width:34px; height:34px; flex:none; } .marca .ponto { color:var(--acento); }
.topo-busca { position:relative; flex:1 1 260px; max-width:360px; } .topo-busca i { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--texto2); }
.topo-busca input { width:100%; background:rgba(255,255,255,.05); border:1px solid var(--linha); color:var(--texto); border-radius:.7rem; padding:.55rem .9rem .55rem 2.4rem; font-size:.9rem; } .topo-busca input:focus { outline:0; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.topo-acoes { display:flex; align-items:center; gap:.7rem; margin-left:auto; } .topo-acoes a { margin:0 !important; }
.btn-icone { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:.7rem; background:rgba(255,255,255,.06); border:1px solid var(--linha); color:var(--texto) !important; }
.btn-contorno { border:1.5px solid var(--acento); color:#fff !important; background:transparent; border-radius:.7rem; padding:.5rem 1.1rem; font-weight:600; font-size:.9rem; } .btn-contorno:hover { background:var(--acento-suave); }
.btn-sm-acento { padding:.5rem 1.2rem; font-size:.9rem; border-radius:.7rem; }
.v-secao { max-width:1240px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.v-heroi { display:grid; grid-template-columns:1.05fr 1fr; gap:2rem; align-items:center; padding:4.5rem 0 3.5rem; }
.v-traco { width:64px; height:3px; border-radius:3px; background:var(--acento); margin-bottom:1.6rem; }
.v-heroi h1 { font-size:clamp(2.6rem,6.2vw,4.4rem); font-weight:800; line-height:1.04; letter-spacing:-1px; margin:0; } .v-heroi h1 .gr { background:linear-gradient(90deg,var(--acento),var(--acento2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v-heroi p { color:#d6d3e6; font-size:1.12rem; max-width:480px; margin:1.4rem 0 2rem; }
.v-botoes { display:flex; flex-wrap:wrap; gap:.9rem; } .v-botoes .btn { display:inline-flex; align-items:center; gap:.6rem; font-size:1rem; }
.btn-claro { border:1px solid var(--linha); color:#fff; background:rgba(255,255,255,.03); border-radius:.7rem; padding:.7rem 1.3rem; font-weight:600; } .btn-claro:hover { border-color:var(--acento); color:#fff; background:var(--acento-suave); }
.v-arte { position:relative; } .v-arte svg { width:100%; height:auto; display:block; filter:drop-shadow(0 30px 60px color-mix(in srgb, var(--acento) 35%, transparent)); }
.v-faixa-titulo { text-align:center; margin:2rem 0 2.2rem; } .v-faixa-titulo small { display:inline-flex; align-items:center; gap:.9rem; color:var(--acento2); font-weight:700; letter-spacing:2px; font-size:.78rem; text-transform:uppercase; } .v-faixa-titulo small::before, .v-faixa-titulo small::after { content:""; width:56px; height:2px; background:var(--acento); opacity:.8; }
.v-faixa-titulo h2 { font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:800; margin:.7rem 0 .4rem; } .v-faixa-titulo p { color:var(--texto2); margin:0; }
.v-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.v-card { position:relative; padding:2rem 1.8rem 2.1rem; border-radius:1.1rem; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); border:1px solid var(--linha); box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 20px 50px -30px var(--acento-brilho); }
.v-card::before { content:""; position:absolute; left:12%; right:12%; top:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--acento),transparent); }
.v-icone { width:78px; height:78px; border-radius:50%; display:grid; place-items:center; font-size:2rem; color:var(--acento2); background:radial-gradient(circle at 50% 35%, var(--acento-suave), transparent 75%), #0e0b1c; border:1.5px solid var(--acento); box-shadow:0 0 28px -6px var(--acento-brilho); margin-bottom:1.3rem; }
.v-card h3 { font-size:1.3rem; font-weight:700; margin:0 0 .6rem; } .v-card p { color:var(--texto2); margin:0; line-height:1.55; }
.v-gestao { display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center; padding:4rem 0; }
.v-gestao h2 { font-size:clamp(1.8rem,3.6vw,2.5rem); font-weight:800; line-height:1.15; margin:.4rem 0 1rem; } .v-gestao h2 span { color:var(--acento2); } .v-gestao p { color:var(--texto2); max-width:420px; }
.v-checks { list-style:none; padding:0; margin:1.4rem 0 0; } .v-checks li { display:flex; align-items:center; gap:.8rem; padding:.45rem 0; } .v-checks i { width:26px; height:26px; border-radius:50%; background:var(--acento); display:grid; place-items:center; font-size:.85rem; flex:none; }
/* maquete do painel (feita em HTML/CSS) */
.maq { position:relative; } .maq-tela { border-radius:1rem; border:1px solid var(--linha); background:#0b0916; box-shadow:0 30px 70px -30px var(--acento-brilho); overflow:hidden; font-size:.78rem; }
.maq-barra { display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem; border-bottom:1px solid var(--linha); color:var(--texto2); } .maq-barra .marca { font-size:.72rem; gap:.4rem; } .maq-barra .marca svg { width:18px; height:18px; } .maq-barra .adm { margin-left:auto; display:flex; align-items:center; gap:.4rem; } .maq-barra .adm b { width:18px; height:18px; border-radius:50%; background:var(--acento); display:inline-block; }
.maq-corpo { display:grid; grid-template-columns:150px 1fr; } .maq-menu { padding:.7rem .5rem; border-right:1px solid var(--linha); } .maq-menu div { padding:.45rem .6rem; border-radius:.5rem; color:var(--texto2); display:flex; gap:.5rem; align-items:center; } .maq-menu div.on { background:var(--acento); color:#fff; font-weight:700; }
.maq-main { padding:.8rem; display:grid; gap:.6rem; } .maq-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; } .maq-stat { border:1px solid var(--linha); border-radius:.6rem; padding:.55rem .6rem; background:rgba(255,255,255,.02); } .maq-stat small { color:var(--texto2); display:block; font-size:.66rem; } .maq-stat b { font-size:1.15rem; display:block; margin-top:.1rem; } .maq-stat em { color:var(--ok); font-style:normal; font-size:.66rem; }
.maq-graf { border:1px solid var(--linha); border-radius:.6rem; padding:.55rem .6rem; } .maq-graf small { color:var(--texto2); } .maq-graf svg { width:100%; height:80px; display:block; margin-top:.3rem; }
.maq-rod { display:grid; grid-template-columns:1.4fr 1fr; gap:.5rem; } .maq-rod .maq-stat b { font-size:.8rem; } .maq-on { color:var(--ok); }
.maq-fone { position:absolute; right:-1.8rem; bottom:-2rem; width:21%; aspect-ratio:9/18; border-radius:1.5rem; border:3px solid #2c2748; background:linear-gradient(180deg,#171230,#0b0916); box-shadow:0 20px 50px -10px rgba(0,0,0,.8), 0 0 40px -10px var(--acento-brilho); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; }
.maq-fone svg { width:34%; } .maq-fone .barras { display:flex; align-items:flex-end; gap:.25rem; height:34%; } .maq-fone .barras i { width:.55rem; background:var(--acento); border-radius:2px; display:block; }
.v-pronto { margin-top:1rem; text-align:center; padding:3rem 1rem 3.4rem; background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--acento) 16%, #07060d)); border-top:1px solid var(--linha); } .v-pronto h3 { font-weight:800; font-size:1.5rem; } .v-pronto p { color:var(--texto2); }
/* vitrine do plano + recursos */
.v-vitrine { display:grid; grid-template-columns:1.6fr 1fr; gap:1.3rem; padding-bottom:3rem; }
.v-plano-dest { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:center; padding:1.6rem; border-radius:1.1rem; border:1px solid var(--linha); background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); box-shadow:0 30px 70px -40px var(--acento-brilho); }
.v-plano-dest .selo { display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.6px; padding:.3rem .8rem; border-radius:2rem; background:var(--acento-suave); border:1px solid var(--acento); color:var(--acento2); }
.v-plano-dest h3 { font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; margin:.8rem 0 .3rem; } .v-plano-dest p { color:var(--texto2); } .v-plano-dest .preco { font-size:2.3rem; font-weight:800; margin:1rem 0; } .v-plano-dest .preco small { font-size:.95rem; color:var(--texto2); font-weight:500; white-space:nowrap; } .v-plano-dest .preco { white-space:nowrap; } .v-plano-dest .btn { white-space:nowrap; }
.v-plano-dest .btn { display:inline-flex; align-items:center; gap:.6rem; }
.v-rec { position:relative; padding:1.6rem; border-radius:1.1rem; border:1px solid var(--linha); background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); overflow:hidden; display:flex; flex-direction:column; }
.v-rec .slide { display:none; flex:1; flex-direction:column; } .v-rec .slide.on { display:flex; } .v-rec .slide svg { width:100%; max-height:210px; } .v-rec h4 { font-weight:800; margin:.8rem 0 .3rem; } .v-rec p { color:var(--texto2); margin:0 0 1rem; }
.v-pontos { display:flex; gap:.5rem; align-items:center; justify-content:space-between; margin-top:auto; } .v-pontos .traco { width:56px; height:3px; background:var(--acento); border-radius:3px; } .v-pontos span { display:flex; gap:.5rem; } .v-pontos button { width:9px; height:9px; border-radius:50%; border:0; background:#3a3558; padding:0; } .v-pontos button.on { background:var(--acento); }
.v-planos-titulo { margin:1rem 0 1.4rem; }
.rodape-lic { border-top:1px solid var(--linha); padding:1.6rem; text-align:center; color:var(--texto2); font-size:.85rem; }
@media (max-width:900px) { .v-plano-dest .maq { display:none; } .v-heroi,.v-gestao,.v-vitrine,.v-plano-dest { grid-template-columns:1fr; } .v-3 { grid-template-columns:1fr; } .v-heroi { padding-top:2.5rem; } .topo-busca { display:none; } .maq-corpo { grid-template-columns:1fr; } .maq-menu { display:none; } .maq-fone { right:.3rem; } }
@media (max-width:560px) { .topo .btn-contorno { display:none; } }

.marca-img { height: 40px; width: auto; display: block; filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--acento) 35%, transparent)); }
@media (max-width: 600px) { .marca-img { height: 32px; } }

/* ===== V17 — administração (novo visual) ===== */
.adm-topo { padding:.8rem clamp(1rem,3vw,2.5rem); } .adm-topo .marca { text-transform:uppercase; letter-spacing:1px; font-size:1.05rem; } .adm-topo .marca-img { height:38px; }
.adm-acoes { display:flex; gap:.6rem; margin-left:auto; } .adm-acoes a { margin:0 !important; }
.adm-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border:1px solid var(--linha); border-radius:.7rem; background:rgba(255,255,255,.04); color:var(--texto) !important; font-size:.88rem; font-weight:600; } .adm-btn:hover { border-color:var(--acento); }
.adm-pg { max-width:1280px; margin:0 auto; padding:1.5rem clamp(1rem,3vw,2rem) 3rem; }
.menu-adm { gap:.3rem; padding-bottom:1rem; margin-bottom:1.4rem; border-bottom:1px solid var(--linha); overflow-x:auto; flex-wrap:nowrap; }
.menu-adm a { display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap; border:1px solid transparent; background:transparent; padding:.6rem 1.1rem; font-size:.92rem; } .menu-adm a i { font-size:1.05rem; }
.menu-adm a:hover { color:#fff; background:rgba(255,255,255,.04); }
.menu-adm a.ativo { color:#fff; background:var(--acento-suave); border-color:var(--acento); box-shadow:0 0 22px -8px var(--acento-brilho); }
.adm-cab { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; } .adm-cab h1 { font-size:1.9rem; font-weight:800; margin:0; } .adm-cab p { margin:.1rem 0 0; color:var(--texto2); }
.adm-cab-ico { width:54px; height:54px; border-radius:1rem; display:grid; place-items:center; font-size:1.5rem; color:var(--acento2); background:var(--acento-suave); border:1px solid var(--linha); box-shadow:0 0 24px -10px var(--acento-brilho); }
.adm-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.2rem; }
.adm-kpi { display:flex; gap:1rem; align-items:center; padding:1.1rem 1.2rem; border-radius:1rem; border:1px solid var(--linha); background:linear-gradient(180deg,#110e1f,#0a0814); }
.adm-kpi .ico { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:1.4rem; flex:none; color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.adm-kpi.roxo { --c:var(--acento2); } .adm-kpi.ambar { --c:#fbbf24; } .adm-kpi.verde { --c:#4ade80; } .adm-kpi.verm { --c:#f87171; }
.adm-kpi .t { color:var(--texto2); font-size:.85rem; } .adm-kpi .n { font-size:2rem; font-weight:800; line-height:1.1; } .adm-kpi .v { font-size:.78rem; color:#4ade80; font-weight:600; } .adm-kpi .v.baixo { color:#f87171; } .adm-kpi .v span { color:var(--texto2); font-weight:400; }
.adm-filtros { display:flex; gap:.7rem; flex-wrap:wrap; padding:.8rem; margin-bottom:1rem; border:1px solid var(--linha); border-radius:1rem; background:rgba(255,255,255,.02); }
.adm-filtros .busca { position:relative; flex:1 1 280px; } .adm-filtros .busca i { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--texto2); }
.adm-filtros input,.adm-filtros select { background:rgba(255,255,255,.04); border:1px solid var(--linha); color:var(--texto); border-radius:.7rem; padding:.6rem .9rem; font-size:.9rem; } .adm-filtros input { width:100%; padding-left:2.4rem; } .adm-filtros select option { background:#110e1f; }
.adm-tab thead th { color:var(--texto2); font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.4px; background:rgba(255,255,255,.02); border-bottom:1px solid var(--linha); padding:.85rem 1rem; }
.adm-tab td { padding:.85rem 1rem; border-color:color-mix(in srgb, var(--linha) 60%, transparent); } .adm-tab tbody tr:hover { background:rgba(255,255,255,.025); }
.ped-id { color:var(--acento2); }
.tp { display:inline-block; padding:.2rem .7rem; border-radius:.5rem; font-size:.78rem; font-weight:700; border:1px solid; } .tp-novo { color:#a5b4fc; border-color:#3730a3; background:rgba(99,102,241,.12); } .tp-renovacao { color:#67e8f9; border-color:#155e75; background:rgba(34,211,238,.1); } .tp-upgrade { color:#f9a8d4; border-color:#831843; background:rgba(236,72,153,.1); }
.pl { display:flex; align-items:center; gap:.7rem; } .pl-ico { width:36px; height:36px; border-radius:.6rem; display:grid; place-items:center; color:var(--acento2); background:var(--acento-suave); border:1px solid var(--linha); flex:none; }
.pill.cancelado { color:#f87171; border-color:#7f1d1d; background:rgba(239,68,68,.1); }
.ic-btn { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:.6rem; border:1px solid var(--linha); color:var(--texto2); background:rgba(255,255,255,.04); } .ic-btn:hover { color:#fff; border-color:var(--acento); }
.adm-rodtab { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; padding:.9rem 1rem; border-top:1px solid var(--linha); }
.adm-pag { display:flex; gap:.35rem; align-items:center; } .adm-pag a { min-width:34px; height:34px; display:grid; place-items:center; border-radius:.55rem; border:1px solid var(--linha); color:var(--texto2); font-size:.85rem; font-weight:600; padding:0 .5rem; } .adm-pag a:hover { color:#fff; border-color:var(--acento); } .adm-pag a.at { background:var(--acento); border-color:var(--acento); color:#fff; } .adm-pag a.off { opacity:.35; pointer-events:none; } .adm-pag span { color:var(--texto2); }
.stat { border-radius:1rem; } .login-adm { max-width:400px; margin:0 auto; padding:5rem 1rem; } .login-adm .logo { display:block; margin:0 auto 1.4rem; height:64px; }
@media (max-width:900px) { .adm-kpis { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .adm-kpis { grid-template-columns:1fr; } .adm-btn span { display:none; } .adm-cab h1 { font-size:1.5rem; } .adm-topo .marca-txt { display:none; } }

/* ===== V17 — área do cliente ("Meus planos") ===== */
.usuario-btn { display:inline-flex; align-items:center; gap:.55rem; padding:.35rem .8rem .35rem .4rem; border:1px solid var(--linha); border-radius:.8rem; background:var(--acento-suave); color:#fff; font-size:.9rem; font-weight:600; } .usuario-btn:hover { border-color:var(--acento); }
.usuario-btn .av { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--acento),var(--acento2)); }
.mp { max-width:1260px; margin:0 auto; padding:1.8rem clamp(1rem,3vw,2rem) 3rem; }
.mp-cab { display:flex; align-items:center; gap:1.2rem; margin-bottom:1.6rem; flex-wrap:wrap; } .mp-cab h1 { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; margin:0; } .mp-cab h1 span { background:linear-gradient(90deg,var(--acento2),var(--acento)); -webkit-background-clip:text; background-clip:text; color:transparent; } .mp-cab p { margin:.2rem 0 0; color:var(--acento2); }
.mp-cab-ico { width:80px; height:80px; border-radius:1.2rem; display:grid; place-items:center; font-size:2.2rem; color:#fff; background:linear-gradient(145deg,var(--acento-suave),rgba(0,0,0,.2)); border:1px solid var(--linha); box-shadow:0 0 30px -10px var(--acento-brilho); }
.mp-aviso { margin-left:auto; display:flex; align-items:center; gap:1rem; padding:1.1rem 1.6rem; border-radius:1rem; border:1px solid var(--linha); background:linear-gradient(135deg,var(--acento-suave),transparent); max-width:420px; } .mp-aviso i { font-size:2.8rem; color:var(--acento2); } .mp-aviso b { font-size:1.05rem; } .mp-aviso div div { color:var(--texto2); font-size:.9rem; } .mp-aviso.amarelo i { color:#fbbf24; }
.mp-grade { display:grid; grid-template-columns:1fr 380px; gap:1.4rem; align-items:start; }
.mp-plano-col { display:grid; gap:1.2rem; }
.mp-plano { padding:1.6rem; border-radius:1.2rem; border:1px solid var(--acento); background:linear-gradient(160deg,color-mix(in srgb, var(--acento) 14%, #0b0916),#0a0814); box-shadow:0 0 0 1px var(--acento-suave), 0 24px 50px -30px var(--acento-brilho); }
.mp-plano-topo { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; } .mp-plano-ico { width:64px; height:64px; border-radius:1rem; display:grid; place-items:center; font-size:1.8rem; color:#fff; background:linear-gradient(145deg,var(--acento2),var(--acento)); box-shadow:0 10px 26px -10px var(--acento-brilho); flex:none; }
.mp-plano-nome { flex:1; min-width:200px; } .mp-plano-nome h2 { font-size:1.5rem; font-weight:700; margin:0; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; } .mp-plano-nome p { margin:.2rem 0 0; color:var(--texto2); } .mp-link { color:var(--acento2); }
.mp-renovar { display:inline-flex; align-items:center; gap:.7rem; padding:.9rem 1.6rem; border:0; border-radius:.9rem; color:#fff; font-weight:700; font-size:1.05rem; background:linear-gradient(180deg,color-mix(in srgb, var(--acento) 82%, #fff),var(--acento)); box-shadow:0 12px 28px -10px var(--acento-brilho), 0 1px 0 rgba(255,255,255,.3) inset; } .mp-renovar:hover { filter:brightness(1.1); } .mp-renovar:disabled { opacity:.6; }
.mp-info { display:grid; grid-template-columns:repeat(4,1fr); margin:1.5rem 0; } .mp-info > div { display:flex; gap:.8rem; align-items:center; padding:0 1rem; border-left:1px solid var(--linha); } .mp-info > div:first-child { border-left:0; padding-left:0; } .mp-info i { font-size:1.6rem; color:var(--texto); } .mp-info span { font-size:.8rem; color:var(--texto2); } .mp-info b { display:block; color:var(--texto); font-size:.95rem; } .mp-info em { color:#fbbf24; font-style:normal; font-size:.78rem; }
.mp-promo { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border-radius:.9rem; border:1px solid var(--acento); background:linear-gradient(90deg,var(--acento-suave),transparent); } .mp-promo > i { width:46px; height:46px; border-radius:.8rem; display:grid; place-items:center; font-size:1.4rem; background:var(--acento-suave); color:var(--acento2); flex:none; } .mp-promo div div { color:var(--texto2); font-size:.88rem; }
.mp-usuario { margin-top:.9rem; color:var(--texto2); font-size:.85rem; }
.mp-acoes { display:grid; gap:.7rem; padding:1rem; border:1px solid var(--linha); border-radius:1.2rem; background:linear-gradient(180deg,#110e1f,#0a0814); }
.mp-ac { display:flex; align-items:center; gap:.9rem; padding:.9rem 1rem; border-radius:.9rem; border:1px solid var(--linha); background:rgba(255,255,255,.025); color:var(--texto); } .mp-ac:hover { border-color:var(--acento); color:#fff; background:var(--acento-suave); }
.mp-ac .i { width:46px; height:46px; border-radius:.8rem; display:grid; place-items:center; font-size:1.4rem; color:#fff; flex:none; background:var(--c); } .mp-ac .t { flex:1; } .mp-ac b { display:block; } .mp-ac small { color:var(--texto2); } .mp-ac > i { color:#4ade80; }
.mp-ac.roxo { --c:linear-gradient(145deg,var(--acento2),var(--acento)); } .mp-ac.azul { --c:linear-gradient(145deg,#38bdf8,#2563eb); } .mp-ac.verde { --c:linear-gradient(145deg,#34d399,#059669); } .mp-ac.laranja { --c:linear-gradient(145deg,#fbbf24,#f97316); }
.mp-hist { margin-top:1.4rem; padding:1.2rem 1.4rem; border:1px solid var(--linha); border-radius:1.2rem; background:rgba(255,255,255,.02); } .mp-hist h3 { font-size:1.1rem; font-weight:700; margin-bottom:.6rem; }
.mp-porque { margin-top:1.4rem; display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:1rem; align-items:center; padding:1.6rem; border:1px solid var(--linha); border-radius:1.2rem; background:linear-gradient(180deg,#0e0b1b,#08070f); }
.mp-porque-t h3 { font-size:1.9rem; font-weight:800; } .mp-porque-t h3 span { color:var(--acento2); } .mp-porque-t p { color:var(--texto2); margin:0; }
.mp-b { text-align:center; padding:0 .6rem; border-left:1px solid var(--linha); } .mp-b i { width:62px; height:62px; border-radius:50%; display:grid; place-items:center; margin:0 auto .7rem; font-size:1.6rem; color:var(--acento2); background:var(--acento-suave); border:1px solid var(--acento); } .mp-b.azul i { color:#60a5fa; background:rgba(59,130,246,.14); border-color:#3b82f6; } .mp-b b { display:block; } .mp-b small { color:var(--texto2); }
.mp-link-novo { margin-top:1.2rem; text-align:center; }
.mp-modal { background:#110e1f; border:1px solid var(--linha); }
@media (max-width:1000px) { .mp-grade { grid-template-columns:1fr; } .mp-aviso { margin-left:0; max-width:none; width:100%; } .mp-info { grid-template-columns:1fr 1fr; gap:1rem 0; } .mp-info > div:nth-child(3) { border-left:0; padding-left:0; } .mp-porque { grid-template-columns:1fr 1fr; } .mp-porque-t { grid-column:1/-1; } .mp-b { border-left:0; } }
@media (max-width:560px) { .usuario-btn { font-size:.8rem; } .mp-renovar { width:100%; justify-content:center; } .mp-cab-ico { width:60px; height:60px; font-size:1.6rem; } }
.mp-porque { align-items:stretch; } .mp-porque-t { align-self:center; } .mp-info b { white-space:nowrap; font-size:.9rem; } .mp-info span { font-size:.78rem; } .mp-info > div { gap:.6rem; padding:0 .7rem; }