/* =========================================================================
   Repasys — landing page "Gestao de repasse de veiculos"
   Complementa assets/css/style.css
   ========================================================================= */

@import url("../fonts/lp-fonts.css");

.lp {
  --lp-azul: #0f3fdc;
  --lp-azul-medio: #31429e;
  --lp-azul-profundo: #00164c;
  --lp-texto: #4c4c4c;
  --lp-texto-suave: #565656;
  --lp-borda: #c8c8c8;
  --lp-gradiente: linear-gradient(180deg, #31429e 0%, #00164c 100%);

  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: var(--lp-texto);
}

.lp h1, .lp h2, .lp h3 {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
}

/* ---------------------------------------------------- blocos utilitarios */
.lp-secao {
  position: relative;
  padding-block: 70px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.lp-secao__interno {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
}

.lp-etiqueta {
  display: inline-block;
  margin: 0 auto 18px;
  padding: 7px 22px;
  border-radius: 100px;
  background: var(--lp-gradiente);
  color: #bfc9ff;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.lp-titulo {
  margin: 0 0 20px;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.2;
  color: var(--lp-azul);
}
.lp-titulo strong { font-weight: 700; }

.lp-chamada {
  max-width: 720px;
  margin: 0 auto 40px;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.2;
  color: var(--lp-texto);
}

.lp-remate {
  margin: 34px auto 0;
  max-width: 780px;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.2;
  color: var(--lp-texto);
  text-align: center;
}

.lp-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(180deg, #2f56e6 0%, #0f3fdc 100%);
  box-shadow: 0 0 26px rgba(15, 63, 220, 0.45);
  color: #fff;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lp-botao:hover,
.lp-botao:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(15, 63, 220, 0.6);
}

.lp-saiba-mais {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  white-space: nowrap;
  color: var(--lp-texto-suave);
  font-size: 19px;
  font-weight: 300;
}
.lp-saiba-mais img { width: 30px; height: 30px; }
.lp-saiba-mais:hover { color: var(--lp-azul); }

/* ------------------------------------------------------------------ hero */
.lp-hero {
  padding-block: 50px 0;
  background-image: url("../img/lp/bg-sessao-01.webp");
  text-align: center;
}

.lp-hero__logo {
  width: 166px;
  margin: 0 auto 34px;
}

.lp-hero__mockup {
  margin: 40px auto 0;
  max-width: 1234px;
}

/* --------------------------------------------------------------- desafios */
.lp-desafios {
  background-image: url("../img/lp/bg-sessao-02.webp");
  text-align: center;
}

.lp-cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 10px;
}

.lp-cartao {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 30px;
  border: 1px solid var(--lp-borda);
  border-radius: 25px;
  background: rgba(232, 234, 250, 0.55);
  text-align: left;
}
.lp-cartao img {
  width: 100%;
  max-width: 270px;
  margin-bottom: auto;
  border-radius: 18px;
}
.lp-cartao h3 {
  margin: 22px 0 0;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.16;
  color: var(--lp-azul);
}
.lp-cartao h3 strong { font-weight: 700; }

/* ------------------------------------------------------------ plataforma */
.lp-plataforma { text-align: center; }

.lp-plataforma__imagem {
  margin: 10px auto 34px;
  max-width: 1345px;
}

.lp-pilares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.lp-pilar {
  padding: 30px 26px;
  border-radius: 25px;
  background: var(--lp-gradiente);
  color: #fff;
  text-align: left;
}
.lp-pilar img {
  width: 95px;
  margin-bottom: 20px;
}
.lp-pilar h3 {
  margin: 0 0 10px;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.16;
  color: #fff;
}
.lp-pilar p {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

/* --------------------------------------------------------------- recursos */
.lp-recursos__titulo { text-align: center; }

.lp-recurso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 26px;
  padding: 30px;
  border: 1px solid #ededed;
  border-radius: 25px;
  background: #fbfbfd;
}
.lp-recurso:nth-child(odd) .lp-recurso__imagem { order: 2; }

.lp-recurso h3 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.2;
  color: var(--lp-azul);
}
.lp-recurso p {
  margin: 0;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.2;
}

