/* ==========================================================================
   CR Acessórios Off-Road — base: fontes, tokens, reset, tipografia, botões
   ========================================================================== */

@font-face { font-family: 'Barlow Condensed'; src: url('../assets/fonts/BarlowCondensed-ExtraBoldItalic.woff') format('woff'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../assets/fonts/BarlowCondensed-BoldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../assets/fonts/BarlowCondensed-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../assets/fonts/BarlowCondensed-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../assets/fonts/Barlow-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../assets/fonts/Barlow-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../assets/fonts/Barlow-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }

:root {
  /* paleta tirada da logo */
  --black: #000000;          /* preto */
  --graphite: #17181b;       /* superfícies escuras */
  --graphite-2: #232428;
  --red: #e30613;            /* vermelho CR */
  --red-deep: #a8040e;
  --white: #ffffff;
  --paper: #eef0f1;          /* papel técnico (frio) */
  --paper-2: #e2e5e7;
  --alu: #a7adb4;            /* cinza metálico */
  --ink: #ffffff;            /* texto: branco */
  --ink-soft: #ffffff;
  --line-light: rgba(18, 19, 22, 0.12);
  --line-dark: rgba(255, 255, 255, 0.14);
  --wa: #e30613;   /* WhatsApp também em vermelho (identidade: preto, branco e vermelho) */

  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* escala tipográfica (razão ~1.25) */
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-h3: 1.5rem;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 78rem;
  --header-h: 4.25rem;
  --radius-s: 6px;
  --radius-m: 14px;
  --slant: -12deg;           /* inclinação da marca */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
dialog { color: inherit; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 100; transform: translateY(-300%);
  background: var(--red); color: #fff; padding: 0.75rem 1rem; border-radius: var(--radius-s);
  font-weight: 600; text-decoration: none; transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
[data-theme='dark'] :focus-visible, .site-header :focus-visible { outline-color: #ff4d55; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- títulos ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6.4vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.display--sm { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 0.95; }
.display--xl { font-size: clamp(3rem, 8.6vw, 7.5rem); line-height: 0.86; }

/* ---------- botões ---------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #ffffff;
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 700; font-style: italic;
  font-size: 1.125rem; letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* fundo inclinado como a marca, texto reto */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
  transform: skewX(var(--slant));
  border-radius: 3px;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:hover::before { transform: skewX(var(--slant)) translateX(3px); }
.btn:active::before { transform: skewX(var(--slant)) scale(0.97); }
.btn:focus-visible { outline-offset: 5px; }

.btn--primary { --btn-bg: var(--red); }
.btn--primary:hover { --btn-bg: #ff1424; }
.btn--wa { --btn-bg: var(--wa); }
.btn--wa:hover { --btn-bg: #ff1424; }
.btn--ghost { --btn-bg: transparent; }
.btn--ghost::before { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.btn--ghost:hover::before { box-shadow: inset 0 0 0 2px var(--red); background: rgba(227, 6, 19, 0.16); }
.btn--dark { --btn-bg: var(--ink); }
.btn--dark:hover { --btn-bg: #000; }
.btn--outline-dark { --btn-fg: var(--ink); --btn-bg: transparent; }
.btn--outline-dark::before { box-shadow: inset 0 0 0 2px var(--ink); }
.btn--outline-dark:hover::before { background: var(--ink); }
.btn--outline-dark:hover { --btn-fg: var(--white); }
.btn--sm { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 1rem; }
.btn--lg { min-height: 4rem; padding: 1rem 2.4rem; font-size: 1.375rem; }
.btn--block { width: 100%; }

.text-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 0.3em; text-decoration-color: var(--red);
  min-height: 2.75rem;
}
.text-link:hover { color: var(--red); }
.text-link--light:hover { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}