/* ═══════════════════════════════════════════════════════════════════════
 * mocosense · a landing nova (14-09-2026)
 *
 * Ordem do dono: «landing page super interactiva com mockups dos dashboards,
 * header com 3 cards, de 3 categorias diferentes a fazer CTA ao uso da versão
 * gratuita». Três peças: os três cartões da abertura, os painéis por dentro
 * (a janela com os separadores) e os business insights. Os tokens vêm de
 * ds/*.css e do topo de landing.css; nada de cor nova escrita à mão.
 * Nenhuma regra aqui depende de um atributo style no HTML (a política de
 * segurança só aceita folhas da casa).
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · a abertura com os três cartões ─────────────────────────────── */
.lp3-abertura {
  background: var(--fundo);
  /* os 72px da barra fixa, mais o ar de cima */
  padding: calc(72px + clamp(20px, 5vh, 56px)) clamp(16px, 4vw, 64px) clamp(24px, 4vh, 44px);
}
.lp3-abertura h1 {
  font-size: clamp(30px, 5vw, 60px); line-height: 1.04;
  color: var(--azul-moco); max-inline-size: 18ch; text-wrap: balance;
}
.lp3-cartoes {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  margin-block: clamp(20px, 4vh, 36px) 18px;
}
@media (min-width: 900px) { .lp3-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

.lp3-cartao {
  display: flex; flex-direction: column; gap: 8px; min-inline-size: 0;
  padding: 20px; border-radius: 24px;
  background: var(--cartao); color: var(--tinta);
  box-shadow: var(--cartao-sombra, 0 1px 2px rgba(11,17,25,.04), 0 16px 32px rgba(11,17,25,.09));
  transition: transform var(--transicao, 150ms ease-out), box-shadow var(--transicao, 150ms ease-out);
}
@media (min-width: 900px) { .lp3-cartao { padding: 24px; border-radius: var(--raio-cartao, 32px); } }
.lp3-cartao:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(11,17,25,.05), 0 22px 40px rgba(11,17,25,.13); }
@media (prefers-reduced-motion: reduce) { .lp3-cartao, .lp3-cartao:hover { transition: none; transform: none; } }

.lp3-cartao-sector {
  margin: 0; font-family: var(--fonte-texto); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--secundario);
}
.lp3-cartao-titulo {
  margin: 0; font-family: var(--fonte-display); font-weight: 700;
  font-size: clamp(19px, 1.7vw, 23px); line-height: 1.15; letter-spacing: -.02em;
  color: var(--azul-moco); text-wrap: balance;
}
.lp3-cartao-vivo {
  display: flex; flex-direction: column; gap: 6px; min-inline-size: 0;
  /* o lugar dos números fica reservado: o cartão não salta quando chegam */
  min-block-size: 168px; margin-block: 4px 6px;
}
.lp3-cartao-vivo .lp2-espera { block-size: 150px; }
.lp3-cartao-vivo .lp2-valor { font-size: clamp(30px, 3vw, 40px); }

/* o botão de cada cartão: sempre em baixo, sempre leva a algum lado */
.lp3-cartao-cta, .lp3-janela-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 48px; padding-inline: 22px; border-radius: var(--raio-pilula, 999px);
  background: var(--azul-moco); color: var(--creme-moco);
  font-family: var(--fonte-texto); font-weight: 600; font-size: 15px;
  text-decoration: none; text-align: center;
}
.lp3-cartao-cta { margin-block-start: auto; }
.lp3-cartao-cta::after, .lp3-janela-cta::after { content: "→"; font-weight: 400; }
.lp3-cartao-cta:hover, .lp3-janela-cta:hover { color: var(--creme-moco); background: var(--escuro); }
.lp3-cartao-cta:focus-visible, .lp3-janela-cta:focus-visible, .lp3-sep:focus-visible, .lp3-aba:focus-visible {
  outline: 3px solid var(--ambar); outline-offset: 3px;
}

