/* ==========================================================================
   SnapDoor — Landing page do motor Superlift SDO-5 Ultra
   Carregada SO em superlift-motor.html, depois de style.css.
   Pagina de campanha isolada: faixa fixa no topo (.lp-topbar), barra de
   acoes no celular (.lp-actionbar) e rodape compacto (.promo-footer),
   sem o menu do site. Herda os tokens de style.css; aqui entram so os
   tokens escuros da campanha e os componentes desta pagina.
   ========================================================================== */

:root {
  --promo-black:  #0A0D10;   /* fundo principal escuro */
  --promo-panel:  #141A1F;   /* cartoes sobre o preto */
  --promo-line:   rgba(255,255,255,.12);
  --promo-dim:    rgba(255,255,255,.78);  /* texto secundario — ver nota abaixo */
  --superlift-red: #E8261C;  /* vermelho do logo Superlift */

  --lp-topbar-h:    56px;
  --lp-actionbar-h: 64px;

  /* Um arredondamento so para todo botao da pagina — o mesmo dos campos
     do formulario. So o play redondo do video foge disso. */
  --lp-btn-radius:  var(--radius-sm);
}

/* Regra: nenhuma animacao de entrada nesta LP. A classe .reveal ainda chega
   pelos blocos compartilhados (section_head, FAQ, formulario) — aqui ela
   simplesmente nao anima. As outras paginas do site seguem animando. */
.js .reveal,
.js .reveal.is-in { opacity: 1; transform: none; transition: none; }

/* `hidden` sempre esconde, mesmo em elementos com display proprio (.lp-btn) */
[hidden] { display: none !important; }

/* Ancoras nunca podem ficar escondidas sob a faixa do topo */
[id] { scroll-margin-top: calc(var(--lp-topbar-h) + 12px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --------------------------------------------------------------------------
   0a. Faixa fixa do topo
   -------------------------------------------------------------------------- */
.lp-topbar {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--lp-topbar-h);
  /* Preto puro, igual ao hero: a barra so se distingue pelo fio de baixo.
     Opaca de proposito — com fundo solido o desfoque nao faz diferenca e
     so custa renderizacao a cada rolagem. */
  background: #000;
  border-bottom: 1px solid var(--promo-line);
}
.lp-topbar__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--lp-topbar-h);
  padding-block: .35rem;
}
.lp-topbar__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.lp-topbar__cta { display: flex; align-items: center; gap: var(--sp-5); margin-left: auto; }
.lp-topbar__link {
  color: var(--white); text-decoration: none;
  font-size: var(--step-0); white-space: nowrap;
}
.lp-topbar__link:hover { text-decoration: underline; }
.lp-topbar .lp-btn--sm { min-height: 42px; padding-inline: var(--sp-5); font-size: var(--step-0); }
.lp-logo { width: auto; display: block; }

/* Em telas estreitas o logo + telefone + botao nao cabem na mesma linha.
   O telefone sai primeiro: a barra fixa de baixo ja tem o botao Call. */
@media (max-width: 559px) {
  .lp-topbar__link { display: none; }
  .lp-logo { height: 24px !important; }
  .lp-topbar .lp-btn--sm { min-height: 40px; padding-inline: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   0b. Barra fixa inferior (so no celular)
   -------------------------------------------------------------------------- */
.lp-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--promo-black);
  border-top: 1px solid var(--promo-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.lp-actionbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: var(--lp-actionbar-h);
  padding: .5rem .25rem;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  color: var(--white); text-decoration: none;
}
.lp-actionbar a + a { border-left: 1px solid var(--promo-line); }
.lp-actionbar svg { width: 20px; height: 20px; }
.lp-actionbar .is-primary { background: var(--brand-orange); color: var(--promo-black); }

/* A barra nunca pode cobrir o botao do formulario nem o rodape. A folga
   extra cobre a borda de 1px da barra e evita que o rodape fique encostado
   nela — com o valor exato da altura sobrava 1px por baixo. */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(var(--lp-actionbar-h) + var(--sp-3) + env(safe-area-inset-bottom));
  }
}
@media (min-width: 768px) { .lp-actionbar { display: none; } }

