/* =========================================================
   ENS — Criação de Landing Pages
   Estilos EXCLUSIVOS desta página.

   Os tokens (cores, raios, container), o header, o rodapé, os
   botões, a abertura, o aviso de cookies, a .check-list e o
   componente de FAQ vêm de styles.css, que carrega antes.

   Prefixo .lp- em tudo: as três páginas do site convivem no
   mesmo styles.css e nenhum seletor daqui pode alcançar as
   outras.

   O vocabulário visual (fio ligando etapas, arcos vermelhos no
   canto, cartões escuros com ícone vermelho) é o mesmo da
   página de Assessoria de propósito: são páginas irmãs do mesmo
   serviço e precisam ler como um sistema, não como dois sites.
   ========================================================= */

/* ---------------------------------------------------------
   Peças comuns às dobras
   --------------------------------------------------------- */
/* o azul dos eyebrows (--blue) não passa no contraste sobre os
   fundos escuros; este é o mesmo azul claro usado nas outras páginas */
.lp-eyebrow-claro { color: #6E93F2; }

/* frase-chave em vermelho dentro dos H2. Só entra em TÍTULO —
   texto grande e negrito passa com folga no contraste (3:1). */
.lp-realce { color: var(--red); }

.lp-btn-seta .ico { width: 1.05rem; height: 1.05rem; transition: transform .25s var(--ease-out); }
.lp-btn-seta:hover .ico { transform: translateX(4px); }

/* =========================================================
   DOBRA 1 — HERO
   ========================================================= */
.lp-hero {
  position: relative;
  background: #05070E;
  color: #fff;
  padding-top: clamp(112px, 11vw, 168px);
  padding-bottom: clamp(40px, 5vw, 78px);
  overflow: hidden;
}
/* brilho vermelho: impede o bloco de virar um retângulo chapado */
.lp-hero::before {
  content: "";
  position: absolute; top: -18%; right: -8%;
  width: 58%; height: 90%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(229,30,37,.18), transparent 70%);
  pointer-events: none;
}
/* os arcos do canto, iguais aos da página de Assessoria: um
   repeating-radial-gradient com o centro fora da tela desenha anéis
   concêntricos. A máscara mantém tudo na faixa da direita, longe do
   texto. */
