/* ==========================================================================
   Farol dos Achados — landing page
   Paleta oficial da marca (seção 4 do briefing). A única cor fora da paleta
   é o verde do WhatsApp, usado exclusivamente nos botões de CTA.
   ========================================================================== */

:root {
  /* Marca */
  --azul-mar:       #002050;
  --azul-profundo:  #001030;
  --vermelho-farol: #D81010;
  --vermelho-escuro:#A50000;
  --branco-farol:   #EDE6DE;
  --dourado-luz:    #F9DC54;

  /* Derivadas (sempre a partir das cores acima) */
  --branco-suave:   rgba(237, 230, 222, .72);
  --linha:          rgba(237, 230, 222, .12);
  --superficie:     rgba(0, 32, 80, .55);

  /* Exceção deliberada: verde do WhatsApp, só nos botões de CTA */
  --zap:            #25D366;
  --zap-hover:      #1EBE5A;

  --raio:      18px;
  --raio-g:    26px;
  --largura:   560px;   /* medida de leitura, mobile-first */

  --fonte-display: "Anton", "Arial Narrow", Impact, system-ui, sans-serif;
  --fonte-texto:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* o halo de luz é mais largo que a tela de propósito: o corte fica aqui,
     nos dois elementos, senão o celular ganha rolagem lateral */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--azul-profundo);
  color: var(--branco-farol);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  /* espaço pra barra fixa de CTA no celular */
  padding-bottom: env(safe-area-inset-bottom);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; }

p { margin: 0; }

a { color: inherit; }

/* --------------------------------------------------------------------------
   1. Faixa de escassez
   -------------------------------------------------------------------------- */
/* Vermelho = urgência. A faixa de alerta é o primeiro sinal da marca na tela. */
.faixa-escassez {
  background: linear-gradient(90deg, var(--vermelho-escuro), var(--vermelho-farol) 50%, var(--vermelho-escuro));
  color: #fff;
  padding: 8px 14px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(216, 16, 16, .35);
}

.faixa-escassez .raio { color: var(--dourado-luz); }

.faixa-escassez p {
  margin: 0 auto;
  max-width: 640px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
}

.faixa-escassez strong { font-weight: 800; letter-spacing: .04em; }

.ponto { opacity: .45; }

/* --------------------------------------------------------------------------
   Estrutura geral das seções
   -------------------------------------------------------------------------- */
main { display: block; }

.topo,
.secao {
  position: relative;
  padding: 0 20px;
  margin: 0 auto;
  max-width: var(--largura);
  text-align: center;
}

.secao { padding-top: 56px; }

