:root {
  --fundo: #fbf8f1;
  --cartao: #ffffff;
  --texto: #1d1709;
  --suave: #6f6450;
  --borda: #ece2cc;
  --cor: #f5b000;
  --cor-escura: #8a5a00;
  --cor-clara: #fff2cc;
  --sobre-cor: #1d1500;
  --grad: linear-gradient(90deg, #ffd34d 0%, #ffb800 50%, #ff9a00 100%);
  --ok: #1f8a4c;
  --ok-claro: #e3f4ea;
  --alerta: #9a6400;
  --alerta-claro: #fff3d6;
  --erro: #c0352b;
  --raio: 14px;
  /* ilustração do celular */
  --cel-moldura: #2a211c;
  --cel-topo: #f4ece6;
  --cel-chat: #efe5dc;
  --balao: #ffffff;
  --foto-fundo: #fff2cc;
  --foto-luz: #ffe08a;
  --foto-fone: #2a211c;
  --foto-almofada: #75665d;
}
/* Tema escuro: segue o celular, a não ser que a pessoa escolha no botão do topo */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0a0907; --cartao: #14110b; --texto: #f5efe2; --suave: #b0a690; --borda: #2e2614;
    --cor: #ffbf1f; --cor-escura: #ffd34d; --cor-clara: #2c2208; --sobre-cor: #1d1500;
    --ok: #4cc785; --ok-claro: #17301f; --alerta: #f2b84b; --alerta-claro: #33280f; --erro: #ff7a70;
    --cel-moldura: #000000; --cel-topo: #2b231e; --cel-chat: #1d1815; --balao: #2f2621;
    --foto-fundo: #2c2208; --foto-luz: #4a3a10; --foto-fone: #f3ebe5; --foto-almofada: #b3a59b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --fundo: #0a0907; --cartao: #14110b; --texto: #f5efe2; --suave: #b0a690; --borda: #2e2614;
    --cor: #ffbf1f; --cor-escura: #ffd34d; --cor-clara: #2c2208; --sobre-cor: #1d1500;
    --ok: #4cc785; --ok-claro: #17301f; --alerta: #f2b84b; --alerta-claro: #33280f; --erro: #ff7a70;
    --cel-moldura: #000000; --cel-topo: #2b231e; --cel-chat: #1d1815; --balao: #2f2621;
    --foto-fundo: #2c2208; --foto-luz: #4a3a10; --foto-fone: #f3ebe5; --foto-almofada: #b3a59b;
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.oculto { display: none !important; }
a { color: var(--cor-escura); }

.topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; max-width: 640px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.logo { display: block; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; }
main { max-width: 640px; margin: 0 auto; padding: 0 16px 48px; }

/* Topo com a foto de fundo: sempre escuro, nos dois temas */
.hero {
  --hero-texto: #ffffff;
  --hero-suave: #c9d6ea;
  position: relative; overflow: hidden; border-radius: 22px; padding: 20px 18px 22px; margin: 4px 0 16px;
  color: var(--hero-texto);
  background: #050b18 url("img/fundo-topo.jpg") center / cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 9, 22, 0.35) 0%, rgba(4, 9, 22, 0.7) 55%, rgba(4, 9, 22, 0.92) 100%); }
.hero > * { position: relative; }
.hero h1 { font-size: 28px; line-height: 1.2; margin: 12px 0 8px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--cor-escura); }
.hero > p { color: var(--hero-suave); margin: 0 0 14px; }
.beneficios { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 14px; color: var(--hero-texto); }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 16px; margin-bottom: 14px; }
.cartao h2 { font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.num { background: var(--cor); color: var(--sobre-cor); width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.tag { font-size: 12px; font-weight: 500; background: var(--cor-clara); color: var(--cor-escura); padding: 2px 8px; border-radius: 99px; }
.ola { margin: 4px 0 12px; font-size: 18px; }
.dica { color: var(--suave); font-size: 14px; margin: 0 0 12px; }

label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
input, select { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; }
input:focus, select:focus { outline: 2px solid var(--cor); outline-offset: 0; border-color: transparent; }
.linha-check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.linha-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--cor); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.botao { display: inline-flex; justify-content: center; align-items: center; gap: 6px; width: 100%; padding: 12px 16px; font: inherit; font-weight: 600; border-radius: 10px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); cursor: pointer; }
.botao:active { transform: scale(0.98); }
.botao.principal { background: var(--cor); border-color: var(--cor); color: var(--sobre-cor); }
.botao.perigo { color: var(--erro); }
.botao:disabled { opacity: 0.6; }
.acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.link { background: none; border: 0; color: var(--suave); font: inherit; cursor: pointer; text-decoration: underline; }

.abas { display: grid; grid-template-columns: 1fr 1fr; background: var(--fundo); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.aba { padding: 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-weight: 600; color: var(--suave); cursor: pointer; }
.aba.ativa { background: var(--cartao); color: var(--texto); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.erro { color: var(--erro); font-size: 14px; min-height: 1em; margin: 8px 0 0; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 4px 10px; border-radius: 99px; }
.status.ok { background: var(--ok-claro); color: var(--ok); }
.status.alerta { background: var(--alerta-claro); color: var(--alerta); }
.status.parado { background: var(--fundo); color: var(--suave); }
.qr { display: block; width: 240px; max-width: 100%; margin: 12px auto; border-radius: 10px; background: #fff; padding: 8px; }
.passos { font-size: 14px; color: var(--suave); padding-left: 20px; margin: 8px 0 12px; }

.plano-ativo { border-color: var(--ok); }
.plano-pendente { border-color: var(--cor); }
.precos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.preco { border: 1px solid var(--borda); border-radius: 12px; padding: 12px; text-align: center; }
.preco.destaque { border: 2px solid var(--cor); }
.preco strong { display: block; font-size: 22px; }
.preco small { color: var(--suave); }
.pix { background: var(--fundo); border-radius: 10px; padding: 10px 12px; font-size: 14px; word-break: break-all; margin-bottom: 10px; }

.lista { list-style: none; padding: 0; margin: 12px 0 0; }
.lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.lista li small { color: var(--suave); display: block; }
.lista .vazio { color: var(--suave); justify-content: center; }
.grupo { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borda); font-weight: 400; margin: 0; }
.grupo input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--cor); }

.previa { white-space: pre-wrap; background: var(--fundo); border-radius: 10px; padding: 12px; font-size: 14px; margin-top: 12px; word-break: break-word; }
.previa img { width: 100%; max-width: 260px; border-radius: 8px; display: block; margin-bottom: 8px; }

.aviso { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 480px; margin: 0 auto; background: var(--texto); color: var(--fundo); padding: 12px 16px; border-radius: 12px; font-size: 14px; z-index: 10; }

/* Admin */
.cliente { border-top: 1px solid var(--borda); padding: 12px 0; }
.cliente:first-child { border-top: 0; }
.cliente .botoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.cliente .botoes .botao { padding: 9px; font-size: 14px; }
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.resumo div { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; text-align: center; }
.resumo strong { display: block; font-size: 22px; }
.resumo small { color: var(--suave); font-size: 12px; }

