/* ==========================================================================
   Croire Engenharia e Consultoria — lp.css
   ==========================================================================
   Estilos EXCLUSIVOS das landing pages de teste A/B (Versão B):
   /lp/inspecoes/ e /lp/ensaios/.

   Carregado DEPOIS de base.css (que já importa tokens.css + componentes.css).
   Nada aqui altera as páginas do site (`/` e `/ensaios-tecnicos/`): todo
   seletor é prefixado `.lp-`, e as poucas classes reaproveitadas do base
   (.hero-media, .faq-*, .cookie, .btn, .eyebrow, .section-title, .container)
   só são sobrescritas dentro de um escopo `.lp-…`.

   Arquitetura de página propositalmente distinta da Versão A — é o que o
   teste mede. Mesma marca, mesmos tokens, outra composição.
   ========================================================================== */

/* ==========================================================================
   1. HEADER MÍNIMO — logo + CTA. Sem navegação (LP não vaza tráfego pago).
   ========================================================================== */
.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-h);
}
.lp-brand { display: flex; align-items: center; flex: 0 0 auto; }
.lp-brand img { width: auto; height: 34px; }

.lp-header-cta { padding-block: var(--space-3); }

@media (max-width: 900px) {
  .lp-brand img { height: 28px; }
}
@media (max-width: 560px) {
  .lp-header-inner { gap: var(--space-3); }
  .lp-brand img { height: 22px; }
  .lp-header-cta {
    padding: 10px var(--space-3);
    font-size: 0.8125rem;
    letter-spacing: 0;
  }
}
/* 320px COM barra de rolagem clássica sobra 305px de largura útil, e aí a linha
   do header (logo + "Solicitar orçamento", que é copy aprovada e não pode ser
   encurtada) estourava o container em 4px. Diferente das páginas do site, a LP
   não tem hambúrguer para onde empurrar o botão. Medido, não estético. */
@media (max-width: 380px) {
  .lp-header-inner { gap: var(--space-2); }
  .lp-brand img { height: 20px; }
  .lp-header-cta { padding: 9px 10px; font-size: 0.75rem; }
}

/* ==========================================================================
   2. HERO — full-bleed fullscreen com foto real e overlay.
   Composição própria da B: título + subtítulo corrido em duas colunas
   separadas por filete, CTA embaixo e microcopy SOB o botão.
   (A Versão A usa eyebrow + lista de apoios com losango + nota ao lado.)
   ========================================================================== */
.lp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100dvh - var(--header-h));
  overflow: hidden;
  background-color: var(--surface-inverse);
  color: var(--ink-inverse);
}
.lp-hero .hero-media img { object-position: 55% 45%; }

/* Overlay calibrado para a foto APARECER (hero de gradiente é proibido):
   leve no topo/direita, pesado só na faixa de baixo onde mora o texto. */
.lp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(18, 20, 46, .52) 0%, rgba(18, 20, 46, .10) 24%, rgba(18, 20, 46, .58) 56%, rgba(18, 20, 46, .95) 100%),
    linear-gradient(90deg, rgba(18, 20, 46, .58) 0%, rgba(18, 20, 46, .26) 58%, rgba(18, 20, 46, .06) 100%);
}

.lp-hero > .container {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Respiro inferior generoso: é ele que mantém o CTA **e a microcopy sob ele**
     acima do banner de cookies, fixo no canto inferior ESQUERDO. Na Versão B a
     microcopy fica ABAIXO do botão, então a folga precisa ser maior que a da
     Versão A (onde a nota fica ao lado). Medido, não estético. */
  padding-block: clamp(64px, 10vh, 112px) var(--hero-respiro);
  --hero-respiro: clamp(72px, 10vh, 120px);
  --hero-reserva: clamp(248px, 29vh, 276px);
}

.cookie-pendente .lp-hero > .container { padding-block-end: var(--hero-reserva); }

