/* ==========================================================================
   Landing do visitante (Fase 4). Só tokens do design system; claro e escuro.
   ========================================================================== */

/* Hero: proposta de valor + painel de exemplo */
.lp-hero {
  padding-block: var(--gm-space-7) var(--gm-space-8);
  background: var(--gm-hero-glow), var(--gm-color-bg);
}
.lp-hero__grid { display: grid; gap: var(--gm-space-7); align-items: center; }
@media (min-width: 992px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.lp-hero__texto { display: grid; gap: var(--gm-space-5); justify-items: start; }
.lp-hero__texto > * { margin: 0; }
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  padding: var(--gm-space-1) var(--gm-space-3);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-surface);
  border: var(--gm-border-width) solid var(--gm-color-border);
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-semibold);
  color: var(--gm-color-primary-text);
}
.lp-hero__titulo { font-size: var(--gm-font-size-3xl); max-width: var(--gm-measure-wide); }
.lp-lead { color: var(--gm-color-text-muted); max-width: var(--gm-measure); }
@media (min-width: 768px) {
  .lp-hero__titulo { font-size: var(--gm-font-size-display); }
  .lp-lead { font-size: var(--gm-font-size-md); }
}
.lp-cta { display: flex; flex-wrap: wrap; gap: var(--gm-space-3); }
.lp-confianca { display: grid; gap: var(--gm-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--gm-font-size-sm); }
.lp-confianca li { display: flex; align-items: flex-start; gap: var(--gm-space-2); }
.lp-confianca .gm-ico { color: var(--gm-color-success-text); flex: none; margin-top: var(--gm-space-0); }

.lp-demo { margin: 0; display: grid; gap: var(--gm-space-3); }
.lp-demo__painel {
  display: grid;
  gap: var(--gm-space-5);
  padding: var(--gm-space-5);
  background: var(--gm-color-surface);
  border: var(--gm-border-width) solid var(--gm-color-border);
  border-radius: var(--gm-radius-lg);
  box-shadow: var(--gm-shadow-3);
}
.lp-demo__painel > .gm-kicker { margin: 0; }
.lp-demo__medalhas { display: grid; gap: var(--gm-space-3); }
@media (min-width: 576px) {
  .lp-demo__medalhas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lp-demo__legenda { font-size: var(--gm-font-size-sm); color: var(--gm-color-text-muted); }

/* Seções */
.lp-secao { padding-block: var(--gm-space-8); }
.lp-secao--alt { background: var(--gm-color-surface); border-block: var(--gm-border-width) solid var(--gm-color-border); }
.lp-secao h2 { margin-bottom: var(--gm-space-6); }
.lp-secao h3 { font-size: var(--gm-font-size-lg); margin-bottom: var(--gm-space-2); }

.lp-passos, .lp-garantias {
  display: grid;
  gap: var(--gm-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-passo, .lp-garantias li {
  position: relative;
  display: grid;
  gap: var(--gm-space-2);
  align-content: start;
  padding: var(--gm-space-5);
  background: var(--gm-color-surface);
  border: var(--gm-border-width) solid var(--gm-color-border);
  border-radius: var(--gm-radius-md);
}
.lp-passo > *, .lp-garantias li > * { margin: 0; }
.lp-passo .gm-ico, .lp-garantias .gm-ico { color: var(--gm-color-primary); }
.lp-passo__numero {
  position: absolute;
  top: var(--gm-space-4);
  right: var(--gm-space-4);
  display: grid;
  place-items: center;
  width: var(--gm-target-min);
  height: var(--gm-target-min);
  border-radius: var(--gm-radius-round);
  background: var(--gm-color-xp-soft);
  color: var(--gm-color-xp-text);
  font-family: var(--gm-font-display);
  font-weight: var(--gm-font-weight-black);
  font-size: var(--gm-font-size-lg);
}
.lp-passo p, .lp-garantias p, .lp-lista { color: var(--gm-color-text-muted); }

.lp-colunas { display: grid; gap: var(--gm-space-5); }
@media (min-width: 768px) {
  .lp-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lp-coluna { padding: var(--gm-space-5); border-radius: var(--gm-radius-md); background: var(--gm-color-bg); border: var(--gm-border-width) solid var(--gm-color-border); }
.lp-coluna h3 { display: flex; align-items: center; gap: var(--gm-space-2); }
.lp-coluna h3 .gm-ico { color: var(--gm-color-primary); }
.lp-lista { display: grid; gap: var(--gm-space-3); margin: 0; padding-left: var(--gm-space-5); }
.lp-mais { margin: var(--gm-space-5) 0 0; }

@media (min-width: 768px) {
  .lp-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .lp-garantias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Perguntas frequentes: <details> nativo (teclado e leitor de tela sem JavaScript) */
.lp-faq > * { max-width: var(--gm-measure-wide); }
.lp-pergunta { border-bottom: var(--gm-border-width) solid var(--gm-color-border); }
.lp-pergunta summary {
  list-style: none;
  display: flex;
  align-items: center;
  min-height: var(--gm-target-min);
  padding-block: var(--gm-space-3);
  font-weight: var(--gm-font-weight-semibold);
  cursor: pointer;
}
.lp-pergunta summary::-webkit-details-marker { display: none; }
.lp-pergunta summary::after { content: '+' / ''; margin-left: auto; padding-left: var(--gm-space-4); font-size: var(--gm-font-size-lg); color: var(--gm-color-primary-text); }
.lp-pergunta[open] summary::after { content: '−' / ''; }
.lp-pergunta p { margin: 0 0 var(--gm-space-4); color: var(--gm-color-text-muted); max-width: var(--gm-measure); }

/* Chamada final */
.lp-final { padding-block: var(--gm-space-8); }
.lp-final__caixa {
  display: grid;
  justify-items: center;
  gap: var(--gm-space-4);
  padding: var(--gm-space-7) var(--gm-space-5);
  border-radius: var(--gm-radius-lg);
  background: var(--gm-color-primary-soft);
  text-align: center;
}
.lp-final__caixa > * { margin: 0; }
.lp-final__caixa p { color: var(--gm-color-text-muted); max-width: var(--gm-measure); }
.lp-final__caixa .lp-marca { font-size: var(--gm-font-size-sm); }