/* ===== Ilustração do topo: celular com a oferta postada ===== */
.vitrine { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 8px 0 20px; }
.celular { color: var(--texto); width: 100%; max-width: 280px; background: var(--cel-moldura); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 30px; padding: 10px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7); transform: rotate(-2deg); }
.cel-topo { display: flex; align-items: center; gap: 10px; background: var(--cel-topo); border-radius: 22px 22px 0 0; padding: 12px 14px; }
.cel-av { display: block; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.cel-nome { min-width: 0; line-height: 1.25; }
.cel-nome strong { display: block; font-size: 14px; }
.cel-nome small { display: block; font-size: 11px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-chat { background: var(--cel-chat); border-radius: 0 0 22px 22px; padding: 12px 10px 14px; }
.balao { position: relative; background: var(--balao); border-radius: 4px 12px 12px 12px; padding: 6px 6px 18px; font-size: 13px; line-height: 1.4; }
.balao p { margin: 6px 4px 0; }
.balao s { color: var(--suave); }
.balao-autor { font-size: 12px; font-weight: 700; color: var(--cor-escura); margin: 0 4px 6px; }
.balao-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.balao-link { color: var(--cor-escura); }
.balao-hora { position: absolute; right: 8px; bottom: 4px; font-size: 10px; color: var(--suave); }
.reacoes { display: flex; gap: 6px; margin-top: -6px; padding-left: 10px; position: relative; }
.reacoes span { background: var(--balao); border: 1px solid var(--cel-chat); border-radius: 99px; padding: 1px 7px; font-size: 11px; }
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: var(--ok-claro); color: var(--ok); padding: 6px 12px; border-radius: 99px; text-align: center; }
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
@media (min-width: 640px) {
  .hero { display: grid; grid-template-columns: 1fr 280px; grid-template-areas: "titulo vitrine" "texto vitrine" "lista vitrine"; column-gap: 32px; align-items: start; }
  .hero h1 { grid-area: titulo; }
  .hero > p { grid-area: texto; }
  .hero .beneficios { grid-area: lista; grid-template-columns: 1fr; }
  .vitrine { grid-area: vitrine; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .celular { transform: none; } }

/* ===== Escolher foto da oferta ===== */
.foto-campo { margin-bottom: 14px; }
.foto-titulo { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.dica-inline { font-weight: 400; color: var(--suave); }
.foto-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.foto-escolher { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px; border: 1.5px dashed var(--borda); border-radius: 12px; background: var(--fundo); cursor: pointer; font-weight: 400; }
.foto-escolher:hover, .foto-input:focus-visible + .foto-escolher { border-color: var(--cor); }
.foto-escolher strong { display: block; font-size: 15px; }
.foto-escolher small { display: block; color: var(--suave); font-size: 13px; }
.foto-icone { width: 44px; height: 44px; border-radius: 10px; background: var(--cor-clara); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
.foto-previa { display: flex; gap: 12px; align-items: center; }
.foto-previa img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borda); flex: none; }
.foto-acoes { display: grid; gap: 8px; flex: 1; min-width: 0; }
.foto-acoes .botao { margin: 0; padding: 9px; font-size: 14px; }
.foto-mini { width: 40px; height: 40px; border-radius: 8px; background: var(--cor-clara); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 18px; }
.lista li .item-fila { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lista li .item-fila > span:last-child { min-width: 0; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* ===== Filtros do admin ===== */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtro { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.filtro span { background: var(--fundo); color: var(--suave); border-radius: 99px; padding: 0 8px; font-size: 12px; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.filtro.ativo { background: var(--cor); border-color: var(--cor); color: var(--sobre-cor); }
.filtro.ativo span { background: rgba(0, 0, 0, 0.15); color: var(--sobre-cor); }
.filtro:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }

/* ===== Cartões de recursos (página inicial) ===== */
.recursos { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 4px 0 18px; }
.recurso { background: var(--cartao); border: 1px solid var(--borda); border-radius: 22px; padding: 22px 20px; box-shadow: 0 8px 24px -16px rgba(42, 33, 28, 0.25); }
.recurso-icone { width: 56px; height: 56px; border-radius: 50%; background: var(--cor-clara); color: var(--cor-escura); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.recurso-icone svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.recurso h3 { font-size: 19px; margin: 0 0 6px; text-wrap: balance; }
.recurso p { margin: 0; color: var(--suave); font-size: 15px; line-height: 1.55; }

/* ===== Painel em tempo real ===== */
.painel-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.painel-topo h2 { margin: 0; }
.ao-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ok); text-transform: uppercase; letter-spacing: 0.08em; background: var(--ok-claro); padding: 4px 10px; border-radius: 99px; }
.ao-vivo .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.pn-rotulo { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--suave); }
.pn-aviso { font-size: 13px; color: var(--alerta); background: var(--alerta-claro); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }

.pn-hero { background: var(--fundo); border: 1px solid var(--borda); border-radius: 16px; padding: 16px; display: grid; gap: 12px; }
.pn-hero-num strong { display: block; font-size: 46px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 4px 0 6px; }
.pn-hero-num strong.pulou { animation: pulou 0.9s ease-out; }
@keyframes pulou { 0% { color: var(--ok); transform: scale(1.06); } 100% { color: inherit; transform: none; } }
.pn-delta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; }
.pn-delta span { font-weight: 400; color: var(--suave); }
.pn-delta.sobe { color: var(--ok); }
.pn-delta.desce { color: var(--erro); }
.pn-delta.neutro { color: var(--suave); font-weight: 400; }
.grafico-horas { width: 100%; height: auto; display: block; }
.grafico-horas .gh-barra { fill: var(--cor); opacity: 0.45; }
.grafico-horas .gh-agora { fill: var(--cor); }
.grafico-horas .gh-futuro { fill: var(--borda); }
.grafico-horas text { fill: var(--suave); font-size: 9px; font-family: inherit; }

.pn-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@media (min-width: 560px) { .pn-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pn-kpi { border: 1px solid var(--borda); border-radius: 14px; padding: 12px; }
.pn-kpi strong { display: block; font-size: 26px; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pn-kpi small { display: block; font-size: 11px; color: var(--suave); }

.pn-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 12px; background: var(--fundo); }
.ponto-status { width: 9px; height: 9px; border-radius: 50%; background: var(--suave); flex: none; }
.pn-status.ok .ponto-status { background: var(--ok); }
.pn-status.alerta { color: var(--alerta); background: var(--alerta-claro); }
.pn-status.alerta .ponto-status { background: var(--alerta); }

.pn-secao { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; min-width: 0; }
.pn-secao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.pn-secao h3 { font-size: 15px; margin: 0; }
.pn-legenda { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--suave); }
.pn-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-left: 4px; }
.lg-cliques { background: var(--cor); }
.lg-msgs { background: var(--borda); }
.pn-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; }
.pn-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pn-dia-valor { font-size: 11px; font-weight: 700; min-height: 14px; font-variant-numeric: tabular-nums; }
.pn-barras { display: flex; align-items: flex-end; gap: 3px; height: 82px; }
.pn-barras span { width: 11px; border-radius: 4px 4px 2px 2px; }
.b-cliques { background: var(--cor); opacity: 0.55; }
.b-msgs { background: var(--borda); }
.pn-dia.hoje .b-cliques { opacity: 1; }
.pn-dia small { font-size: 11px; color: var(--suave); }
.pn-dia.hoje small { color: var(--texto); font-weight: 700; }
.pn-rodape { font-size: 12px; color: var(--suave); text-align: center; margin: 8px 0 0; font-variant-numeric: tabular-nums; }