/* ----------------------------------------------------------- depoimentos */
.lp-depoimentos__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 26px;
}

.lp-depoimento {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 34px 30px;
  border-radius: 25px;
  background: var(--lp-gradiente);
  color: #fff;
}
.lp-depoimento__estrelas { width: 149px; }
.lp-depoimento__texto {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 300;
  line-height: 1.18;
}
.lp-depoimento__autor {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}
.lp-depoimento__autor img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.lp-depoimento__cargo {
  display: block;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.2;
}
.lp-depoimento__empresa {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- chamada */
.lp-chamada-final {
  background: linear-gradient(90deg, #31429e 0%, #00164c 100%);
  color: #fff;
  text-align: center;
}
.lp-chamada-final .lp-titulo { color: #fff; }
.lp-chamada-final .lp-chamada { color: rgba(255, 255, 255, 0.9); font-size: clamp(17px, 1.9vw, 21px); }

/* ----------------------------------------------------------- modal da LP */
.lp .modal__titulo {
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 500;
  color: var(--lp-azul-medio);
  text-transform: none;
}
.lp .modal__caixa .lp-etiqueta { margin-bottom: 10px; }
.lp .formulario button[type="submit"] {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
}

/* -------------------------------------------------- passos (indique e ganhe) */
.lp-passos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 10px;
}
.lp-passo {
  padding: 26px 22px 30px;
  border: 1px solid var(--lp-borda);
  border-radius: 25px;
  background: rgba(232, 234, 250, 0.55);
  text-align: left;
}
.lp-passo__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--lp-gradiente);
  color: #fff;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
}
.lp-passo h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.2;
  color: var(--lp-azul);
}
.lp-passo p {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--lp-texto-suave);
}

/* --------------------------------------------- pilares compactos (4 colunas) */
.lp-pilares--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-pilares--4 .lp-pilar { padding: 26px 22px; }
.lp-pilares--4 .lp-pilar img { width: 52px; height: 52px; margin-bottom: 16px; }
.lp-pilares--4 .lp-pilar h3 { font-size: clamp(17px, 1.8vw, 19px); }
.lp-pilares--4 .lp-pilar p { font-size: 14px; }

/* --------------------------------------------------- oferta (indique e ganhe) */
.lp-oferta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 10px;
}
.lp-oferta__cartao {
  padding: 34px 30px;
  border-radius: 25px;
  background: var(--lp-gradiente);
  color: #fff;
  text-align: left;
}
.lp-oferta__valor {
  display: block;
  margin-bottom: 10px;
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
}
.lp-oferta__cartao h3 {
  margin: 0 0 10px;
  font-size: clamp(19px, 2vw, 22px);
  color: #fff;
}
.lp-oferta__cartao p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.lp-regras {
  margin-top: 34px;
  padding: 30px 34px;
  border: 1px solid var(--lp-borda);
  border-radius: 25px;
  background: #fbfbfd;
  text-align: left;
}
.lp-regras h3 {
  margin: 0 0 14px;
  font-size: clamp(19px, 2vw, 22px);
  color: var(--lp-azul);
}
.lp-regras ul { margin: 0; padding-left: 20px; list-style: disc; }
.lp-regras li {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--lp-texto);
}
.lp-regras li:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- rodape */
.lp-rodape {
  padding-block: 30px;
  background: #1e1e1e;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-align: center;
}
.lp-rodape a { color: #fff; }
.lp-rodape a:hover { color: #00bcf9; }

/* -------------------------------------------------------------- responsivo */
@media (max-width: 900px) {
  .lp-secao { padding-block: 50px; }
  .lp-cartoes,
  .lp-pilares,
  .lp-pilares--4,
  .lp-passos,
  .lp-oferta,
  .lp-depoimentos__grade { grid-template-columns: 1fr; }
  .lp-recurso { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .lp-recurso:nth-child(odd) .lp-recurso__imagem { order: 0; }
  .lp-regras { padding: 24px; }
}

@media (max-width: 640px) {
  .lp-passos,
  .lp-pilares--4 { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .lp-passos,
  .lp-pilares--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}