@charset "UTF-8";
/* ============================================================================
   GESTORCAR — Landing Page
   Figma: GESTORCAR - REDESIGN LAYOUT · node 33381:2125 (1440 x 9688)

   Folha própria da landing page. Não substitui style.css: as páginas internas
   (contato, blog, serviços…) continuam no Bootstrap + style.css. Todo seletor
   daqui usa o prefixo `lp-`, então os dois convivem sem colisão.

   Sumário
     01 Tokens .................. variáveis do Figma (get_variable_defs)
     02 Fontes .................. @font-face auto-hospedado
     03 Base .................... reset mínimo e ajustes de documento
     04 Layout .................. container, seção, grades
     05 Tipografia .............. escala de títulos e corpo
     06 Componentes ............. botões, bullets, selo, marquee, accordion
     07 Header .................. barra pílula + navegação mobile
     08 Seções .................. hero, painéis, planos, órbita, FAQ, CTA
     09 Rodapé
     10 Motion .................. keyframes e prefers-reduced-motion
   ========================================================================= */


/* ============================================================================
   01 TOKENS — valores lidos do Figma, não aproximados.
   Os `--lp-color-*` recebem fallback do painel: MY_Controller emite
   `--color-brand` etc. a partir de crm_companies_sites.color_customizations,
   então trocar a cor no painel repinta a landing sem deploy.
   ========================================================================= */
