/* ============================================================================
   landing.css — vocabulário visual da land page (Fase B, Task 01)
   ----------------------------------------------------------------------------
   Carregado DEPOIS de bootstrap.min.css, tokens.css, fonts.css e base.css.

   Existe para que cada partial de seção seja quase só HTML semântico com
   classes: o mock tem 431 atributos `style=` inline, e a CSP está em
   ENFORCEMENT desde a Task 03 da Fase A — um único `style=` quebra a página em
   produção. Nascer sem inline é muito mais barato que remover depois (foi
   exatamente isso que manteve a CSP desligada na land page atual por anos).

   Convenção `lp-`, a mesma do Qnt.ProductID.LandPage. Toda cor vem de
   tokens.css: a paleta do mock mapeia 1:1 nos tokens existentes, então não há
   um único valor hexadecimal solto neste arquivo.
   ============================================================================ */

:root {
  /* Duas adições do Anexo B do mock. Moram AQUI, e não em tokens.css, porque
     tokens.css é cópia sem edição do arquivo da aplicação — divergir lá
     divergiria também da app. Estes dois são só da land page. */

  /* --fs-display (44px fixo) não escala para um hero de marketing: precisa
     crescer em telas largas e encolher fluido no mobile. */
  --fs-hero: clamp(32px, 4.6vw, 54px);

  /* Largura de conteúdo da página pública; as telas internas do app usam
     outra grade. */
  --container-marketing: 1180px;

  /* Ritmo vertical das seções, fluido. */
  --lp-section-y: clamp(56px, 8vw, 112px);
  --lp-gutter: clamp(20px, 5vw, 64px);
}

/* ---------------------------------------------------------------------------
   Seção e container
   --------------------------------------------------------------------------- */

.lp-section {
  padding: var(--lp-section-y) var(--lp-gutter);
  background-color: var(--n-0);
}

/* Fundo alternado. A sequência da página é: 1 dark · 2 base · 3 sunken ·
   4 base · 5 sunken · 6 base · 7 sunken · 8 base · 9 sunken · 10 base ·
   11 dark. Alternar dá ritmo sem precisar de borda entre seções. */
.lp-section--sunken {
  background-color: var(--n-25);
}

.lp-section--dark {
  background-color: var(--surface-dark);
  color: var(--n-200);
}

.lp-section--dark h1,
.lp-section--dark h2,
.lp-section--dark h3 {
  color: var(--n-0);
}

.lp-section--dark a {
  color: var(--n-200);
}

.lp-section--dark a:hover {
  color: var(--n-0);
}

.lp-container {
  max-width: var(--container-marketing);
  margin-inline: auto;
}

/* Para seções de leitura corrida (FAQ, contato), onde a largura total
   prejudica a legibilidade. */
.lp-container--narrow {
  max-width: 840px;
}

/* Seções com corpo de texto mais estreito que o padrão, mas mais largo que
   --narrow (ex.: "A dor", Task 03). */
.lp-container--md {
  max-width: 1000px;
}

/* Formulário de contato (Task 08) — mais estreito que --narrow. */
.lp-container--sm {
  max-width: 720px;
}

/* Empilhamento vertical padrão dentro de uma seção. */
.lp-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
}

.lp-stack--tight {
  gap: var(--sp-6);
}

/* ---------------------------------------------------------------------------
   Header (Task 02)
   ----------------------------------------------------------------------------
   `sticky`, não `fixed`: fica visível durante a rolagem sem exigir padding-top
   compensatório no body (o espaço já é reservado pelo fluxo normal, sem risco
   de CLS). O `scroll-margin-top` de `:target`/`.lp-section`, logo abaixo neste
   arquivo, é o que evita o header cobrir o título da seção ao navegar por
   âncora.

   Mobile: só o `<nav>` quebra linha (`flex-wrap` + `row-gap`, como o mock); a
   marca fica fixa à esquerda. `.lp-header` também aceita quebrar como último
   recurso em telas muito estreitas, para nunca estourar a largura.
   --------------------------------------------------------------------------- */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  row-gap: var(--sp-3);
  padding: var(--sp-5) var(--lp-gutter);
  background-color: var(--surface-dark);
}

