/* =====================================================================
   app.css  -  QR Dinamico  v0.5.0
   =====================================================================
   ORIGEM: este arquivo e o CSS do mockup-qr-saas-v2.html aprovado, trazido
   para o sistema. P-529: mockup aprovado e contrato visual. Nao reescreva
   do zero, e nao "melhore" a paleta: o dono aprovou o que esta aqui.

   Paleta unica em :root. Nenhuma cor solta em arquivo de tela (P-510).
   Contraste medido (P-103, minimo 4.5:1 para texto normal):
     --txt   #f2f2f4 sobre --panel2 #1b1b20 = 16.4:1
     --mut   #9a9aa5 sobre --panel2 #1b1b20 =  6.2:1
     --mut   #9a9aa5 sobre --panel3 #101014 =  6.8:1
     --yel   #ffc400 sobre --panel2 #1b1b20 = 12.3:1
     texto #111 sobre --yel                 = 12.1:1
     --ok    #3ddc97 sobre --panel2         = 10.9:1
     --warn  #ff7a59 sobre --panel2         =  7.3:1
     --pur   #b07cff sobre --panel2         =  7.1:1
   Nao troque nenhum destes valores sem medir de novo.

   NOMES DE CLASSE: este arquivo atende os nomes do mockup (.kpi, .grid2,
   .bars, .upsell, .side) E os nomes que as telas ja usavam (.grade, .num,
   .rotulo, .tabela-rol, .dica, .fraco). Os dois convivem de proposito, para
   a troca de visual nao exigir reescrever a logica de 9 telas.
   ===================================================================== */