:root {
  /* — cor ————————————————————————————————————————————————— */
  --lp-brand:            var(--color-brand, #09e968);
  --lp-brand-hover:      var(--color-brand-hover, #06c86c);
  --lp-brand-contrast:   var(--color-brand-contrast, #0a0a0a);
  --lp-ink:              var(--color-ink, #1a1a1a);
  --lp-ink-muted:        var(--color-ink-muted, #757575);
  --lp-ink-soft:         #8e8e93;          /* pricing-subtitle */
  /* Par escuro do `ink-muted`. O #757575 foi calibrado para texto sobre o
     branco (4.62:1, passa em AA). Sobre o preto do rodape ele cai para
     4.30:1 e reprova — nao da para usar o mesmo cinza nas duas pontas.
     Este da 7.85:1 sobre #0a0a0a e continua lendo como secundario. */
  --lp-ink-muted-dark:   #a3a3a3;
  --lp-line:             var(--color-line, #cbcbcb);
  --lp-line-soft:        #d9d9d9;          /* separador dos bullet-points */
  --lp-line-button:      #e3e3e3;          /* borda do botão outline no hero */
  --lp-surface:          var(--color-surface, #ffffff);
  --lp-surface-alt:      var(--color-surface-alt, #f5f5f5);

  /* — espaçamento —————————————————————————————————————————— */
  --lp-space-1: 8px;
  --lp-space-2: 16px;
  --lp-space-3: 24px;
  --lp-space-4: 32px;
  --lp-space-6: 48px;
  --lp-space-8: 64px;

  /* — raio ————————————————————————————————————————————————— */
  --lp-radius-full:  999px;
  --lp-radius-card:  32px;
  --lp-radius-panel: 17px;
  --lp-radius-pill:  90px;

  /* — tipografia ——————————————————————————————————————————— */
  --lp-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --lp-font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* — sombra ———————————————————————————————————————————————
     Token "sombra" do Figma: 8 camadas empilhadas. É o que dá aos painéis
     de produto a impressão de flutuar sem contorno duro. */
  --lp-shadow-panel:
    0 1.993px 1.595px rgba(0, 0, 0, .02),
    0 4.529px 3.623px rgba(0, 0, 0, .02),
    0 7.882px 6.306px rgba(0, 0, 0, .03),
    0 12.522px 10.017px rgba(0, 0, 0, .04),
    0 19.32px 15.456px rgba(0, 0, 0, .04),
    0 30.147px 24.118px rgba(0, 0, 0, .05),
    0 50.049px 40.039px rgba(0, 0, 0, .05),
    0 100px 80px rgba(0, 0, 0, .07);

  /* — motion ———————————————————————————————————————————————
     Curvas herdadas do handoff (index.html :root). */
  --lp-ease-out:   cubic-bezier(.23, 1, .32, 1);
  --lp-ease-inout: cubic-bezier(.65, 0, .35, 1);

  /* — métricas de layout ——————————————————————————————————— */
  --lp-container:  1296px;   /* conteúdo padrão, gutter de 72px em 1440 */
  --lp-container-narrow: 1077px; /* gancho, leads e FAQ */
  --lp-header-h:   109px;
}


/* ============================================================================
   02 FONTES
   Ambas são fontes variáveis: um arquivo por subset cobre toda a faixa de
   pesos, então `font-weight: 300 700` evita baixar um arquivo por peso.
   `font-display: optional` é exigência do contrato de performance do projeto
   (seusite.md): sem troca de fonte depois da primeira pintura, sem CLS.
   ========================================================================= */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk/space-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans/dm-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans/dm-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================================
   03 BASE
   ========================================================================= */
.lp *,
.lp *::before,
.lp *::after { box-sizing: border-box; }

.lp {
  margin: 0;
  background: var(--lp-surface);
  color: var(--lp-ink);
  font-family: var(--lp-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Rede de segurança contra rolagem lateral.
     A página tem várias seções full-bleed, e qualquer elemento que fure a
     viewport (um `100vw` que conta a barra de rolagem, um texto com
     `nowrap`…) faz o documento INTEIRO rolar de lado — e aí o fundo das
     seções, que só cobre a largura da viewport, deixa faixa branca ao lado.
     `clip` e não `hidden`: `hidden` criaria um contêiner de rolagem e
     quebraria `position: sticky` e o scroll suave das âncoras.
     Isto é rede, não licença — o transbordo continua sendo bug e deve ser
     corrigido na origem. */
  overflow-x: clip;
}

/* `:where()` zera a especificidade destes padrões, então qualquer regra de
   componente (`.lp-hero__img`, `.lp-renave__media img`…) vence sem precisar
   de `!important`. Com `.lp img { … }` cru, a regra base tinha especificidade
   maior que uma classe e sobrescrevia silenciosamente as alturas dos
   componentes — foi o que achatou o hero e a faixa RENAVE. */
.lp :where(img, svg) { max-width: 100%; }

.lp :where(img) {
  height: auto;
  display: block;
}

/* <picture> é inline por padrão e não repassa altura para a <img> dentro. */
.lp :where(picture) { display: block; }

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

.lp :focus-visible {
  outline: 3px solid var(--lp-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Alvo de âncora não pode ficar embaixo do header fixo. */
.lp [id] { scroll-margin-top: calc(var(--lp-header-h) + 24px); }

/* Rolagem suave nos links de âncora do menu.
   Fica na media query em vez de solto: `scroll-behavior: smooth` incondicional
   ignora quem pediu menos movimento, e para essas pessoas o salto instantâneo
   é o comportamento correto. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.lp) { scroll-behavior: smooth; }
}

/* Some da tela mas continua legível para leitor de tela. */
.lp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================================
   04 LAYOUT
   ========================================================================= */
.lp-container {
  width: 100%;
  max-width: var(--lp-container);
  margin-inline: auto;
  padding-inline: 24px;
}

.lp-container--narrow { max-width: var(--lp-container-narrow); }

.lp-section { padding-block: 96px; }
.lp-section--tight { padding-block: 64px; }
.lp-section--alt { background: var(--lp-surface-alt); }

/* Painel de produto + coluna de texto lado a lado (seções 3, 4 e 5).
   64px de gap é o valor do Figma; a coluna de texto tem 450px fixos e o
   painel ocupa o resto. */
.lp-split {
  display: grid;
  grid-template-columns: 450px minmax(0, 1fr);
  gap: var(--lp-space-8);
  align-items: center;
}
.lp-split--reverse { grid-template-columns: minmax(0, 1fr) 450px; }

@media (max-width: 991px) {
  .lp-split,
  .lp-split--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  /* No mobile o texto sempre vem antes do painel, mesmo na variante invertida. */
  .lp-split--reverse > .lp-split__media { order: 2; }
  .lp-split--reverse > .lp-split__text  { order: 1; }
}


/* ============================================================================
   05 TIPOGRAFIA
   Escala do Figma. `clamp()` interpola até o tamanho de desktop — o valor
   máximo é sempre o número exato do arquivo.
   ========================================================================= */
.lp-h1,
.lp-h2 {
  font-family: var(--lp-font-display);
  font-weight: 300;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

/* heading/h1 — 55px, letter-spacing 0.
   Peso 700, não os 300 do token `heading/h1`: o nó real do hero no Figma
   (33381:2198) usa Space Grotesk **Bold**. O token descreve a escala de
   tamanho, o nó é quem manda no peso.
   700 é o topo do eixo variável da Space Grotesk — pedir 900 não deixa mais
   pesado, o navegador apenas limita a 700 e o resultado é idêntico. Para um
   preto de verdade seria preciso outra família (a Archivo, que o handoff
   carrega como display, vai até 900). */
.lp-h1 {
  font-size: clamp(2.25rem, 1.35rem + 3.9vw, 3.4375rem);
  font-weight: 700;
}

/* heading/h2Lg — 55px / -2.5%   ·  h2Md — 45px / -2.5%  ·  h2Sm — 36px / 0 */
.lp-h2--lg { font-size: clamp(2.125rem, 1.35rem + 3.4vw, 3.4375rem); letter-spacing: -.025em; }
.lp-h2--md { font-size: clamp(1.875rem, 1.4rem + 2.1vw, 2.8125rem);  letter-spacing: -.025em; }
.lp-h2--sm { font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);    letter-spacing: 0; }

/* No Figma, a segunda metade de cada título vem em Bold — é o recurso de
   ênfase do layout inteiro. */
.lp-h1 strong,
.lp-h2 strong { font-weight: 700; }

.lp-lead {
  font-size: 1.125rem;   /* body/lead 18 */
  line-height: 1.5;
  margin: 0;
}

.lp-body {
  font-size: 1rem;       /* body/base 16 */
  line-height: 1.5;
  margin: 0;
  color: var(--lp-ink-muted);
}

.lp-body--sm { font-size: .9375rem; }  /* body/sm 15 */

.lp-label {
  font-size: .875rem;    /* label/base 14 SemiBold */
  font-weight: 600;
  letter-spacing: -.025em;
}


/* ============================================================================
   06 COMPONENTES
   ========================================================================= */

/* — botão ————————————————————————————————————————————————— */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-1);
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--lp-radius-full);
  font-family: var(--lp-font-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .2s var(--lp-ease-out),
              border-color .2s var(--lp-ease-out),
              color .2s var(--lp-ease-out);
}

/* `.lp a { color: inherit }` tem especificidade (0,1,1) e vencia este
   seletor — o CTA no hero herdava branco do `.lp-hero__content`. */
.lp a.lp-btn--brand,
.lp-btn--brand {
  background: var(--lp-brand);
  color: var(--lp-brand-contrast);
}
.lp a.lp-btn--brand:hover,
.lp-btn--brand:hover { background: var(--lp-brand-hover); }

/* Outline sobre a foto do hero: borda clara e texto branco. */
.lp-btn--outline {
  background: transparent;
  border-color: var(--lp-line-button);
  color: var(--lp-surface);
  padding-block: 8px;
  min-height: 44px;
}
.lp-btn--outline:hover {
  background: var(--lp-surface);
  color: var(--lp-ink);
}

/* Outline sobre fundo claro (cards de plano). */
.lp-btn--ghost {
  background: var(--lp-surface);
  border-color: var(--lp-line);
  color: var(--lp-ink);
  padding-block: 8px;
  min-height: 50px;
}
.lp-btn--ghost:hover { border-color: var(--lp-ink); }

.lp-btn--block { width: 100%; }

.lp-btn__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* — lista de bullets com ícone ————————————————————————————
   Nas seções 3 a 6. `<ul>` semântico: cada item é um recurso do produto e
   precisa ser lido como lista. O separador é um border-top no item seguinte,
   não um elemento vazio — assim não entra na contagem do leitor de tela. */
.lp-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-bullets__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: var(--lp-space-2);
  color: var(--lp-ink-muted);
  font-size: 1rem;
  line-height: 1.5;
}
.lp-bullets__item + .lp-bullets__item { border-top: 1px solid var(--lp-line-soft); }
.lp-bullets__item:first-child { padding-top: 0; }
.lp-bullets__item:last-child  { padding-bottom: 0; }

.lp-bullets__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--lp-ink);
}

/* — painel de produto ————————————————————————————————————
   Moldura fixa que recorta a recriação animada. O `contain` evita que o
   conteúdo interno force reflow do resto da página a cada quadro. */
.lp-panel {
  position: relative;
  /* `width` explícito porque o painel também vive dentro de flex com
     `align-items: center` (a seção do gancho): ali o item encolhe para o
     conteúdo, e a recriação interna, que é `width: 100%`, resolvia para zero. */
  width: 100%;
  align-self: stretch;
  border-radius: var(--lp-radius-panel);
  overflow: hidden;
  box-shadow: var(--lp-shadow-panel);
  background: var(--lp-surface);
  contain: layout paint style;
}

.lp-panel__media {
  display: block;
  width: 100%;
  height: auto;
}

/* Painel com a recriação animada dentro (lp-panels.css).
   A moldura e a sombra ali já vêm do protótipo (`filter: drop-shadow` no
   .app-scale-wrap), então aqui o container fica neutro para as duas sombras
   não se somarem. */
.lp-panel--live {
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  /* `contain: paint` recortaria a sombra do protótipo. */
  contain: layout style;

  /* NÃO usar `content-visibility: auto` aqui. Foi tentado para aliviar a
     thread principal (são quatro interfaces de ~250 nós cada), mas os
     painéis usam `transform: scale()` dimensionado por ResizeObserver, e
     pular a renderização deixava o painel em branco ao entrar na tela numa
     rolagem rápida. Painel vazio é pior que painel caro. */
}

/* — marquee de logos ——————————————————————————————————————
   Duas faixas em sentidos opostos (Figma: Frame 1000006794 / 6795).
   A trilha é duplicada no HTML e desloca -50%, o que faz o loop emendar. */
.lp-marquee {
  overflow: hidden;
  /* Folga vertical dentro do recorte. `overflow: hidden` corta na borda da
     caixa de padding, então esses 6px garantem que a borda de 1px e o
     arredondamento dos cartões nunca encostem na linha de corte — sem eles,
     a altura fracionária da trilha fazia o subpixel comer a borda de baixo. */
  padding-block: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lp-marquee__track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: lp-marquee-left 60s linear infinite;
  will-change: transform;
}
.lp-marquee--reverse .lp-marquee__track { animation-name: lp-marquee-right; }

/* Pausa quando a seção sai da tela — o observer põe a classe. */
.lp-marquee.is-paused .lp-marquee__track { animation-play-state: paused; }

.lp-marquee__item {
  flex: 0 0 196px;
  /* Inteiro, não os 119,5px do Figma: altura fracionária num contêiner
     recortado deixa a borda inferior na mão do arredondamento de subpixel. */
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-panel);
}

.lp-marquee__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* — accordion do FAQ ——————————————————————————————————————
   <details>/<summary> nativos: abre sem JS, é acessível por teclado de
   fábrica e o conteúdo continua no DOM para o Google indexar. */
.lp-accordion { border-top: 1px solid var(--lp-line-soft); }

.lp-accordion__item { border-bottom: 1px solid var(--lp-line-soft); }

.lp-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-2);
  padding-block: var(--lp-space-2);
  font-size: 1.125rem;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
.lp-accordion__question::-webkit-details-marker { display: none; }

.lp-accordion__sign {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
/* Traço horizontal sempre; o vertical some quando o item abre — vira o "−". */
.lp-accordion__sign::before,
.lp-accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
}
.lp-accordion__sign::after {
  inset: 0 50% auto auto;
  width: 2px;
  height: 100%;
  transform: translateX(50%);
  transition: opacity .2s var(--lp-ease-out);
}
.lp-accordion__item[open] .lp-accordion__sign::after { opacity: 0; }

.lp-accordion__answer {
  padding-bottom: var(--lp-space-2);
  color: var(--lp-ink-muted);
  max-width: 80ch;
}


/* ============================================================================
   07 HEADER — Figma 33381:2495
   Barra pílula flutuante sobre a foto do hero.
   ========================================================================= */
.lp-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  padding-block: var(--lp-space-2);
}

.lp-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-3);
  padding: var(--lp-space-2) var(--lp-space-4);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-pill);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.lp-header__logo {
  display: block;
  width: 180px;
  flex: 0 0 180px;
  color: var(--lp-ink);
}

/* Logomarca do header (33381:2498): três peças vetoriais posicionadas por
   porcentagem dentro de uma caixa de 180x37.5. A proporção fica travada no
   contêiner, então a caixa já nasce com a altura certa — sem salto de layout
   enquanto os SVGs carregam. */
.lp-logo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 180 / 37.5;
}