/* --------------------------------------------------------------------------
   0c. Botoes da LP
   -------------------------------------------------------------------------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 54px; padding-inline: var(--sp-6);
  border: 1px solid transparent; border-radius: var(--lp-btn-radius);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.lp-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.lp-btn--primary { background: var(--brand-orange); color: var(--promo-black); }
.lp-btn--primary:hover { background: #FFAE55; }
.lp-btn--ghost { border-color: rgba(255,255,255,.28); color: var(--white); }
.lp-btn--ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
.lp-btn--sm { min-height: 38px; padding-inline: var(--sp-4); font-size: var(--step--1); }
.lp-btn--xl { min-height: 58px; font-size: var(--step-0); }

/* Abaixo de 380px o padding de 2rem + nowrap fazem "Book on WhatsApp"
   estourar a tela. */
@media (max-width: 380px) {
  .lp-btn { padding-inline: var(--sp-4); font-size: var(--step--1); }
}

/* Foco visivel em tudo que e clicavel na LP */
.lp-btn:focus-visible,
.lp-actionbar a:focus-visible,
.lp-topbar__link:focus-visible,
.lp-topbar__brand:focus-visible {
  outline: 3px solid var(--brand-orange); outline-offset: 3px; border-radius: 6px;
}

/* --------------------------------------------------------------------------
   1. Blocos escuros — fundo preto com graos sutis + brilho mesh
   -------------------------------------------------------------------------- */
.promo-dark {
  background: var(--promo-black);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.promo-dark p { color: var(--promo-dim); }
.promo-dark h2, .promo-dark h3, .promo-dark h4 { color: var(--white); }
.promo-dark .eyebrow { color: var(--brand-orange); }
.promo-dark .section-head p { color: var(--promo-dim); }

/* Textura de grao — da profundidade sem pesar a pagina (SVG inline, ~200B) */
.promo-dark::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  opacity: .05; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.promo-dark > .container { position: relative; z-index: 1; }

/* Brilho mesh em duas cores — so nos blocos que pedem mais destaque */
.promo-glow::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38rem 38rem at 12% -15%, rgba(253,152,45,.28), transparent 60%),
    radial-gradient(30rem 30rem at 100% 115%, rgba(232,38,28,.14), transparent 60%);
}


/* --------------------------------------------------------------------------
   6a. Hero da LP — tratamento do anuncio
   Preto puro, composicao centrada, halo laranja atras do produto,
   tipografia grande e justa. O laranja fica reservado para a acao: o
   preco e branco, como no criativo.
   -------------------------------------------------------------------------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: #000;
  color: var(--white);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  /* Um tamanho so para os textos de apoio do hero: eyebrow, subtitulo,
     "Normally $1200" e a nota abaixo dos botoes. 15px no celular, 16px
     no desktop. */
  --lp-hero-small: clamp(0.94rem, 0.9rem + 0.12vw, 1rem);
}
/* Sem halo de CSS: o brilho laranja ja vem embutido na foto do produto.
   Somar outro so criaria um retangulo mais claro em volta do arquivo. */
.lp-hero > .container { position: relative; z-index: 1; }

/* Texto a esquerda, produto a direita. No celular vira uma coluna e a
   ordem do HTML ja resolve: titulo > foto > preco > botoes. */
.lp-hero__grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  /* Mesmo container do resto do site: o texto do hero alinha com o logo
     e com as secoes de baixo. A coluna de texto (~590px em 1320) segura o
     subtitulo em 2 linhas e os destaques em 1. */
  .lp-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.23fr);
    align-items: center;
    gap: var(--sp-5) var(--sp-2);
  }
  .lp-hero__head    { grid-column: 1; grid-row: 1; }
  .lp-hero__buy     { grid-column: 1; grid-row: 2; }
  .lp-hero__product { grid-column: 2; grid-row: 1 / span 2; }

  /* A foto passa por baixo do texto (ver .lp-hero__product): o texto sobe
     de camada, senao o preto opaco do arquivo cobre as palavras. */
  .lp-hero__head,
  .lp-hero__buy     { position: relative; z-index: 1; }
}

.lp-hero__eyebrow {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--lp-hero-small); font-weight: 600;
  /* .12em: no tamanho novo, .16em quebrava em 2 linhas em 1024px */
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.lp-hero h1 {
  color: var(--white);
  font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
  max-width: 18ch;
}
.lp-hero h1 span { color: var(--brand-orange); }
.lp-hero__sub {
  margin-top: var(--sp-4);
  font-size: var(--lp-hero-small);
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  max-width: 60ch;
}

.lp-hero__benefits {
  list-style: none; padding: 0; margin: var(--sp-5) 0 0;
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}
.lp-hero__benefits li {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--step-0); color: var(--white);
}
.lp-hero__benefits svg {
  width: 19px; height: 19px; flex-shrink: 0; color: var(--brand-orange);
}