.lp-hero-head {
  display: grid;
  /* 8/4 e nao 7/5: com o H1 maior o titulo ficava em 6 linhas numa coluna
     estreita e empurrava o CTA para baixo do banner de cookies. Dar largura ao
     titulo tira linhas, que e o que realmente devolve altura. */
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  align-items: end;
}
.lp-hero-title {
  font-family: var(--font-display);
  /* Mesma escala do hero das páginas A: o teto subiu de 56px para 68px porque
     num hero fullscreen o título vinha pequeno demais. O mínimo segue contido
     (o H1 tem ~70 caracteres e no celular viraria muitas linhas). */
  font-size: clamp(1.75rem, 0.55rem + 5.6vw, 5.25rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  text-wrap: balance;
  max-width: 23ch;
}
/* especificidade 2: `.on-dark p{color:inherit}` de componentes.css venceria
   uma classe só, e o subtítulo perderia a hierarquia de tom */
.lp-hero .lp-hero-sub {
  position: relative;
  isolation: isolate;
  padding-left: clamp(var(--space-6), 2.4vw, var(--space-10));
  border-left: var(--border-width-hairline) solid var(--border-inverse-strong);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-inverse);
  max-width: 46ch;
  /* Contraste por glifo, que resolve o concreto claro sem depender só do véu
     atrás do texto (véu forte o bastante para o pior pixel lia como caixa). */
  text-shadow: 0 1px 2px rgba(18, 20, 46, .92), 0 0 14px rgba(18, 20, 46, .8);
}
/* O subtítulo cai na metade CLARA da foto, onde o overlay do hero vale só ~.38.
   Medido no pixel: o pior caso do concreto é branco puro, que exigiria alfa .83
   para 4.5:1. Em vez de escurecer a foto inteira, este scrim local (esfumado nas
   bordas, sem caixa visível) leva o alfa da faixa do texto a ~.85. */