.lp-header__brand {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  color: var(--n-0);
  text-decoration: none;
}

.lp-header__brand:hover {
  color: var(--n-0);
}

.lp-header__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 24px);
  row-gap: var(--sp-3);
}

.lp-header__link {
  font-size: var(--fs-body);
  color: var(--n-200);
  text-decoration: none;
  white-space: nowrap;
}

.lp-header__link:hover {
  color: var(--n-0);
  text-decoration: underline;
}

.lp-header__cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--n-0);
  text-decoration: none;
  white-space: nowrap;
}

.lp-header__cta:hover {
  text-decoration: underline;
}

/* O outline padrão (--brand-primary) não tem contraste suficiente sobre
   --surface-dark. Só aqui, dentro do header escuro, o foco vira branco. */
.lp-header a:focus-visible {
  outline-color: var(--n-0);
}

/* ---------------------------------------------------------------------------
   Tipografia de seção
   --------------------------------------------------------------------------- */

.lp-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.lp-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-4);
}

.lp-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  margin: 0;
}

/* Linha de apoio logo abaixo do título da seção. */
.lp-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--n-600);
  margin: 0;
}

.lp-section--dark .lp-lead {
  color: var(--n-200);
}

/* Rótulo em versalete acima do título. --n-400 reprova AA (3,1:1–3,5:1) sobre os fundos claros onde
   isto é mais usado (Task 11, medido via Lighthouse) — --n-500 é o tom mais próximo que passa
   (4,8:1+). Sobre fundo escuro (só o rodapé) o --n-400 original já passava (4,9:1) e --n-500 pioraria
   (3,2:1), por isso o rodapé tem override abaixo. */
.lp-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--n-500);
}

.lp-muted {
  font-size: var(--fs-body-sm);
  color: var(--n-500);
}

/* Parágrafo de corpo (14px, herdado) só com a cor mais discreta — recorrente em cards e blocos de
   texto secundário a partir da Task 06. */
.lp-body-muted {
  color: var(--n-600);
}

/* Nota pequena abaixo de um CTA (apoio, condição). Mesmo papel de `.lp-hero__cta-note`, mas de uso
   geral — a partir da Task 06 mais de uma seção precisa. --n-500, não --n-400: esta classe só é usada
   sobre fundo claro, onde --n-400 reprova AA (Task 11). */
.lp-cta-note {
  font-size: var(--fs-body-sm);
  color: var(--n-500);
}

/* Cabeçalho de seção: nunca largura total. Texto longo em linha muito larga
   é o defeito de legibilidade mais comum em land page. */
.lp-section-head {
  max-width: 60ch;
}

/* ---------------------------------------------------------------------------
   Grades
   --------------------------------------------------------------------------- */

.lp-grid {
  display: grid;
  gap: var(--sp-7);
}

/* Cards de módulo (seção 4) e colunas de plano (seção 8). `auto-fit` +
   `minmax` resolve o responsivo sem media query e sem largura fixa — a página
   tolera +30% de texto (versão em inglês futura). */
.lp-grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.lp-grid--thirds {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Duas colunas que viram uma no mobile, sem breakpoint explícito. */
.lp-split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 64px);
}

.lp-split__main {
  flex: 1 1 380px;
  min-width: 280px;
}

.lp-split__aside {
  flex: 0 1 300px;
  min-width: 240px;
}

/* ---------------------------------------------------------------------------
   Card
   --------------------------------------------------------------------------- */

.lp-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background-color: var(--n-0);
  border: 1px solid var(--n-100);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/* Realce de uma coluna entre as outras (a Factory, na seção 8). Deliberadamente
   NÃO usa cor de destaque diferente: a diferença é borda, fundo e elevação, para
   as demais colunas não parecerem desabilitadas. */
