/* PaceCopilot — folha de estilo.
 *
 * ===================================================================
 * A COR DA MARCA MORA NUMA LINHA SÓ.
 * ===================================================================
 * Trocar `--marca` troca a página inteira: botões, acentos, gráfico,
 * brilho de fundo, foco de campo, tudo. Está assim de propósito — a
 * decisão entre azul e laranja é de marca, e não pode custar uma
 * varredura por trinta lugares.
 *
 * O logo é BRANCO, então funciona sobre qualquer acento.
 *
 * A VERSÃO OFICIAL CHEGOU, e esta linha já é ela. Até 21/09 o site usava
 * #FF5A1F enquanto o kit em `brand/pace-copilot/` usava #FF6A00 — dois
 * laranjas, com os MESMOS nomes de arquivo nos SVG dos dois lados, o que
 * é pior que duas cores diferentes: é a mesma marca falando com duas
 * bocas sem que ninguém perceba ao abrir um arquivo só.
 *
 * O kit é a fonte da verdade, então foi o site que cedeu. E o tom oficial
 * ainda é MELHOR onde a página vive: #FF6A00 dá 6,60:1 sobre `--noite`
 * contra 6,08:1 do antigo, e 5,97:1 sobre `--grafite` contra 5,50:1 —
 * folga maior sobre os 4,5:1 do critério AA em todos os fundos escuros.
 */

@font-face{
  font-family:"Oxanium"; src:url("fonts/Oxanium-Variable.ttf") format("truetype");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter"; src:url("fonts/Inter-Variable.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* ---- a cor da marca, e só ela ---- */
  --marca:#FF6A00;          /* Laranja Pace, o do kit oficial */
  --marca-clara:#FF9245;    /* para texto pequeno sobre escuro */
  --marca-rgb:255,106,0;    /* para transparências */

  /* ---- as superfícies ---- */
  /*
   * Três tons, uma rampa só: matiz 210,0° nos três, saturação caindo
   * (29,4 → 27,3 → 17,9%) e luminosidade subindo (6,7 → 8,6 → 11,0%).
   * `--grafite` é `--noite` mais 11 em cada canal — cinza puro somado a um
   * azul escuro dessatura sem mexer no matiz, e é por isso que os três
   * parecem da mesma família.
   *
   * **Elas NÃO vêm do kit, e a exceção é deliberada.** O kit define Noite
   * #101820 e Grafite #182023, e o laranja dele venceu porque melhorava o
   * contraste. Aqui é o oposto: `--apagado-forte` (#73818C) é texto de 12,5 e
   * 14px e foi escolhido em 21/09 como o tom mais ESCURO que ainda passa em AA,
   * com 0,24 de margem. Sobre a Noite do kit ele cai para 4,47:1 e REPROVA;
   * sobre `--noite` dá 4,74:1 e passa. Adotar o escuro do kit custaria clarear
   * o texto secundário de novo, desfazendo um ajuste recente.
   *
   * O Grafite do kit também não é superfície: o README dele diz "marca e texto
   * em fundo claro". É tinta, não chapa.
   *
   * **Os pares `-rgb` existem porque o token sozinho era mentira.** `--grafite`
   * chegou a ser declarado e NUNCA referenciado, enquanto a superfície de todo
   * cartão da página vivia sete vezes como `rgba(var(--grafite-rgb),…)` escrita à mão.
   * Quem trocasse o token concluiria que o site não usa grafite — e o site é
   * feito de grafite. Mesmo padrão de `--marca-rgb`, e pelo mesmo motivo.
   */
  --grafite:#171C21;
  --grafite-rgb:23,28,33;
  --noite:#0C1116;
  --noite-rgb:12,17,22;
  --noite-2:#10161C;
  --papel:#F6F5F1;
  --apagado:#A9B4BE;
  /* Clareado de #5A6873 em 21/09. O tom antigo dava 3,31:1 sobre
     `--noite` e 3,08:1 sobre o cartao — abaixo dos 4,5:1 que o criterio
     AA pede para texto pequeno, e ele e usado justamente em 12,5 e 14px:
     legendas, miudinhos, rodape e a ficha da area de downloads.
     #73818C e o mais ESCURO que ainda passa nos dois fundos (4,74:1 e
     4,55:1), entao o texto secundario continua secundario. */
  --apagado-forte:#73818C;

  --display:"Oxanium",system-ui,sans-serif;
  --texto:"Inter",system-ui,-apple-system,sans-serif;
  --faixa:1140px;
  --curva:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--noite);color:var(--papel);
  font:400 17px/1.65 var(--texto);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
