/* ============================================================================
   landing.css — componentes do site do ProductID
   ----------------------------------------------------------------------------
   Ordem de carregamento (obrigatória, declarada no cabeçalho de base.css):
     bootstrap.min.css → tokens.css → fonts.css → base.css → landing.css
     → cookie-consent.css

   Carregado pelos DOIS layouts (_Layout e _LayoutLegal): os primitivos daqui
   — botões, skip link — aparecem também no banner de cookies e nas páginas
   legais, que não carregam Bootstrap.

   REGRA (D1 do plano de redesign): tokens.css e base.css são cópias fiéis do
   design system, compartilhadas com Qnt.ProductID.Web. NÃO editar aqueles dois
   arquivos — todo ajuste específico do site entra aqui.

   Plano: docs/plans/2026-07-24-plano-landpage-redesign-visual.md
   ============================================================================ */


/* ── Variáveis locais ───────────────────────────────────────────────────────
   tokens.css traz escala fixa, adequada ao backoffice; a landing precisa de
   tipografia e respiro que acompanhem a viewport. Estas variáveis existem aqui
   — e não em tokens.css — porque aquele arquivo é compartilhado (D1).

   Os valores reproduzem os clamps do mock. Onde o mock usa px nos extremos,
   aqui vai rem: o limite passa a respeitar o tamanho de fonte do usuário.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Tipografia fluida */
  --lp-fs-display: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);    /*  36 →  60px — h1 do hero      */
  --lp-fs-h2:      clamp(1.75rem, 1.5rem + 1vw, 2.25rem);    /*  28 →  36px — título de seção */
  --lp-fs-quote:   clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); /*  22 →  28px — faixa charcoal  */

  /* Ritmo vertical e laterais */
  --lp-gutter:       clamp(1.25rem, 5vw, 2.5rem);      /* 20 →  40px — respiro lateral         */
  --lp-section-y:    clamp(4rem, 10vw, 8rem);          /* 64 → 128px — padding padrão de seção */
  --lp-section-y-lg: clamp(4rem, 10vw, 9rem);          /* 64 → 144px — chamada para pilotos    */
  --lp-hero-y-end:   clamp(3.5rem, 8vw, 6rem);         /* 56 →  96px — base do hero            */
  --lp-header-y:     clamp(0.75rem, 2vw, 1.125rem);    /* 12 →  18px — respiro do header       */
  --lp-panel-p:      clamp(2rem, 6vw, 3.5rem);         /* 32 →  56px — painéis destacados      */

  /* Largura útil — o container de 1200px vem de --container-max (tokens.css) */
  --lp-content-max: var(--container-max);

  /* Superfícies escuras: tokens.css só define --text-on-dark opaco. Estes dois
     cobrem texto secundário e borda sobre charcoal (banner de cookies, seções
     escuras). Contraste medido: 10,75:1 e 8,16:1 sobre #1c1c1c. */
  --lp-text-on-dark-strong: rgba(247, 244, 237, 0.82);
  --lp-text-on-dark-muted:  rgba(247, 244, 237, 0.70);
  --lp-border-on-dark:      rgba(247, 244, 237, 0.24);

  /* Distância do topo ao pular para uma âncora. O header é sticky e tem altura
     entre ~66px e ~78px conforme o clamp do respiro; 6rem cobre o pior caso com
     folga — mais barato e mais estável que medir a altura por script. */
  --lp-anchor-offset: 6rem;

  /* O header sobreposto ao conteúdo precisa de separação mais forte que
     --shadow-floating, calibrada para painéis sobre cream. */
  --lp-shadow-header:  0 1px 2px rgba(28, 28, 28, 0.04), 0 6px 16px rgba(28, 28, 28, 0.07);
  --lp-shadow-overlay: 0 18px 40px rgba(0, 0, 0, 0.35);

  /* Ajustes do mock v2 (docs/plans/2026-07-26-plano-landpage-ajustes-mock-v2.md) sem
     token equivalente em tokens.css — one-off, por isso vivem aqui e não lá (D1). */
  --lp-nav-underline:      rgba(28, 28, 28, 0.5);   /* sublinhado animado da nav no hover */
  --lp-tag-hover-border:   rgba(28, 28, 28, 0.24);  /* borda das pílulas de módulo no hover */
}


