/* Previa A do site do Sites Especiais.
   Base visual: peca Onda de Particulas (Flow Wave) do acervo, reescrita para
   suportar texto legivel por cima, toque no celular e menos movimento.
   Sem biblioteca de estilo, sem cookie, sem servidor de terceiro. */

:root {
  --preto: #01040c;
  --painel: rgba(4, 11, 24, 0.84);
  --painel-forte: rgba(2, 7, 17, 0.92);
  --borda: rgba(126, 203, 255, 0.18);
  --borda-viva: rgba(62, 231, 255, 0.55);
  --ciano: #3ee7ff;
  --ciano-suave: #9fe9ff;
  --azul: #2b8cff;
  --branco: #ffffff;
  --texto: rgba(233, 245, 255, 0.86);
  --texto-fraco: rgba(212, 231, 248, 0.8);
  --ambar: #FFB020;
  --verde: #25d366;
  --verde-fundo: #1aa856;
  --largura: 1160px;
  --raio: 20px;
  --transicao: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--preto);
}

body {
  min-width: 320px;
  margin: 0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  /* 1.0625rem e 17px na preferencia padrao, e CONTINUA 17px para quem nao mexeu em nada.
     `17px` cravado ANULA o tamanho de letra que a pessoa escolheu no navegador ou no aparelho,
     que e o mesmo defeito que a gente denuncia nesses leads, em outra porta. Medido com dois
     controles antes e depois. */
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(20, 84, 160, 0.42), transparent 70%),
    radial-gradient(900px 700px at 88% 18%, rgba(10, 118, 150, 0.22), transparent 72%),
    var(--preto);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  font-family: "Space Grotesk", "Inter", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--branco);
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 3px;
  border-radius: 6px;
}

.pular {
  position: fixed;
  top: -200px;
  left: 16px;
  z-index: 120;
  padding: 14px 18px;
  min-height: 44px;
  border-radius: 12px;
  background: var(--ciano);
  color: #01131a;
  font-weight: 600;
}

.pular:focus {
  top: 14px;
}

/* ---------- camadas de fundo ---------- */

.onda {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.camada-grade,
.camada-vinheta {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.camada-grade {
  background-image:
    linear-gradient(to right, rgba(120, 200, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 200, 255, 0.055) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(1000px 700px at 50% 30%, rgba(0, 0, 0, 0.85), transparent 78%);
  -webkit-mask-image: radial-gradient(1000px 700px at 50% 30%, rgba(0, 0, 0, 0.85), transparent 78%);
}

.camada-vinheta {
  background:
    radial-gradient(1200px 780px at 50% 42%, transparent 44%, rgba(1, 4, 12, 0.72) 100%),
    linear-gradient(to bottom, rgba(1, 4, 12, 0.55), transparent 22%, transparent 78%, rgba(1, 4, 12, 0.72));
}

/* ---------- cabecalho ---------- */

.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: linear-gradient(to bottom, rgba(1, 5, 14, 0.9), rgba(1, 5, 14, 0.55));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(126, 203, 255, 0.14);
}

.topo__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, var(--largura));
  margin: 0 auto;
  padding: 12px 20px;
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: 0.01em;
  color: var(--branco);
}

.topo__simbolo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--ciano);
  filter: drop-shadow(0 0 14px rgba(62, 231, 255, 0.45));
  transition: color var(--transicao);
}

.topo__simbolo svg {
  width: 100%;
  height: 100%;
}

.topo__marca:hover .topo__simbolo {
  color: var(--branco);
}

.topo__nome {
  white-space: nowrap;
}

.topo__progresso {
  height: 2px;
  background: rgba(126, 203, 255, 0.12);
}

.topo__progresso span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--avanco, 0));
  transform-origin: left center;
  background: linear-gradient(to right, var(--azul), var(--ciano));
  box-shadow: 0 0 12px rgba(62, 231, 255, 0.7);
}

/* ---------- botao de WhatsApp ---------- */

.zap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--verde), var(--verde-fundo));
  color: #04240f;
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(18, 140, 90, 0.34);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.zap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}

.zap:hover,
.zap:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(26, 168, 86, 0.48);
}

.zap:hover::after {
  animation: brilho 820ms ease;
}

@keyframes brilho {
  from {
    left: -60%;
    opacity: 0.9;
  }
  to {
    left: 120%;
    opacity: 0;
  }
}

.zap__icone {
  width: 20px;
  height: 20px;
  flex: none;
  background: #04240f;
  -webkit-mask-image: var(--icone-zap);
  mask-image: var(--icone-zap);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

:root {
  --icone-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm5.8 14.06c-.24.68-1.4 1.3-1.93 1.35-.53.05-1.02.24-3.45-.72-2.93-1.16-4.77-4.22-4.91-4.42-.14-.2-1.16-1.57-1.16-3 0-1.42.75-2.12 1.01-2.41.27-.29.58-.36.78-.36.19 0 .39 0 .56.01.18.01.42-.07.65.5.24.58.82 2 .89 2.15.07.14.12.31.02.51-.1.19-.15.31-.29.48-.15.17-.31.38-.44.51-.14.14-.29.29-.12.58.17.29.75 1.25 1.62 2.02 1.11.99 2.05 1.3 2.34 1.45.29.14.46.12.63-.07.17-.19.72-.85.92-1.14.19-.29.39-.24.65-.14.27.1 1.69.8 1.98.94.29.15.48.22.55.34.07.13.07.72-.17 1.4z'/%3E%3C/svg%3E");
}

.zap--topo .zap__texto {
  display: none;
}

.zap--flutuante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 58px;
  height: 58px;
  min-height: 58px;
  padding: 0;
  border-radius: 50%;
}

.zap--flutuante .zap__icone {
  width: 27px;
  height: 27px;
}

.zap--flutuante .zap__texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zap--flutuante::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(37, 211, 102, 0.5);
  animation: pulso 2800ms ease-out infinite;
}

