/* ==========================================================================
   Hero + formulário das LPs de produto Patrimar
   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-form {
  --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-black: #0a0a0a;
  --lp-white: #fff;
  --lp-bg: url("img/bg.webp");
}

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

.lp-hero *,
.lp-hero *::before,
.lp-hero *::after,
.lp-form *,
.lp-form *::before,
.lp-form *::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),
.lp-form :where(h2, p, span, a, label) {
  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;
  z-index: 1; /* a barra inferior avança sobre a seção do formulário */
  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 {
  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;
  /* 40 (margem) + 556 (prédio) + 40 (margem) + 48 (metade da barra) */
  aspect-ratio: 1440 / 684;
}

/* "*Consulte condições": centralizado logo abaixo do prédio */
.lp-hero__legal {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: calc(8 * var(--u));
  transform: translateX(-50%);
  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;
}

.lp-hero__row {
  position: absolute;
  top: calc(40 * var(--u));
  left: 50%;
  width: calc(1197 * var(--u));
  height: calc(556 * var(--u));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
}

/* ---------- Hero: coluna de informações ---------- */
.lp-hero__info {
  flex: none;
  width: calc(375 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(35 * var(--u));
}

.lp-hero__campaign {
  display: block;
  width: calc(372 * var(--u));
  height: auto;
  max-width: none;
  margin-block: calc(-5 * var(--u)); /* no Figma o logo ocupa uma caixa de 124px de altura */
}

.lp-hero__location {
  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__product {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(35 * var(--u));
}

.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-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: var(--u); /* unidade da oferta; no mobile é reduzida (ver @media) */
  flex: none;
  width: calc(508 * var(--u));
  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;
  transform: translate(calc(-6 * var(--u)), calc(-10.5 * var(--u)));
  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));
}

.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; }
.lp-spark--bar-r::after { animation-delay: -3.6s; }
.lp-spark--bar-b::after { animation-delay: -4.8s; }

/* 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%;
}

/* ---------- Hero: prédio ---------- */
/* a caixa acompanha a largura da fachada (altura fixa de 556px no desenho) */
.lp-hero__building {
  position: relative;
  flex: none;
  height: calc(556 * var(--u));
}