/* ── Botões ─────────────────────────────────────────────────────────────────
   Primitivos próprios em vez das variantes do Bootstrap: o banner de cookies
   renderiza também em _LayoutLegal, que não carrega Bootstrap — com .btn-primary
   os botões saíam sem estilo naquelas páginas.
   ────────────────────────────────────────────────────────────────────────── */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-fast),
              background-color var(--transition-fast),
              color var(--transition-fast);
}

.lp-btn:hover {
  text-decoration: none;
}

.lp-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.lp-btn--sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-body-sm);
}

/* Primário — a assinatura tátil do design system (highlight no topo + ring). */
.lp-btn--primary {
  background-color: var(--surface-dark);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-inset-dark);
}

.lp-btn--primary:hover,
.lp-btn--primary:active {
  color: var(--text-on-dark);
  opacity: var(--opacity-pressed);
}

.lp-btn--primary:focus-visible {
  box-shadow: var(--shadow-inset-dark), var(--shadow-focus);
}

.lp-btn--ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-interactive);
}

.lp-btn--ghost:hover,
.lp-btn--ghost:active {
  background-color: var(--color-charcoal-a04);
  color: var(--text-primary);
}

/* Variantes para uso sobre charcoal (banner de cookies, seções escuras). */
.lp-btn--on-dark {
  background-color: var(--color-cream-soft);
  color: var(--text-primary);
}

.lp-btn--on-dark:hover,
.lp-btn--on-dark:active {
  color: var(--text-primary);
  opacity: var(--opacity-pressed);
}

.lp-btn--outline-on-dark {
  background-color: transparent;
  color: var(--text-on-dark);
  border-color: var(--lp-border-on-dark);
}

.lp-btn--outline-on-dark:hover,
.lp-btn--outline-on-dark:active {
  background-color: rgba(247, 244, 237, 0.08);
  color: var(--text-on-dark);
}

/* Botão que se comporta como link — mantém o sublinhado, que aqui é o sinal
   de que o elemento é acionável. */
.lp-btn--link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lp-btn--link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.lp-btn--link-on-dark {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lp-text-on-dark-strong);
  font-weight: var(--fw-regular);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lp-btn--link-on-dark:hover {
  color: var(--text-on-dark);
  text-decoration: underline;
}


/* ── Header ─────────────────────────────────────────────────────────────────
   Estrutura do mock: marca + tagline à esquerda, navegação e CTA à direita.
   O collapse do Bootstrap é preservado para o menu mobile — é comportamento
   testado e o bundle já está carregado; aqui só o vocabulário visual muda.
   ────────────────────────────────────────────────────────────────────────── */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow var(--transition-base);
}

/* Classe alternada por site.js ao rolar: separa o header do conteúdo. Mock v2 soma
   translucidez + blur à sombra que já existia — efeito só perceptível quando há
   conteúdo passando sob o header fixo, por isso mora no estado "rolado", não no base. */
.lp-header.navbar-shrink {
  background-color: color-mix(in srgb, var(--surface-raised) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--lp-shadow-header);
}

.lp-header__inner.navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-padding-x: 0;
  max-width: var(--lp-content-max);
  margin: 0 auto;
  padding: var(--lp-header-y) var(--lp-gutter);
  gap: var(--space-6);
}

.lp-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
}

.lp-brand:hover {
  color: var(--text-primary);
  text-decoration: none;
}

/* Altura fixa, largura livre: a logo tem proporção própria (svg com viewBox
   ~3.7:1) e não pode ser esticada para bater com a largura do texto antigo. */
.lp-brand__logo {
  display: block;
  height: 2.80rem;
  width: auto;
}

