/* =====================================================================
   Landing page — "Protótipo / Desktop v2" (design/landing_page_desktop.css)
   Folha NOVA e independente do base.css (prefixo `lp-` em tudo).
   Tokens, tipografia e medidas transcritos do export do Figma:
   - fonte Exo 2; headings 56/48/28/24/20 @600, texto 18/16/14 @400, lh 110%
   - seções padding 96px 112px, container 1216px, gap 80px
   - botões pill (radius 30, padding 14×20), cards radius 16/24 padding 32
   ===================================================================== */

/* Contraste (WCAG 2.1 AA, SC-009 — a landing hospeda o gate, FR-049): os tons do Figma que
   reprovavam foram substituídos pelo tom mais próximo que passa. Registro (antes → agora,
   razão medida sobre o fundo real de cada par):
   - texto de apoio #85848D sobre branco 3,70:1 → #6B6A75 5,33:1 (4,84:1 sobre o lilás);
   - texto dos botões/faixa #F6F6FA sobre #009CDE 2,86:1 → branco sobre #0077B6 4,87:1;
   - título do alerta #947105 sobre #FEFDFB 4,47:1 (reprovava) → #856404 5,40:1;
   - pill dos passos #009CDE sobre o azul translúcido #D6EFFA 2,58:1 → #006494 5,41:1;
   - passos inativos #CBCBCE 1,61:1 → #6B6A75 5,33:1;
   - anel de foco #009CDE 2,80:1 sobre a navbar lilás (reprovava 1.4.11) → #330072 13,78:1;
   - hover dos botões: `brightness(1.05)` clareava o azul para #007DBF 4,48:1 (reprovava) →
     hover agora ESCURECE para #006699 6,25:1 (roxo → #63329F 8,44:1).
   O #009CDE segue só em usos decorativos (aros, timeline, ícones) e o #EF4444 só no
   asterisco de obrigatório, que é `aria-hidden` e redundante com o atributo `required`. */
:root {
  --lp-roxo: #753BBD;        /* headline do hero, ícones, taglines, aba ativa */
  --lp-indigo: #330072;      /* headings de seção, footer */
  --lp-azul: #009CDE;        /* decorativo: aros, timeline, ícones */
  --lp-azul-acao: #0077B6;   /* fundo de botões e da faixa de valor (texto branco = AA) */
  --lp-azul-acao-hover: #006699;  /* hover escurece (clarear reprovava o contraste) */
  --lp-roxo-hover: #63329F;
  --lp-lilas: #F5F3F9;       /* fundo de seção alternado / navbar */
  --lp-azul-claro: #F2F7FC;  /* fundo da seção de números */
  --lp-cinza: #6B6A75;       /* texto de apoio (era #85848D) */
  --lp-escuro: #180033;      /* títulos de accordion / counters */
  --lp-titulo-card: #4A2578;
  --lp-linha: #E5E4EA;
  --lp-borda-azul: #C6DDF2;
  --lp-borda-tab: #D3C9E7;
  --lp-branco: #FFFFFF;
  --lp-sombra: 0 6px 10px rgba(51, 0, 114, 0.2);
  --lp-sombra-xs: 0 1px 2px rgba(13, 24, 28, 0.04);
  --lp-alerta-bg: #FEFDFB; --lp-alerta-borda: #F3D673; --lp-alerta-icone: #E9C162; --lp-alerta-titulo: #856404;
  --lp-ok-bg: #FBFEFB; --lp-ok-borda: #B2DDB5;
  --lp-passo-off: #F3F3F4; --lp-passo-off-texto: #6B6A75;
  --lp-pill-azul-texto: #006494;
  --lp-obrigatorio: #EF4444;  /* asterisco de campo obrigatório */
  --lp-erro-texto: #B91C1C;   /* mensagens de erro (6,5:1 sobre branco) */
  --lp-erro-bg: #FEF2F2;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.lp {
  margin: 0; background: var(--lp-branco); color: var(--lp-cinza);
  overflow-x: clip; /* o mockup do hero (900px) sangra à direita como no Figma, sem scroll lateral */
  font-family: 'Exo 2', 'Exo', 'Segoe UI', system-ui, sans-serif;
  font-size: 18px; line-height: 1.1; -webkit-font-smoothing: antialiased;
}
.lp h1, .lp h2, .lp h3, .lp h4, .lp p, .lp ul, .lp ol { margin: 0; }
.lp ul, .lp ol { padding: 0; list-style: none; }
.lp a { color: inherit; text-decoration: none; }
.lp img { display: block; max-width: 100%; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tipografia (nomes do Figma) ---------- */
.lp-h56 { font-size: 56px; font-weight: 600; line-height: 1.1; color: var(--lp-indigo); }
.lp-h56__destaque { color: var(--lp-roxo); display: block; } /* "Simple Check:" em roxo, linha própria */
.lp-h48 { font-size: 48px; font-weight: 600; line-height: 1.1; color: var(--lp-indigo); }
.lp-h28 { font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--lp-indigo); }
.lp-h24 { font-size: 24px; font-weight: 600; line-height: 1.1; }
.lp-h20 { font-size: 20px; font-weight: 600; line-height: 1.1; color: var(--lp-indigo); }
.lp-t18 { font-size: 18px; font-weight: 400; line-height: 1.1; color: var(--lp-cinza); }
.lp-t16 { font-size: 16px; font-weight: 400; line-height: 1.1; color: var(--lp-cinza); }
.lp-t14 { font-size: 14px; font-weight: 400; line-height: 1.2; }
.lp-tagline { font-size: 16px; font-weight: 400; line-height: 1.1; color: var(--lp-roxo); }