:root{
  --bg:#0b0b0d; --panel:#141417; --panel2:#1b1b20; --panel3:#101014;
  --line:#2a2a31; --line2:#3a3a44;
  --txt:#f2f2f4; --mut:#9a9aa5;
  --yel:#ffc400; --yel2:#ffd84d;
  --ok:#3ddc97; --warn:#ff7a59; --blue:#5b8cff; --pur:#b07cff;
  --raio:12px;
  --lateral:236px;

  /* PONTE TEMPORARIA. Ate o pacote 004 as telas usavam estes nomes soltos em
     style=. Apagar um nome de variavel sem apagar quem usa deixa a cor VAZIA,
     e o elemento fica invisivel sem dar erro nenhum. Entao os nomes antigos
     continuam existindo, apontando para os novos, ate a ultima tela ser
     migrada. Some no 005. Nao use nenhum destes em codigo novo. */
  --amarelo:var(--yel); --amarelo-claro:var(--yel2);
  --painel:var(--panel); --painel2:var(--panel2); --fundo-form:var(--panel3);
  --linha:var(--line); --erro:var(--warn); --roxo:var(--pur);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{margin:0;background:var(--bg);color:var(--txt);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}

a{color:var(--yel);text-decoration:none}
a:hover{text-decoration:underline}

/* P-102: foco visivel sempre, em qualquer elemento que receba teclado. */
:focus-visible{outline:3px solid var(--yel2);outline-offset:2px;border-radius:6px}

/* P-107: quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------------
   Acessibilidade: pular para o conteudo e texto so para leitor de tela
   --------------------------------------------------------------------- */
.pular{position:absolute;left:-9999px;top:0;z-index:99;background:var(--yel);color:#111;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:800;font-size:13px}
.pular:focus{left:0;text-decoration:none}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Tarja de ambiente: so aparece fora de producao (P-613). */
.tarja{background:var(--warn);color:#1a0a05;text-align:center;font-weight:800;
  font-size:12px;letter-spacing:.06em;padding:6px 12px;text-transform:uppercase}

/* =====================================================================
   ESTRUTURA: menu lateral fixo + area de conteudo
   O mockup tem lateral de 236px. Abaixo de 960px ela vira barra no topo,
   com rolagem horizontal. O mockup escondia a lateral no celular
   (display:none), o que num mockup nao tem consequencia e num sistema de
   verdade deixa o usuario sem navegacao. DESVIO-005, registrado.
   ===================================================================== */
.app{display:grid;grid-template-columns:var(--lateral) 1fr;min-height:100vh}

.side{background:#0f0f12;border-right:1px solid var(--line);padding:18px 14px;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}

.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.3px;
  margin-bottom:6px;padding:6px;font-size:15px;color:var(--txt);border-radius:9px}
.logo:hover{text-decoration:none;background:var(--panel)}
.logo i{width:28px;height:28px;border-radius:8px;background:var(--yel);display:grid;
  place-items:center;color:#111;font-style:normal;font-size:14px;font-weight:900;flex:none}
.logo.dono i{background:var(--pur);color:#fff}

.sidetag{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);
  font-weight:800;padding:0 6px;margin-bottom:16px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

.nav{display:flex;flex-direction:column}
.nav a{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:9px;
  color:var(--mut);font-size:13.5px;font-weight:500;margin-bottom:2px;min-height:44px}
.nav a:hover{background:var(--panel);color:var(--txt);text-decoration:none}
.nav a[aria-current="page"]{background:rgba(255,196,0,.12);color:var(--yel);font-weight:700}
.nav.dono a[aria-current="page"]{background:rgba(176,124,255,.14);color:var(--pur)}
.nav a .ic{width:18px;text-align:center;opacity:.9;flex:none;font-style:normal}

.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;
  display:flex;align-items:center;gap:10px;font-size:13px}
.side-foot .quem{min-width:0;flex:1}
.side-foot .quem b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:12.5px}
.side-foot small{display:block;color:var(--mut);font-size:11px}

.avatar{width:32px;height:32px;border-radius:99px;
  background:linear-gradient(135deg,var(--yel),#ff9d00);color:#111;display:grid;
  place-items:center;font-weight:800;font-size:13px;flex:none}
.avatar.dono{background:linear-gradient(135deg,var(--pur),#6c47ff);color:#fff}

/* Faixa de "voce esta dentro da empresa X" (P-319: escopo emprestado e visivel). */
.emprestado{background:rgba(176,124,255,.14);border:1px solid rgba(176,124,255,.34);
  border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:12px;color:var(--txt)}
.emprestado b{display:block;color:var(--pur);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:3px}
.emprestado form{margin:8px 0 0}

.main{padding:24px 26px 70px;min-width:0;overflow-x:hidden}

.main-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap}
.main-head h1,.main-head h2{margin:0 0 4px;font-size:21px;letter-spacing:-.4px;font-weight:800}
.main-head p{margin:0;color:var(--mut);font-size:13px}
.main-head .acoes{display:flex;gap:8px;flex-wrap:wrap}

/* Tela que ainda nao usa cabecalho() continua legivel: o h1 solto recebe o
   mesmo tamanho do .main-head, e o paragrafo de apoio logo abaixo dele
   recebe a cor fraca. Ponte ate a ultima tela migrar. */
main > h1{font-size:21px;letter-spacing:-.4px;margin:0 0 4px;font-weight:800}
main > h1 + p{margin:0 0 18px;color:var(--mut);font-size:13px}
main > h2{font-size:15px;letter-spacing:-.2px;margin:26px 0 12px;font-weight:800}

/* =====================================================================
   BOTOES
   ===================================================================== */
.btn{background:var(--yel);color:#111;border:0;padding:11px 16px;border-radius:10px;
  font-weight:800;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;
  gap:7px;font-family:inherit;min-height:44px;justify-content:center;line-height:1.2}
.btn:hover{background:var(--yel2);text-decoration:none;color:#111}
.btn.pur{background:var(--pur);color:#fff}
.btn.pur:hover{background:#c39bff}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt);font-weight:600}
.btn.ghost:hover{background:var(--panel2);border-color:var(--line2);color:var(--txt)}
.btn.perigo{background:var(--warn);color:#1a0a05}
.btn.perigo:hover{background:#ff9576}
/* P-108: o alvo pequeno continua com 44px de area clicavel, so parece menor. */
.btn.sm{padding:7px 12px;font-size:12px;border-radius:8px;min-height:34px}
.btn.bloco,.btn.block{width:100%;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline{display:inline}

/* =====================================================================
   INDICADORES (mockup: .kpis/.kpi   sistema: .grade.g4 + .num + .rotulo)
   ===================================================================== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}

.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi small,.rotulo{color:var(--mut);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:800;display:block}
.kpi b,.num{display:block;font-size:25px;letter-spacing:-1px;margin-top:2px;font-weight:800}
.kpi b span,.num small{font-size:13px;color:var(--mut);font-weight:600;letter-spacing:0}
.kpi i{font-style:normal;font-size:11px;color:var(--ok);font-weight:700}
.kpi i.bad{color:var(--warn)}

/* =====================================================================
   CARTOES E GRADES
   ===================================================================== */
.card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:18px}
.card h3{margin:0 0 14px;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--mut);font-weight:800}
/* Cartoes EMPILHADOS numa coluna precisam de respiro entre eles. */
.card + .card{margin-top:16px}

/* Cartoes LADO A LADO nao. Dentro de grade quem separa e o gap, e esta margem
   vira erro de alinhamento: o primeiro cartao comeca 16px acima dos vizinhos e
   os outros perdem 16px de altura. E um desencontro pequeno, que ninguem
   chama de bug, e que faz a tela inteira parecer torta (E-152). */
.grid2 > .card + .card, .grid2e > .card + .card,
.grid3 > .card + .card, .grade > .card + .card,
.plans > .card + .card{margin-top:0}

/* align-items:start impede que o cartao mais curto estique ate a altura do
   mais alto e deixe um vazio preto embaixo do grafico. */
.grid2{display:grid;grid-template-columns:1.3fr .85fr;gap:16px;align-items:start}
.grid2e,.grade.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3,.grade.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grade.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grade{margin-bottom:18px}

/* =====================================================================
   FORMULARIO
   ===================================================================== */
label{display:block;font-size:12px;font-weight:700;margin:0 0 6px}

/* ATENCAO ao seletor. `input[type=text]` NAO casa com `<input id="nome">`, que
   e text por padrao mas nao TEM o atributo. Escrito daquele jeito, todo campo
   sem type= ficava sem estilo nenhum: sem fundo, sem borda e sem margem, o que
   colava a dica no campo. Encontrado pelo detector de sobreposicao (P-745).
   Por isso a regra e por exclusao, e nao por lista. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select,textarea,.input{
  width:100%;background:var(--panel3);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;color:var(--txt);font-size:13.5px;margin-bottom:13px;
  font-family:inherit;min-height:44px}
input[type=hidden]{display:none;margin:0}
textarea{min-height:96px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--line2)}
.input.mono,input.mono,.mono-campo{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}

/* Campo travado: e visivelmente diferente de campo vazio (P-511). */
.locked,input[readonly],input[disabled],select[disabled]{
  background:#0c0c0f;color:var(--mut);border-style:dashed}

.dupla,.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* A dica so encosta no campo quando vem LOGO DEPOIS dele.
   P-527: margem negativa nunca mora na classe, so na relacao. */
.dica,.hint{font-size:11.5px;color:var(--mut);margin:10px 0 14px}
.erro-campo{font-size:12px;color:var(--warn);font-weight:700;margin:10px 0 14px}
input + .dica, select + .dica, textarea + .dica, .swatches + .dica,
input + .hint, select + .hint, textarea + .hint,
input + .erro-campo, select + .erro-campo, textarea + .erro-campo{margin-top:-9px}

fieldset{border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 16px}
legend{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);
  font-weight:800;padding:0 6px}

/* =====================================================================
   TABELA
   ===================================================================== */
/* position:relative NAO e enfeite. Os rotulos so-para-leitor-de-tela (.sr) sao
   position:absolute sem left, entao usam a posicao estatica deles. Dentro de
   uma tabela que rola para o lado, essa posicao fica em x=856, e como o
   ancestral posicionado era o proprio HTML, a PAGINA INTEIRA passava a rolar
   na horizontal em 360px. A tabela clipava certo; quem vazava era o rotulo
   invisivel. Encontrado pelo detector, em empresas.php. */
.tabela-rol{position:relative;overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
.tabela-rol table{border:0;border-radius:0}

table{width:100%;border-collapse:collapse;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--mut);padding:11px 13px;border-bottom:1px solid var(--line);
  background:#17171c;font-weight:800;white-space:nowrap}
td{padding:12px 13px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#1f1f26}

.name,.nome{font-weight:700}
.sub,.fraco{color:var(--mut);font-size:11.5px}
.short,.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--yel)}
.qr-mini{width:36px;height:36px;background:#fff;border-radius:6px;padding:3px;display:block}
.qr-mini svg,.qr-mini img{display:block;width:100%;height:100%}

/* =====================================================================
   ETIQUETAS
   Os nomes de status do sistema apontam para as cores do mockup.
   ===================================================================== */
.tag{display:inline-block;font-size:10px;font-weight:800;padding:4px 9px;border-radius:99px;
  background:#26262e;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap}
.tag.ok,.tag.ativo{background:rgba(61,220,151,.14);color:var(--ok)}
.tag.warn,.tag.suspenso,.tag.arquivado{background:rgba(255,122,89,.14);color:var(--warn)}
.tag.blue,.tag.aguardando_pagamento{background:rgba(91,140,255,.16);color:var(--blue)}
.tag.pur{background:rgba(176,124,255,.16);color:var(--pur)}
.tag.yel,.tag.trial,.tag.pausado{background:rgba(255,196,0,.16);color:var(--yel)}

/* Recurso fora do plano: cadeado com o motivo, nunca link que da 403 (P-511). */
.cadeado{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut);
  background:#26262e;border:1px dashed var(--line2);border-radius:8px;padding:5px 10px}

/* =====================================================================
   BARRA DE COTA E GRAFICO DE BARRAS
   ===================================================================== */
.bar{height:7px;background:#26262e;border-radius:99px;overflow:hidden;margin-top:6px}
.bar span{display:block;height:100%;background:var(--yel);border-radius:99px}
.bar span.hot,.bar .hot{background:var(--warn)}
.bar span.pur{background:var(--pur)}

.quota{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);gap:10px}
.quota b{color:var(--txt)}

.bars{display:flex;align-items:flex-end;gap:5px;height:150px;padding-top:10px}
.bars div{flex:1;min-width:3px;background:linear-gradient(180deg,var(--yel),rgba(255,196,0,.25));
  border-radius:4px 4px 0 0;position:relative}
.bars.pur div{background:linear-gradient(180deg,var(--pur),rgba(176,124,255,.2))}
.bars div:hover::after{content:attr(data-v);position:absolute;top:-22px;left:50%;
  transform:translateX(-50%);font-size:11px;color:var(--yel);font-weight:800;white-space:nowrap;
  background:var(--panel3);border:1px solid var(--line);border-radius:6px;padding:2px 7px;z-index:2}
.axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mut);margin-top:8px}

/* Linha de lista: nome a esquerda, numero a direita. */
.line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:13px;gap:10px}
.line:last-child{border:0}
.line b{color:var(--yel)}
.line .sub{white-space:nowrap}

/* =====================================================================
   AVISOS
   ===================================================================== */
.flash{border-radius:12px;padding:13px 16px;margin:0 0 18px;font-size:13.5px;font-weight:600}
.flash.ok{background:rgba(61,220,151,.13);border:1px solid rgba(61,220,151,.34);color:var(--ok)}
.flash.erro{background:rgba(255,122,89,.13);border:1px solid rgba(255,122,89,.36);color:var(--warn)}

.upsell{background:linear-gradient(135deg,rgba(255,196,0,.14),rgba(255,196,0,.04));
  border:1px solid rgba(255,196,0,.35);border-radius:12px;padding:14px 16px;font-size:13px;
  margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.upsell b{color:var(--yel)}
.upsell .btn{margin-left:auto}

.note{background:rgba(255,196,0,.07);border:1px solid rgba(255,196,0,.26);border-radius:12px;
  padding:14px 16px;margin-top:22px;font-size:13.5px}
.note.pur{background:rgba(176,124,255,.08);border-color:rgba(176,124,255,.3)}
.note b{color:var(--yel)}
.note.pur b{color:var(--pur)}
ul.tight{margin:8px 0 0;padding-left:18px;color:var(--mut)}
ul.tight li{margin-bottom:5px}

/* P-501 e P-509: o vazio explica o motivo e ensina o proximo passo. */
.vazio{background:var(--panel2);border:1px dashed var(--line2);border-radius:12px;
  padding:34px 24px;text-align:center}
.vazio strong{display:block;font-size:16px;margin-bottom:6px}
.vazio p{color:var(--mut);font-size:13px;margin:0 auto 16px;max-width:460px}

/* =====================================================================
   PASSO A PASSO NUMERADO  (usado em dominio proprio e adequacao de plano)
   ===================================================================== */
.steps{display:grid;gap:10px}
.step{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:flex-start;
  background:var(--panel3);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.step .n{width:26px;height:26px;border-radius:99px;background:var(--yel);color:#111;
  font-weight:900;display:grid;place-items:center;font-size:12px}
.step .n.done{background:var(--ok);color:#062}
.step .n.wait{background:#33333c;color:var(--mut)}
.step strong{font-size:13.5px}
.step p{margin:3px 0 0;font-size:12.5px;color:var(--mut)}
.step code{background:#000;border:1px solid var(--line);border-radius:6px;padding:2px 7px;
  font-size:11.5px;color:var(--yel);display:inline-block;margin-top:5px}

/* =====================================================================
   PLANOS EM CARTAO
   ===================================================================== */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.plan{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;position:relative}
.plan.hi{border-color:var(--yel);box-shadow:0 0 0 1px rgba(255,196,0,.25) inset}
.plan h4{margin:0 0 2px;font-size:16px}
.plan .price{font-size:29px;font-weight:900;letter-spacing:-1.2px;margin:10px 0 2px}
.plan .price small{font-size:12px;font-weight:600;color:var(--mut);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:14px 0 18px;font-size:13px;color:var(--mut);flex:1}
.plan li{padding:5px 0;display:flex;gap:8px;align-items:flex-start}
.plan li b{color:var(--txt);font-weight:700}
.plan li .x{opacity:.35}
.ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--yel);
  color:#111;font-size:10px;font-weight:900;padding:3px 10px;border-radius:99px;
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}

/* =====================================================================
   PREVIA DO QR
   ===================================================================== */
.qr-big{background:#fff;border-radius:14px;padding:14px;display:inline-block}
.qr-big svg,.qr-big img{display:block}
.frame-cta{background:#111;color:var(--yel);font-weight:800;font-size:11px;letter-spacing:.12em;
  padding:7px;border-radius:0 0 8px 8px;text-align:center}
.preview{text-align:center}
/* Texto corrido nao fica centralizado: so a arte fica. Paragrafo centralizado
   e mais dificil de ler, porque o olho perde onde comeca a linha seguinte. */
.preview .note,.preview .dica,.preview p{text-align:left}
.dl{display:flex;gap:8px;justify-content:center;margin-top:13px;flex-wrap:wrap}

/* Paleta fechada de cor do QR (P-2404). Cor livre nao existe de proposito. */
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.swatches label{margin:0;cursor:pointer}
.swatches input{position:absolute;opacity:0;width:0;height:0;margin:0}
/* A borda clara e obrigatoria: sem ela o preto #111111 fica invisivel sobre o
   painel escuro, e a primeira cor da paleta parece um buraco. */
.swatches span{display:block;width:34px;height:34px;border-radius:9px;
  border:2px solid rgba(255,255,255,.22)}
.swatches input:checked + span{border-color:var(--yel);border-width:3px;transform:scale(1.06)}
.swatches input:focus-visible + span{outline:3px solid var(--yel2);outline-offset:2px}

/* =====================================================================
   LOGIN E TELAS PUBLICAS
   ===================================================================== */
.login-tela{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-caixa{width:100%;max-width:390px;background:var(--panel2);border:1px solid var(--line);
  border-radius:14px;padding:28px}
.login-caixa h1{font-size:20px;letter-spacing:-.4px;margin:0 0 6px}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;
  color:var(--txt);margin-bottom:18px}
.marca:hover{text-decoration:none}
.marca-ic{width:32px;height:32px;border-radius:9px;background:var(--yel);color:#111;
  display:grid;place-items:center;font-weight:900;font-size:13px;flex:none}

/* Pagina publica de venda. */
.land-top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 30px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.hero{text-align:center;padding:56px 24px 40px;
  background:radial-gradient(900px 380px at 50% 0%,rgba(255,196,0,.12),transparent 70%)}
.hero h1{font-size:38px;letter-spacing:-1.4px;margin:0 auto 12px;max-width:760px;line-height:1.15}
.hero h1 em{font-style:normal;color:var(--yel)}
.hero p{color:var(--mut);max-width:600px;margin:0 auto 22px;font-size:15px}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.proof{display:flex;gap:26px;justify-content:center;margin-top:26px;color:var(--mut);
  font-size:12px;flex-wrap:wrap}
.secao{max-width:1160px;margin:0 auto;padding:36px 24px}
.secao h2{font-size:24px;letter-spacing:-.6px;margin:0 0 6px;text-align:center}
.secao > p.sub{text-align:center;font-size:14px;margin:0 auto 24px;max-width:620px}

/* =====================================================================
   RODAPE
   ===================================================================== */
.rodape{color:var(--mut);font-size:12px;padding:22px 26px;border-top:1px solid var(--line);
  margin-top:26px}
.rodape a{color:var(--mut)}

/* =====================================================================
   RESPONSIVO
   960px: a lateral vira barra no topo, com rolagem horizontal.
   560px: indicadores e grades em coluna unica.
   Testado em 360px (P-505).
   ===================================================================== */
@media(max-width:960px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:10px;border-right:0;border-bottom:1px solid var(--line);padding:12px 14px;
    overflow:hidden;max-width:100%}
  .sidetag{margin:0;flex:1;min-width:0}
  /* min-width:0 e obrigatorio. Sem ele, a largura minima de um item flex e o
     min-content, entao o overflow-x:auto nao segura nada e a barra de menu
     empurra a pagina inteira para o lado. Encontrado a 360px, em empresas.php,
     onde o menu do dono tem os rotulos mais longos. */
  .nav{flex-direction:row;order:3;width:100%;min-width:0;max-width:100%;
    overflow-x:auto;gap:4px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .nav a{margin:0;white-space:nowrap;padding:10px 12px}
  .side-foot{margin:0;border-top:0;padding-top:0}
  .side-foot .quem{display:none}
  .emprestado{order:4;width:100%;margin:0}
  .main{padding:18px 16px 60px}
  .grid2,.grid2e,.grid3,.grade.g2,.grade.g3,.plans{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  .kpis,.kpis.k3,.grade.g4{grid-template-columns:1fr 1fr}
  .grid2,.grid2e,.grid3,.grade.g2,.grade.g3,.plans,.dupla,.row{grid-template-columns:1fr}
  .hero h1{font-size:28px;letter-spacing:-1px}
  .main-head{gap:10px}
  .main-head .acoes,.main-head .btn{width:100%}
  .upsell .btn{margin-left:0;width:100%}
}

@media(max-width:380px){
  .kpis,.kpis.k3,.grade.g4{grid-template-columns:1fr}
}

/* Impressao: sem lateral, sem botao, so o conteudo. */
@media print{
  .side,.rodape,.btn,.tarja,.pular{display:none !important}
  .app{display:block}
  body{background:#fff;color:#111}
  .card,.kpi,table{background:#fff;border-color:#ccc}
}