/* Vitrine de planejadores: vitrine, perfil, venda, login, painel e admin. */
:root { --v-bg:#050807; --v-card:#0e1512; --v-line:rgba(255,255,255,.1); --v-txt:#fff; --v-muted:rgba(255,255,255,.66); --v-mint:#5ad6ba; --v-cta:#ffd24d; --v-cta-hover:#ffdf7a; --v-alt:#0c1411; --v-ink:#0d1411; --v-erro:#f08a72; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; }
.v-body { background: radial-gradient(1100px 520px at 85% -10%, rgba(90,214,186,.14), transparent 60%), var(--v-bg); color:var(--v-txt); font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; padding-inline:20px; min-height:100vh; }
.v-wrap { max-width:1080px; margin:0 auto; padding-block:24px 64px; }
.v-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:32px; }
.v-top img { height:27px; width:auto; display:block; }
.v-top .link { color:var(--v-muted); font-size:14px; text-decoration:none; }
.v-top .link:hover { color:var(--v-txt); }
.v-h1 { font-family:"Outfit",sans-serif; font-weight:600; font-size:clamp(30px,5vw,50px); line-height:1.06; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance; }
.v-h1 span { color:var(--v-mint); }
.v-h2 { font-family:"Outfit",sans-serif; font-weight:600; font-size:clamp(22px,3vw,30px); margin:0 0 6px; text-wrap:balance; }
.v-lead { color:var(--v-muted); font-size:17px; max-width:62ch; margin:0 0 18px; }
.v-meta { color:var(--v-muted); font-size:13px; margin:0; }
.v-aviso { font-size:13px; color:var(--v-muted); border:1px solid var(--v-line); border-radius:12px; padding:10px 14px; margin:10px 0 22px; max-width:70ch; }
.v-filtros { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.v-chip { border:1px solid var(--v-line); background:transparent; color:var(--v-txt); border-radius:99px; padding:7px 14px; font:inherit; font-size:14px; cursor:pointer; text-decoration:none; }
.v-chip:hover { border-color:rgba(90,214,186,.5); }
.v-chip[aria-pressed="true"] { background:var(--v-mint); color:var(--v-ink); border-color:var(--v-mint); }
.v-grade { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; margin-top:10px; }
.v-card { background:var(--v-card); border:1px solid var(--v-line); border-radius:18px; padding:18px; display:grid; gap:12px; align-content:start; color:inherit; text-decoration:none; transition:border-color .2s, transform .2s; }
a.v-card:hover { border-color:rgba(90,214,186,.5); transform:translateY(-2px); }
.v-pessoa { display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; }
.v-foto { width:64px; height:64px; border-radius:50%; object-fit:cover; background:linear-gradient(135deg,#1b2a24,#0e1512); display:grid; place-items:center; font-family:"Outfit",sans-serif; font-weight:600; font-size:22px; color:var(--v-mint); }
.v-nome { font-family:"Outfit",sans-serif; font-weight:600; font-size:19px; margin:0; line-height:1.2; }
.v-tags { display:flex; flex-wrap:wrap; gap:6px; }
.v-tag { font-size:12px; border:1px solid var(--v-line); border-radius:99px; padding:3px 10px; color:var(--v-muted); }
.v-primeira { font-size:14px; color:var(--v-mint); font-weight:600; margin:0; }
.v-btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; border:0; border-radius:99px; padding:13px 24px; font:600 16px "Outfit",sans-serif; background:var(--v-cta); color:var(--v-ink); cursor:pointer; text-decoration:none; }
.v-btn:hover { background:var(--v-cta-hover); }
.v-btn.ghost { background:transparent; color:var(--v-txt); border:1px solid var(--v-line); }
.v-btn[disabled] { opacity:.6; cursor:wait; }
.v-form { background:var(--v-card); border:1px solid var(--v-line); border-radius:18px; padding:20px; display:grid; gap:14px; max-width:560px; }
.v-form label { font-size:13px; color:var(--v-muted); display:grid; gap:6px; }
.v-form input[type=text], .v-form input[type=email], .v-form input[type=tel], .v-form input[type=number], .v-form select, .v-form textarea { width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--v-line); background:rgba(255,255,255,.06); color:var(--v-txt); font:inherit; font-size:16px; }
.v-form select option { background:#0e1512; }
.v-form textarea { resize:vertical; min-height:96px; }
.v-form input:focus, .v-form select:focus, .v-form textarea:focus { outline:none; border-color:var(--v-mint); }
.v-duas { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.v-check { display:grid !important; grid-template-columns:20px 1fr; gap:10px; font-size:13px; color:var(--v-muted); align-items:start; }
.v-check input { width:18px; height:18px; margin:3px 0 0; accent-color:var(--v-mint); }
.v-erro { color:var(--v-erro); font-size:14px; margin:0; min-height:1em; }
.v-ok { color:var(--v-mint); font-size:14px; margin:0; }
.v-vazio { background:var(--v-card); border:1px dashed var(--v-line); border-radius:18px; padding:28px; color:var(--v-muted); text-align:center; margin:0; }
.v-vazio a { color:var(--v-mint); }
.v-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.v-num { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.v-num div { background:var(--v-card); border:1px solid var(--v-line); border-radius:14px; padding:14px 16px; }
.v-num b { display:block; font-family:"Outfit",sans-serif; font-size:30px; font-variant-numeric:tabular-nums; line-height:1.1; margin-top:4px; }
.v-rolar { overflow-x:auto; }
.v-tabela { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.v-tabela th { text-align:left; font-size:12px; color:var(--v-muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:9px 8px; border-bottom:1px solid var(--v-line); }
.v-tabela td { padding:10px 8px; border-bottom:1px solid var(--v-line); vertical-align:top; }
.v-tabela a { color:var(--v-mint); }
.v-pill { display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:99px; background:rgba(255,255,255,.08); }
.v-pill.ativo { background:rgba(90,214,186,.18); color:var(--v-mint); }
.v-pill.aguardando_pagamento { background:rgba(255,255,255,.1); color:var(--v-txt); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.v-pill.pausado, .v-pill.removido { background:rgba(240,138,114,.18); color:var(--v-erro); }
.v-passos { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.v-passos .v-card b { font-family:"Outfit",sans-serif; font-size:18px; }
.v-n { width:34px; height:34px; border-radius:50%; background:rgba(90,214,186,.15); color:var(--v-mint); display:grid; place-items:center; font-family:"Outfit",sans-serif; font-weight:700; }
.v-faq details { border-bottom:1px solid var(--v-line); padding:14px 0; }
.v-faq summary { cursor:pointer; font-weight:600; }
.v-faq p { color:var(--v-muted); margin:8px 0 0; }
.v-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.v-mock { background:var(--v-card); border:1px solid var(--v-line); border-radius:22px; padding:18px; display:grid; gap:12px; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.v-rodape { margin-top:56px; color:var(--v-muted); font-size:13px; display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; }
.v-rodape a { color:var(--v-muted); }
.v-doc h2 { font-family:"Outfit",sans-serif; font-size:20px; margin:26px 0 6px; color:var(--v-txt); }
.v-doc p { color:var(--v-muted); margin:0 0 10px; }
.v-doc a { color:var(--v-mint); }
:focus-visible { outline:2px solid var(--v-mint); outline-offset:2px; }
@media (max-width:820px) { .v-hero { grid-template-columns:1fr; } .v-duas { grid-template-columns:1fr; } }
@media (max-width:560px) { .v-form { padding:16px; } .v-top { margin-bottom:24px; } }
/* Perfis de exemplo da vitrine (somem quando houver 3 perfis reais) */
.v-ex-aviso { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--v-muted); margin:6px 0 4px; }
.v-ex-aviso::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--v-mint); box-shadow:0 0 0 4px rgba(90,214,186,.14); flex:none; }
.v-card-ex { position:relative; }
.v-ex-selo { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--v-muted); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:3px 9px; line-height:1.3; }
.v-ex-canto { position:absolute; top:12px; right:12px; font-size:10px; padding:2px 8px; }


/* Faixa de fundo alternado, de ponta a ponta da tela, sem mexer no layout */
.v-faixa { background:var(--v-alt); box-shadow:0 0 0 100vmax var(--v-alt); clip-path:inset(0 -100vmax); }
.v-faixa .v-card { background:#121b17; }
.v-faixa-grade { margin-top:26px; padding-block:28px 48px; }
.v-faixa-grade + * { margin-top:0; }

/* Cartão de profissional (vitrine) */
.v-grade { grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }
.v-pro { position:relative; gap:16px; padding:20px; border-radius:20px; }
.v-pro-topo { display:grid; grid-template-columns:84px 1fr; gap:16px; align-items:center; }
.v-pro-foto { width:84px; height:84px; border-radius:20px; object-fit:cover; background:#1b2a24; display:grid; place-items:center; font:600 30px "Outfit",sans-serif; color:var(--v-mint); box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.v-pro-id { display:grid; gap:4px; min-width:0; }
.v-pro .v-nome { font-size:20px; }
.v-pro.v-card-ex .v-ex-canto { top:14px; left:14px; right:auto; background:rgba(5,8,7,.82); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.85); }
.v-pro-cred { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 0; }
.v-pro-bio { margin:0; color:var(--v-muted); font-size:14.5px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.v-badge { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; line-height:1; color:var(--v-txt); background:rgba(90,214,186,.08); border:1px solid rgba(90,214,186,.2); border-radius:8px; padding:6px 9px; }
.v-badge .v-ico { width:14px; height:14px; color:var(--v-mint); flex:none; }
.v-badge.cred { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:var(--v-muted); font-size:12px; padding:5px 7px; gap:5px; }
.v-badge.cred .v-ico { color:var(--v-muted); }
.v-pro-pe { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--v-line); }
.v-pro-pe .v-primeira { font-size:14px; line-height:1.35; }
.v-btn-sm { padding:10px 16px; font-size:14px; flex:none; }
a.v-pro:hover .v-btn-sm { background:var(--v-cta-hover); }
.v-pro { grid-template-rows:auto auto auto 1fr; }

.v-pro-foto-g { width:128px; height:128px; border-radius:28px; font-size:40px; }
.v-pro-topo-g { grid-template-columns:128px 1fr; gap:20px; }
@media (max-width:400px) { .v-pro-topo-g { grid-template-columns:104px 1fr; } .v-pro-foto-g { width:104px; height:104px; border-radius:24px; } }