.pn-duas { display: grid; grid-template-columns: 1fr; column-gap: 20px; }
@media (min-width: 560px) { .pn-duas { grid-template-columns: 1fr 1fr; } }
.pn-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pn-lista li { display: flex; gap: 10px; align-items: center; }
.pn-pos { width: 22px; height: 22px; border-radius: 7px; background: var(--fundo); color: var(--suave); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.pn-lista li:first-child .pn-pos { background: var(--cor-clara); color: var(--cor-escura); }
.pn-item { flex: 1; min-width: 0; }
.pn-item-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.pn-item-topo strong { font-variant-numeric: tabular-nums; }
.pn-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pn-trilho { display: block; height: 6px; border-radius: 99px; background: var(--fundo); margin-top: 5px; overflow: hidden; }
.pn-trilho span { display: block; height: 100%; border-radius: 99px; background: var(--cor); }
.pn-vazio { font-size: 13px; color: var(--suave); margin: 0; }
.pn-feed { list-style: none; margin: 0; padding: 0; }
.pn-feed li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.pn-feed li:last-child { border-bottom: 0; }
.pn-feed li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-feed small { font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-feed time { font-size: 12px; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pn-feed-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.pn-feed li:first-child .pn-feed-ponto { box-shadow: 0 0 0 4px var(--ok-claro); }
@media (prefers-reduced-motion: reduce) { .ao-vivo .ponto, .pn-hero-num strong.pulou { animation: none; } }

/* ===== Botão de tema (claro / escuro) ===== */
.topo-acoes { display: flex; align-items: center; gap: 12px; }
.tema-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.tema-btn:hover { border-color: var(--cor); }
.tema-btn:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }
.tema-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tema-btn .ic-sol { display: none; }
:root[data-tema-efetivo="escuro"] .tema-btn .ic-sol { display: block; }
:root[data-tema-efetivo="escuro"] .tema-btn .ic-lua { display: none; }

/* ===== Admin: planilha de clientes ===== */
.resumo-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .resumo-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.barra-lista { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.barra-lista .botao { width: auto; }
.visoes { display: inline-flex; background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 3px; }
.visao { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--suave); padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.visao.ativo { background: var(--cartao); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.visao:focus-visible { outline: 2px solid var(--cor); outline-offset: 1px; }
#lista:has(.planilha) { padding: 0; overflow: hidden; }
#lista:has(.planilha) > .dica { padding: 0 14px 14px; }
.planilha-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.planilha { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.planilha th { position: sticky; top: 0; background: var(--fundo); text-align: left; border-bottom: 1px solid var(--borda); padding: 0; white-space: nowrap; }
.planilha th button { all: unset; display: block; padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); cursor: pointer; }
.planilha th button:focus-visible { outline: 2px solid var(--cor); }
.planilha th.nr button { text-align: right; }
.planilha td { padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; white-space: nowrap; }
.planilha td:first-child { white-space: normal; min-width: 180px; }
.planilha td:first-child strong { display: block; }
.planilha td:first-child small { display: block; color: var(--suave); font-size: 12px; }
.planilha td:first-child a { font-size: 12px; }
.planilha .nr { text-align: right; }
.planilha tbody tr:hover { background: var(--fundo); }
.planilha tfoot td { font-weight: 700; border-bottom: 0; background: var(--fundo); color: var(--texto); }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--fundo); color: var(--suave); }
.pill.ok { background: var(--ok-claro); color: var(--ok); }
.pill.alerta { background: var(--alerta-claro); color: var(--alerta); }
.pill.erro { background: var(--cor-clara); color: var(--erro); }
.pill.plano-anual { background: var(--cor); color: var(--sobre-cor); }
.pill.plano-mensal { background: var(--cor-clara); color: var(--cor-escura); }
.pill.plano-teste { background: var(--fundo); color: var(--suave); border: 1px dashed var(--borda); }

/* ===== Planos: cartões Start / Pro / Premium ===== */
.precos-inicio { margin: 8px 0 22px; }
.sec-titulo { font-size: 24px; margin: 0 0 4px; text-wrap: balance; }
.sec-sub { color: var(--suave); margin: 0 0 14px; }
.ciclo { display: flex; background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.ciclo-op { flex: 1; border: 0; background: none; font: inherit; font-weight: 700; color: var(--suave); padding: 10px 8px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ciclo-op.ativo { background: var(--cartao); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.ciclo-op:focus-visible { outline: 2px solid var(--cor); outline-offset: 1px; }
.ciclo-desc { font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-claro); padding: 2px 7px; border-radius: 99px; }
.pcs { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pc { position: relative; background: var(--cartao); border: 1px solid var(--borda); border-radius: 22px; padding: 22px 18px 18px; display: flex; flex-direction: column; }
.pc.destaque { border: 2px solid var(--cor); box-shadow: 0 14px 36px -18px var(--cor); }
.pc.escolhido { outline: 3px solid var(--ok); outline-offset: 2px; }
.pc-selo { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--cor); color: var(--sobre-cor); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 14px; border-radius: 99px; white-space: nowrap; }
.pc-tag { align-self: stretch; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; color: var(--cor-escura); background: var(--cor-clara); border: 1px solid var(--borda); border-radius: 99px; padding: 8px 16px; }
.pc-premium .pc-tag { color: #fff; background: var(--texto); border-color: var(--texto); }
:root[data-tema-efetivo="escuro"] .pc-premium .pc-tag { color: var(--fundo); }
.pc-resumo { color: var(--suave); margin: 12px 0 6px; font-size: 15px; }
.pc-preco { display: flex; align-items: flex-start; gap: 2px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pc-rs { font-size: 16px; font-weight: 800; color: var(--suave); margin-top: 8px; }
.pc-preco strong { font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.pc-per { align-self: flex-end; font-size: 16px; color: var(--suave); margin-bottom: 4px; }
.pc-equiv { display: block; color: var(--suave); font-size: 13px; margin-top: 4px; }
.pc-lista { list-style: none; margin: 16px 0 18px; padding: 16px 0 0; border-top: 1px solid var(--borda); display: grid; gap: 10px; flex: 1; }
.pc-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.pc-lista .check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ok); color: var(--ok); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.pc-lista li.nao { color: var(--suave); }
.pc-lista li.nao .check { border-color: var(--borda); color: var(--suave); }
.pc .botao { text-decoration: none; }
.pc-atual { background: var(--ok-claro); color: var(--ok); border-color: var(--ok-claro); cursor: default; }
.pc-pix { margin-top: 14px; display: grid; gap: 8px; }
.plano-topo { display: flex; justify-content: space-between; gap: 10px; }
.limites { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.limites li { background: var(--fundo); border-radius: 12px; padding: 10px 8px; text-align: center; }
.limites strong { display: block; font-size: 18px; }
.limites small { display: block; font-size: 12px; color: var(--suave); }
.limite-grupos { font-size: 13px; font-weight: 700; color: var(--cor-escura); background: var(--cor-clara); border-radius: 99px; padding: 5px 12px; display: inline-block; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.grupo input:disabled + * , .grupo:has(input:disabled) { opacity: 0.5; }
.upsell { margin-top: 10px; }
.pn-bloqueado { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
.pn-bloqueado .pn-cadeado { width: 40px; height: 40px; border-radius: 12px; background: var(--cor-clara); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.pn-bloqueado strong { display: block; }
.pn-bloqueado small { display: block; color: var(--suave); font-size: 13px; }
.pn-bloqueado .botao { grid-column: 1 / -1; }

/* ===== Admin: níveis ===== */
.faturamento { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; display: grid; }
.faturamento span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--suave); }
.faturamento strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.faturamento small { color: var(--suave); font-size: 12px; }
.pill.nivel-start { background: var(--cor-clara); color: var(--cor-escura); }
.pill.nivel-pro { background: var(--cor); color: var(--sobre-cor); }
.pill.nivel-premium { background: var(--texto); color: var(--fundo); }
.cliente .botoes { grid-template-columns: 1fr 1fr; }
.cliente .botoes .sel-plano { grid-column: 1 / -1; margin: 0; }
.ciclo-op { flex-direction: column; gap: 3px; }
.ciclo-desc { white-space: nowrap; }
.esqueci { display: block; margin: 12px auto 0; font-size: 14px; }

/* ===== Página de vendas: blocos, comparativo, perguntas, barra fixa ===== */
.bloco { margin: 26px 0; }
.sobretitulo { display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cor-escura); margin-bottom: 6px; }
.passos-como { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.passos-como li { display: flex; gap: 14px; align-items: flex-start; background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; padding: 16px; }
.passo-n { width: 34px; height: 34px; border-radius: 50%; background: var(--cor); color: var(--sobre-cor); font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.passos-como strong { display: block; font-size: 16px; }
.passos-como p { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
.comparar { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .comparar { grid-template-columns: 1fr 1fr; } }
.comparar-col { border-radius: 18px; padding: 16px; border: 1px solid var(--borda); background: var(--cartao); }
.comparar-col.com { border: 2px solid var(--ok); }
.comparar-tag { display: inline-block; font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 99px; margin-bottom: 10px; }
.sem .comparar-tag { background: var(--cor-clara); color: var(--erro); }
.com .comparar-tag { background: var(--ok-claro); color: var(--ok); }
.comparar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.comparar li { display: flex; gap: 8px; }
.sem li::before { content: "✕"; color: var(--erro); font-weight: 800; }
.sem li { color: var(--suave); }
.com li::before { content: "✓"; color: var(--ok); font-weight: 800; }
.faq details { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 0 16px; margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cor-escura); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 14px; color: var(--suave); font-size: 15px; }
.cta-fixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: linear-gradient(to top, var(--fundo) 70%, transparent); transition: transform 0.25s ease, opacity 0.25s ease; }
.cta-fixo .botao { max-width: 608px; margin: 0 auto; display: flex; font-size: 17px; padding: 14px; box-shadow: 0 10px 30px -10px var(--cor); }
.cta-fixo.escondido { transform: translateY(110%); opacity: 0; pointer-events: none; }
body.com-cta main { padding-bottom: 96px; }
.whats-flutuante { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 21; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.5); }
.whats-flutuante svg { width: 30px; height: 30px; fill: currentColor; }
body.com-cta .whats-flutuante { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.whats-flutuante:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cta-fixo { transition: none; } }
.acesso-titulo { font-size: 18px; margin: 0 0 12px; }
.abas { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; }
.abas .aba.oculto { display: none; }

/* =====================================================================
   PÁGINA DE VENDAS (estilo escuro com brilho laranja)
   Só vale na tela de entrada (body.com-cta); o painel do cliente não muda.
   ===================================================================== */
body.com-cta {
  --lp-fundo: #0b0908;
  --lp-cartao: #15100e;
  --lp-cartao2: #1c1512;
  --lp-borda: rgba(255, 106, 54, 0.28);
  --lp-borda-forte: rgba(255, 106, 54, 0.65);
  --lp-texto: #f6eee9;
  --lp-suave: #a99a90;
  --lp-laranja: #ff6a36;
  --lp-grad: linear-gradient(90deg, #ff3d1f 0%, #ff7a1a 55%, #ffa524 100%);
  --lp-verde: #22c55e;
  background: var(--lp-fundo);
  color: var(--lp-texto);
}
body.com-cta .topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; background: rgba(11, 9, 8, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
body.com-cta::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 16; background: var(--lp-fundo); }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: inherit; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.menu-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
body.com-cta .menu-btn { display: inline-flex; }
.menu-topo { position: sticky; top: calc(68px + env(safe-area-inset-top, 0px)); z-index: 14; display: grid; gap: 2px; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); background: rgba(11, 9, 8, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.menu-topo a { color: var(--lp-texto, #fff); text-decoration: none; font-weight: 700; padding: 12px 8px; border-radius: 10px; }
.menu-topo a:hover { background: rgba(255, 255, 255, 0.05); }
.menu-topo .menu-entrar { color: var(--lp-laranja, #ff6a36); }

/* Topo */
#telaEntrar { position: relative; }
.lp-hero { position: relative; padding: 26px 2px 8px; }
.lp-hero::before { content: ""; position: absolute; inset: -40px -16px auto; height: 380px; background: radial-gradient(60% 60% at 30% 20%, rgba(255, 90, 31, 0.22), transparent 70%); pointer-events: none; z-index: -1; }
.lp-pilula { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--lp-laranja); background: rgba(255, 106, 54, 0.1); border: 1px solid var(--lp-borda); padding: 6px 12px; border-radius: 99px; }
.lp-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-laranja); box-shadow: 0 0 10px var(--lp-laranja); }
.lp-hero h1 { font-size: clamp(38px, 11vw, 56px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; margin: 16px 0 14px; text-wrap: balance; }
.lp-hero h1 em, .lp-titulo em { font-style: normal; background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { color: var(--lp-suave); font-size: 16px; line-height: 1.6; margin: 0 0 18px; }
.lp-lead strong { color: var(--lp-texto); }
.lp-chips { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-chips li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 10px 12px; border-radius: 12px; background: var(--lp-cartao); border: 1px solid rgba(255, 255, 255, 0.08); }
.lp-botao { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; border-radius: 14px; font-weight: 800; font-size: 17px; text-decoration: none; color: #fff; background: var(--lp-grad); box-shadow: 0 12px 34px -12px rgba(255, 80, 20, 0.9); border: 0; cursor: pointer; font-family: inherit; }
.lp-botao.fantasma { background: var(--lp-cartao); color: var(--lp-texto); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.1); margin-top: 10px; font-size: 16px; }
.lp-botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lp-garantia { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 14px; font-weight: 700; color: var(--lp-verde); }
.lp-garantia span { width: 20px; height: 20px; border-radius: 50%; background: rgba(34, 197, 94, 0.15); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.lp-mini { color: var(--lp-suave); font-size: 13px; margin: 0; }

/* Mini painel */
.lp-janela { margin: 24px 0 8px; background: linear-gradient(180deg, #1d1411, #120d0b); border: 1px solid var(--lp-borda); border-radius: 20px; padding: 14px; box-shadow: 0 0 0 1px rgba(255, 106, 54, 0.08), 0 30px 60px -30px rgba(255, 80, 20, 0.6); }
.lp-janela-topo { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lp-suave); margin-bottom: 12px; }
.lp-janela-topo i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.lp-janela-topo i:nth-child(2) { background: #febc2e; }
.lp-janela-topo i:nth-child(3) { background: #28c840; }
.lp-janela-topo span { margin-left: auto; font-weight: 700; color: #ff8a5f; }
.lp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-kpis div { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 10px; }
.lp-kpis small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-suave); font-weight: 700; }
.lp-kpis strong { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.lp-kpis .laranja { color: var(--lp-laranja); }
.lp-barras-rotulo { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-suave); font-weight: 700; margin: 12px 0 6px; }
.lp-barras { display: flex; align-items: flex-end; gap: 5px; height: 80px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.lp-barras span { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #ff9a3c, #ff5a1f); opacity: 0.55; }
.lp-barras span.agora { opacity: 1; box-shadow: 0 0 14px rgba(255, 106, 54, 0.8); }
.lp-janela-rodape { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.lp-janela-rodape b { color: var(--lp-verde); white-space: nowrap; }
.lp-ficticio { font-size: 11px; color: var(--lp-suave); margin: 8px 2px 0; }

/* Faixa rolando */
.lp-faixa { margin: 28px -16px 6px; overflow: hidden; border-block: 1px solid rgba(255, 255, 255, 0.06); padding: 12px 0; }
.lp-faixa-trilho { display: flex; gap: 22px; width: max-content; animation: lp-rolar 28s linear infinite; }
.lp-faixa span { font-size: 14px; font-weight: 800; letter-spacing: 0.22em; color: rgba(246, 238, 233, 0.45); white-space: nowrap; }
.lp-faixa b { color: var(--lp-laranja); }
@keyframes lp-rolar { to { transform: translateX(-50%); } }

/* Seções */
.lp-sec { margin: 40px 0; }
.lp-etiqueta { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-laranja); border: 1px solid var(--lp-borda); background: rgba(255, 106, 54, 0.08); padding: 5px 12px; border-radius: 99px; margin-bottom: 12px; }
.lp-etiqueta.vermelha { color: #ff5a5a; border-color: rgba(255, 90, 90, 0.35); background: rgba(255, 90, 90, 0.08); }
.lp-titulo { font-size: clamp(28px, 8vw, 38px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 10px; text-wrap: balance; }
.lp-sub { color: var(--lp-suave); margin: 0 0 20px; line-height: 1.6; }
.lp-cards { display: grid; gap: 14px; }
@media (min-width: 560px) { .lp-cards { grid-template-columns: 1fr 1fr; } }
.lp-card { background: linear-gradient(180deg, var(--lp-cartao2), var(--lp-cartao)); border: 1px solid var(--lp-borda); border-radius: 20px; padding: 18px; position: relative; }
.lp-card.brilho { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(255, 106, 54, 0.06), 0 18px 40px -26px rgba(255, 80, 20, 0.75); }
.lp-card.brilho::after { content: ""; position: absolute; right: -1px; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: var(--lp-grad); box-shadow: 0 0 12px rgba(255, 106, 54, 0.9); }
.lp-card-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.lp-ico { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; background: radial-gradient(circle at 30% 30%, #ff7a3d, #c2340f); box-shadow: 0 0 18px rgba(255, 90, 31, 0.55); }
.lp-selo { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.lp-selo.laranja { color: #fff; background: linear-gradient(90deg, #ff3d1f, #ff7a1a); }
.lp-selo.verde { color: #052e14; background: #3ee07a; }
.lp-card h3 { font-size: 19px; margin: 0 0 8px; letter-spacing: -0.01em; }
.lp-card p { margin: 0; color: var(--lp-suave); font-size: 15px; line-height: 1.55; }
.lp-dores { display: grid; gap: 12px; }
.lp-dor { background: var(--lp-cartao); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 18px; }
.lp-dor-ico { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #ff4d4d; color: #ff4d4d; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px; }
.lp-dor h3 { margin: 0 0 6px; font-size: 18px; }
.lp-dor p { margin: 0; color: var(--lp-suave); font-size: 15px; line-height: 1.55; }
.lp-passos { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 14px; }
.lp-passos .lp-ico { margin-bottom: 12px; }
.lp-passos small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--lp-laranja); margin-bottom: 4px; }
body.com-cta .vitrine { margin: 10px 0 0; }

/* Arsenal (seção clara) */
.lp-arsenal { margin: 44px -16px 40px; padding: 34px max(18px, env(safe-area-inset-right, 0px)) 30px max(18px, env(safe-area-inset-left, 0px)); background: #fbf6ee; color: #231a15; border-radius: 34px; }
.lp-arsenal h2 { font-size: clamp(28px, 8vw, 36px); line-height: 1.1; text-align: center; margin: 0 0 8px; letter-spacing: -0.02em; }
.lp-arsenal > p { text-align: center; color: #7a6a60; margin: 0 0 22px; }
.lp-arsenal ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .lp-arsenal ul { grid-template-columns: 1fr 1fr; } }
.lp-arsenal li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #efe4d8; border-radius: 16px; padding: 14px; }
.lp-arsenal li > span { width: 40px; height: 40px; border-radius: 12px; background: #fff1e8; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.lp-arsenal strong { display: block; font-size: 15px; }
.lp-arsenal small { display: block; color: #7a6a60; font-size: 13px; line-height: 1.45; margin-top: 2px; }

/* Planos, acesso e dúvidas no estilo escuro */
body.com-cta .sec-titulo { font-size: clamp(28px, 8vw, 38px); letter-spacing: -0.03em; font-weight: 800; }
body.com-cta .sec-sub, body.com-cta .dica { color: var(--lp-suave); }
body.com-cta .ciclo { background: var(--lp-cartao); border-color: rgba(255, 255, 255, 0.08); }
body.com-cta .ciclo-op.ativo { background: #2a1f1a; color: #fff; }
body.com-cta .pc { background: linear-gradient(180deg, var(--lp-cartao2), var(--lp-cartao)); border-color: rgba(255, 255, 255, 0.08); }
body.com-cta .pc.destaque { border: 1.5px solid var(--lp-borda-forte); box-shadow: 0 0 0 4px rgba(255, 106, 54, 0.08), 0 24px 50px -24px rgba(255, 80, 20, 0.85); }
body.com-cta .pc-selo { background: var(--lp-grad); }
body.com-cta .pc-tag { background: rgba(255, 106, 54, 0.1); border-color: var(--lp-borda); color: #ff8a5f; }
body.com-cta .pc-premium .pc-tag { background: #f6eee9; color: #1a120f; border-color: #f6eee9; }
body.com-cta .pc-lista { border-color: rgba(255, 255, 255, 0.08); }
body.com-cta .pc .botao.principal, body.com-cta #cartaoCadastro .botao.principal { background: var(--lp-grad); border: 0; box-shadow: 0 12px 30px -14px rgba(255, 80, 20, 0.9); }
body.com-cta .pc .botao:not(.principal) { background: #241a16; border-color: rgba(255, 255, 255, 0.1); color: #fff; }
body.com-cta #cartaoCadastro { background: linear-gradient(180deg, var(--lp-cartao2), var(--lp-cartao)); border-color: var(--lp-borda); }
body.com-cta .abas { background: #0f0b0a; }
body.com-cta .aba.ativa { background: #2a1f1a; color: #fff; }
body.com-cta input, body.com-cta select { background: #0f0b0a; border-color: rgba(255, 255, 255, 0.1); color: #fff; }
body.com-cta .faq details { background: var(--lp-cartao); border-color: rgba(255, 255, 255, 0.08); }
body.com-cta .sobretitulo { color: var(--lp-laranja); }
body.com-cta .cta-fixo { background: linear-gradient(to top, var(--lp-fundo) 70%, transparent); }
body.com-cta .cta-fixo .botao { background: var(--lp-grad); border: 0; }

/* Botão "Fale conosco" */
.whats-flutuante { width: auto; height: auto; border-radius: 99px; padding: 10px 16px 10px 12px; gap: 8px; font-weight: 800; font-size: 14px; text-decoration: none; }
.whats-flutuante svg { width: 22px; height: 22px; }

/* Tela do plano (clara, como uma página de checkout) */
#telaPlano { margin: 6px -16px 0; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px)); background: #fbf6ee; color: #231a15; min-height: 80vh; border-radius: 26px 26px 0 0; }
.tp-voltar { background: none; border: 0; font: inherit; font-weight: 700; color: #7a6a60; padding: 8px 0; cursor: pointer; }
.tp-cartao { background: #fff; border: 1px solid #efe4d8; border-radius: 22px; padding: 20px 18px; margin-top: 8px; box-shadow: 0 20px 50px -34px rgba(60, 30, 10, 0.45); }
.tp-tag { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; color: #c2410c; background: #fff1e8; border: 1px solid #fde0cc; padding: 6px 14px; border-radius: 99px; }
.tp-titulo { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 6px; text-align: center; }
.tp-desc { text-align: center; color: #7a6a60; margin: 0 0 18px; }
.tp-rotulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #7a6a60; margin: 18px 0 8px; }
.tp-ciclos { display: grid; gap: 8px; }
.tp-ciclo { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; width: 100%; padding: 14px; border-radius: 14px; border: 1.5px solid #eadfd3; background: #fff; font: inherit; color: inherit; cursor: pointer; }
.tp-ciclo.ativo { border-color: #ff6a36; background: #fff6f0; box-shadow: 0 0 0 3px rgba(255, 106, 54, 0.15); }
.tp-ciclo strong { display: block; }
.tp-ciclo small { display: block; color: #7a6a60; font-size: 13px; }
.tp-ciclo .tp-eco { font-size: 11px; font-weight: 800; color: #15803d; background: #dcfce7; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.tp-ciclo b { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.tp-lista li { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; }
.tp-lista .check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #16a34a; color: #16a34a; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tp-lista li.nao { color: #9a8a80; }
.tp-lista li.nao .check { border-color: #d6cabf; color: #b5a79c; }
.tp-total { margin-top: 20px; padding: 16px; border-radius: 16px; background: #fff6f0; border: 1px solid #fde0cc; }
.tp-total small { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #c2410c; }
.tp-total strong { display: block; font-size: 38px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tp-total span { color: #7a6a60; font-size: 14px; }
.tp-pagar { margin-top: 14px; }
.tp-seguro { text-align: center; font-size: 13px; color: #7a6a60; margin: 10px 0 0; }
.tp-depois { margin-top: 14px; font-size: 14px; padding: 12px 14px; border-radius: 14px; background: #f3efe9; color: #4a3d35; }
@media (prefers-reduced-motion: reduce) { .lp-faixa-trilho { animation: none; } }
body.com-cta.tela-plano .whats-flutuante { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* =====================================================================
   IDENTIDADE IALPHA: dourado da logo (substitui o laranja na página de vendas)
   ===================================================================== */
body.com-cta {
  --lp-fundo: #0a0907;
  --lp-cartao: #14110b;
  --lp-cartao2: #1b160d;
  --lp-borda: rgba(255, 190, 40, 0.24);
  --lp-borda-forte: rgba(255, 190, 40, 0.7);
  --lp-laranja: #ffbf1f;
  --lp-grad: linear-gradient(90deg, #ffd34d 0%, #ffb800 50%, #ff9a00 100%);
  --lp-escuro-texto: #1d1500;
}
body.com-cta .lp-hero::before { background: radial-gradient(60% 60% at 30% 20%, rgba(255, 184, 0, 0.18), transparent 70%); }
body.com-cta .lp-pilula { background: rgba(255, 184, 0, 0.1); }
body.com-cta .lp-ponto { box-shadow: 0 0 10px #ffbf1f; }
body.com-cta .lp-botao:not(.fantasma),
body.com-cta .pc .botao.principal,
body.com-cta #cartaoCadastro .botao.principal,
body.com-cta .cta-fixo .botao { color: var(--lp-escuro-texto); box-shadow: 0 12px 34px -14px rgba(255, 170, 0, 0.85); }
body.com-cta .lp-etiqueta { background: rgba(255, 184, 0, 0.08); }

/* Celular no topo */
.lp-vitrine { margin: 26px 0 6px; }
.lp-vitrine .celular { box-shadow: 0 30px 60px -24px rgba(255, 170, 0, 0.45); border-color: rgba(255, 200, 60, 0.35); }

/* Selos de confiança */
.lp-confianca { list-style: none; padding: 0; margin: 22px 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-confianca li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--lp-texto); padding: 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 184, 0, 0.07), rgba(255, 184, 0, 0.02)); border: 1px solid var(--lp-borda); }
.lp-confianca span { width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 184, 0, 0.14); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #ffcf4a; flex: none; }

/* Cartões: linha dourada em cima no lugar do brilho lateral */
body.com-cta .lp-card.brilho { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px -28px rgba(255, 170, 0, 0.55); overflow: hidden; }
body.com-cta .lp-card.brilho::after { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 2px; box-shadow: 0 0 14px rgba(255, 190, 40, 0.9); }
body.com-cta .lp-ico { background: radial-gradient(circle at 30% 30%, #ffd760, #c98a00); box-shadow: 0 0 18px rgba(255, 184, 0, 0.4); }
body.com-cta .lp-selo.laranja { color: var(--lp-escuro-texto); background: linear-gradient(90deg, #ffd34d, #ffae00); }
body.com-cta .lp-passos small { color: #ffcf4a; }

/* Mini painel junto da seção do painel */
.lp-painel-chamada { margin: 26px 0 0; }
.lp-painel-chamada h3 { font-size: 22px; margin: 0 0 6px; letter-spacing: -0.01em; }
.lp-painel-chamada h3 em { font-style: normal; color: #ffcf4a; }
.lp-painel-chamada p { margin: 0; color: var(--lp-suave); line-height: 1.55; }
body.com-cta .lp-janela { margin-top: 14px; background: linear-gradient(180deg, #1a150c, #100d08); box-shadow: 0 30px 60px -32px rgba(255, 170, 0, 0.45); }
body.com-cta .lp-janela-topo span { color: #ffcf4a; }
body.com-cta .lp-barras span { background: linear-gradient(180deg, #ffd34d, #ff9a00); }
body.com-cta .lp-barras span.agora { box-shadow: 0 0 14px rgba(255, 190, 40, 0.8); }
body.com-cta .lp-kpis .laranja { color: #ffcf4a; }

/* "Tudo que vem no IAlpha": dourado claro, em blocos */
body.com-cta .lp-arsenal { background: linear-gradient(180deg, #fff6dc, #fff0c7); color: #2a2006; border-radius: 28px 28px 28px 28px; }
body.com-cta .lp-arsenal h2 em { font-style: normal; color: #b07800; }
body.com-cta .lp-arsenal > p { color: #7b6a3a; }
body.com-cta .lp-arsenal ul { grid-template-columns: 1fr 1fr; }
body.com-cta .lp-arsenal li { flex-direction: column; gap: 8px; background: rgba(255, 255, 255, 0.75); border-color: #f1dfa6; padding: 14px 12px; }
body.com-cta .lp-arsenal li > span { background: #ffe9a8; }
body.com-cta .lp-arsenal small { color: #7b6a3a; }

/* Planos e acesso em dourado */
body.com-cta .pc.destaque { box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.08), 0 24px 50px -24px rgba(255, 170, 0, 0.7); }
body.com-cta .pc-selo { color: var(--lp-escuro-texto); }
body.com-cta .pc-tag { background: rgba(255, 184, 0, 0.1); color: #ffcf4a; }
body.com-cta .ciclo-op.ativo { background: #2a2210; }
body.com-cta .aba.ativa { background: #2a2210; }

/* Tela do plano em dourado */
.tp-tag { color: #8a5d00; background: #fff4d1; border-color: #f6dd92; }
.tp-ciclo.ativo { border-color: #ffb800; background: #fffaeb; box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.2); }
.tp-total { background: #fffaeb; border-color: #f6dd92; }
.tp-total small { color: #8a5d00; }
#telaPlano { background: #fffbf0; }

body.com-cta .menu-topo .menu-entrar { color: #ffcf4a; }

/* ===== LOGO ANIMADA ===== */
.logo-viva { position: relative; display: block; border-radius: 10px; overflow: hidden; flex: none;
  animation: logoPulso 3.2s ease-in-out infinite; }
.logo-viva::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,240,190,.75) 50%, transparent 70%);
  transform: translateX(-120%); animation: logoBrilho 4s ease-in-out infinite; }
@keyframes logoPulso { 0%,100% { box-shadow: 0 0 0 0 rgba(255,191,31,0); } 50% { box-shadow: 0 0 14px 2px rgba(255,191,31,.55); } }
@keyframes logoBrilho { 0%,55% { transform: translateX(-120%); } 85%,100% { transform: translateX(120%); } }

.lp-logo-hero { position: relative; width: 112px; height: 112px; margin: 4px auto 18px; display: grid; place-items: center;
  animation: logoFlutua 4s ease-in-out infinite; }
.lp-anel { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, #ffd34d 75%, #ff9a00 90%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: logoGira 2.8s linear infinite; }
.lp-logo-hero::before { content: ""; position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,191,31,.45), transparent 70%); filter: blur(10px);
  animation: logoRespira 3s ease-in-out infinite; }
.lp-logo-caixa { position: relative; width: 84px; height: 84px; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255,191,31,.6); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.lp-logo-caixa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-logo-caixa::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,240,190,.7) 50%, transparent 70%);
  transform: translateX(-120%); animation: logoBrilho 3.6s ease-in-out infinite; }
@keyframes logoFlutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes logoGira { to { transform: rotate(360deg); } }
@keyframes logoRespira { 0%,100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .logo-viva, .logo-viva::after, .lp-logo-hero, .lp-anel, .lp-logo-hero::before, .lp-logo-caixa::after { animation: none; }
}

/* ===== SISTEMA NO MESMO MODELO DO SITE ===== */
.botao.principal { background: var(--grad); border-color: transparent; font-weight: 800; box-shadow: 0 10px 26px -14px rgba(255, 170, 0, 0.9); }
body:not(.com-cta) .cartao { position: relative; overflow: hidden; }
body:not(.com-cta) .cartao::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); opacity: .9; }
body:not(.com-cta) .cartao h2 { font-weight: 800; letter-spacing: -0.01em; }
:root[data-theme="dark"] body:not(.com-cta) .cartao { box-shadow: 0 1px 0 rgba(255, 191, 31, 0.06) inset, 0 18px 40px -28px rgba(255, 170, 0, 0.35); }
.grafico-horas .gh-agora { fill: #ffbf1f; }

/* Sem plano ativo: só a escolha do plano aparece */
body.sem-plano #telaPainel > .cartao:not(#cartaoPlano) { display: none; }

/* ===== COMPUTADOR (telas grandes) ===== */
.menu-pc { display: none; }
@media (min-width: 1024px) {
  body.com-cta .topo { padding-left: max(32px, calc((100% - 1160px) / 2)); padding-right: max(32px, calc((100% - 1160px) / 2)); }
  body.com-cta .menu-btn { display: none; }
  body.com-cta .menu-topo { display: none !important; }
  body.com-cta .menu-pc { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 12px; }
  .menu-pc a { color: #e9e2d2; text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: 10px; }
  .menu-pc a:hover { background: rgba(255, 191, 31, 0.08); color: #fff; }
  .menu-pc .menu-pc-entrar { color: #ffcf4a; }
  .menu-pc .menu-pc-assinar { background: var(--lp-grad); color: var(--lp-escuro-texto, #1d1500); font-weight: 800; margin-left: 8px; padding: 10px 18px; }
  .menu-pc .menu-pc-assinar:hover { background: var(--lp-grad); color: var(--lp-escuro-texto, #1d1500); filter: brightness(1.06); }
  body.com-cta .cta-fixo { display: none; }

  body.com-cta main { max-width: 1160px; padding-left: 32px; padding-right: 32px; }
  body.com-cta #telaPlano { max-width: 640px; margin: 0 auto; }

  /* Topo em duas colunas: texto à esquerda, celular à direita */
  #telaEntrar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: 64px; }
  #telaEntrar > * { grid-column: 1 / -1; }
  #telaEntrar > .lp-hero { grid-column: 1; padding-top: 56px; }
  #telaEntrar > .lp-vitrine { grid-column: 2; grid-row: 1; align-self: center; margin: 48px 0 0; max-width: 400px; justify-self: center; width: 100%; }
  .lp-hero h1 { font-size: 68px; }
  .lp-hero .lp-lead { font-size: 18px; max-width: 560px; }
  .lp-logo-hero { margin: 0 0 18px; }
  .lp-hero .lp-chips { max-width: 560px; }
  .lp-hero .lp-botao { display: inline-flex; width: auto; padding: 16px 30px; margin: 10px 10px 0 0; vertical-align: top; }
  .lp-hero .lp-botao.fantasma { margin-top: 10px; }

  .lp-confianca { grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
  .lp-sec { margin-top: 72px; }
  .lp-titulo { font-size: 44px; text-align: center; }
  .lp-sub { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; font-size: 17px; }
  .lp-sec .sobretitulo, .lp-sec > small { text-align: center; }
  .lp-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .lp-painel-chamada { text-align: center; margin-top: 56px; }
  .lp-painel-chamada h3 { font-size: 30px; }
  .lp-painel-chamada p { max-width: 640px; margin: 0 auto; }
  .lp-janela { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
  .lp-ficticio { text-align: center; }
  .lp-dores { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .lp-passos { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .lp-arsenal { margin: 72px 0 56px; padding: 56px 48px 48px; }
  .lp-arsenal h2 { font-size: 44px; }
  body.com-cta .lp-arsenal ul { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .lp-arsenal li { flex-direction: column; }
  .precos-inicio .pcs { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
  #cartaoCadastro { width: 100%; max-width: 560px; justify-self: center; margin-top: 40px; }
  .faq { width: 100%; max-width: 760px; justify-self: center; margin-top: 40px; }

  .lp-sec > .lp-etiqueta { display: table; margin-left: auto; margin-right: auto; }
  .precos-inicio > h2, .precos-inicio > p, .precos-inicio .sec-titulo, .precos-inicio .sobretitulo { text-align: center; }
  .precos-inicio .ciclo { max-width: 560px; margin-left: auto; margin-right: auto; }
  .precos-inicio { margin-top: 24px; }
  .faq .sec-titulo, .faq .sobretitulo { text-align: center; }
  body.com-cta { overflow-x: clip; }
  body.com-cta .lp-hero::before { inset: -120px -360px auto -360px; height: 720px; background: radial-gradient(40% 45% at 35% 30%, rgba(255, 184, 0, 0.16), transparent 70%); }
}
body.com-cta .lp-etiqueta.vermelha { color: #ffcf4a; border-color: var(--lp-borda); background: rgba(255, 184, 0, 0.08); }

/* ===== PAINEL DO DONO (admin) ===== */
body.admin main { max-width: 1160px; }
.marca-sub { display: block; font-size: 11px; font-weight: 600; color: var(--suave); letter-spacing: .04em; margin-top: -2px; }
body.admin .topo { max-width: 1160px; }
.dn-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 8px 0 14px; }
.dn-ola { font-size: clamp(26px, 6vw, 34px); margin: 0; letter-spacing: -0.02em; font-weight: 800; }
.dn-ola #dnNome { font-style: italic; }
.dn-sub { margin: 4px 0 0; color: var(--suave); font-size: 13px; }
.dn-relogio { display: inline-flex; gap: 6px; padding: 6px; border-radius: 99px; background: var(--cartao); border: 1px solid var(--borda); }
.dn-relogio b { font: 700 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; padding: 6px 9px; border-radius: 99px; background: var(--fundo); color: var(--suave); }
.dn-relogio b:last-child { color: var(--cor-escura); }
.dn-periodos { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.dn-periodos button { flex: none; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--borda); background: var(--cartao); color: var(--suave); cursor: pointer; }
.dn-periodos button.ativo { background: var(--grad); color: var(--sobre-cor); border-color: transparent; }
.dn-periodos button:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }

.dn-hero { position: relative; overflow: hidden; display: grid; gap: 18px; padding: 22px 20px 16px; border-radius: 22px; border: 1px solid var(--borda); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 191, 31, .14), transparent 55%), var(--cartao); margin-bottom: 14px; }
.dn-hero::before { content: ""; position: absolute; left: 20px; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad); }
.dn-rot { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.dn-rot b { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; font-size: 10px; color: #8fb4ff; border: 1px solid rgba(110, 150, 255, .5); background: rgba(80, 120, 255, .12); letter-spacing: .06em; }
.dn-valor { display: block; margin: 8px 0 12px; font-size: clamp(38px, 10vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd34d 45%, #e9a400 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .dn-valor { background: linear-gradient(180deg, #c98a00, #7a4f00); -webkit-background-clip: text; background-clip: text; }
.dn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-chips span { font-size: 12px; color: var(--suave); padding: 5px 10px; border-radius: 99px; border: 1px solid var(--borda); background: var(--fundo); }
.dn-chips b { color: var(--texto); }
.dn-var.sobe { color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 45%, transparent) !important; }
.dn-var.desce { color: var(--erro) !important; border-color: color-mix(in srgb, var(--erro) 45%, transparent) !important; }
.dn-graf { position: relative; min-width: 0; }
.dn-graf-rot { display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); margin-bottom: 6px; }
#dnGrafico { position: relative; }
#dnGrafico svg { display: block; width: 100%; height: 170px; overflow: visible; touch-action: pan-y; }
#dnGrafico text { font-size: 11px; fill: var(--suave); font-family: inherit; }
.dn-linha { fill: none; stroke: #ffbf1f; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 4px 10px rgba(255, 170, 0, .35)); }
.dn-eixo { stroke: var(--borda); stroke-width: 1; }
.dn-ponto { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #ffd34d; border: 3px solid var(--cartao); box-shadow: 0 0 0 4px rgba(255, 191, 31, .25); pointer-events: none; }
.dn-eixo-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--suave); margin-top: 6px; }
.dn-dica { position: absolute; top: 0; width: 130px; padding: 7px 10px; border-radius: 10px; background: var(--texto); color: var(--fundo); pointer-events: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.dn-dica b { display: block; font-size: 14px; }
.dn-dica small { font-size: 11px; opacity: .8; }

.dn-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.dn-card { position: relative; background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; padding: 16px; min-width: 0; }
.dn-card > small { display: block; color: var(--suave); font-size: 12px; margin-top: 6px; }
.dn-num { display: block; font-size: clamp(22px, 5.5vw, 28px); font-weight: 800; margin-top: 8px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dn-x { color: var(--suave); font-weight: 500; }
.dn-barra { height: 6px; border-radius: 99px; background: var(--fundo); margin-top: 10px; overflow: hidden; }
.dn-barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2bd47d, #5ef0a0); }
.dn-niveis { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 10px; }
.dn-niveis span { height: 6px; border-radius: 99px; min-width: 4px; }
.dn-niveis small { flex-basis: 100%; color: var(--suave); font-size: 12px; margin-top: 4px; }
.nv-start { background: #c9b48a; } .nv-pro { background: #ffbf1f; } .nv-premium { background: linear-gradient(90deg, #b06cff, #ff7ad9); }

.dn-titulo { font-size: 15px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.dn-titulo span { color: var(--suave); font-weight: 600; }
.dn-titulo.pequeno { font-size: 14px; }
.dn-top { display: grid; gap: 10px; margin-bottom: 22px; }
.dn-top-card { position: relative; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--borda); background: var(--cartao); overflow: hidden; }
.dn-top-card strong { display: block; font-size: 15px; }
.dn-top-card small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); margin-top: 4px; }
.dn-top-card b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.dn-top-card.ouro { background: linear-gradient(135deg, rgba(255, 191, 31, .28), rgba(255, 150, 0, .08)), var(--cartao); border-color: rgba(255, 191, 31, .6); }
.dn-top-card.ouro b { color: #ffcf4a; }
:root[data-theme="light"] .dn-top-card.ouro b { color: #8a5a00; }
.dn-top-card.prata { background: linear-gradient(135deg, rgba(220, 220, 230, .16), transparent), var(--cartao); }
.dn-top-card.bronze { background: linear-gradient(135deg, rgba(255, 130, 60, .18), transparent), var(--cartao); }
.dn-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; background: var(--grad); color: var(--sobre-cor); }
.dn-top-card.prata .dn-avatar { background: linear-gradient(135deg, #f1f1f5, #a9a9b6); }
.dn-top-card.bronze .dn-avatar { background: linear-gradient(135deg, #ffb07a, #c8642a); }
.dn-avatar.mini { width: 32px; height: 32px; font-size: 13px; }
.dn-pos { position: absolute; right: 14px; top: 10px; font-weight: 800; font-size: 13px; color: var(--suave); }

.dn-duas { display: grid; gap: 10px; }
.dn-plano { margin-bottom: 14px; }
.dn-plano-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; }
.dn-plano-top i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.dn-trilho { height: 8px; border-radius: 99px; background: var(--fundo); margin: 6px 0 4px; overflow: hidden; }
.dn-trilho span { display: block; height: 100%; border-radius: 99px; min-width: 2px; }
.dn-plano small { color: var(--suave); font-size: 12px; }
.dn-ultimas { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.dn-ultimas li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.dn-ultimas li:last-child { border-bottom: 0; }
.dn-ultimas li > span:nth-child(2) { flex: 1; min-width: 0; }
.dn-ultimas strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-ultimas small { display: block; font-size: 12px; color: var(--suave); }
.dn-ultimas b { font-size: 14px; color: var(--ok); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dn-ultimas li.estornada b { color: var(--erro); }
.dn-ultimas li.estornada strong { text-decoration: line-through; opacity: .7; }

@media (min-width: 900px) {
  .dn-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; padding: 28px 28px 20px; }
  .dn-grade { grid-template-columns: repeat(4, 1fr); }
  .dn-top { grid-template-columns: repeat(3, 1fr); }
  .dn-duas { grid-template-columns: 1fr 1.3fr; }
  body.admin #cartaoPagamentos, body.admin #cartaoCriar { max-width: none; }
}

/* Medidor do servidor */
.dn-servidor { margin: -8px 0 22px; }
.dn-serv-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dn-serv-status { font-size: 12px; font-weight: 800; color: var(--ok); }
.dn-servidor.alerta .dn-serv-status { color: var(--alerta); }
.dn-servidor.critico .dn-serv-status { color: var(--erro); }
.dn-serv-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dn-serv-linha small { color: var(--suave); font-size: 13px; }
.dn-barra.grossa { height: 10px; }
.dn-servidor.alerta .dn-barra span { background: linear-gradient(90deg, #ffbf1f, #ff9a00); }
.dn-servidor.critico .dn-barra span { background: linear-gradient(90deg, #ff6a4a, #ff3d3d); }
.dn-serv-info { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--suave); }
.dn-serv-info b { color: var(--texto); }
.dn-serv-aviso { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; background: var(--alerta-claro); color: var(--alerta); }
.dn-servidor.critico .dn-serv-aviso { background: color-mix(in srgb, var(--erro) 14%, transparent); color: var(--erro); }