/* Cada peça é um <span> posicionado pelos quatro `inset` do arquivo.
   O `inset` precisa cair num elemento NÃO substituído: numa <img> o
   `width: auto` resolveria para o tamanho intrínseco do SVG em vez da caixa,
   e as três peças se sobreporiam. */
.lp-logo__part {
  position: absolute;
  display: block;
}

.lp-logo__part img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lp-logo__gestor { top: 0;     right: 34.56%; bottom: 31.86%; left: 0;      }
.lp-logo__car    { top: 1.13%; right: 0;      bottom: 31.86%; left: 65.93%; }
.lp-logo__cdw    { top: 75.3%; right: 4.02%;  bottom: 0;      left: 52.94%; }

.lp-header__nav {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3);
}

.lp-header__link {
  font-size: .875rem;
  font-weight: 700;
  color: var(--lp-ink);
  white-space: nowrap;
}
.lp-header__link:hover { color: var(--lp-brand-hover); }

.lp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--lp-space-2);
}

/* O par "Área do Cliente" + CTA existe duas vezes no HTML: aqui, na barra
   (desktop), e dentro do menu (mobile, onde a barra fica só com logo e
   hambúrguer). Só um dos dois pode aparecer por vez — sem esta regra os
   dois se somam e o header mostra os botões em duplicidade. */
.lp-header__nav-actions { display: none; }

.lp-header__account {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-1);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.025em;
  white-space: nowrap;
}

/* Botão hambúrguer — só existe abaixo de 1200px. */
.lp-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

@media (max-width: 1199px) {
  .lp-header__nav,
  .lp-header__account { display: none; }
  .lp-header__toggle  { display: inline-flex; }

  /* Menu aberto: painel abaixo da pílula, sem overlay de tela cheia. */
  .lp-header__nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lp-space-2);
    position: absolute;
    inset: calc(100% + 8px) 0 auto;
    padding: var(--lp-space-3);
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-panel);
    box-shadow: var(--lp-shadow-panel);
  }
}


/* ============================================================================
   08 SEÇÕES
   ========================================================================= */

/* — Fundos em degradê verde — Figma 33381:2222 e 33381:2224 ———
   Dois retângulos full-bleed no arquivo, com o verde da marca esmaecendo
   para branco: um com o verde EM CIMA e cantos superiores de 100px, outro
   espelhado, com o verde EMBAIXO.

   São imagens exportadas do arquivo (reamostradas para 360px e salvas em
   WebP: 700 e 1068 bytes) e não `linear-gradient`, porque o degradê do
   arquivo tem viés diagonal — é mais forte num canto — e reproduzir isso em
   CSS ficaria aproximado e ainda mais pesado. Degradê suave reescala sem
   artefato, então 360px de largura bastam.

   O `::before` sangra de ponta a ponta descontando a barra de rolagem, pelo
   mesmo motivo da seção da órbita: `100vw` a inclui e criaria rolagem
   lateral na página inteira. */