.faixa{max-width:var(--faixa);margin:0 auto;padding:0 24px}
em{font-style:normal;color:var(--marca-clara)}

/* ------------------------------------------------------------- fundo vivo */
.asfalto{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(var(--marca-rgb),.14), transparent 60%),
    radial-gradient(800px 520px at 4% 104%, rgba(var(--marca-rgb),.06), transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 74px, rgba(169,180,190,.035) 74px 75px);
  animation:correr 26s linear infinite;
}
@keyframes correr{ to{ background-position:0 0,0 0,0 75px } }
main,footer{position:relative;z-index:1}

/* ------------------------------------------------ a barra que chega depois
 * Landing page curta não precisa de cabeçalho roubando o topo. Mas o botão
 * de conversão sumir também custa. Então ela não existe no começo: desliza
 * para dentro quando o herói sai da tela, que é exatamente quando o visitante
 * deixou de olhar o logo e passou a decidir. */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transform:translateY(-100%);transition:transform .45s var(--curva);
  background:rgba(var(--noite-rgb),.9);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(169,180,190,.1);
}
.barra.chegou{transform:none}
.barra .faixa{display:flex;align-items:center;justify-content:space-between;height:62px}
.barra img{height:24px;width:auto;display:block}

/* ------------------------------------------------------------------ herói */
.heroi{
  min-height:92vh;display:flex;align-items:center;
  padding:56px 0 64px;position:relative;
}
.marca-grande{
  width:min(480px,72vw);height:auto;display:block;margin:0 0 40px;
  opacity:0;transform:translateY(16px) scale(.98);
  animation:entrar 1s var(--curva) .1s forwards;
}
@keyframes entrar{ to{opacity:1;transform:none} }

.bandeira{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--marca-clara);
  border:1px solid rgba(var(--marca-rgb),.34);border-radius:999px;
  padding:8px 16px;background:rgba(var(--marca-rgb),.08);
  opacity:0;animation:entrar .8s var(--curva) .45s forwards;
}
.bandeira svg{flex:0 0 auto}

h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(40px,7.4vw,84px);line-height:1;letter-spacing:-.035em;
  margin:26px 0 24px;max-width:15ch;
}
h1 .marca-cor{color:var(--marca)}
.chamada{
  font-size:clamp(18px,2.1vw,22px);color:var(--apagado);
  max-width:48ch;margin:0;
  opacity:0;animation:entrar .9s var(--curva) .8s forwards;
}
.palavra{
  display:inline-block;opacity:0;transform:translateY(.42em);
  animation:subir .85s var(--curva) forwards;
  animation-delay:calc(var(--i) * 58ms + 560ms);
}
@keyframes subir{ to{opacity:1;transform:none} }

.acoes{margin:36px 0 0;display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  opacity:0;animation:entrar .9s var(--curva) 1s forwards}

/* ------------------------------------------------------------ botões */
.botao{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:16px;
  background:var(--marca);color:var(--noite);border:0;border-radius:11px;
  padding:15px 26px;cursor:pointer;text-decoration:none;
  transition:transform .2s var(--curva),box-shadow .3s var(--curva),filter .2s;
  box-shadow:0 8px 28px -12px rgba(var(--marca-rgb),1);
}
.botao:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 14px 36px -12px rgba(var(--marca-rgb),1)}
.botao:active{transform:translateY(0)}
.botao:disabled{opacity:.5;cursor:default;transform:none}
.botao .seta{transition:transform .24s var(--curva)}
.botao:hover .seta{transform:translateX(4px)}
.botao.vazado{
  background:transparent;color:var(--papel);box-shadow:none;
  border:1px solid rgba(169,180,190,.28);
}
.botao.vazado:hover{border-color:rgba(var(--marca-rgb),.6);filter:none}

