/* ==========================================================================
   OSY IMPLEMENTOS — base.css
   Tokens de identidade, reset e tipografia.

   PALETA (doc §3.1). O conflito entre o Brand Book do Grupo (PANTONE 3145 C
   = #1C6F80) e o Manual da Cultura 2026 (Teal OSY #1F7A8C) foi resolvido
   como o próprio §3.1 recomenda: o valor do Manual da Cultura na interface
   do site, o valor do Brand Book na marca gráfica e no bloco do ecossistema.
   Os hexadecimais abaixo são a tabela do §3.1, transcrita sem alteração.

   Os arquivos de arte entregues (backgrounds, logos SVG, stencils) usam
   #1f7a8b e #083955 — um a dois pontos de diferença num único canal, o que
   é imperceptível e não gera emenda visível. A marca gráfica entra como
   veio, sem recolorir: o Brand Book proíbe (pág. 30).
   ========================================================================== */

/* --------------------------------------------------------------- FONTES
   Chivo e Boldonse são as duas oficiais (Brand Book, pág. 26) e vieram na
   pasta Contexto sob licença OFL — que permite auto-hospedar. Ficam locais
   em vez de virem do Google: uma dependência externa a menos, e a arte é
   exatamente o arquivo que a OSY recebeu da agência. As licenças estão em
   img/fontes/OFL-*.txt, como a OFL exige.

   Chivo é variável: um arquivo cobre de 100 a 900.

   Oswald continua vindo do Google porque é substituta provisória da
   condensada pesada do §3.2, que ainda não foi nomeada nem licenciada.   */
@font-face {
  font-family: "Chivo";
  src: url("../img/fontes/chivo-variavel.woff2") format("woff2-variations"),
       url("../img/fontes/chivo-variavel.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Boldonse";
  src: url("../img/fontes/boldonse.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- cor --- */
  --teal: #1f7a8c;          /* Manual da Cultura — cor principal da interface */
  --teal-brandbook: #1c6f80; /* Brand Book do grupo — alternativa a decidir */
  --teal-claro: #438593;
  --navy: #083957;
  --bone: #eee9e3;
  --areia: #c5c1b5;
  --branco: #ffffff;

  --tinta: var(--navy);
  --tinta-fraca: #4a6a80;
  --linha: rgba(8, 57, 87, 0.14);
  --linha-forte: rgba(8, 57, 87, 0.28);

  /* --- tipografia (doc §3.2 + Brand Book pág. 26) ---
     O Brand Book nomeia as duas oficiais e as duas estão no Google Fonts,
     sem custo de licença: Chivo no texto corrido e Boldonse nas palavras de
     destaque. A condensada pesada que o §3.2 pede para nome de produto não é
     nenhuma das duas — o próprio Brand Book usa uma terceira nos seus
     títulos, sem nomear. Oswald segue como substituta dela.

     PENDÊNCIA que resta (doc §9.1): nomear e licenciar a condensada. */
  --fonte-condensada: "Oswald", "Archivo Narrow", Impact, sans-serif;
  --fonte-texto: "Chivo", "Inter", system-ui, -apple-system, sans-serif;
  --fonte-destaque: "Boldonse", "Oswald", Impact, sans-serif;

  /* --- medidas --- */
  --altura-header: 76px;
  /* o cabeçalho encolhe ao rolar; a navbar é fixa e nunca cede */
  --altura-header-compacto: 66px;
  /* a faixa das quatro frentes do grupo, fixa acima do cabeçalho */
  --altura-barra-grupo: 38px;

  /* Duas medidas, de propósito.
     `--topo-fixo` é de LAYOUT: o quanto a página reserva no alto para o
     conteúdo não nascer atrás da barra e do cabeçalho. Não muda nunca — se
     mudasse, o hero encolheria durante a rolagem e o texto pularia.
     `--topo-grude` é de POSIÇÃO: onde as coisas grudam de fato agora, e
     acompanha o cabeçalho quando ele compacta.                            */
  --topo-fixo: calc(var(--altura-barra-grupo) + var(--altura-header));
  --topo-grude: var(--topo-fixo);
  --margem: clamp(20px, 5vw, 72px);
  --largura-max: 1560px;
  --raio: 2px;

  /* --- movimento ---
     O cliente pediu um site que pareça técnico e atual. O vocabulário está
     em css/paginas.css e js/animacoes.js; estas são as curvas comuns.      */
  --suave: cubic-bezier(0.16, 1, 0.3, 1);
  --saida: cubic-bezier(0.7, 0, 0.84, 0);
  --rapido: 0.25s var(--suave);
  --medio: 0.5s var(--suave);
  --lento: 0.9s var(--suave);

  /* --- camadas ---
     Os valores seguem a escala que o projeto já usava (barra de ações 60,
     WhatsApp 80, painéis 89, cabeçalho 90). A gaveta e o véu ficam acima de
     tudo porque cobrem a tela inteira; a fita de progresso vem por último,
     porque é uma linha de 2px que não pode ficar atrás de nada.           */
  --z-cena: 2;
  --z-conteudo: 3;
  --z-barra-acoes: 60;
  --z-painel: 89;
  --z-header: 90;
  --z-pilha: 95;
  /* acima do cabeçalho e da pilha: a barra do grupo nunca é encoberta */
  --z-barra-grupo: 100;
  --z-veu: 119;
  --z-gaveta: 120;
  --z-progresso: 130;
  /* acima de tudo: a abertura cobre a página inteira */
  --z-abertura: 200;
}

/* Quem pediu menos movimento recebe menos movimento. Vale para o site
   inteiro: as animações de js/animacoes.js consultam a mesma regra.       */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topo-grude) + 16px);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--teal); color: #fff; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Barra de rolagem na cor da marca, igual à do institucional do Grupo OSY —
   mesma largura, mesmo raio e a mesma borda de trilho que faz o polegar
   parecer flutuar. Lá a regra usa --cream e --navy-500; aqui os equivalentes
   da mesma rampa do Brand Book são --bone e este navy médio, um passo mais
   claro que o --navy do texto para não pesar na lateral da tela.

   As barras horizontais escondidas (.sem-barra, os trilhos de chips) seguem
   escondidas: seletor de classe ganha do seletor global.                    */