.lp-brand__tagline {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.lp-toggler.navbar-toggler {
  padding: var(--space-2) var(--space-4);
  border-color: var(--border-subtle);
  border-radius: var(--radius-sm);
}

.lp-toggler.navbar-toggler:focus,
.lp-toggler.navbar-toggler:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.lp-nav__list.navbar-nav {
  align-items: center;
  gap: var(--space-5);
}

.lp-nav__link.nav-link {
  padding: 0 0 2px;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  text-decoration: none;
  /* Nunca quebrar um item em duas linhas: com navbar-expand-xl e o teto de
     --lp-content-max, o flexbox pode tentar encolher os links antes de faltar
     espaço de verdade — sem isso, "Casos de uso" quebrava uma palavra por linha. */
  white-space: nowrap;
  /* Sublinhado animado do mock v2: box-shadow em vez de border-bottom para não
     causar reflow ao animar. */
  box-shadow: 0 1px 0 0 transparent;
  transition: box-shadow var(--transition-base), color var(--transition-base);
}

.lp-nav__link.nav-link:hover,
.lp-nav__link.nav-link:focus,
.lp-nav__link.nav-link.active {
  color: var(--text-primary);
  box-shadow: 0 1px 0 0 var(--lp-nav-underline);
}

.lp-nav__link.nav-link:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-focus);
}

.lp-nav__signin.nav-link {
  margin-left: var(--space-6);
  white-space: nowrap;
}

.lp-nav__cta {
  margin-left: var(--space-6);
  white-space: nowrap;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-body-sm);
}

/* Abaixo do breakpoint do collapse a navegação vira lista vertical. */
@media (max-width: 1199.98px) {
  .lp-nav.navbar-collapse {
    padding-top: var(--space-5);
  }

  .lp-nav__list.navbar-nav {
    align-items: flex-start;
    gap: var(--space-4);
  }

  .lp-nav__signin.nav-link {
    margin-left: 0;
    margin-top: var(--space-4);
  }

  .lp-nav__cta {
    margin-left: 0;
    margin-top: var(--space-5);
    align-self: flex-start;
  }
}


/* ── Footer ─────────────────────────────────────────────────────────────────
   Visual do mock, lista de links da V1. O mock mostra três links; a página
   mantém os quatro — Termos, Privacidade, Cookies e a reabertura das
   preferências — porque o consentimento revogável é exigência de LGPD, e o
   mock é fonte de verdade de conteúdo, não de compliance.
   ────────────────────────────────────────────────────────────────────────── */

.lp-footer {
  background-color: var(--surface-page);
  border-top: 1px solid var(--border-subtle);
}

.lp-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  max-width: var(--lp-content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--lp-gutter);
}

.lp-footer__brand {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-1);
}

