/* Tokens da identidade (Identidade visual/idv-mobius.html): paleta monocromática,
   profundidade por opacidade, Greycliff CF como única família. */
:root {
  --fonte: "Greycliff CF", "greycliff-cf", "Urbanist", system-ui, sans-serif;
  --preto: #000000;
  --texto: #231F20;
  --fundo-escuro: #080607;
  --branco: #FDFEFE;
  --cinza: #B8B8B8;
  --cinza-medio: #949494;
  --cinza-claro: #E0E0E0;
  --margem: clamp(20px, 5vw, 72px);
  --coluna: 1280px;
  /* Distância da borda da tela até a coluna de conteúdo: a margem em telas menores, o que sobrar em telas largas. */
  --lateral: max(var(--margem), calc((100vw - var(--coluna)) / 2));
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--fonte); color: var(--texto); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.hero { position: relative; height: 100svh; min-height: 540px; overflow: hidden; background: #fff; }
.hero.escuro { background: var(--fundo-escuro); color: var(--branco); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.topo {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 3.2vw, 36px) var(--lateral);
}
.marca { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 400; color: var(--preto); }
.escuro .marca { color: var(--branco); }
.marca img { width: 38px; height: auto; }
.marca b { font-weight: 900; }
.topo nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); font-size: 15px; font-weight: 400; }
.topo nav a:not(.pilula) { opacity: .7; transition: opacity .2s; }
.topo nav a:not(.pilula):hover { opacity: 1; }

.pilula {
  display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
  border-radius: 999px; background: var(--preto); color: #fff; font-size: 15px; font-weight: 300; white-space: nowrap;
  transition: transform .2s;
}
.pilula:hover { transform: translateY(-1px); }
.escuro .pilula { background: var(--branco); color: var(--fundo-escuro); }
.pilula.grande { height: 48px; padding: 0 26px; font-size: 17px; }
.pilula.vazada { background: none; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }

.chamada {
  /* Centro óptico: meio da área abaixo do cabeçalho, não da tela inteira. */
  position: absolute; z-index: 2; left: var(--lateral); top: calc(50% + 40px); transform: translateY(-50%);
  max-width: min(600px, calc((100vw - 2 * var(--lateral)) * .52));
  pointer-events: none;
}
.chamada > * { pointer-events: auto; }
.sobretitulo { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza-medio); }
.chamada h1 {
  margin: 0; font-size: clamp(38px, 5.6vw, 76px); line-height: 1.04; font-weight: 700; letter-spacing: -.025em; color: var(--preto);
  text-wrap: balance;
}
.escuro .chamada h1 { color: var(--branco); }
.chamada .sub { margin: 18px 0 30px; max-width: 470px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.45; font-weight: 300; }
.escuro .chamada .sub { font-weight: 200; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }


/* Qualquer tela em pé (celular ou tablet): texto embaixo, logo no espaço livre acima dele.
   O limite 9/10 é o mesmo que entropia.js usa para decidir o modo retrato. */
@media (max-aspect-ratio: 9/10) {
  .chamada { top: auto; bottom: clamp(56px, 9vh, 120px); transform: none; max-width: min(600px, calc(100vw - 2 * var(--lateral))); }
}
/* Celular deitado: pouca altura, título menor. */
@media (max-height: 520px) and (min-aspect-ratio: 9/10) {
  .chamada h1 { font-size: clamp(30px, 4.4vw, 46px); }
  .chamada .sub { margin: 12px 0 18px; }
}
/* Telas de toque: links do menu com área de toque de 40 px. */
@media (pointer: coarse) {
  .topo nav a:not(.pilula) { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Telas estreitas: a cena sobe e o texto ganha um fundo que garante leitura. */
@media (max-width: 760px) {
  .topo nav a:not(.pilula) { display: none; }
  .chamada { top: auto; bottom: 64px; transform: none; }
  .chamada::before {
    content: ""; position: absolute; z-index: -1; inset: -48px calc(-1 * var(--margem)) -64px;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff 34%);
  }
  .escuro .chamada::before { background: linear-gradient(to bottom, rgb(8 6 7 / 0), var(--fundo-escuro) 34%); }
  .chamada .sub { margin: 14px 0 22px; }
}