/* Foto do produto: render sobre fundo preto, sem moldura.
   O `screen` faz o preto do arquivo desaparecer — assim nao ha retangulo
   visivel contra a pagina (as bordas do render nao sao preto puro) e a
   poca laranja do hero atravessa por tras do motor. */
.lp-hero__product {
  margin: 0; width: 100%;
  justify-self: center;
}
.lp-hero__product figcaption {
  margin-top: var(--sp-2);
  text-align: right;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
@media (max-width: 979px) { .lp-hero__product { margin: var(--sp-2) 0 -1rem; } }
/* Foto avanca por baixo do texto, como no criativo: o brilho laranja da
   esquerda fica atras das linhas e o corpo do motor comeca logo depois
   delas. A margem negativa estica a foto para a esquerda (13% da coluna)
   sem tirar a borda direita do container. Como o corpo do motor comeca a
   12,5% da largura do arquivo, ele para ~1% depois do inicio da coluna,
   em qualquer largura. Fica depois da regra base para vencer o width:100%. */
@media (min-width: 980px) {
  .lp-hero__product { width: auto; justify-self: stretch; margin-left: -13%; }
}
.lp-hero__product img {
  width: 100%; height: auto; display: block;
  /* Sem mascara de borda: ela apagava os 40% externos e comia o brilho
     laranja da foto. As bordas do arquivo ficam entre 0 e 10 de 255, o
     que e imperceptivel contra o preto da pagina — nao precisa disfarce. */
}

/* Video / poster continuam com moldura — sao captura de tela, nao produto */
.lp-hero__media { margin: var(--sp-6) 0 0; width: 100%; max-width: 420px; }
.lp-hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--promo-panel);
  border: 1px solid var(--promo-line);
}
.lp-hero__frame video,
.lp-hero__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.lp-hero__sound {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4); z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding-inline: var(--sp-5);
  border: 0; border-radius: var(--lp-btn-radius);
  background: var(--brand-orange); color: var(--promo-black);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  cursor: pointer;
}
.lp-hero__sound:hover { background: #FFAE55; }
.lp-hero__sound:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.lp-hero__caption {
  margin-top: var(--sp-3);
  font-size: var(--step--1); color: rgba(255,255,255,.75);
}

/* Preco — branco e enorme, como no criativo */
.lp-hero .lp-price__was {
  margin: 0 0 .15rem;
  font-size: var(--lp-hero-small); color: rgba(255,255,255,.7);
}
.lp-hero__note { margin-top: var(--sp-3); font-size: var(--lp-hero-small); }
.lp-price__was s { text-decoration-color: var(--superlift-red); text-decoration-thickness: 2px; }
.lp-hero .lp-price__now {
  margin: .1rem 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.2rem, 2.2rem + 4vw, 5.2rem);
  line-height: .95; letter-spacing: -.05em;
  color: var(--white);
}
.lp-hero .lp-price__terms {
  margin: .15rem 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); letter-spacing: -.01em;
  color: var(--white);
}
.lp-price__list {
  list-style: none; padding: 0; margin: var(--sp-4) 0 0;
  display: grid; gap: .4rem;
}
.lp-price__list li {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--step-0); color: rgba(255,255,255,.88);
}
.lp-price__list svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand-orange); }

.lp-hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.lp-hero__actions .lp-btn { padding-inline: var(--sp-4); }

.lp-proof {
  margin: var(--sp-6) 0 0;
  font-size: var(--step--1); color: rgba(255,255,255,.75); line-height: 1.6;
}
.lp-proof a { color: var(--white); text-decoration: underline; }
.lp-star {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--white); font-weight: 600;
}
.lp-star .stars { gap: 1px; }
.lp-star svg { width: 15px; height: 15px; color: var(--star); }
.lp-model { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: rgba(255,255,255,.55); }

/* --------------------------------------------------------------------------
   6b. Titulos das secoes novas
   -------------------------------------------------------------------------- */
.lp-h2 {
  color: var(--white);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1.15; letter-spacing: -.02em;
  margin: 0;
}
.lp-h2--dark { color: var(--text); }
.lp-lead {
  margin: var(--sp-4) 0 0;
  font-size: var(--step-1); color: var(--text-muted); max-width: 52ch;
}

