/* ==========================================================================
   Hero Golden v2 das LPs de produto Patrimar
   Layout (Figma 4915.2, nó 2570:88): info do empreendimento | campanha | formulário
   Fontes: Adobe Fonts (kit sgu3obz) → Acumin Variable (texto) + Ivy Ora Display (destaques)
   Medidas: o hero é desenhado em 1440px. "u" = 1px do Figma na largura atual do hero,
   então a composição inteira escala junto. Abaixo de 960px ela empilha (base 390px).
   ========================================================================== */

.lp-hero {
  --lp-font-sans: "acumin-variable", "Acumin Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --lp-font-display: "ivyora-display", "Ivy Ora Display", Georgia, "Times New Roman", serif;
  --lp-font-text: "ivyora-text", "Ivy Ora Text", Georgia, "Times New Roman", serif;
  --lp-gold: #d9a74a;
  --lp-btn: #b08710;
  --lp-black: #0a0a0a;
  --lp-white: #fff;
  --lp-bg: url("img/bg.webp");
}

@media (max-width: 960px) {
  .lp-hero {
    --lp-bg: url("img/bg-sm.webp");
  }
}

.lp-hero *,
.lp-hero *::before,
.lp-hero *::after {
  box-sizing: border-box;
}

/* blindagem contra o CSS global das LPs (ex.: h1–h6/p em Mangueira) — especificidade baixa de propósito */
.lp-hero :where(h1, h2, h3, p, span, a, label, input) {
  font-family: inherit;
}

.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero: palco ---------- */
.lp-hero {
  position: relative;
  background: var(--lp-black) var(--lp-bg) center / cover no-repeat;
  color: var(--lp-white);
  font-family: var(--lp-font-sans);
}

.lp-hero p,
.lp-hero h1,
.lp-hero h2 {
  margin: 0;
}

.lp-hero__stage {
  --design: 1440;
  --u: calc(100cqw / var(--design));
  container: lp-hero / inline-size;
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 733;
}

/* três colunas nas posições do Figma: info (x 111) | campanha (x 472) | formulário (x 930) */
.lp-hero__grid {
  position: absolute;
  top: calc(103 * var(--u));
  left: calc(104 * var(--u));
  height: calc(556 * var(--u));
  padding-left: calc(7 * var(--u));
  display: grid;
  grid-template-columns: calc(301 * var(--u)) calc(398 * var(--u)) calc(400 * var(--u));
  column-gap: calc(60 * var(--u));
  align-items: center;
}

/* "*Consulte condições": canto inferior esquerdo */
.lp-hero__legal {
  position: absolute;
  top: calc(696 * var(--u));
  left: calc(104 * var(--u));
  font-size: max(7px, calc(7 * var(--u)));
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.85;
}

/* ---------- Coluna 1: informações do empreendimento ---------- */
.lp-hero__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(35 * var(--u));
  min-width: 0;
}

.lp-hero__location {
  width: calc(336 * var(--u));
  font-size: max(11px, calc(14 * var(--u)));
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* compensa o espaço depois da última letra */
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.lp-hero__logo {
  display: block;
  flex: none;
  width: auto;
  /* logos têm proporções diferentes: fixa a altura e limita a largura; --logo-scale vem do config */
  height: calc(52 * var(--u) * var(--logo-scale, 1));
  max-width: calc(170 * var(--u));
  object-fit: contain;
}

.lp-hero__logo--white {
  filter: brightness(0) invert(1);
}

.lp-hero__brand {
  display: block;
  width: calc(194 * var(--u));
  height: auto;
}

/* ---------- Coluna 2: campanha (Golden + oferta) ---------- */
.lp-hero__campaign-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(26 * var(--u));
}

.lp-hero__campaign {
  display: block;
  width: calc(368 * var(--u));
  height: auto;
  max-width: none;
}

.lp-typology {
  width: auto;
  min-width: calc(166 * var(--u));
  max-width: calc(200 * var(--u));
  text-align: center;
}

.lp-typology__head {
  white-space: nowrap;
}