.lp-hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 116% -12%,
    transparent 0 44px,
    rgba(229,30,37,.34) 44px 45.4px,
    transparent 45.4px 90px);
  -webkit-mask-image: linear-gradient(250deg, #000 0%, rgba(0,0,0,.5) 30%, transparent 58%);
          mask-image: linear-gradient(250deg, #000 0%, rgba(0,0,0,.5) 30%, transparent 58%);
  opacity: 0;
}
html:not(.intro-ativa) .lp-hero::after {
  animation: lp-arcos 1.5s var(--ease-out) .35s forwards;
}
@keyframes lp-arcos { to { opacity: 1; } }

.lp-hero-wrap {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(28px, 4.2vw, 64px);
  align-items: center;
}
.lp-hero-texto h1 {
  color: #fff;
/* calibrado para a 1a frase ("Não basta levar pessoas até a página.",
     37 caracteres) caber inteira numa linha só */
  font-size: clamp(1.6rem, 2.3vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  overflow-wrap: break-word;
}
.lp-hero-lead {
  color: #A0ABC4;
  font-size: clamp(.92rem, 1.02vw, 1.02rem);
  line-height: 1.66;
  max-width: 50ch;
  margin-bottom: .9rem;
}
.lp-hero-lead strong { color: #DCE4F5; font-weight: 700; }
.lp-hero-texto .btn { margin-top: 14px; }

/* =========================================================
   O MOCKUP DO HERO — desenhado, não fotografado

   Uma landing page vista no navegador, com o celular por cima.
   Tudo em blocos: nenhum texto real, nenhuma imagem. Pesa ~2 KB
   e fica nítido em qualquer tela.

   --m é o passo de medida. Segue a largura do PRÓPRIO bloco
   (cqw) onde houver suporte, porque no tablet o hero empilha e
   a arte dobra de largura — com vw ela não teria como saber.
   ========================================================= */
.lp-hero-arte { position: relative; }
.lp-mock { --m: clamp(7px, .62vw, 10px); position: relative; padding-bottom: calc(var(--m) * 2.4); }
@supports (container-type: inline-size) {
  .lp-hero-arte { container-type: inline-size; }
  .lp-mock { --m: clamp(7px, 1.72cqw, 10.5px); }
}

/* ---------- a janela do navegador ---------- */
.lp-janela {
  width: 84%;
  border-radius: calc(var(--m) * 1.2);
  overflow: hidden;
  background: #0A0F18;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
}
.lp-janela-barra {
  display: flex; align-items: center; gap: calc(var(--m) * .55);
  padding: calc(var(--m) * .85) calc(var(--m) * 1.1);
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lp-ponto { width: calc(var(--m) * .78); height: calc(var(--m) * .78); border-radius: 999px; flex: none; }
.lp-ponto.p1 { background: #E5484D; }
.lp-ponto.p2 { background: #E5A23C; }
.lp-ponto.p3 { background: #46A758; }
/* a barra de endereço: uma pílula vazia, sem URL inventada */
.lp-url { flex: 1; height: calc(var(--m) * 1.05); border-radius: 999px; background: rgba(255,255,255,.07); margin-left: calc(var(--m) * .7); }

.lp-janela-corpo { padding: calc(var(--m) * 1.15); display: grid; gap: calc(var(--m) * 1.05); }
/* a primeira dobra da página ilustrada: imagem à esquerda, texto e
   botão à direita — a estrutura que a própria dobra 4 descreve */
.lp-dobra1 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--m) * 1); align-items: center; }
.lp-foto {
  aspect-ratio: 4 / 3; border-radius: calc(var(--m) * .7);
  background: linear-gradient(135deg, #262C38, #1A1F29);
  position: relative;
}
/* o "ícone de imagem" que os placeholders costumam ter */
.lp-foto::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 34%; height: 26%; transform: translate(-50%,-50%);
  border-radius: calc(var(--m) * .25);
  background:
    radial-gradient(circle at 26% 32%, #4A5265 0 18%, transparent 19%),
    linear-gradient(to top right, transparent 44%, #4A5265 44% 62%, transparent 63%);
  border: 1px solid #4A5265;
}
.lp-txt { display: grid; gap: calc(var(--m) * .5); }
.lp-l { display: block; height: calc(var(--m) * .62); width: var(--w); border-radius: 999px; background: #333A49; }
/* .lp-acao e não .lp-cta: a seção da Dobra 9 também se chama .lp-cta e,
   vindo depois no arquivo, pintava este botão com o fundo dela. */
.lp-acao {
  display: block; height: calc(var(--m) * 1.5); width: 62%;
  border-radius: calc(var(--m) * .38);
  background: var(--red);
  margin-top: calc(var(--m) * .45);
  box-shadow: 0 calc(var(--m)*.5) calc(var(--m)*1.4) calc(var(--m)*-.6) rgba(229,30,37,.85);
}

.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--m) * .75); }
.lp-cardm {
  display: grid; gap: calc(var(--m) * .42);
  padding: calc(var(--m) * .8);
  border-radius: calc(var(--m) * .6);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.lp-ico {
  width: calc(var(--m) * 1.7); height: calc(var(--m) * 1.7);
  border-radius: calc(var(--m) * .35);
  border: 1.5px solid #4A5265;
  margin-bottom: calc(var(--m) * .2);
}

/* ---------- o celular por cima ---------- */
/* 24% e não 27%: a 27% ele cobria metade da janela e engolia o
   terceiro cartão. Assim sobrepõe cerca de um terço, como no
   wireframe — o suficiente para dar profundidade. */
.lp-fone {
  position: absolute; right: 0; bottom: 0;
  width: 24%;
  border-radius: calc(var(--m) * 1.5);
  background: #0A0F18;
  border: calc(var(--m) * .2) solid #262C38;
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.95);
  padding: calc(var(--m) * .75);
  padding-top: calc(var(--m) * 1.5);
}
.lp-fone-notch {
  position: absolute; top: calc(var(--m) * .5); left: 50%; transform: translateX(-50%);
  width: 34%; height: calc(var(--m) * .5); border-radius: 999px; background: #262C38;
}
.lp-fone-corpo { display: grid; gap: calc(var(--m) * .45); }
.lp-foto--fone { aspect-ratio: 16 / 10; }
.lp-acao--fone { width: 100%; height: calc(var(--m) * 1.25); }
.lp-fone-icos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--m) * .35); margin-top: calc(var(--m) * .2); }
.lp-fone-icos span {
  aspect-ratio: 1; border-radius: calc(var(--m) * .3);
  border: 1.2px solid #4A5265;
}

/* =========================================================
   DOBRA 2 — ESTRATÉGIA ANTES DO LAYOUT
   ========================================================= */
.lp-estrategia { background: var(--paper); padding-block: clamp(26px, 3.1vw, 62px); }
.lp-estrategia-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 66px);
  align-items: start;
  margin-bottom: clamp(26px, 3.2vw, 50px);
}
.lp-estrategia h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.lp-estrategia-nota p { color: var(--t-muted); font-size: .92rem; line-height: 1.65; margin-bottom: .7rem; }
.lp-estrategia-nota p strong { color: var(--t-dark); font-weight: 700; }