.lp-card--featured {
  background-color: var(--n-25);
  border: 2px solid var(--brand-primary);
  box-shadow: var(--sh-xl);
}

.lp-card--flat {
  box-shadow: none;
  margin-top: var(--sp-3);
}

/* Rótulo sobreposto à borda superior do card em realce. */
.lp-card__tag {
  position: absolute;
  top: -12px;
  left: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--brand-primary);
  color: var(--n-0);
  border-radius: var(--r-pill);
}

.lp-card--tagged {
  position: relative;
}

/* ---------------------------------------------------------------------------
   Selo de plano
   ----------------------------------------------------------------------------
   Usado nas seções 4 e 8. No mock as duas chamam a mesma função `badge()` e por
   isso não têm como divergir; aqui a fonte única é a partial _SeloPlano.cshtml
   mais estas quatro variações. Reaproveitam as famílias semânticas do
   tokens.css — nenhum token novo, conforme o achado F4 da revisão da Iteração 2.
   --------------------------------------------------------------------------- */

.lp-badge {
  align-self: flex-start;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}

/* --success (3,8:1) e --warning (3,2:1) reprovam AA sobre o próprio -bg — não há tom mais escuro
   dessas duas famílias em tokens.css para trocar (diferente de --brand-primary, que tem -600/-700).
   --n-800 sobre qualquer -bg claro passa com folga (11:1+); a identidade de cada selo continua vindo
   do fundo e da borda, não do texto. --info e --brand-primary já passavam (6,1:1 e 7,8:1) e ficam
   como estavam — achado da Task 11. */
.lp-badge--free {
  background-color: var(--success-bg);
  border-color: var(--success-border);
  color: var(--n-800);
}

.lp-badge--start {
  background-color: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info);
}

.lp-badge--factory {
  background-color: var(--brand-primary-050);
  border-color: var(--brand-primary-100);
  color: var(--brand-primary);
}

.lp-badge--enterprise {
  background-color: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--n-800);
}

/* Selo neutro, para marcar o elo opcional do diagrama do percurso. */
.lp-badge--optional {
    background-color: var(--n-50);
    border-color: var(--n-150);
    color: var(--n-500);
    font-size: 10px;
    align-self: center;
}

/* ---------------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------------- */

.lp-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
}

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

.lp-btn--primary {
  background-color: var(--brand-primary);
  color: var(--n-0);
}

.lp-btn--primary:hover {
  background-color: var(--brand-primary-600);
  color: var(--n-0);
}

/* Estado "Enviando..." do formulário de contato (Task 08). --n-500, não --n-400: branco sobre
   --n-400 reprova AA (3,5:1); sobre --n-500 passa (5,4:1) — achado da Task 11. */
.lp-btn--primary:disabled {
  background-color: var(--n-500);
  cursor: not-allowed;
}

.lp-btn--secondary {
  background-color: var(--n-0);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.lp-btn--secondary:hover {
  background-color: var(--brand-primary-050);
  color: var(--brand-primary);
}

/* Só sobre fundo escuro (hero e rodapé). */
.lp-btn--ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--n-0);
}

.lp-btn--ghost:hover {
  border-color: var(--n-0);
  color: var(--n-0);
}

.lp-btn--sm {
  font-size: var(--fs-body);
  padding: var(--sp-4) var(--sp-6);
}

/* Preenche a largura do pai — colunas de card (ex.: seção 8), onde o botão não pode ficar do
   tamanho do texto. */
.lp-btn--block {
  display: block;
  width: 100%;
}

/* Contrário do padrão de esticar (`align-items: stretch` é o default de flex column) — para botões
   dentro de uma coluna onde o resto do conteúdo precisa da largura cheia, mas o botão não (ex.:
   formulário de contato, Task 08). */
.lp-btn--start {
  align-self: flex-start;
}

/* Link de fim de seção, discreto. */
.lp-link-arrow {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--brand-primary);
  text-decoration: none;
}

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

/* ---------------------------------------------------------------------------
   Listas
   --------------------------------------------------------------------------- */

