/*
 * LP de captação para anúncios da Meta (/lp-metaads/).
 * Estrutura inspirada na LP de restaurantes da Assessoria Alpha: formulário
 * aberto no topo, qualificação dentro do formulário, números, logos, quem
 * somos, método, serviços, FAQ. O visual vem de /styles.css (home); aqui
 * ficam só os componentes que a home não tem.
 */

.lp-so-celular { display: none; }

/* ---------- Hero com formulário ao lado ---------- */
.lp-hero {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 32px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.lp-hero__texto { padding-top: 24px; }
.lp-selo {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--azul-claro);
  color: var(--azul-hover);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.lp-hero__titulo { font-size: clamp(34px, 4.6vw, 48px); }
.lp-hero__subtitulo { margin-bottom: 24px; }
.lp-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lp-checks li {
  position: relative;
  padding-left: 34px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
}
.lp-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--verde-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b2c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- Formulário ---------- */
.lp-form {
  background: #fff;
  border: 1px solid var(--borda);
  border-top: 4px solid var(--azul);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(26, 115, 232, 0.14);
  overflow: hidden;
  scroll-margin-top: calc(var(--altura-header) + 12px);
}
.lp-form__topo { padding: 20px 24px 16px; border-bottom: 1px solid var(--borda); }
.lp-form__titulo { margin-bottom: 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.lp-form__legenda { font-size: 14px; color: var(--tinta-3); }
.lp-form__corpo { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.lp-form__corpo[hidden] { display: none; }
.lp-form .campo { gap: 6px; }
.lp-form .campo label { font-size: 15px; }
.lp-form .campo input { padding: 12px 14px; }
.campo select {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.25;
  color: var(--tinta);
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.campo select:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 1px var(--azul); }
.campo select[aria-invalid="true"] { border-color: var(--vermelho); }
.lp-form__pergunta { font-size: 15px; font-weight: 500; line-height: 1.45; }
.opcoes--lado { flex-direction: row; gap: 10px; }
.opcoes--lado button { flex: 1 1 0; text-align: center; padding: 12px 14px; }
.lp-form__enviar { width: 100%; margin-top: 4px; }
/* Botão enviando: círculo girando antes do texto, sem pulsar */
.lp-form__enviar.lp-enviando { cursor: progress; animation: none; opacity: 0.9; }
.lp-form__enviar.lp-enviando::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2.5px solid rgba(31, 31, 31, 0.25);
  border-top-color: var(--tinta);
  animation: lpGirar 0.8s linear infinite;
}
@keyframes lpGirar { to { transform: rotate(360deg); } }

/* ---------- Faixa de números: corre em loop (a 2ª lista é cópia visual) ---------- */
.lp-numeros { background: var(--tinta); color: #fff; overflow: hidden; border-top: 3px solid var(--amarelo); }
.lp-numeros__trilho { display: flex; width: max-content; animation: lpCorrer 38s linear infinite; }
.lp-numeros:hover .lp-numeros__trilho { animation-play-state: paused; }
.lp-numeros__lista { margin: 0; padding: 22px 0; list-style: none; display: flex; flex: 0 0 auto; }
.lp-numeros__lista li { display: flex; align-items: baseline; gap: 10px; padding: 0 36px; white-space: nowrap; position: relative; }
.lp-numeros__lista li::after { content: ''; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--g-azul); }
.lp-numeros__lista li:nth-child(4n+2)::after { background: var(--g-vermelho); }
.lp-numeros__lista li:nth-child(4n+3)::after { background: var(--g-amarelo); }
.lp-numeros__lista li:nth-child(4n)::after { background: var(--g-verde); }
.lp-numeros__lista strong { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #fdd663; }
.lp-numeros__lista span { font-size: 16px; color: #e3e3e3; }
@keyframes lpCorrer { to { transform: translateX(-50%); } }

/* ---------- Rótulo acima do título de seção ---------- */
.lp-rotulo {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-hover);
}

/* ---------- Quem somos ---------- */
.lp-sobre > div { max-width: 72ch; }
.lp-sobre .titulo-secao { margin-bottom: 16px; }
.lp-sobre .texto + .texto { margin-top: 14px; }

/* ---------- O que fazemos ---------- */
.lp-servicos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lp-servicos li {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 22px;
}
.lp-servicos h3 { margin-bottom: 8px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.lp-servicos p { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.lp-bonus {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* ---------- Para quem é ---------- */
.lp-perfil { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lp-perfil__lado { border-radius: 16px; padding: 26px; }
.lp-perfil__lado--sim { background: #fff; border: 1px solid var(--borda); border-top: 4px solid var(--verde); }
.lp-perfil__lado--nao { background: #fff; border: 1px solid var(--borda); border-top: 4px solid var(--vermelho); }
.lp-perfil h3 { margin-bottom: 14px; font-size: 20px; font-weight: 700; }
.lp-perfil ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lp-perfil li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
.lp-perfil li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 17px;
}
.lp-perfil__lado--sim li::before { content: '✓'; color: var(--verde); }
.lp-perfil__lado--nao li::before { content: '✕'; color: var(--vermelho); }

/* ---------- Barra fixa do celular ---------- */
.lp-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--borda);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
}
.lp-barra[hidden] { display: none; }
.lp-barra .botao { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .lp-form__enviar.lp-enviando::before { animation-duration: 2.4s; }
}

/* ---------- Tablet ---------- */
@media (max-width: 899px) {
  .lp-hero { grid-template-columns: 1fr; gap: 32px; }
  .lp-hero__texto { padding-top: 0; }
  .lp-servicos { grid-template-columns: repeat(2, 1fr); }
  .lp-so-desktop { display: none; }
}

/* ---------- Celular ---------- */
@media (max-width: 600px) {
  .lp-so-celular { display: block; width: 100%; margin-top: 24px; }
  .lp-hero { padding: 28px 16px 48px; }
  .lp-hero__texto { text-align: center; }
  .lp-hero__titulo { font-size: clamp(30px, 8.4vw, 34px); margin-left: auto; margin-right: auto; }
  .lp-hero__subtitulo { margin-left: auto; margin-right: auto; }
  .lp-checks { text-align: left; max-width: 340px; margin: 0 auto; }
  .lp-checks li { font-size: 16px; }
  .lp-form__topo, .lp-form__corpo { padding-left: 18px; padding-right: 18px; }
  .lp-numeros__lista { padding: 18px 0; }
  .lp-numeros__lista li { padding: 0 26px; }
  .lp-numeros__lista strong { font-size: 22px; }
  .lp-numeros__lista span { font-size: 15px; }
  .lp-sobre, .lp-sobre > div { text-align: center; margin: 0 auto; }
  .lp-servicos { grid-template-columns: 1fr; }
  .lp-servicos li { text-align: center; }
  .lp-bonus { justify-content: center; text-align: center; }
  .lp-perfil { grid-template-columns: 1fr; }
  .lp-perfil__lado { padding: 22px; }
  .lp-rotulo { text-align: center; }
  .clientes__cta .botao { display: block; width: 100%; }
  .rodape { padding-bottom: 84px; } /* espaço para a barra fixa */
}

/* =====================================================================
   Contraste e movimento
   ===================================================================== */

/* ---------- Topo: degradê azul com manchas de cor e grade pontilhada ---------- */
.lp-hero-fundo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(66, 133, 244, 0.20), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(251, 188, 4, 0.13), transparent 34%),
    radial-gradient(circle at 70% 95%, rgba(52, 168, 83, 0.14), transparent 40%),
    linear-gradient(180deg, #e8f0fe 0%, #f6f8fc 60%, #ffffff 100%);
  border-bottom: 1px solid var(--borda);
}
.lp-hero-fundo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(26, 115, 232, 0.16) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  pointer-events: none;
}
.lp-hero-fundo::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 115, 232, 0.18), transparent 65%);
  animation: lpFlutuar 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.lp-hero { position: relative; z-index: 1; }
.lp-selo { background: #fff; box-shadow: 0 2px 10px rgba(26, 115, 232, 0.14); }
.lp-selo::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--verde);
  vertical-align: 1px;
  animation: lpPiscar 1.8s ease-in-out infinite;
}
.lp-form { box-shadow: 0 24px 60px rgba(26, 115, 232, 0.22), 0 0 0 6px rgba(255, 255, 255, 0.6); }
@keyframes lpFlutuar { to { transform: translate(-60px, -80px) scale(1.15); } }
@keyframes lpPiscar { 50% { opacity: 0.35; } }

/* ---------- Quem somos: azul forte ---------- */
.lp-faixa--azul {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 20%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
  color: #fff;
}
.lp-faixa--azul::after {
  content: 'G';
  position: absolute;
  right: 4%;
  bottom: -18%;
  font-size: 380px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.lp-faixa--azul .lp-rotulo { color: #fff; opacity: 0.92; }
.lp-faixa--azul .titulo-secao { color: #fff; }
.lp-faixa--azul .texto { color: #fff; }
.lp-faixa--azul .container { position: relative; z-index: 1; }

/* ---------- O que fazemos: escuro, cards com a cor do Google no topo ---------- */
.lp-faixa--escura .lp-rotulo { color: #8ab4f8; }
.lp-faixa--escura .titulo-secao { color: #fff; }
.lp-faixa--escura .lp-servicos li {
  background: #2a2a2a;
  border: 1px solid #3c4043;
  border-top: 4px solid var(--g-azul);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.lp-faixa--escura .lp-servicos li:nth-child(4n+2) { border-top-color: var(--g-vermelho); }
.lp-faixa--escura .lp-servicos li:nth-child(4n+3) { border-top-color: var(--g-amarelo); }
.lp-faixa--escura .lp-servicos li:nth-child(4n) { border-top-color: var(--g-verde); }
.lp-faixa--escura .lp-servicos li:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
.lp-faixa--escura .lp-servicos h3 { color: #fff; }
.lp-faixa--escura .lp-servicos p { color: #c7c7c7; }
.lp-faixa--escura .lp-bonus { color: #e3e3e3; }

/* ---------- Cards claros também reagem ---------- */
.lp-perfil__lado { transition: transform 180ms ease, box-shadow 180ms ease; }
.lp-perfil__lado:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(31, 31, 31, 0.10); }
.faq__item { transition: border-color 150ms ease, background-color 150ms ease; }
.faq__item:hover, .faq__item[open] { border-color: var(--azul); background: #fff; }

/* ---------- Brilho pulsando nos botões principais ---------- */
.lp-pulsa { animation: lpPulsar 2.4s ease-out infinite; }
@keyframes lpPulsar {
  0% { box-shadow: 0 0 0 0 rgba(251, 188, 4, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(251, 188, 4, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 188, 4, 0); }
}

/* ---------- Surgir ao rolar ----------
   Só esconde quando o JS marcou <html class="lp-anima">: sem JS, tudo aparece. */
.lp-anima [data-revelar] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lp-anima [data-revelar].visivel { opacity: 1; transform: none; }
/* Filhos em cascata dentro de listas de cards */
.lp-anima .lp-servicos[data-revelar] > li,
.lp-anima .trilha[data-revelar] > .passo,
.lp-anima .lp-perfil[data-revelar] > div {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.lp-anima [data-revelar].visivel > li,
.lp-anima [data-revelar].visivel > .passo,
.lp-anima .lp-perfil[data-revelar].visivel > div { opacity: 1; transform: none; }
.lp-anima [data-revelar].visivel > :nth-child(2) { transition-delay: 90ms; }
.lp-anima [data-revelar].visivel > :nth-child(3) { transition-delay: 180ms; }
.lp-anima [data-revelar].visivel > :nth-child(4) { transition-delay: 270ms; }
.lp-anima [data-revelar].visivel > :nth-child(5) { transition-delay: 360ms; }
.lp-anima [data-revelar].visivel > :nth-child(6) { transition-delay: 450ms; }
.lp-anima [data-revelar].visivel > :nth-child(7) { transition-delay: 540ms; }
.lp-anima [data-revelar].visivel > :nth-child(9) { transition-delay: 620ms; }
/* Barras do comparativo enchem quando aparecem */
.lp-anima .comparativo .barra__cheio { transition: width 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 250ms; }
.lp-anima .comparativo:not(.visivel) .barra__cheio { width: 0; }

@media (prefers-reduced-motion: reduce) {
  .lp-numeros__trilho, .lp-hero-fundo::after, .lp-selo::before, .lp-pulsa { animation: none; }
  .lp-numeros__trilho { width: auto; flex-wrap: wrap; justify-content: center; }
  .lp-numeros__lista[aria-hidden="true"] { display: none; }
  .lp-numeros__lista { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
}

@media (max-width: 600px) {
  .lp-faixa--azul::after { font-size: 240px; bottom: -10%; }
  .lp-hero-fundo::after { width: 260px; height: 260px; }
}