/* publickz · área do cliente (login, cadastro e painel pessoal)
   Base: /pk.css. Mesmo tema escuro do app de cortes. */

body { min-height: 100vh; min-height: 100dvh; }
.eyebrow, .rotulo { display: block; margin-bottom: 6px; color: var(--muted); font: 500 var(--t-xs)/1.3 var(--font-mono); letter-spacing: .02em; }
.rotulo { color: var(--brand-text); }

/* ---------- entrada: produto + acesso ---------- */
.entrada { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vitrine { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 32px 48px 36px; border-right: 1px solid var(--line); background: var(--surface); }
.vitrine-texto { max-width: 500px; }
.vitrine h1 { margin: 0 0 16px; font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.35rem); line-height: 1.08; }
.vitrine .lead { margin: 0 0 32px; color: var(--text-2); font-size: .9375rem; }
.beneficios { list-style: none; counter-reset: beneficio; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.beneficios li { counter-increment: beneficio; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.beneficios li::before { content: counter(beneficio, decimal-leading-zero); grid-row: span 2; padding-top: 2px; color: var(--brand-text); font: 500 var(--t-xs)/1.4 var(--font-mono); }
.beneficios b { color: var(--text); font-weight: 600; font-size: var(--t-md); }
.beneficios small { color: var(--muted); font-size: var(--t-sm); }
.selo-teste { display: inline-flex; align-items: baseline; gap: 10px; }
.selo-teste b { color: var(--text); font-weight: 600; }
.selo-teste span { color: var(--muted); font: 500 var(--t-sm)/1 var(--font-mono); }

.acesso { display: grid; place-items: center; padding: 32px 24px; }
.caixa { width: min(400px, 100%); }
.caixa-topo { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 28px; }
.brand-movel { display: none; margin-right: auto; }
.caixa-titulo { margin: 0 0 4px; font: 700 var(--t-2xl)/1.1 var(--font-display); font-stretch: 87.5%; }
.caixa-sub { margin: 0; color: var(--muted); }
.teste-movel { display: none; margin: 10px 0 0; color: var(--muted); font-size: var(--t-sm); }
.teste-movel span { font-family: var(--font-mono); }
.teste-movel b { color: var(--text); font-weight: 600; }

/* abas: sublinhado que corre junto com o trilho dos formulários */
.abas { position: relative; display: flex; margin: 24px 0 18px; border-bottom: 1px solid var(--line-strong); }
.abas::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--brand);
  transition: transform .28s var(--ease);
}
.abas[data-ativo="cadastro"]::after { transform: translateX(100%); }
.aba-btn { flex: 1; min-height: var(--h-lg); padding: 0 6px; border: 0; background: none; color: var(--muted); font: 500 var(--t-md)/1.2 var(--font-ui); cursor: pointer; }
.aba-btn:hover { color: var(--text-2); }
.aba-btn.active { color: var(--text); }
.slider { overflow: hidden; transition: height .28s var(--ease); }
.trilho { display: flex; align-items: flex-start; width: 200%; transition: transform .28s var(--ease); }
.painel-form { flex: 0 0 50%; width: 50%; padding: 3px; transition: opacity .2s var(--ease); }
.painel-form:not(.ativo) { opacity: 0; pointer-events: none; }

.formulario { display: flex; flex-direction: column; gap: 14px; }
.formulario .btn.grande { width: 100%; margin-top: 4px; }
.formulario.linha { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.formulario.linha label { flex: 1 1 200px; }
.formulario.linha .btn { min-height: 38px; }
.check { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--text-2); font-weight: 400; font-size: var(--t-sm); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.formulario > .destaque { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-left: 2px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.formulario > .destaque b { color: var(--text); font-weight: 600; }
.formulario > .destaque .small { color: var(--text-2); }
.erro { min-height: 0; margin: 0; font-size: var(--t-sm); font-weight: 500; }
.erro:not(:empty)::before { content: "! "; font-family: var(--font-mono); font-weight: 600; }

details.opcional > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--text-2); font-size: var(--t-sm); list-style: none; cursor: pointer; }
details.opcional > summary::-webkit-details-marker { display: none; }
details.opcional > summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); color: var(--text-2); font: 500 .8rem/1 var(--font-mono); }
details.opcional[open] > summary::before { content: "−"; }
details.opcional[open] label { margin-top: 8px; }

.google-area { margin-top: 22px; }
.google-botao { display: flex; justify-content: center; min-height: 44px; }
.divisor { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; color: var(--muted); font-size: var(--t-xs); }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#form-google { margin-top: 22px; }

