/* Base comum a todas as páginas da Campier: fontes, cores, fundo, topo,
   rodapé, botão e flutuação. */

/* Fontes hospedadas no próprio site (sem Google Fonts: o IP do visitante não
   vai a terceiros). Inter e Sora são variáveis: um arquivo cobre todos os
   pesos. Subconjunto "latin" (inclui os acentos do português). Licença OFL
   em fontes/. */
@font-face {
  font-family: Inter;
  src: url(/fontes/inter.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Sora;
  src: url(/fontes/sora.woff2) format("woff2");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fundo: #f4f4f0;
  --texto: #141414;
  --suave: #5f5f59; /* 4,8:1 no pior caso (sobre a mancha âmbar) */
  --linha: rgba(20, 20, 20, .08);
  --vidro: rgba(255, 255, 255, .62);
  --vidro-borda: rgba(255, 255, 255, .9);
  --vidro-solido: rgba(255, 255, 255, .85);
  --sombra: 0 1px 2px rgba(20, 20, 20, .04), 0 12px 32px -8px rgba(20, 20, 20, .12), 0 40px 80px -24px rgba(20, 20, 20, .14);
  /* Âmbar é a cor da marca; as manchas giram em torno dele. */
  --orbe-1: #ffc96b;
  --orbe-2: #ffe4b8;
  --orbe-3: #f7c4a5;
  --pilula: rgba(20, 20, 20, .06);
  --ambar: #f5a524;
  --largura: 1240px;
  --altura-topo: 84px;
  --margem: 32px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f0f11;
    --texto: #f1f1ee;
    --suave: #9a9a94;
    --linha: rgba(255, 255, 255, .08);
    --vidro: rgba(30, 30, 34, .6);
    --vidro-borda: rgba(255, 255, 255, .08);
    --vidro-solido: rgba(30, 30, 34, .9);
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -8px rgba(0, 0, 0, .5), 0 40px 80px -24px rgba(0, 0, 0, .6);
    /* no escuro: um brilho âmbar contido e um tom frio neutro, sem tingir tudo de marrom */
    --orbe-1: #c27a05;
    --orbe-2: #2a3040;
    --orbe-3: #8a4a0a;
    --orbe-opacidade: .22;
    --pilula: rgba(255, 255, 255, .08);
  }
}
@media (max-width: 980px) {
  :root { --margem: 16px; }
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* cada seção .tela-cheia encaixa no topo ao rolar (no computador) */
  scroll-snap-type: y proximity;
}
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

/* Manchas de cor desfocadas, bem lentas, atrás de tudo. */
.orbes { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orbes span {
  position: absolute;
  width: 46vmax; height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--orbe-opacidade, .55);
  animation: deriva 38s ease-in-out infinite alternate;
}
.orbes span:nth-child(1) { background: var(--orbe-1); left: -12vmax; top: -16vmax; }
.orbes span:nth-child(2) { background: var(--orbe-2); right: -14vmax; top: 18vh; animation-duration: 46s; animation-delay: -12s; }
.orbes span:nth-child(3) { background: var(--orbe-3); left: 22vw; bottom: -22vmax; animation-duration: 52s; animation-delay: -24s; }
@keyframes deriva {
  to { transform: translate(8vmax, 6vmax) scale(1.12); }
}

.topo {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--largura); height: var(--altura-topo); margin: 0 auto; padding: 0 var(--margem);
}

/* Seções de tela cheia: a próxima só aparece quando a pessoa rola.
   .abertura-cheia desconta a altura do topo, que fica acima dela. */
.tela-cheia, .abertura-cheia {
  display: flex; flex-direction: column; justify-content: center;
}
/* filhos ocupam a largura toda (o flex em coluna encolheria cada bloco) */
.tela-cheia > *, .abertura-cheia > * { width: 100%; }
/* encaixes: o topo (início da página) e cada seção cheia */
.topo, .tela-cheia { scroll-snap-align: start; }
/* sem isso o encaixe puxa de volta e o rodapé fica inalcançável */
footer { scroll-snap-align: end; }
.tela-cheia { min-height: 100svh; padding-top: 48px; padding-bottom: 48px; }
.abertura-cheia { min-height: calc(100svh - var(--altura-topo)); }
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 1.25rem/1 Sora, Inter, sans-serif; letter-spacing: -0.03em; text-decoration: none;
}
/* Símbolo da marca: anel quase fechado + ponto âmbar na abertura. */
.marca svg { width: 26px; height: 26px; }
.topo nav { display: flex; gap: 24px; }
.topo nav a { color: var(--suave); text-decoration: none; font-size: .95rem; }
.topo nav a:hover { color: var(--texto); }

.pilula { display: inline-block; background: var(--pilula); border-radius: 999px; padding: 4px 12px; font-weight: 500; }
/* Ação principal: mesmo formato da pílula, com mais peso. */
.botao {
  display: inline-block; background: var(--texto); color: var(--fundo);
  border-radius: 999px; padding: 12px 22px; font-weight: 500; text-decoration: none;
  transition: translate .2s;
}
.botao:hover { translate: 0 -2px; }
.botao:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* Vidro: cartões translúcidos usados nas duas páginas. */
.vidro {
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 28px;
  box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

/* Flutuação: o elemento de fora recebe a paralaxe (paralaxe.js, via --z);
   o filho .flutua sobe e desce devagar. */
.paralaxe {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.flutua {
  animation: flutua var(--t, 9s) ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}
@keyframes flutua {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) * -1)); }
}

footer {
  max-width: var(--largura); margin: 0 auto; padding: 72px var(--margem) 40px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  color: var(--suave); font-size: .9rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }

@media (max-width: 980px) {
  :root { --altura-topo: 68px; }
  /* no celular as seções passam da altura da tela: sem encaixe, sem tela cheia */
  html { scroll-snap-type: none; }
  .tela-cheia { min-height: 0; padding-top: 0; padding-bottom: 0; }
  .abertura-cheia { min-height: 0; }
  .paralaxe { transform: none; }
  /* Android de entrada: manchas paradas e vidro sem desfoque (pesam na rolagem e na bateria) */
  .orbes span { animation: none; }
  .vidro { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidro-solido); }
}

@media (prefers-reduced-motion: reduce) {
  .orbes span, .flutua { animation: none; }
  .paralaxe { transition: none; }
}