.lp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.lp-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-body-lg);
  color: var(--n-700);
}

/* O marcador é decorativo: aria-hidden no HTML, porque a lista já é semântica. */
.lp-list__bullet {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background-color: var(--brand-primary);
}

.lp-section--dark .lp-list__item {
  color: var(--n-200);
}

.lp-section--dark .lp-list__bullet {
  background-color: var(--n-300);
}

/* ---------------------------------------------------------------------------
   Mídia — proporções reconciliadas em 2026-07-31
   ----------------------------------------------------------------------------
   As proporções abaixo são as REAIS dos ativos produzidos, não as que o mock
   declarou. O mock pediu 16:10 nos prints e 9:19.5 nas páginas públicas;
   captura de tela produz 16:9 naturalmente, e recortar oito imagens para uma
   proporção arbitrária custaria retrabalho e perderia conteúdo útil da tela.
   Decisão registrada em docs/design/landpage/BRIEFING_Ativos_P0.md §3.

   `aspect-ratio` fixo em toda mídia é o que segura o CLS em zero enquanto a
   imagem carrega — e é requisito da meta de Lighthouse ≥ 95.
   --------------------------------------------------------------------------- */

.lp-media {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--n-50);
}

.lp-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-media--hero      { aspect-ratio: 4 / 3; }   /* A1 */
.lp-media--square    { aspect-ratio: 1 / 1; }   /* A2, A3, A6 */
.lp-media--screen    { aspect-ratio: 16 / 9; }  /* A4.1–A4.8, A7 */
.lp-media--page      { aspect-ratio: 9 / 19.5; } /* A5, A8 */
.lp-media--wide      { aspect-ratio: 2 / 1; }   /* A9 */

/* Estado sem ativo real (Task 03 em diante — B11/Task 10 revisa e padroniza).
   O texto dentro é a spec do ativo, para a seção ficar apresentável e
   auditável antes de qualquer foto existir (BRIEFING_Ativos_P0.md). */
.lp-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  text-align: center;
}

/* --n-500, não --n-400: reprova AA sobre --n-50 (3,1:1) — achado da Task 11. */
.lp-media__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--n-500);
}

/* Moldura de celular (seções 5 e 6). O raio interno acompanha o externo menos
   a espessura da borda, senão o canto fica com um degrau visível. */
.lp-phone {
  border: 10px solid var(--surface-dark);
  border-radius: 36px;
  padding: 6px;
  background-color: var(--surface-dark);
}

.lp-phone .lp-media {
  border-radius: 24px;
}

.lp-phone--sm {
  border-width: 8px;
  border-radius: 28px;
  padding: 5px;
}

.lp-phone--sm .lp-media {
  border-radius: 20px;
}

/* ---------------------------------------------------------------------------
   Acordeão (FAQ e "Mais detalhes" do formulário)
   ----------------------------------------------------------------------------
   <details>/<summary> nativos: o estado é anunciado pelo navegador e funciona
   com JavaScript desligado. NÃO remover o marcador — o mock removeu na primeira
   versão e aberto/fechado ficaram indistinguíveis (achado F6 da revisão da
   Iteração 2). Aqui ele é estilizado em vez de escondido.
   --------------------------------------------------------------------------- */

.lp-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lp-accordion__item {
  background-color: var(--n-0);
  border: 1px solid var(--n-100);
  border-radius: var(--r-md);
}

.lp-accordion__question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h5);
  color: var(--n-800);
  padding: var(--sp-5) var(--sp-6);
  cursor: pointer;
}

.lp-accordion__question::marker,
.lp-accordion__question::-webkit-details-marker {
  color: var(--brand-primary);
}

.lp-accordion__answer {
  margin: 0;
  padding: 0 var(--sp-6) var(--sp-6);
  color: var(--n-600);
}