/* ---------------------------------------------------------------- o palco */
.palco{
  margin:44px 0 0;border:1px solid rgba(169,180,190,.13);border-radius:16px;
  background:linear-gradient(180deg,rgba(var(--grafite-rgb),.9),rgba(var(--noite-rgb),.86));
  padding:20px 20px 16px;position:relative;overflow:hidden;
  opacity:0;animation:entrar 1s var(--curva) 1.15s forwards;
}
.palco::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--marca-rgb),.07),transparent);
  transform:translateX(-100%);animation:varrer 6s var(--curva) 2s infinite;
}
@keyframes varrer{ 55%,100%{transform:translateX(100%)} }
.palco .rotulo{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--apagado-forte);margin:0 0 12px;
}
.palco .rotulo b{color:var(--marca-clara);font-weight:600;white-space:nowrap}
#pista{display:block;width:100%;height:auto}

.radio{
  margin:12px 0 0;display:flex;align-items:center;gap:14px;
  border-top:1px solid rgba(169,180,190,.11);padding-top:13px;min-height:44px;
}
.onda{display:flex;align-items:center;gap:3px;height:20px;flex:0 0 auto}
.onda span{width:3px;border-radius:2px;background:var(--marca-clara);height:4px;
  transition:height .1s linear}
.fala{
  font-family:var(--display);font-weight:600;
  font-size:clamp(16px,2.2vw,21px);letter-spacing:-.01em;margin:0;min-height:1.4em;
}
.fala .cursor{
  display:inline-block;width:2px;height:.95em;background:var(--marca-clara);
  vertical-align:-.1em;margin-left:3px;animation:piscar 1s steps(2) infinite;
}
@keyframes piscar{ 50%{opacity:0} }

/* ----------------------------------------------------------- reveladores */
.revela{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--curva),transform .8s var(--curva)}
.revela.dentro{opacity:1;transform:none}
.d1{transition-delay:.09s} .d2{transition-delay:.18s} .d3{transition-delay:.27s}

/* --------------------------------------------------------------- seções */
section{padding:104px 0}
.olho{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--marca-clara);margin:0 0 16px;
}
.olho::before{content:"";width:26px;height:1px;background:var(--marca);opacity:.7}
h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.6vw,50px);line-height:1.06;letter-spacing:-.028em;
  margin:0 0 18px;max-width:19ch;
}
.sub{color:var(--apagado);font-size:18px;max-width:54ch;margin:0 0 44px}

.grade{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.cartao{
  background:linear-gradient(180deg,rgba(var(--grafite-rgb),.72),rgba(var(--noite-rgb),.5));
  border:1px solid rgba(169,180,190,.12);border-radius:16px;padding:28px;
  position:relative;overflow:hidden;
  transition:border-color .35s var(--curva),transform .35s var(--curva);
}
.cartao::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--marca-rgb),.55),transparent);
  opacity:0;transition:opacity .35s;
}
.cartao:hover{border-color:rgba(var(--marca-rgb),.34);transform:translateY(-4px)}
.cartao:hover::after{opacity:1}
.cartao h3{font-family:var(--display);font-size:19.5px;font-weight:600;margin:18px 0 10px}
.cartao p{margin:0;color:var(--apagado);font-size:15.5px}
.icone{width:32px;height:32px;color:var(--marca-clara)}

