/* ============================================================
   TOKENS · CAR5 Vistorias (recriação)
   Derivado de skills/acabamento-visual/assets/tokens.css.
   Marca extraída do computed style do site original.
   ============================================================ */

@font-face {
  font-family: 'Obviously Wide';
  src: url(../fonts/ObviouslyWide-Bold.otf) format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ============ MARCA ============ */
  --marca-a:    #FCA80C;   /* laranja CAR5 */
  --marca-b:    #14005A;   /* roxo CAR5 */
  --marca-a-hi: #FFB82E;
  --marca-b-hi: #3A1FB3;

  /* Neutro: o roxo da marca é escuro o bastante pra ser o ink. */
  --ink-900: #0E0640;
  --ink-800: #14005A;
  --ink-700: #1D0C72;
  --ink-600: #2E1E8A;
  --surface:   #FAF8F3;   /* off-white quente do original */
  --surface-2: #FFFFFF;

  /* Display: a fonte da marca, um peso só (é o que existe).
     Texto: Inter em quatro pesos. */
  --font-display: 'Obviously Wide', 'Arial Black', Impact, sans-serif;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  /* ============ FIM DA MARCA ============ */

  --grad-marca: linear-gradient(45deg, var(--marca-a) 0%, var(--marca-b-hi) 100%);

  /* Botão primário: laranja sólido com texto roxo (8,4:1).
     Branco sobre laranja reprova. */
  --btn-bg: var(--marca-a);
  --btn-fg: var(--ink-900);

  --on-dark:        #FFFFFF;
  --on-dark-muted:  rgba(255,255,255,.78);
  --on-dark-faint:  rgba(255,255,255,.62);
  --on-light:       #1A1726;
  --on-light-muted: #4E5566;

  /* marca-texto: laranja como luz atrás do texto, nunca como cor do texto sobre claro */
  --marca-texto: rgba(252,168,12,.42);

  --glass-bg:     rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.12);
  --glass-blur:   12px;

  --fs-display:    clamp(1.5rem, .95rem + 2.2vw, 2.6rem);
  --fs-display-lg: clamp(1.6rem, .9rem + 2.4vw, 2.9rem);   /* Obviously Wide é larga: menos px que uma grotesca normal */
  --fs-lead:       clamp(1rem, .92rem + .3vw, 1.15rem);
  --fs-body:       .9375rem;
  --fs-sm:         .8125rem;
  --fs-btn:        .8125rem;

  --lh-display: 1.06;
  --lh-body:    1.55;

  --container:       1200px;
  --pad-x:           1.5rem;
  --pad-x-md:        3.5rem;
  --section-y-tight: 3.5rem;
  --section-y:       5.5rem;
  --section-y-loose: 7rem;

  --r-btn:   6px;
  --r-card:  8px;
  --r-glass: 12px;
  --r-panel: 18px;

  --ease-out-expo: cubic-bezier(.22, 1, .36, 1);
  --ease-soft:     cubic-bezier(.25, .1, .25, 1);
  --dur-micro: .3s;
  --dur-face:  .5s;
  --dur-enter: .6s;
  --dur-hero:  .85s;

  --shadow-baixa: 0 1px 2px rgba(20,0,90,.10), 0 2px 8px rgba(20,0,90,.08);
  --shadow-alta:  0 2px 4px rgba(20,0,90,.14), 0 18px 40px rgba(20,0,90,.22);
  --shadow-btn:   0 1px 2px rgba(20,0,90,.10);
  --shadow-marca: 0 10px 30px rgba(252,168,12,.32);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  background: var(--surface); color: var(--on-light);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg, video, iframe { max-width: 100%; display: block; }
button { font: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.container { max-width: var(--container); width: 100%; margin-inline: auto; padding-inline: var(--pad-x); }
@media (min-width: 768px) { .container { padding-inline: var(--pad-x-md); } }

.section        { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--loose { padding-block: var(--section-y-loose); }
.section--dark  { background: var(--ink-800); color: var(--on-dark); }
.section--deep  { background: var(--ink-900); color: var(--on-dark); }
.section--light { background: var(--surface); color: var(--on-light); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: .72rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--on-dark-faint); margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--marca-a); border-radius: 2px; }
.section--light .eyebrow { color: var(--on-light-muted); }

/* Título de dobra: fonte da marca, caixa normal, leading apertado. */
.display {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-display); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; text-wrap: balance;
}
@media (min-width: 768px) { .display { line-height: var(--lh-display); letter-spacing: -.015em; } }
.display--lg { font-size: var(--fs-display-lg); }
.section--light .display { color: var(--ink-800); }

.marca-texto {
  background-image: linear-gradient(transparent 55%, var(--marca-texto) 55%, var(--marca-texto) 92%, transparent 92%);
  padding-inline: .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* sobre fundo escuro o laranja pode SER o texto (8,4:1): marca-texto vira cor, sem tarja */
.section--dark .marca-texto, .section--deep .marca-texto, #hero .marca-texto { background-image: none; color: var(--marca-a); padding-inline: 0; }

.lead { font-size: var(--fs-lead); color: var(--on-dark-muted); margin: 1rem 0 0; max-width: 58ch; }
.section--light .lead { color: var(--on-light-muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9375rem 1.5rem; min-height: 48px;
  border: 0; border-radius: var(--r-btn);
  font-size: var(--fs-btn); font-weight: 700; letter-spacing: .2px;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-soft), box-shadow var(--dur-micro) var(--ease-soft), filter var(--dur-micro) var(--ease-soft);
}
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-btn); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-marca); filter: brightness(1.04); }
.btn--ink { background: var(--ink-800); color: var(--on-dark); box-shadow: var(--shadow-btn); }
.btn--ink:hover { transform: translateY(-2px); box-shadow: var(--shadow-alta); }
.btn--ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--marca-a); transform: translateY(-2px); }
.section--light .btn--ghost { color: var(--ink-800); box-shadow: inset 0 0 0 1px rgba(20,0,90,.28); }
.btn svg { width: 18px; height: 18px; flex: none; }

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: var(--r-glass);
}

.divisor {
  position: relative; z-index: 5; height: 1px; border: 0; margin: 0;
  overflow: visible;   /* <hr> vem com overflow:hidden no Chrome */
  background: linear-gradient(90deg, transparent 0%,
    color-mix(in srgb, var(--marca-a) 20%, transparent) 10%,
    color-mix(in srgb, var(--marca-a) 75%, transparent) 34%,
    #fff 50%,
    color-mix(in srgb, var(--marca-a) 75%, transparent) 66%,
    color-mix(in srgb, var(--marca-a) 20%, transparent) 90%, transparent 100%);
}
.divisor::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(52%, 620px); height: 5px;
  transform: translate(-50%,-50%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--marca-a-hi) 70%, #fff) 50%, transparent);
  filter: blur(5px); opacity: .9; pointer-events: none;
}
.divisor::after {
  content: ""; position: absolute; left: 50%; top: 0; width: min(94%, 1200px); height: 220px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 68% 100% at 50% 0%, color-mix(in srgb, var(--marca-a) 26%, transparent) 0%, transparent 78%);
}
.divisor--sobe::after {
  top: auto; bottom: 0;
  background: radial-gradient(ellipse 68% 100% at 50% 100%, color-mix(in srgb, var(--marca-a) 34%, transparent) 0%, transparent 78%);
}

.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; }
:focus-visible { outline: 2px solid var(--marca-a); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: transform var(--dur-enter) var(--ease-out-expo), opacity var(--dur-enter) ease;
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
  }
  .js [data-reveal].visivel { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}