/* Halo: a "luz do farol" — único elemento decorativo, feito só com gradiente */
.halo {
  position: absolute;
  top: -120px; left: 50%;
  width: 780px; height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(249, 220, 84, .20) 0%,
              rgba(249, 220, 84, .07) 38%,
              rgba(0, 16, 48, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.halo-baixo { top: -60px; height: 520px; }

.topo > *:not(.halo),
.secao > *:not(.halo) { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   2/3. Topo: logo, selo, título, subtítulo
   -------------------------------------------------------------------------- */
/* No celular o topo é compacto de propósito: o botão verde precisa caber
   inteiro na primeira tela, mesmo com a barra do navegador ocupando espaço
   (medido num Android de 384 × 679 px úteis, que é o seu Brave). */
.topo {
  padding-top: 18px;
  padding-bottom: 8px;
}

.logo img,
.logo-video {
  display: block;
  width: 136px;
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55),
              0 0 0 1px rgba(237, 230, 222, .08);
}

/* o vídeo é quadrado: reserva o espaço antes de carregar pra página não pular */
.logo-video {
  aspect-ratio: 1 / 1;
  height: 136px;
  object-fit: cover;
  background: var(--azul-profundo);
}

.selo-canal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 12px;
  padding: 7px 16px;
  border: 1px solid rgba(216, 16, 16, .75);
  border-radius: 999px;
  background: rgba(216, 16, 16, .16);
  color: var(--branco-farol);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

h1 {
  font-family: var(--fonte-display);
  font-size: clamp(32px, 10vw, 56px);
  line-height: .96;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* O trecho de ênfase do título é um bloco dourado — a luz do farol caindo
   sobre a promessa. Texto em azul-marinho: 13:1 de contraste. */
h1 em {
  display: block;
  margin: .08em 0;
  padding: .1em .24em .16em;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFE87C, var(--dourado-luz));
  box-shadow: 0 12px 30px rgba(249, 220, 84, .28);
  color: var(--azul-profundo);
  font-style: normal;
}

.subtitulo {
  margin: 12px auto 0;
  max-width: 460px;
  color: var(--branco-suave);
  font-size: 15.5px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   4. Botão de CTA (verde do WhatsApp) + microcopy de confiança
   -------------------------------------------------------------------------- */
.botao-zap {
  position: relative;
  overflow: hidden;              /* segura a onda do clique dentro do botão */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 26px auto 0;
  padding: 19px 24px;
  border-radius: 999px;
  background: var(--zap);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  /* neon: um halo curto e colado no botão + um brilho largo e difuso */
  box-shadow: 0 0 14px rgba(37, 211, 102, .65),
              0 0 38px rgba(37, 211, 102, .38),
              0 10px 28px rgba(0, 0, 0, .35);
  animation: neon 2.6s ease-in-out infinite;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}

/* o neon "respira" devagar, pra chamar o olho sem virar pisca-pisca */
@keyframes neon {
  0%, 100% {
    box-shadow: 0 0 14px rgba(37, 211, 102, .55),
                0 0 34px rgba(37, 211, 102, .30),
                0 10px 28px rgba(0, 0, 0, .35);
  }
  50% {
    box-shadow: 0 0 22px rgba(37, 211, 102, .85),
                0 0 58px rgba(37, 211, 102, .50),
                0 10px 28px rgba(0, 0, 0, .35);
  }
}

.botao-zap:hover,
.botao-zap:focus-visible {
  background: var(--zap-hover);
  transform: translateY(-2px);
}

/* o toque: afunda, escurece e o neon recolhe — dá a sensação de botão físico */
.botao-zap:active {
  background: #17A94E;
  transform: scale(.975) translateY(1px);
  animation: none;
  box-shadow: 0 0 8px rgba(37, 211, 102, .45),
              0 2px 8px rgba(0, 0, 0, .4),
              inset 0 3px 10px rgba(0, 0, 0, .28);
  transition-duration: .06s;
}

/* onda que sai de onde o dedo tocou (criada pelo script.js) */
.onda-clique {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  opacity: .7;
  pointer-events: none;
  animation: onda .55s ease-out forwards;
}

@keyframes onda {
  to { transform: scale(2.6); opacity: 0; }
}

.botao-zap-grande {
  padding: 21px 18px;
  font-size: 19px;
}

/* Ícone do WhatsApp em SVG embutido (nenhuma biblioteca externa) */
.icone-zap {
  width: 24px; height: 24px;
  flex: 0 0 24px;
  background: currentColor;
  -webkit-mask: var(--zap-svg) center / contain no-repeat;
          mask: var(--zap-svg) center / contain no-repeat;
  --zap-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.61.14-.14.3-.35.45-.53.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.38-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.63.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.13h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.16 8.16 0 0 1-1.25-4.36c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.25 8.24z'/%3E%3C/svg%3E");
}

.confianca {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--branco-suave);
  font-size: 13.5px;
}

.confianca li { display: inline-flex; align-items: center; gap: 5px; }

/* botão e selos do topo mais juntos no celular (ver comentário do .topo) */
.topo .botao-zap { margin-top: 18px; padding: 17px 24px; }
.topo .confianca { margin-top: 12px; }

.confianca li::before {
  content: "✓";
  color: var(--zap);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   5. Mockup do celular
   -------------------------------------------------------------------------- */
.secao-mockup {
  padding: 40px 20px 0;
  text-align: center;
}

.celular {
  width: 268px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 38px;
  background: linear-gradient(160deg, #0b1c34, #050d1c);
  box-shadow: 0 0 0 1px rgba(237, 230, 222, .14),
              0 26px 60px rgba(0, 0, 0, .6);
}

.celular-tela {
  position: relative;
  overflow: hidden;
  border-radius: 29px;
  background: #ECE5DD; /* fundo de conversa */
  color: #0d1418;
  text-align: left;
}

.zap-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
  background: var(--azul-mar);
  color: var(--branco-farol);
}

.zap-voltar {
  width: 0; height: 0;
  border: 5px solid transparent;
  border-right-color: currentColor;
  opacity: .8;
}

.zap-avatar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(216, 16, 16, .3);
  font-size: 15px;
}

.zap-nome {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
}

.zap-nome small {
  font-size: 10.5px;
  font-weight: 400;
  opacity: .7;
}

.zap-rolagem {
  height: 316px;
  overflow: hidden;
  padding: 10px 10px 0;
  /* esfumaçado curto só na última faixa: suaviza o corte da conversa
     sem borrar o texto das mensagens */
  mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
}

/* rolagem lenta em loop, simulando o grupo "em ação" */
.zap-lista { animation: rolar 22s linear infinite; }

@keyframes rolar {
  0%, 8%    { transform: translateY(0); }
  46%, 54%  { transform: translateY(calc(-50% + 40px)); }
  92%, 100% { transform: translateY(0); }
}

.zap-msg {
  position: relative;
  margin-bottom: 10px;
  padding: 8px 9px 16px;
  border-radius: 10px 10px 10px 2px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  font-size: 12px;
  line-height: 1.42;
}

.zap-foto {
  display: grid;
  place-items: center;
  height: 84px;
  margin-bottom: 7px;
  border-radius: 7px;
  background: linear-gradient(140deg, #dfe7ef, #c9d6e4);
  font-size: 34px;
}

.zap-titulo { color: var(--vermelho-farol); font-weight: 800; letter-spacing: .01em; }

.zap-msg s { color: #7b8b95; }

.zap-msg strong { color: var(--vermelho-escuro); font-size: 13.5px; }

.zap-link { margin-top: 3px; color: #1a6fd4; }

.zap-hora {
  position: absolute;
  right: 9px; bottom: 5px;
  color: #8fa0aa;
  font-size: 9.5px;
}

.zap-rodape {
  padding: 9px 10px;
  background: #E3DCD4;
  color: #5d6b73;
  font-size: 10.5px;
  text-align: center;
}

/* quando o GIF/vídeo real entrar no lugar do exemplo */
.tela-midia {
  display: block;
  width: 100%;
  height: 316px;
  object-fit: cover;
}

.legenda-mockup {
  margin: 14px auto 0;
  max-width: 320px;
  color: rgba(237, 230, 222, .5);
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   6. Descrição dos achadinhos
   -------------------------------------------------------------------------- */
.cartao {
  padding: 26px 22px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--superficie);
}

/* filete vermelho como assinatura do bloco */
.cartao h2::before {
  content: "";
  display: block;
  width: 54px; height: 4px;
  margin: 0 auto 14px;
  border-radius: 2px;
  background: var(--vermelho-farol);
}

.cartao h2 {
  margin-bottom: 10px;
  font-family: var(--fonte-display);
  font-size: 25px;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.cartao p { color: var(--branco-suave); font-size: 16px; }

/* --------------------------------------------------------------------------
   6b. O que você encontra no grupo — cards com ícone
   -------------------------------------------------------------------------- */
.secao-beneficios { padding-top: 44px; }

.secao-beneficios h2 {
  font-family: var(--fonte-display);
  font-size: clamp(26px, 8vw, 34px);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.beneficios {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.beneficios li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--superficie);
}

.beneficios h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.beneficio-icone {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 13px;
}

.beneficio-icone svg { width: 22px; height: 22px; }

/* os ícones alternam entre as duas cores de destaque da marca */
.icone-vermelho {
  background: linear-gradient(160deg, var(--vermelho-farol), var(--vermelho-escuro));
  box-shadow: 0 5px 14px rgba(216, 16, 16, .28);
  color: #fff;
}

.icone-dourado {
  background: linear-gradient(160deg, #FFE87C, var(--dourado-luz));
  box-shadow: 0 5px 14px rgba(249, 220, 84, .24);
  color: var(--azul-profundo);
}

/* --------------------------------------------------------------------------
   7. Prova social
   -------------------------------------------------------------------------- */
.secao-prova { padding-top: 44px; }

.numero-membros {
  line-height: 1;
  color: var(--dourado-luz);
  text-shadow: 0 0 38px rgba(249, 220, 84, .45);
}

/* número grande, palavra "membros" pequena embaixo — assim o bloco continua
   bonito com 300 ou com 300 mil */
.membros-numero {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(46px, 15vw, 64px);
  letter-spacing: .01em;
}

.membros-rotulo {
  display: block;
  margin-top: 2px;
  color: var(--branco-farol);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.numero-membros + .prova-texto { margin-top: 10px; }

.prova-texto {
  margin: 0 auto;
  max-width: 420px;
  font-size: 17px;
  color: var(--branco-farol);
}

/* --------------------------------------------------------------------------
   8. Como funciona
   -------------------------------------------------------------------------- */
.chapeu {
  margin-bottom: 8px;
  color: var(--dourado-luz);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.secao-passos h2 {
  font-family: var(--fonte-display);
  font-size: clamp(30px, 9vw, 40px);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.passos {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.passos li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}

.passos li:last-child { border-bottom: 0; }

.passo-num {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: linear-gradient(160deg, #FFE87C, var(--dourado-luz));
  box-shadow: 0 6px 18px rgba(249, 220, 84, .26);
  color: var(--azul-profundo);
  font-family: var(--fonte-display);
  font-size: 21px;
}

.passos h3 { font-size: 17px; font-weight: 800; }

.passos p { margin-top: 3px; color: var(--branco-suave); font-size: 15px; }

/* --------------------------------------------------------------------------
   9. CTA final
   -------------------------------------------------------------------------- */
.secao-cta-final {
  padding-top: 60px;
  padding-bottom: 56px;
}

/* o fecho da página ganha um card próprio, com brilho, pra se destacar
   do resto da rolagem no momento da decisão */
.cartao-final {
  padding: 30px 16px 34px;
  border: 1px solid rgba(237, 230, 222, .14);
  border-radius: var(--raio-g);
  background: linear-gradient(180deg, rgba(0, 32, 80, .78), rgba(0, 16, 48, .92));
  box-shadow: 0 0 70px rgba(216, 16, 16, .20),
              0 24px 50px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(237, 230, 222, .07);
}

.pilula-vagas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 18px;
  border: 1px solid rgba(249, 220, 84, .55);
  border-radius: 999px;
  background: rgba(249, 220, 84, .1);
  color: var(--dourado-luz);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* mesma lógica do título do topo, em versão mais discreta: o vermelho marca
   a promessa, o verde fica reservado só pro botão logo abaixo */
.secao-cta-final h2 em {
  font-style: normal;
  color: var(--vermelho-farol);
  text-shadow: 0 0 34px rgba(216, 16, 16, .45);
}

.secao-cta-final h2 {
  margin: 0 auto;
  max-width: 420px;
  font-family: var(--fonte-display);
  font-size: clamp(30px, 9.4vw, 42px);
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
footer {
  padding: 26px 20px calc(30px + env(safe-area-inset-bottom));
  border-top: 3px solid var(--vermelho-farol);
  background: #000A20;
  text-align: center;
  font-size: 13.5px;
  color: var(--branco-suave);
}

footer a { color: var(--dourado-luz); text-decoration: none; }

footer a:hover { text-decoration: underline; }

footer .copy { margin-top: 6px; font-size: 12px; opacity: .6; }

/* --------------------------------------------------------------------------
   Barra fixa de CTA (celular)
   -------------------------------------------------------------------------- */
.barra-fixa {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(0, 16, 48, .88);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
  transform: translateY(110%);
  transition: transform .28s ease;
}

.barra-fixa[hidden] { display: block; }          /* controlada pelo transform */

.barra-fixa.visivel { transform: translateY(0); }

.barra-fixa .botao-zap {
  margin: 0 auto;
  padding: 15px 20px;
  font-size: 17px;
}

/* quando a barra está visível, garante que nada fique escondido atrás dela */
body.com-barra-fixa { padding-bottom: 88px; }

/* --------------------------------------------------------------------------
   Aviso que surge no topo (só na versão B do teste A/B)
   -------------------------------------------------------------------------- */
.notificacao {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(420px, calc(100% - 24px));
  padding: 11px 44px 11px 11px;
  border: 1px solid rgba(249, 220, 84, .45);
  border-left: 4px solid var(--vermelho-farol);
  border-radius: 16px;
  background: rgba(0, 16, 48, .95);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .55),
              0 0 26px rgba(249, 220, 84, .14);
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}

.notificacao.visivel {
  opacity: 1;
  transform: translate(-50%, 0);
}

.notificacao-avatar {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
}

.notificacao-corpo { min-width: 0; }

.notificacao-titulo {
  color: var(--dourado-luz);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.notificacao-texto {
  margin-top: 1px;
  color: var(--branco-farol);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.notificacao-fechar {
  position: absolute;
  top: 50%; right: 6px;
  width: 34px; height: 34px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--branco-suave);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.notificacao-fechar:hover { background: rgba(237, 230, 222, .08); }

/* --------------------------------------------------------------------------
   Acessibilidade e foco
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--dourado-luz);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .zap-lista { animation: none; }
  /* o neon para de pulsar, mas o botão continua com brilho fixo */
  .botao-zap,
  .onda-clique { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Desktop — adaptação do mobile (nunca o contrário)
   -------------------------------------------------------------------------- */
@media (min-width: 760px) {
  body { font-size: 18px; }

  .barra-fixa { display: none; }

  body.com-barra-fixa { padding-bottom: 0; }

  .topo,
  .secao { max-width: 680px; }

  .topo { padding-top: 48px; }

  /* no computador sobra altura: o topo volta às medidas mais arejadas */
  .faixa-escassez { padding: 11px 16px; }
  .faixa-escassez p { font-size: 13.5px; line-height: 1.35; }
  .selo-canal { margin: 22px 0 18px; padding: 9px 18px; font-size: 12.5px; }
  .subtitulo { margin-top: 18px; }
  .topo .botao-zap { margin-top: 26px; padding: 19px 24px; }
  .topo .confianca { margin-top: 16px; }
  .confianca { gap: 6px 18px; font-size: 14.5px; }

  .logo img,
  .logo-video { width: 200px; height: 200px; border-radius: 22px; }

  .beneficios li { padding: 16px 20px; }

  .cartao-final { padding: 38px 32px 40px; }

  h1 { font-size: 62px; }

  .subtitulo { font-size: 18px; max-width: 540px; }

  .secao-mockup { padding-top: 56px; }

  .celular { width: 300px; }

  .zap-rolagem { height: 360px; }

  .tela-midia { height: 360px; }

  .cartao { padding: 34px 32px; }

  .passos li { padding: 20px 0; }

  .secao-cta-final h2 { font-size: 46px; max-width: 520px; }

  .botao-zap { max-width: 400px; }
}

/* Telas largas: topo em duas colunas (logo ao lado do texto) */
@media (min-width: 1040px) {
  .topo {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas:
      "logo selo"
      "logo titulo"
      "logo sub"
      "logo cta"
      "logo confianca";
    align-content: center;
    gap: 0 48px;
    max-width: 1000px;
    padding-top: 64px;
    text-align: left;
  }

  .topo .logo      { grid-area: logo; align-self: center; }
  .topo .selo-canal{ grid-area: selo; justify-self: start; margin-top: 0; }
  .topo h1         { grid-area: titulo; }
  .topo .subtitulo { grid-area: sub; margin-left: 0; }
  .topo .botao-zap { grid-area: cta; margin-left: 0; }
  .topo .confianca { grid-area: confianca; justify-content: flex-start; }

  .logo img,
  .logo-video { width: 300px; height: 300px; }

  h1 { font-size: 66px; }

  /* o bloco vermelho continua ocupando a própria linha: como inline, o
     preenchimento dele invadia a linha de cima do título */
  h1 em { display: block; }

  .halo { top: -180px; width: 1100px; height: 800px; }
}