/* Estilos específicos da landing focada em cadastro grátis.
   Reaproveita tokens e componentes de style.css (cores, .btn, .section,
   .reveal etc.) -- este arquivo só adiciona o banner final e a barra
   fixa de CTA, que não existem na home. */

/* ---------- Faixa clara (2026-08-19) ----------
   Esta página só recebe tráfego PAGO do Meta -- não tem visita orgânica
   nenhuma, então cada seção existe pra converter, não pra ser lida por
   curiosidade. O site inteiro é escuro (--bg #071310), o que funciona numa
   tela de impacto rápido como a hero, mas cansa em blocos longos de
   leitura (recursos, depoimentos, FAQ). A página inteira clara também não
   serve -- perderia a identidade que a hero estabelece.

   Reescreve os TOKENS (não os seletores) dentro de .light-zone: como quase
   todo componente de style.css já lê var(--bg)/var(--text)/etc, a troca se
   propaga sozinha pros cards, textos e ícones, sem duplicar CSS de
   .feature-card, .faq-item, .t-card e companhia. */
.light-zone {
  --bg: #f4f8f5;
  --surface: #ffffff;
  --card: #ffffff;
  --primary: #1f7a45;
  --primary-hover: #186339;
  --accent: #1f7a45;
  --text: #0d1f18;
  --text2: rgba(13, 31, 24, 0.68);
  --text3: rgba(13, 31, 24, 0.48);
  --line: rgba(13, 31, 24, 0.12);
  --hover: rgba(13, 31, 24, 0.04);
  /* `color` do body é herdado como valor JÁ RESOLVIDO (branco), não como
     referência à variável -- redeclarar só --text acima não muda o texto
     de nada aqui dentro sem isto. Títulos e parágrafos sem `color` próprio
     (h2, h3 etc.) ficavam brancos sobre fundo claro, ilegíveis. */
  color: var(--text);
  background: var(--bg);
}

/* "Como funciona" reabre o verde-escuro DENTRO da faixa clara -- não é
   alternância claro/escuro a cada seção, é o único ponto que carrega peso
   de decisão (o passo a passo que reduz a fricção de "vou instalar um
   app?") ligado visualmente à hero pela mesma cor. Redeclarar os tokens
   aqui basta: os componentes dentro (.how-step, ícones, texto) já leem
   var(--text)/var(--text2) e se ajustam sozinhos, sem CSS duplicado. */
.section--how {
  --bg: #071310;
  --surface: #0d1f18;
  --card: rgba(14, 36, 28, 0.68);
  --primary: #23864d;
  --primary-hover: #2fa25e;
  --accent: #6fcb93;
  --text: #ffffff;
  --text2: rgba(255, 255, 255, 0.70);
  --text3: rgba(255, 255, 255, 0.45);
  --line: rgba(255, 255, 255, 0.10);
  --hover: rgba(255, 255, 255, 0.05);
  color: var(--text);

  /* Card, não retângulo (2026-08-19). .section herda max-width:1180px e
     padding 100px/24px de style.css, e sem mais nada a banda escura pintava
     essa caixa inteira com cantos quase retos -- lia como um bloco de cor
     colado na página, não como algo desenhado de propósito. Estreita mais
     que o resto da faixa clara, com raio generoso e sombra própria: agora
     lê como o mesmo tipo de peça que .final-cta já é (mesma família visual,
     mesmo --bg reaproveitado da hero), só que no meio do percurso em vez
     do fim. */
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px 40px;
  border-radius: 28px;
  background:
    radial-gradient(120% 160% at 50% -20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    var(--bg);
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1023.98px) {
  .section--how { padding: 56px 28px; border-radius: 22px; }
}
@media (max-width: 640px) {
  .section--how { padding: 44px 20px; border-radius: 18px; }
}

/* ---------- Banner final "comece agora" ---------- */
.final-cta {
  position: relative;
  /* Agora fica DENTRO de .light-zone (2026-08-19) -- precisa dos próprios
     tokens escuros de volta, senão herdaria os claros do zone e desapareceria
     no fundo. Mesma paleta de .section--how: as duas peças escuras citam a
     hero com a mesma cor, agora contra um fundo que de fato contrasta com
     elas em vez de se misturar. */
  --bg: #071310;
  --surface: #0d1f18;
  --primary: #23864d;
  --accent: #6fcb93;
  --text: #ffffff;
  --text2: rgba(255, 255, 255, 0.70);
  --text3: rgba(255, 255, 255, 0.45);
  --line: rgba(255, 255, 255, 0.10);
  color: var(--text);

  /* Raio pequeno (--radius-xl = 11px) lia como caixa reta num card deste
     tamanho -- mesmo raciocínio de .section--how, mesma família visual das
     duas peças escuras que citam a hero. Margem inferior menor: 120px
     davam ~220px de vazio liso até o FAQ (soma com o padding-top de
     .section), sem nada acontecendo ali -- sombra própria preenche o resto
     do "peso" que a margem grande tentava emular sem conseguir. */
  margin: 0 24px 64px;
  padding: 64px 32px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 160% at 50% -20%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 60%),
    var(--surface);
  /* Sombra em duas camadas: profundidade neutra por baixo (a peça se
     eleva do fundo claro) + um halo verde propositalmente visível por cima
     -- é o que faz o cartão ler como destaque, não só como "uma caixa mais
     escura no meio da página". */
  box-shadow:
    0 40px 80px -32px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(35, 134, 77, 0.08),
    0 24px 64px -20px rgba(35, 134, 77, 0.35);
  text-align: center;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(60% 100% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.final-cta__inner { position: relative; max-width: 560px; margin: 0 auto; }
.final-cta h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; line-height: 1.18; margin: 0 0 12px; }
.final-cta p { color: var(--text2); font-size: 15.5px; margin: 0 0 28px; }

.final-cta__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.final-cta__list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text2);
}
.final-cta__list svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }

.final-cta__note { margin: 20px 0 0; font-size: 12.5px; color: var(--text3); }

@media (max-width: 640px) {
  .final-cta { margin: 0 16px 48px; padding: 48px 22px; border-radius: 20px; }
  /* Botão de largura cheia no mobile encosta o texto de baixo direto na
     borda dele -- sem o espaçamento do desktop (onde o botão é só do
     tamanho do texto) pra separar visualmente os dois. */
  .final-cta__note { margin-top: 24px; }
}

/* ---------- Barra fixa de CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__text { font-size: 13.5px; color: var(--text2); }
.sticky-cta__text strong { color: var(--text); }

@media (max-width: 560px) {
  .sticky-cta__text { display: none; }
  .sticky-cta .btn { width: 100%; }
}

/* ---------- Link com sublinhado que revela do centro ---------- */
/* Inspirado no Link003 do Skiper UI (skiper-ui.com/v1/skiper40) --
   recriado em CSS puro (o original é um componente React/shadcn, stack
   que essa página não usa) só com pseudo-elemento + scaleX, sem JS. */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.link-underline:hover::after { transform: scaleX(1); }

/* ---------- Prova visual do produto no hero (só no celular) ---------- */

/* A landing era 100% texto até a quarta seção (~55% da página), e o Clarity
   mostra profundidade média de rolagem de 25%: quem vem do Instagram decidia
   sem nunca ver o app. Isto põe o produto na primeira tela.

   Só no celular porque é onde o problema existe -- no desktop a mesma prova
   já aparece no cluster de dispositivos da seção "aplicativo", e o hero tem
   largura pra respirar. Acima de 900px isto some. */
.hero__device {
  display: none;
}