/* A JORNADA — quatro etapas em sequência real, ligadas por um fio
   que se desenha ao entrar na tela. O fio é feito de SEGMENTOS, um
   por vão: uma linha única atravessaria os cartões por dentro (o
   fundo deles é branco sólido, mas a linha ficaria por cima nas
   bordas arredondadas). --p e --g repetem o padding do cartão e o
   vão da grade, então o segmento nasce no centro exato do ícone. */
.lp-jornada {
  --g: clamp(12px, 1.6vw, 22px);
  --p: clamp(18px, 2vw, 26px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g);
  list-style: none; padding: 0; margin: 0;
}
.lp-etapa {
  position: relative; z-index: 1;
  text-align: center;
  padding: var(--p) clamp(12px, 1.4vw, 18px) calc(var(--p) + 4px);
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line-l);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.lp-etapa:hover { border-color: #C6CEDC; box-shadow: var(--shadow-s); transform: translateY(-4px); }
.lp-etapa:not(:last-child)::after {
  content: "";
  position: absolute; z-index: 0;
  top: calc(var(--p) + 1.7rem - 1px);   /* 1.7rem = metade do ícone */
  left: 100%; width: var(--g); height: 2px;
  background: linear-gradient(90deg, rgba(229,30,37,.55), rgba(229,30,37,.28));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.js .lp-jornada.in .lp-etapa::after,
html:not(.js) .lp-etapa::after { transform: scaleX(1); }
.lp-jornada.in .lp-etapa:nth-child(1)::after { transition-delay: .20s; }
.lp-jornada.in .lp-etapa:nth-child(2)::after { transition-delay: .36s; }
.lp-jornada.in .lp-etapa:nth-child(3)::after { transition-delay: .52s; }

.lp-etapa-ico {
  width: 3.4rem; height: 3.4rem; border-radius: 999px;
  display: grid; place-items: center; margin: 0 auto .7rem;
  color: var(--red);
  background: #fff;
  border: 1.5px solid rgba(229,30,37,.35);
  transition: transform .3s var(--ease-out), border-color .3s ease;
}
.lp-etapa-ico .ico { width: 1.7rem; height: 1.7rem; stroke-width: 1.7; }
.lp-etapa:hover .lp-etapa-ico { transform: scale(1.08); border-color: var(--red); }
.lp-etapa-num { display: block; color: var(--blue); font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; }
.lp-etapa h3 { font-size: .98rem; margin: 3px 0 7px; }
.lp-etapa p { color: var(--t-muted); font-size: .82rem; line-height: 1.55; }

.lp-estrategia-remate {
  margin-top: clamp(22px, 2.6vw, 34px);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
  background: #fff; border: 1px solid var(--line-l);
  border-left: 3px solid var(--blue);
  border-radius: 12px;
  color: var(--t-body); font-size: .9rem; line-height: 1.6;
  max-width: 84ch;
}
.lp-estrategia-remate strong { color: var(--t-dark); font-weight: 700; }

/* =========================================================
   DOBRA 3 — ANÚNCIO E PÁGINA (a assinatura da página)

   A coerência é uma CORRENTE: basta um elo fraco para o clique
   se perder. Por isso os quatro elos são ligados por setas — e
   passar o cursor em QUALQUER um acende a corrente inteira,
   porque nenhum deles funciona sozinho. É o argumento da dobra
   virando comportamento.
   ========================================================= */
.lp-lingua { background: var(--ink-900); color: #fff; padding-block: clamp(30px, 3.6vw, 70px); }
.lp-lingua-head { max-width: 66ch; margin-bottom: clamp(26px, 3.2vw, 46px); }
.lp-lingua h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.lp-lingua-head p { color: var(--t-light); font-size: .92rem; line-height: 1.62; margin-bottom: .7rem; }

.lp-corrente {
  --g: clamp(26px, 3.4vw, 52px);
  --r: 1.7rem;                 /* metade do ícone */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g);
  list-style: none; padding: 0;
  margin: 0 0 clamp(28px, 3.4vw, 46px);
}
.lp-corrente li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-align: center;
}
/* A seta vai da BORDA de um ícone à borda do próximo.
   Antes ela usava right:calc(-100% ...), que estica a linha por toda a
   largura da coluna seguinte: ela passava por baixo do ícone e sobrava
   um traço solto depois do último elo. Agora o começo e o fim são
   calculados a partir do centro (50%) e do raio do ícone (--r). */
.lp-corrente li:not(:last-child)::after {
  content: "";
  position: absolute; top: var(--r);
  left: calc(50% + var(--r) + 10px);
  width: calc(100% + var(--g) - var(--r) * 2 - 20px);
  height: 2px; background: rgba(229,30,37,.4);
  transition: background-color .3s ease;
}
/* a ponta da seta, ancorada no MESMO fim da linha acima */
.lp-corrente li:not(:last-child)::before {
  content: "";
  position: absolute; top: var(--r);
  left: calc(150% + var(--g) - var(--r) - 15px);
  width: 8px; height: 8px; margin-top: -3px;
  border-right: 2px solid rgba(229,30,37,.55);
  border-bottom: 2px solid rgba(229,30,37,.55);
  transform: rotate(-45deg);
  transition: border-color .3s ease;
  z-index: 1;
}
.lp-elo-ico {
  width: 3.4rem; height: 3.4rem; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--red);
  background: var(--ink-900);
  border: 1.5px solid rgba(229,30,37,.4);
  position: relative; z-index: 2;
  transition: transform .3s var(--ease-out), border-color .3s ease, background-color .3s ease;
}
.lp-elo-ico .ico { width: 1.65rem; height: 1.65rem; stroke-width: 1.7; }
.lp-elo-nome { color: #fff; font-weight: 700; font-size: .92rem; }

/* passar em QUALQUER elo acende todos: a corrente só existe inteira.
   :has() no <ol> alcança os irmãos; sem suporte, nada acontece. */
.lp-corrente:has(li:hover) .lp-elo-ico { border-color: var(--red); background: rgba(229,30,37,.12); }
.lp-corrente:has(li:hover) li::after  { background: var(--red); }
.lp-corrente:has(li:hover) li::before { border-color: var(--red); }
.lp-corrente li:hover .lp-elo-ico { transform: scale(1.1); }

.lp-lingua-cue { color: var(--t-dim); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
/* as quatro perguntas: filete vertical entre elas, como no wireframe */
.lp-perguntas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-perguntas li {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-align: center;
  padding: 0 clamp(12px, 1.8vw, 26px);
  color: #fff; font-weight: 600; font-size: .92rem; line-height: 1.4;
  position: relative;
}
.lp-perguntas li + li::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: rgba(255,255,255,.12);
}
.lp-p-ico {
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  display: grid; place-items: center; flex: none;
  color: var(--red); background: rgba(229,30,37,.10);
  transition: background-color .25s ease, transform .25s var(--ease-out);
}
.lp-p-ico .ico { width: 1.3rem; height: 1.3rem; stroke-width: 1.7; }
.lp-perguntas li:hover .lp-p-ico { background: rgba(229,30,37,.2); transform: scale(1.07); }

.lp-lingua-remate {
  margin-top: clamp(24px, 3vw, 40px);
  color: #fff; font-weight: 700; font-size: clamp(.95rem, 1.2vw, 1.08rem);
  line-height: 1.5; max-width: 62ch;
}

/* =========================================================
   DOBRA 4 — O QUE CONSIDERAMOS NA CRIAÇÃO
   ========================================================= */
.lp-criacao { background: var(--paper); padding-block: clamp(26px, 3.1vw, 62px); }
.lp-criacao-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(24px, 3vw, 44px); }
.lp-criacao h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
/* minmax(0,1fr): sem ele "Rastreamento" e "Conversão" esticam a
   coluna pelo min-content e a grade vaza para fora do container. */