.lp-typology__head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(11 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.lp-typology__number {
  font-size: max(30px, calc(45 * var(--u)));
}

.lp-typology__unit {
  font-size: max(15px, calc(24 * var(--u)));
  text-transform: uppercase;
}

/* faixa ("2 e 3 quartos"): número menor para caber na coluna */
.lp-typology__head--range .lp-typology__number {
  font-size: max(24px, calc(36 * var(--u)));
}

.lp-typology__head--range .lp-typology__unit {
  font-size: max(13px, calc(20 * var(--u)));
}

/* tipologia em texto livre ("Studios, 1 quarto ou 2 suítes") */
.lp-typology__text {
  font-size: max(13px, calc(17 * var(--u)));
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
}

.lp-typology__area {
  margin-top: calc(4 * var(--u));
  font-size: max(12px, calc(16 * var(--u)));
  line-height: 1.2;
}

.lp-typology__rule {
  height: 0;
  margin: calc(10 * var(--u)) 0;
  border: 0;
  border-top: 1px solid var(--lp-white);
}

.lp-typology__note {
  font-size: max(10px, calc(12 * var(--u)));
  line-height: 1.25;
  text-transform: uppercase;
  text-wrap: balance;
}

.lp-hero strong {
  font-weight: 700;
}

/* ---------- Hero: oferta ---------- */
.lp-hero__offer {
  --o: calc(var(--u) * 0.8); /* na v2 a moldura ocupa a coluna central (≈366px) */
  display: flex;
  justify-content: center;
}

.lp-offer {
  position: relative;
  width: calc(457 * var(--o));
  height: calc(457 * var(--o));
  padding: calc(70.5 * var(--o)) calc(20 * var(--o)) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--lp-white);
}

/* moldura dourada dupla: um retângulo mais alto e outro mais largo */
.lp-offer::before,
.lp-offer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--lp-gold);
}

.lp-offer::before {
  inset: calc(11.5 * var(--o)) calc(3.7 * var(--o)) calc(0.3 * var(--o)) calc(3.4 * var(--o));
}

.lp-offer::after {
  inset: calc(17 * var(--o)) calc(0.3 * var(--o)) calc(5.6 * var(--o)) 0;
}

/* oferta de um bloco só (só desconto ou só parcelas fixas): moldura mais baixa e texto menor,
   para o conteúdo não encostar nas bordas nem sobrar espaço */
.lp-offer--primary,
.lp-offer--secondary {
  height: calc(320 * var(--o));
  justify-content: center;
  padding-top: 0;
}

.lp-offer--primary .lp-offer__pre {
  font-size: max(14px, calc(24 * var(--o)));
}

.lp-offer--primary .lp-offer__value {
  margin-top: calc(10 * var(--o));
}

/* centralização óptica na moldura (medido pela tinta das letras) */
.lp-offer--primary .lp-offer__pre,
.lp-offer--primary .lp-offer__value {
  position: relative;
  top: calc(6 * var(--o));
}

.lp-offer--primary .lp-offer__main {
  font-size: max(30px, calc(84 * var(--o)));
}

.lp-offer--primary .lp-offer__prefix {
  top: calc(-33 * var(--o));
  font-size: max(15px, calc(44 * var(--o)));
}

.lp-offer--primary .lp-offer__main .lp-mark {
  top: calc(-14 * var(--o));
  font-size: calc(54 * var(--o));
}

/* "Parcelas" + "fixas*" centralizados opticamente na moldura (medido pela tinta das letras) */
.lp-offer--secondary .lp-offer__second {
  top: calc(-28 * var(--o));
  left: calc(8 * var(--o));
  margin-top: 0;
}

.lp-offer--secondary .lp-offer__big {
  left: 0;
  font-size: max(40px, calc(124 * var(--o)));
  padding-top: calc(36 * var(--o));
}

.lp-offer--secondary .lp-offer__label {
  top: calc(44 * var(--o));
  font-size: max(14px, calc(32 * var(--o)));
}

.lp-offer--secondary .lp-offer__big .lp-mark {
  top: calc(-26 * var(--o));
  font-size: calc(60 * var(--o));
}

/* ---------- dois valores (cobertura e apartamento) ----------
   Escala de 3 níveis: (1) "Descontos de até" em sans regular, (2) valor em Ivy Ora itálico dourado,
   (3) rótulo em sans média, caixa alta. O tamanho do valor vem de --ts (unidades do Figma);
   o ritmo vertical é fixo: pre 14 · valor · rótulo · fio 20 · valor · rótulo. */
.lp-offer--tiers {
  --ts: 84;
  justify-content: center;
  padding: calc(10 * var(--o)) calc(20 * var(--o)) 0;
}

.lp-offer--tiers.lp-offer--has-extra {
  --ts: 66;
}

.lp-offer__eyebrow {
  margin-bottom: calc(10 * var(--o));
  padding-left: 0.34em;
  color: var(--lp-gold);
  font-size: max(10px, calc(13 * var(--o)));
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
}

.lp-offer--tiers .lp-offer__pre {
  margin-bottom: calc(14 * var(--o));
  font-size: max(13px, calc(22 * var(--o)));
  line-height: 1;
}