/* --------------------------------------------------------------------------
   6b2. Video — "Hear the difference"
   Tratamento de cinema entre o hero e as avaliacoes: o mesmo preto do
   hero, a capa do video com o brilho laranja da propria miniatura vazando
   por tras da tela, e embaixo uma linha do tempo no estilo da barra do
   player com os tres momentos do video.
   -------------------------------------------------------------------------- */
.lp-film {
  position: relative;
  background: #000;
  color: var(--white);
  /* O hero ja termina com respiro proprio: sem isto os dois pretos viram
     um vao vazio */
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.lp-film__head { max-width: 40rem; margin-inline: auto; text-align: center; }
.lp-film__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.lp-film__eyebrow svg { width: 18px; height: 18px; color: var(--brand-orange); }
.lp-film .lp-h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); letter-spacing: -.03em; }
.lp-film__sub { margin: var(--sp-3) 0 0; font-size: var(--step-0); color: rgba(255,255,255,.78); }

/* A tela */
.lp-film__player {
  position: relative;
  max-width: 960px;
  margin: clamp(1.75rem, 1rem + 2.5vw, 3rem) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: var(--promo-panel);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    0 30px 120px -20px rgba(253,152,45,.45);
}
/* A capa e, depois do clique, o player ocupam a tela inteira */
.lp-film__player > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: inherit;
}
/* Capa: tela escura so com o play — a miniatura do YouTube nao aparece.
   Ela fica por cima do player ate o video estar tocando de fato e volta
   quando ele termina, entao a miniatura e a tela final do YouTube nunca
   ficam a vista. */
.lp-film__poster {
  z-index: 1;
  display: block; overflow: hidden;
  color: var(--white); text-decoration: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(253,152,45,.16), transparent 45%),
    linear-gradient(#0C1014, #050607);
  transition: opacity .3s ease;
}
.lp-film__player.is-open .lp-film__poster {
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}
.lp-film__poster:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 4px; }

.lp-film__play {
  position: absolute; left: 50%; top: 50%;
  width: clamp(64px, 3rem + 4vw, 104px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-orange); color: var(--promo-black);
  box-shadow: 0 0 0 10px rgba(253,152,45,.22), 0 12px 32px rgba(0,0,0,.45);
  /* Propriedades separadas: o hover mexe na escala e o carregando gira,
     sem desfazer a centralizacao */
  translate: -50% -50%;
  transition: scale .2s ease, box-shadow .2s ease;
}
/* Sem deslocamento extra: o desenho do triangulo ja poe o centro de massa
   dele no meio do circulo */
.lp-film__play svg { width: 40%; height: 40%; fill: currentColor; }
/* Ondas de som em volta do play, paradas */
.lp-film__play::before,
.lp-film__play::after {
  content: ""; position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(253,152,45,.3);
  pointer-events: none;
}
.lp-film__play::before { inset: -40%; }
.lp-film__play::after  { inset: -85%; border-color: rgba(253,152,45,.14); }
.lp-film__poster:hover .lp-film__play {
  scale: 1.06;
  box-shadow: 0 0 0 14px rgba(253,152,45,.28), 0 12px 32px rgba(0,0,0,.45);
}
/* Entre o clique e o video comecar: o play vira um anel girando */
.lp-film__player.is-loading .lp-film__play {
  background: transparent;
  border: 3px solid rgba(253,152,45,.25);
  border-top-color: var(--brand-orange);
  box-shadow: none;
  animation: lp-spin .8s linear infinite;
}
.lp-film__player.is-loading .lp-film__play svg { display: none; }
@keyframes lp-spin { to { rotate: 360deg; } }