.lp-section--grad-top,
.lp-section--grad-bottom {
  position: relative;
  isolation: isolate;
}

/* O de cima usa `::before` e o de baixo `::after`, para a MESMA seção poder
   ter os dois — é o caso dos Planos, que no arquivo tem verde entrando por
   cima e por baixo, com os cards no branco do meio. */
.lp-section--grad-top::before,
.lp-section--grad-bottom::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - (100vw - var(--lp-scrollbar, 0px)) / 2);
  width: calc(100vw - var(--lp-scrollbar, 0px));
  /* Cada metade cobre 60% da altura: as duas se sobrepõem de leve no miolo,
     onde ambas já são brancas, então a emenda não aparece. */
  height: 60%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.lp-section--grad-top::before {
  top: 0;
  background-image: url("../images/lp/grad-top.webp");
  border-radius: 100px 100px 0 0;
}

.lp-section--grad-bottom::after {
  bottom: 0;
  background-image: url("../images/lp/grad-bottom.webp");
  border-radius: 0 0 100px 100px;
}


/* — 01 Hero — Figma 33381:2196 + 33381:2197 ————————————————
   Altura reservada em aspect-ratio para não gerar CLS: a imagem é 1440x860.
   O handoff (01-hero.html) encolhe e arredonda a foto no scroll; as duas
   propriedades animadas são lidas de variáveis CSS escritas pelo JS, para o
   estado inicial já sair certo do servidor. */
.lp-hero {
  position: relative;
  /* Fallback para quem nao entende svh: a altura do Figma (1440x860). */
  min-height: 860px;
  /* O hero ocupa a tela inteira, seja qual for o aparelho — sem altura fixa
     e sem proporcao.

     `svh` (small viewport height) e nao `vh` nem `dvh`: no celular o `vh`
     ignora a barra de endereco e o hero nasce maior que o visivel; o `dvh`
     muda de valor conforme a barra recolhe durante o scroll, e como o hero
     encolhe no scroll (initHero) isso somaria dois movimentos concorrentes.
     O `svh` e estavel do primeiro quadro ao ultimo. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--lp-header-h) 0;
}

/* A foto fica no fluxo de empilhamento normal (z-index 0) e o conteúdo sobe
   para z-index 1. Usar z-index negativo aqui jogaria a imagem para trás do
   fundo do <body>, que é branco — ela some. */
.lp-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--lp-hero-radius, 0px);
  transform: scale(var(--lp-hero-scale, 1));
  transform-origin: 50% 0;
}

/* A imagem é posicionada absolutamente dentro da moldura em vez de usar
   `height: 100%`. O <picture> entre os dois tem altura indefinida, então a
   porcentagem caía para `auto` e a foto vazava para fora do recorte. Com
   `inset: 0` a caixa é definida pela própria moldura e o `cover` funciona. */
.lp-hero__media picture {
  display: block;
  position: absolute;
  inset: 0;
}

.lp-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Escurece o canto do texto para o branco passar no contraste AA sobre a foto.
   É um elemento real (não ::after) porque a ordem de pintura em relação à
   <picture> precisa ser explícita e inspecionável. */
.lp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 46%, rgba(0, 0, 0, 0) 72%);
}

.lp-hero__content {
  position: relative;
  z-index: 1;
  max-width: 636px;
  display: flex;
  flex-direction: column;
  gap: 21px;
  color: var(--lp-surface);
}

.lp-hero__title { color: var(--lp-surface); }
.lp-hero__lead  { color: var(--lp-surface); }

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-space-2);
  align-items: center;
}

@media (max-width: 767px) {
  .lp-hero { min-height: 640px; min-height: 100svh; }
  .lp-hero__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .55) 100%);
  }
}

/* — 02 Gancho + dashboard — Figma 33381:2131 ————————————— */
.lp-hook {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lp-space-4);
  text-align: center;
}

/* O painel ganhou um contêiner próprio para revelar separado do título.
   Como `.lp-hook` é flex com `align-items: center`, sem `width: 100%` esse
   contêiner encolheria para o conteúdo e o painel perderia a largura. */
.lp-hook__media { width: 100%; }

.lp-hook__head {
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-2);
  max-width: var(--lp-container-narrow);
}

/* — cabeçalho centrado (usado em +20 portais e Planos) ————— */
.lp-section-head {
  max-width: 684px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-2);
}

/* — 06 Leads — Figma 33381:2203 ————————————————————————————
   Cabeçalho de duas colunas (texto à esquerda, bullets à direita) e o painel
   ocupando a largura inteira embaixo. */
.lp-leads__head {
  display: grid;
  grid-template-columns: 574px minmax(0, 416px);
  justify-content: space-between;
  gap: var(--lp-space-8);
  align-items: center;
  margin-bottom: var(--lp-space-4);
}

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

/* — 08 RENAVE — Figma 33381:2225 ——————————————————————————
   Card único: a foto é o fundo, um gradiente branco abre a área de leitura
   à esquerda e o selo fica absoluto sobre a junção. Todas as medidas saem
   do card de 1296x483 do Figma, convertidas para % para escalar junto. */
.lp-renave {
  position: relative;
  isolation: isolate;
  border: 2px solid var(--lp-line);
  border-radius: 48px;
  overflow: clip;
  padding: 80px 64px;
  background: var(--lp-surface-alt);
  /* Trava a proporção do Figma para o selo cair sempre no mesmo ponto. */
  min-height: 483px;
  display: flex;
  align-items: center;
}

.lp-renave__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}

.lp-renave__bg picture,
.lp-renave__bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.lp-renave__bg img {
  object-fit: cover;
  object-position: 70% center;
}

/* Gradiente do Figma: branco a 91% até 64.931%, transparente a partir de
   38.272%, no sentido da direita para a esquerda. */
.lp-renave__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 38.272%,
    rgba(255, 255, 255, .91) 64.931%
  );
}

.lp-renave__content {
  position: relative;
  z-index: 1;
  width: 570px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lp-space-4);
}

.lp-renave__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--lp-ink);
}

/* Selo: 299px em left 968 / top 113, dentro de 1296x483. */
.lp-renave__seal {
  position: absolute;
  z-index: 2;
  left: 74.69%;
  top: 23.4%;
  width: 23.07%;
  aspect-ratio: 1;
  pointer-events: auto;
}