@keyframes pulso {
  0% {
    transform: scale(0.92);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.22);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ---------- trilha lateral de secoes ---------- */

.trilha {
  position: fixed;
  top: 50%;
  right: 22px;
  z-index: 55;
  transform: translateY(-50%);
  display: none;
}

.trilha__lista {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trilha__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  color: var(--texto-fraco);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* o rotulo sai do fluxo de proposito: se ocupasse largura dentro do link, o
   alvo de clique invisivel passaria de 200px por cima do texto da pagina */
.trilha__rotulo {
  position: absolute;
  right: 100%;
  margin-right: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--transicao), transform var(--transicao);
}

.trilha__ponto {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(126, 203, 255, 0.55);
  transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.trilha__rotulo {
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(1, 5, 14, 0.9);
}

/* o rotulo so aparece no toque do ponteiro: se aparecesse sozinho na secao
   atual, ele cairia por cima do texto do painel em telas de 1200 a 1400 */
.trilha__link:hover .trilha__rotulo,
.trilha__link:focus-visible .trilha__rotulo {
  opacity: 1;
  transform: none;
}

.trilha__link[aria-current="true"] {
  color: var(--branco);
}

.trilha__link[aria-current="true"] .trilha__ponto {
  background: var(--ciano);
  border-color: var(--ciano);
  transform: scale(1.25);
  box-shadow: 0 0 16px rgba(62, 231, 255, 0.9);
}

/* ---------- estrutura ---------- */

.page {
  position: relative;
  z-index: 2;
}

.secao {
  position: relative;
  padding: clamp(74px, 11vh, 132px) 20px;
  /* o cabecalho e fixo: sem esta margem, o topo da secao para debaixo dele
     quando alguem usa a trilha lateral ou um link interno */
  scroll-margin-top: 92px;
}

.heroi,
#conteudo {
  scroll-margin-top: 92px;
}

.secao__inner {
  width: min(100%, var(--largura));
  margin: 0 auto;
}

.painel {
  position: relative;
  padding: clamp(28px, 4.4vw, 56px);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--painel);
  box-shadow: 0 30px 80px rgba(0, 6, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.painel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--borda-viva), transparent);
}

.titulo-secao {
  max-width: 24ch;
  font-size: clamp(1.7rem, 3.5vw, 2.85rem);
}

/* o titulo de assistente e o ultimo que usa este <em>. Nao apagar a regra por
   parecer orfa: foi assim que o CSS desta pagina ja quebrou uma vez */
.titulo-secao em {
  font-style: normal;
  background: linear-gradient(110deg, var(--ciano), var(--azul));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- rotulo de secao ----------
   Diz em que parte da pagina a pessoa esta antes de ela ler o titulo. O ponto
   nao pisca: o "aceso" e a sombra parada, e e por isso que nada daqui precisa
   entrar no bloco de menos movimento.

   Em Space Grotesk, que a pagina ja carrega, e nao numa fonte mono nova: a
   pagina ja carrega Three.js, e uma familia a mais custa mais do que o rotulo
   ganha. */
.rotulo-secao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ciano-suave);
}

.rotulo-secao__ponto {
  flex: none;   /* sem isto ele vira oval quando o cartao aperta */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ciano);
  box-shadow: 0 0 12px var(--ciano);
}

/* ---------- titulo em dois tons ----------
   A linha curta vem viva e a longa vem apagada. E o que faz o olho pegar a
   ideia antes de ler a frase inteira.

   O valor do apagado foi escolhido contra o painel desta pagina, nao copiado:
   3,54 : 1 sobre o painel e 3,28 : 1 no pior quadro do campo de particulas,
   contra o minimo de 3 : 1, que so vale porque este texto e grande e em
   negrito. NAO usar .tom-fosco em paragrafo, subtitulo, item de lista, legenda
   nem no .tese__frase: nenhum deles alcanca o tamanho que sustenta esse valor. */
.tom-vivo,
.tom-fosco {
  display: block;
}

.tom-vivo { color: var(--branco); }
.tom-fosco { color: rgba(200, 222, 240, 0.45); }

/* ---------- heroi ---------- */

.sem-onda .heroi::before {
  display: none;
}


.heroi {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 120px 20px 96px;
  text-align: center;
}

/* a sombra existe para o texto do heroi nao concorrer com as particulas. Ela ja
   entra ligada para nao piscar quando a onda termina de carregar, e sai quando
   a pagina descobre que nao vai ter onda nenhuma (sem WebGL, economia de dados)
   e a sombra so escureceria um fundo que ja e escuro. */
.heroi::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(840px 540px at 50% 47%, rgba(1, 4, 12, 0.92) 0%, rgba(1, 4, 12, 0.78) 44%, rgba(1, 4, 12, 0.38) 68%, transparent 86%);
}

.heroi__inner {
  position: relative;
  width: min(100%, 880px);
}

.heroi__titulo {
  margin: 0 0 26px;
}

.heroi__linha {
  display: block;
}

.heroi__linha--um {
  font-weight: 500;
  font-size: clamp(2.5rem, 7.4vw, 5.1rem);
  letter-spacing: -0.035em;
  background: linear-gradient(104deg, #ffffff 18%, var(--ciano-suave) 62%, var(--azul) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heroi__linha--dois {
  font-size: clamp(1.32rem, 3.3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--branco);
  text-shadow: 0 0 34px rgba(62, 231, 255, 0.45);
}

.heroi__texto {
  max-width: 62ch;
  margin: 0 auto 32px;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--texto);
  text-shadow: 0 2px 16px rgba(1, 4, 12, 0.9);
}

@keyframes desce {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(-5px);
  }
  50% {
    opacity: 1;
    transform: translateY(5px);
  }
}

