/* ─────────────────────────────────────────────────────────────────────────
   O atributo `hidden` tem de ganhar SEMPRE. Sem isto, qualquer regra de classe
   com `display` (e há dezenas: .modal, .pn-oculto, .faixa-estado…) sobrepõe-se
   ao `hidden` da folha do browser e o elemento fica visível para sempre.
   Aconteceu duas vezes: primeiro com o aviso de foco, depois com os modais —
   que ficaram todos abertos por cima do painel, sem forma de sair.
   ───────────────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* GlobRadar SaaS — o que a folha da loja não tem. Herda tudo o resto de style.css:
   mesmas cores, mesmas fontes, mesmos botões. O painel tem de parecer o mesmo produto. */

.nav-btn{background:var(--tinta); color:#fff !important; padding:8px 16px; border-radius:8px;
  font-weight:600}
.nav-btn:hover{background:var(--sinal)}

/* ─────────────────────────────────────────────────── montra: capacidades */
.cap-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px}
.cap{background:var(--branco); border:1px solid var(--grelha); border-radius:12px; padding:22px}
.cap-n{color:var(--sinal); font-size:.78rem; font-weight:600; letter-spacing:.1em}
.cap h3{font-size:1.12rem; margin:.5rem 0 .5rem}
.cap p{color:var(--cinza); font-size:.95rem}

/* ─────────────────────────────────────────────────── montra: demonstração */
.demo{display:grid; grid-template-columns:280px 1fr; gap:18px; margin-top:1.5rem}
.demo-filtros{background:var(--branco); border:1px solid var(--grelha); border-radius:12px;
  padding:16px; display:flex; flex-direction:column; gap:16px}
