/* ============================================================
   LUGAR KALEMA · sistema visual v2 (catalogo)

   Navegacao de area de membros: capa em destaque, fileiras
   horizontais por cliente, card com capa, busca que filtra tudo.

   Cores: business/marca-kalema/kalema-design/tokens.css (15/08/2026).
   Escuro por padrao. A marca e escura, e a Mari nunca quer tema claro.
   ============================================================ */

:root {
  --kal-navy-950: #080C16;
  --kal-navy-900: #0B1622;
  --kal-navy-800: #111829;
  --kal-navy-700: #16273B;
  --kal-navy-600: #1D3350;

  --kal-gold-deep: #7B6027;
  --kal-gold: #D4A24E;
  --kal-gold-light: #F5E39C;

  --kal-ink: #F4F1EA;
  --kal-ink-soft: #B3BCCF;
  --kal-ink-mute: #7D879C;

  --kal-mar-100: #A9DED0;
  --kal-mar-300: #4FB0D8;
  --kal-mar-500: #35B39B;
  --kal-mar-700: #1F7A82;
  --kal-mar-900: #12505C;
  --kal-coral: #E2626B;

  --kal-ok: var(--kal-mar-500);
  --kal-aviso: var(--kal-mar-300);
  --kal-erro: var(--kal-coral);

  --kal-font-title: Georgia, 'Times New Roman', serif;
  --kal-font-body: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --kal-radius: 14px;
  --kal-wrap: 1360px;
}

* { box-sizing: border-box; }

html { visibility: hidden; }           /* o gate revela */

body {
  margin: 0;
  background: var(--kal-navy-900);
  color: var(--kal-ink);
  font-family: var(--kal-font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── Barra de topo ──────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; gap: 22px;
  padding: 14px 28px;
  background: linear-gradient(180deg, var(--kal-navy-950) 55%, rgba(8,12,22,0));
  transition: background .25s;
}
.topo.solido { background: var(--kal-navy-950); border-bottom: 1px solid var(--kal-navy-600); }
.topo .marca { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.topo .marca img { height: 30px; width: auto; display: block; }
.topo .marca span {
  font-family: var(--kal-font-title); font-size: 15px; letter-spacing: .16em;
  color: var(--kal-gold);
}
.topo nav { display: flex; gap: 20px; font-size: 13.5px; color: var(--kal-ink-soft); }
.topo nav a:hover, .topo nav a.on { color: var(--kal-ink); }
.topo .espaco { flex: 1; }

.busca { position: relative; flex-shrink: 0; }
.busca input {
  width: 260px; padding: 9px 14px 9px 36px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--kal-navy-600); border-radius: 999px;
  color: var(--kal-ink); font-size: 13.5px; font-family: inherit; outline: none;
  transition: border-color .2s, background .2s;
}
.busca input:focus { border-color: var(--kal-gold); background: rgba(255,255,255,.09); }
.busca input::placeholder { color: var(--kal-ink-mute); }
.busca .lupa {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--kal-ink-mute); font-size: 14px; pointer-events: none;
}

/* ── Capa em destaque ───────────────────────────────────────── */
.capa {
  position: relative; margin-top: -62px; padding: 122px 28px 44px;
  min-height: 380px; display: flex; align-items: flex-end;
  background:
    radial-gradient(120% 130% at 78% 12%, rgba(31,122,130,.42) 0%, transparent 58%),
    radial-gradient(90% 110% at 12% 88%, rgba(212,162,78,.16) 0%, transparent 62%),
    var(--kal-navy-950);
}
.capa::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, transparent, var(--kal-navy-900));
  pointer-events: none;
}
.capa .dentro { position: relative; z-index: 2; max-width: 680px; }
.capa .selo {
  display: inline-block; font-size: 11px; letter-spacing: .22em;
  color: var(--kal-gold); border: 1px solid rgba(212,162,78,.4);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}