:root { --navy-rolagem: #135579; }

html {
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: var(--navy-rolagem) var(--bone);
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bone); }
::-webkit-scrollbar-thumb {
  background: var(--navy-rolagem);
  border-radius: 6px;
  border: 2px solid var(--bone);
}
::-webkit-scrollbar-thumb:hover { background: var(--navy); }

/* --------------------------------------------------------------- tipografia */

/* Nome de produto: condensada pesada, caixa alta, tracking negativo, corpo
   muito grande — "o nome ocupa a tela" (doc §3.2). */
.nome-produto {
  font-family: var(--fonte-condensada);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.86;
}

.titulo {
  font-family: var(--fonte-condensada);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.titulo-xl { font-size: clamp(2.6rem, 7vw, 6rem); }
.titulo-l  { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.titulo-m  { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }

/* Tag de categoria: caixa alta com tracking positivo (doc §3.2). */
.tag {
  font-family: var(--fonte-texto);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Texto corrido: no máximo 45 caracteres por linha, entrelinha 1,5. */
.texto { max-width: 45ch; line-height: 1.5; }
.texto-largo { max-width: 62ch; line-height: 1.5; }

/* A assinatura do produto, em caixa alta desde a v2 (doc §2.4). O tracking
   negativo é do nome do produto; a assinatura fica em zero.               */
.assinatura {
  font-family: var(--fonte-condensada);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 0.01em;
}

/* Números com unidade grudada, alinhados (doc §3.2). */
.numero {
  font-family: var(--fonte-condensada);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.fraco { color: var(--tinta-fraca); }

/* --------------------------------------------------------------- utilitários */
.shell {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.secao { padding-block: clamp(64px, 9vw, 140px); }
.secao-curta { padding-block: clamp(48px, 6vw, 88px); }

.fundo-bone   { background: var(--bone); }
.fundo-branco { background: var(--branco); }
.fundo-areia  { background: var(--areia); }
.fundo-navy   { background: var(--navy); color: #f2f6f8; }
.fundo-teal   { background: var(--teal); color: #fff; }

/* escrito por js/animacoes.js quando o cabeçalho compacta */
body.header-compacto {
  --topo-grude: calc(var(--altura-barra-grupo) + var(--altura-header-compacto));
}

/* A barra das quatro frentes existe só na home (ver OSY.montarBarraGrupo).
   Onde ela não existe, tudo que se apoia nela desconta a altura dela: o
   cabeçalho encosta no alto da janela e os painéis, a barra de ações e o
   recuo de âncora acompanham. Sem isto sobraria uma faixa vazia de 38px no
   topo de todas as páginas internas.

   Os dois tokens precisam ser redeclarados aqui, e não só a altura: uma
   custom property com `calc` é resolvida onde foi declarada — mudar só
   `--altura-barra-grupo` no corpo não mexeria no valor que veio do `:root`. */
body:not([data-pagina="home"]) {
  --altura-barra-grupo: 0px;
  --topo-fixo: var(--altura-header);
  --topo-grude: var(--altura-header);
}
body:not([data-pagina="home"]).header-compacto {
  --topo-grude: var(--altura-header-compacto);
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal no scroll — aplicado por js/base.js.

   O estado escondido vive atrás de `.js`, que a própria JS escreve no <html>
   antes de qualquer outra coisa. Sem JS, com JS quebrada ou com o
   IntersectionObserver falhando, o conteúdo simplesmente aparece: uma
   animação de entrada nunca pode ser a razão de um bloco não existir.     */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--suave), transform 0.8s var(--suave);
  will-change: opacity, transform;
}
.js [data-revelar].visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
}

/* trilhos horizontais */
.sem-barra { scrollbar-width: none; -ms-overflow-style: none; }
.sem-barra::-webkit-scrollbar { display: none; }