@media (max-width: 900px) {
  /* O hero reservava 140px acima da tag pro cabeçalho fixo, que mede bem
     menos que isso. Sobrava espaço morto justamente na tela onde cada pixel
     decide se o produto aparece ou não: com 25% de rolagem média, o que não
     couber aqui praticamente não é visto. */
  .hero {
    padding-top: 100px;
  }

  /* No celular o mockup do app é a prova que mais converte (achado
     original: 25% de rolagem média, quem vem do Instagram decidia sem
     nunca ver o produto) -- e é a coisa que mais fica de fora da primeira
     tela. O botão secundário como pílula com borda (mesmo visual do
     desktop) custava ~50px de altura só pra oferecer uma opção que a
     maioria nem vai escolher (o CTA primário já resolve pra quase todo
     mundo). Vira link de texto: mesma escolha oferecida, uma fração da
     altura. Só no mobile -- no desktop os dois botões cabem lado a lado
     sem competir por altura nenhuma. */
  .hero__cta {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .hero__cta .btn--ghost {
    border: none;
    background: none;
    padding: 0;
    height: auto;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
  }
  .hero__cta .btn--ghost:hover,
  .hero__cta .btn--ghost:active {
    box-shadow: none;
    transform: none;
    background: none;
  }
  .hero__cta .btn--ghost::before {
    /* Sem isso o glow radial de .btn::before (pensado pra cima de um
       fundo sólido) aparece atrás do texto puro como uma mancha branca
       ao tocar -- não existe mais "fundo do botão" pra ele iluminar. */
    display: none;
  }

  .hero__device {
    display: flex;
    justify-content: center;
    margin: 18px auto 0;
    width: 100%;
  }

  .hero__device-frame {
    position: relative;
    width: min(268px, 68vw);
    /* Altura explícita + overflow: a moldura desenhava a imagem inteira
       (385px) enquanto a caixa reservava menos, e o telefone passava por
       cima da faixa de ícones do hero. Agora o que é reservado e o que é
       desenhado são a mesma coisa. O overflow também recorta o brilho
       giratório na forma da moldura. */
    height: 330px;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
    /* O desvanecimento é da MOLDURA inteira, não só da tela: assim o bezel e
       o fio de luz somem junto com a imagem. Quando o fade estava só na
       tela, o anel continuava aceso exatamente onde o telefone se dissolve,
       e sobrava um risco brilhante boiando no fundo (achado do Thiago).
       Sem o -webkit- o Safari ignora e a borda volta a ficar reta. */
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
    padding: 8px 8px 0;
    border-radius: 30px 30px 0 0;
    /* Moldura reta, de frente -- nada de perspectiva 3D em CSS, que nunca
       passa por aparelho de verdade e sempre lê como desenho. Aqui o que
       vende é a TELA; a moldura só precisa dizer "isto é um celular". */
    background: linear-gradient(160deg, #2c3a34, #131a17 60%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-bottom: 0;
    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.5),
      0 22px 46px -12px rgba(0, 0, 0, 0.75);
  }

  /* Alto-falante: dois pixels de detalhe que separam "moldura" de "caixa
     cinza com uma imagem dentro". */
  .hero__device-frame::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    z-index: 2;
  }

  /* Fio de luz que percorre a borda, como o anel de "online" de um avatar.
     Uma LINHA, não uma faixa: a versão anterior acendia os 8px inteiros do
     bezel e parecia um LED, não um detalhe.

     Três peças:
     1. O <span> é só a forma do anel -- `padding: 1.4px` mais máscara em
        content-box recorta o miolo e sobra um contorno de 1,4px que
        acompanha o mesmo raio da moldura.
     2. O <i> dentro dele é um quadrado maior que a moldura com um arco
        claro num gradiente cônico, e é ELE que gira.
     3. `mix-blend-mode: screen` faz a luz somar ao bezel em vez de pintar
        por cima -- é o que dá a leitura de brilho, e não de traço colorido.

     Por desempenho a animação mexe SÓ em transform, que o navegador resolve
     na GPU sem repintar a cada quadro. A alternativa óbvia (animar o ângulo
     do cônico via @property) repinta a área toda 60 vezes por segundo, que
     é o tipo de coisa que esquenta telefone. */
  .hero__device-glow {
    position: absolute;
    /* O lado de BAIXO do anel fica 80px abaixo da moldura, fora da área
       visível (o overflow recorta). O celular está cortado -- ele continua
       para fora da tela --, então ali não existe borda nenhuma pra luz
       percorrer, e fechar o retângulo desenhava um risco horizontal onde
       deveria haver só o corte (achado do Thiago). Sobram as três bordas
       que o aparelho realmente tem: esquerda, topo e direita. */
    inset: 0 0 -80px 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1.4px;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .hero__device-glow i {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    display: block;
    /* Arco curto e com núcleo claro: é o que lê como risco de laser
       passando, em vez de metade da borda acesa o tempo todo. */
    background: conic-gradient(
      from 0deg,
      transparent 0deg 296deg,
      color-mix(in srgb, var(--accent) 40%, transparent) 320deg,
      color-mix(in srgb, var(--accent) 90%, #fff) 341deg,
      #ffffff 345deg,
      color-mix(in srgb, var(--accent) 90%, #fff) 349deg,
      color-mix(in srgb, var(--accent) 40%, transparent) 356deg,
      transparent 360deg
    );
    /* Devagar de propósito: a 4,5s o ponto de luz corria e virava um
       chamariz disputando atenção com o botão. Em 11s ele passa como
       reflexo, que é o que o efeito deve sugerir -- tela ligada, produto
       vivo -- sem pedir o olho de volta a cada instante. */
    animation: brilhoBorda 11s linear infinite;
  }

  @keyframes brilhoBorda {
    to { transform: rotate(1turn); }
  }

  /* Quem pediu menos movimento no sistema não quer um ponto de luz girando
     em loop. Fica o contorno parado, que ainda dá o acabamento. */
  @media (prefers-reduced-motion: reduce) {
    .hero__device-glow i { animation: none; }
  }

  .hero__device-screen {
    /* Acima do brilho: a tela cobre o miolo e sobra só a borda acesa. */
    position: relative;
    z-index: 1;
    /* Altura amarrada à moldura (não mais aspect-ratio): a moldura tem
       altura fixa, e a imagem é recortada nela. */
    height: 100%;
    width: 100%;
    background: url("assets/app-home.webp") top center / 100% auto no-repeat;
    border-radius: 23px 23px 0 0;
  }
}

/* Aqui existia uma regra por ALTURA de viewport (max-height: 700px) pra
   encolher o telefone em tela baixa. Ela criava o efeito de "zoom no
   scroll" que o Thiago viu: no celular, a barra de endereço some quando
   você rola, a viewport CRESCE em altura, a media query deixa de valer e o
   telefone salta de 216px para 268px de largura no meio da rolagem.

   Regra: nada que define TAMANHO pode depender da altura da viewport em
   navegador de celular, porque essa altura muda sozinha durante o uso.
   O tamanho segue a largura (min(268px, 68vw)), que é estável.

   O motivo original da regra não se perde: o telefone fica DEPOIS do botão,
   então o tamanho dele não empurra o CTA para fora da primeira tela em
   nenhuma altura. */

/* Micro-copy de garantia, logo abaixo do botão. Deliberadamente discreta:
   é reforço pra quem já está decidindo, não uma segunda mensagem disputando
   atenção com a headline (que é o que ela virava como selo no topo). */
.hero__assurance {
  margin: 14px auto 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.5;
}

/* Reajuste de espaçamento (2026-08-19): style.css reserva 56px abaixo dos
   botões (.hero__cta) pensando num CTA único seguido só da micro-copy --
   com os dois botões + a estatística "Android" nova, isso deixava um vão
   grande acima da frase e quase nenhum abaixo dela, dois problemas com
   uma causa só. O espaço migra de "acima da frase" pra "abaixo dela",
   onde separa a frase da linha divisória de .hero__stats -- que é o
   lugar que precisava dele. */
.hero__cta {
  margin-bottom: 20px;
}
.hero__assurance {
  margin-bottom: 32px;
}

/* As 4 estatísticas cabiam em 760px (max-width de .hero__inner) só porque
   o texto mais longo até então era "CSV, PDF, XLSX e Darwin Core" -- "App
   nativo, na Play Store" é mais largo, e 4 × (min-width 150px + 48px de
   padding) já passava de 760px mesmo antes. Aperta o suficiente pra
   voltar a caber numa linha só, sem depender de o texto ser curto. */
.hero__stats {
  gap: 0 4px;
}
.hero__stats .stat {
  min-width: 0;
  flex: 1 1 150px;
  padding: 0 12px;
}

@media (max-width: 900px) {
  .hero__assurance {
    /* Uma linha só. Em duas ela deixa de ser um sussurro de reforço e vira
       um bloco de texto competindo com a headline -- que é exatamente o que
       fazia como selo no topo. */
    font-size: 11.5px;
    margin-top: 12px;
  }
}

/* ---------- Rolagem: cortar espaço vazio (só no celular) ---------- */

/* Medido em 390x844: a página tinha 7020px, 8,3 telas de rolagem, e boa
   parte disso era vão. Os números abaixo saíram todos de medição, não de
   gosto -- e são ajustes de CLASSE, não de um ponto: o mesmo par de valores
   produzia o mesmo buraco em todas as seções.

   Escopado nesta landing (o arquivo carrega depois do style.css) porque a
   home tem outro objetivo; se combinar, replico lá. */
@media (max-width: 900px) {
  /* 56 embaixo de uma seção + 56 em cima da seguinte davam 112px de nada
     entre um assunto e o próximo -- o buraco que aparecia entre o botão de
     "Funciona offline" e o título "Como funciona". */
  .section {
    padding: 36px 24px;
  }

  /* Título da seção colado no conteúdo que ele anuncia. 52px separavam a
     pergunta da resposta. */
  .section__head {
    margin-bottom: 30px;
  }

  /* O CTA reservava 56px pro que vinha depois; agora o que vem depois é a
     micro-copy de garantia, que pertence ao botão e precisa ler como uma
     coisa só com ele. */
  .hero__cta {
    margin-bottom: 0;
  }

  .hero__sub {
    margin-bottom: 26px;
  }

  .final-cta {
    margin-bottom: 56px;
    padding: 40px 22px;
  }

  .app-showcase__pitch {
    margin-bottom: 26px;
  }

  /* No mobile o botão sozinho, do tamanho do texto, sobrava um vão vazio
     enorme à direita (achado do Thiago, 2026-08-19) -- ficava parecendo
     mal ajustado embaixo de um parágrafo que ocupa a largura inteira.
     Largura total alinha com o texto acima e com o resto dos CTAs
     principais da página (hero, CTA final), que já são largos no
     celular. */
  .app-showcase__pitch .btn {
    width: 100%;
  }
}