.lp-criacao-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(11px, 1.4vw, 18px);
  align-items: stretch;
}
.lp-item {
  display: flex; flex-direction: column;
  padding: clamp(16px, 1.8vw, 22px) clamp(12px, 1.4vw, 17px);
  text-align: center;
  background: #fff;
  border: 1px solid var(--line-l);
  border-radius: 16px;
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s var(--ease-out);
}
.lp-item:hover { border-color: #C6CEDC; box-shadow: var(--shadow-s); transform: translateY(-4px); }
.lp-item-ico {
  width: 3.1rem; height: 3.1rem; border-radius: 999px;
  display: grid; place-items: center; margin: 0 auto .8rem;
  color: var(--red);
  border: 1.5px solid rgba(229,30,37,.32);
  transition: transform .3s var(--ease-out), border-color .3s ease;
}
.lp-item-ico .ico { width: 1.55rem; height: 1.55rem; stroke-width: 1.7; }
.lp-item:hover .lp-item-ico { transform: scale(1.08); border-color: var(--red); }
.lp-item h3 { font-size: .9rem; line-height: 1.3; margin-bottom: 8px; }
/* o parêntese explicativo do documento em peso menor: ele é apoio,
   não parte do nome da frente */
.lp-item h3 em { display: block; font-style: normal; font-weight: 500; font-size: .78rem; color: var(--t-muted); margin-top: 2px; }
.lp-item p { color: var(--t-muted); font-size: .8rem; line-height: 1.55; }

/* =========================================================
   DOBRA 5 — SITE OU LANDING PAGE?
   ========================================================= */
.lp-versus { background: var(--ink-900); color: #fff; padding-block: clamp(28px, 3.4vw, 66px); }
.lp-versus-head { text-align: center; max-width: 56ch; margin: 0 auto clamp(24px, 3vw, 44px); }
.lp-versus h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.lp-versus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.lp-quadro {
  display: flex; flex-direction: column;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  transition: border-color .28s ease, background-color .28s ease;
}
/* o quadro da Landing Page é o assunto da página: ganha a borda
   vermelha. O do Site fica neutro — ele é a comparação, não a oferta. */
.lp-quadro--lp { border-color: rgba(229,30,37,.32); background: rgba(229,30,37,.05); }
.lp-quadro:hover { border-color: rgba(255,255,255,.2); }
.lp-quadro--lp:hover { border-color: rgba(229,30,37,.55); }
.lp-quadro header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.lp-quadro-ico { flex: none; color: var(--red); display: grid; place-items: center; }
.lp-quadro-ico .ico { width: 1.7rem; height: 1.7rem; stroke-width: 1.7; }
.lp-quadro h3 { color: #fff; font-size: 1.05rem; }
.lp-quadro p { color: var(--t-light); font-size: .9rem; line-height: 1.62; margin-bottom: .7rem; }
.lp-quadro p strong { color: #fff; font-weight: 700; }
.lp-quadro-cue { color: var(--t-dim) !important; font-size: .84rem !important; margin-top: .3rem; }
.lp-quadro-lista { display: grid; gap: 8px; margin-top: .2rem; }
.lp-quadro-lista li {
  color: var(--t-light); font-size: .88rem; line-height: 1.5;
  padding-left: 17px; position: relative;
}
.lp-quadro-lista li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--red);
}
/* usado só quando /criacao-de-sites existir (ver comentário no HTML) */
.lp-quadro-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 16px; min-height: 44px;
  color: var(--red); font-weight: 700; font-size: .86rem;
  transition: gap .2s var(--ease-out);
}
.lp-quadro-link .ico { width: 1rem; height: 1rem; }
.lp-quadro-link:hover { gap: 12px; }

.lp-versus-remate {
  margin-top: clamp(22px, 2.8vw, 36px);
  text-align: center;
  color: #fff; font-weight: 700; font-size: clamp(.95rem, 1.2vw, 1.08rem);
  line-height: 1.5; max-width: 70ch; margin-inline: auto;
}

/* =========================================================
   DOBRA 6 — LANDING PAGE + TRÁFEGO PAGO
   ========================================================= */
.lp-trafego { background: var(--paper-2); padding-block: clamp(26px, 3.1vw, 62px); }
.lp-trafego-wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4.4vw, 72px);
  align-items: center;
}
.lp-trafego h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.lp-trafego-texto p { color: var(--t-body); font-size: .92rem; line-height: 1.62; margin-bottom: .7rem; max-width: 54ch; }
.lp-trafego-remate { color: var(--t-dark) !important; font-weight: 700; }
.lp-trafego-texto .btn { margin-top: 14px; }