.lp-film__badge {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.72);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
}
.lp-film__badge svg { width: 16px; height: 16px; color: var(--brand-orange); }
.lp-film__badge b { font-weight: inherit; }
.lp-film__badge span {
  padding-left: .5rem; margin-left: .1rem;
  border-left: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.72);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 559px) {
  .lp-film__badge { right: var(--sp-3); bottom: var(--sp-3); padding: .3rem .7rem; }
  .lp-film__play::after { inset: -65%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-film__poster, .lp-film__play { transition: none; }
  .lp-film__player.is-loading .lp-film__play { animation: none; }
}

/* Linha do tempo: a barra do player, com um ponto em cada momento do
   video. O trilho sai laranja (o barulho) e apaga ate o fim (o silencio).
   No celular fica na vertical, a esquerda dos textos. */
.lp-film__beats {
  --lp-dot: 12px;
  position: relative;
  list-style: none; padding: 0;
  max-width: 960px;
  margin: var(--sp-6) auto 0;
  display: grid; gap: var(--sp-5);
}
.lp-film__beats::before {
  content: ""; position: absolute;
  top: 6px; bottom: 6px; left: calc(var(--lp-dot) / 2 - 1px);
  width: 2px;
  background: linear-gradient(var(--brand-orange), rgba(255,255,255,.14));
}
.lp-film__beats li { position: relative; padding-left: calc(var(--lp-dot) + var(--sp-4)); }
.lp-film__beats li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: var(--lp-dot); height: var(--lp-dot);
  border-radius: 50%;
  background: #000;
  border: 2px solid var(--brand-orange);
}
.lp-film__beats li:first-child::before { background: var(--brand-orange); }
.lp-film__beats strong {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-0); color: var(--white);
}
.lp-film__beats span {
  display: block; margin-top: .2rem;
  font-size: var(--step--1); line-height: 1.5; color: rgba(255,255,255,.7);
}
@media (min-width: 720px) {
  .lp-film__beats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .lp-film__beats::before {
    top: calc(var(--lp-dot) / 2 - 1px); bottom: auto; left: 0; right: 0;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--brand-orange), rgba(255,255,255,.14));
  }
  .lp-film__beats li { padding: calc(var(--lp-dot) + var(--sp-4)) 0 0; }
  .lp-film__beats li::before { top: 0; }
}

/* --------------------------------------------------------------------------
   6c. Avaliacoes
   -------------------------------------------------------------------------- */
.lp-rating {
  margin: var(--sp-3) 0 var(--sp-6);
  font-size: var(--step-0); color: var(--promo-dim);
}
.lp-rating a { color: var(--white); text-decoration: underline; }

.lp-reviews { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
@media (min-width: 820px) { .lp-reviews { grid-template-columns: repeat(3, 1fr); } }

.lp-review {
  margin: 0; padding: var(--sp-5);
  border: 1px solid var(--promo-line);
  border-radius: var(--radius-lg);
  background: var(--promo-panel);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.lp-review__stars { display: inline-flex; gap: 2px; }
.lp-review__stars svg { width: 16px; height: 16px; color: var(--star); }
.lp-review blockquote {
  margin: 0; font-size: var(--step-0); line-height: 1.55; color: var(--white);
}
.lp-review figcaption {
  margin-top: auto; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step--1); color: var(--promo-dim);
}

/* Cards vindos do Google (montados pelo promo.js): data, foto e nome do
   autor com link para o perfil dele (exigencia do Google), e o card
   inteiro abre a avaliacao no Google — o link "Google" se estica sobre
   ele. O nome do autor fica por cima, com o proprio link. */
.lp-review--google { position: relative; transition: border-color .2s var(--ease); }
.lp-review--google:hover { border-color: rgba(253,152,45,.55); }
.lp-review__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.lp-review__time { font-size: var(--step--1); color: var(--promo-dim); white-space: nowrap; }
/* Avaliacao longa: 6 linhas aqui, o resto no Google */
.lp-review--google blockquote {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.lp-review--google figcaption { display: flex; align-items: center; gap: .6rem; }
.lp-review__avatar {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; background: var(--promo-line);
}
.lp-review__author { position: relative; z-index: 1; color: var(--white); text-decoration: none; }
.lp-review__author:hover { text-decoration: underline; }
.lp-review__open {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--promo-dim); text-decoration: none; white-space: nowrap;
}
.lp-review__open svg { width: 14px; height: 14px; }
.lp-review__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lp-review--google:hover .lp-review__open { color: var(--brand-orange); }
.lp-review__open:focus-visible { outline: none; }
.lp-review__open:focus-visible::after { outline: 3px solid var(--brand-orange); outline-offset: 2px; }

/* "Load more" + credito do Google. Escondida ate o promo.js montar os
   cards do Google. */
.lp-reviews__more {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
}
.lp-reviews__more .lp-btn svg { width: 16px; height: 16px; }
.lp-reviews__source { margin: 0 0 0 auto; font-size: var(--step--1); color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   6d. Por que a porta faz barulho
   -------------------------------------------------------------------------- */
.lp-why { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
@media (min-width: 820px) { .lp-why { grid-template-columns: repeat(3, 1fr); } }

.lp-why__card {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  border-top: 3px solid var(--brand-orange);
}
.lp-why__card h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-1); line-height: 1.25; color: var(--text);
}
.lp-why__card p { margin: 0; font-size: var(--step-0); line-height: 1.55; color: var(--text-muted); }
.lp-why__close {
  margin: var(--sp-6) 0 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--text);
}