.lp-hero .lp-hero-sub::before {
  content: "";
  position: absolute;
  inset: -2em -3.5em -2em -2em;
  z-index: -1;
  background: rgba(18, 20, 46, .46);
  /* A máscara elíptica de 100% 100% chega a transparente exatamente na borda de
     cada lado, então o scrim esfuma por completo e não vira caixa recortada. */
  -webkit-mask-image: radial-gradient(100% 100% at 44% 50%, #000 0%, #000 26%, transparent 100%);
  mask-image: radial-gradient(100% 100% at 44% 50%, #000 0%, #000 26%, transparent 100%);
  pointer-events: none;
}
.lp-hero-cta {
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
.lp-hero-note {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-inverse-muted);
}

@media (max-width: 900px) {
  .lp-hero-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  /* Empilhado, o subtítulo já cai na faixa escura do gradiente vertical: o
     scrim vira uma borda perceptível em vez de ajudar. Aqui ele é só um véu
     sem platô, que esfuma desde o centro. */
  .lp-hero .lp-hero-sub::before {
    inset: -1em -1.5em;
    background: rgba(18, 20, 46, .55);
    -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 0%, transparent 100%);
    mask-image: radial-gradient(100% 100% at 50% 50%, #000 0%, transparent 100%);
  }
  .lp-hero .lp-hero-sub {
    padding-left: 0;
    padding-top: var(--space-6);
    border-left: 0;
    border-top: var(--border-width-hairline) solid var(--border-inverse-strong);
  }
}

/* Viewport baixo (notebook 1200x800 / 1280x720): o hero não cabe em 100dvh
   com o título longo, e o CTA desceria até a faixa do banner de cookies. */
@media (min-width: 561px) and (max-height: 950px) {
  .lp-hero > .container { padding-block: var(--space-8) var(--hero-respiro); --hero-respiro: var(--space-16); --hero-reserva: clamp(242px, 30vh, 262px); }
  .lp-hero-title { font-size: clamp(1.875rem, 0.7rem + 5vw, 5.25rem); max-width: 19ch; }
  .lp-hero .lp-hero-sub { font-size: var(--text-base); }
  .lp-hero-cta { margin-top: var(--space-6); gap: var(--space-3); }
}
@media (min-width: 561px) and (max-height: 820px) {
  .lp-hero > .container { padding-block: var(--space-6) var(--hero-respiro); --hero-respiro: var(--space-12); --hero-reserva: clamp(232px, 31vh, 248px); }
  .lp-hero-title { font-size: clamp(1.625rem, 0.6rem + 3.9vw, 4rem); }
}

/* Celular: o hero é comprimido de propósito. Aqui o banner de cookies vira
   faixa full-width no rodapé (~130px) e, se o bloco de texto crescer, o CTA
   passa a nascer ATRÁS dela — padding inferior não resolve, porque o banner é
   fixo na viewport e o hero só cresce para baixo. O que resolve é o texto
   acima do CTA caber. Medido em 320x568 e 360x640. */
@media (max-width: 560px) {
  .lp-hero > .container { padding-block: var(--space-5) var(--hero-respiro); --hero-respiro: var(--space-14, 56px); --hero-reserva: clamp(160px, 26vh, 190px); }
  .lp-hero-head { gap: var(--space-4); }
  .lp-hero-title { font-size: 1.8125rem; max-width: none; }
  .lp-hero .lp-hero-sub { font-size: 0.875rem; line-height: 1.45; padding-top: var(--space-4); }
  .lp-hero-cta { margin-top: var(--space-5); gap: var(--space-2); justify-items: stretch; }
  .lp-hero-cta .btn { width: 100%; }
  .lp-hero-note { text-align: center; }
}

/* Celular BAIXO (320x568): mesma razão da faixa equivalente do base.css. Aqui
   pesa também a microcopy, que na Versão B fica SOB o botão. */
@media (max-width: 560px) and (max-height: 700px) {
  .lp-hero > .container { padding-block: var(--space-4) var(--hero-respiro); --hero-respiro: var(--space-10); --hero-reserva: clamp(140px, 24vh, 164px); }
  .lp-hero-title { font-size: 1.375rem; }
  .lp-hero .lp-hero-sub { font-size: 0.8125rem; line-height: 1.4; padding-top: var(--space-3); }
  .lp-hero-cta { margin-top: var(--space-4); }
}

/* ==========================================================================
   3. CLIENTES — duas faixas de logos em direções opostas
   (a Versão A usa uma única faixa)
   ========================================================================== */
.lp-clients {
  padding-block: var(--space-section-sm);
  background-color: var(--surface-raised);
  border-block: var(--border-width-hairline) solid var(--border);
}
.lp-clients-head { display: grid; gap: var(--space-4); }
.lp-clients-head .section-title { font-size: var(--text-h3); max-width: 26ch; text-wrap: balance; }

.lp-marquee {
  display: block;
  margin-top: var(--space-8);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.lp-marquee + .lp-marquee { margin-top: var(--space-6); }

.lp-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  width: max-content;
  animation: lp-marquee-left 46s linear infinite;
}
.lp-marquee--reverse .lp-marquee-track { animation-name: lp-marquee-right; animation-duration: 52s; }

.lp-marquee:hover .lp-marquee-track,
.lp-marquee:focus-within .lp-marquee-track { animation-play-state: paused; }

.lp-marquee-track li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 60px;
}
.lp-marquee-track img {
  width: auto;
  max-height: 52px;
  max-width: 124px;
  object-fit: contain;
  /* multiply apaga o fundo branco dos logos que vieram com caixa */
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}
.lp-marquee-track img:hover { filter: grayscale(0); opacity: 1; }

@keyframes lp-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes lp-marquee-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-marquee-track { animation: none; }
  .lp-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   4. PROBLEMA — o acréscimo central da Versão B.
   Faixa navy full-bleed com foto real ao fundo, tipografia grande e ritmo
   editorial de parágrafo: lede, frase de impacto e a resposta da Croire
   destacada por régua dourada.
   ========================================================================== */
.lp-problem {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
  background-color: var(--surface-inverse);
  color: var(--ink-inverse);
}
/* wrapper de mídia sempre display:block (overflow/clip não valem em inline) */
.lp-problem-media {
  position: absolute;
  inset: -12% 0;
  display: block;
  z-index: 0;
}
.lp-problem-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
/* ≤1100px o texto ocupa a largura toda, então o overlay é pesado no corpo e
   deixa a foto respirar só no topo da faixa. */
.lp-problem-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18, 20, 46, .48) 0%, rgba(18, 20, 46, .90) 34%, rgba(18, 20, 46, .96) 100%);
}
/* ≥1101px o bloco editorial vive em 76% da largura e a foto real aparece,
   de verdade, na faixa da direita. */