/* ---------------------------------------------------------------------------
   Formulário (seção 10)
   ----------------------------------------------------------------------------
   Campo obrigatório e erro usam a família --danger já existente em tokens.css
   (#c73e4c, 4,93:1 sobre branco = AA). O Anexo B do mock propôs um token novo
   `--state-required` em oklch; foi descartado na revisão (achado F4) por ser
   redundante e por divergir do formato hex do arquivo.
   --------------------------------------------------------------------------- */

.lp-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.lp-field__label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--n-800);
}

.lp-field__required {
  color: var(--danger);
}

.lp-field__control {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--n-150);
  border-radius: var(--r-md);
  background-color: var(--n-0);
  color: var(--n-800);
}

.lp-field__control:focus-visible {
  border-color: var(--brand-primary);
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}

.lp-field__control.input-validation-error {
  border-width: 2px;
  border-color: var(--danger);
}

.lp-field__error {
  font-size: var(--fs-caption);
  color: var(--danger);
}

/* Bloco dos três obrigatórios — a hierarquia decidida em F5. */
.lp-form__essential {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-7);
  background-color: var(--n-25);
  border-radius: var(--r-lg);
}

/* Mensagens de estado do envio. */
.lp-alert {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
}

/* --success/--warning reprovam AA sobre o próprio -bg (mesmo achado do .lp-badge, Task 11);
   --n-800 passa com folga e a cor do estado continua vindo do fundo/borda. */
.lp-alert--success {
  background-color: var(--success-bg);
  border-color: var(--success-border);
  color: var(--n-800);
}

.lp-alert--warning {
  background-color: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--n-800);
}

.lp-alert--neutral {
  background-color: var(--brand-primary-050);
  border-color: var(--brand-primary-100);
  color: var(--brand-primary);
}

/* ---------------------------------------------------------------------------
   Seção 1 — Hero (Task 03)
   --------------------------------------------------------------------------- */

.lp-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 6vw, 64px);
}

.lp-hero__copy {
  flex: 1 1 440px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.lp-hero__subtitle {
  max-width: 56ch;
}

.lp-hero__media {
  flex: 1 1 380px;
  min-width: 280px;
}

.lp-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lp-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.lp-hero__cta-note {
  font-size: var(--fs-body-sm);
  color: var(--n-400);
}

.lp-hero__credibility {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-5);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--n-700);
}

.lp-hero__credibility-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.lp-hero__credibility-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--n-300);
}

.lp-hero__credibility-text {
  font-size: var(--fs-body-sm);
  color: var(--n-200);
}

/* ---------------------------------------------------------------------------
   Carrossel do hero (2026-08-01)
   ----------------------------------------------------------------------------
   Três aplicações da identidade, troca manual. O track é o scrollport: sem
   JavaScript os slides continuam alcançáveis por arrasto, roda e teclado — os
   controles é que dependem do script e por isso nascem com [hidden].

   A `aspect-ratio` continua no .lp-media--hero de cada slide, não aqui: é ela
   que segura o CLS em zero, e todos os slides usam a mesma (4:3), então a
   altura não muda ao trocar de slide.

   Vive só dentro do hero, sobre --surface-dark. Daí os overrides de foco para
   branco: o outline padrão (--brand-primary) não contrasta no escuro — mesmo
   ajuste que .lp-header a:focus-visible já fazia.
   --------------------------------------------------------------------------- */

.lp-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.lp-carousel__track {
  display: flex;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* A barra de rolagem atravessando o hero é ruído visual; a indicação de
     arrasto é feita pelo peek do slide seguinte, pela dica e pelos pontos. */
  scrollbar-width: none;
}

.lp-carousel__track::-webkit-scrollbar {
  display: none;
}

.lp-carousel__track:focus-visible {
  outline: 2px solid var(--n-0);
  outline-offset: 2px;
}

/* O calc é a indicação de arrasto pedida na decisão H2: o slide não ocupa a
   largura toda, então o seguinte assoma na borda. Feito com clamp em vez de
   @media porque este arquivo não tem um único breakpoint, e não é aqui que
   ganha o primeiro. */
.lp-carousel__slide {
  flex: 0 0 calc(100% - clamp(0px, 4vw, 40px));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lp-carousel__caption {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--n-200);
}