/* --------------------------------------------------------------------------
   6e. How it works — aqui a numeracao faz sentido
   -------------------------------------------------------------------------- */
.lp-steps {
  list-style: none; padding: 0; margin: var(--sp-6) 0 0;
  display: grid; gap: var(--sp-5);
  counter-reset: none;
}
@media (min-width: 820px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step { display: flex; gap: var(--sp-4); align-items: flex-start; }
.lp-step__n {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-orange); color: var(--promo-black);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
}
.lp-step h3 { margin: 0 0 .35rem; font-size: var(--step-1); color: var(--text); }
.lp-step p { margin: 0; font-size: var(--step-0); line-height: 1.55; color: var(--text-muted); }
.lp-steps__cta { margin: var(--sp-6) 0 0; }
.lp-steps__alt {
  margin: var(--sp-3) 0 0;
  font-size: var(--step-0); color: var(--text-muted);
}
.lp-steps__alt a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.lp-steps__alt a:hover { color: var(--brand-orange-dark); }

/* --------------------------------------------------------------------------
   6f. App / Wi-Fi — faixa no tratamento do criativo
   Foto noturna da garagem com o celular mostrando o app. A foto fica
   ancorada a direita e sempre na altura da faixa; o lado esquerdo do
   arquivo ja escurece ate o preto, entao o fundo preto da secao continua
   a foto sem emenda quando a tela e mais larga que ela.
   No celular vira texto em cima e foto recortada no celular embaixo.
   -------------------------------------------------------------------------- */
.lp-app {
  position: relative;
  overflow: hidden;
  background: #000;
  color: var(--white);
}
.lp-app__body { padding-top: clamp(3rem, 2.2rem + 3vw, 4.5rem); }

.lp-app__title {
  margin: 0;
  color: var(--white);
  font-size: clamp(2.2rem, 1.3rem + 2.8vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
/* "from your phone." sempre na segunda linha, como no criativo */
.lp-app__title span { display: block; }
.lp-app__sub {
  margin: var(--sp-3) 0 0;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  line-height: 1.3;
  color: var(--white);
}

/* Icone em cima, legenda embaixo, centrados entre si; o primeiro item
   alinha com o titulo */
.lp-app__features {
  list-style: none; padding: 0;
  margin: clamp(1.75rem, 1rem + 2.4vw, 3rem) 0 0;
  display: flex; justify-content: space-between;
  gap: var(--sp-4);
  max-width: 34rem;
}
.lp-app__features li {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3);
  /* Estreito o bastante para "Let family in / remotely" quebrar como no
     criativo e os tres caberem numa linha no celular */
  max-width: 7.5em;
  text-align: center;
  font-size: clamp(.9rem, .8rem + .55vw, 1.4rem);
  line-height: 1.25;
  color: var(--white);
}
.lp-app__features svg {
  width: clamp(2.5rem, 1.9rem + 1.9vw, 3.75rem); height: auto;
  stroke-width: 1.6;
}

/* Foto. Tudo o que fica sobre ela e medido em cqh (altura da foto), para
   acompanhar a escala do arquivo em qualquer tela. */
.lp-app__art {
  position: relative;
  container-type: size;
  aspect-ratio: 4 / 3;
  margin-top: var(--sp-5);
}
.lp-app__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ancorada a direita: o recorte tira o preto da esquerda, nunca o celular */
  object-position: 100% 50%;
}
/* No celular a foto vem depois do texto: o topo dela desce do preto */
.lp-app__art::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 30%;
  background: linear-gradient(#000, transparent);
  pointer-events: none;
}
@media (min-width: 600px) { .lp-app__art { aspect-ratio: 2 / 1; } }

/* Assinatura manuscrita no piso da entrada, a esquerda do celular, em cqh
   a partir da borda direita do arquivo (a foto e sempre ancorada nela). */
.lp-app__script {
  position: absolute; z-index: 1;
  top: 58cqh; right: 116cqh;
  margin: 0;
  font-family: "Mrs Saint Delafield", cursive;
  font-size: 10cqh;
  line-height: 1;
  color: var(--white);
  /* A fonte e fina; o contorno leve aproxima do traco do criativo */
  -webkit-text-stroke: .012em currentColor;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  transform: rotate(-9deg);
  transform-origin: left bottom;
  pointer-events: none;
}
.lp-app__script span { display: block; }
.lp-app__script span:nth-child(2) { padding-left: .2em; }
.lp-app__script span:nth-child(3) { padding-left: .55em; }
.lp-app__swoosh {
  display: block;
  width: 2.9em; height: auto;
  margin: .02em 0 0 .45em;
  fill: var(--brand-orange);
}