/* ------------------------------------------------------- ouvir de verdade */
.ouvir{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.clipe{
  display:flex;align-items:center;gap:16px;text-align:left;
  background:linear-gradient(180deg,rgba(var(--grafite-rgb),.8),rgba(var(--noite-rgb),.55));
  border:1px solid rgba(169,180,190,.13);border-radius:14px;
  padding:18px 20px;cursor:pointer;color:inherit;font:inherit;width:100%;
  transition:border-color .3s var(--curva),transform .3s var(--curva);
}
.clipe:hover{border-color:rgba(var(--marca-rgb),.45);transform:translateY(-2px)}
.clipe .play{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:rgba(var(--marca-rgb),.14);border:1px solid rgba(var(--marca-rgb),.4);
  display:grid;place-items:center;color:var(--marca-clara);
  transition:background .25s,transform .25s var(--curva);
}
.clipe:hover .play{background:rgba(var(--marca-rgb),.26)}
.clipe.tocando .play{background:var(--marca);color:var(--noite);transform:scale(1.06)}
.clipe b{display:block;font-family:var(--display);font-size:16.5px;font-weight:600}
.clipe span{display:block;font-size:13.5px;color:var(--apagado-forte);margin-top:3px}

/* ------------------------------------------------------------- números */
.numeros{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.numero{
  border:1px solid rgba(169,180,190,.12);border-radius:16px;padding:28px;
  background:linear-gradient(180deg,rgba(var(--grafite-rgb),.8),rgba(var(--noite-rgb),.4));
}
.numero b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(42px,6.4vw,62px);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.numero b i{font-style:normal;font-size:.4em;color:var(--marca-clara);margin-left:5px;letter-spacing:0}
.numero span{display:block;margin-top:12px;color:var(--apagado);font-size:15px}

/* ------------------------------------------------------------ o que não faz */
.recusa{border-left:2px solid rgba(var(--marca-rgb),.45);padding-left:28px;display:grid;gap:24px}
.recusa div{display:flex;gap:14px;align-items:flex-start}
.recusa svg{flex:0 0 auto;margin-top:4px;color:var(--marca-clara)}
.recusa p{margin:0;color:var(--apagado)}
.recusa b{color:var(--papel);font-weight:600}

/* --------------------------------------------------------------- vitrine */
.vitrine{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.moldura{
  border:1px solid rgba(169,180,190,.13);border-radius:16px;overflow:hidden;
  background:rgba(var(--grafite-rgb),.6);aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.moldura img{width:100%;height:100%;object-fit:cover;display:block}
.vazia{
  color:var(--apagado-forte);font-family:var(--display);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:24px;
  position:relative;z-index:1;
}
.moldura::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 13px,rgba(169,180,190,.04) 13px 26px);
}
.legenda{margin:11px 2px 0;font-size:14px;color:var(--apagado-forte)}

/* ---------------------------------------------------------------- lista */
.lista{
  border:1px solid rgba(var(--marca-rgb),.3);border-radius:20px;padding:52px 34px;
  background:radial-gradient(900px 400px at 50% -40%,rgba(var(--marca-rgb),.2),transparent 62%),
             rgba(var(--grafite-rgb),.55);
  text-align:center;
}
form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:28px 0 12px}
input[type=email]{
  flex:1 1 300px;max-width:400px;min-width:0;padding:16px 18px;font-size:16px;
  font-family:var(--texto);background:rgba(var(--noite-rgb),.8);color:var(--papel);
  border:1px solid rgba(169,180,190,.2);border-radius:11px;
  transition:border-color .2s,box-shadow .2s;
}
input[type=email]:focus{outline:0;border-color:var(--marca);
  box-shadow:0 0 0 3px rgba(var(--marca-rgb),.22)}
.recado{min-height:24px;margin:4px 0 0;font-size:15px}
.recado.ok{color:var(--marca-clara)} .recado.erro{color:#ff7a5c}
.miudo{font-size:14px;color:var(--apagado-forte);margin:8px 0 0}

/* --------------------------------------------------------------- rodapé */
footer{border-top:1px solid rgba(169,180,190,.09);padding:48px 0 60px;margin-top:48px}
footer .faixa{display:flex;gap:22px;justify-content:space-between;flex-wrap:wrap;align-items:center}
footer img{height:22px;opacity:.7}
footer p{margin:0;font-size:13.5px;color:var(--apagado-forte);max-width:62ch}

@media (max-width:720px){
  .heroi{min-height:0;padding:42px 0 44px}
  .marca-grande{margin-bottom:30px}
  section{padding:72px 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .revela,.palavra,.marca-grande,.bandeira,.chamada,.acoes,.palco{opacity:1;transform:none}
}

/* =====================================================================
 * O EXPLICADOR: o desenho fica preso, os passos rolam
 * =====================================================================
 * Esta seção existe porque a versão anterior da página foi reprovada com a
 * frase certa: "está muito vago, eu não compraria". Três cartões dizendo
 * "ele escuta quem já passou" falam SOBRE o produto. Aqui o produto
 * acontece: cada passo muda o desenho ao lado, e no quarto a voz de
 * verdade toca.
 */
.explicador{padding-bottom:40px}
.duas-colunas{
  display:grid;gap:48px;align-items:start;margin-top:44px;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
.colado{position:sticky;top:96px}

.tela-demo{
  border:1px solid rgba(169,180,190,.14);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--grafite-rgb),.95),rgba(var(--noite-rgb),.95));
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.tela-demo .cabeca{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid rgba(169,180,190,.1);
  font-family:var(--display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--apagado-forte);
}
.tela-demo .cabeca b{
  margin-left:auto;color:var(--marca-clara);font-weight:600;
  transition:color .4s;white-space:nowrap;
}
.tela-demo .cabeca .ponto{
  width:7px;height:7px;border-radius:50%;background:var(--marca);
  animation:pulsar 2.4s var(--curva) infinite;
}
@keyframes pulsar{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--marca-rgb),.5)}
  70%{opacity:.6;box-shadow:0 0 0 8px rgba(var(--marca-rgb),0)}
}
#cena{display:block;width:100%;height:auto}