.js .heroi__linha--um,
.js .heroi__linha--dois,
.js .heroi__texto,
.js .heroi__acao {
  animation: entra 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .heroi__linha--dois {
  animation-delay: 140ms;
}

.js .heroi__texto {
  animation-delay: 260ms;
}

.js .heroi__acao {
  animation-delay: 380ms;
}

.js .heroi__rolar {
  animation: entra 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 520ms both;
}

@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------- salto: a ponte entre a capa e a pagina ----------
   Primeira secao depois do heroi. Sem painel e sem borda: a ideia e que a capa
   continue descendo mais um pouco antes de a pagina virar conteudo em caixa.
   O corpo do titulo fica entre o do heroi (ate 5.1rem) e o das outras secoes
   (ate 2.85rem), para a escada de tamanhos descer sem degrau. */

.salto {
  /* menos respiro em cima que a .secao padrao: esta nasce colada na capa */
  padding-top: clamp(44px, 7vh, 86px);

  /* O bloco entra girado em perspectiva (ver mais abaixo), e um elemento girado
     em 3D projeta uma caixa VISUAL mais larga que a caixa de layout. No Chrome de
     celular isso estica a viewport inteira: medido em 360px, o documento ia a 416
     e o cabecalho fixo saia da tela com o botao de WhatsApp junto. O
     `overflow-x: hidden` do body esconde a barra e NAO impede esse crescimento.
     `clip` corta a projecao aqui, sem criar area rolavel e sem prender position
     sticky, que e o que `hidden` faria. Conferido com padaria-melo de controle. */
  overflow-x: clip;
}

.salto__bloco {
  position: relative;
  max-width: 50ch;
}

/* A onda do fundo e position: fixed, entao ela passa por tras desta secao tambem.
   As outras secoes resolvem isso com .painel, que tem fundo proprio. Aqui nao
   cabe caixa, entao entra uma poca escura de borda difusa: o texto ganha fundo
   sem a secao ganhar moldura. A vinheta geral so escurece as pontas da tela e
   deixa justamente o meio, onde este texto fica, com a onda acesa por tras. */
.salto__bloco::before {
  content: "";
  position: absolute;
  inset: -38px -72px -28px -44px;
  z-index: -1;
  background: radial-gradient(118% 104% at 26% 50%,
    rgba(1, 4, 12, 0.92) 0%,
    rgba(1, 4, 12, 0.78) 46%,
    rgba(1, 4, 12, 0) 100%);
  pointer-events: none;
}

.salto__titulo {
  /* a regra generica corta em 24ch, e aqui as duas linhas sao mais longas */
  max-width: none;
  margin: 14px 0 0;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* as duas linhas do titulo quebram sozinhas em larguras intermediarias e deixam
   uma palavra orfa na segunda linha. balance reparte as linhas em vez de encher
   a primeira ate o fim. Navegador que nao conhece a propriedade ignora e quebra
   como antes, entao nada depende disto para funcionar. */
.salto__titulo .tom-vivo,
.salto__titulo .tom-fosco {
  text-wrap: balance;
}

.salto__texto {
  text-wrap: pretty;
}

/* a linha viva pega o mesmo gradiente da primeira linha do heroi: e o que
   amarra visualmente a secao a capa que ela esta comentando */
.salto__titulo .tom-vivo {
  font-weight: 500;
  background: linear-gradient(104deg, #ffffff 16%, var(--ciano-suave) 60%, var(--azul) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* o recorte do gradiente mede a caixa da linha, e sem isto o rabo do "g" de
     "negocio" fica cortado */
  padding-bottom: 0.08em;
}

/* a cor vem da regra geral de .tom-fosco (0.45 de alfa). Nao baixar: sobre o
   preto da pagina ela da cerca de 3.5:1, e 3:1 e o minimo para texto grande.
   Uma tentativa anterior com 0.42 reprovava. */
.salto__titulo .tom-fosco {
  font-weight: 500;
}

.salto__texto {
  max-width: 58ch;
  margin: 22px 0 0;
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  line-height: 1.62;
  color: var(--texto);
}

/* O assunto da secao e dimensao, entao ela entra inclinada no espaco e assenta.
   Isto sobrescreve o translateY de .revela, por isso redefine os dois estados.
   A regra de menos movimento la embaixo tambem cita .salto__bloco: sem isso
   esta regra, por ser mais especifica, venceria o reset de acessibilidade. */
.js .salto__bloco {
  transform: perspective(900px) rotateX(7deg) translateY(26px);
  transform-origin: 50% 0;
}

.js .salto__bloco.is-visible {
  transform: perspective(900px) rotateX(0deg) translateY(0);
}

/* ---------- como o cliente decide: jornada com aparelho ---------- */

.jornada {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  margin-top: 38px;
  grid-template-columns: 1fr;
  align-items: center;
}

.jornada__passos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jornada__passo {
  display: flex;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
}

.jornada__passo:hover {
  border-color: rgba(126, 203, 255, 0.2);
  background: rgba(10, 26, 48, 0.5);
}

.jornada__passo[aria-current="step"] {
  border-color: rgba(62, 231, 255, 0.4);
  background: linear-gradient(120deg, rgba(12, 34, 62, 0.8), rgba(2, 7, 17, 0.5));
}

.jornada__num {
  flex: none;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  color: transparent;
  -webkit-text-stroke: 1px rgba(62, 231, 255, 0.6);
  transition: color var(--transicao);
}

.jornada__passo[aria-current="step"] .jornada__num {
  color: var(--ciano);
  -webkit-text-stroke-color: transparent;
}

.jornada__corpo {
  display: block;
}

.jornada__rotulo {
  display: block;
  margin-bottom: 3px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--branco);
}

.jornada__linha {
  display: block;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

/* --- o aparelho e as cenas --- */

.jornada__palco {
  display: flex;
  justify-content: center;
}

.aparelho {
  position: relative;
  width: min(100%, 292px);
  aspect-ratio: 292 / 540;
  padding: 12px;
  border: 1px solid rgba(126, 203, 255, 0.26);
  border-radius: 38px;
  background: linear-gradient(160deg, rgba(16, 38, 66, 0.9), rgba(2, 6, 15, 0.94));
  box-shadow: 0 40px 90px rgba(0, 6, 18, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.aparelho__alto {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 62px;
  height: 5px;
  border-radius: 99px;
  background: rgba(126, 203, 255, 0.24);
  transform: translateX(-50%);
}

.aparelho__tela {
  position: relative;
  height: 100%;
  padding: 38px 16px 16px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(3, 12, 26, 0.96), rgba(1, 4, 12, 0.98));
  overflow: hidden;
}

.cena {
  position: absolute;
  inset: 38px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* sem script so a primeira cena existe, senao as quatro se empilhariam na
   mesma posicao. Com script as quatro voltam a existir e se revezam. */
.cena:not(.cena--ativa) {
  display: none;
}

.js .cena {
  display: flex;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.js .cena--ativa {
  opacity: 1;
  transform: none;
}

/* cena 1: a busca */

.busca {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(126, 203, 255, 0.24);
  border-radius: 99px;
  background: rgba(10, 26, 48, 0.62);
}

.busca__lupa {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.6px solid var(--ciano);
  border-radius: 50%;
}

.busca__lupa::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 6px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--ciano);
  transform: rotate(45deg);
}

/* a mesma busca reaparece nas cenas 2 e 3, so que apagada: ali ela e contexto
   do que ja foi digitado, nao a acao do momento */
.busca--fria {
  opacity: 0.55;
}

.busca__texto {
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--ciano-suave);
  white-space: nowrap;
}

.busca__cursor {
  width: 1.5px;
  height: 13px;
  background: var(--ciano);
}

.cena--ativa .busca__cursor {
  animation: pisca 1.1s steps(1) infinite;
}

@keyframes pisca {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.fila {
  display: grid;
  gap: 10px;
}

.achado {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(126, 203, 255, 0.12);
  border-radius: 12px;
  background: rgba(8, 20, 38, 0.6);
}

.achado__capa {
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(120deg, rgba(43, 140, 255, 0.24), rgba(62, 231, 255, 0.1));
}

.achado__barra {
  height: 5px;
  width: 52%;
  border-radius: 99px;
  background: rgba(159, 233, 255, 0.24);
}

.achado__barra--larga {
  width: 82%;
  background: rgba(159, 233, 255, 0.4);
}

/* cenas 2 e 3: as opcoes lado a lado */

.lado-a-lado {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: auto;
  margin-bottom: auto;
}

.aba {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 9px 8px 11px;
  border: 1px solid rgba(126, 203, 255, 0.16);
  border-radius: 10px;
  background: rgba(8, 20, 38, 0.66);
  transition: opacity var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.aba__topo {
  height: 3px;
  width: 60%;
  border-radius: 99px;
  background: rgba(159, 233, 255, 0.26);
}

.aba__capa {
  height: 40px;
  border-radius: 6px;
  background: linear-gradient(130deg, rgba(43, 140, 255, 0.22), rgba(62, 231, 255, 0.08));
}

.aba__barra {
  height: 4px;
  border-radius: 99px;
  background: rgba(159, 233, 255, 0.3);
}

.aba__barra--curta {
  width: 58%;
}

.aba--apagada {
  opacity: 0.38;
}

.aba--eleita {
  border-color: var(--borda-viva);
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(62, 231, 255, 0.24), 0 14px 34px rgba(0, 6, 18, 0.6);
}

.aba--eleita .aba__capa {
  background: linear-gradient(130deg, rgba(62, 231, 255, 0.42), rgba(43, 140, 255, 0.2));
}

.aba__visto {
  position: absolute;
  top: -9px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ciano);
  color: #01131a;
  box-shadow: 0 0 16px rgba(62, 231, 255, 0.6);
}

.aba__visto svg {
  width: 11px;
  height: 11px;
}

.rodape-cena {
  height: 4px;
  width: 44%;
  margin: 0 auto;
  border-radius: 99px;
  background: rgba(159, 233, 255, 0.18);
}

/* cena 4: a volta */

.volta {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: auto 0;
  text-align: center;
}

.volta__anel {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(62, 231, 255, 0.4);
  background: radial-gradient(circle at 40% 32%, rgba(62, 231, 255, 0.22), transparent 66%);
  color: var(--ciano);
  box-shadow: 0 0 30px rgba(62, 231, 255, 0.2);
}

.volta__anel svg {
  width: 26px;
  height: 26px;
}

.volta__endereco {
  padding: 7px 13px;
  border: 1px solid rgba(62, 231, 255, 0.3);
  border-radius: 99px;
  background: rgba(10, 26, 48, 0.6);
  font-size: 0.72rem;
  color: var(--ciano-suave);
  white-space: nowrap;
}

.volta__barra {
  height: 5px;
  width: 74%;
  border-radius: 99px;
  background: rgba(159, 233, 255, 0.22);
}

.volta__barra--curta {
  width: 48%;
}

/* ---------- posicionamento ---------- */

.tese {
  display: grid;
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
  grid-template-columns: 1fr;
  margin-bottom: 26px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: linear-gradient(140deg, rgba(10, 30, 56, 0.86), rgba(2, 7, 17, 0.9));
  box-shadow: 0 30px 80px rgba(0, 6, 18, 0.5);
  overflow: hidden;
}

.tese__figura {
  position: relative;
  margin: 0;
  min-height: 220px;
}

.tese__figura img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  /* a foto ja nasce sobre preto: o modo de mistura dissolve a borda dela
     no painel em vez de deixar um retangulo colado no fundo */
  mix-blend-mode: screen;
  opacity: 0.92;
}

.tese__figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 7, 17, 0.92), transparent 46%);
  pointer-events: none;
}