@media (min-width: 1101px) {
  .lp-problem-inner { max-width: 76%; }
  .lp-problem-overlay {
    background:
      linear-gradient(100deg, rgba(18, 20, 46, .97) 0%, rgba(18, 20, 46, .95) 56%, rgba(18, 20, 46, .84) 74%, rgba(18, 20, 46, .38) 92%, rgba(18, 20, 46, .26) 100%),
      linear-gradient(180deg, rgba(18, 20, 46, .40) 0%, rgba(18, 20, 46, 0) 34%, rgba(18, 20, 46, .48) 100%);
  }
}
.lp-problem > .container { position: relative; z-index: 2; }

.lp-problem-title {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.35rem + 3.5vw, 4rem);
  font-weight: var(--weight-bold);
  line-height: 1.06;
  letter-spacing: var(--tracking-tightest);
  text-wrap: balance;
  max-width: 19ch;
}

.lp-problem-grid {
  margin-top: clamp(var(--space-10), 4vw, var(--space-16));
  padding-top: clamp(var(--space-8), 3vw, var(--space-12));
  border-top: var(--border-width-hairline) solid var(--border-inverse);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}
.lp-problem-grid--single { grid-template-columns: minmax(0, 1fr); }
.lp-problem .lp-problem-grid--single .lp-problem-lede { max-width: 68ch; }

.lp-problem .lp-problem-lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-inverse-muted);
  max-width: 58ch;
}
.lp-problem-pull {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-inverse);
  max-width: 34ch;
}
.lp-problem-pull::before {
  content: '';
  display: block;
  width: var(--space-10);
  height: var(--border-width-thick);
  margin-bottom: var(--space-5);
  background-color: var(--accent);
}

.lp-problem-answer {
  margin-top: clamp(var(--space-10), 4vw, var(--space-16));
  padding-left: clamp(var(--space-6), 2.4vw, var(--space-10));
  border-left: var(--border-width-thick) solid var(--accent);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--ink-inverse);
  max-width: 62ch;
}

@media (max-width: 900px) {
  .lp-problem-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
}

/* ==========================================================================
   5. SERVIÇOS — bento assimétrico de células coladas por filete, duas delas
   com foto real. (A Versão A usa lista editorial numerada + coluna sticky.)
   Sem ícones, sem grade uniforme de "número + título + parágrafo".
   ========================================================================== */
.lp-services { padding-block: var(--space-section); background-color: var(--surface); }
.lp-services-head .section-title { max-width: 22ch; }

.lp-svc-grid {
  margin-top: clamp(var(--space-10), 4vw, var(--space-16));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--border-width-hairline);
  background-color: var(--border);
  border: var(--border-width-hairline) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Bento 1 (LP Inspeções): 4+2 / 2+4 / 3+3 — nenhuma linha órfã */