/* ---------- Botões (pill 30px, 14×20) ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 20px; border-radius: 30px; border: 1px solid transparent;
  font: 500 16px/20px 'Exo 2', 'Exo', sans-serif; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 rgba(51, 0, 114, 0);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease,
              color .18s ease, border-color .18s ease, filter .18s ease;
  will-change: transform;
}
/* `.lp .lp-btn--x` (0,2,0) para vencer `.lp a { color: inherit }` (0,1,1) nos <a> em pill. */
.lp .lp-btn--azul { background: var(--lp-azul-acao); color: var(--lp-branco); }
.lp .lp-btn--roxo { background: var(--lp-roxo); color: var(--lp-branco); }
.lp .lp-btn--outline { background: transparent; border-color: var(--lp-roxo); color: var(--lp-roxo); }
/* Interação: sobe 2px com sombra suave; pressionado volta e encolhe levemente. O hover
   ESCURECE o preenchimento — `filter: brightness()` clareava e derrubava o contraste do
   texto branco abaixo de 4,5:1 no azul (WCAG 1.4.3 vale para todos os estados). */
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(51, 0, 114, 0.22); }
.lp .lp-btn--azul:hover { background: var(--lp-azul-acao-hover); }
.lp .lp-btn--roxo:hover { background: var(--lp-roxo-hover); }
.lp-btn:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 6px rgba(51, 0, 114, 0.18); transition-duration: .08s; }
.lp .lp-btn--outline:hover { background: rgba(117, 59, 189, 0.08); }
/* Anel de foco em indigo: ≥ 13:1 sobre branco, lilás e azul-claro (1.4.11 pede 3:1 e o
   #009CDE dava 2,80:1 sobre a navbar). No rodapé indigo o anel vira branco. */
/* Campos dentro de `.lp-input` já têm indicador próprio (borda roxa 6,7:1 + halo) — o
   anel aqui é para o que não tem: botões, links, `summary` e a caixa do consentimento. */
.lp-btn:focus-visible, .lp a:focus-visible, .lp summary:focus-visible,
.lp-check input:focus-visible {
  outline: 3px solid var(--lp-indigo); outline-offset: 2px;
}
.lp .lp-footer a:focus-visible { outline-color: var(--lp-branco); }
.lp-btn svg { width: 24px; height: 24px; transition: transform .18s ease; }
.lp-btn:hover svg { transform: translateX(3px); } /* chevron "Continuar" desliza */

