/* Grupo Dls/ - reset, fontes e comportamento base */

/* AS FONTES SAO REFERENCIADAS RELATIVAMENTE A ESTA FOLHA
   (`../../assets/fonts/`), e nao a partir da raiz do dominio.

   `url()` dentro de um CSS resolve contra o ENDERECO DA FOLHA, nao contra
   o do documento - entao `../../` daqui (`/src/styles/`) chega em
   `/assets/` esteja o site montado na raiz de um dominio ou dentro de uma
   pasta. E' a unica referencia do projeto que consegue ser portatil sem
   ajuda do PHP, porque e' a unica que o proprio arquivo resolve.

   O resto do site (`href`, `src`) continua absoluto a partir da raiz -
   ver a nota sobre publicacao no README. */

/* ---------- fontes ----------
   Cinco pesos, não vinte. Hairline para algarismo, Light para display,
   Regular para corpo, Medium para rótulo e botão.

   O BOLD FICOU SEM USO DECLARADO em 25/08. Ele existia para uma coisa
   só - o rótulo "Procure por isso quando:" dentro do cartão de serviço -
   e essa caixa saiu de todas as frentes a pedido da CEO. Hoje nenhuma
   regra pede 700; o que ainda alcança o arquivo é o `bolder` padrão do
   navegador em `<b>`/`<strong>`, e os `<b>` que o site tem já declaram
   peso próprio. Medido: o único elemento em 700 no site é um `<h2>`
   `visually-hidden`.

   O @font-face FICA, e é uma escolha: sem o arquivo, um `<b>` numa copy
   futura faria o navegador engordar o Medium por conta própria -
   falso-negrito, que borra o desenho da letra justo no tamanho pequeno
   onde ele já é frágil. O custo é um woff2 baixado por causa de um
   título invisível; se isso incomodar, o caminho é dar peso explícito
   àquele `<h2>`, não apagar a fonte. */
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../../assets/fonts/HelveticaNowDisplay-Hairline.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../../assets/fonts/HelveticaNowDisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../../assets/fonts/HelveticaNowDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../../assets/fonts/HelveticaNowDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../../assets/fonts/HelveticaNowDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fallback métrico: evita o salto de layout na troca da fonte (CLS). */
@font-face {
  font-family: "HND Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 97%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- corpo ---------- */
body {
  font-family: var(--ff), "HND Fallback";
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /* A cor de fundo acompanha a inversão da cena 4. A transição é curta
     de propósito: o corte precisa ser sentido, não deslizado. */
  transition:
    background-color var(--dur-base) linear,
    color var(--dur-base) linear;
}

/* Lenis controla a rolagem quando o JS está ativo. Sem JS, o navegador
   volta a mandar e a âncora precisa continuar suave. */
html:not(.lenis) {
  scroll-behavior: smooth;
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* Trava a rolagem enquanto o loader roda, sem esconder o hero do
   navegador: o LCP precisa medir o texto que já está pintado embaixo. */
body.is-loading,
body.menu-aberto {
  overflow: hidden;
}

/* ---------- links e foco ---------- */
a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--c-yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--c-yellow);
  color: var(--c-black);
}

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-loader);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-yellow);
  color: var(--c-black);
  border-radius: var(--r-pill);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* Folha de símbolos. Fora do fluxo e fora da árvore de acessibilidade;
   o `<use>` continua enxergando os símbolos daqui. */
.sprite {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- squircle ----------
   A primitiva do sistema, em porcentagem para que o raio continue
   proporcional: raio fixo em px transformaria um card grande num
   retângulo arredondado genérico. Vale para box quadrado; fora do
   quadrado use --r-squircle-4x5 / --r-squircle-4x3. */
.squircle {
  border-radius: var(--r-squircle);
  overflow: hidden;
}

/* ---------- grão ----------
   Fixo e pointer-events none. Nunca dentro de container que rola:
   repaint contínuo de GPU destrói o FPS no celular. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ---------- redução de movimento ----------
   Não é atenuação: é desligamento. Loader não roda, cena não prende,
   vídeo não toca, faixa não corre. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .grain {
    display: none;
  }
}