.tese__texto {
  padding: 0 clamp(22px, 3.6vw, 40px) clamp(26px, 3.6vw, 40px);
}

.tese__frase {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.62rem);
  font-weight: 500;
  line-height: 1.26;
  color: var(--branco);
  margin-bottom: 14px;
}

.tese__apoio {
  max-width: 52ch;
  color: var(--texto);
}

.cartao:hover,
.cartao:focus-within {
  transform: translateY(-5px);
  border-color: rgba(62, 231, 255, 0.42);
}

.cartao:hover::after,
.cartao:focus-within::after {
  opacity: 1;
}

/* ---------- o que fazemos ---------- */

.entregas {
  display: grid;
  gap: 14px;
  margin-top: 40px;
  grid-template-columns: 1fr;
}


/* ---------- cartoes de dado, usados pelas duas secoes novas ---------- */

.dados {
  display: grid;
  gap: 16px;
  margin-top: 34px;
  grid-template-columns: 1fr;
}

/* ---------- secao: onde as pessoas procuram ---------- */

.medidor {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 38px;
  padding: clamp(30px, 5vw, 52px) 24px;
  border: 1px solid rgba(62, 231, 255, 0.24);
  border-radius: var(--raio);
  background:
    radial-gradient(620px 260px at 50% 0%, rgba(43, 140, 255, 0.24), transparent 72%),
    rgba(2, 8, 20, 0.66);
  overflow: hidden;
  text-align: center;
}

/* pulso lento atras do numero, para a secao nao parecer uma tabela parada */
.medidor::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 231, 255, 0.14), transparent 62%);
  transform: translateX(-50%);
  animation: respira 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes respira {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.12); }
}

/* ---------- secao: a pergunta feita para a inteligencia artificial ---------- */

.dialogo {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 38px;
  padding: clamp(20px, 3.4vw, 32px);
  border: 1px solid rgba(126, 203, 255, 0.2);
  border-radius: var(--raio);
  background: linear-gradient(170deg, rgba(6, 18, 36, 0.86), rgba(1, 5, 14, 0.9));
  box-shadow: 0 30px 80px rgba(0, 6, 18, 0.5);
}

.dialogo__pergunta {
  justify-self: end;
  max-width: min(100%, 46ch);
  padding: 13px 18px;
  border: 1px solid rgba(62, 231, 255, 0.3);
  border-radius: 18px 18px 5px 18px;
  background: rgba(14, 40, 70, 0.7);
  color: var(--branco);
  font-size: 0.99rem;
  /* a altura precisa ser a da frase inteira desde o primeiro quadro, senao a
     caixa cresce letra a letra e empurra a conversa toda para baixo */
  min-height: 1.6em;
}

.dialogo__digitado {
  white-space: pre-wrap;
}

.dialogo--digitando .dialogo__digitado::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.14em;
  background: var(--ciano);
  animation: pisca 1.1s steps(1) infinite;
}

.dialogo__resposta {
  justify-self: start;
  width: min(100%, 60ch);
  padding: 18px 20px;
  border: 1px solid rgba(126, 203, 255, 0.16);
  border-radius: 18px 18px 18px 5px;
  background: rgba(6, 16, 32, 0.8);
}

.dialogo__quem {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ciano-suave);
}

.dialogo__ponto {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(62, 231, 255, 0.35);
  background: rgba(4, 14, 28, 0.9);
  color: var(--ciano);
}

.dialogo__ponto svg {
  width: 13px;
  height: 13px;
}

/* tres pontinhos enquanto "pensa": so aparecem no estado pensando */
.dialogo__pensa {
  display: none;
  gap: 5px;
  padding: 2px 0 4px;
}

.dialogo--pensando .dialogo__pensa {
  display: flex;
}

