/* Atraia Digital — identidade Clara */
:root {
  --marinho: #0B2545;
  --marinho-2: #13325C;
  --azul: #1F6FEB;
  --azul-escuro: #1557C0;
  --ceu: #DCEBFF;
  --ceu-2: #EEF5FF;
  --branco: #FFFFFF;
  --coral: #FF6B4A;
  --coral-escuro: #E8502E;
  --texto: #0B2545;
  --texto-suave: #4A5D78;
  --linha: #D3DEEE;
  --zap: #25D366;

  --titulo: "Plus Jakarta Sans", system-ui, sans-serif;
  --corpo: "Inter", system-ui, sans-serif;

  --margem: clamp(16px, 5vw, 64px);
  --largura: 1180px;
  --topo: 70px; /* altura do topo fixo; o site.js mede a real */

  /* Curvas de movimento: entradas, avisos que descem como gaveta, e o vai e volta dos pontinhos */
  --suave: cubic-bezier(0.23, 1, 0.32, 1);
  --gaveta: cubic-bezier(0.32, 0.72, 0, 1);
  --balanco: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font: 400 17px/1.6 var(--corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--titulo); line-height: 1.1; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--marinho); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.pular:focus { top: 12px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--azul); color: #fff; text-decoration: none;
  font: 700 16px/1 var(--titulo); letter-spacing: -0.005em;
  transition: background-color .2s, transform .15s var(--suave);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.botao:active { transform: scale(.97); }
