/* VENCER — sistema de design brutalista-premium (anti-herói)
   Aplicado em todas as páginas via <link rel="stylesheet" href="../assets/vencer.css">
   Tokens da marca (manual): navy #182039 / blue #113f6c / orange #e6500f / amber #ee7511 */

:root {
  --ink: #0b0d12;      /* near-black brutalista (mais fundo que o navy) */
  --navy: #182039;     /* superfície */
  --blue: #113f6c;
  --orange: #e6500f;
  --amber: #ee7511;
  --paper: #f4f1ea;    /* off-white / papel */
  --line: rgba(244, 241, 234, 0.16);
  --line-strong: rgba(244, 241, 234, 0.9);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background: var(--navy); color: var(--paper); }

/* ---------- Tipografia ---------- */
.font-display { font-family: 'Anton', 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: -0.01em; line-height: 0.92; text-transform: uppercase; }
.font-serif   { font-family: 'Playfair Display', Georgia, serif; }
.font-mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); }
.h-hero  { font-family: 'Anton', sans-serif; text-transform: uppercase; line-height: 0.9;  letter-spacing: -0.015em; font-size: clamp(2.9rem, 11vw, 8.5rem); }
.h-sec   { font-family: 'Anton', sans-serif; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; font-size: clamp(2.2rem, 6.5vw, 5rem); }
.h-card  { font-family: 'Anton', sans-serif; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.005em; }

.stroke-text { -webkit-text-stroke: 2px var(--paper); color: transparent; }
.accent { color: var(--orange); }
.pull { font-family: 'Playfair Display', serif; font-style: italic; }

/* ---------- Régua / grid brutalista ---------- */
.rule       { border: 0; border-top: 2px solid var(--line-strong); }
.rule-soft  { border: 0; border-top: 1px solid var(--line); }
.bordered   { border: 2px solid var(--line-strong); }
.bordered-b { border-bottom: 2px solid var(--line-strong); }

/* ---------- Botões (offset hard-shadow, sem cantos) ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'JetBrains Mono', monospace; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; padding: 1.05rem 1.9rem; border: 2px solid;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease; cursor: pointer; }
.btn-primary { background: var(--orange); color: var(--ink); border-color: var(--ink); box-shadow: 5px 5px 0 var(--paper); }
.btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--paper); }
.btn-primary:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--paper); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--line-strong); box-shadow: 5px 5px 0 var(--orange); }
.btn-ghost:hover { background: var(--paper); color: var(--ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--orange); }
.btn-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 5px 5px 0 var(--orange); }
.btn-dark:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--orange); }

/* ---------- Cards ---------- */
.card { border: 2px solid var(--line-strong); background: transparent; transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; }
.card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--orange); }
.card-fill { background: var(--blue); }
.card-orange { background: var(--orange); color: var(--ink); border-color: var(--ink); }
.card-orange:hover { box-shadow: 10px 10px 0 var(--paper); }

.num { font-family: 'Anton', sans-serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 0.8; color: var(--orange); }

/* ---------- Tags / chips (sharp, mono) ---------- */
.chip { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1.5px solid var(--line-strong); padding: 0.4rem 0.8rem; }

/* ---------- Marquee / ticker ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-block; will-change: transform; animation: vmarq 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes vmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.25em; padding: 0 1.2rem; color: rgba(244,241,234,0.45); }
.marquee-star { color: var(--amber); padding: 0 0.5rem; font-size: 0.7rem; opacity: 0.6; }

/* ---------- Grão / textura ---------- */
.grain::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Utilidades ---------- */
.link-underline { position: relative; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--orange); transition: width 0.2s ease; }
.link-underline:hover::after { width: 100%; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}