.dialogo__pensa i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ciano);
  opacity: 0.35;
  animation: salta 1.05s ease-in-out infinite;
}

.dialogo__pensa i:nth-child(2) { animation-delay: 0.16s; }
.dialogo__pensa i:nth-child(3) { animation-delay: 0.32s; }

@keyframes salta {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

.dialogo__passo {
  font-size: 1rem;
  color: var(--texto);
}

.dialogo__passo + .dialogo__passo {
  margin-top: 10px;
}

.js .dialogo__passo {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .dialogo__passo.aparece {
  opacity: 1;
  transform: none;
}

.dialogo__fontes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(126, 203, 255, 0.12);
}

.dialogo__fontesRotulo {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(212, 231, 248, 0.55);
}

.chip {
  padding: 6px 12px;
  border: 1px solid rgba(126, 203, 255, 0.2);
  border-radius: 99px;
  background: rgba(10, 26, 48, 0.6);
  font-size: 0.78rem;
  color: var(--texto-fraco);
  white-space: nowrap;
}

.chip--seu {
  border-color: var(--borda-viva);
  background: rgba(14, 44, 74, 0.8);
  color: var(--branco);
  box-shadow: 0 0 22px rgba(62, 231, 255, 0.28);
}

/* a ressalva que segura a secao de IA no chao: e ela que impede a demonstracao
   de virar promessa. Fica em destaque, nao em letra miuda. */
.recado {
  margin-top: 26px;
  padding: 22px 24px;
  border-left: 2px solid var(--ciano);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(to right, rgba(12, 34, 62, 0.7), rgba(2, 7, 17, 0.3));
  font-size: 1rem;
  color: var(--texto);
}

.dialogo__nota {
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(212, 231, 248, 0.6);
}

/* ---------- a balanca: duas barras que se enchem ao aparecer ---------- */

.balanca {
  display: grid;
  gap: 22px;
  margin-top: 38px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(62, 231, 255, 0.2);
  border-radius: var(--raio);
  background:
    radial-gradient(560px 240px at 20% 0%, rgba(43, 140, 255, 0.2), transparent 70%),
    rgba(2, 8, 20, 0.62);
}

.balanca__linha {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: 1fr auto;
  align-items: baseline;
}

.balanca__rotulo {
  font-size: 1rem;
  color: var(--texto);
}

.balanca__valor {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.balanca__trilho {
  grid-column: 1 / -1;
  position: relative;
  height: 12px;
  border-radius: 99px;
  background: rgba(126, 203, 255, 0.1);
  overflow: hidden;
}

.balanca__barra {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: linear-gradient(to right, var(--azul), var(--ciano));
  /* a largura vem de --fatia; a barra nasce cheia para quem nao tem script,
     e o .js abaixo e que a faz crescer */
  width: var(--fatia, 0%);
  box-shadow: 0 0 22px rgba(62, 231, 255, 0.35);
}

.js .balanca__barra {
  width: 0;
  transition: width 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--atraso-barra, 0ms);
}

.js .balanca.is-visible .balanca__barra {
  width: var(--fatia, 0%);
}

/* a segunda barra e a que interessa: fica mais apagada para o olho comparar */
.balanca__linha--fraca .balanca__barra {
  background: linear-gradient(to right, rgba(43, 140, 255, 0.5), rgba(62, 231, 255, 0.5));
  box-shadow: none;
}

.balanca__linha--fraca .balanca__valor {
  color: var(--ciano-suave);
}

.balanca__nota {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(126, 203, 255, 0.12);
  font-size: 1.02rem;
  color: var(--texto);
}

.balanca__fonte {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(212, 231, 248, 0.55);
}

/* variante para o cartao cujo destaque e uma frase curta, nao um numero:
   no tamanho do numero a frase estouraria a largura do cartao */
.dado__num--frase {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.15;
}

@media (min-width: 720px) {
  .dados {
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  }

  .balanca__linha {
    grid-template-columns: 1fr auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .medidor::before,
  .dialogo__pensa i {
    animation: none;
  }

  .js .balanca__barra {
    transition: none;
    width: var(--fatia, 0%);
  }

  .js .dialogo__passo {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .dado:hover,
  .medidor:hover {
    transform: none;
  }
}

/* ---------- o cartao de oferta ----------
   Regra que organiza a cor: TODO ambar da pagina vive dentro deste retangulo.
   Fora dele, zero ambar. Cor de realce que aparece em muito lugar deixa de ser
   realce, que e exatamente a queixa que originou este bloco.

   Medido: #FFB020 da 11,21:1 sobre o fundo #01040c, e 1,23:1 contra o ciano.
   Quase o mesmo brilho do ciano, ou seja, ele NAO se separa por luminosidade,
   so por matiz (148,7 graus de distancia). Por isso o ambar nunca entra como
   cor de texto pequeno: onde aparece, vem preenchido, em traco ou em corpo
   grande. Escolhido por medicao e nao por gosto: magenta e violeta, as
   candidatas obvias contra ciano, colapsam dentro dele em deuteranopia
   (distancia 35,6 e 45,4, contra 113,9 do ambar). */

.oferta {
  padding-top: clamp(48px, 7vh, 84px);
}

.pacote {
  position: relative;
  padding: clamp(34px, 4.6vw, 54px) clamp(22px, 4vw, 48px) clamp(28px, 4vw, 44px);
  border: 1px solid var(--ambar);
  border-radius: var(--raio);
  background:
    radial-gradient(760px 300px at 50% 0%, rgba(255, 176, 32, 0.09), transparent 70%),
    rgba(6, 14, 28, 0.9);
  box-shadow: 0 40px 100px rgba(0, 6, 18, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* a etiqueta e o unico bloco de cor chapada da pagina inteira */
.pacote__etiqueta {
  position: absolute;
  top: 0;
  left: clamp(22px, 4vw, 48px);
  transform: translateY(-50%);
  padding: 7px 15px;
  border-radius: 7px;
  background: var(--ambar);
  color: #01040c;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pacote__titulo {
  font-family: "Space Grotesk", "Inter", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--branco);
  font-size: clamp(1.8rem, 4vw, 2.9rem);
}

.pacote__sub {
  max-width: 46ch;
  margin-top: 12px;
  font-size: 1.02rem;
  color: var(--texto);
}

/* --- as cinco coisas que entram --- */

.entra {
  display: grid;
  gap: 2px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.entra__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.entra__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.entra__marca {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ambar);
  transform: translateY(-3px);
}

.entra__nome {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--branco);
}

.entra__nota {
  grid-column: 2;
  font-size: 0.95rem;
  color: var(--texto-fraco);
}

/* --- as quatro etapas --- */

.etapas {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.etapas__titulo {
  margin-bottom: 18px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.etapas__lista {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}

.etapa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: baseline;
}

.etapa__num {
  grid-row: span 2;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ambar);
}

.etapa__nome {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--branco);
}

.etapa__nota {
  font-size: 0.93rem;
  color: var(--texto-fraco);
}

.zap--grande {
  margin-top: 32px;
  min-height: 58px;
  padding: 16px 30px;
  font-size: 1.06rem;
}

/* a linha do que NAO entra fica fora do cartao de proposito: dentro dela
   competiria com a lista, e a funcao dela e delimitar, nao vender */
.fora {
  max-width: 62ch;
  margin-top: 18px;
  padding-left: 2px;
  font-size: 0.94rem;
  color: rgba(212, 231, 248, 0.62);
}

/* ---------- o contador, agora em uma linha so ----------
   Era um painel de 90px com nota de metodologia de 27 palavras. O numero e o
   que impressiona; o resto era peso. */

.linha-forte {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 30px;
  padding: 22px 0;
  border-top: 1px solid rgba(126, 203, 255, 0.14);
  border-bottom: 1px solid rgba(126, 203, 255, 0.14);
}

.linha-forte__num {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ciano);
  text-shadow: 0 0 34px rgba(62, 231, 255, 0.35);
  /* as casas mudam a cada quadro: sem largura fixa por algarismo o numero
     inteiro treme para os lados enquanto conta */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.linha-forte__texto {
  flex: 1 1 16ch;
  font-size: 1rem;
  color: var(--texto);
}

@media (min-width: 720px) {
  .etapas__lista {
    grid-template-columns: 1fr 1fr;
    gap: 22px 32px;
  }
}

@media (min-width: 900px) {
  /* DUAS colunas, e nao tres. A terceira estava reservada para um .entra__nota
     que o HTML nunca teve: o nome do item ficava com metade da largura e a outra
     metade ficava vazia. Sobrava espaco de sobra enquanto a lista ocupava o
     cartao inteiro, entao ninguem via. Quando ela passou a dividir o cartao com
     a vitrine, cada item comecou a quebrar em duas linhas. */
  .entra__item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }

  .etapas__lista {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .etapa {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .etapa__num {
    grid-row: auto;
    margin-bottom: 4px;
  }
}

/* ---------- a vitrine: dois sites rolando, sobrepostos e inclinados ----------
   Sao gravacoes de sites reais, que estao no ar. O cabecalho fixo e o botao
   flutuante foram recortados na montagem: sem isso a nossa marca apareceria
   duas vezes dentro do nosso proprio site.

   Formato: webp animado, e nao video. Um <img> nao precisa de controle, nao
   precisa de autoplay liberado pelo navegador, nao trava em iOS com economia de
   bateria, e carrega com loading="lazy" de graca. As duas somam 71 KB.

   O modelo corporativo saiu da vitrine e continua no disco: a fonte daquele
   site nao tem c cedilha nem til, e o proprio site engoliu as letras ("NOSSAS
   SOLUES", "sua operao"). Passava no meio de tres miniaturas; como peca grande
   do cartao, nao passa.

   Por que DUAS sobrepostas e nao tres lado a lado: tres em fileira cabiam, mas
   cada uma ficava pequena demais para se reconhecer como site, e a fileira lia
   como tres miniaturas em vez de um objeto. Sobrepostas, a de tras da
   profundidade e a da frente fica grande o bastante para a pessoa ver que e uma
   pagina de verdade. A sobreposicao e feita por largura e margem negativa, em
   porcentagem do pai, e por isso acompanha a coluna sozinha, sem media query. */

.vitrine {
  position: relative;
  /* perspectiva CONTINUA de proposito: a peca tem a mesma largura dos dois
     lados de qualquer ponto de quebra, entao um @media aqui dobraria a forca da
     inclinacao sem que nada tivesse mudado de tamanho */
  perspective: clamp(760px, 250vw, 1400px);
  width: min(100%, 560px);
  margin: 30px 0 0;
  padding: 6px 0 34px;   /* o de baixo e o espaco da sombra */
  --giro: 13deg;
  --caida: 3deg;
  --frente: 60px;
}

.tela {
  position: relative;
  margin: 0;
  border: 1px solid rgba(126, 203, 255, 0.18);
  border-radius: 12px;
  /* OPACO, e nao rgba(2,8,20,.8) como quando eram tres soltas: com uma em cima
     da outra, o campo de particulas atravessava as duas e a de baixo aparecia
     por dentro da de cima */
  background: #020712;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 4, 14, 0.6);
  transition: transform var(--transicao), border-color var(--transicao);
}

.tela--um {
  transform: rotateY(var(--giro)) rotateX(var(--caida));
}

/* a ORDEM aqui e o desenho: o translateZ vem DEPOIS dos dois giros, entao
   empurra no eixo ja girado, e e isso que faz a de cima parecer flutuando em
   vez de colada */
.tela--dois {
  width: 74%;
  margin: -14% 0 0 auto;
  transform: rotateY(var(--giro)) rotateX(var(--caida)) translateZ(var(--frente));
}

/* o mouse endireita a peca INTEIRA, nunca uma janela sozinha: mexer so na de
   cima separaria as duas e desmancharia a profundidade */
.vitrine:hover {
  --giro: 9deg;
  --caida: 2deg;
  --frente: 72px;
}

/* so a borda. O translateY(-4px) que existia aqui tinha forca maior que a
   inclinacao e deitava a janela ao passar o mouse */
.tela:hover {
  border-color: rgba(255, 176, 32, 0.45);
}

/* a barrinha de tres pontos e o que faz o retangulo ler como "isto e um site"
   antes de qualquer legenda */
.tela__barra {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(126, 203, 255, 0.12);
  background: #081222;   /* mesmo tom, sem alfa: ver a nota do fundo da .tela */
}

.tela__barra i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(159, 233, 255, 0.28);
}

/* A tira e uma imagem ALTA que desliza dentro de uma janela, em vez de uma
   sequencia de quadros. Sequencia trocava suavidade por peso: dez quadros a
   230ms sao 4,3 por segundo, e ate 41% da imagem mudava de um quadro para o
   vizinho, o que se ve como tranco. Deslizar por transform roda a 60 por
   segundo, pesa 145 KB em vez de 486 KB, e nao perde nitidez.

   Cada imagem traz o proprio --desloca porque as paginas tem alturas
   diferentes: forcar uma altura unica enchia metade da tira de cor chapada. */
.tela__janela {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /* o canto tambem AQUI, e nao so na .tela: a imagem tem will-change e vira
     camada promovida dentro de um pai girado, caso em que alguns navegadores
     deixam o canto quadrado escapar por cima da moldura arredondada */
  border-radius: 0 0 11px 11px;
}

.tela__janela img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

.js .tela__janela img {
  animation: deslizar var(--tempo, 16s) ease-in-out infinite alternate;
}

@keyframes deslizar {
  from { transform: translateY(0); }
  to { transform: translateY(var(--desloca, -50%)); }
}

/* ---------- as duas colunas do cartao de oferta ----------
   No celular e uma coluna so, e a peca vem antes da lista. No computador elas
   ficam lado a lado, porque a peca tem 560px fixos: sozinha numa linha de
   1160px ela sobrava 537px de cartao vazio ao lado, e ficava ilhada.

   O ponto de quebra e 900px e nao 660px: abaixo disso a coluna de texto ficaria
   estreita demais e os itens comecariam a quebrar em duas linhas. */
.oferta__duas {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

@media (min-width: 900px) {
  .oferta__duas {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    column-gap: clamp(20px, 3vw, 44px);
    row-gap: 0;
  }

  /* posicao dita item por item: a legenda pertence a coluna das janelas, logo
     abaixo delas, e nao ao topo da coluna de texto */
  .oferta__duas > .vitrine       { grid-area: 1 / 1; }
  .oferta__duas > .vitrine__nota { grid-area: 2 / 1; }
  .oferta__duas > .oferta__lado  { grid-area: 1 / 2 / 3 / 3; }

  /* na coluna de texto a lista comeca junto com a peca, sem o respiro que ela
     precisa quando esta embaixo */
  .oferta__lado .entra {
    margin-top: 30px;
  }
}

.vitrine__nota {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--texto-fraco);
}

/* Esta guarda precisa vir DEPOIS das regras que ela desliga. Media query nao
   soma forca nenhuma ao seletor, entao a versao que existia la em cima, junto
   com as outras guardas de movimento, perdia para a animacao declarada aqui
   embaixo e nunca chegou a valer: quem pedia menos movimento via a tira rolando
   do mesmo jeito. Ficou assim desde que a vitrine nasceu.

   Na inclinacao, repete o valor parado em vez de transform: none. Zerar faria a
   peca ACHATAR ao passar o mouse, que e movimento novo justamente para quem
   pediu menos. */
@media (prefers-reduced-motion: reduce) {
  .js .tela__janela img {
    animation: none;
  }

  .tela {
    transition: none;
  }

  .vitrine:hover {
    --giro: 13deg;
    --caida: 3deg;
    --frente: 60px;
  }
}

/* ---------- os dois planos ----------
   Substitui o palco unico, que o dono achou grande demais. Dois cartoes lado a
   lado, compactos, com a linha da mensalidade embaixo dos dois.

   A pagina inteira e fria (ciano sobre quase preto) e esta e a unica area
   quente. Par de cor medido: ambar #FFB020 com rosa-quente #FF5D73 ficam a 71,8
   de distancia perceptual e ainda a 50,6 em deuteranopia. */

.preco {
  padding-top: clamp(38px, 5vh, 62px);
  padding-bottom: clamp(38px, 5vh, 62px);
}

.preco__titulo {
  margin-bottom: 26px;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--branco);
}

.planos {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(255, 176, 32, 0.24);
  border-radius: 18px;
  background: linear-gradient(168deg, #17100a, #0e0a0c);
  transition: transform var(--transicao), border-color var(--transicao);
}

.plano:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 176, 32, 0.5);
}