/* O PERCURSO — vertical porque é assim que ele cabe ao lado do texto,
   e é assim que a pessoa desce a página: de cima para baixo. */
.lp-percurso {
  display: grid; gap: 0;
  list-style: none; padding: 0; margin: 0;
}
.lp-percurso li {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: clamp(12px, 1.4vw, 17px) clamp(14px, 1.6vw, 20px);
  background: #fff;
  border: 1px solid var(--line-l);
  border-radius: 14px;
  transition: border-color .28s ease, transform .28s var(--ease-out);
}
.lp-percurso li + li { margin-top: clamp(20px, 2.2vw, 28px); }
/* o traço vertical que liga um passo ao seguinte, com a ponta da seta */
.lp-percurso li:not(:last-child)::after {
  content: "";
  position: absolute; left: calc(clamp(14px, 1.6vw, 20px) + 1.55rem); top: 100%;
  width: 2px; height: clamp(20px, 2.2vw, 28px);
  background: rgba(229,30,37,.42);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .4s var(--ease-out);
}
.js .lp-percurso.in li::after,
html:not(.js) .lp-percurso li::after { transform: scaleY(1); }
.lp-percurso.in li:nth-child(1)::after { transition-delay: .2s; }
.lp-percurso.in li:nth-child(2)::after { transition-delay: .34s; }
.lp-percurso.in li:nth-child(3)::after { transition-delay: .48s; }
.lp-percurso li:hover { border-color: rgba(229,30,37,.4); transform: translateX(4px); }
.lp-perc-ico {
  width: 3.1rem; height: 3.1rem; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  color: var(--red); background: rgba(229,30,37,.07);
  transition: transform .28s var(--ease-out);
}
.lp-perc-ico .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.7; }
.lp-percurso li:hover .lp-perc-ico { transform: scale(1.07); }
.lp-perc-nome { color: var(--t-dark); font-weight: 700; font-size: .98rem; }