/* O selo dimensiona pelo container, não pelos 320px fixos do protótipo.
   `.lp-mock` entra no seletor para subir a especificidade: o CSS gerado
   declara `.lp-mock .holo-seal { width:320px; height:320px }` com a MESMA
   especificidade e carrega DEPOIS desta folha — sem esse degrau os 320px
   venciam e o selo estourava a caixa (e a largura da tela no celular). */
.lp-renave__seal.lp-mock .module-holo-seal,
.lp-renave__seal.lp-mock .holo-seal {
  width: 100%;
  height: 100%;
  padding: 0;
  min-height: 0;
}

.lp-renave__seal .module-holo-seal,
.lp-renave__seal .holo-seal {
  width: 100%;
  height: 100%;
  padding: 0;
  min-height: 0;
}

@media (max-width: 1199px) {
  .lp-renave { padding: 56px 40px; min-height: 420px; }
  .lp-renave__seal { left: auto; right: -4%; top: auto; bottom: -6%; width: 30%; }
}

@media (max-width: 767px) {
  .lp-renave {
    border-radius: 28px;
    padding: 40px 24px 220px;
    min-height: 0;
    align-items: flex-start;
  }
  /* No retrato a foto é vertical: o gradiente passa a apagar o TOPO, senão
     o texto cairia sobre a parte cheia da imagem. */
  .lp-renave__scrim {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .88) 45%,
      rgba(255, 255, 255, 0) 78%
    );
  }
  .lp-renave__bg img { object-position: center top; }
  .lp-renave__seal { right: 4%; bottom: 24px; width: 42%; }
}

/* — 09 Planos — Figma 33381:2324 ——————————————————————————— */

/* Seção com o fundo animado do handoff (07) atrás do conteúdo. */
.lp-section--flow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.lp-section--flow > .lp-container { position: relative; z-index: 1; }

.lp-section__flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lp-section__flow .module-flow,
.lp-section__flow .flow-bg { width: 100%; height: 100%; }

/* Selo holográfico (13) preenchendo a caixa reservada na faixa RENAVE. */
.lp-renave__seal .module-holo-seal,
.lp-renave__seal .holo-seal { width: 100%; height: 100%; padding: 0; }

/* Logo com spotlight (12) no rodapé.
   `.lp-mock` entra no seletor porque lp-panels.css carrega DEPOIS deste
   arquivo: com a mesma especificidade, a regra do protótipo venceria por
   ordem de origem e a logo voltaria ao tamanho de página inteira. */
.lp-footer__brand.lp-mock .module-logo-spot {
  padding: 0;
  background: none;
  min-height: 0;
}
/* A wordmark ocupa a largura INTEIRA do container — no arquivo ela tem os
   1296px do container (33381:2547), e é sobre ela que o spotlight corre. */
.lp-footer__brand.lp-mock .logo-spotlight-wrap {
  max-width: 100%;
  width: 100%;
  margin: 0;
}

.lp-plans__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lp-space-3);
  margin-top: var(--lp-space-6);
}

@media (max-width: 1199px) { .lp-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 599px)  { .lp-plans__grid { grid-template-columns: minmax(0, 1fr); } }

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-3);
  padding: var(--lp-space-4);
  background: var(--lp-surface);
  border: 2px solid var(--lp-surface-alt);
  border-radius: var(--lp-radius-card);
}

/* Card em destaque: borda na cor da marca (Figma pricing-card-pro). */
.lp-plan--featured { border-color: var(--lp-brand); }

/* Glow de borda seguindo o cursor (handoff 10-planos). As duas variáveis são
   escritas pelo JS; sem JS o pseudo-elemento fica transparente. */
.lp-plan::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--lp-cursor-angle, 45deg),
              transparent 0deg, var(--lp-brand) 40deg, transparent 90deg);
  opacity: var(--lp-edge-proximity, 0);
  transition: opacity .3s var(--lp-ease-out);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.lp-plan__name {
  font-family: var(--lp-font-display);
  font-size: 2.4375rem;   /* 38.957px */
  line-height: 27.332px;
  letter-spacing: -.05em;
  margin: 0;
}
/* Ramp de peso por tier — no Figma é Satoshi Light→Black. */
.lp-plan--air  .lp-plan__name { font-weight: 300; }
.lp-plan--lite .lp-plan__name { font-weight: 400; }
.lp-plan--pro  .lp-plan__name { font-weight: 700; }
.lp-plan--max  .lp-plan__name { font-weight: 700; }

.lp-plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--lp-font-display);
  color: var(--lp-brand-contrast);
}
.lp-plan__currency { font-size: 2.1875rem; font-weight: 300; letter-spacing: -.025em; }
.lp-plan__amount   { font-size: 2.8125rem; font-weight: 700; letter-spacing: -.025em; }
.lp-plan__period   { font-family: var(--lp-font-body); font-size: .9375rem; color: var(--lp-ink-muted); }

.lp-plan__subtitle {
  color: var(--lp-ink-soft);
  font-size: 1rem;
  margin: 0;
  /* Reserva 3 linhas: o subtítulo mais longo ("air") ocupa três, e sem a
     reserva a linha divisória e a lista de recursos ficavam desalinhadas
     entre os quatro cards. */
  min-height: 4.5em;
}

.lp-plan__rule {
  border: 0;
  border-top: 1px solid var(--lp-line);
  margin: 0;
}

.lp-plan__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-2);
  flex: 1 1 auto;
}

.lp-plan__feature {
  display: flex;
  align-items: center;
  gap: var(--lp-space-1);
  font-size: .875rem;
  color: var(--lp-ink-muted);
}

.lp-plan__check {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--lp-brand);
}

.lp-plan__cta { padding-top: var(--lp-space-3); }

.lp-plan__badge {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--lp-space-1) var(--lp-space-2);
  background: var(--lp-brand);
  color: var(--lp-brand-contrast);
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.025em;
  white-space: nowrap;
}

/* Nota dos planos — Figma 33381:2439.
   E uma pilha branca sobre o degrade, nao um texto solto: sem o fundo ela
   sumiria no verde que agora entra por baixo da secao. */
.lp-plans__note {
  margin-top: var(--lp-space-6);
  text-align: center;
}

.lp-plans__note-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-1);
  padding: 8px 16px;
  border-radius: var(--lp-radius-full);
  background: var(--lp-surface);
  color: var(--lp-brand-contrast);
  font-family: var(--lp-font-body);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: -.35px;
  text-align: left;
}

/* O emoji nao herda o tracking negativo, senao encosta na exclamacao. */
.lp-plans__note-emoji { letter-spacing: 0; }

@media (max-width: 767px) {
  /* No mobile a frase quebra em duas linhas dentro da pilha. */
  .lp-plans__note-pill { align-items: flex-start; }
}