.lp-footer__tagline {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.lp-footer__legal {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.lp-footer__company {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.lp-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.lp-footer__links a {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-decoration: none;
}

.lp-footer__links a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.lp-footer__links .lp-btn--link {
  font-size: var(--fs-caption);
  text-decoration: none;
}

.lp-footer__links .lp-btn--link:hover {
  text-decoration: underline;
}


/* ── Acessibilidade ─────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  padding: var(--space-4) var(--space-6);
  background-color: var(--surface-raised);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-lg) 0;
}

.skip-link:focus {
  left: 0;
  box-shadow: var(--shadow-focus);
}

/* O alvo do skip link recebe foco por script, não por interação: o anel de foco
   aqui seria ruído visual sem informação. */
#main-content:focus {
  outline: none;
}

/* Âncora não pode parar sob o header sticky. */
main [id] {
  scroll-margin-top: var(--lp-anchor-offset);
}


/* ── Revelação por scroll ───────────────────────────────────────────────────
   D9: o HTML nasce visível. Só landing.js aplica `.lp-reveal-hidden` — se o
   script não rodar, falhar ou for bloqueado, a seção permanece visível, sem
   animação, nunca em branco.
   ────────────────────────────────────────────────────────────────────────── */

[data-reveal] {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].lp-reveal-hidden {
  opacity: 0;
  transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
  }
}

/* ── Seções ─────────────────────────────────────────────────────────────────
   Primitivos compartilhados pelas 12 seções do mock. As margens do mock foram
   arredondadas para a escala de tokens (ex.: 20px → --space-6, 48px → --space-8):
   consistência da escala vale mais que cópia de pixel, e o mock foi desenhado
   com valores livres.
   ────────────────────────────────────────────────────────────────────────── */

.lp-section {
  padding: var(--lp-section-y) 0;
}

/* Alternância de fundo do mock: página / afundado. */
.lp-section--sunken {
  background-color: var(--surface-sunken);
}

/* O hero tem base mais curta que o topo. */
.lp-section--hero {
  padding: var(--lp-section-y) 0 var(--lp-hero-y-end);
}

.lp-container {
  max-width: var(--lp-content-max);
  margin: 0 auto;
  padding: 0 var(--lp-gutter);
}

/* Coluna estreita de leitura — FAQ. */
.lp-container--narrow {
  max-width: var(--container-narrow);
}

/* Seção escura — chamada para pilotos. base.css pinta h2 e p com as cores
   claras, então ambas precisam ser reafirmadas aqui. */
.lp-section--dark {
  background-color: var(--surface-dark);
  color: var(--text-on-dark);
}

.lp-section--dark .lp-h2 {
  color: var(--text-on-dark);
}

.lp-section--dark p {
  color: var(--lp-text-on-dark-strong);
}

.lp-section--dark .lp-text--w52 {
  color: var(--lp-text-on-dark-muted);
}

/* Padding maior, do mock, para a seção de chamada. */
.lp-section--lg {
  padding: var(--lp-section-y-lg) 0;
}

/* Seções centralizadas: os blocos com medida de linha precisam centralizar
   também as margens, senão encostam à esquerda. */
.lp-section--center {
  text-align: center;
}

.lp-section--center .lp-h2,
.lp-section--center .lp-lead,
.lp-section--center .lp-text--w52 {
  margin-left: auto;
  margin-right: auto;
}

.lp-section--center .lp-actions {
  justify-content: center;
}

/* Duas colunas que quebram sozinhas quando não cabem — o mesmo
   `flex: 1 1 460px` do mock, sem media query. */
.lp-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-9);
}

.lp-split__col {
  flex: 1 1 28.75rem;
  min-width: 0;
}

.lp-split--gap-below {
  margin-bottom: var(--space-9);
}

/* Eyebrow de seção (mock v2) ------------------------------------------------

   Rótulo mono/uppercase acima do título — repete em 10 das 12 seções, por isso
   é classe e não estilo repetido em cada partial. --color-info é a mesma cor
   usada pela pílula "Ativo/Configurado" do ProductPair — vocabulário reaproveitado,
   não uma cor nova. */

.lp-eyebrow {
  display: block;
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-info);
}

/* Variante para a seção "Chamada para pilotos" (fundo charcoal). */
.lp-eyebrow--on-dark {
  color: var(--lp-text-on-dark-muted);
}

/* Títulos ------------------------------------------------------------------ */