/* ---------- Layout base ---------- */
.lp-section { padding: 96px 112px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.lp-section--hero { overflow-x: clip; }
.lp-section--lilas { background: var(--lp-lilas); }
.lp-section--azul-claro { background: var(--lp-azul-claro); }
.lp-container { width: 100%; max-width: 1216px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; }
.lp-title { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 592px; margin: 0 auto; }
.lp-title--wide { max-width: 768px; }
.lp-title--left { align-items: flex-start; text-align: left; margin: 0; }
.lp-title .lp-h48 + .lp-t18 { margin-top: 8px; }
.lp-title-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }

/* ---------- Navbar (69px, lilás, 16×112) ---------- */
.lp-nav {
  position: sticky; top: 0; z-index: 10; background: var(--lp-lilas);
  padding: 16px 112px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.lp-nav__logo { height: 37px; width: auto; display: block; }
.lp-nav__right { display: flex; align-items: center; gap: 32px; }
.lp-nav__links { display: flex; gap: 16px; }
.lp-nav__links a { font-size: 14px; color: var(--lp-indigo); padding: 4px 0; }
.lp-nav__links a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.lp-hero { display: flex; align-items: center; gap: 80px; }
.lp-hero__col { flex: 1 1 536px; max-width: 536px; display: flex; flex-direction: column; gap: 32px; }
.lp-hero__copy { display: flex; flex-direction: column; gap: 24px; }
.lp-hero__actions { display: flex; align-items: center; gap: 16px; }
.lp-hero__art { flex: 0 0 600px; width: 600px; height: 600px; position: relative; }
.lp-mock {                       /* "3:2 screen mockup" 900×600 com sombra escura */
  position: absolute; top: 0; left: 0; width: 900px; height: 600px;
  border-radius: 11.7px; overflow: hidden; border: 1.17px solid #F2F4F7; background: var(--lp-branco);
  box-shadow: 0 37.5px 75px -14px rgba(16, 24, 40, 0.14);
}
.lp-mock img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lp-mock--sm { position: static; width: 668px; height: 444px; flex: 0 0 668px; border-radius: 8px; border-width: 1px; box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18); background: #F6F5FA; }
.lp-mock--sm img { object-fit: cover; object-position: top; } /* imagens já em 3:2 (seções empilhadas) */

/* faixa azul de valor (4 cards) */
.lp-band {
  background: var(--lp-azul-acao); border: 1px solid var(--lp-borda-azul); border-radius: 24px;
  box-shadow: var(--lp-sombra); padding: 56px; display: flex; gap: 32px;
}
.lp-band__card { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.lp-band__card .lp-icon { background: var(--lp-roxo); }
.lp-band__card h3 { color: var(--lp-branco); }
.lp-band__card p { color: var(--lp-branco); }
.lp-icon {
  width: 40px; height: 40px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center;
  color: #F5F3F9; flex: none;
}
.lp-icon svg { width: 24px; height: 24px; }
.lp-icon--lg { width: 64px; height: 64px; }
.lp-icon--lg svg { width: 32px; height: 32px; }

/* ---------- Cards brancos (Card / Section 3) ---------- */
.lp-row { display: flex; gap: 32px; }
.lp-card {
  flex: 1 1 0; background: var(--lp-branco); border: 1px solid var(--lp-linha); border-radius: 16px;
  box-shadow: var(--lp-sombra); padding: 32px; display: flex; flex-direction: column; gap: 32px;
}
.lp-card__top { display: flex; flex-direction: column; gap: 16px; }
.lp-card__content { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Abas + mockup (Seção 3) ---------- */
.lp-tabs { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.lp-tabs__bar { display: flex; gap: 32px; }
.lp-tab {
  padding: 16px 20px; border-radius: 40px; border: 2px solid var(--lp-borda-tab); background: var(--lp-lilas);
  color: var(--lp-roxo); font: 700 18px/1.1 'Exo 2', 'Exo', sans-serif; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .18s ease;
}
.lp-tab:hover:not(.is-active) { border-color: var(--lp-roxo); transform: translateY(-1px); }
.lp-tab:active { transform: scale(.98); }
.lp-tab.is-active { background: var(--lp-roxo); border-color: var(--lp-roxo); color: var(--lp-branco); box-shadow: var(--lp-sombra); }
.lp-showcase img { transition: opacity .25s ease; }
.lp-showcase img.is-trocando { opacity: 0; }
.lp-tab:focus-visible { outline: 3px solid var(--lp-indigo); outline-offset: 2px; }
.lp-showcase { display: flex; align-items: center; gap: 80px; width: 100%; }
.lp-showcase__content { flex: 1 1 440px; max-width: 440px; display: flex; flex-direction: column; gap: 32px; }
.lp-alert {
  background: var(--lp-alerta-bg); border: 1px solid var(--lp-alerta-borda); border-radius: 6px;
  box-shadow: var(--lp-sombra-xs); padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.lp-alert__icon { width: 24px; height: 24px; color: var(--lp-alerta-icone); }
.lp-alert__title { font-size: 18px; font-weight: 600; color: var(--lp-alerta-titulo); }
.lp-alert__desc { font-size: 16px; color: var(--lp-cinza); line-height: 1.15; } /* sem opacity: diluía o contraste */
.lp-alert--ok { background: var(--lp-ok-bg); border-color: var(--lp-ok-borda); }
.lp-alert--ok .lp-alert__icon { color: #4CAF6A; }
.lp-alert--ok .lp-alert__title { color: #2E7D46; }
.lp-list { display: flex; flex-direction: column; gap: 16px; }
.lp-list li { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--lp-cinza); }
.lp-list svg { width: 16px; height: 16px; color: var(--lp-roxo); flex: none; }

/* ---------- Timeline (Como funciona) ---------- */
.lp-timeline { display: flex; }
.lp-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lp-step__progress { display: flex; align-items: center; width: 100%; }
.lp-step__line { flex: 1 1 0; height: 4px; background: linear-gradient(90deg, var(--lp-azul) 0%, rgba(0, 156, 222, 0.32) 100%); }
.lp-step__line--in { background: linear-gradient(90deg, rgba(0, 156, 222, 0) 0%, var(--lp-azul) 100%); }
.lp-step__badge {
  width: 48px; height: 48px; border-radius: 99999px; background: var(--lp-azul); color: #F9F9F9;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.lp-step__badge svg { width: 24px; height: 24px; }
.lp-step__body { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 16px; text-align: center; }
.lp-step__pill { padding: 6px 12px; border-radius: 99999px; background: rgba(0, 156, 222, 0.16); color: var(--lp-pill-azul-texto); font-size: 14px; line-height: 1.2; }
.lp-step--roxo .lp-step__badge { background: var(--lp-roxo); }
.lp-step--roxo .lp-step__pill { background: rgba(117, 59, 189, 0.16); color: var(--lp-roxo); }
.lp-step__text { display: flex; flex-direction: column; gap: 8px; }
.lp-cta-row { display: flex; align-items: center; gap: 32px; max-width: 800px; margin: 0 auto; }
.lp-cta-row p { font-size: 16px; color: var(--lp-cinza); line-height: 1.15; }

/* ---------- Cards com ícone (Benefícios) ---------- */
.lp-icard {
  flex: 1 1 0; background: var(--lp-branco); border-radius: 24px; box-shadow: var(--lp-sombra);
  padding: 32px; display: flex; flex-direction: column; gap: 16px;
}
.lp-icard .lp-icon { background: var(--lp-roxo); }
.lp-icard__content { display: flex; flex-direction: column; gap: 12px; }
.lp-icard h3 { color: var(--lp-titulo-card); }
.lp-icard p { font-size: 16px; line-height: 1.15; }

/* ---------- Form Content (Acesso) ---------- */
.lp-form-card {
  width: 592px; max-width: 100%; margin: 0 auto; background: var(--lp-branco); border-radius: 24px;
  box-shadow: var(--lp-sombra); padding: 48px; display: flex; flex-direction: column; gap: 32px;
}
.lp-progress { display: flex; align-items: flex-start; }
.lp-progress__step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 81px; flex: none; }
.lp-progress__dot {
  width: 32px; height: 32px; border-radius: 72px; background: var(--lp-passo-off); color: var(--lp-passo-off-texto);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.lp-progress__label { font-size: 14px; line-height: 1.2; color: var(--lp-passo-off-texto); white-space: nowrap; }
/* A etapa atual ganha o aro roxo: sem ele, os passos já concluídos (indigo sólido)
   chamavam mais atenção do que aquele em que o visitante está. */
.lp-progress__step.is-current .lp-progress__dot {
  background: var(--lp-lilas); color: var(--lp-roxo); box-shadow: 0 0 0 2px var(--lp-roxo);
}
.lp-progress__step.is-current .lp-progress__label { color: var(--lp-roxo); }
.lp-progress__step.is-done .lp-progress__dot { background: var(--lp-indigo); color: var(--lp-branco); }
.lp-progress__step.is-done .lp-progress__label { color: var(--lp-indigo); }
.lp-progress__divider { flex: 1 1 0; height: 0; border-top: 1px solid var(--lp-linha); margin-top: 16px; }
.lp-form { display: flex; flex-direction: column; gap: 24px; }
.lp-field { display: flex; flex-direction: column; gap: 8px; }
.lp-field__label { display: flex; align-items: center; gap: 4px; padding-left: 8px; font-size: 16px; font-weight: 600; color: var(--lp-cinza); }
.lp-field__label .req { color: var(--lp-obrigatorio); font-weight: 400; }
.lp-input {
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 14px 28px;
  border: 1px solid var(--lp-linha); border-radius: 30px; background: var(--lp-branco);
}
.lp-input:focus-within { border-color: var(--lp-roxo); box-shadow: 0 0 0 3px rgba(117, 59, 189, 0.15); }
.lp-input svg { width: 24px; height: 24px; color: var(--lp-cinza); flex: none; }
.lp-input input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 400 16px/1.25 'Exo 2', 'Exo', sans-serif; color: var(--lp-escuro);
}
.lp-input input::placeholder { color: var(--lp-cinza); font-size: 14px; }
.lp-form__actions { display: flex; align-items: center; gap: 16px; }
.lp-form__actions--fim { justify-content: flex-end; }
.lp-form__actions .lp-btn { height: 52px; }
.lp-form__titulo { color: var(--lp-roxo); text-align: center; }
/* Aros decorativos azuis ("Group 1" do Figma) atrás do card de acesso */
/* A navbar é sticky: sem a margem de rolagem ela cobre o topo da seção quando o
   formulário volta com erro e o fragmento #acesso rola a página até aqui. */
.lp-section--acesso { position: relative; overflow: clip; scroll-margin-top: 96px; }
.lp-section--acesso .lp-container { position: relative; z-index: 1; }
/* Os aros são ancorados ao CENTRO, não às bordas do viewport: presos à borda, o arco
   visível entrava na coluna de conteúdo abaixo de ~1430px e passava POR CIMA do título e
   do texto de apoio do gate (contraste ~2,1:1; o axe não acusa porque não calcula fundo
   sobre SVG). O arco começa a 329px do centro — a coluna tem no máximo 296px de meia
   largura (título e cartão medem 592px) —, então sobra folga em qualquer viewport. */
/* Verticalmente, os aros seguem o CENTRO da seção, não as bordas: a altura da seção muda
   com a etapa do gate (e-mail ~830px, cadastro ~1450px) e, presos ao topo e ao fundo, um
   aro subia e o outro descia a cada troca de etapa, desfazendo a moldura do cartão. Os
   deslocamentos reproduzem a composição do Figma na etapa do e-mail. */
.lp-ring {
  position: absolute; width: 900px; height: 900px; pointer-events: none; top: 50%;
  /* Sem isto o navegador usa o aro visível como âncora de rolagem e, quando o cartão
     cresce (erro, etapa seguinte), desloca a página metade do crescimento. */
  overflow-anchor: none;
}
.lp-ring--dir { left: calc(50% + 320px); transform: translateY(-50%); }
.lp-ring--esq { right: calc(50% + 320px); transform: translateY(calc(-50% + 90px)); }
.lp-form__helper { font-size: 14px; color: var(--lp-cinza); line-height: 1.2; }
.lp-form__helper--centro { text-align: center; }
.lp-form__error { font-size: 14px; color: var(--lp-erro-texto); line-height: 1.2; }
.lp-form__error--bloco { padding: 12px 16px; border: 1px solid var(--lp-erro-texto); border-radius: 12px; background: var(--lp-erro-bg); }
.lp-input--erro { border-color: var(--lp-erro-texto); }
.lp-input--erro:focus-within { border-color: var(--lp-erro-texto); box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15); }
.lp-form__actions--centro { justify-content: center; flex-wrap: wrap; }
/* Etapa 2 (cadastro): consentimento LGPD; etapa 3: reenvio/troca de e-mail em botão-link. */
.lp-check { display: flex; align-items: flex-start; gap: 12px; }
.lp-check input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--lp-indigo); }
.lp-check label { font-size: 14px; line-height: 1.3; color: var(--lp-cinza); }
.lp-check a { color: var(--lp-roxo); text-decoration: underline; }
.lp-linkbtn {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--lp-roxo); text-decoration: underline;
}
.lp-linkbtn:hover { color: var(--lp-indigo); }
.lp-form__secundario { margin-top: -8px; }

/* ---------- FAQ (accordion 2 colunas) ---------- */
.lp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.lp-acc { background: var(--lp-branco); border-radius: 16px; box-shadow: var(--lp-sombra-xs); border: 1px solid var(--lp-borda-tab); }
.lp-acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 20px 16px;
  font-size: 16px; font-weight: 600; color: var(--lp-escuro);
}
.lp-acc summary::-webkit-details-marker { display: none; }
.lp-acc { transition: box-shadow .2s ease, border-color .2s ease; }
.lp-acc:hover { border-color: var(--lp-roxo); box-shadow: var(--lp-sombra); }
.lp-acc summary svg { transition: transform .2s ease; }
.lp-acc summary:hover svg { transform: rotate(90deg); }
.lp-nav__links a { position: relative; transition: color .18s ease; }
.lp-nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--lp-roxo); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.lp-nav__links a:hover { color: var(--lp-roxo); text-decoration: none; }
.lp-nav__links a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-btn svg, .lp-tab, .lp-acc, .lp-acc summary svg, .lp-nav__links a, .lp-nav__links a::after, .lp-showcase img { transition: none; }
  .lp-btn:hover, .lp-btn:active, .lp-tab:hover:not(.is-active), .lp-tab:active, .lp-btn:hover svg, .lp-acc summary:hover svg { transform: none; }
}
.lp-acc summary span { flex: 1 1 auto; }
.lp-acc summary svg { width: 24px; height: 24px; color: var(--lp-roxo); flex: none; }
.lp-acc .lp-acc__plus { display: block; } .lp-acc .lp-acc__minus { display: none; }
.lp-acc[open] .lp-acc__plus { display: none; } .lp-acc[open] .lp-acc__minus { display: block; }
.lp-acc__body { padding: 0 52px 20px 16px; font-size: 14px; color: var(--lp-cinza); line-height: 1.3; }