/* — 10 Prova social / órbita — Figma 33381:2289 ————————————
   Anéis concêntricos do Figma (Ellipse 302..305) mais os logos girando. */
.lp-orbit {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 900px;
  overflow: hidden;
}

.lp-orbit__rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.lp-orbit__ring {
  position: absolute;
  border: 1px solid var(--lp-line);
  border-radius: 50%;
  opacity: .55;
}
.lp-orbit__ring--1 { width: 576px;  height: 576px; }
.lp-orbit__ring--2 { width: 792px;  height: 792px; }
.lp-orbit__ring--3 { width: 1012px; height: 1012px; }
.lp-orbit__ring--4 { width: 1263px; height: 1263px; }

/* Camada girada pelo rAF. `touch-action: none` deixa o arraste funcionar
   no celular sem o navegador roubar o gesto para rolar a página. */
.lp-orbit__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}
.lp-orbit__stage:active { cursor: grabbing; }

/* Tamanho fixo do cartão: os PNGs dos clientes têm dimensões muito diferentes
   entre si, e sem essa caixa cada um entrava no tamanho natural e invadia o
   texto central. */
/* ~15% menor que o arquivo, a pedido: a composição inteira encolhe em
   proporção (cartão, anéis e largura do texto). O RAIO não está aqui —
   ele é derivado da geometria pelo lp-motion.js, então acompanha esta
   redução sozinho. */
.lp-orbit__item {
  position: absolute;
  width: 128px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

.lp-orbit__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Acima dos logos: a órbita é decoração, o texto é o conteúdo. */
.lp-orbit__content {
  position: relative;
  z-index: 3;
  max-width: 520px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lp-space-2);
}

/* Raio da órbita, lido pelo CSS e pelo JS. Fica na volta do segundo anel,
   longe o bastante para os logos nunca cruzarem o bloco de texto (610px). */
.lp-orbit { --lp-orbit-radius: 430px; }

@media (max-width: 1279px) { .lp-orbit { --lp-orbit-radius: 360px; } }

@media (max-width: 991px) {
  .lp-orbit {
    min-height: 640px;
    --lp-orbit-radius: 250px;
  }
  /* Os dois anéis externos estouram a viewport no celular. */
  .lp-orbit__ring--3,
  .lp-orbit__ring--4 { display: none; }
  .lp-orbit__item { width: 112px; height: 52px; padding: 8px 10px; }
}

/* — 11 FAQ — Figma 33381:2449 —————————————————————————————— */
.lp-faq__title {
  text-align: center;
  margin-bottom: var(--lp-space-6);
}

/* — 12 CTA final + rodapé — Figma 33381:2293 / 33381:2130 —————
   O bloco inteiro assenta sobre o painel escuro `brand-contrast` (#0a0a0a),
   com o topo arredondado. É o nó 33381:2130 do arquivo, confirmado pela
   anotação de motion ("Rodapé (fundo escuro, wordmark GESTORCAR grande)").
   Aqui a página troca de família: títulos e links do rodapé são Poppins. */
.lp-footer-zone {
  --lp-ink-muted: var(--lp-ink-muted-dark);
  background: var(--lp-brand-contrast);
  /* Topo reto. O arredondamento visível na emenda é o do painel cinza do
     FAQ, que se recorta por cima — o painel escuro entra reto por baixo. */
  border-radius: 0;
  color: var(--lp-surface);

  /* O preto SOBE por trás do painel cinza do FAQ. Encostar os dois na mesma
     linha não basta: como o painel do FAQ tem os cantos de baixo
     arredondados, sobram duas fatias brancas nas quinas. No arquivo o que
     aparece atrás dessa curva é preto. */
  margin-top: -100px;
  /* Devolve os 100px que a margem negativa comeu — só o FUNDO precisa subir,
     o conteúdo não, senão a primeira linha do título fica escondida. */
  padding-top: 100px;
  position: relative;
  z-index: 0;
}

/* Painel cinza full-bleed sob o FAQ (33381:2223): 1441x987 em `surface-alt`,
   raio 100px. O conteúdo ocupa 587 dos 987, o que dá os 200px de respiro em
   cima e embaixo.
   O `z-index` o põe acima do painel escuro, para a curva de baixo se recortar
   contra o preto em vez do branco da página. */
.lp-section--panel {
  background: var(--lp-surface-alt);
  border-radius: 100px;
  padding-block: 200px;
  position: relative;
  z-index: 1;
}

.lp-cta {
  display: grid;
  grid-template-columns: 416px repeat(2, minmax(0, auto));
  justify-content: space-between;
  gap: var(--lp-space-8);
}

.lp-cta__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 31px;
}

/* 36px Light, branco (33381:2295) */
.lp-cta__title {
  font-family: var(--lp-font-display);
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1;
  margin: 0;
  color: var(--lp-surface);
}

/* Poppins Bold 16 em verde de marca (33381:2299 / 33381:2309) */
.lp-cta__col-title {
  font-family: var(--lp-font-footer);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lp-brand);
  margin: 0 0 var(--lp-space-3);
}

/* Poppins Regular 16 em #c8c8c8 (token "ESCALA DE CINZA/400") */
.lp-cta__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--lp-font-footer);
  font-size: 1rem;
  line-height: 1.5;
}
.lp-cta__list a { color: #c8c8c8; }
.lp-cta__list a:hover { color: var(--lp-surface); }

/* "Outras Soluções CDW Tech" é uma lista de duas colunas. */
.lp-cta__list--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px var(--lp-space-8);
}

@media (max-width: 991px) {
  .lp-cta { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}


/* ============================================================================
   09 RODAPÉ — Figma 33381:2546
   ========================================================================= */
.lp-footer { padding-block: 96px var(--lp-space-4); }

/* A wordmark ocupa a LARGURA INTEIRA do container (1296x184 no arquivo). */
.lp-footer__brand {
  width: 100%;
  margin-bottom: var(--lp-space-3);
}

/* Linha de créditos: quatro blocos distribuídos, DM Sans 12 (33381:2562). */
.lp-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-3);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--lp-ink-muted);
}

/* Sem `nowrap`: a linha de copyright tem ~409px numa só linha, e num celular
   de 375px sobram 343px de área útil — ela furava a viewport e fazia a
   PÁGINA INTEIRA rolar de lado, deixando faixa branca ao lado do rodapé
   escuro. Quebrar é o comportamento certo aqui. */
.lp-footer__credit { color: var(--lp-ink-muted); }
a.lp-footer__credit:hover { color: var(--lp-surface); }

.lp-footer__by {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-1);
  color: var(--lp-ink-muted);
}