.lp-h1 {
  margin: 0 0 var(--space-6);
  font-size: var(--lp-fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.lp-h2 {
  margin: 0 0 var(--space-7);
  font-size: var(--lp-fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

.lp-h2--gap-sm { margin-bottom: var(--space-6); }
.lp-h2--gap-lg { margin-bottom: var(--space-9); }

/* Medidas de linha do mock, mantidas como utilitárias porque variam por seção. */
.lp-h2--w30 { max-width: 30ch; }
.lp-h2--w32 { max-width: 32ch; }
.lp-h2--w34 { max-width: 34ch; }
.lp-h2--w36 { max-width: 36ch; }

.lp-text--w52 { max-width: 52ch; }
.lp-text--w62 { max-width: 62ch; }
.lp-text--w64 { max-width: 64ch; }

/* Texto -------------------------------------------------------------------- */

/* Parágrafo de abertura: corpo maior, entrelinha menor. */
.lp-lead {
  max-width: 46ch;
  font-size: var(--fs-body-lg);
  line-height: 1.38;
  color: var(--text-strong);
}

.lp-note {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  /* Colapsa com a margem inferior do parágrafo anterior — resulta nos 32px do mock. */
  margin: var(--space-7) 0 var(--space-5);
}

/* Faixa escura com a frase-tese --------------------------------------------- */

.lp-quote {
  padding: var(--lp-panel-p);
  background-color: var(--surface-dark);
  border-radius: var(--radius-xl);
}

.lp-quote p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--lp-fs-quote);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--text-on-dark);
}

/* Passos numerados --------------------------------------------------------- */

.lp-steps {
  max-width: 47.5rem;
  position: relative;
}

/* Linha conectora do mock v2: atravessa os steps por trás dos círculos numerados.
   left = centro do círculo de 2.5rem (40px); top/bottom recuam a mesma medida do
   padding vertical do step para não vazar antes do primeiro nem depois do último. */
.lp-steps::before {
  content: "";
  position: absolute;
  left: 1.1875rem;
  top: var(--space-6);
  bottom: var(--space-6);
  width: 1px;
  background-color: var(--border-subtle);
}

.lp-step {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.lp-step__number {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  /* Fundo opaco + z-index cobrem a linha conectora, que passa por baixo. */
  position: relative;
  z-index: 1;
}

.lp-step__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

/* Cards -------------------------------------------------------------------- */

.lp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--space-6);
}

.lp-card {
  padding: var(--space-7);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.lp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-floating);
  border-color: var(--border-interactive);
}

/* Selo numerado do mock v2 — mesmo par de cores da pílula "Ativo/Configurado"
   do ProductPair (--color-info-bg-soft/--color-info-fg), não um token novo. */
.lp-card__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--space-5);
  background-color: var(--color-info-bg-soft);
  color: var(--color-info-fg);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.lp-card__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

.lp-card p {
  margin: 0;
  font-size: var(--fs-body-sm);
}

/* Benefícios — título à esquerda, descrição à direita ---------------------- */

.lp-benefits {
  max-width: 50rem;
}

/* Padding lateral + margem negativa do mesmo valor: o hover "vazuja" até a
   borda do container sem deslocar o conteúdo (mesmo truque em .lp-faq__question). */
.lp-benefit {
  display: grid;
  grid-template-columns: minmax(12.5rem, 17.5rem) 1fr;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-5);
  margin: 0 calc(var(--space-5) * -1);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base);
}

.lp-benefit:hover {
  background-color: var(--color-charcoal-a03);
}

.lp-benefit__title {
  margin: 0;
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

.lp-benefit p {
  margin: 0;
}

/* Em tela estreita as duas colunas viram uma, com o título colado na descrição. */
@media (max-width: 575.98px) {
  .lp-benefit {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* Pílulas de módulo -------------------------------------------------------- */

.lp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.lp-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  color: var(--text-strong);
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

.lp-tag:hover {
  background-color: var(--color-charcoal-a04);
  border-color: var(--lp-tag-hover-border);
  transform: translateY(-1px);
}

/* Lista de capacidades e painel destacado (seção do SurfboardID) ----------- */

.lp-list-intro {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}

.lp-list {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
  color: var(--text-body);
}

.lp-panel {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.lp-panel p {
  margin: 0;
  color: var(--text-primary);
}

/* FAQ ---------------------------------------------------------------------- */

/* <details> nativo: acordeão acessível sem uma linha de JavaScript, com estado
   anunciado pelo próprio navegador e funcionando com JS desligado. */
.lp-faq__item {
  border-bottom: 1px solid var(--border-subtle);
}

.lp-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* Padding lateral + margem negativa do mesmo valor: mesmo truque de
     .lp-benefit para o hover vazar até a borda do container. */
  padding: var(--space-6) var(--space-1);
  margin: 0 calc(var(--space-1) * -1);
  border-radius: var(--radius-md);
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-base);
  /* Remove o triângulo padrão: `display: flex` já o suprime na maioria dos
     navegadores; as duas linhas cobrem o resto. */
  list-style: none;
}

.lp-faq__question:hover {
  background-color: var(--color-charcoal-a03);
}

.lp-faq__question::-webkit-details-marker {
  display: none;
}

/* Indicador +/− puramente decorativo — o estado real quem anuncia é o
   <details>. Por isso é pseudo-elemento e não texto no markup. */
.lp-faq__question::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
}

.lp-faq__item[open] .lp-faq__question::after {
  content: "−";
}

.lp-faq__question:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-focus);
}