/* =========================================================
   DOBRA 7 — PARA QUEM FAZ SENTIDO
   ========================================================= */
.lp-publico { background: var(--ink-950); color: #fff; padding-block: clamp(28px, 3.4vw, 62px); }
.lp-publico-wrap {
  display: grid; grid-template-columns: minmax(250px, 38%) 1fr;
  gap: clamp(24px, 3.6vw, 60px);
  align-items: start;
}
.lp-publico h2 { color: #fff; font-size: clamp(1.15rem, 1.95vw, 1.62rem); margin-bottom: 14px; }
.lp-publico-head p { color: var(--t-light); font-size: .9rem; line-height: 1.6; }
/* .check-list vem de styles.css: aqui só as duas colunas, o tamanho
   de texto e a cor — lá ela vive sobre fundo claro. */
.lp-publico-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px clamp(24px, 3.4vw, 48px); }
.lp-publico-lista li { color: var(--t-light); font-size: .9rem; line-height: 1.5; }
.lp-publico-nota {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid rgba(255,255,255,.12);
  color: var(--t-dim); font-size: .88rem; line-height: 1.6;
}
.lp-publico-nota strong { color: #fff; font-weight: 700; }

/* =========================================================
   DOBRA 9 — CTA FINAL
   ========================================================= */
.lp-cta {
  color: #fff;
  padding-block: clamp(32px, 4vw, 72px);
  border-top: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(72% 82% at 50% 0%, rgba(43,73,176,.16), transparent 60%),
    var(--ink-900);
}
.lp-cta-wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(26px, 4vw, 66px);
  align-items: center;
}
.lp-cta h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.lp-cta-texto p { color: var(--t-light); font-size: .92rem; line-height: 1.62; margin-bottom: .7rem; max-width: 56ch; }
.lp-cta-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lp-cta-acoes .btn { min-height: 52px; }

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* ---------------------------------------------------------
   TABLET E ABAIXO (<= 1024)
   As grades largas quebram e os fios horizontais somem — um fio
   ligando cartões que já não estão em linha mente.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .lp-hero { padding-top: clamp(96px, 14vw, 128px); }
  .lp-hero-wrap { grid-template-columns: 1fr; row-gap: clamp(26px, 4vw, 38px); }
  .lp-hero-texto h1 { font-size: clamp(1.7rem, 4.4vw, 2.2rem); }
  .lp-hero-lead { max-width: none; }
  .lp-hero-arte { order: 2; }

  .lp-estrategia-head { grid-template-columns: 1fr; row-gap: 18px; }
  .lp-jornada { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-etapa:nth-child(2)::after { display: none; }   /* fim da linha 1 */

  .lp-corrente { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(26px, 4vw, 34px); }
  .lp-corrente li:nth-child(2)::after,
  .lp-corrente li:nth-child(2)::before { display: none; }
  .lp-perguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(22px, 3vw, 30px); }
  .lp-perguntas li:nth-child(3)::before { display: none; }

  .lp-criacao-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .lp-trafego-wrap { grid-template-columns: 1fr; row-gap: clamp(26px, 4vw, 36px); }
  .lp-trafego-texto p { max-width: none; }

  .lp-publico-wrap { grid-template-columns: 1fr; row-gap: 22px; }

  .lp-cta-wrap { grid-template-columns: 1fr; row-gap: 24px; }
  .lp-cta-texto p { max-width: none; }
}