.lp-svc-grid--a .lp-svc:nth-child(1) { grid-column: span 4; }
.lp-svc-grid--a .lp-svc:nth-child(2) { grid-column: span 2; }
.lp-svc-grid--a .lp-svc:nth-child(3) { grid-column: span 2; }
.lp-svc-grid--a .lp-svc:nth-child(4) { grid-column: span 4; }
.lp-svc-grid--a .lp-svc:nth-child(5) { grid-column: span 3; }
.lp-svc-grid--a .lp-svc:nth-child(6) { grid-column: span 3; }

/* Bento 2 (LP Ensaios): espelhado — 2+4 / 4+2 / 3+3 */
.lp-svc-grid--b .lp-svc:nth-child(1) { grid-column: span 2; }
.lp-svc-grid--b .lp-svc:nth-child(2) { grid-column: span 4; }
.lp-svc-grid--b .lp-svc:nth-child(3) { grid-column: span 4; }
.lp-svc-grid--b .lp-svc:nth-child(4) { grid-column: span 2; }
.lp-svc-grid--b .lp-svc:nth-child(5) { grid-column: span 3; }
.lp-svc-grid--b .lp-svc:nth-child(6) { grid-column: span 3; }

.lp-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-6), 2.2vw, var(--space-10));
  background-color: var(--surface-raised);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.lp-svc:hover { background-color: var(--concrete-200); }
.lp-svc::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--border-width-thick);
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-out);
}
.lp-svc:hover::before { transform: scaleX(1); }

.lp-svc-media {
  display: block;
  margin-bottom: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.lp-svc-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.lp-svc-index {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  letter-spacing: var(--tracking-widest);
  color: var(--accent-technical-strong);
}
.lp-svc-title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  color: var(--brand);
  text-wrap: balance;
}
.lp-svc-text { color: var(--ink-muted); max-width: 60ch; }

@media (max-width: 900px) {
  .lp-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-svc-grid--a .lp-svc:nth-child(n),
  .lp-svc-grid--b .lp-svc:nth-child(n) { grid-column: auto; }
}
@media (max-width: 640px) {
  .lp-svc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   6. PARA QUEM É — faixa de foto full-width + lista editorial com sweep
   (a Versão A usa split com letra-índice A–F sobre navy). Sem pills.
   ========================================================================== */
.lp-audience { padding-block: var(--space-section); background-color: var(--surface-alt); }
.lp-audience-head .section-title { max-width: 24ch; }

.lp-audience-band {
  display: block;
  position: relative;
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.lp-audience-band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 55%;
}
.lp-audience-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-6);
  background: linear-gradient(180deg, rgba(18, 20, 46, 0), rgba(18, 20, 46, .88));
  font-size: var(--text-sm);
  color: var(--ink-inverse);
}

.lp-audience-list {
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  border-top: var(--border-width-hairline) solid var(--border-strong);
}
.lp-audience-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding-block: clamp(var(--space-4), 1.6vw, var(--space-6));
  border-bottom: var(--border-width-hairline) solid var(--border);
  isolation: isolate;
  transition: padding-left var(--duration-base) var(--ease-standard);
}
.lp-audience-row::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--container-pad));
  z-index: -1;
  background-color: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-out);
}
.lp-audience-row:hover::before { transform: scaleX(1); }
.lp-audience-row:hover { padding-left: var(--space-5); }

