/*
 * Landing (/). Porte da tela "01 Landing" do design (Alpes Funil v3).
 * Tokens, reset, .wrap e botões vêm do site-base.css; aqui só o que é desta
 * página. Prefixo lp- para não colidir com o CSS do checkout.
 * As seções usam .wrap (largura + gutter) e só mexem no padding vertical.
 */
:root {
  --coral: #f07a68;
  --code-txt: #bdbdbd;
}

/* Como no design: o que vaza de propósito (bola lima dos módulos, mockup)
   é cortado aqui, sem barra de rolagem lateral. clip (e não hidden) para
   não virar contêiner de rolagem e não quebrar o header sticky. */
.lp-raiz { overflow-x: clip; }

/* Foco visível em fundo escuro: o contorno preto padrão sumiria. */
.lp-escuro :focus-visible { outline-color: var(--lime); }

/* ───── Títulos e textos que se repetem ───── */
.lp-h2 {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.lp-lead { margin: 0; max-width: 30em; font-size: 17px; line-height: 1.6; color: var(--mut); }
.lp-col { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lp-col--min0 { min-width: 0; }

.lp-pill {
  flex-shrink: 0; padding: 3px 8px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.lp-pill--lime { background: var(--lime); color: var(--ink); }
.lp-pill--cinza { background: var(--dark-line); color: var(--white); }

/* ───── Header ───── */
.lp-header { position: sticky; top: 0; z-index: 20; background: var(--white); }
.lp-header__in { height: 76px; display: flex; align-items: center; gap: 24px; }
.lp-header__marca { flex: 1 1 0; display: flex; align-items: center; }
.lp-nav { display: none; gap: 32px; font-size: 15px; }
.lp-nav a { min-height: 44px; display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.lp-nav a:hover { color: var(--mut); }
.lp-header__acoes { flex: 1 1 0; display: flex; justify-content: flex-end; gap: 8px; }

/* ───── Hero ───── */
.lp-hero { padding-block: 8px 0; }
.lp-hero__box {
  border-radius: 32px; background: var(--lime);
  padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 64px);
  display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 56px); align-items: center;
}
.lp-hero__txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.lp-hero__h {
  margin: 0; max-width: 11ch;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; font-weight: 500; letter-spacing: -0.04em;
  text-wrap: balance;
}
.lp-hero__estrela {
  width: .42em; height: .42em; margin-left: .14em;
  vertical-align: baseline; position: relative; top: -.3em; will-change: transform;
}
.lp-hero__p { margin: 0; max-width: 30em; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: #2e2e2e; text-wrap: pretty; }
.lp-hero__cta { display: flex; align-items: center; gap: 4px; width: 100%; }
.lp-hero__cta .btn { flex-shrink: 0; }
.lp-hero__doodle { display: none; flex-shrink: 1; min-width: 0; overflow: visible; color: var(--ink); }
.lp-hero__planos {
  min-height: 44px; display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.lp-hero__planos:hover { color: var(--ink); }

/* A seta "desenha" sozinha ao carregar. Animação CSS (e não JS) para que sem
   JS, ou com movimento reduzido, ela simplesmente apareça pronta. */
.lp-traco { stroke-dasharray: 1; stroke-dashoffset: 0; animation: lpDesenha 1400ms cubic-bezier(.65, 0, .35, 1) 350ms both; }
.lp-traco__ponta { animation: lpSurge 300ms ease 1600ms both; }
@keyframes lpDesenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lpSurge { from { opacity: 0; } to { opacity: 1; } }

/* Mockup do painel */
.lp-mock {
  flex: 1 1 300px; min-width: 0; display: grid;
  padding-right: clamp(0px, 3.5vw, 40px);
  margin-bottom: clamp(-150px, -10vw, -40px);
}
.lp-mock__a { width: min(90%, 340px); justify-self: start; will-change: transform; }
.lp-mock__b { width: min(70%, 264px); justify-self: end; margin-top: -56px; position: relative; will-change: transform; }
.lp-mock__c { justify-self: start; margin: -24px 0 0 4%; position: relative; will-change: transform; }

.lp-demo {
  padding: 20px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; gap: 14px;
}
.lp-demo__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lp-demo__titulo { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.lp-demo__status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.lp-demo__pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: alpPulse 900ms ease-in-out infinite; }
.lp-demo__feito { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--lime); }
.lp-demo__campo {
  position: relative; height: 46px; padding: 0 6px 0 14px; border-radius: 12px; background: var(--card);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow: hidden;
}
.lp-demo__txt { min-width: 0; white-space: nowrap; overflow: hidden; font-size: 14px; font-variant-numeric: tabular-nums; }
.lp-demo__cursor {
  display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; background: var(--ink);
  vertical-align: -3px; animation: alpBlink 1s steps(1) infinite;
}
.lp-demo__ph { color: var(--mut); }
.lp-demo__lupa {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ink);
  display: flex; align-items: center; justify-content: center; transition: transform 140ms ease;
}
.lp-demo__lupa.is-press { transform: scale(.86); }
/* A transição usada é a do estado de destino: enche devagar ao buscar e, ao
   sair, some antes de voltar a zero (o "0s 220ms" evita ver a barra encolher). */
.lp-demo__prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink);
  transform-origin: left; transform: scaleX(0); opacity: 0;
  transition: opacity 220ms ease, transform 0s linear 220ms;
}
.lp-demo__prog.is-on { transform: scaleX(1); opacity: 1; transition: transform 780ms cubic-bezier(.4, 0, .2, 1), opacity 150ms ease; }
.lp-demo__chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 500; }
.lp-chip {
  padding: 5px 10px; border-radius: 9999px; background: var(--card); color: var(--ink);
  transition: background-color 220ms ease, color 220ms ease, transform 300ms cubic-bezier(.34, 1.56, .64, 1);
}
.lp-chip.is-on { background: var(--ink); color: var(--white); transform: scale(1.06); }
.lp-demo__cotas { display: flex; flex-direction: column; gap: 10px; }
.lp-demo__rot { font-size: 12px; color: var(--mut); }
.lp-cota { display: flex; flex-direction: column; gap: 6px; }
.lp-cota__topo { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lp-cota__n {
  padding: 1px 6px; border-radius: 6px; color: var(--sub); background: rgba(226, 244, 92, 0);
  font-variant-numeric: tabular-nums; transition: background-color 400ms ease;
}
.lp-cota__n.is-bump { background: var(--lime); }
.lp-cota__barra { height: 6px; border-radius: 9999px; background: #f0f0ee; overflow: hidden; }
.lp-cota__fill {
  height: 6px; border-radius: 9999px; background: var(--ink);
  transform-origin: left; transition: transform 800ms var(--ease);
}
/* Mesma proporção do "usado" inicial que o servidor escreve (19%, 15%, 10%). */
[data-cota="essenciais"] .lp-cota__fill { transform: scaleX(.19); }
[data-cota="placaFrota"] .lp-cota__fill { transform: scaleX(.15); }
[data-cota="cnh"] .lp-cota__fill { transform: scaleX(.1); }

.lp-ultimas {
  padding: 18px 18px 8px; border-radius: 24px; background: var(--ink); color: var(--white);
  box-shadow: 0 20px 48px rgba(14, 14, 14, .22);
}
.lp-ultimas__rot { display: block; margin-bottom: 4px; font-size: 12px; color: var(--dark-sub); }
.lp-ultimas__janela { height: 156px; overflow: hidden; }
/* 4 linhas de 52px numa janela de 3: a 1ª fica escondida acima e desce
   (is-shift) quando chega uma consulta nova; a 4ª sai por baixo. */
.lp-ultimas__lista { transform: translateY(-52px); }
.lp-ultimas__lista.is-anim { transition: transform 640ms var(--ease); }
.lp-ultimas__lista.is-shift { transform: translateY(0); }
.lp-ultimas__linha { height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lp-ultimas__linha:first-child { opacity: 0; }
.is-shift > .lp-ultimas__linha:first-child { opacity: 1; }
.is-shift > .lp-ultimas__linha:nth-child(4) { opacity: 0; }
.is-anim > .lp-ultimas__linha { transition: opacity 420ms ease; }
.lp-ultimas__col { display: flex; flex-direction: column; min-width: 0; }
.lp-ultimas__t { font-size: 14px; font-weight: 500; }
.lp-ultimas__id { font-size: 12px; color: var(--dark-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lp-ultimas__sem { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lp-ultimas__zero { font-size: 12px; color: var(--dark-sub); }

.lp-toast {
  padding: 10px 16px 10px 10px; border-radius: 9999px; background: var(--white); box-shadow: var(--shadow-float);
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500;
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity 180ms ease, transform 180ms ease;
}
.lp-toast.is-on { opacity: 1; transform: translateY(0) scale(1); transition: opacity 380ms var(--ease), transform 520ms var(--ease); }
.lp-toast__v { display: flex; align-items: center; gap: 10px; }
.lp-toast__ico { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lp-toast__ico--ok { background: var(--lime); }
.lp-toast__ico--zero { background: var(--ink); color: var(--lime); font-size: 11px; font-weight: 600; }

/* ───── Como funciona ───── */
/* O padding de cima é grande porque o mockup do hero invade esta seção. */
.lp-passos { padding-block: clamp(150px, 16vw, 200px) clamp(64px, 8vw, 112px); }
.lp-passos__h { margin-bottom: 40px; max-width: 14ch; }
.lp-passos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.lp-passo {
  position: relative; overflow: hidden; min-height: 290px; padding: 28px; border-radius: 24px; background: var(--card);
  display: flex; flex-direction: column; gap: 10px;
}
.lp-passo__n { font-size: 14px; color: var(--mut); font-variant-numeric: tabular-nums; }
.lp-passo__h { position: relative; margin: 0; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.lp-passo__p { position: relative; margin: 0; max-width: 20em; font-size: 16px; line-height: 1.5; color: var(--mut); }
.lp-forma { position: absolute; overflow: visible; }
.lp-forma--1a { right: -34px; bottom: -44px; width: 170px; height: 150px; border-radius: 58% 42% 50% 50% / 55% 48% 52% 45%; background: var(--lime); transform: rotate(-12deg); }
.lp-forma--1b { right: 96px; bottom: -34px; width: 110px; height: 100px; border-radius: 46% 54% 40% 60% / 60% 50% 50% 40%; background: var(--ink); }
.lp-forma--1c { right: 34px; bottom: 52px; }
.lp-forma--2a { right: -56px; bottom: -70px; width: 210px; height: 210px; border-radius: 50%; border: 16px solid transparent; border-top-color: var(--ink); border-left-color: var(--lime); transform: rotate(24deg); }
.lp-forma--2b { right: 150px; bottom: -78px; width: 130px; height: 130px; border-radius: 50%; border: 14px solid transparent; border-top-color: var(--coral); transform: rotate(-28deg); }
.lp-forma--2c { right: 48px; bottom: 40px; }
.lp-forma--3a { right: 28px; bottom: -56px; width: 150px; height: 150px; border-radius: 50%; background: var(--ink); }
.lp-forma--3b { right: 150px; bottom: 28px; width: 64px; height: 64px; border-radius: 16px; background: var(--lime); transform: rotate(18deg); }

/* ───── Módulos ───── */
.lp-mod {
  padding-block: clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.lp-mod__h { max-width: 12ch; }
.lp-mod__vis { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 0; }
.lp-mod__bola {
  position: absolute; right: -14%; top: 50%; width: min(78%, 360px); aspect-ratio: 1;
  border-radius: 50%; background: var(--lime); transform: translateY(-50%);
}
.lp-mod__doodle { display: none; position: absolute; inset: -40px 0; width: 100%; height: calc(100% + 80px); overflow: visible; }
.lp-modcard {
  position: relative; width: min(92%, 390px); padding: 16px 18px; border-radius: 18px;
  background: var(--white); box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 14px;
}
.lp-modcard:nth-of-type(2) { margin-left: 8%; }
.lp-modcard:nth-of-type(3) { margin-left: 3%; }
.lp-modcard:nth-of-type(4) { margin-left: 12%; width: min(88%, 390px); }
.lp-modcard__ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--card);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.lp-modcard__ico--placa { background: var(--ink); color: var(--lime); font-size: 11px; }
.lp-modcard__txt { display: flex; flex-direction: column; min-width: 0; }
.lp-modcard__nome { font-size: 16px; font-weight: 500; }
.lp-modcard__desc { font-size: 14px; color: var(--mut); }

/* ───── API ───── */
.lp-api { padding-block: clamp(48px, 7vw, 96px); }
.lp-api__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(48px, 6vw, 96px); align-items: center;
}
.lp-api__h { max-width: 13ch; }
.lp-api__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lp-api__ia { padding: 0 20px; }
.lp-api__vis { position: relative; min-width: 0; padding: 18px 0 0 18px; }
.lp-api__fundo { position: absolute; left: 0; top: 0; width: 64%; height: 58%; border-radius: 24px; background: var(--lime); }
.lp-code {
  position: relative; overflow: hidden; border-radius: 24px; background: var(--ink); color: var(--white);
  box-shadow: 0 20px 48px rgba(14, 14, 14, .18);
}
.lp-code__barra { display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 18px; border-bottom: 1px solid #262626; }
.lp-code__verbo {
  flex-shrink: 0; padding: 3px 9px; border-radius: 8px; background: var(--lime); color: var(--ink);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.lp-code__rota {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: #d4d4d4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-code__copiar {
  position: relative; flex-shrink: 0; min-height: 36px; padding: 0 14px;
  border: 1px solid #333333; border-radius: 10px; background: transparent; color: var(--white);
  font-size: 13px; font-weight: 500; transition: background-color 150ms ease;
}
.lp-code__copiar:hover { background: #1f1f1f; }
/* Alvo de toque de 44px sem mudar o desenho de 36px. */
.lp-code__copiar::after, .lp-tab::after { content: ""; position: absolute; inset: -4px 0; }
.lp-tabs { display: flex; gap: 4px; padding: 12px 14px 4px; overflow-x: auto; scrollbar-width: none; }
.lp-tabs::-webkit-scrollbar { display: none; }
.lp-tab {
  position: relative; flex-shrink: 0; min-height: 36px; min-width: 44px; padding: 0 13px;
  border: 0; border-radius: 9999px; background: transparent; color: var(--dark-sub);
  font-size: 13px; font-weight: 500; transition: background-color 180ms ease, color 180ms ease;
}
.lp-tab[aria-selected="true"] { background: var(--white); color: var(--ink); }
.lp-code__corpo { padding: 10px 0 20px; min-height: 200px; }
.lp-code__rolo { overflow-x: auto; }
.lp-code__rolo:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.lp-code__linhas {
  min-width: max-content; color: var(--code-txt);
  transition: opacity 200ms ease, transform 280ms var(--ease);
}
.lp-code__linhas.is-fade { opacity: 0; transform: translateY(6px); }
.lp-code__ln { display: flex; font-family: var(--mono); font-size: 13px; line-height: 1.75; font-variant-ligatures: none; }
.lp-code__n { flex-shrink: 0; width: 46px; padding-right: 16px; text-align: right; color: var(--mut); user-select: none; }
.lp-code__c { white-space: pre; padding-right: 20px; }
.tk-s { color: var(--lime); }
.tk-k { color: var(--white); }

/* ───── Planos ───── */
.lp-planos { padding-block: clamp(64px, 8vw, 112px); }
.lp-planos__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.lp-planos__intro { max-width: 600px; display: flex; flex-direction: column; gap: 16px; }
.lp-planos__intro p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--mut); }
.lp-planos__h { max-width: 14ch; }
.lp-dur {
  min-width: min(100%, 330px); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft);
}
.lp-dur__op {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 500; transition: background-color 150ms ease, color 150ms ease;
}
.lp-dur__op[aria-checked="true"] { background: var(--ink); color: var(--white); }
.lp-planos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: stretch; }
.lp-plano {
  --plano-mut: var(--mut); --plano-linha: var(--line); --plano-off: var(--mut); --plano-ok: var(--ink);
  padding: 32px 28px; border-radius: 24px; background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; gap: 20px;
}
.lp-plano--rec {
  --plano-mut: var(--dark-sub); --plano-linha: var(--dark-line); --plano-off: #8f8f8f; --plano-ok: var(--lime);
  background: var(--ink); color: var(--white);
}
.lp-plano__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; }
.lp-plano__nome { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.lp-plano__selo { padding: 4px 10px; }
.lp-plano__quem { margin: -12px 0 0; font-size: 15px; color: var(--plano-mut); }
.lp-plano__preco { padding-top: 20px; border-top: 1px solid var(--plano-linha); }
.lp-plano__valor { margin: 0; font-size: 44px; font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.lp-plano__dia { margin: 6px 0 0; font-size: 14px; color: var(--plano-mut); }
.lp-plano__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.lp-plano__item { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; }
.lp-plano__item.is-off { color: var(--plano-off); }
.lp-plano__item svg { margin-top: 3px; }
.lp-plano__ok { color: var(--plano-ok); }
.lp-plano__det { display: block; font-size: 14px; color: var(--plano-mut); }
.lp-plano__cta { padding: 0 20px; }
.lp-planos__nota { margin: 28px 0 0; max-width: 62em; font-size: 15px; line-height: 1.6; color: var(--mut); }
.lp-planos__nota b { color: var(--ink); font-weight: 600; }
.lp-planos__vazio { margin: 0; padding: 28px; border-radius: 24px; background: var(--card); font-size: 17px; line-height: 1.6; }

/* ───── Conformidade ───── */
.lp-regra {
  padding-block: clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.lp-regra__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 440px; }
.lp-regra__txt .lp-lead { max-width: none; }
.lp-regra__usos { margin: 8px 0 0; font-size: 15px; line-height: 1.6; }
.lp-regra__usos b { font-weight: 600; }
.lp-regra__proib { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mut); }
.lp-regra__btn { margin-top: 8px; }
.lp-regra__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--line-soft); }
.lp-regra__item { background: var(--white); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.lp-regra__item h3 { margin: 6px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.lp-regra__item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--mut); }
.lp-regra__ico {
  width: 36px; height: 36px; border-radius: 50%; background: var(--lime);
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600;
}
.lp-regra__ico--arroba { font-size: 16px; }

/* ───── Sob medida (bloco escuro) ───── */
.lp-sob { padding-block: clamp(32px, 5vw, 64px); }
.lp-sob__box {
  position: relative; overflow: hidden; border-radius: 32px; background: var(--ink); color: var(--white);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px; align-items: center;
}
.lp-sob__doodle { display: none; position: absolute; left: 28px; top: 30px; overflow: visible; }
.lp-sob__txt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 64px; }
.lp-sob__h {
  margin: 0; max-width: 14ch; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; font-weight: 500;
  letter-spacing: -0.035em; text-wrap: balance;
}
.lp-sob__p { margin: 0; max-width: 28em; font-size: 17px; line-height: 1.6; color: #bdbdbd; }
.lp-sob__btn { margin-top: 4px; }
.lp-sob__vis { position: relative; display: grid; place-items: center; min-height: 300px; }
.lp-sob__bola { position: absolute; width: min(90%, 280px); aspect-ratio: 1; border-radius: 50%; background: var(--lime); }
.lp-emp {
  position: relative; width: min(100%, 300px); padding: 22px; border-radius: 24px; background: var(--white); color: var(--ink);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 4px; transform: rotate(-3deg);
}
.lp-emp__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 10px; }
.lp-emp__nome { font-size: 20px; font-weight: 500; }
.lp-emp__pill { padding: 4px 10px; border-radius: 9999px; background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 600; }
.lp-emp__linha { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.lp-emp__linha:last-child { padding-bottom: 0; }
.lp-emp__linha span:first-child { color: var(--mut); }

/* ───── Dúvidas ───── */
.lp-faq {
  padding-block: clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.lp-faq__h { max-width: 10ch; text-wrap: wrap; }
.lp-faq__lista { border-top: 1px solid var(--line-soft); }
.lp-faq__item { border-bottom: 1px solid var(--line-soft); }
.lp-faq__t { margin: 0; font: inherit; }
.lp-faq__q {
  width: 100%; min-height: 72px; padding: 18px 0; border: 0; background: transparent;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left;
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
}
.lp-faq__ico {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--card); color: var(--ink);
  display: flex; align-items: center; justify-content: center; transition: background-color 150ms ease, color 150ms ease;
}
.lp-faq__ico svg { transition: transform 200ms ease; }
.lp-faq__q[aria-expanded="true"] .lp-faq__ico { background: var(--ink); color: var(--lime); }
.lp-faq__q[aria-expanded="true"] .lp-faq__ico svg { transform: rotate(45deg); }
.lp-faq__a { margin: 0; padding: 0 56px 22px 0; font-size: 16px; line-height: 1.6; color: var(--mut); }

/* ───── CTA final ───── */
.lp-final {
  padding-block: clamp(24px, 4vw, 48px) clamp(72px, 10vw, 128px);
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
.lp-final__doodle { overflow: visible; }
.lp-final__h { margin: 0; max-width: 14ch; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; font-weight: 500; letter-spacing: -0.04em; text-wrap: balance; }
.lp-final__p { margin: 0; font-size: 15px; color: var(--mut); }

/* ───── Rodapé ───── */
.lp-rodape { background: var(--ink); color: var(--white); }
.lp-rodape__in { padding-block: clamp(48px, 6vw, 72px) 32px; }
.lp-rodape__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 32px; font-size: 15px; }
.lp-rodape__col { display: flex; flex-direction: column; align-items: flex-start; }
.lp-rodape__col--marca { gap: 12px; }
.lp-rodape__marca { font-weight: 600; font-size: 22px; letter-spacing: -0.03em; }
.lp-rodape__frase { max-width: 22em; line-height: 1.5; color: var(--dark-sub); }
.lp-rodape__t { font-weight: 600; }
/* Links com 44px de altura (alvo de toque); o centro do texto cai no mesmo
   ritmo do design, só com um pouco mais de ar entre as linhas. */
.lp-rodape__col a { min-height: 44px; display: flex; align-items: center; color: var(--dark-sub); text-decoration: none; }
.lp-rodape__col a:hover { color: var(--white); }
.lp-rodape__copy { margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--dark-line); font-size: 13px; color: var(--dark-sub); }

/* ───── WhatsApp flutuante ───── */
/* Entra sozinho depois de 1,2 s: animação CSS, para aparecer mesmo sem JS. */
.lp-wa {
  position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 9999px;
  background: var(--ink); color: var(--white); text-decoration: none;
  box-shadow: 0 14px 36px rgba(14, 14, 14, .28); transition: box-shadow 200ms ease;
  animation: lpWaFade 320ms ease 1200ms both, lpWaSobe 520ms var(--ease) 1200ms both;
}
.lp-wa:hover { color: var(--white); box-shadow: 0 20px 44px rgba(14, 14, 14, .38); }
@keyframes lpWaFade { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes lpWaSobe { from { transform: translateY(18px) scale(.92); } to { transform: translateY(0) scale(1); } }
.lp-wa__ico {
  position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--lime);
  display: flex; align-items: center; justify-content: center;
}
.lp-wa__anel {
  position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--lime);
  animation: alpRing 2.8s var(--ease) infinite; pointer-events: none;
}
.lp-wa__rot {
  display: block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width 460ms var(--ease), opacity 260ms ease;
}
.lp-wa__rot-in { display: flex; flex-direction: column; padding-right: 12px; line-height: 1.25; }
.lp-wa__t { font-size: 15px; font-weight: 500; }
.lp-wa__n { font-size: 12px; color: var(--dark-sub); font-variant-numeric: tabular-nums; }

/* ───── Telas largas (o "wide" do design: ≥ 880px) ───── */
@media (min-width: 880px) {
  .lp-nav { display: flex; }
  .lp-hero__doodle, .lp-sob__doodle, .lp-mod__doodle { display: block; }
  .lp-wa.is-open .lp-wa__rot { max-width: 220px; opacity: 1; }
}

/* Celular estreito (360-400px): logo + Entrar + "Ativar por PIX" não cabem
   com o espaçamento do design; aperta só o header. */
@media (max-width: 400px) {
  .lp-header__in { gap: 12px; }
  .lp-header__acoes .btn { padding: 0 14px; }
}