@media (hover: hover) { .botao:hover { background: var(--azul-escuro); } }
.botao-claro { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
@media (hover: hover) { .botao-claro:hover { background: rgba(255,255,255,.08); } }
.botao-coral { background: var(--coral); }
@media (hover: hover) { .botao-coral:hover { background: var(--coral-escuro); } }
.botao-pequeno { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* Topo */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--margem);
  padding-top: max(14px, env(safe-area-inset-top));
  transition: background-color .3s, box-shadow .3s;
  color: #fff;
}
.topo.fixo { background: rgba(11,37,69,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topo.rolou { background: rgba(255,255,255,.94); color: var(--marinho); box-shadow: 0 1px 0 var(--linha); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 20px/1 var(--titulo); letter-spacing: -0.02em; white-space: nowrap; }
.botao { white-space: nowrap; }
.marca-pino { width: 26px; height: 31px; color: var(--azul); }
.menu { display: flex; gap: 28px; margin-left: auto; font-weight: 500; font-size: 15px; }
.menu a { text-decoration: none; opacity: .85; }
@media (hover: hover) { .menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; } }
@media (max-width: 820px) {
  .menu { display: none; }
  .topo .botao { margin-left: auto; }
  .topo { gap: 12px; }
  .marca { font-size: 18px; gap: 8px; }
  .marca-pino { width: 22px; height: 26px; }
  .botao-pequeno { min-height: 40px; padding: 0 14px; font-size: 14px; }
}

/* Abertura: texto e celular lado a lado, rolam juntos com a página */
.abertura {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 96px);
  min-height: 100svh;
  padding: 112px max(var(--margem), calc((100vw - var(--largura)) / 2)) 72px;
  background: var(--marinho); color: #fff;
}
.abertura-texto h1 {
  font-size: clamp(40px, 5.4vw, 80px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  text-wrap: balance;
}
.abertura-texto h1 .fim { margin-left: -0.06em; }
.abertura-sub { margin-top: 24px; max-width: 32em; font-size: clamp(17px, 1.5vw, 20px); color: #C9D8EE; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.abertura-celular { justify-self: center; position: relative; }

/* Mapa de ruas da abertura (criado pelo site.js) */
.mapa-fundo { position: absolute; inset: 0; z-index: -1; color: rgba(220,235,255,.06); }
.mapa-fundo svg { width: 100%; height: 100%; }

/* Entrada única ao abrir: texto e celular sobem de leve */
.abertura-texto > *, .abertura-celular { transition: opacity .6s var(--suave), translate .6s var(--suave); }
.js:not(.carregou) .abertura-texto > *,
.js:not(.carregou) .abertura-celular { opacity: 0; translate: 0 12px; }
.carregou .abertura-texto > :nth-child(2) { transition-delay: .06s; }
.carregou .abertura-texto > :nth-child(3) { transition-delay: .12s; }
.carregou .abertura-celular { transition-delay: .16s; }

/* Botão de pausar a cena do celular da abertura (o site.js mostra quando a cena existe) */
.pausar {
  position: absolute; right: 4px; top: calc(100% + 14px);
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(220,235,255,.3);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .15s ease, transform .12s var(--suave);
}
.pausar[hidden] { display: none; }
.pausar::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } /* área de toque de 46 px */
.pausar:active { transform: scale(.94); }
.pausar:focus-visible { border-radius: 50%; }
@media (hover: hover) { .pausar:hover { background: rgba(255,255,255,.16); } }
.pausar svg { width: 14px; height: 14px; }
.pausar-pausa { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pausar-tocar { fill: currentColor; display: none; }
.pausar.parado .pausar-pausa { display: none; }
.pausar.parado .pausar-tocar { display: inline; }

/* Seções */
section:not(.abertura) { padding: clamp(80px, 11vw, 140px) var(--margem); }
section > h2, .previa-texto h2 {
  font-size: clamp(32px, 4.4vw, 56px); font-weight: 600; max-width: 18ch;
}
.caminho > h2, .pacotes > h2, .publico > h2, .duvidas > h2, .pacotes-sub,
.pacotes-grade, .duvidas-lista { max-width: var(--largura); margin-left: auto; margin-right: auto; }

/* Caminho do cliente: um celular conta a história enquanto a página rola.
   No computador o texto rola à esquerda e o celular espera à direita, sempre abaixo do topo.
   O site.js desliza as telas conforme a rolagem e liga o que aparece em cada passo. */
.caminho { background: var(--ceu-2); }
.caminho > h2 { max-width: var(--largura); font-size: clamp(30px, 3.6vw, 48px); text-wrap: balance; }
.historia {
  position: relative; max-width: var(--largura); margin: 24px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(32px, 6vw, 96px);
}
.historia-palco { display: contents; }
.historia-progresso { display: none; }

.passos { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0 0 10vh; padding-bottom: 10svh; }
.passo {
  --h3: clamp(26px, 2.6vw, 34px);
  min-height: 70vh; min-height: 70svh; max-width: 34em;
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 20px; align-content: center;
}
.passo-n {
  position: relative; z-index: 1; align-self: start;
  width: 36px; height: 36px; margin-top: calc(var(--h3) * .55 - 18px);
  display: grid; place-items: center; border-radius: 50%;
  font: 600 15px/1 var(--titulo);
  background: var(--azul); color: #fff;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.passo h3 { font-size: var(--h3); font-weight: 600; letter-spacing: -0.02em; }
.passo p { grid-column: 2; margin-top: 12px; font-size: 18px; color: var(--texto-suave); }
.js .passo h3, .js .passo p { transition: opacity .3s ease; }
.js .passo:not(.ativo) h3, .js .passo:not(.ativo) p { opacity: .32; }
.js .passo:not(.ativo):not(.passado) .passo-n { background: #fff; color: var(--texto-suave); box-shadow: inset 0 0 0 2px var(--linha); }

/* Linha que liga os quatro números e vai enchendo com a rolagem (criada pelo site.js) */
.passos-linha { position: absolute; left: 17px; top: 0; width: 2px; border-radius: 2px; background: var(--linha); overflow: hidden; pointer-events: none; }
.passos-linha i { position: absolute; inset: 0; background: var(--azul); transform-origin: 50% 0; transform: scaleY(0); }

.historia-celular {
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: var(--topo);
  height: calc(100vh - var(--topo)); height: calc(100svh - var(--topo));
  display: grid; place-items: center;
}
.historia .celular { zoom: .82; }
/* As telas seguintes esperam à direita; ao rolar, cada uma entra empurrando a anterior */
.historia .tela-busca, .historia .tela-site { background: #fff; }
.historia .tela-site, .historia .tela-zap { transform: translateX(100%); box-shadow: -24px 0 40px -24px rgba(11,37,69,.4); }

/* Celular */
.celular {
  width: 320px; aspect-ratio: 9 / 18.5;
  border-radius: 46px; padding: 12px;
  background: var(--marinho);
  box-shadow: 0 32px 64px -28px rgba(4,14,28,.6), 0 0 0 1px rgba(220,235,255,.16), inset 0 0 0 2px var(--marinho-2);
}
@media (max-height: 820px) and (min-width: 821px) { .celular-abertura { zoom: .86; } }
/* Tela baixa (notebook de 700 px): o celular encolhe mais para o botão de pausar caber na tela */
@media (max-height: 740px) and (min-width: 821px) { .celular-abertura { zoom: .78; } }
.celular-tela {
  position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: #fff;
  font-size: 13px; line-height: 1.4;
}
.tela { position: absolute; inset: 0; padding: 44px 16px 16px; }

/* Barra de cima do celular: hora, sinal e bateria. Fica branca sobre o topo verde do WhatsApp */
.status {
  position: absolute; z-index: 5; left: 26px; right: 22px; top: 13px;
  display: flex; justify-content: space-between; align-items: center;
  font: 600 12px/1 var(--corpo); color: #111; pointer-events: none;
  transition: color .2s ease;
}
.status-icones { width: 54px; height: 11px; }
.status.clara { color: #fff; }

/* Busca e resultado no mapa */
.busca {
  display: flex; align-items: center; gap: 8px; min-height: 40px;
  border: 1px solid #DADCE0; border-radius: 999px; padding: 9px 14px; color: #202124;
  box-shadow: 0 1px 4px rgba(32,33,36,.12);
}
.busca-texto { white-space: nowrap; overflow: hidden; }
.lupa { width: 12px; height: 12px; border: 2px solid #5F6368; border-radius: 50%; position: relative; flex: none; }
.lupa::after { content: ""; position: absolute; width: 2px; height: 6px; background: #5F6368; right: -4px; bottom: -5px; rotate: -45deg; }
/* Cursor da busca: pisca parado, fica firme enquanto digita e some quando a busca sai */
.cursor { display: none; flex: none; width: 1.5px; height: 15px; margin-left: -7px; background: #1A73E8; }
.cena .cursor { display: block; }
.cena .busca:not(.escrevendo):not(.buscou) .cursor { animation: piscar 1s steps(1) infinite; }
.cena .busca.buscou .cursor { display: none; }
@keyframes piscar { 50% { opacity: 0; } }
/* Mapa desenhado no index.html (264 x 150): ruas, avenida, praça, rio e os outros negócios em cinza */
.mapa { position: relative; height: 150px; margin-top: 12px; border-radius: 14px; background: #EEF1F4; overflow: hidden; }
.mapa-ruas { display: block; }
/* Pino do negócio e a sombra dele no chão. O site.js muda o lugar a cada profissão */
.mapa-pino { position: absolute; left: 123px; top: 30px; width: 34px; height: 40px; color: var(--azul); filter: drop-shadow(0 3px 3px rgba(11,37,69,.22)); }
.mapa-sombra { position: absolute; left: 140px; top: 70px; width: 14px; height: 5px; margin: -2.5px 0 0 -7px; border-radius: 50%; background: rgba(11,37,69,.28); }
.resultado { margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid #E3E6EA; }
.resultado strong { display: block; color: #1A0DAB; font-size: 14px; font-weight: 600; }
.resultado-linha { display: block; color: #5F6368; font-size: 12px; }
.aberto { color: #188038; font-size: 12px; }
/* Enquanto a cena roda, pino e cartão esperam a busca terminar */
.cena .mapa-pino, .cena .mapa-sombra, .cena .resultado:not(.resultado-vazio) { opacity: 0; }

/* Mensagem do WhatsApp que desce do alto, como uma notificação de verdade (só aparece na cena) */
.notificacao {
  position: absolute; z-index: 6; left: 8px; right: 8px; top: 8px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 28px -8px rgba(11,37,69,.45), 0 0 0 1px rgba(11,37,69,.06);
  color: #111B21; font-size: 12.5px; line-height: 1.35;
  opacity: 0; transform: translateY(-130%);
}
.notificacao-icone { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--zap); color: #fff; }
.notificacao-icone svg { width: 22px; height: 22px; }
.notificacao-corpo small { display: block; color: #667085; font-size: 11px; }
.notificacao-corpo b { display: block; font-size: 13px; font-weight: 600; }
.resultado-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; }
.resultado-fotos i { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(160deg, #CFE0F7, #9DBDE8); }
.resultado-fotos i:nth-child(2) { background: linear-gradient(160deg, #E6EEF8, #B8CBE3); }
.resultado-fotos i:nth-child(3) { background: linear-gradient(160deg, #DCEBFF, #7FA8E0); }
.resultado-botoes { display: flex; gap: 6px; margin-top: 10px; }
.resultado-botoes span { flex: 1; text-align: center; padding: 6px 0; border-radius: 999px; border: 1px solid #DADCE0; color: #1A73E8; font-weight: 500; font-size: 11.5px; }
.resultado-vazio { display: grid; gap: 7px; opacity: .7; }
.resultado-vazio i { height: 8px; border-radius: 4px; background: #EDF1F6; }
.resultado-vazio i:first-child { width: 58%; height: 10px; background: #DDE5F0; }
.resultado-vazio i:last-child { width: 76%; }
.resultado-botoes .ativo { background: var(--zap); border-color: var(--zap); color: #fff; }

.sugestoes { list-style: none; margin: 10px 0 0; padding: 0; color: #202124; }
.sugestoes li { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 10px; font-size: 13.5px; }
.sugestoes .lupa { width: 10px; height: 10px; border-width: 1.5px; }

/* Site do negócio */
.mini-topo { display: flex; justify-content: space-between; font-family: var(--titulo); color: var(--marinho); font-size: 15px; }
.mini-foto { height: 170px; margin-top: 14px; border-radius: 16px; background: linear-gradient(150deg, #DCEBFF 0%, #A9C7F2 55%, #6C9BE0 100%); }
.mini-titulo { margin-top: 14px; font: 800 19px/1.15 var(--titulo); color: var(--marinho); letter-spacing: -0.02em; }
.mini-texto { margin-top: 8px; color: #5A6B82; font-size: 12px; }
.mini-botao { display: block; margin-top: 14px; padding: 11px; border-radius: 999px; text-align: center; background: var(--zap); color: #fff; font-weight: 600; }
.mini-linhas { margin-top: 18px; display: grid; gap: 7px; }
.mini-linhas i { height: 8px; border-radius: 4px; background: #EDF1F6; }
.mini-linhas i:nth-child(2) { width: 82%; } .mini-linhas i:nth-child(3) { width: 64%; }

/* Conversa no WhatsApp */
.tela-zap { padding: 0; background: #EFE7DD; }
.zap-topo { display: flex; align-items: center; gap: 10px; padding: 44px 14px 10px; background: #075E54; color: #fff; }
.zap-topo small { display: block; opacity: .8; font-size: 11px; }
.zap-foto { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(150deg, #DCEBFF, #6C9BE0); flex: none; }
.zap-conversa { padding: 14px 12px; display: grid; gap: 8px; align-content: start; }
.msg { max-width: 82%; padding: 8px 10px; border-radius: 10px; background: #fff; color: #111B21; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.msg.eu { justify-self: end; background: #D9FDD3; transform-origin: 100% 100%; }
.msg.ela { justify-self: start; transform-origin: 0 100%; }
/* "Digitando..." ocupa o lugar da resposta e some quando ela chega */
.digitando { grid-row: 2; grid-column: 1; justify-self: start; align-self: start; display: flex; gap: 4px; padding: 11px 12px; transform-origin: 0 100%; }
.digitando + .msg { grid-row: 2; grid-column: 1; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: digitar 1.2s var(--balanco) infinite; animation-play-state: paused; }
.digitando.ligado i { animation-play-state: running; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digitar { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -2px; } }
.confirmado {
  margin-top: 4px; display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -12px rgba(11,37,69,.4);
  transform-origin: 50% 100%;
}
.confirmado b { display: block; font-family: var(--titulo); font-size: 15px; color: var(--marinho); }
.confirmado small { color: #5A6B82; }
.check { width: 36px; height: 36px; border-radius: 50%; background: var(--azul); position: relative; flex: none; }
.check::after { content: ""; position: absolute; left: 13px; top: 8px; width: 8px; height: 15px; border: solid #fff; border-width: 0 3px 3px 0; rotate: 45deg; }
/* Lembrete desce do alto da tela, como uma notificação de verdade */
.aviso {
  position: absolute; left: 10px; right: 10px; top: 38px; z-index: 4;
  padding: 10px 12px; border-radius: 16px; background: #fff;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.35); color: #111B21; font-size: 12px;
  border-left: 4px solid var(--coral);
  translate: 0 -170%; opacity: 0;
  transition: translate .5s var(--gaveta), opacity .25s ease;
}
.aviso b { display: block; color: var(--coral-escuro); font-size: 11.5px; }
.aviso.ligado { translate: 0 0; opacity: 1; }

/* O que aparece no celular conforme a história anda (o site.js liga cada peça na hora certa) */
.js .historia .sugestoes li {
  opacity: 0; translate: 0 6px;
  transition: opacity .4s var(--suave), translate .4s var(--suave), background-color .15s ease;
}
.js .historia .tela-busca.ligado li { opacity: 1; translate: 0 0; }
.historia .tela-busca.ligado li:nth-child(2) { transition-delay: 60ms, 60ms, 0s; }
.historia .tela-busca.ligado li:nth-child(3) { transition-delay: 110ms, 110ms, 0s; }
.historia .tela-busca.ligado li:nth-child(4) { transition-delay: 150ms, 150ms, 0s; }
.historia .tela-busca.ligado li:nth-child(5) { transition-delay: 180ms, 180ms, 0s; }
.historia .tela-busca.ligado li:nth-child(6) { transition-delay: 200ms, 200ms, 0s; }
.historia .sugestoes li.ligado { background-color: #F1F3F4; }
.historia .mini-botao { transition: scale .16s var(--suave), background-color .16s ease; }
.historia .mini-botao.ligado { scale: .95; background-color: #1DA851; }
.js .historia .zap-conversa > [data-em] {
  opacity: 0; translate: 0 8px; scale: .96;
  transition: opacity .32s var(--suave), translate .32s var(--suave), scale .32s var(--suave);
}
.js .historia .zap-conversa > .ligado { opacity: 1; translate: 0 0; scale: 1; }

@media (max-width: 820px) {
  :root { --topo: 68px; }
  .abertura { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 120px var(--margem) 56px; gap: 48px; }
  .celular-abertura { zoom: .78; }

  /* Caminho no celular: o palco inteiro fica na tela, com o texto do passo em cima e o celular embaixo */
  section.caminho { padding-left: 0; padding-right: 0; }
  .caminho > h2 { padding: 0 var(--margem); }
  .historia { display: block; margin-top: 28px; }
  .passos { padding: 0 var(--margem); }
  .passo {
    --h3: 21px;
    min-height: 0; padding-bottom: 24px;
    grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px;
  }
  .passo-n { width: 28px; height: 28px; margin-top: calc(var(--h3) * .55 - 14px); font-size: 13px; }
  .passo p { grid-column: 1 / -1; margin-top: 8px; font-size: 16px; }
  .historia-celular { position: static; height: auto; padding-top: 8px; }
  .passos-linha { display: none; }

  .js .historia { height: calc(100vh - var(--topo) + 280vh); height: calc(100svh - var(--topo) + 280svh); }
  .js .historia-palco {
    display: flex; flex-direction: column;
    position: sticky; top: var(--topo);
    height: calc(100vh - var(--topo)); height: calc(100svh - var(--topo));
    padding-top: 16px;
  }
  .js .historia-progresso { display: flex; gap: 6px; margin: 0 var(--margem) 14px; }
  .historia-progresso i { flex: 1; height: 3px; border-radius: 2px; background: var(--linha); overflow: hidden; }
  .historia-progresso b { display: block; height: 100%; background: var(--azul); transform-origin: 0 50%; transform: scaleX(0); }
  .js .passos { display: grid; }
  .js .passo {
    grid-area: 1 / 1; padding-bottom: 0; align-content: start;
    opacity: 0; translate: 16px 0;
    transition: opacity .3s var(--suave), translate .3s var(--suave);
  }
  .js .passo.passado { translate: -16px 0; }
  .js .passo.ativo { opacity: 1; translate: 0 0; }
  .js .passo:not(.ativo) h3, .js .passo:not(.ativo) p { opacity: 1; }
  .js .historia-celular {
    flex: 1 1 0; min-height: 0; margin-top: 16px; padding: 0; align-self: stretch;
    display: flex; justify-content: center; align-items: flex-start; overflow: hidden;
  }
  .historia-celular.corta {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
  }
}

/* Prévia */
.previa {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px);
  max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; align-items: start;
}
.previa-texto { position: sticky; top: 110px; }
.previa-texto p { margin-top: 20px; font-size: 18px; color: var(--texto-suave); max-width: 30em; }
.previa-etapas { list-style: none; margin: 0; padding: 0; display: grid; }
.previa-etapas li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--linha); }
.previa-etapas li:last-child { border-bottom: 1px solid var(--linha); }
.num { font: 600 34px/1 var(--titulo); color: var(--azul); }
.previa-etapas b { font: 600 20px/1.25 var(--titulo); letter-spacing: -0.01em; }
.previa-etapas p { margin-top: 6px; color: var(--texto-suave); }
@media (max-width: 820px) {
  .previa { grid-template-columns: 1fr; }
  .previa-texto { position: static; }
}

/* Pacotes */
.pacotes { background: var(--marinho); color: #fff; }
.pacotes-sub { margin-top: 16px; color: #A9BBD6; font-size: 18px; }
.pacotes-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 48px; align-items: stretch; }
.pacote { padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--marinho-2); }
.pacote h3 { font-size: 26px; font-weight: 600; }
.pacote-frase { margin-top: 8px; color: #A9BBD6; }
.pacote ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pacote li { position: relative; padding-left: 26px; }
.pacote li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border: solid var(--ceu); border-width: 0 0 2px 2px; rotate: -45deg; }
.pacote-principal { background: #fff; color: var(--marinho); display: flex; flex-direction: column; }
.pacote-principal .pacote-frase { color: var(--texto-suave); }
.pacote-principal li::before { border-color: var(--azul); }
.pacote-principal .botao { margin-top: auto; align-self: flex-start; }
.pacote-principal ul { margin-bottom: 32px; }
.preco { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.preco-valor { font: 800 clamp(48px, 6vw, 68px)/1 var(--titulo); letter-spacing: -0.04em; }
.preco-nota { color: var(--texto-suave); }
.preco-mensal { margin-top: 6px; font-weight: 600; }
.pacotes-maiores { display: grid; gap: 20px; }
.pacote-inclui { margin-top: 18px; font-weight: 600; color: var(--ceu); }
.pacote-inclui + ul { margin-top: 10px; }
.link-forte { display: inline-block; margin-top: 20px; font-weight: 600; color: #fff; text-underline-offset: 5px; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
@media (max-width: 900px) { .pacotes-grade { grid-template-columns: 1fr; } }

/* Público */
.publico-sub { max-width: var(--largura); margin: 16px auto 0; font-size: 18px; color: var(--texto-suave); }
.profissoes {
  max-width: var(--largura); margin: 48px auto 0;
  font: 600 clamp(24px, 3.6vw, 46px)/1.25 var(--titulo); letter-spacing: -0.03em;
  color: var(--marinho); text-wrap: balance;
}
.profissoes span { white-space: nowrap; }
.profissoes .profissoes-fim { color: var(--azul); }

/* Dúvidas */
.duvidas { background: var(--ceu-2); }
.duvidas-lista { margin-top: 40px; max-width: 820px; margin-left: auto; margin-right: auto; }
.duvidas > h2 { max-width: 820px; }
details { border-bottom: 1px solid var(--linha); }
details:first-child { border-top: 1px solid var(--linha); }
summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font: 600 19px/1.3 var(--titulo); letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; translate: 0 -70%;
  border: solid var(--azul); border-width: 0 2.5px 2.5px 0; rotate: 45deg; transition: rotate .25s var(--suave), translate .25s var(--suave);
}
details[open] summary::after { rotate: 225deg; translate: 0 -20%; }
details p { padding: 0 0 24px; color: var(--texto-suave); max-width: 40em; }

/* Final */
.final { text-align: center; background: var(--marinho); color: #fff; display: grid; justify-items: center; }
.final-pino { width: 64px; height: 76px; color: var(--azul); }
.final h2 { margin-top: 28px; font-size: clamp(34px, 5vw, 64px); font-weight: 600; max-width: 14ch; }
.final p { margin-top: 16px; color: #C9D8EE; font-size: 18px; }
.final .botao { margin-top: 32px; }

/* Rodapé */
.rodape {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
  padding: 32px var(--margem) calc(32px + env(safe-area-inset-bottom));
  background: #081B33; color: #A9BBD6; font-size: 15px;
}
.rodape-marca { display: flex; align-items: center; gap: 10px; color: #fff; font: 800 18px/1 var(--titulo); }
.rodape-contato { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 0; padding: 0; }
/* Contatos com ícone: WhatsApp, Instagram e o lugar (as palavras ficam só para leitor de tela) */
.rodape-contato li, .rodape-contato a { display: inline-flex; align-items: center; gap: 8px; }
.rodape-contato a { padding: 6px 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.rodape-contato a:focus-visible { text-decoration: underline; }
@media (hover: hover) { .rodape-contato a:hover { color: #fff; text-decoration: underline; } }
.rodape-icone { width: 20px; height: 20px; flex: none; }
.rodape a { text-underline-offset: 4px; }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 820px) { .rodape { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* No computador, o botão flutuante do WhatsApp fica no canto: o rodapé termina antes dele */
@media (min-width: 821px) { .rodape { padding-right: max(var(--margem), 100px); } }

/* WhatsApp flutuante */
.whats-flutuante {
  position: fixed; z-index: 40; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--zap); color: #fff; box-shadow: 0 12px 28px -8px rgba(0,0,0,.4);
  opacity: 0; scale: .6; pointer-events: none;
  transition: opacity .3s var(--suave), scale .3s var(--suave);
}
.whats-flutuante svg { width: 30px; height: 30px; }
.whats-flutuante.visivel { opacity: 1; scale: 1; pointer-events: auto; }

/* Menos movimento: as telas trocam com um esmaecer simples e nada desliza */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}