.lp-faq__answer {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
}

/* Formulário --------------------------------------------------------------- */

.lp-hidden {
  display: none;
}

.lp-container--form {
  max-width: 50rem;
}

.lp-form__intro {
  margin: 0 0 var(--space-8);
}

.lp-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.lp-field--block {
  margin-bottom: var(--space-6);
}

.lp-field--full {
  grid-column: 1 / -1;
}

.lp-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.lp-label--optional {
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.lp-input,
.lp-textarea {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
}

/* Campos preservam o ring azul: é o sinal de foco que os usuários reconhecem, e
   base.css registra essa escolha para os controles de formulário. */
.lp-input:focus-visible,
.lp-textarea:focus-visible {
  outline: none;
  border-color: var(--border-interactive);
  box-shadow: var(--shadow-ring-focus);
}

.lp-textarea {
  min-height: 7rem;
  line-height: var(--lh-body);
  resize: vertical;
}

.lp-validation {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-danger-fg);
}

/* Classe aplicada pelo jquery-validation-unobtrusive ao campo reprovado. Sem isto a mensagem aparece
   mas o campo fica idêntico aos demais — em formulário de quinze campos, o erro se perde.
   Medido: 4,66:1 sobre cream, acima do mínimo de 3:1 para elemento de interface. */
.lp-input.input-validation-error,
.lp-textarea.input-validation-error {
  border-color: var(--color-danger);
}

/* Sugestão de correção de domínio de e-mail. */
.lp-suggestion {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-warning-bg-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  color: var(--color-warning-fg);
}

/* Botão, e não a caixa inteira clicável: caixa não recebe foco pelo teclado. */
.lp-suggestion__apply {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--fw-medium);
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Grupo de escolhas ------------------------------------------------------- */

.lp-fieldset {
  margin: 0 0 var(--space-7);
  padding: 0;
  border: 0;
}

.lp-legend {
  padding: 0;
  margin-bottom: var(--space-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.lp-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Checkbox real, apenas fora de vista: posta sozinho, navega por teclado e
   funciona sem JavaScript. `opacity: 0` com 1px em vez de `display: none`
   justamente para continuar focável. */
.lp-choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.lp-choice__label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.lp-choice__label:hover {
  border-color: var(--border-interactive);
}

.lp-choice__input:checked + .lp-choice__label {
  background-color: var(--surface-dark);
  border-color: var(--surface-dark);
  color: var(--text-on-dark);
}

.lp-choice__input:focus-visible + .lp-choice__label {
  box-shadow: var(--shadow-focus);
}

/* Bloco de opcionais ------------------------------------------------------ */

.lp-disclosure {
  margin-bottom: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.lp-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.lp-disclosure__summary::-webkit-details-marker {
  display: none;
}

.lp-disclosure__summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
}

.lp-disclosure[open] .lp-disclosure__summary::after {
  content: "−";
}

.lp-disclosure__summary:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-focus);
}

.lp-disclosure__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

/* Resultado do envio ------------------------------------------------------ */

.lp-form-success {
  padding: var(--space-7);
  background-color: var(--color-success-bg-soft);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
  border-radius: var(--radius-lg);
}

.lp-form-success__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  color: var(--color-success-fg);
}

.lp-form-success p {
  color: var(--color-success-fg);
}

.lp-form-alert {
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-danger-bg-soft);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius-lg);
  color: var(--color-danger-fg);
}

