/* Painel da conta grátis (Trilhas, etapa 3a). Carregado por painel.html, mas só tem efeito
   com body.modo-gratis, que o js/painel-gratis.js põe quando a conta é grátis.
   Usa as variáveis e classes do painel (.status-card, .cartao-encontro, .modal, .btn-modal...).
   Tudo novo começa com gr- para não esbarrar nas classes do painel pago. */

/* ---- O que a conta grátis não tem: some do Início ---- */
body.modo-gratis #secao-inicio > .status-card,
body.modo-gratis #credibilidade,
body.modo-gratis #atendimentos-avaliacao,
body.modo-gratis #aviso-vencimento,
body.modo-gratis #aviso-foto-recusa,
body.modo-gratis #completar-hub,
body.modo-gratis #card-boas-vindas,
body.modo-gratis #link-abrir-perfil { display: none !important; }

/* ---- Acessibilidade ---- */
.gr-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.modo-gratis a:focus-visible,
body.modo-gratis button:focus-visible,
body.modo-gratis input:focus-visible { outline: 3px solid var(--lilas-escuro); outline-offset: 2px; }
/* O título recebe foco por código ao trocar de seção (leitor de tela): sem moldura. */
body.modo-gratis h1:focus,
body.modo-gratis h1:focus-visible { outline: none; }
body.modo-gratis .menu a { min-height: 44px; }