/* ---------- Números (Text Counter) ---------- */
.lp-counter {
  flex: 1 1 0; position: relative; overflow: hidden; background: var(--lp-branco); border-radius: 24px;
  box-shadow: var(--lp-sombra); padding: 32px; display: flex; flex-direction: column; gap: 16px;
}
.lp-counter::before {           /* "Ellipse 7": arco azul-claro no canto inferior direito */
  content: ""; position: absolute; width: 263px; height: 263px; border-radius: 50%;
  right: -90px; bottom: -150px; border: 14px solid rgba(0, 156, 222, 0.18);
}
.lp-counter__num { font-size: 48px; font-weight: 600; line-height: 1.1; color: var(--lp-roxo); }
.lp-counter__label { font-size: 16px; font-weight: 600; color: var(--lp-escuro); }

/* ---------- Footer (#330072) ---------- */
.lp-footer { background: var(--lp-indigo); color: var(--lp-linha); padding: 80px 112px 48px; }
.lp-footer__inner { max-width: 1216px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.lp-footer__top { display: flex; gap: 32px; justify-content: space-between; }
.lp-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 280px; }
.lp-footer__logo { width: 114px; height: 36px; display: block; } /* largura explícita: alinhado à esquerda com os ícones */
.lp-footer__social { display: flex; gap: 16px; }
.lp-footer__social a { display: inline-flex; width: 24px; height: 24px; color: var(--lp-branco); }
.lp-footer__social svg { width: 24px; height: 24px; }
.lp-footer__cols { display: flex; gap: 32px; }
.lp-footer__col { width: 176px; display: flex; flex-direction: column; gap: 16px; }
.lp-footer__col h4 { font-size: 14px; font-weight: 600; color: var(--lp-linha); }
.lp-footer__col a { display: block; padding: 8px 0; font-size: 14px; color: var(--lp-linha); }
.lp-footer__col a:hover { text-decoration: underline; }
.lp-footer__credits { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 14px; }
.lp-footer__credits b { font-weight: 700; }