/* o câmbio: os cinco balcões com nome */
.lp3-lista-rot {
  margin: 8px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--secundario);
}
.lp3-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: balcao; }
.lp3-lista > li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px;
  padding-block: 5px; border-block-end: 1px solid var(--linha); counter-increment: balcao;
}
.lp3-lista > li::before {
  content: counter(balcao); font-family: var(--fonte-mono); font-size: 11px; color: var(--secundario);
  inline-size: 1.4em;
}
.lp3-lista-nome {
  font-size: 14px; font-weight: 500; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp3-lista-valor { font-family: var(--fonte-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--azul-moco); }

/* o que abre com conta: dito numa linha, sem âmbar e sem alarme */
.lp3-fechado {
  margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--secundario);
  display: flex; align-items: center; gap: 8px;
}
.lp3-fechado::before {
  content: ""; flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px;
  border: 1.5px solid currentColor; opacity: .7;
}

/* a banca: três números do mês */
.lp3-kpis { margin: 0; display: grid; gap: 10px; }
.lp3-kpi { display: grid; gap: 2px; padding-block-end: 8px; border-block-end: 1px solid var(--linha); }
.lp3-kpi:last-child { border-block-end: 0; }
.lp3-kpi dt { font-size: 13px; color: var(--secundario); }
.lp3-kpi dd { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.lp3-kpi .lp2-valor { font-size: clamp(22px, 2.2vw, 28px); }

/* o comércio: o produto com a maior diferença */
.lp3-produto {
  margin: 0; font-size: 14px; line-height: 1.35; color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 2 · os painéis, por dentro ─────────────────────────────────────── */
.lp3-paineis { background: var(--fundo); padding: clamp(28px, 5vh, 56px) clamp(16px, 4vw, 64px) clamp(40px, 6vh, 72px); }
.lp3-titulo {
  margin: 0; font-family: var(--fonte-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--azul-moco);
}
.lp3-subtitulo {
  margin: 10px 0 0; max-inline-size: 62ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; color: var(--secundario);
}

/* os separadores: uma fila de pastilhas que corre de lado no telemóvel */
.lp3-separadores {
  display: flex; gap: 8px; margin-block: 22px 14px; padding-block: 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lp3-separadores::-webkit-scrollbar { display: none; }
.lp3-sep {
  flex: none; min-block-size: 44px; padding-inline: 18px; border-radius: var(--raio-pilula, 999px);
  border: 1.5px solid var(--azul-moco); background: transparent; color: var(--azul-moco);
  font-family: var(--fonte-texto); font-weight: 600; font-size: 15px; cursor: pointer;
}
.lp3-sep[aria-selected="true"] { background: var(--azul-moco); color: var(--creme-moco); }
.lp3-sep:hover:not([aria-selected="true"]) { background: var(--cartao); }

/* a janela: um painel de verdade dentro de uma moldura de ecrã */
.lp3-janela {
  display: flex; flex-direction: column; gap: 14px; min-inline-size: 0;
  min-block-size: 440px; padding: 14px; border-radius: var(--raio-chrome, 16px);
  background: var(--cartao); border: 1px solid var(--linha);
  box-shadow: var(--vidro-sombra, 10px 14px 28px rgba(21,38,58,.14));
}
@media (min-width: 900px) { .lp3-janela { padding: 18px 22px 22px; } }
.lp3-janela[aria-busy="true"] > .lp2-espera { block-size: 400px; }
.lp3-janela-topo {
  display: flex; align-items: center; gap: 6px;
  padding-block-end: 12px; border-block-end: 1px solid var(--linha);
}
.lp3-janela-ponto { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--linha); }
.lp3-janela-nome {
  margin-inline-start: 10px; font-size: 13px; font-weight: 600; color: var(--secundario);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* as abas do painel: pastilhas pequenas, a escolhida cheia */
.lp3-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.lp3-aba {
  min-block-size: 36px; padding-inline: 14px; border-radius: var(--raio-pilula, 999px);
  border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta);
  font-family: var(--fonte-texto); font-size: 14px; cursor: pointer;
}
.lp3-aba[aria-pressed="true"] { background: var(--azul-moco); border-color: var(--azul-moco); color: var(--creme-moco); font-weight: 600; }
.lp3-aba:hover:not([aria-pressed="true"]) { border-color: var(--azul-moco); }

/* a grelha dos blocos, em miniatura */
.lp3-grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; flex: 1; }
@media (min-width: 640px) { .lp3-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .lp3-grelha { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp3-mini {
  display: flex; flex-direction: column; gap: 4px; min-inline-size: 0;
  padding: 14px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linha);
}
@media (min-width: 640px) { .lp3-mini--barras { grid-column: span 2; } }
.lp3-mini-rot {
  margin: 0; font-size: 12px; line-height: 1.35; color: var(--secundario);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp3-mini-num {
  margin: 2px 0 0; font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; color: var(--azul-moco);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp3-mini-un { font-family: var(--fonte-texto); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--secundario); }
.lp3-mini-data { margin: auto 0 0; font-size: 11px; color: var(--secundario); }
.lp3-mini-mais { margin: 4px 0 0; font-size: 12px; color: var(--secundario); }

/* as barras: o nome (ou o número velado), o trilho, o valor */
.lp3-barras { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.lp3-barra {
  display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) auto; align-items: center; gap: 10px;
}
.lp3-barra-rot {
  font-size: 13px; color: var(--secundario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp3-barra--nome .lp3-barra-rot { color: var(--tinta); font-weight: 600; }
.lp3-barra-trilho { display: block; block-size: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.lp3-barra-cheia { display: block; block-size: 100%; border-radius: 4px; background: var(--azul-moco); }
.lp3-barra:not(.lp3-barra--nome) .lp3-barra-cheia { opacity: .45; }
.lp3-barra-num { font-family: var(--fonte-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--tinta); }

.lp3-janela-pe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  padding-block-start: 12px; border-block-start: 1px solid var(--linha);
}
.lp3-janela-pe .lp3-fechado { margin: 0; }
.lp3-janela-vazia { margin: 0; padding-block: 24px; font-size: 15px; line-height: 1.5; color: var(--secundario); }

/* ── 2b · os business insights ──────────────────────────────────────── */
.lp3-insights { background: var(--superficie); padding: clamp(36px, 6vh, 72px) clamp(16px, 4vw, 64px); }
.lp3-insights .lp3-cartao-sector { margin-block-end: 8px; }
.lp3-insights-lista {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}
@media (min-width: 760px) { .lp3-insights-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1080px) { .lp3-insights-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp3-insight {
  display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px;
  background: var(--cartao); border-inline-start: 4px solid var(--azul-moco);
  box-shadow: 0 1px 2px rgba(11,17,25,.04), 0 10px 24px rgba(11,17,25,.07);
}
.lp3-insight-frase {
  margin: 0; font-family: var(--fonte-display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.3; color: var(--tinta); text-wrap: pretty;
}
.lp3-insight .lp2-data { margin: auto 0 0; }

/* os preços das lojas: o produto, a faixa do mais barato ao mais caro, a diferença */
.lp3-precos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.lp3-preco { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.lp3-preco-nome { font-size: 13px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp3-preco-faixa { display: block; block-size: 100%; border-radius: 4px; background: var(--azul-moco); }
.lp3-preco-dif { font-family: var(--fonte-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--tinta); }

/* ── o telemóvel (14-09-2026, visto a 375px) ────────────────────────────
 * Dois números por linha em vez de um, e nas barras o nome por cima do
 * trilho: a 375px o nome do balcão cortava-se em «Banco de Inve…». */
@media (max-width: 639px) {
  .lp3-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp3-mini--barras { grid-column: 1 / -1; }
  .lp3-mini { padding: 12px; }
  .lp3-mini-num { font-size: clamp(17px, 5.2vw, 22px); }
  .lp3-barra, .lp3-preco {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "rot num" "trilho trilho"; row-gap: 4px;
  }
  .lp3-barra-rot, .lp3-preco-nome { grid-area: rot; }
  .lp3-barra-num, .lp3-preco-dif { grid-area: num; }
  .lp3-barra-trilho { grid-area: trilho; }
}

/* o número solto alinha em altura com os vizinhos; o que tem história fechada
 * (o gráfico no tempo abre no Analista) leva o contorno tracejado */
.lp3-mini--kpi { min-block-size: 104px; }
.lp3-mini--tempo { border-style: dashed; }