.lp-audience-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, .95rem + 1vw, 1.875rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  color: var(--brand);
  transition: color var(--duration-base) var(--ease-standard);
}
.lp-audience-arrow {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  color: var(--accent-technical-strong);
  transition: transform var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.lp-audience-row:hover .lp-audience-name { color: var(--ink-inverse); }
.lp-audience-row:hover .lp-audience-arrow { transform: translateX(6px); color: var(--accent); }

@media (max-width: 700px) {
  .lp-audience-band img { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   7. SOBRE — banner largo + os três parágrafos em ritmo de 3 colunas
   (a Versão A usa split texto + foto emoldurada com credencial)
   ========================================================================== */
.lp-about { padding-block: var(--space-section); background-color: var(--surface); }
.lp-about-head .section-title { max-width: 22ch; }

.lp-about-media {
  display: block;
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: var(--border-width-hairline) solid var(--border);
}
.lp-about-media img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: 50% 45%;
}

.lp-about-cols {
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-6), 3vw, var(--space-12));
}
.lp-about-col {
  padding-top: var(--space-6);
  border-top: var(--border-width-thick) solid var(--border-strong);
  color: var(--ink-muted);
}
.lp-about-col:first-child {
  border-top-color: var(--accent);
  color: var(--ink);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

@media (max-width: 900px) {
  .lp-about-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .lp-about-media img { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   8. FAQ — acordeão de coluna única com índice mono
   (a Versão A usa coluna sticky de 360px + lista ao lado)
   ========================================================================== */
.lp-faq { padding-block: var(--space-section); background-color: var(--surface-alt); }
.lp-faq-head .section-title { max-width: 24ch; }

.lp-faq-list {
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  max-width: 62rem;
  border-top: var(--border-width-hairline) solid var(--border-strong);
}
.lp-faq-list .faq-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-5);
  font-size: var(--text-h4);
}
.lp-faq-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  letter-spacing: var(--tracking-widest);
  color: var(--accent-technical-strong);
  line-height: 2;
  transition: color var(--duration-base) var(--ease-standard);
}
.lp-faq-list .faq-item.is-open .lp-faq-num { color: var(--brand); }
.lp-faq-list .faq-panel p { padding-left: calc(var(--space-8) + var(--space-2)); max-width: 76ch; }

@media (max-width: 560px) {
  .lp-faq-list .faq-trigger { gap: var(--space-3); font-size: var(--text-xl); }
  .lp-faq-list .faq-panel p { padding-left: 0; }
}

/* ==========================================================================
   9. CTA FINAL — fecho navy de promessa: título grande, botão e microcopy
   sob ele. (A Versão A fecha com o passo a passo "Como funciona".)
   ========================================================================== */
.lp-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
}
.lp-cta-deco {
  position: absolute;
  right: -8%;
  top: 50%;
  translate: 0 -50%;
  width: min(560px, 52vw);
  opacity: .18;
  pointer-events: none;
}
.lp-cta > .container { position: relative; z-index: 1; }
.lp-cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.35rem + 3.5vw, 4rem);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  letter-spacing: var(--tracking-tightest);
  text-wrap: balance;
  max-width: 20ch;
  color: var(--ink-inverse);
}
.lp-cta-actions {
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
.lp-cta-note {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-inverse-muted);
}
@media (max-width: 900px) {
  .lp-cta-deco { display: none; }
}
@media (max-width: 560px) {
  .lp-cta-actions { justify-items: stretch; gap: var(--space-3); }
  .lp-cta-actions .btn { width: 100%; }
  .lp-cta-note { text-align: center; }
}

/* ==========================================================================
   10. RODAPÉ ENXUTO — telefone, razão social, crédito e UM link (privacidade)
   ========================================================================== */
.lp-footer {
  background-color: var(--brand-strong);
  color: var(--ink-inverse);
  padding-block: var(--space-12) var(--space-8);
}
.lp-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-10);
}
.lp-footer-brand img { width: auto; height: 42px; border-radius: var(--radius-xs); }
.lp-footer-phone {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  font-variant-numeric: var(--numeral-variant);
  color: var(--ink-inverse);
  transition: color var(--duration-fast) var(--ease-standard);
}
.lp-footer-phone:hover { color: var(--accent); }

.lp-footer-bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--border-inverse);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink-inverse-muted);
}
.lp-footer-bottom a { color: var(--ink-inverse-muted); text-decoration: underline; text-underline-offset: 3px; }
.lp-footer-bottom a:hover { color: var(--ink-inverse); }