/* ---------------------------------------------------------
   CELULAR (<= 768)
   Nada de corpo de texto abaixo de ~15px e nenhum alvo de toque
   abaixo de 48px — as mesmas regras do resto do site.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .lp-hero { padding-top: 104px; padding-bottom: 40px; }
  .lp-hero-texto h1 { font-size: 1.85rem; line-height: 1.18; }
  /* os arcos recuam: aqui o texto ocupa a largura toda */
  .lp-hero::after {
    background: repeating-radial-gradient(circle at 122% -8%,
      transparent 0 34px,
      rgba(229,30,37,.26) 34px 35.2px,
      transparent 35.2px 70px);
    -webkit-mask-image: linear-gradient(232deg, #000 0%, rgba(0,0,0,.42) 22%, transparent 44%);
            mask-image: linear-gradient(232deg, #000 0%, rgba(0,0,0,.42) 22%, transparent 44%);
  }

  .lp-estrategia, .lp-lingua, .lp-criacao,
  .lp-versus, .lp-trafego, .lp-publico { padding-block: 46px; }

  .lp-estrategia h2, .lp-lingua h2, .lp-criacao h2,
  .lp-versus h2, .lp-trafego h2, .lp-cta h2 { font-size: 1.42rem; line-height: 1.24; }
  .lp-publico h2 { font-size: 1.3rem; line-height: 1.26; }

  .lp-hero-lead, .lp-estrategia-nota p, .lp-lingua-head p,
  .lp-quadro p, .lp-trafego-texto p, .lp-publico-head p,
  .lp-cta-texto p, .lp-etapa p, .lp-item p,
  .lp-estrategia-remate, .lp-quadro-lista li, .lp-publico-nota { font-size: .95rem; }

  /* a jornada vira lista: ícone à esquerda, texto à direita */
  .lp-jornada { grid-template-columns: 1fr; gap: 11px; }
  .lp-etapa {
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
    align-items: center; text-align: left;
    padding: 16px 18px;
  }
  .lp-etapa::after { display: none; }
  .lp-etapa-ico { grid-row: 1 / span 3; margin: 0; align-self: center; }
  .lp-etapa h3 { margin: 2px 0 4px; }

  /* a corrente empilha e as setas passam a apontar para baixo */
  .lp-corrente { grid-template-columns: 1fr; gap: 30px; }
  .lp-corrente li { flex-direction: row; gap: 14px; text-align: left; }
  .lp-corrente li:not(:last-child)::after {
    top: 100%; left: var(--r); right: auto;
    width: 2px; height: 30px; margin-left: -1px;
  }
  .lp-corrente li:not(:last-child)::before {
    top: calc(100% + 22px); left: var(--r); margin-left: -4px;
    transform: rotate(45deg);
  }
  .lp-corrente li:nth-child(2)::after,
  .lp-corrente li:nth-child(2)::before { display: block; }

  .lp-perguntas { grid-template-columns: 1fr; row-gap: 0; }
  .lp-perguntas li {
    flex-direction: row; align-items: center; gap: 14px; text-align: left;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .lp-perguntas li::before { display: none !important; }
  .lp-perguntas li:last-child { border-bottom: 0; }

  .lp-criacao-grid { grid-template-columns: 1fr; }
  .lp-item {
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
    align-items: center; text-align: left;
  }
  .lp-item-ico { grid-row: 1 / span 2; margin: 0; align-self: center; }

  .lp-versus-grid { grid-template-columns: 1fr; }

  .lp-publico-lista { grid-template-columns: 1fr; }
  .lp-publico-lista li { font-size: .95rem; }

  .lp-lingua-remate, .lp-versus-remate { font-size: 1.05rem; }
}

@media (max-width: 560px) {
  .lp-hero-texto .btn, .lp-trafego-texto .btn, .lp-cta-acoes .btn { width: 100%; }
  .lp-cta-acoes { align-items: stretch; }
  /* o celular do mockup sai: a 330px ele encobriria metade da janela */
  .lp-fone { display: none; }
  .lp-janela { width: 100%; }
  .lp-mock { padding-bottom: 0; }
}

@media (max-width: 480px) {
  .lp-hero-texto h1 { font-size: 1.62rem; }
  .lp-estrategia, .lp-lingua, .lp-criacao,
  .lp-versus, .lp-trafego, .lp-publico { padding-block: 40px; }
  .lp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   FAIXAS INTERMEDIÁRIAS
   Mesmos dois vãos encontrados na página de Assessoria, medindo
   de 360 a 1180px: o desktop apertado (1025–1240), onde as
   grades largas ficam com colunas estreitas demais, e o tablet
   em pé (561–768), onde tudo já era uma coluna só e metade da
   tela ficava vazia.
   ========================================================= */

/* ---- desktop apertado: 1025 a 1240 ---- */
@media (min-width: 1025px) and (max-width: 1240px) {
  /* 6 itens em 6 colunas dão ~135px cada: "Mobile (experiência em
     dispositivos móveis)" ficava com uma palavra por linha. */
  .lp-criacao-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- tablet em pé e celular deitado: 561 a 768 ---- */
@media (min-width: 561px) and (max-width: 768px) {
  .lp-jornada      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-etapa::after { display: none; }      /* o fio não liga o que quebrou de linha */
  .lp-criacao-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-publico-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* a corrente empilhada em 1 coluna ocupava uma tela inteira só
     para 4 elos: em 2x2 ela cabe de uma vez. As setas voltam a
     ser horizontais dentro de cada par. */
  .lp-corrente { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px var(--g); }
  .lp-corrente li { flex-direction: column; gap: .7rem; text-align: center; }
  .lp-corrente li:not(:last-child)::after {
    top: var(--r); left: calc(50% + var(--r) + 10px);
    width: calc(100% + var(--g) - var(--r) * 2 - 20px);
    height: 2px; margin-left: 0;
  }
  .lp-corrente li:not(:last-child)::before {
    top: var(--r); left: calc(150% + var(--g) - var(--r) - 15px);
    transform: rotate(-45deg);
  }
  /* o 2o elo fecha a primeira linha: não há próximo ao lado dele */
  .lp-corrente li:nth-child(2)::after,
  .lp-corrente li:nth-child(2)::before { display: none; }

  .lp-perguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .lp-perguntas li {
    flex-direction: column; align-items: center; text-align: center;
    padding: 0 16px; border-bottom: 0;
  }
  .lp-perguntas li:nth-child(even)::before { display: block !important; }
}