/* ---- Menu ---- */
.menu a .gr-cad { margin-left: auto; width: auto; font-size: 12px; color: #6b7280; }
.menu a.gr-trava { color: var(--cinza-fonte); }

/* ---- Cartões ---- */
.gr-boas-vindas { background: linear-gradient(135deg, #ffffff, #f5f3ff); border: 1px solid #c4b5fd; border-radius: 22px; padding: 22px 24px; margin-bottom: 20px; display: flex; gap: 16px; align-items: flex-start; }
.gr-bv-icone { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--lilas), var(--lilas-escuro)); color: white; display: flex; justify-content: center; align-items: center; font-size: 22px; flex-shrink: 0; }
.gr-boas-vindas h2 { font-size: 19px; font-weight: 900; margin: 0 0 6px; }
.gr-boas-vindas p { font-size: 14px; color: var(--cinza-fonte); font-weight: 700; line-height: 1.6; }
.gr-cartao { background: white; border: 1px solid #e2e8f0; border-radius: 22px; padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(139,92,246,0.06); }
.gr-cartao h3 { font-size: 17px; font-weight: 900; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-roxo { color: var(--lilas-escuro); }
.gr-sub { font-size: 13.5px; color: var(--cinza-fonte); font-weight: 700; line-height: 1.55; margin-bottom: 14px; }
.gr-sem-margem { margin: 0; }
.gr-mt { margin-top: 18px; }
.gr-selo { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; font-size: 11px; font-weight: 900; padding: 3px 10px; border-radius: 50px; letter-spacing: .3px; }
.gr-exemplo-tag { display: inline-block; background: #fef3c7; color: #78350f; font-size: 11px; font-weight: 900; padding: 3px 10px; border-radius: 50px; margin-bottom: 10px; }
.gr-lista-ok { list-style: none; display: grid; gap: 8px; margin-bottom: 4px; }
.gr-lista-ok li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 800; }
.gr-lista-ok li i { color: #047857; margin-top: 3px; font-size: 13px; }
.gr-lista-ok li span { color: var(--cinza-fonte); font-weight: 700; display: block; font-size: 12.5px; }
.gr-nota { font-size: 12.5px; font-weight: 700; color: var(--cinza-fonte); margin-top: 12px; line-height: 1.5; }
.gr-nota-ambar { color: #92400e; }
.gr-cartao-planos { padding-top: 22px; }

/* ---- Botões ---- */
.gr-btn, .gr-btn-contorno, .gr-btn-escuro { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 20px; border-radius: 50px; font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 900; cursor: pointer; text-decoration: none; }
.gr-btn { background: linear-gradient(135deg, var(--lilas), var(--lilas-escuro)); color: white; border: none; box-shadow: 0 8px 20px rgba(139,92,246,0.3); }
.gr-btn-contorno { background: white; color: var(--lilas-escuro); border: 2px solid var(--lilas); }
.gr-btn-escuro { background: #92400e; color: white; border: none; }
.gr-falso { cursor: default; pointer-events: none; margin-top: 18px; }

/* ---- Convite e cartões de plano ---- */
.gr-convite { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 2px solid #fde68a; border-radius: 22px; padding: 22px; margin-bottom: 20px; }
.gr-convite h3 { font-size: 17px; font-weight: 900; color: #78350f; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.gr-convite-txt { font-size: 13.5px; color: #92400e; font-weight: 700; line-height: 1.55; margin-bottom: 16px; }
.gr-planos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gr-plano { background: white; border: 2px solid #e2e8f0; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; text-align: left; }
.gr-plano.gr-marcado { border-color: var(--lilas); box-shadow: 0 8px 22px rgba(139,92,246,0.18); }
.gr-plano h4 { font-size: 15px; font-weight: 900; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gr-tag { background: #ede9fe; color: #5b21b6; font-size: 10.5px; font-weight: 900; padding: 2px 8px; border-radius: 50px; }
.gr-preco { font-size: 24px; font-weight: 900; color: var(--lilas-escuro); margin: 6px 0 8px; }
.gr-preco small { font-size: 12.5px; color: var(--cinza-fonte); font-weight: 800; }
.gr-ref { font-size: 11.5px; font-weight: 700; color: var(--cinza-fonte); margin: -4px 0 8px; }
.gr-plano ul { list-style: none; display: grid; gap: 6px; margin-bottom: 14px; flex: 1; }
.gr-plano li { font-size: 12.5px; font-weight: 700; color: var(--cinza-fonte); display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.gr-plano li i { color: #047857; font-size: 11px; margin-top: 3px; }
.gr-msg-assinar:empty { display: none; }
.gr-msg-assinar { background: #ede9fe; color: #4c1d95; border-radius: 12px; padding: 10px 12px; font-weight: 800; }

/* ---- Pergunta de profissão pendente ---- */
.gr-pendente { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 18px; padding: 14px 16px; margin-bottom: 20px; font-size: 14px; font-weight: 800; line-height: 1.5; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gr-pendente[hidden] { display: none; }
.gr-pendente p { flex: 1; min-width: 200px; }

/* ---- Funções bloqueadas ---- */
.gr-bloq { background: #f8f9fc; border: 2px dashed #b8bfcf; border-radius: 22px; padding: 20px 22px; margin-bottom: 14px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; scroll-margin-top: 80px; }
.gr-cadeado { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #451a03; display: flex; justify-content: center; align-items: center; font-size: 20px; flex-shrink: 0; }
.gr-bloq-texto { flex: 1; min-width: 200px; }
.gr-bloq h4 { font-size: 15.5px; font-weight: 900; margin-bottom: 3px; }
.gr-bloq p { font-size: 13px; color: var(--cinza-fonte); font-weight: 700; line-height: 1.5; }
.gr-bloq-visual { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; opacity: .7; }
.gr-bloq-visual span { background: #eef0f6; border-radius: 12px; height: 34px; flex: 1 1 90px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #5b6474; gap: 6px; }

/* ---- Trilhas e ranking ---- */
.gr-trilha { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid #f1f5f9; flex-wrap: wrap; }
.gr-trilha:first-of-type { border-top: none; }
.gr-trilha-ic { width: 44px; height: 44px; border-radius: 14px; background: #f5f3ff; color: var(--lilas-escuro); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.gr-trilha-t { flex: 1; min-width: 160px; }
.gr-trilha-t b { display: block; font-size: 14.5px; font-weight: 900; }
.gr-trilha-t span { font-size: 12.5px; color: var(--cinza-fonte); font-weight: 700; }
.gr-embreve { background: #fef3c7; color: #78350f; font-size: 11px; font-weight: 900; padding: 4px 10px; border-radius: 50px; white-space: nowrap; }
.gr-rank-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gr-rank-n { font-size: 34px; font-weight: 900; color: var(--lilas-escuro); letter-spacing: -1px; line-height: 1; }
.gr-rank-n small { font-size: 14px; color: var(--cinza-fonte); font-weight: 800; letter-spacing: 0; }
.gr-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.gr-filtro { min-height: 44px; border: 2px solid #e2e8f0; background: white; color: var(--cinza-fonte); font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 900; padding: 7px 16px; border-radius: 50px; cursor: pointer; }
.gr-filtro[aria-pressed="true"] { border-color: var(--lilas); background: #f5f3ff; color: #5b21b6; }
.gr-rank-lista { list-style: none; }
.gr-rank-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: 14px; font-weight: 800; flex-wrap: wrap; }
.gr-rank-lista li.gr-eu { background: #f5f3ff; color: #5b21b6; }
.gr-pos { min-width: 26px; font-weight: 900; color: #5b6474; }
.gr-pts { margin-left: auto; font-weight: 900; }
.gr-cid { font-size: 12px; color: var(--cinza-fonte); font-weight: 700; }
.gr-link { background: none; border: none; padding: 0; min-height: 24px; color: var(--lilas-escuro); font: inherit; font-weight: 900; text-decoration: underline; cursor: pointer; }
.gr-link:disabled { opacity: 0.6; cursor: default; }
.gr-rank-form { margin-top: 14px; }
.gr-rank-form label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.gr-rank-form-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.gr-rank-form-linha input { flex: 1; min-width: 200px; min-height: 44px; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 14px; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; }
.gr-rank-form-linha .gr-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

/* ---- Ranking (desenho novo): abas, lista em cartões, "Você" e "Aparecer no ranking" ---- */
.gr-cartao.gr-ranking { background: transparent; border: 0; box-shadow: none; padding: 0; }
.rk-voltar { display: none; }
.rk-abas { display: flex; padding: 5px; border-radius: 26px; background: #fff; box-shadow: 0 10px 26px rgba(76,29,149,0.20); margin-bottom: 16px; }
.rk-aba { flex: 1; height: 44px; border: 0; border-radius: 22px; background: none; color: #666666; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; }
.rk-aba[aria-pressed="true"] { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; }
.rk-aba:focus-visible, .rk-chave:focus-visible, .rk-voltar:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.rk-lista { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.rk-linha { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: #fff; box-shadow: 0 2px 10px rgba(76,29,149,0.07); }
.rk-linha.rk-eu { box-shadow: inset 0 0 0 2px #c4b5fd, 0 2px 10px rgba(76,29,149,0.07); }
.rk-pos { flex: none; width: 38px; height: 38px; border-radius: 19px; background: #ede9fe; color: #7c3aed; font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.rk-pos.rk-pos-1 { background: #ffe08a; color: #5c3600; }
.rk-pos.rk-pos-2 { background: #e3e0ec; color: #444444; }
.rk-pos.rk-pos-3 { background: #f6d5b8; color: #5a2e0c; }
.rk-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 16px; font-weight: 800; color: #1f1f1f; }
.rk-nome small { font-size: 12px; font-weight: 700; color: #666666; }
.rk-pts { font-size: 14px; font-weight: 900; color: #7c3aed; white-space: nowrap; }
.rk-vazio { margin: 0; padding: 16px; border-radius: 22px; background: #fff; font-size: 14px; font-weight: 700; color: #666666; text-align: center; line-height: 1.45; }
.rk-voce { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px; border-radius: 24px; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; box-shadow: 0 12px 26px rgba(109,40,217,0.35); }
.rk-voce-ini { flex: none; width: 42px; height: 42px; border-radius: 21px; background: rgba(255,255,255,0.2); font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.rk-voce-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rk-voce-txt strong { font-size: 16px; font-weight: 900; }
.rk-voce-txt span { font-size: 12px; font-weight: 700; color: #eadfff; }
.rk-voce-pts { font-size: 14px; font-weight: 900; white-space: nowrap; }
.rk-aparecer { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px; border-radius: 22px; background: #fff; border: 1.5px solid #e2e8f0; }
.rk-aparecer-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-aparecer-txt strong { font-size: 15px; font-weight: 900; }
.rk-aparecer-txt span { font-size: 12px; font-weight: 700; color: #666666; line-height: 1.35; }
.rk-chave { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 15px; background: #cbd5e1; cursor: pointer; }
.rk-chave[aria-checked="true"] { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.rk-chave:disabled { opacity: 0.6; cursor: default; }
.rk-chave-bola { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; transition: left 0.2s; }
.rk-chave[aria-checked="true"] .rk-chave-bola { left: 25px; }
.gr-ranking .gr-rank-cidade:not(:empty) { margin-top: 16px; padding: 16px; border-radius: 22px; background: #fff; border: 1.5px solid #e2e8f0; }
.gr-ranking .gr-rank-cidade .gr-nota, .gr-ranking .gr-rank-cidade .gr-rank-form { margin-top: 0; }
.rk-regra { margin-top: 14px; }

/* ---- Pedidos da conta grátis (desenho novo) ---- */
.pd-convite { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 20px; border-radius: 28px; background: #fff; text-align: center; box-shadow: 0 14px 34px rgba(76,29,149,0.20); margin-bottom: 18px; }
.pd-convite-ic { width: 72px; height: 72px; border-radius: 36px; background: #ede9fe; color: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.pd-convite h3 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -0.3px; }
.pd-convite p { margin: 0; font-size: 14px; font-weight: 700; color: #666666; line-height: 1.45; }
.pd-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: 26px; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; box-shadow: 0 8px 18px rgba(109,40,217,0.35); }
.pd-btn:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.pd-modos { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border-radius: 24px; background: #fff; border: 1.5px dashed #cdbdf5; margin-bottom: 18px; }
.pd-modos-tit { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #666666; }
.pd-modo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #f3f0fa; }
.pd-modo-bola { flex: none; width: 22px; height: 22px; border-radius: 11px; border: 2px solid #a79bc4; }
.pd-modo-txt { flex: 1; display: flex; flex-direction: column; }
.pd-modo-txt strong { font-size: 14px; font-weight: 800; color: #444444; }
.pd-modo-txt span { font-size: 12px; font-weight: 700; color: #666666; }
.pd-nota { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: #e4f8ee; color: #0b5a3b; font-size: 13px; font-weight: 700; line-height: 1.4; }
.pd-nota i { flex: none; font-size: 18px; }

/* ---- Planos (desenho novo): Profissional recomendado em roxo, Essencial em branco ---- */
.pl-planos .gr-planos { gap: 18px; align-items: start; }
.gr-plano.pl-cartao { position: relative; gap: 12px; padding: 22px 20px; border-radius: 28px; border: 1.5px solid #e2e8f0; background: #fff; }
.gr-plano.pl-cartao h4 { margin: 0; font-size: 20px; font-weight: 900; color: #1f1f1f; }
.pl-tag { align-self: flex-start; font-size: 12px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; padding: 4px 12px; border-radius: 12px; background: #fbbf24; color: #4a2c00; }
.pl-preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; }
.pl-preco b { font-size: 34px; font-weight: 900; letter-spacing: -1px; color: #7c3aed; }
.pl-preco small { font-size: 14px; font-weight: 700; color: #666666; }
.pl-preco-de { font-size: 15px; font-weight: 800; color: #8b8b8b; }
.pl-dia { align-self: flex-start; font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 12px; background: #ede9fe; color: #6d28d9; }
.gr-plano.pl-cartao .gr-ref { margin: 0; }
.gr-plano.pl-cartao ul { gap: 8px; margin: 0; }
.gr-plano.pl-cartao li { font-size: 14px; font-weight: 700; color: #444444; align-items: center; gap: 10px; }
.gr-plano.pl-cartao li i { color: #10b981; font-size: 14px; margin: 0; }
.pl-btn.gr-btn { justify-content: center; width: 100%; height: 52px; margin-top: 4px; border-radius: 26px; background: #ede9fe; color: #6d28d9; box-shadow: none; font-size: 16px; font-weight: 900; }
.pl-cancele { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: #666666; }
.gr-plano.pl-destaque { border: 0; background: linear-gradient(160deg, #6d28d9 0%, #7c3aed 100%); color: #fff; box-shadow: 0 16px 36px rgba(76,29,149,0.35); }
.gr-plano.pl-destaque h4 { color: #fff; font-size: 20px; }
.pl-destaque .pl-preco b { font-size: 38px; color: #fff; }
.pl-destaque .pl-preco small { color: #e3d6ff; }
.pl-destaque .pl-preco-de { color: #e3d6ff; }
.pl-destaque .pl-dia { background: rgba(255,255,255,0.18); color: #fff; }
.pl-destaque .gr-ref { color: #e3d6ff; }
.gr-plano.pl-destaque li { color: #fff; }
.gr-plano.pl-destaque li i { color: #fbbf24; }
.pl-destaque .pl-btn.gr-btn { height: 54px; background: #fff; color: #6d28d9; }
.pl-destaque .pl-cancele { color: #eadfff; }
.gr-plano.pl-cartao.gr-marcado { box-shadow: 0 0 0 3px #fbbf24, 0 16px 36px rgba(76,29,149,0.2); }
.pl-destaque .gr-tag { background: rgba(255,255,255,0.2); color: #fff; }
.pl-compara { margin-top: 22px; }
.pl-compara-tit { margin: 0 0 12px; font-size: 18px; font-weight: 900; }
.pl-tabela-caixa { padding: 8px 16px 12px; border-radius: 24px; background: #fff; border: 1.5px solid #e2e8f0; overflow-x: auto; }
.pl-tabela { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 700; }
.pl-tabela thead th { height: 40px; font-size: 11px; font-weight: 900; color: #666666; text-align: center; }
.pl-tabela thead th.pl-col-prof { color: #7c3aed; }
.pl-tabela tbody th { padding: 8px 8px 8px 0; text-align: left; font-weight: 700; }
.pl-tabela tbody td { width: 62px; text-align: center; }
.pl-tabela tbody tr { border-top: 1px solid #e2e8f0; height: 44px; }
.pl-sim { color: #10b981; font-size: 15px; }
.pl-nao { color: #8b8b8b; }
.pl-nota { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 20px; background: #fff0c2; color: #5c3600; font-size: 13px; font-weight: 700; line-height: 1.4; }
.pl-nota i { flex: none; font-size: 18px; }
#secao-assinar .gr-pagar { margin-top: 18px; border-radius: 24px; }

/* ---- Como seu perfil aparece (desenho novo) ---- */
.pv-rotulo { margin: 0 0 8px; font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: #666666; }
.pv-rotulo-plano { margin-top: 18px; color: #7c3aed; }
.pv-hoje { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; background: #fff; border: 1.5px solid #e2e8f0; }
.pv-hoje-ini { flex: none; width: 48px; height: 48px; border-radius: 24px; background: #e2e8f0; color: #666666; font-size: 18px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.pv-hoje-txt, .pv-plano-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-hoje-txt strong { font-size: 16px; font-weight: 900; }
.pv-hoje-txt span { font-size: 12px; font-weight: 700; color: #666666; }
.pv-plano { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; border-radius: 28px; background: #fff; border: 2px solid #7c3aed; box-shadow: 0 14px 34px rgba(109,40,217,0.18); }
.pv-plano-topo { display: flex; align-items: center; gap: 14px; }
.pv-foto { flex: none; width: 72px; height: 72px; border-radius: 36px; background: #ede9fe; color: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.pv-plano-nome { gap: 2px; }
.pv-plano-nome strong { font-size: 20px; font-weight: 900; letter-spacing: -0.3px; }
.pv-plano-nome span { font-size: 13px; font-weight: 700; color: #666666; }
.pv-apresenta { margin: 0; font-size: 14px; font-weight: 700; color: #444444; line-height: 1.45; }
.pv-selos-tit { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; color: #666666; }
.pv-selos { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 14px; background: #fff0c2; color: #7a4b00; }
.pv-selo i { color: #d97706; }
.pv-selo-vazio { background: #f3f0fa; color: #666666; }
.pv-pedir { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 26px; background: #10b981; color: #fff; font-size: 15px; font-weight: 900; }
.pv-legenda { margin: 0; font-size: 12px; font-weight: 700; color: #666666; text-align: center; }
.pv-quero { display: flex; align-items: center; justify-content: center; height: 56px; margin-top: 18px; border-radius: 28px; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; font-size: 16px; font-weight: 900; text-decoration: none; box-shadow: 0 10px 24px rgba(109,40,217,0.35); }
.pv-quero:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.pv-rodape { margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: #666666; }
.pv-fora { margin-top: 18px; padding: 14px 16px; border-radius: 20px; background: #fff; border: 1.5px solid #e2e8f0; }
.pv-fora summary { cursor: pointer; font-size: 14px; font-weight: 800; color: #444444; }
.pv-fora .gr-nao-aparece { margin-top: 10px; }

/* ---- Prévia do perfil público ---- */
.gr-moldura-nav { background: #e9ebf2; border-radius: 18px 18px 0 0; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.gr-bolas { display: flex; gap: 5px; }
.gr-bolas i { width: 9px; height: 9px; border-radius: 50%; background: #c7cbd8; }
.gr-url { flex: 1; min-width: 0; background: white; border-radius: 50px; padding: 5px 12px; font-size: 11.5px; font-weight: 700; color: var(--cinza-fonte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-moldura-tela { background: var(--fundo-site); border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 18px 18px; padding: 34px 20px 30px; }
.gr-perfil-min { max-width: 420px; margin: 0 auto; background: white; border-radius: 28px; padding: 34px 24px 28px; text-align: center; box-shadow: 0 20px 50px rgba(139,92,246,0.08); border: 1px solid #e2e8f0; }
.gr-perfil-ic { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: var(--lilas); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.gr-na-afeto { display: inline-block; background: #f5f3ff; color: #5b21b6; font-size: 11.5px; font-weight: 900; padding: 4px 12px; border-radius: 50px; margin-bottom: 10px; }
.gr-perfil-min h2 { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 8px; overflow-wrap: anywhere; }
.gr-perfil-min p { font-size: 14px; color: var(--cinza-fonte); font-weight: 700; line-height: 1.6; }
.gr-nao-aparece { display: grid; gap: 8px; margin-top: 14px; }
.gr-nao-aparece div { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 700; color: var(--cinza-fonte); line-height: 1.45; }
.gr-nao-aparece i { margin-top: 3px; width: 16px; text-align: center; }
.gr-sim i { color: #047857; }
.gr-nao i { color: #5b6474; }

/* ---- Configurações e Meus dados ---- */
.bloco-edit.gr-solido { border-style: solid; }
.gr-linha-config { margin-bottom: 10px; overflow-wrap: anywhere; }

/* ---- Pergunta de profissão (janela) ---- */
.gr-opcoes { display: grid; gap: 8px; }
.gr-opcao { display: flex; align-items: center; gap: 12px; min-height: 48px; border: 2px solid #e2e8f0; background: var(--fundo-site); border-radius: 14px; padding: 12px 14px; cursor: pointer; font-size: 14.5px; font-weight: 800; transition: border-color .2s, background .2s; }
.gr-opcao input { width: 20px; height: 20px; accent-color: var(--lilas-escuro); flex-shrink: 0; }
.gr-opcao.gr-on { border-color: var(--lilas); background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #5b21b6; }
.gr-opcao:focus-within { outline: 3px solid var(--lilas-escuro); outline-offset: 2px; }
.gr-aviso-reg { margin-top: 14px; background: #f5f3ff; border-radius: 14px; padding: 12px 14px; font-size: 12.5px; font-weight: 700; color: #4c1d95; line-height: 1.5; display: flex; gap: 10px; }
.gr-aviso-reg i { margin-top: 2px; }
.gr-erro { color: #b91c1c; font-size: 13.5px; font-weight: 800; margin-top: 12px; line-height: 1.5; }
.gr-erro:empty { display: none; }
.gr-modal-acoes .btn-modal { min-height: 48px; }

/* ---- Celular ---- */
@media (max-width: 900px) {
  body.modo-gratis .secao { max-width: 100%; }
}
@media (max-width: 600px) {
  .gr-planos { grid-template-columns: 1fr; }
  .gr-boas-vindas { padding: 18px; }
  .gr-cartao, .gr-convite { padding: 18px; }
  .gr-modal-acoes { flex-direction: column-reverse; }
  .gr-bloq .gr-btn-contorno { width: 100%; }
  .gr-pendente .gr-btn-escuro { width: 100%; }
}

/* ---- Movimento reduzido ---- */
@media (prefers-reduced-motion: reduce) {
  body.modo-gratis .secao.ativa,
  body.modo-gratis .modal-box { animation: none; }
  body.modo-gratis * { scroll-behavior: auto !important; transition: none !important; }
}

/* Etapa 3c: cartão "Pagamento" da primeira assinatura (Pix ou cartão + cupom). */
.gr-pagar { margin-top: 18px; }
.gr-rotulo { display: block; font-size: 13px; font-weight: 800; color: var(--lilas-escuro); margin: 12px 0 8px; }
.gr-cupom { width: 100%; max-width: 320px; padding: 12px 14px; border-radius: 12px; border: 2px solid #e2e8f0; font-family: inherit; font-size: 14px; font-weight: 800; text-transform: uppercase; }
.gr-pagar-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.gr-pagar-botoes button:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }