/* qge.bio/qgenegocios · base: cores, reset, coluna da página, entrada suave, desktop e movimento reduzido */

/* fontes na própria hospedagem: sem ir buscar em outro servidor antes de mostrar o texto */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/satoshi-700.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/satoshi-900.woff2') format('woff2'); }

:root {
  --preto: #111114;
  --grafite: #191B1C;
  --rosa: #FF3F7F;
  --azul: #A8CDE4;
  --gelo: #F5F5F5;
  --linha: rgba(245,245,245,0.12);
  --texto-suave: rgba(245,245,245,0.72);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background:
    radial-gradient(80% 50% at 85% 0%, rgba(255,63,127,0.22), transparent 70%),
    radial-gradient(70% 40% at 0% 30%, rgba(168,205,228,0.12), transparent 70%),
    var(--preto);
  background-repeat: no-repeat;
  color: var(--gelo);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* o celular pode passar da borda sem alargar a página (senão o celular dá zoom out e aparece faixa preta) */
html, body { overflow-x: clip; }
html { background: var(--preto); }
::selection { background: var(--rosa); color: var(--preto); }
img { display: block; max-width: 100%; }

.pagina {
  /* --u: 1px numa tela de 390px, cresce e encolhe com a largura (entre 0,78 e 1,15).
     Título, frase, celular e cards usam a mesma unidade, então ficam travados entre si
     já no primeiro desenho da página, sem esperar o JS. */
  --u: clamp(0.78px, calc((min(100vw, 460px) - 40px) / 350), 1.15px);
  --k: 1; /* só a escala do celular 3D (transform precisa de número); o JS acerta */
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 52px 20px 40px;
}

/* Entrada suave dos blocos ao rolar */
.surge { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.surge.visivel { opacity: 1; transform: none; }

/* Desktop: mesma coluna, com mais respiro */
@media (min-width: 900px) {
  .pagina { max-width: 480px; padding-top: 56px; }
  .projeto { flex-basis: 48%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .celular__tela img, .celular { animation: none; }
  .aparelho, .reflexo { transition: none; }
  .sublinhado__traco path { animation: none; clip-path: none; }
  .btn, .btn .seta, .atalho__icone, .projeto__tela, .surge { transition: none; }
  .btn:hover, .btn:hover .seta, .atalho:hover .atalho__icone, .projeto:hover .projeto__tela { transform: none; }
  .surge { opacity: 1; transform: none; }
}