.legenda-demo{
  min-height:56px;display:flex;align-items:center;padding:0 16px 14px;
}
.bolha{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:clamp(15px,1.7vw,19px);padding:10px 16px;border-radius:11px;
  background:rgba(var(--marca-rgb),.14);border:1px solid rgba(var(--marca-rgb),.4);
  color:var(--papel);opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .3s var(--curva),transform .3s var(--curva);
}
.bolha.aparece{opacity:1;transform:none}

/* ------------------------------------------------------------ os passos */
.passos{list-style:none;margin:0;padding:0;counter-reset:passo}
.passos li{
  counter-increment:passo;padding:30px 0 30px 62px;position:relative;
  min-height:44vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.28;transition:opacity .45s var(--curva);
}
.passos li.ativo{opacity:1}
.passos li::before{
  content:counter(passo,decimal-leading-zero);
  position:absolute;left:0;top:34px;
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.1em;
  color:var(--apagado-forte);transition:color .45s var(--curva);
}
.passos li.ativo::before{color:var(--marca)}
.passos li::after{
  content:"";position:absolute;left:14px;top:56px;bottom:10px;width:1px;
  background:rgba(169,180,190,.14);
}
.passos li:last-child::after{display:none}
.passos li b{
  display:block;font-family:var(--display);font-weight:650;
  font-size:clamp(21px,2.7vw,28px);letter-spacing:-.02em;margin:0 0 10px;
}
.passos li p{margin:0;color:var(--apagado);font-size:16.5px;max-width:42ch}

@media (max-width:900px){
  .duas-colunas{grid-template-columns:1fr;gap:26px}
  /* **70px, e nao 8.** A barra que chega quando o heroi sai e `fixed`,
     tem 62px de altura e `z-index:50`. Com `top:8px` o painel grudado
     parava DEBAIRO dela: medido a 360x780, 54 dos 61px do cabecalho da
     demonstracao ficavam escondidos, e um clique ali acertava o botao da
     barra. Some justamente o selo de estado (SEM REFERENCIA, APRENDENDO,
     PISTA PRONTA, AVISANDO), que e o que carrega a promessa de honestidade
     da secao inteira. O canvas escapava; o cabecalho nao. */
  .colado{position:sticky;top:70px;z-index:5;
    margin:0 -24px;padding:0 24px 12px;background:linear-gradient(180deg,var(--noite) 78%,transparent)}
  .passos li{min-height:0;padding:20px 0 20px 52px;opacity:1}
  .passos li::after{top:46px}
}