.lp-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-tier .lp-offer__value {
  margin: 0;
}

.lp-tier .lp-offer__main {
  font-size: max(26px, calc(var(--ts) * var(--o)));
}

.lp-tier .lp-offer__prefix {
  top: calc(var(--ts) * -0.4 * var(--o));
  font-size: max(13px, calc(var(--ts) * 0.55 * var(--o)));
}

.lp-tier .lp-offer__main .lp-mark {
  top: calc(var(--ts) * -0.2 * var(--o));
  font-size: calc(var(--ts) * 0.8 * var(--o));
}

.lp-tier__label {
  margin-top: calc(6 * var(--o));
  padding-left: 0.28em;
  color: rgba(255, 255, 255, 0.85);
  font-size: max(10px, calc(14 * var(--o)));
  font-weight: 500;
  letter-spacing: 0.28em;
  line-height: 1;
  text-transform: uppercase;
}

.lp-offer .lp-offer__rule--tiers {
  width: calc(250 * var(--o));
  margin: calc(20 * var(--o)) 0;
}

/* linha extra (ex.: "+ Parcelas e saldo fixos*"), no mesmo registro dos rótulos */
.lp-offer__extra {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.7em;
  color: var(--lp-white);
  font-size: max(10px, calc(14 * var(--o)));
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-offer__extra-plus,
.lp-offer__extra-mark {
  color: var(--lp-gold);
  font-family: var(--lp-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.lp-offer__extra-plus {
  font-size: 1.6em;
}

.lp-offer__extra-mark {
  position: relative;
  top: -0.25em;
  margin-left: -0.5em;
  font-size: 1.5em;
}

.lp-offer__pre {
  font-size: max(14px, calc(25 * var(--o)));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.lp-offer__value {
  margin-top: calc(-1 * var(--o));
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(14 * var(--o));
  color: var(--lp-gold);
  font-family: var(--lp-font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.lp-offer__prefix {
  position: relative;
  top: calc(-37 * var(--o)); /* "R$" fica acima da linha de base do valor */
  left: calc(-6 * var(--o));
  font-size: max(16px, calc(52 * var(--o)));
}

.lp-offer__main {
  font-size: max(30px, calc(92 * var(--o)));
  letter-spacing: -0.02em;
}

.lp-mark {
  position: relative;
  line-height: 0;
}

.lp-offer__main .lp-mark {
  top: calc(-18 * var(--o));
  font-size: calc(76 * var(--o));
}

.lp-offer__big .lp-mark {
  top: calc(-31 * var(--o));
  left: calc(11 * var(--o));
  font-size: calc(68 * var(--o));
}

.lp-offer__rule {
  position: relative;
  width: calc(292 * var(--o));
  height: calc(4 * var(--o));
  margin-top: calc(4 * var(--o));
  margin-left: calc(30 * var(--o)); /* no Figma o fio fica um pouco à direita do centro */
  border-block: 1px solid rgba(217, 167, 74, 0.7);
}

.lp-offer__second {
  position: relative;
  margin-top: calc(26 * var(--o));
}

.lp-offer__big {
  position: relative;
  left: calc(40 * var(--o));
  display: inline-block;
  padding-top: calc(36 * var(--o));
  color: var(--lp-gold);
  font-family: var(--lp-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: max(40px, calc(123 * var(--o)));
  line-height: 1;
  white-space: nowrap;
}

.lp-offer__label {
  position: absolute;
  top: calc(45 * var(--o));
  left: calc(46% - 34 * var(--o));
  color: var(--lp-white);
  font-family: var(--lp-font-sans);
  font-style: normal;
  font-size: max(14px, calc(33 * var(--o)));
  letter-spacing: 0.04em;
  line-height: 1;
}

.lp-offer__plus {
  position: absolute;
  top: calc(61 * var(--o));
  right: 100%;
  margin-right: calc(38 * var(--o));
  width: calc(52 * var(--o));
  height: calc(52 * var(--o));
}

.lp-offer__plus::before,
.lp-offer__plus::after {
  content: "";
  position: absolute;
  background: var(--lp-white);
}

.lp-offer__plus::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.lp-offer__plus::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: skewX(-14deg);
}

/* brilhos decorativos */
.lp-spark {
  position: absolute;
  z-index: 1;
  width: calc(70 * var(--u));
  height: calc(14 * var(--u));
  pointer-events: none;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, #fff 0, #ffe9a8 16%, rgba(255, 214, 120, 0.35) 46%, rgba(255, 214, 120, 0) 100%),
    linear-gradient(90deg, rgba(255, 222, 140, 0), rgba(255, 226, 160, 0.9) 50%, rgba(255, 222, 140, 0)) center / 100% 1px no-repeat;
}

/* ---------- Brilhos: pulsam de intensidade, sem movimento ----------
   Os brilhos do layout ficam parados; um halo (::after) sobre cada um acende e apaga.
   Só a opacidade do halo é animada (GPU), nada muda de tamanho nem de lugar.
   Cada brilho acende numa hora diferente (animation-delay). */
.lp-spark::after {
  content: "";
  position: absolute;
  inset: -10% 38%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 220, 0.9), rgba(255, 220, 140, 0.3) 50%, rgba(255, 214, 120, 0) 100%);
  opacity: 0;
  animation: lp-pulse 6s ease-in-out infinite;
}

.lp-spark--r::after { animation-delay: -1.2s; }
.lp-spark--rule::after { animation-delay: -2.4s; }

/* bem sutil: o pico é fraco, a ideia é ficar na dúvida se está mexendo */
@keyframes lp-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-spark::after {
    animation: none;
  }
}

.lp-spark--tl {
  left: calc(78 * var(--o));
  top: calc(17 * var(--o));
}

.lp-spark--r {
  left: 100%;
  top: calc(156 * var(--o));
  transform: translate(-50%, -50%) rotate(90deg);
}

.lp-spark--rule {
  left: 55%;
  top: 50%;
}

/* ---------- Empilhado (tablet e celular): campanha, info, formulário ---------- */
@media (max-width: 960px) {
  .lp-hero__stage {
    --design: 390;
    max-width: 520px;
    aspect-ratio: auto;
    padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u));
  }

  .lp-hero__grid {
    position: static;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
  }

  .lp-hero__campaign-col { order: 1; }
  .lp-hero__info { order: 2; gap: calc(22 * var(--u)); }
  .lp-form { order: 3; }

  .lp-hero__campaign {
    width: calc(300 * var(--u));
  }

  .lp-hero__offer {
    --o: calc(var(--u) * 0.72);
  }

  .lp-hero__location {
    width: auto;
    font-size: max(11px, calc(12 * var(--u)));
  }

  .lp-hero__logo {
    height: calc(48 * var(--u) * var(--logo-scale, 1));
    max-width: calc(150 * var(--u));
  }

  .lp-hero__brand {
    width: calc(150 * var(--u));
  }

  .lp-typology__number { font-size: calc(44 * var(--u)); }
  .lp-typology__unit { font-size: calc(22 * var(--u)); }
  .lp-typology__area { font-size: calc(15 * var(--u)); }
  .lp-typology__note { font-size: max(10px, calc(11 * var(--u))); }

  .lp-hero__legal {
    position: static;
    margin-top: calc(24 * var(--u));
    text-align: center;
  }
}

/* ==========================================================================
   Formulário (coluna 3 do hero)
   O Hub (komuh.form.js) e o form.js da Patrimar dependem de: .form, .submit-btn, .form-output,
   .is-phone, [name=nome|telefone|email|empreendimento|origin|pp] e das classes
   .sending / .is-success / .is-error.
   ========================================================================== */
.lp-form {
  width: 100%;
  min-height: calc(545 * var(--u));
  padding: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
  background: rgba(0, 0, 0, 0.3);
}

.lp-form__title {
  max-width: calc(382 * var(--u));
  color: var(--lp-white);
  font-size: max(15px, calc(20 * var(--u)));
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.lp-form__form {
  width: calc(320 * var(--u));
  min-width: 260px;
  max-width: 100%;
  /* zera o .form das LPs (display, largura, margem, fundo, padding, cor) */
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
}

.lp-form .field-empreendimento {
  display: none;
}

.lp-form .field-wrap {
  position: relative;
  display: block;
  flex: initial;
  min-width: 0;
  /* zera o .field-wrap das LPs (borda, margem, ordem, largura em flex) */
  order: 0;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.lp-hero .lp-form .field-cb a {
  color: inherit; /* algumas LPs pintam todos os links de escuro */
}

/* algumas LPs (ex.: Icon Golf) fixam .form .field-wrap.field-nome/.field-tel em 50%: aqui todos os campos ocupam a coluna inteira */
.lp-hero .lp-form .form .field-wrap {
  width: auto;
  max-width: none;
  float: none;
}

/* etiqueta branca sobre a borda do campo, como no Figma.
   o :not(#lp-x) dá peso de id ao seletor para vencer regras de rótulo das LPs sem !important */
.lp-form .field-wrap:not(.field-cb) > label:not(#lp-x) {
  position: absolute;
  z-index: 1;
  top: calc(-8 * var(--u));
  left: calc(12 * var(--u));
  padding: 0 calc(4 * var(--u));
  background: var(--lp-white);
  color: var(--lp-black);
  font-size: max(11px, calc(12 * var(--u)));
  font-weight: 400;
  line-height: max(18px, calc(20 * var(--u)));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transform: none;
}

.lp-form abbr {
  display: none; /* o campo continua obrigatório (required); o Figma não mostra o asterisco */
}

.lp-form input.text {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: calc(17 * var(--u)) calc(4 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u)); /* 56px de altura com a borda, como no Figma */
  border: 3px solid var(--lp-white);
  border-radius: 0;
  background: transparent;
  color: var(--lp-white);
  font: 300 max(15px, calc(16 * var(--u)))/1.5 var(--lp-font-sans);
  letter-spacing: 0.02em;
  appearance: none;
  transition: border-color 0.2s;
}

.lp-form input.text::placeholder {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

.lp-form input.text:focus-visible {
  outline: none;
  border-color: var(--lp-gold);
}

.lp-form input.text:user-invalid {
  border-color: #ff8a7a;
}

.lp-form input.text:-webkit-autofill {
  -webkit-text-fill-color: var(--lp-white);
  box-shadow: 0 0 0 100px #151515 inset;
  caret-color: var(--lp-white);
}

/* checkbox: o input fica na tela (para teclado e leitor de tela); a caixa é desenhada no span */
.lp-form .field-cb label {
  position: relative;
  display: block;
  color: var(--lp-white);
  font-size: max(11px, calc(11 * var(--u)));
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

/* seletores com "input + span" para empatar com o .form .field-cb do CSS das LPs (e vencer pela ordem) */
.lp-form .field-cb input {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.lp-form .field-cb input + span {
  position: relative;
  display: inline-block;
  min-height: 18px;
  padding-left: 26px;
  padding-top: 1px;
}

.lp-form .field-cb input + span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 2px;
  background: var(--lp-white);
}

.lp-form .field-cb input + span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid var(--lp-black);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg);
}

.lp-form .field-cb input:checked + span::after {
  opacity: 1;
}

.lp-form .field-cb input:focus-visible + span::before {
  outline: 2px solid var(--lp-gold);
  outline-offset: 2px;
}

.lp-form .field-cb a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lp-form a:focus-visible {
  outline: 2px solid var(--lp-gold);
  outline-offset: 3px;
}

/* botão (zera o .btn das LPs: margem, max-width, escala e sombra no hover) */
.lp-form .lp-btn {
  display: block;
  width: 100%;
  max-width: none;
  height: max(44px, calc(45 * var(--u)));
  margin: calc(-4 * var(--u)) 0 0;
  padding: 0 24px;
  box-shadow: none;
  scale: none;
  border: 0;
  border-radius: 0;
  background: var(--lp-btn);
  color: var(--lp-black);
  font: 600 max(15px, calc(16 * var(--u)))/1 var(--lp-font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.25s;
}

.lp-form .lp-btn:hover:not(:disabled),
.lp-form .lp-btn:focus-visible {
  background: var(--lp-gold);
  box-shadow: none;
  scale: none;
}

.lp-form .lp-btn:focus-visible {
  outline: 2px solid var(--lp-white);
  outline-offset: 3px;
}

.lp-form .lp-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.lp-form .lp-btn.sending {
  pointer-events: none;
  background: var(--lp-btn) url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='%230a0a0a'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='.4' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / 22px;
  color: transparent;
}

/* retorno do envio */
.lp-form .form-output:empty {
  display: none;
}

.lp-form .form-output,
.lp-form .form-output.is-success,
.lp-form .form-output.is-error {
  order: 0;
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--lp-gold);
  background: rgba(255, 255, 255, 0.08);
  color: var(--lp-white);
  font-size: 14px;
  line-height: 1.4;
}

.lp-form .form-output.is-success {
  border-left-color: #5cc46a;
}

.lp-form .form-output.is-error {
  border-left-color: #ff8a7a;
}

@media (max-width: 960px) {
  .lp-form {
    min-height: 0;
    padding: calc(32 * var(--u)) calc(24 * var(--u));
    gap: calc(28 * var(--u));
  }

  .lp-form__title {
    max-width: none;
    font-size: max(15px, calc(17 * var(--u)));
  }

  .lp-form__form {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-form input.text,
  .lp-form .lp-btn {
    transition: none;
  }
}