/* 9.02px em Bold no arquivo — a assinatura fica menor que o resto da linha. */
.lp-footer__by-label {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.lp-footer__by img { width: 59px; height: auto; opacity: .85; }

/* Virou link para cdwtech.com.br. Sem sublinhado (a assinatura nao e um item
   da linha de creditos, e o alvo e a marca), mas com um alvo visivel no hover
   e no foco de teclado — a marca acende e o rotulo clareia junto. */
a.lp-footer__by { text-decoration: none; transition: color 160ms ease; }
a.lp-footer__by:hover,
a.lp-footer__by:focus-visible { color: var(--lp-surface); }
a.lp-footer__by:hover img,
a.lp-footer__by:focus-visible img { opacity: 1; }



/* ============================================================================
   10 MOTION
   Todo keyframe vive aqui, e o bloco de reduced-motion fecha a seção — assim
   dá para auditar num lugar só se a página inteira respeita a preferência.
   ========================================================================= */
@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); }
}

/* Entrada por scroll.
   Duas salvaguardas deliberadas, porque animação de entrada é cosmética e
   nunca pode custar a leitura do conteúdo:

   1. O estado inicial só existe sob `.lp-motion-ready`, classe que o JS põe
      no <html> depois de assumir o controle. Script que não carrega, quebra
      ou roda sem IntersectionObserver simplesmente não casa a regra.
   2. A animação é só de `transform`. A opacidade nunca é tocada, então
      mesmo que o estado final não seja aplicado por qualquer motivo, o texto
      continua legível — apenas deslocado 16px. Animar opacidade aqui
      significava arriscar a página inteira em branco. */
.lp-motion-ready .lp-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  /* Curva longa e desacelerada (--lp-ease-out vem do handoff): o elemento
     chega rápido e assenta devagar, que é o que dá a sensação de "suave"
     em vez de "aparecer".

     O fade é mais curto que o deslocamento de propósito: o elemento termina
     de aparecer antes de parar de andar, então o olho lê "entrou" e não
     "está chegando". Só transform e opacity são animados — as duas
     propriedades que o compositor resolve sem repintar. */
  transition: opacity .55s var(--lp-ease-out), transform .9s var(--lp-ease-out);
  transition-delay: var(--lp-reveal-delay, 0ms);
}
.lp-motion-ready .lp-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Variante para peças pequenas (bullets, ícones, itens de lista): percurso e
   tempo menores. Um <li> de uma linha percorrendo 28px parece solto; 12px
   dá o mesmo efeito na proporção certa. */
.lp-motion-ready .lp-reveal--item {
  transform: translate3d(0, 12px, 0);
  transition-duration: .4s, .55s;
}

@media (prefers-reduced-motion: reduce) {
  .lp *,
  .lp *::before,
  .lp *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Estado final imediato, sem transição de entrada. */
  .lp-motion-ready .lp-reveal { opacity: 1; transform: none; }

  /* O hero fica no tamanho cheio, sem o encolhimento do scroll. */
  .lp-hero__media { transform: none; border-radius: 0; }

  .lp-marquee__track { animation: none; transform: none; }
}


/* ============================================================================
   11 FONTE DO RODAPÉ — Poppins
   Só o rodapé usa esta família (33381:2299/2309/2301…). É a quarta do
   arquivo, carregada exclusivamente por causa dele — e como o rodapé está
   sempre abaixo da dobra, ela nunca entra na cadeia crítica.
   ========================================================================= */