.lp-hero__building img {
  display: block;
  width: auto;
  max-width: calc(380 * var(--u));
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.lp-hero__building--crop {
  width: calc(229 * var(--u));
}

/* José Torres: mesmo recorte do Figma (a imagem é 9,4% mais larga e começa fora da caixa, à esquerda) */
.lp-hero__building--crop img {
  width: 109.37%;
  margin-left: -9.43%;
  object-fit: cover;
  object-position: left top;
  clip-path: inset(0 0 0 8.62%);
}

/* ---------- Hero: barra inferior ---------- */
/* a barra fica metade no hero, metade na seção do formulário */
.lp-bar {
  position: absolute;
  top: calc(636 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  height: calc(96 * var(--u));
  padding: 0 calc(72 * var(--u)); /* a largura acompanha o conteúdo */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(96 * var(--u));
  white-space: nowrap;
  border: 1px solid var(--lp-gold);
  background: var(--lp-black) var(--lp-bg) center / cover no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.lp-bar__phrase {
  flex: none;
}

.lp-bar__lead,
.lp-bar__sub {
  display: block;
}

.lp-bar__lead {
  color: var(--lp-gold);
  font-family: var(--lp-font-text);
  font-style: italic;
  font-size: max(18px, calc(36 * var(--u)));
  line-height: 1;
}

.lp-bar__sub {
  margin-top: calc(2 * var(--u));
  font-size: max(12px, calc(18 * var(--u)));
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.lp-bar__brand {
  display: block;
  flex: none;
  width: calc(160 * var(--u));
  height: auto;
}

.lp-bar__cta {
  flex: none;
  min-width: calc(146 * var(--u));
  height: calc(39.5 * var(--u));
  padding: 0 calc(17 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lp-white);
  color: var(--lp-white);
  font-size: max(13px, calc(20 * var(--u)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.lp-bar__cta:hover,
.lp-bar__cta:focus-visible {
  border-color: var(--lp-gold);
  background: var(--lp-gold);
  color: var(--lp-black);
}

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

.lp-spark--bar-r {
  left: 92.5%;
  top: 0;
}

.lp-spark--bar-b {
  left: 58%;
  top: 100%;
}

/* ---------- Hero: empilhado (tablet e celular) ---------- */
@media (max-width: 960px) {
  .lp-hero__stage {
    --design: 390;
    max-width: 520px;
    aspect-ratio: auto;
    padding: calc(46 * var(--u)) 0 calc(28 * var(--u));
  }

  .lp-hero__row {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    flex-direction: column;
    gap: calc(26 * var(--u));
    padding-inline: calc(20 * var(--u));
  }

  .lp-hero__info {
    width: 100%;
    gap: calc(20 * var(--u));
  }

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

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

  .lp-hero__product {
    gap: calc(24 * var(--u));
  }

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

  .lp-typology {
    min-width: calc(150 * var(--u));
    max-width: calc(190 * 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__offer {
    --o: calc(var(--u) * 0.72);
    width: 100%;
  }

  .lp-offer {
    transform: none;
  }

  .lp-hero__building {
    height: calc(460 * var(--u));
  }

  .lp-hero__building--crop {
    width: calc(190 * var(--u));
  }

  .lp-bar {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    white-space: normal;
    width: auto;
    height: auto;
    margin: calc(26 * var(--u)) calc(16 * var(--u)) 0;
    padding: calc(22 * var(--u)) calc(16 * var(--u));
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(18 * var(--u)) calc(28 * var(--u));
    text-align: center;
  }

  .lp-bar__phrase {
    width: 100%;
  }

  .lp-bar__lead {
    font-size: max(22px, calc(27 * var(--u)));
  }

  .lp-bar__sub {
    font-size: max(13px, calc(14 * var(--u)));
  }

  .lp-bar__brand {
    width: calc(130 * var(--u));
  }

  .lp-bar__cta {
    min-width: calc(130 * var(--u));
    height: calc(40 * var(--u));
    font-size: max(14px, calc(16 * var(--u)));
  }
}

/* ==========================================================================
   Formulário
   O Hub (komuh.form.js) depende 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 {
  /* metade da barra do hero (48px no desenho de 1440) entra nesta seção */
  --lp-bar-half: calc(min(100vw, 1440px) * 48 / 1440);
  background: linear-gradient(100deg, #d29d3f 0%, #e3b866 50%, #d29d3f 100%) var(--lp-gold);
  color: var(--lp-black);
  font-family: var(--lp-font-sans);
  padding: calc(var(--lp-bar-half) + clamp(20px, 2.4vw, 32px)) 0 clamp(28px, 3.4vw, 44px);
}

@media (max-width: 960px) {
  .lp-form {
    --lp-bar-half: 0px;
  }
}

.lp-form__wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.lp-form__title {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  color: var(--lp-black);
  font-family: var(--lp-font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

/* desktop: Nome | Telefone | E-mail na mesma linha; aceite + botão na linha de baixo */
.lp-form__form {
  display: grid;
  max-width: none; /* zera o .form das LPs (largura, margem, fundo, padding, cor) */
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 18px 32px;
}

.lp-form .field-wrap {
  display: flex;
  flex: initial;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  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-form .field-cb {
  grid-column: span 2;
  align-self: center;
}

.lp-form .form-output {
  grid-column: 1 / -1;
}

.lp-form label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* algumas LPs posicionam o rótulo sobre a borda do campo (ex.: .field-wrap.field-nome label);
   o :not(#lp-x) dá peso de id ao seletor para vencer essas regras sem !important */
.lp-form .field-wrap:not(.field-cb) > label:not(#lp-x) {
  position: static;
  top: auto;
  left: auto;
  padding: 0;
  background: none;
  color: inherit;
  transform: none;
}

.lp-form abbr {
  color: inherit;
  text-decoration: none;
}

.lp-form input.text {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 6px 0 7px;
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.75);
  border-radius: 0;
  background: transparent;
  color: var(--lp-black);
  font: 400 17px/1.4 var(--lp-font-sans);
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lp-form input.text:hover {
  border-bottom-color: var(--lp-black);
}

.lp-form input.text:focus-visible {
  outline: none;
  border-bottom-color: var(--lp-black);
  box-shadow: 0 1px 0 var(--lp-black);
}

.lp-form input.text:user-invalid {
  border-bottom-color: #8a1c0f;
}

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

/* 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;
  font-size: 14px;
  font-weight: 400;
  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: 2px;
  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;
  padding-left: 30px;
  line-height: 1.5;
}

.lp-form .field-cb input + span::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--lp-black);
  transition: background-color 0.2s;
}

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

.lp-form .field-cb input:checked + span::before {
  background: var(--lp-black);
}

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

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

.lp-form .field-cb a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-form a:focus-visible {
  outline-color: var(--lp-black);
}

/* 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;
  margin: 0;
  padding: 14px 24px;
  box-shadow: none;
  scale: none;
  border: 1px solid var(--lp-black);
  border-radius: 0;
  background: var(--lp-black);
  color: var(--lp-gold);
  font: 700 15px/1 var(--lp-font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.25s, color 0.25s;
}

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

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

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

.lp-form .lp-btn.sending {
  pointer-events: none;
  background: var(--lp-black) url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='%23d9a74a'%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 / 24px;
  color: transparent;
  opacity: 0.8;
}

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

.lp-form .form-output {
  order: 0;
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--lp-black);
  background: rgba(255, 255, 255, 0.3);
  font-size: 15px;
  line-height: 1.4;
}

.lp-form .form-output.is-success,
.lp-form .form-output.is-error {
  background: rgba(255, 255, 255, 0.3);
  color: var(--lp-black);
}

.lp-form .form-output.is-success {
  border-left-color: #1f6b2a;
}

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

/* desktop largo: título | Nome | Telefone | E-mail | Enviar numa faixa só, aceite embaixo */
@media (min-width: 1100px) {
  .lp-form {
    padding-top: calc(var(--lp-bar-half) + 36px);
    padding-bottom: 40px;
  }

  .lp-form__wrap {
    max-width: 1240px;
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: center;
    column-gap: 40px;
  }

  .lp-form__title {
    margin: 0;
    font-size: 26px;
    line-height: 1.1;
    text-align: left;
  }

  .lp-form__form {
    grid-template-columns: 1fr 1fr 1fr 170px;
    gap: 14px 24px;
  }

  .lp-form .lp-btn {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
  }

  .lp-form .field-cb {
    grid-column: 1 / span 3;
    grid-row: 2;
  }

  .lp-form .field-cb label {
    font-size: 13px;
  }
}

/* tablet: Nome | Telefone, E-mail inteiro, aceite | botão */
@media (max-width: 899px) {
  .lp-form__form {
    grid-template-columns: 1fr 1fr;
  }

  .lp-form .field-email {
    grid-column: 1 / -1;
  }

  .lp-form .field-cb {
    grid-column: auto;
  }
}

@media (max-width: 599px) {
  .lp-form__form {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lp-form .field-cb {
    margin-top: 4px;
  }
}

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