/* ================================================================
   Willian Teixeira — Advogado
   Tokens: navy charcoal + cobre · masculino moderno, confiável
   ================================================================ */

:root {
  /* Surfaces — deep cool navy graphite */
  --bg-0: oklch(0.20 0.018 248);
  --bg-1: oklch(0.235 0.020 245);
  --bg-2: oklch(0.275 0.022 242);
  --bg-3: oklch(0.32 0.024 240);
  --bg-elev: oklch(0.255 0.020 244);

  /* Text — warm off-white on cool navy */
  --fg-0: oklch(0.97 0.008 85);
  --fg-1: oklch(0.85 0.010 80);
  --fg-2: oklch(0.68 0.013 75);
  --fg-3: oklch(0.54 0.015 75);
  --fg-4: oklch(0.42 0.014 70);

  /* Borders */
  --line-1: oklch(0.36 0.022 240);
  --line-2: oklch(0.30 0.020 240);
  --line-3: oklch(0.44 0.024 235);

  /* Accent — warm copper, pops on navy */
  --brass: oklch(0.76 0.115 65);
  --brass-soft: oklch(0.66 0.105 62);
  --brass-deep: oklch(0.50 0.095 58);

  /* CTA — verde WhatsApp */
  --whats: #25D366;
  --whats-deep: #1da851;
  --whats-soft: #1f7a40;

  /* Urgência — oxblood/burgundy */
  --urg: oklch(0.62 0.175 25);
  --urg-bg: oklch(0.30 0.090 25);

  /* Type stacks */
  --serif: "Fraunces", "Source Serif Pro", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 20px;

  /* Spacing */
  --gap-section: clamp(56px, 8vw, 110px);

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 32px 80px -24px rgba(0,0,0,0.65), 0 12px 28px -12px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-wrap: balance;
  font-feature-settings: "ss01";
  color: var(--fg-0);
}

p { text-wrap: pretty; }

.mono {
  font-family: var(--mono);
  font-size: 0.78em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--brass);
  display: inline-block;
}

/* ---------- Layout ---------- */

.shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: var(--gap-section) 0;
  position: relative;
}

.section--tight { padding: clamp(56px, 8vw, 96px) 0; }

.rule {
  height: 1px;
  background: var(--line-2);
  width: 100%;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.btn--whats {
  background: var(--whats);
  color: #0a1a10;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 12px 28px -10px rgba(37, 211, 102, 0.5);
}
.btn--whats:hover {
  background: #2bdf6e;
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--line-3);
}
.btn--ghost:hover { background: var(--bg-2); border-color: var(--brass-soft); color: var(--fg-0); }

.btn--large { padding: 18px 30px; font-size: 16px; }

.wa-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utility ---------- */
.text-brass { color: var(--brass); }
.text-fg2 { color: var(--fg-2); }
.text-fg3 { color: var(--fg-3); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-1);
  background: var(--bg-elev);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass);
}
.tag .dot--whats { background: var(--whats); box-shadow: 0 0 0 3px rgba(37,211,102,0.18); }