/* ==========================================================================
   base.css — fontes, tokens de design, reset e utilitários globais.
   Os tokens abaixo são a fonte única de verdade das cores e espaçamentos:
   trocar o latão do site é trocar --brass na paleta lá embaixo.
   ========================================================================== */

/* Inter · cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Inter · cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter · greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* Inter · greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Inter · vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Inter · latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter · latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format('woff2');
  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;
}

/* JetBrains Mono · cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* JetBrains Mono · cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* JetBrains Mono · greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* JetBrains Mono · vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format('woff2');
  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;
}

/* Bricolage Grotesque · latin-ext
   Variável nos dois eixos que interessam: peso (400–800) e largura (75–100%).
   A largura é usada como recurso de projeto — títulos condensados, etiquetas
   em largura cheia — e é o que dá personalidade à tipografia da página. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bricolage Grotesque · latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-latin.woff2") format('woff2');
  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;
}

/* ==========================================================================
   PALETA — "galeria"
   A página é uma parede escura; os sites dos clientes são as peças
   emolduradas. Por isso a minha cor é discreta e a deles é que brilha.

   O latão não foi escolhido no vácuo: é onde o bronze da Mainieri (#c4a97a)
   e o terracota do Use Art Crochet (#c8835a) se encontram. Minha cor sai do
   trabalho dos clientes.
   ========================================================================== */
:root {
  --ink:        #0a0a0b;  /* parede         */
  --ink-2:      #121214;  /* faixa elevada  */
  --ink-3:      #1a1a1d;  /* cartão         */
  --chalk:      #f2efe9;  /* etiqueta       */
  --brass:      #e0a45c;  /* latão          */
  --brass-deep: #a8702f;  /* latão oxidado  */
  --zap:        #25d366;  /* verde WhatsApp */
}

/* ------------------------------------------------------- papéis dos tokens -- */
:root {
  /* superfícies, da mais escura para a mais clara */
  --bg: var(--ink);
  --bg-elev: var(--ink-2);
  --bg-card: var(--ink-3);

  /* traços */
  --border: #232326;
  --border-strong: #33333a;

  /* texto, do mais forte para o mais apagado */
  --text: var(--chalk);
  --text-muted: #9b968d;
  --text-dim: #857f76;
  --text-faint: #625d56;

  /* marca */
  --accent: var(--brass);
  --accent-strong: var(--brass-deep);
  --accent-glow: rgba(224, 164, 92, 0.12);
  --success: var(--zap);

  --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Larguras do eixo wdth do display. Títulos apertam; etiquetas respiram. */
  --wd-tight: 80%;
  --wd-open: 100%;

  --container: 1140px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --section-y: 116px;
  --gutter: 24px;

  --t-fast: 0.2s;
  --t-med: 0.3s;
  --t-slow: 0.6s;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

button {
  font-family: inherit;
}

::selection {
  background: rgba(224, 164, 92, 0.28);
  color: var(--chalk);
}

/* Âncoras não param debaixo da navbar fixa. */
[id] {
  scroll-margin-top: 96px;
}

/* ------------------------------------------------------------ utilitários -- */
.container {
  max-width: var(--container);
  margin: 0 auto;
}

/* Etiqueta de parede: mono, caixa alta, espaçada. */
.u-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Ícone de linha padrão — herda a cor de quem o contém. */
.ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Visível só para leitores de tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background: var(--brass);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  font-weight: 700;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: 0;
}

/* Foco visível e consistente em tudo que é interativo. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- animação -- */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Revelação ao rolar: aplicada por js/reveal.js, um bloco por vez.

   O bloco só é escondido depois que o próprio js/reveal.js marca o <html>
   com .js-reveal — ou seja, depois de confirmar que consegue revelá-lo. Sem
   JS, sem IntersectionObserver ou com "menos movimento" ligado, a classe
   nunca entra e nada some. Conteúdo nunca depende de script para aparecer. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) ease, transform var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}