/* o destaque puxa a escolha para cima; sem ele os dois competem e a pessoa trava */
.plano--destaque {
  border-color: rgba(255, 93, 115, 0.55);
  background:
    radial-gradient(520px 280px at 50% -20%, rgba(255, 93, 115, 0.18), transparent 70%),
    linear-gradient(168deg, #1d1008, #120a0e);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.plano--destaque:hover {
  border-color: rgba(255, 93, 115, 0.85);
}

/* "Mais completo" e um fato do escopo. Nao pode virar "mais escolhido" nem
   "mais vendido": nao temos esse numero, e inventar seria prova social falsa. */
.plano__selo {
  position: absolute;
  top: 0;
  right: clamp(20px, 3vw, 30px);
  transform: translateY(-50%);
  padding: 6px 13px;
  border-radius: 7px;
  background: linear-gradient(100deg, var(--ambar), #FF5D73);
  color: #1a0a06;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plano__nome {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 227, 176, 0.75);
}

.plano__num {
  margin-top: 8px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(2.3rem, 5.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ambar);
  /* as casas mudam a cada quadro enquanto o numero sobe */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* "Sob consulta" no lugar do numero: texto e bem mais largo que "R$ 1.500" e,
   no tamanho do numero, estoura o card no celular. Menor e sem o espacamento
   negativo, que foi medido para digito e aperta demais em palavra. */
.plano__num--texto {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  letter-spacing: -0.01em;
}

.plano--destaque .plano__num {
  background: linear-gradient(100deg, var(--ambar) 10%, #FF5D73 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* o recorte do gradiente mede a caixa da linha: sem isto o rabo do cifrao
     fica cortado em algumas fontes */
  padding-bottom: 0.06em;
}

.plano__itens {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.plano__itens li {
  position: relative;
  padding-left: 17px;
  font-size: 0.97rem;
  color: rgba(255, 227, 176, 0.86);
}

.plano__itens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--ambar);
}

.plano--destaque .plano__itens li::before {
  background: #FF5D73;
}

.plano__acao {
  margin-top: auto;
  padding-top: 0;
  align-self: flex-start;
  margin-top: 24px;
}

/* a mensalidade fica FORA dos dois cartoes de proposito: ela e opcional, e
   dentro de um cartao ela leria como parte do valor daquele plano */
.mensal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 16px;
  padding: 18px 22px;
  border: 1px dashed rgba(255, 176, 32, 0.34);
  border-radius: 16px;
  /* fundo opaco de verdade: a 0,05 de opacidade o campo de particulas atravessava
     e o texto sumia. Foi visto na captura, nao no calculo, porque o calculo de
     contraste presume fundo chapado e aqui o fundo e uma animacao. */
  background: rgba(21, 14, 9, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mensal__num {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--ambar);
  white-space: nowrap;
}

.mensal__rotulo {
  font-weight: 600;
  color: rgba(255, 227, 176, 0.92);
}

.mensal__texto {
  flex: 1 1 28ch;
  font-size: 0.96rem;
  color: rgba(255, 227, 176, 0.72);
}

.preco__nota {
  max-width: 68ch;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  /* mesmo motivo da linha da mensalidade: sobre o campo de particulas, texto
     sem fundo proprio nao se le */
  background: rgba(4, 10, 20, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.93rem;
  color: rgba(212, 231, 248, 0.74);
}

@media (min-width: 720px) {
  .planos {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plano:hover {
    transform: none;
  }
}

/* ---------- faixa de dados com fonte ----------
   O dono pediu dados oficiais com a fonte visivel. A versao anterior da pagina
   tinha creditos em frase inteira e eles viraram 106 palavras, 15% de todo o
   texto, deixando a pagina com cara de relatorio. Aqui o credito e telegrama:
   nome da fonte e ano, nada mais.

   Os numeros ficam em CIANO, e nao em ambar. O ambar e a cor do preco e vive so
   dentro da secao dos planos; cor de realce em dois lugares deixa de realcar
   nenhum. */

.fatos {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  grid-template-columns: 1fr;
}

.fato {
  position: relative;
  padding: 22px 22px 18px;
  border: 1px solid rgba(126, 203, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(168deg, rgba(8, 20, 38, 0.82), rgba(2, 6, 15, 0.7));
  overflow: hidden;
  transition: transform var(--transicao), border-color var(--transicao);
}

.fato::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(62, 231, 255, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity var(--transicao);
  pointer-events: none;
}

.fato:hover {
  transform: translateY(-3px);
  border-color: rgba(62, 231, 255, 0.38);
}

.fato:hover::after {
  opacity: 1;
}

.fato__num {
  position: relative;
  display: block;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ciano);
  /* as casas mudam a cada quadro enquanto o numero sobe */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* variante para quando o destaque e uma palavra e nao um numero: no tamanho do
   numero a frase estouraria a largura do cartao */
.fato__num--frase {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.15;
}

.fato__texto {
  position: relative;
  margin-top: 10px;
  font-size: 0.97rem;
  color: var(--texto);
}

/* o credito e telegrama de proposito: nome e ano, nada de frase */
.fato__fonte {
  position: relative;
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(126, 203, 255, 0.1);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(212, 231, 248, 0.6);
}

.fato__fonte b {
  font-weight: 600;
  color: rgba(212, 231, 248, 0.84);
}

@media (min-width: 640px) {
  .fatos {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fato:hover {
    transform: none;
  }
}

/* ---------- fechamento ---------- */

.fecho {
  position: relative;
  text-align: center;
  isolation: isolate;
}

/* a duna entra por tras do painel do fecho. Fica em camada propria para que a
   mascara de cima e de baixo desmanche a borda da foto no fundo da pagina. */
.fecho__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/duna.webp");
  background-size: cover;
  background-position: 50% 42%;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
}

.fecho__painel {
  padding: clamp(40px, 6vw, 76px) clamp(24px, 4vw, 56px);
  /* mais transparente que os outros paineis, senao a duna atras some. O
     desfoque segura o contraste do texto sem precisar fechar o fundo. */
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(43, 140, 255, 0.2), transparent 70%),
    rgba(2, 7, 17, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.fecho__titulo {
  max-width: 22ch;
  margin: 0 auto 30px;
  font-size: clamp(1.75rem, 4vw, 3rem);
}

.fecho__numero {
  margin-top: 22px;
  font-size: 1.02rem;
  color: var(--texto-fraco);
}

.fecho__numero a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(126, 203, 255, 0.4);
  color: var(--branco);
  font-family: "Space Grotesk", Arial, sans-serif;
  letter-spacing: 0.04em;
}

.fecho__numero a:hover {
  color: var(--ciano);
  border-bottom-color: var(--ciano);
}

/* ---------- rodape ---------- */

.rodape {
  position: relative;
  z-index: 2;
  padding: 54px 20px 108px;
  border-top: 1px solid rgba(126, 203, 255, 0.14);
  background: linear-gradient(to bottom, rgba(1, 5, 14, 0.92), rgba(1, 4, 12, 0.98));
}

.rodape__inner {
  width: min(100%, var(--largura));
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--branco);
}

.rodape__simbolo {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--ciano);
}

.rodape__simbolo svg {
  width: 100%;
  height: 100%;
}

.rodape__sobre,
.rodape__contato,
.rodape__fontes {
  font-size: 0.82rem;
  /* 0,5 de opacidade dava 4,40 de contraste, abaixo do minimo de 4,5 */
  color: rgba(212, 231, 248, 0.58);
}

.rodape__nota {
  font-size: 0.94rem;
  color: var(--texto-fraco);
}

.rodape__contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.rodape__contato a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto);
  border-bottom: 1px solid rgba(126, 203, 255, 0.28);
}

.rodape__contato a:hover {
  color: var(--ciano);
}

.rodape__nota {
  max-width: 78ch;
  font-size: 0.86rem;
}

.rodape__nota a {
  display: inline-block;
  padding: 13px 4px;
  margin: -13px 0;
  color: var(--ciano-suave);
  border-bottom: 1px solid rgba(126, 203, 255, 0.35);
}

/* ---------- revelacao ao rolar ---------- */

.js .revela {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(5px);
  transition: opacity 760ms ease, transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 760ms ease;
  transition-delay: var(--atraso, 0ms);
}

.js .revela.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- telas maiores ---------- */

@media (min-width: 720px) {
  .zap--topo .zap__texto {
    display: inline;
  }

  .entregas {
    grid-template-columns: 1fr 1fr;
  }

  /* o quinto item fica sozinho na ultima fileira: ocupa as duas colunas para
     nao deixar um buraco do lado direito */
  .entrega:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .jornada {
    grid-template-columns: 1fr minmax(260px, 320px);
  }

  .tese {
    grid-template-columns: 0.85fr 1fr;
  }

  .tese__figura {
    height: 100%;
    min-height: 340px;
  }

  .tese__figura::after {
    background: linear-gradient(to right, transparent 40%, rgba(2, 7, 17, 0.9));
  }

  .tese__texto {
    padding: clamp(26px, 3.6vw, 44px) clamp(26px, 3.6vw, 44px) clamp(26px, 3.6vw, 44px) 0;
  }
}

@media (min-width: 1180px) {
  .trilha {
    display: block;
  }
}

@media (max-width: 719px) {
  .secao {
    padding-left: 16px;
    padding-right: 16px;
  }

  .heroi {
    padding-left: 16px;
    padding-right: 16px;
  }

  .heroi__linha--dois {
    letter-spacing: 0.16em;
  }

  .rodape {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- menos movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .revela,
  .js .salto__bloco,
  .js .salto__bloco.is-visible,
  .js .heroi__linha--um,
  .js .heroi__linha--dois,
  .js .heroi__texto,
  .js .heroi__acao,
  .js .heroi__rolar {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .heroi__seta,
  .zap--flutuante::before {
    animation: none;
  }

  .zap::after {
    display: none;
  }

  .zap:hover,
  .zap:focus-visible,
  .entrega:hover,
  .cartao:hover {
    transform: none;
  }

  /* a troca de cena vira corte seco e o cursor da busca para de piscar */
  .js .cena {
    transition: none;
    transform: none;
  }

  .cena--ativa .busca__cursor {
    animation: none;
  }
}