:root {
  --lp-font-footer: "Poppins", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================================
   12 MOBILE — Figma "GESTORCAR - NOVO SITE" · node 33381:4423 (360 x 11095)

   Arquivo mobile próprio, não é o desktop encolhido. Fica no fim da folha de
   propósito: com a mesma especificidade das regras acima, a ordem de origem
   resolve, e este bloco não precisa inflar seletor nenhum para vencer.

   Métricas do arquivo (quadro de 360):
     gutter 16px · conteúdo 328px
     h1 32/1.0 · h2 32/1.0 · corpo 14/1.5 · pergunta do FAQ 18/1.5
     header 108px de altura, barra de 328 com 24 de padding interno
     CTAs do hero na largura inteira, empilhados com 16 de gap
   ========================================================================= */
@media (max-width: 767px) {

  /* — layout ————————————————————————————————————————————————— */
  .lp-container,
  .lp-container--narrow { padding-inline: 16px; }

  .lp-section        { padding-block: 64px; }
  .lp-section--tight { padding-block: 40px; }

  /* — tipografia ————————————————————————————————————————————
     No arquivo mobile o h1 e os h2 convergem para 32px. */
  .lp-h1 { font-size: 2rem; }
  .lp-h2--lg,
  .lp-h2--md,
  .lp-h2--sm { font-size: 2rem; letter-spacing: -.02em; }

  .lp-lead { font-size: 1rem; }
  .lp-body { font-size: .875rem; }

  /* — hero ——————————————————————————————————————————————————
     Tela cheia (o 848px do Figma vira so o fallback). Os dois CTAs ocupam a
     largura toda e empilham. */
  /* O texto sobe para o topo em vez de ficar centrado: na foto retrato o
     rosto do rapaz ocupa o meio da tela, e o titulo caia justamente em cima
     dele. `align-items: flex-start` encosta o conteudo logo abaixo do header
     (os 108px de padding-top), deixando a pessoa livre na metade de baixo. */
  .lp-hero { min-height: 848px; min-height: 100svh; padding-top: 108px; align-items: flex-start; }
  .lp-hero__content { gap: 24px; }
  .lp-hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .lp-hero__actions .lp-btn { width: 100%; }

  /* — header ————————————————————————————————————————————————
     Barra de 328 com 24 de padding, só logo + hambúrguer. */
  .lp-header__bar { padding: 16px 24px; border-radius: 60px; }
  /* Um pouco maior que os 125px do arquivo mobile: no aparelho a marca
     ficava pequena demais ao lado do hamburguer. A proporcao e travada no
     `.lp-logo`, entao so a largura muda. */
  .lp-header__logo { width: 150px; flex-basis: 150px; }
  .lp-header__actions { display: none; }
  .lp-header__nav.is-open .lp-header__link { padding-block: 4px; }

  /* "Área do Cliente" + CTA descem para dentro do menu aberto. */
  .lp-header__nav-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--lp-line);
  }
  .lp-header__nav-actions .lp-header__account { display: inline-flex; justify-content: center; }

  /* — bullets ———————————————————————————————————————————————— */
  .lp-bullets__item { font-size: .875rem; padding-block: 12px; }

  /* — painéis ———————————————————————————————————————————————— */
  .lp-split,
  .lp-split--reverse { gap: 32px; }
  .lp-leads__head { gap: 24px; }

  /* Os aparelhos vinham posicionados em pixels fixos num palco de 890x570,
     então abaixo dessa largura o MacBook vazava e era cortado. Aqui a
     geometria é percentual e o palco acompanha a largura pela proporção.
     `.lp-panel--live` entra no seletor só para ganhar do CSS gerado, que
     carrega depois desta folha. */
  .lp-panel--live .lp-mock .mockup-stage {
    width: 100%;
    height: auto;
    aspect-ratio: 890 / 570;
    border-radius: 20px;
  }
  .lp-panel--live .lp-mock .device-macbook { left: 4.04%; top: 10.88%; width: 80%; }
  .lp-panel--live .lp-mock .device-iphone  { right: 5.96%; bottom: 3.16%; width: 23.03%; }

  /* O deslocamento do scroll passa a ser fração da própria trilha, e não
     pixels calculados para a moldura de 712px. */
  .lp-panel--live .lp-mock .device-macbook .scroll-track { animation-name: lp-scroll-mac; }
  .lp-panel--live .lp-mock .device-iphone  .scroll-track { animation-name: lp-scroll-phone; }

  /* — planos ————————————————————————————————————————————————
     Uma coluna, cards de 328 com 24 de padding e 32 de gap. */
  .lp-plans__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 32px;
  }
  .lp-plan { padding: 24px; border-radius: 24px; }
  /* Empilhado, cada card fecha na própria altura: a reserva de 3 linhas só
     abriria um buraco embaixo do subtítulo. */
  .lp-plan__subtitle { min-height: 0; }
  .lp-plan__name     { font-size: 1.75rem; line-height: 1; }
  .lp-plan__amount   { font-size: 2.5rem; }
  .lp-plan__currency { font-size: 1.75rem; }

  /* — RENAVE (33391:5624) ————————————————————————————————————
     Card vertical: texto em cima, foto embaixo, selo sobre a foto. */
  .lp-renave {
    display: block;
    /* Proporção do card no arquivo (328x792) — que é EXATAMENTE a proporção
       da foto mobile (940x2269 = 0,414). É isso que faz a imagem preencher
       sem corte; com altura fixa e largura livre o `cover` comia as bordas. */
    aspect-ratio: 328 / 792;
    padding: 32px 24px;
    border-radius: 24px;
  }
  .lp-renave__content { width: 100%; gap: 24px; }
  .lp-renave__body { font-size: .875rem; }
  .lp-renave__content > div { width: 100%; }
  .lp-renave__content .lp-btn { width: 100%; }

  /* O gradiente inverte de sentido: no desktop apaga a ESQUERDA, aqui o
     TOPO, porque a coluna de texto mudou de lado. */
  .lp-renave__scrim {
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0) 34.785%,
      #ffffff 56.503%
    );
  }
  .lp-renave__bg img { object-position: center bottom; }

  /* Selo ancorado pela BASE: com largura percentual e altura de card fixa,
     um `top` percentual deixava ele crescer para fora. */
  .lp-renave__seal {
    left: 48.5%;
    right: auto;
    top: auto;
    bottom: 2.5%;
    width: 46%;
    max-width: 180px;
  }

  /* — Órbita (33391:5969) ————————————————————————————————————
     O giro é o mesmo do desktop, só adaptado. O raio é o MÍNIMO que mantém o
     cartão fora da caixa de texto em qualquer ângulo — nem um pixel além,
     senão os logos passam a girar fora da tela:
       meia-largura = 334/2 + 104/2 + 16 folga = 235px
       meia-altura  = 270/2 +  48/2 + 16 folga = 175px
       raio         = √(235² + 175²)           ≈ 294px  →  296px  */
  .lp-orbit {
    --lp-orbit-radius: 296px;
    padding-block: 0;
  }
  .lp-orbit__item { width: 104px; height: 48px; padding: 8px 10px; }

  /* Só os dois anéis internos do arquivo (389 e 535). */
  .lp-orbit__ring--1 { width: 389px; height: 389px; }
  .lp-orbit__ring--2 { width: 535px; height: 535px; }
  .lp-orbit__ring--3,
  .lp-orbit__ring--4 { display: none; }

  /* 334 de 360 no arquivo. O limite é o que torna a geometria previsível:
     sem ele o texto acompanha a tela e nenhum raio razoável escapa dele. */
  .lp-orbit__content { max-width: 334px; }

  /* — FAQ ————————————————————————————————————————————————————
     O painel cinza continua, mas SEM raio: o nó mobile (33391:5815) sangra
     reto de borda a borda. */
  .lp-section--panel { border-radius: 0; padding-block: 64px; }

  .lp-faq__title          { font-size: 2rem; margin-bottom: 32px; }
  .lp-accordion__question { font-size: 1.125rem; align-items: flex-start; }
  .lp-accordion__sign     { margin-top: 6px; }
  .lp-accordion__answer   { font-size: 1rem; }

  /* — CTA final e rodapé ————————————————————————————————————
     Três colunas viram uma, centralizada. */
  /* (o topo já é reto na regra base — nada a sobrescrever aqui) */

  .lp-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    text-align: center;
  }
  .lp-cta__pitch { align-items: center; }
  .lp-cta__list  { gap: 8px; }
  .lp-cta__list--split { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .lp-footer__meta {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  /* A wordmark acompanha o container também no mobile. */
  .lp-footer__brand.lp-mock .logo-spotlight-wrap { max-width: 100%; }

  /* Cantos menores nos degradês, na escala do quadro de 360. */
  .lp-section--grad-top::before    { border-radius: 40px 40px 0 0; }
  .lp-section--grad-bottom::after  { border-radius: 0 0 40px 40px; }

  /* — marquee ———————————————————————————————————————————————— */
  .lp-marquee__item  { flex-basis: 150px; height: 92px; padding: 16px; }
  .lp-marquee__track { gap: 16px; }
}

/* Versões proporcionais das trilhas de scroll dos aparelhos.
   -80,67% = 1375px de deslocamento sobre 1704,5px de imagem renderizada.
   -89,17% = 2939px sobre 3296px (imagem + os 16px do espaçador do notch). */
@keyframes lp-scroll-mac {
  0%, 10%   { transform: translateY(0); }
  48%, 62%  { transform: translateY(-80.67%); }
  96%, 100% { transform: translateY(0); }
}
@keyframes lp-scroll-phone {
  0%, 10%   { transform: translateY(0); }
  48%, 62%  { transform: translateY(-89.17%); }
  96%, 100% { transform: translateY(0); }
}