.lp-carousel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.lp-carousel__hint {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--n-300);
}

.lp-carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Sem esta regra o carrossel quebra a própria promessa: `display` declarado pelo
   autor vence o `display:none` que o navegador aplica a [hidden], então os
   controles apareceriam para quem está sem JavaScript — visíveis e inertes.
   Pego medindo (display computado continuava `flex` com hidden=true). */
.lp-carousel__controls[hidden] {
  display: none;
}

.lp-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--n-0);
  cursor: pointer;
}

.lp-carousel__arrow:hover:not(:disabled) {
  border-color: var(--n-0);
}

.lp-carousel__arrow:disabled {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--n-500);
  cursor: not-allowed;
}

.lp-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O botão tem 24px para satisfazer o alvo mínimo de toque; o ponto visível é o
   ::before de 8px dentro dele. */
.lp-carousel__dot {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.lp-carousel__dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: var(--r-pill);
  background-color: var(--n-500);
}

.lp-carousel__dot:hover::before {
  background-color: var(--n-300);
}

.lp-carousel__dot[aria-current="true"]::before {
  background-color: var(--n-0);
}

.lp-carousel__arrow:focus-visible,
.lp-carousel__dot:focus-visible {
  outline: 2px solid var(--n-0);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Seção 2 — A dor (Task 03)
   --------------------------------------------------------------------------- */

.lp-pain-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 2px solid var(--n-100);
}

.lp-pain-item__text {
  color: var(--n-600);
}

/* Par antes/depois, lado a lado. */
.lp-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.lp-pair > .lp-media {
  flex: 1 1 320px;
  min-width: 240px;
}

/* Caixa de destaque de fim de seção ("fecho"). Fundo claro — variante escura
   fica para quando uma seção futura precisar (ex.: Seção 6). */
.lp-callout {
  background-color: var(--brand-primary-050);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
}

.lp-callout__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.4;
  color: var(--brand-primary-700);
  margin: 0;
}

/* Variante escura, prevista desde a Task 03 para quando uma seção precisasse (Seção 6, bloco A e o
   mini-callout do bloco B: "a alteração vale imediatamente" e "a impressão é sua"). */
.lp-callout--dark {
  background-color: var(--surface-dark);
}

.lp-callout--dark .lp-callout__text {
  color: var(--n-0);
}

/* Callout menor, para o mini-destaque do bloco B (mais discreto que o da abertura do bloco A). */
.lp-callout--sm {
  padding: var(--sp-5) var(--sp-6);
}

.lp-callout--sm .lp-callout__text {
  font-size: var(--fs-body);
}

/* ---------------------------------------------------------------------------
   Seção 3 — Como funciona (Task 03)
   --------------------------------------------------------------------------- */

/* Os quatro passos. `<ol>` de verdade: a numeração vem do índice do loop que
   renderiza a lista, nunca de um dígito digitado à mão — é o que impede o
   defeito 1-2-3-3 da land page atual de voltar. */
.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-7);
}

.lp-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.lp-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  background-color: var(--brand-primary-050);
  color: var(--brand-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
}

.lp-step__text {
  color: var(--n-600);
}

.lp-step__note {
  font-size: var(--fs-body-sm);
  font-style: italic;
  color: var(--n-500);
}

/* Cartão do diagrama do percurso Fábrica → Lojista → Surfista. */
.lp-journey-card {
  background-color: var(--n-0);
  border: 1px solid var(--n-100);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 40px);
}

.lp-journey {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.lp-journey__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  min-width: 110px;
}

.lp-journey__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
}

.lp-journey__avatar--filled {
  background-color: var(--brand-primary);
  color: var(--n-0);
}

/* O elo do lojista é opcional (módulo de plano superior) — nunca pode
   parecer obrigatório no percurso. */
.lp-journey__avatar--optional {
  background-color: var(--n-0);
  border: 2px dashed var(--n-300);
  color: var(--n-500);
}