.lp-form__privacy {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.lp-form__channels {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-body-sm);
}

.lp-form__channels p {
  margin: 0 0 var(--space-1);
}

/* Ressalva destacada ------------------------------------------------------- */

/* Sem token semântico para o fundo deste par (a03); é a mesma composição que
   base.css usa em <pre>.

   A barra à esquerda usa --border-interactive (a55) e não o a40 do mock: medido,
   a40 rende 2,45:1 sobre cream e reprova o mínimo de 3:1 do WCAG 1.4.11. A barra
   é o que sinaliza "isto é uma ressalva", então conta como informativa. O a55
   rende 3,73:1 — é o valor que tokens.css documenta como conforme. */
.lp-callout {
  max-width: 62ch;
  margin: 0;
  padding: var(--space-5);
  background-color: var(--color-charcoal-a03);
  border-left: 3px solid var(--border-interactive);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-muted);
}


/* ── Componente ProductPair ─────────────────────────────────────────────────
   Ilustração "produto físico ↔ página digital", usada no hero, na seção de
   solução e na do SurfboardID.
   ────────────────────────────────────────────────────────────────────────── */

/* Contêiner do <symbol> do QR: fora do fluxo, sem área de renderização. */
.lp-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lp-pair {
  container-type: inline-size;
}

/* Uma coluna por padrão; as duas entram só quando o componente tem largura.
   Container query e não media query porque a largura dele depende de o flex da
   seção ter quebrado ou não — a viewport é um proxy ruim: quando ela diminui e o
   flex quebra, o componente fica mais LARGO, não mais estreito. Navegador sem
   suporte a container query permanece em coluna única, que é o estado seguro. */
.lp-pair__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@container (min-width: 30rem) {
  .lp-pair__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Metade física ------------------------------------------------------------ */

.lp-pair__physical {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.lp-pair__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.lp-pair__qr {
  width: 6.5rem;
  height: 6.5rem;
  /* O glifo é inteiro currentColor — a cor mora aqui, em token. */
  color: var(--text-primary);
}

/* Variante com foto real do produto físico no lugar do QR em SVG. */
.lp-pair__frame--photo {
  padding: var(--space-4);
}

.lp-pair__photo {
  display: block;
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 686 / 1326;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.lp-pair__identifier {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.lp-pair__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.lp-pair__caption-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.lp-pair__caption-text {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* Metade digital ----------------------------------------------------------- */

/* Moldura escura (bezel), imitando a borda preta de um display no mock.
   Sombra flutuante estática (mock v2) — não é hover, é o mesmo --shadow-floating
   usado no hover dos cards de caso de uso; nenhum valor novo. */
.lp-pair__digital {
  padding: var(--space-3);
  background-color: var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
}

/* "Tela": a metade digital em si, dentro da moldura. */
.lp-pair__screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--surface-raised);
  border-radius: calc(var(--radius-xl) - var(--space-3));
}

/* Variante com print real da página pública no lugar do cartão simulado. */
.lp-pair__screen--photo {
  padding: 0;
  overflow: hidden;
}

.lp-pair__screenshot {
  display: block;
  width: 100%;
  aspect-ratio: 490 / 608; /* == dimensões nativas exatas de public-page.webp */
  object-fit: cover;
  border-radius: calc(var(--radius-xl) - var(--space-3));
}

.lp-pair__eyebrow {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.lp-pair__title {
  margin: 0;
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.lp-pair__rows {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
}

.lp-pair__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.lp-pair__row-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* <dd> tem margin-inline-start de 40px por padrão do navegador, e base.css não
   reseta listas de definição. */
.lp-pair__row-value {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-primary);
  text-align: right;
}

/* Pílula de estado — mesma gramática das pílulas do style guide. */
.lp-pair__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

.lp-pair__pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.85;
}

.lp-pair__pill--info {
  background-color: var(--color-info-bg-soft);
  color: var(--color-info-fg);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}

.lp-pair__pill--success {
  background-color: var(--color-success-bg-soft);
  color: var(--color-success-fg);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}