/* ---------- Responsivo (o protótipo é 1440 desktop; abaixo disso empilha) ---------- */
@media (max-width: 1280px) {
  .lp-nav, .lp-section, .lp-footer { padding-left: 40px; padding-right: 40px; }
  .lp-hero__art { flex-basis: 480px; width: 480px; height: 480px; }
  .lp-mock { width: 720px; height: 480px; }
  .lp-mock--sm { width: 100%; max-width: 668px; height: auto; aspect-ratio: 3 / 2; flex-basis: auto; }
}
@media (max-width: 960px) {
  .lp-nav { padding: 12px 20px; flex-wrap: wrap; }
  .lp-nav__links { display: none; }
  .lp-section { padding: 64px 20px; gap: 48px; }
  .lp-hero { flex-direction: column; align-items: flex-start; }
  .lp-hero__art { width: 100%; height: auto; flex-basis: auto; }
  .lp-mock { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .lp-band { flex-wrap: wrap; padding: 32px; }
  .lp-band__card { flex-basis: 45%; }
  .lp-row, .lp-showcase, .lp-timeline, .lp-footer__top, .lp-footer__cols, .lp-title-row,
  .lp-cta-row { flex-direction: column; }
  .lp-cta-row { text-align: center; }  /* sem isto o parágrafo virava coluna estreita ao lado do botão */
  .lp-showcase__content { max-width: none; }
  .lp-tabs__bar { flex-wrap: wrap; justify-content: center; }  /* 2 abas somam 335px: quebram em 320 */
  .lp-step__progress { display: none; }
  .lp-faq { grid-template-columns: 1fr; }
  .lp-form-card { padding: 28px; }
  .lp-h56 { font-size: 40px; } .lp-h48 { font-size: 34px; }
  .lp-footer { padding: 48px 20px 32px; }
}
/* WCAG 1.4.10 (Reflow) exige 320px sem rolagem horizontal: os 3 passos de 81px fixos
   somavam 243px dentro de um cartão de 224px úteis e estouravam o documento. */
@media (max-width: 480px) {
  .lp-form-card { padding: 24px 20px; }
  .lp-progress__step { width: auto; flex: 1 1 0; min-width: 0; }
  .lp-progress__label { font-size: 12px; }
  .lp-progress__divider { flex: 0 0 8px; }
  .lp-footer__col, .lp-footer__brand { width: 100%; }
}