.capa h1 {
  font-family: var(--kal-font-title); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.12;
  letter-spacing: .01em; margin: 0 0 14px;
}
.capa p { color: var(--kal-ink-soft); font-size: 16px; margin: 0 0 24px; max-width: 560px; }
.capa .acoes { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 8px; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform .15s, background .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-ouro { background: var(--kal-gold); color: var(--kal-navy-900); }
.btn-ouro:hover { background: var(--kal-gold-light); }
.btn-traco { background: rgba(255,255,255,.08); color: var(--kal-ink); border-color: var(--kal-navy-600); }
.btn-traco:hover { background: rgba(255,255,255,.14); }

/* ── Fileiras ───────────────────────────────────────────────── */
.corpo { max-width: var(--kal-wrap); margin: 0 auto; padding: 0 28px 70px; }

.fileira { margin-bottom: 40px; }
.fileira > h2 {
  font-family: var(--kal-font-title); font-weight: 400; font-size: 21px;
  letter-spacing: .03em; margin: 0 0 4px; display: flex; align-items: baseline; gap: 12px;
}
.fileira > h2 .conta { font-family: var(--kal-font-body); font-size: 12px; color: var(--kal-ink-mute); letter-spacing: 0; }
.fileira > .nota { color: var(--kal-ink-mute); font-size: 13px; margin: 0 0 14px; }

.trilho {
  display: flex; gap: 14px; overflow-x: auto; padding: 6px 4px 16px;
  scroll-snap-type: x proximate; scrollbar-width: thin;
  scrollbar-color: var(--kal-navy-600) transparent;
}
.trilho::-webkit-scrollbar { height: 7px; }
.trilho::-webkit-scrollbar-thumb { background: var(--kal-navy-600); border-radius: 99px; }
.trilho::-webkit-scrollbar-track { background: transparent; }

/* ── Card ───────────────────────────────────────────────────── */
.card {
  flex: 0 0 236px; scroll-snap-align: start;
  background: var(--kal-navy-800); border: 1px solid var(--kal-navy-600);
  border-radius: var(--kal-radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.card:hover {
  transform: translateY(-4px); border-color: rgba(212,162,78,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.card .arte {
  height: 116px; position: relative; display: flex; align-items: flex-end;
  padding: 12px 14px; background: var(--kal-navy-700);
}
.card .arte .glifo {
  position: absolute; right: 12px; top: 8px; font-family: var(--kal-font-title);
  font-size: 46px; line-height: 1; color: rgba(255,255,255,.14);
}
.card .arte .tag {
  position: relative; font-size: 10.5px; letter-spacing: .14em;
  color: rgba(255,255,255,.86); background: rgba(0,0,0,.34);
  padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(3px);
}
.card .txt { padding: 12px 14px 15px; flex: 1; display: flex; flex-direction: column; }
.card .txt h3 { font-size: 14.5px; font-weight: 600; margin: 0 0 5px; line-height: 1.3; }
.card .txt p { font-size: 12.5px; color: var(--kal-ink-mute); margin: 0; line-height: 1.5; flex: 1; }
.card .txt .rodape {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--kal-navy-600);
  font-size: 11px; color: var(--kal-ink-mute); display: flex; justify-content: space-between; gap: 8px;
}

/* Arte por cliente: a cor de assinatura vem da familia Mar */
.arte-rapha  { background: linear-gradient(135deg, #12505C, #4FB0D8 155%) !important; }
.arte-paula  { background: linear-gradient(135deg, #0D1B3D, #2A3E68 155%) !important; }   /* noite da marca Florescer */
.arte-tms    { background: linear-gradient(135deg, #0B1622, #4FB0D8 165%) !important; }   /* mar-300, assinatura da conta */
.arte-kalema { background: linear-gradient(135deg, #16273B, #1D3350 60%, #7B6027 190%) !important; }
.arte-vazio  { background: repeating-linear-gradient(45deg, #111829, #111829 9px, #16273B 9px, #16273B 18px) !important; }

/* Card destacado (a prova) */
.card.destaque { border-color: rgba(212,162,78,.5); }
.card.destaque .arte { background: linear-gradient(135deg, #7B6027, #D4A24E 150%) !important; }
.card.destaque .arte .tag { background: rgba(11,22,34,.5); }

/* ── Nível 1 · a grade de clientes ──────────────────────────
   A porta mostra CLIENTE, não peça. Cada card abre a própria
   estante. Card grande de propósito: são poucos, e a escolha
   de onde entrar é a decisão mais frequente do dia. */
.grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px; margin-bottom: 18px;
}
/* As contas vivas usam auto-FIT: sendo poucas, elas esticam e ocupam a linha
   inteira, em vez de ficarem espremidas num canto com o resto vazio. */
.grade.viva { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grade.viva .porta { min-height: 290px; }
.grade.viva .porta .arte { height: 150px; }
.grade.viva .porta .arte .ini { font-size: 104px; bottom: -22px; }
.grade.viva .porta .txt h3 { font-size: 26px; }
.porta {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 232px; border-radius: var(--kal-radius);
  border: 1px solid var(--kal-navy-600); background: var(--kal-navy-800);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.porta:hover { transform: translateY(-5px); border-color: rgba(212,162,78,.55); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.porta .arte {
  height: 104px; position: relative; display: flex; align-items: flex-start;
  justify-content: space-between; padding: 13px 16px;
}
.porta .arte .ini {
  position: absolute; right: 14px; bottom: -16px; font-family: var(--kal-font-title);
  font-size: 78px; line-height: 1; color: rgba(255,255,255,.16);
}
.porta .arte .estado {
  position: relative; font-size: 10.5px; letter-spacing: .13em;
  background: rgba(0,0,0,.36); color: #fff; padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(3px);
}
.porta .txt { padding: 15px 17px 17px; flex: 1; display: flex; flex-direction: column; }
.porta .txt h3 { font-family: var(--kal-font-title); font-weight: 400; font-size: 21px; margin: 0 0 2px; }
.porta .txt .quem { font-size: 12.5px; color: var(--kal-ink-mute); margin: 0 0 14px; }
.porta .txt .kmi {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--kal-navy-600);
  display: flex; align-items: baseline; gap: 8px;
}
.porta .txt .kmi .r { font-size: 10px; letter-spacing: .13em; color: var(--kal-ink-mute); margin-right: 2px; }
.porta .txt .kmi .a { font-family: var(--kal-font-title); font-size: 21px; color: var(--kal-ink-mute); }
.porta .txt .kmi .s { color: var(--kal-ink-mute); font-size: 13px; }
.porta .txt .kmi .b { font-family: var(--kal-font-title); font-size: 26px; color: var(--kal-gold); }
.porta .txt .kmi .nada { font-size: 12px; color: var(--kal-ink-mute); font-style: italic; }
.porta.fria { opacity: .78; }
.porta.fria:hover { opacity: 1; }
.porta.fria .arte { background: repeating-linear-gradient(45deg,#111829,#111829 9px,#16273B 9px,#16273B 18px); }

/* ── Nível 2 · a capa do cliente ────────────────────────────── */
.capa.cliente { min-height: 320px; }
.capa .kpis { display: flex; gap: 26px; flex-wrap: wrap; margin: 20px 0 22px; }
.capa .kpi .r { font-size: 10.5px; letter-spacing: .14em; color: var(--kal-ink-mute); }
.capa .kpi .v { font-family: var(--kal-font-title); font-size: 25px; line-height: 1.2; }
.capa .kpi .v small { font-size: 13px; color: var(--kal-ink-mute); font-family: var(--kal-font-body); }

/* ── Estado vazio da busca ──────────────────────────────────── */
.vazio-busca {
  display: none; text-align: center; padding: 60px 20px; color: var(--kal-ink-mute);
}
.vazio-busca b { color: var(--kal-ink); }

/* ── Caixa de estado ────────────────────────────────────────── */
.caixa {
  border-radius: 10px; padding: 13px 16px; font-size: 13.5px;
  border: 1px solid; margin: 0 0 18px;
}
.caixa-ok    { background: rgba(53,179,155,.12);  border-color: rgba(53,179,155,.38); }
.caixa-aviso { background: rgba(79,176,216,.12);  border-color: rgba(79,176,216,.38); }
.caixa-erro  { background: rgba(226,98,107,.12);  border-color: rgba(226,98,107,.38); }
.caixa b { color: var(--kal-ink); }

/* ── Rodape ─────────────────────────────────────────────────── */
footer.pe {
  border-top: 1px solid var(--kal-navy-600); padding: 26px 28px 40px;
  color: var(--kal-ink-mute); font-size: 12.5px; text-align: center;
}
footer.pe .g { font-family: var(--kal-font-title); letter-spacing: .2em; color: var(--kal-gold); font-size: 12px; }

/* ── Telefone ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .topo { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .topo nav { order: 3; width: 100%; overflow-x: auto; }
  .busca input { width: 170px; }
  .capa { padding: 100px 16px 34px; min-height: 300px; }
  .corpo { padding: 0 16px 50px; }
  .card { flex-basis: 200px; }
}


/* ═══════════════ A FAIXA AO VIVO DA PRIMEIRA TELA ═══════════════
   So aparece com a senha da casa. Numero de cliente nao vai para tela
   de cliente, e esta faixa mostra as tres contas juntas. */
.so-mari { display: none; }
html[data-master="ok"] .so-mari { display: block; }

#pulso {
  max-width: 1180px;
  margin: 0 auto 6px;
  padding: 22px 24px 26px;
  border: 1px solid rgba(212,162,78,.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(29,51,80,.34) 0%, rgba(11,22,34,.20) 100%);
}
.pulso-topo {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.pulso-topo h2 {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-size: 21px; letter-spacing: .01em; color: var(--kal-ink);
}
.pulso-hora {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kal-ink-mute); font-variant-numeric: tabular-nums;
}
.pulso-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
}
.pulso-card {
  background: rgba(8,12,22,.55);
  border: 1px solid rgba(179,188,207,.14);
  border-radius: 11px; padding: 16px 17px;
}
.pulso-conta {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--kal-gold); font-weight: 700; margin-bottom: 10px;
}
.pulso-hoje { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.pulso-hoje b {
  font-family: Georgia, serif; font-size: 30px; font-weight: 400; line-height: 1;
  color: var(--kal-ink); font-variant-numeric: tabular-nums;
}
.pulso-hoje span { font-size: 13px; color: var(--kal-ink-soft); }
.pulso-linha {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--kal-ink-mute);
  font-variant-numeric: tabular-nums;
  padding-top: 10px; border-top: 1px solid rgba(179,188,207,.10);
}
.pulso-ultima {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 12.5px; color: var(--kal-ink-soft);
}
.pulso-pino { color: var(--kal-mar-500); font-size: 9px; line-height: 1; }
.pulso-aviso {
  border-left: 2px solid var(--kal-gold-deep);
  padding: 2px 0 2px 14px;
}
.pulso-aviso strong { display: block; color: var(--kal-ink); font-size: 15px; margin-bottom: 5px; }
.pulso-aviso p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--kal-ink-mute); max-width: 68ch; }

@media (max-width: 640px) {
  #pulso { padding: 18px 16px 20px; border-radius: 11px; }
  .pulso-hoje b { font-size: 26px; }
}