.lp-journey__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--n-800);
}

/*.lp-journey__connector {
  flex: 1 1 40px;
  min-width: 32px;
  height: 2px;
  background-color: var(--n-200);
}*/

.lp-journey__connector {
    flex: 1 1 40px;
    min-width: 32px;
    height: 12px; /* Aumentado para dar espaço à amplitude da onda */
    background-color: var(--n-200);
    /* Máscara SVG com padrão de onda senoidal suave */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 12"><path d="M0 6 Q10 0 20 6 T40 6" fill="none" stroke="black" stroke-width="4"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 12"><path d="M0 6 Q10 0 20 6 T40 6" fill="none" stroke="black" stroke-width="4"/></svg>');
    -webkit-mask-size: 40px 12px;
    mask-size: 40px 12px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    /* Garante alinhamento centralizado com os ícones/pontos no container flex */
    align-self: center;
}


    /* ---------------------------------------------------------------------------
   Seção 4 — Plataforma por módulos (Task 04)
   --------------------------------------------------------------------------- */

    .lp-modulos-footer {
  color: var(--n-600);
}

.lp-modulos-footer a {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Seção 8 — Planos (Task 05)
   ----------------------------------------------------------------------------
   Reusa `.lp-card`/`.lp-card--featured`/`.lp-card--tagged` (Task 01) e `.lp-list` (idem) — só o que é
   específico da coluna de plano mora aqui.
   --------------------------------------------------------------------------- */

.lp-plan-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.lp-plan-card__position {
  font-size: var(--fs-body-sm);
  color: var(--n-500);
  margin: 0;
}

/* Lista de recursos mais compacta que o padrão de `.lp-list` — quatro colunas estreitas cabem menos
   texto por linha antes de quebrar. */
.lp-list--sm {
  gap: var(--sp-3);
}

.lp-list--sm .lp-list__item {
  font-size: var(--fs-body-sm);
}

.lp-list--sm .lp-list__bullet {
  width: 5px;
  height: 5px;
  margin-top: 0.5em;
}

/* Empurra o CTA para o rodapé do card mesmo com listas de tamanho desigual entre colunas — é o que
   mantém os quatro botões alinhados na mesma linha horizontal. */
.lp-plan-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--n-100);
}

/* --n-500, não --n-400: sobre fundo claro reprova AA (Task 11). */
.lp-plan-card__cta-note {
  font-size: var(--fs-caption);
  color: var(--n-500);
  text-align: center;
}

.lp-planos-addon {
  color: var(--n-600);
}

/* ---------------------------------------------------------------------------
   Seção 5 — Experiência do surfista (Task 06)
   ----------------------------------------------------------------------------
   O layout de duas colunas reusa `.lp-split`/`.lp-split__main`/`.lp-split__aside` e `.lp-phone` — os
   dois já foram desenhados na Task 01 pensando nas seções 5 e 6.
   --------------------------------------------------------------------------- */

.lp-surfer-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.lp-surfer-cta__col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

/* ---------------------------------------------------------------------------
   Seção 6 — Controle da marca (Task 06)
   --------------------------------------------------------------------------- */

/* Bloco A — peso maior que B e C, o argumento mais forte da página ("a alteração vale
   imediatamente"). */
.lp-control-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background-color: var(--n-25);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
}

.lp-control-block__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--n-800);
  margin: 0;
}

.lp-control-block__text {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--n-600);
  max-width: 68ch;
  margin: 0;
}

/* Par "causa e efeito": painel à esquerda, efeito na página pública à direita — sem legenda, a
   correspondência é visual. `flex-start`, não `center`: A7 (paisagem) e A8 (celular retrato) têm
   alturas bem diferentes, e centralizar deixava as imagens com topos em alturas distintas — o
   próprio usuário reportou como desalinhado. Com `flex-start` os dois rótulos ("No painel"/"Na
   página pública") e as duas imagens nascem na mesma linha; só a base é que diverge. */