/* No celular o recorte 4:3 ancorado a direita nao chega ao piso a esquerda
   do celular: o recorte anda para a esquerda e a assinatura vai junto. */
@media (max-width: 599px) {
  .lp-app__art img { object-position: 76% 50%; }
  .lp-app__script { right: auto; left: 12cqh; }
}

/* Texto sobre a foto so a partir de 1100px: abaixo disso o titulo e os
   destaques esbarram no celular. */
@media (min-width: 1100px) {
  .lp-app {
    display: flex; align-items: center;
    min-height: clamp(460px, 38vw, 700px);
  }
  .lp-app__body {
    position: relative; z-index: 1;
    padding-block: var(--sp-8);
  }
  .lp-app__art {
    position: absolute; top: 0; right: 0;
    height: 100%;
    aspect-ratio: 1983 / 793;
    margin: 0;
  }
  .lp-app__art::after { content: none; }
  /* Em telas mais largas que a foto, a borda esquerda dela (um azul quase
     preto) encontra o preto da secao: o degrade apaga a emenda. */
  .lp-app__art img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%);
            mask-image: linear-gradient(90deg, transparent, #000 14%);
  }
  /* Com o texto sobre a foto, a assinatura nunca invade os destaques:
     quanto mais estreita a tela, mais ela anda para a direita, em direcao
     ao celular. 39cqh e a largura dela; 34rem, a dos destaques. */
  .lp-app__script {
    right: min(116cqh, 100vw - 39cqh - max(1.25rem, (100vw - var(--container)) / 2) - 34rem - 2rem);
  }
}
/* Abaixo de 1260px nao sobra piso entre os destaques e o celular: a
   assinatura volta para o lado direito do celular, como no criativo. */
@media (min-width: 1100px) and (max-width: 1259px) {
  .lp-app__script { top: 38cqh; right: 14cqh; }
}

/* --------------------------------------------------------------------------
   6h. Especificacoes — 5 linhas a vista, o resto recolhido
   -------------------------------------------------------------------------- */
/* Largura total do container, alinhada com o titulo e as outras secoes */
.lp-specs .promo-specs { margin-top: var(--sp-5); }
.lp-specs__more { margin-top: var(--sp-4); }
.lp-specs__more > summary {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding-inline: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--lp-btn-radius);
  background: var(--white); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  color: var(--text);
  list-style: none;
}
.lp-specs__more > summary::-webkit-details-marker { display: none; }
.lp-specs__more > summary::after {
  content: "+"; font-size: 1.2em; line-height: 1; color: var(--brand-orange);
}
.lp-specs__more[open] > summary::after { content: "\2212"; }
.lp-specs__more > summary:hover { border-color: var(--brand-orange); }
.lp-specs__more > summary:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   6g. CTA final + formulario (mesmo bloco, #book)
   -------------------------------------------------------------------------- */
/* Titulo, botoes e contatos na coluna da esquerda; o formulario na direita
   (.contact-split). A lista de contatos ja traz a propria margem de cima. */
.lp-book__head { max-width: 46rem; }
.lp-book__sub { margin: var(--sp-4) 0 0; font-size: var(--step-1); color: var(--promo-dim); }
.lp-book__actions {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  max-width: 36rem; margin-top: var(--sp-5);
}
/* minmax(0, ...) nas colunas: com o 1fr/auto do .contact-split, o grid dos
   dois botoes (2 x 16rem) empurrava a coluna da esquerda para 524px e a
   secao cortava o texto no celular. */
.lp-book__split { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .lp-book__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* O botao de envio vem do .btn do site (pilula); aqui segue os da LP */
.lp-form .btn { border-radius: var(--lp-btn-radius); }

/* Upload: input nativo escondido mas ainda focavel */
.lp-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lp-file__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding-inline: var(--sp-5);
  border: 1px dashed var(--grey-300); border-radius: var(--lp-btn-radius);
  background: var(--grey-50); color: var(--text);
  font-size: var(--step-0); font-weight: 500; cursor: pointer;
}
.lp-file__btn:hover { border-color: var(--brand-orange); background: var(--brand-orange-soft); }
.lp-file__input:focus-visible + .lp-file__btn { outline: 3px solid var(--brand-orange); outline-offset: 2px; }
.lp-file__name {
  display: inline-block; margin-left: var(--sp-3);
  font-size: var(--step--1); color: var(--text-muted);
}

/* O formulario e um cartao branco dentro de um bloco escuro. Sem isto o
   titulo e o subtitulo herdam `.promo-dark h3` / `.promo-dark p` (0,1,1) e
   saem brancos sobre branco — invisiveis. Os rotulos e dicas dos campos
   tambem voltam para as cores do tema claro. */
.promo-dark .form-card h3 { color: var(--text); }
.promo-dark .form-card p { color: var(--text-muted); }
.promo-dark .form-card label,
.promo-dark .form-card legend { color: var(--text); }
.promo-dark .form-card .field__hint { color: var(--text-muted); }

/* Rotulos dos campos tambem em 16px no celular */
.lp-form .field label, .lp-form .field__hint { font-size: var(--step-0); }

/* --------------------------------------------------------------------------
   10. O que esta incluso
   -------------------------------------------------------------------------- */
/* Tres cards: uma coluna no celular, duas no meio, tres no desktop */
.promo-incl {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.promo-card {
  position: relative; overflow: hidden; height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background: var(--white);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.promo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.promo-card--hi {
  border-color: var(--brand-orange);
  background: var(--brand-orange-soft);
}
.promo-card__tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--brand-orange);
  color: var(--promo-black);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--sp-4);
  white-space: nowrap;
}
.promo-card__tag svg { width: 16px; height: 16px; flex-shrink: 0; }
.promo-card h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.promo-check { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: .7rem; }
.promo-check li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45; }
.promo-check svg {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  color: var(--success);
}
.promo-card--hi .promo-check svg { color: var(--brand-orange-dark); }