/* ---------- área logada ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar-linha { display: flex; align-items: center; gap: 16px; max-width: 1080px; min-height: 56px; margin: 0 auto; padding: 0 24px; }
.topbar-local { padding-left: 16px; border-left: 1px solid var(--line-strong); color: var(--muted); font-size: var(--t-sm); }
.topo-direita { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.usuario { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: var(--t-sm); }

main { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; display: flex; flex-direction: column; gap: 20px; }
.faixa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-left-width: 3px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--text); }
.faixa::before { content: "!"; color: var(--warn); font: 600 var(--t-md)/1 var(--font-mono); }
.faixa.grave { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-soft); }
.faixa.grave::before { color: var(--bad); }
.faixa a { margin-left: auto; color: var(--text); font-weight: 600; white-space: nowrap; }

.boas-vindas { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
.boas-vindas h1 { margin: 0 0 4px; font-size: var(--t-2xl); }
.boas-vindas p { margin: 0; }

.grade-conta { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grade-conta.so-plano { grid-template-columns: 1fr; }
.card h2 { font: 600 .9375rem/1.3 var(--font-ui); }
.plano-atual { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 20px; }
.grade-conta.so-plano .plano-atual { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; column-gap: 40px; }
.grade-conta.so-plano .plano-dica { grid-column: 1 / -1; }
.plano-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plano-atual h2 { margin: 0; font: 700 1.6rem/1.1 var(--font-display); font-stretch: 87.5%; }
.plano-atual #plano-validade { margin: 4px 0 0; font-family: var(--font-mono); }
.uso-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.uso-topo b { font: 500 var(--t-base)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.barra { height: 8px; }
.barra span { background: var(--brand); }
.barra span.quase { background: var(--warn); }
.barra span.cheio { background: var(--bad); }
.plano-dica { margin: 0; padding: 10px 12px; border-left: 2px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font-size: var(--t-sm); }
.plano-dica:empty { display: none; }

.lista { display: flex; flex-direction: column; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item b { margin-right: 6px; }
.acoes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- planos ---------- */
.planos-secao { scroll-margin-top: 72px; padding-top: 8px; }
.planos-topo { max-width: 640px; }
.planos-topo h2 { margin: 0 0 6px; font: 700 var(--t-xl)/1.15 var(--font-display); font-stretch: 87.5%; }
.planos-topo p { margin: 0; }
.aviso-email { display: inline-block; margin: 14px 0 0; padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: var(--t-sm); }
.aviso-email:empty { display: none; }
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.plano { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--surface); }
.plano .plano-nome { font-weight: 600; }
.preco { font: 600 1.75rem/1.05 var(--font-display); font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
.preco small { margin-left: 2px; color: var(--muted); font: 400 var(--t-sm)/1 var(--font-ui); }
.preco-de { color: var(--muted); font-size: var(--t-sm); }
.plano .por-corte { color: var(--muted); font: 500 var(--t-xs)/1.3 var(--font-mono); }
.plano ul { list-style: none; margin: 8px 0 10px; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.plano li { color: var(--text-2); font-size: var(--t-sm); }
.plano li b { color: var(--text); font-variant-numeric: tabular-nums; }
.plano .ganho { color: var(--ok); font-size: var(--t-sm); font-weight: 500; }
.plano > .btn, .plano > .chip, .plano > .small { margin-top: auto; }
.plano > .btn { width: 100%; }
.plano > .chip { align-self: flex-start; }
.plano.atual { box-shadow: inset 0 3px 0 var(--ok); }
.plano.destaque { box-shadow: inset 0 3px 0 var(--text-2); }
.destaque-selo, .promo-selo { align-self: flex-start; order: -1; margin-bottom: 4px; padding: 1px 6px; border-radius: var(--r-xs); font: 600 var(--t-xs)/1.4 var(--font-ui); white-space: nowrap; }
.destaque-selo { background: var(--text); color: var(--bg); }
.plano.em-promo { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); box-shadow: inset 0 0 0 2px var(--brand); }
.promo-selo { background: var(--brand); color: var(--on-brand); }
.promo-regra { color: var(--brand-text); font-size: var(--t-sm); font-weight: 600; }
.promo-contagem { align-self: flex-start; padding: 1px 6px; border-radius: var(--r-xs); background: var(--brand-soft); color: var(--brand-text); font: 500 var(--t-xs)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.promo-contagem:empty { display: none; }
.incluso { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 24px; color: var(--text-2); font-size: var(--t-sm); }

.compra-pendente { display: flex; flex-direction: column; gap: 12px; border-left: 3px solid var(--accent); }
.compra-pendente h2 { margin: 0 0 4px; font: 700 var(--t-xl)/1.15 var(--font-display); font-stretch: 87.5%; }
.seguranca .muted { margin: 10px 0 0; }

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .acesso, .caixa { min-width: 0; }
  .vitrine { display: none; }
  .brand-movel { display: inline-flex; }
  .caixa-topo { justify-content: space-between; }
  .teste-movel { display: block; }
  .acesso { place-items: start center; padding: 20px 20px 40px; }
  .grade-conta, .grade-conta.so-plano .plano-atual { grid-template-columns: 1fr; }
}

/* ---------- celular: "Abrir o app" fica sempre ao alcance do polegar ---------- */
@media (max-width: 640px) {
  .topbar-linha { padding: 0 16px; gap: 10px; }
  .topbar-local, .usuario { display: none; }
  main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); gap: 16px; }
  .boas-vindas h1 { font-size: var(--t-xl); }
  .abrir-app-acao {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line);
  }
  .abrir-app-acao .btn { width: 100%; }
  .plano-atual { padding: 16px; }
  .formulario.linha { flex-direction: column; align-items: stretch; }
  .formulario.linha label { flex: none; }
  .formulario.linha .btn { width: 100%; min-height: var(--h-lg); }
  .planos { grid-template-columns: 1fr; }
  #avisos { left: 16px; right: 16px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); }
  #tela-entrada:not([hidden]) ~ #avisos { bottom: 16px; }
}

/* aqui "aviso" marca o teste grátis: informação, não alerta */
.chip.aviso { background: var(--info-soft); color: var(--info); }
.chip.aviso::before { content: none; }