.demo-lbl{font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--cinza)}
.demo-termo{margin-top:6px; padding:9px 11px; border:1px solid var(--oceano); border-radius:8px;
  font-size:.9rem; background:#F2F7FA}
.demo-interp{font-size:.72rem; color:var(--oceano); margin-top:5px}
.demo-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.demo-chips i{font-style:normal; font-size:.78rem; padding:4px 9px; border-radius:20px;
  border:1px solid var(--grelha); color:var(--cinza)}
.demo-chips i.on{background:var(--tinta); color:#fff; border-color:var(--tinta)}
.demo-lin{font-size:.86rem; margin-top:6px; color:var(--cinza)}
.demo-lin b{color:var(--eco)}
.demo-barra{height:7px; background:var(--grelha); border-radius:5px; margin-top:8px; overflow:hidden}
.demo-barra span{display:block; height:100%; background:var(--sinal)}
.demo-tabela{background:var(--branco); border:1px solid var(--grelha); border-radius:12px;
  overflow:hidden}
.demo-topo{padding:12px 16px; border-bottom:1px solid var(--grelha); font-size:.82rem;
  color:var(--cinza); display:flex; justify-content:space-between}
.demo-tabela table{width:100%; border-collapse:collapse; font-size:.86rem}
.demo-tabela th{text-align:left; padding:9px 14px; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--cinza); border-bottom:1px solid var(--grelha)}
.demo-tabela td{padding:10px 14px; border-bottom:1px solid #EEF3F7}
.demo-tabela .tapado{font-family:var(--m); color:var(--grelha); background:#F4F8FA;
  border-radius:5px; letter-spacing:1px}
.demo-nota{padding:10px 16px; font-size:.72rem; color:var(--cinza)}
@media(max-width:860px){.demo{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────── montra: preços */
.precos-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;
  margin-top:1.6rem}
.preco-cartao{position:relative; background:var(--branco); border:1px solid var(--grelha);
  border-radius:14px; padding:24px 20px; display:flex; flex-direction:column}
.preco-cartao.destaque{border-color:var(--sinal); box-shadow:0 8px 26px rgba(232,89,12,.12)}
.preco-fita{position:absolute; top:-11px; left:20px; background:var(--sinal); color:#fff;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:20px}
.preco-cartao h3{font-size:1.05rem; color:var(--cinza); font-weight:600}
.preco-val{display:flex; align-items:baseline; gap:6px; margin:.5rem 0 .2rem}
.preco-val b{font-size:2.1rem; color:var(--tinta)}
.preco-val span{font-size:.82rem; color:var(--cinza)}
.preco-cobra{font-size:.75rem; color:var(--oceano); min-height:2.4em}
.preco-lista{list-style:none; margin:1rem 0 1.3rem; display:flex; flex-direction:column; gap:8px}
.preco-lista li{font-size:.87rem; color:var(--cinza); padding-left:18px; position:relative}
.preco-lista li::before{content:"›"; position:absolute; left:2px; color:var(--sinal); font-weight:700}
.preco-lista b{color:var(--tinta)}
.preco-cartao .btn{margin-top:auto}
.preco-teste{margin-top:2rem; background:var(--tinta); color:#fff; border-radius:14px;
  padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.preco-teste h3{font-size:1.3rem}
.preco-teste p{color:#C7D6E0; font-size:.94rem; max-width:640px; margin-top:.4rem}
.preco-teste b{color:#fff}
@media(max-width:760px){.preco-teste{flex-direction:column; align-items:flex-start}}

.comparar{width:100%; border-collapse:collapse; margin-top:1.4rem; background:var(--branco);
  border:1px solid var(--grelha); border-radius:12px; overflow:hidden}
.comparar th{text-align:left; padding:12px 16px; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--cinza); border-bottom:1px solid var(--grelha)}
.comparar td{padding:11px 16px; border-bottom:1px solid #EEF3F7; font-size:.9rem}
.comparar td:first-child{color:var(--cinza); width:34%}
.comparar b{color:var(--sinal)}

/* ───────────────────────────────────────────────────────── entrar / conta */
.caixa-central{max-width:440px; margin:4rem auto; background:var(--branco);
  border:1px solid var(--grelha); border-radius:14px; padding:32px}
.caixa-central h1{font-size:1.6rem; margin-bottom:.4rem}
.caixa-central .sub{color:var(--cinza); font-size:.92rem; margin-bottom:1.4rem}
.campo{display:block; margin-bottom:14px; font-size:.85rem; color:var(--cinza)}
.campo input, .campo select{width:100%; margin-top:5px; padding:11px 12px; font-size:.95rem;
  border:1px solid var(--grelha); border-radius:8px; background:var(--papel); font-family:var(--b)}
.campo input:focus{outline:2px solid var(--sinal); outline-offset:1px}
.erro-cx{background:#FDECE4; border:1px solid #F4B896; color:#A33A05; padding:10px 12px;
  border-radius:8px; font-size:.87rem; margin-bottom:12px}
.alt{margin-top:1.2rem; font-size:.87rem; color:var(--cinza); text-align:center}

.conta-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; margin:2rem 0}
.painel-cx{background:var(--branco); border:1px solid var(--grelha); border-radius:12px; padding:22px}
.painel-cx h2{font-size:1.15rem; margin-bottom:1rem}
.medidor{height:10px; background:var(--grelha); border-radius:6px; overflow:hidden; margin:10px 0 6px}
.medidor span{display:block; height:100%; background:var(--sinal)}
.linha-dado{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #EEF3F7;
  font-size:.9rem}
.linha-dado span:first-child{color:var(--cinza)}
@media(max-width:860px){.conta-grid{grid-template-columns:1fr}}

/* faixa de estado da conta: o cliente tem de perceber num segundo se já pagou,
   quando vai pagar, e o que acontece se não fizer nada */
.faixa-estado{display:flex; align-items:center; justify-content:space-between; gap:24px;
  border-radius:14px; padding:22px 26px; margin-bottom:1.6rem}
.faixa-estado h1{font-size:1.4rem; font-family:var(--d); font-weight:800}
.faixa-estado p{font-size:.92rem; margin-top:.4rem; max-width:720px}
.faixa-teste{background:var(--tinta); color:#fff}
.faixa-teste p{color:#C7D6E0} .faixa-teste b{color:#fff}
.faixa-ativo{background:#DDF3EE; color:#0B4A41; border:1px solid #A9DED4}
.faixa-ativo .btn-claro{background:#0B6B5E; color:#fff}
.faixa-fim{background:#FDECE4; color:#8A3204; border:1px solid #F4B896}
.faixa-fim .btn-claro{background:#C74A08; color:#fff}
.nota-teste{background:#F0F6F9; border-left:3px solid var(--oceano); border-radius:0 8px 8px 0;
  padding:12px 14px; font-size:.88rem; color:var(--tinta); line-height:1.55}
@media(max-width:760px){.faixa-estado{flex-direction:column; align-items:flex-start}}

/* aviso do teste dentro do painel */
.teste-barra{display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--tinta); color:#fff; padding:9px 20px; font-size:.86rem}
.teste-barra b{color:#fff}
.teste-barra a{color:#fff; font-weight:700; text-decoration:underline; white-space:nowrap}
.tabela-precos{width:100%; margin-top:14px; border-collapse:collapse; font-size:.84rem}
.tabela-precos td{padding:6px 0; border-bottom:1px solid #EEF3F7; vertical-align:top}
.tabela-precos td:nth-child(2){text-align:right; white-space:nowrap; padding-left:10px;
  color:var(--tinta); font-weight:600}
.tabela-precos .nota{color:var(--cinza); font-size:.78rem; padding-left:14px}