/* Faixa diagonal "Free" no canto do card em destaque */
.promo-ribbon {
  position: absolute; top: 1.1rem; right: -2.75rem; width: 10.5rem;
  transform: rotate(45deg); text-align: center;
  background: var(--brand-orange); color: var(--promo-black);
  font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* --------------------------------------------------------------------------
   11. Tabela de especificacoes — como uma folha de dados impressa
   -------------------------------------------------------------------------- */
.promo-specs {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-2) var(--sp-6);
  overflow-x: auto;
}
.promo-specs table { width: 100%; border-collapse: collapse; min-width: 420px; }
.promo-specs th, .promo-specs td {
  text-align: left;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.promo-specs th {
  width: 34%;
  font-family: var(--font-display); font-weight: 600;
  color: var(--text);
}
.promo-specs td { color: var(--text-muted); }
.promo-specs tr:last-child th, .promo-specs tr:last-child td { border-bottom: 0; }
.promo-specs tbody tr:hover th, .promo-specs tbody tr:hover td { background: var(--brand-orange-soft); }
.promo-specs caption {
  caption-side: bottom;
  text-align: left;
  padding: var(--sp-4) 0;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   12. Corte diagonal entre blocos escuro/claro
   -------------------------------------------------------------------------- */
.promo-cut { position: relative; height: 44px; overflow: hidden; }
.promo-cut svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.promo-cut--to-light { background: var(--promo-black); }
.promo-cut--to-light path { fill: var(--bg-alt); }
.promo-cut--to-dark { background: var(--bg-alt); }
.promo-cut--to-dark path { fill: var(--promo-black); }


/* --------------------------------------------------------------------------
   15. Rodape da campanha (compacto, so legal + contato)
   -------------------------------------------------------------------------- */
.promo-footer {
  background: var(--promo-black); color: var(--promo-dim);
  padding-block: var(--sp-7) var(--sp-6);
  border-top: 1px solid var(--promo-line);
  font-size: var(--step--1);
}
.promo-footer__inner { display: grid; gap: var(--sp-4); text-align: center; justify-items: center; }
.promo-footer__brand { display: flex; align-items: center; gap: .6rem; }
.promo-footer__meta a { color: var(--white); text-decoration: underline; }
.promo-footer__legal { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); padding: 0; margin: var(--sp-2) 0; }
.promo-footer__legal a { color: var(--promo-dim); text-decoration: underline; }
.promo-footer__legal a:hover { color: var(--brand-orange); }
.promo-footer__copy { max-width: 60ch; }
.promo-footer__copy a { color: var(--brand-orange); text-decoration: underline; }