.lp-cause-effect {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.lp-cause-effect__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lp-cause-effect__col--main {
  flex: 1 1 380px;
  min-width: 260px;
}

.lp-cause-effect__col--aside {
  flex: 0 1 260px;
  min-width: 200px;
  max-width: 300px;
}

.lp-cause-effect__arrow {
  flex: none;
  align-self: center;
  font-size: 24px;
  color: var(--n-300);
}

/* ---------------------------------------------------------------------------
   Seção 7 — Segurança, privacidade e operação (Task 06)
   --------------------------------------------------------------------------- */

.lp-privacy-note {
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--n-800);
  margin: var(--sp-2) 0 0;
}

/* ---------------------------------------------------------------------------
   Seção 10 — Contato (Task 08)
   ----------------------------------------------------------------------------
   Reusa `.lp-form__essential`, `.lp-field*`, `.lp-alert*`, `.lp-accordion__item`/`__question`
   (Task 01) para a moldura do disclosure "Mais detalhes". Só o que é específico do formulário mora
   aqui.
   --------------------------------------------------------------------------- */

.lp-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Duas colunas (volume/sistema) que viram uma no mobile. */
.lp-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.lp-field-row > .lp-field {
  flex: 1 1 240px;
}

.lp-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lp-fieldset legend {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--n-800);
  padding: 0;
  margin: 0 0 var(--sp-2);
}

.lp-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lp-checkbox-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-body-sm);
  color: var(--n-700);
}

.lp-checkbox-list__item input {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Corpo do disclosure "Mais detalhes (opcional)" — o wrapper é `.lp-accordion__item`, o gatilho é
   `.lp-accordion__question` (mesma partial visual do FAQ), só o conteúdo interno é diferente de uma
   resposta de pergunta. */
.lp-form-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: 0 var(--sp-6) var(--sp-7);
}

/* Sugestão de correção de e-mail — bloqueante até o visitante decidir (contact-form.js). */
.lp-email-suggestion__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.lp-privacy-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--n-100);
}

/* --n-500, não --n-400: sobre fundo claro reprova AA (Task 11). */
.lp-privacy-footer__text {
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--n-500);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Seção 11 — Rodapé (Task 09)
   --------------------------------------------------------------------------- */

.lp-footer {
  background-color: var(--surface-dark);
  padding: clamp(48px, 7vw, 72px) var(--lp-gutter) 28px;
}

.lp-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-8);
}

.lp-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.lp-footer__link {
  font-size: var(--fs-body);
  color: var(--n-200);
  text-decoration: none;
}

.lp-footer__link:hover {
  color: var(--n-0);
  text-decoration: underline;
}

/* "Preferências de cookies" precisa continuar sendo um <button> (reabre o painel de consentimento,
   Fase A Task 05) — só o visual é de link. */
.lp-footer__link--button {
  display: block;
  width: fit-content;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--n-200);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-footer__link--button:hover {
  color: var(--n-0);
}

.lp-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--n-700);
}

.lp-footer__meta {
  font-size: var(--fs-caption);
  color: var(--n-400);
}

/* .lp-eyebrow virou --n-500 na Task 11 para passar AA nos usos sobre fundo claro — mas o rodapé é
   escuro, onde o --n-400 original já passava (4,9:1) e --n-500 reprovaria (3,2:1). Único lugar onde
   `.lp-eyebrow` aparece sobre fundo escuro. */
.lp-footer .lp-eyebrow {
  color: var(--n-400);
}

/* ---------------------------------------------------------------------------
   Ajustes de rolagem
   --------------------------------------------------------------------------- */

/* O header é o destino de sete âncoras. Sem isto, clicar em "Planos" leva o
   título da seção para debaixo do header. */
:target,
.lp-section {
  scroll-margin-top: 88px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* O carrossel do hero é um scrollport próprio: a regra do html não o alcança.
     O JavaScript também troca o behavior do scrollTo para 'auto' — aqui é o
     arrasto e o teclado nativo que ficam cobertos. */
  .lp-carousel__track {
    scroll-behavior: auto;
  }
}