/* ============================================================
   CANERI ADVOCACIA — Design Tokens (colors + type)
   Source of truth for every UI surface.
   ============================================================ */

/* ── WEBFONTS ─────────────────────────────────────────────── */
/* Inter — body sans (Google Fonts) */
/* Jost — Futura-alike geometric display (Google Fonts; substitution for Futura which is licensed) */
/* JetBrains Mono — code / metadata */
:root {

  /* ════════════════════════════════════════════════════════
     COLOR  —  Black, Gold, Neutral Gray
     "Sobriedade e prestígio. Preto domina, ouro pontua,
      cinzas dão respiração."
     ════════════════════════════════════════════════════════ */

  /* Primárias */
  --color-black:        #0E0E0E;
  --color-white:        #FFFFFF;

  /* Ouro — acento da marca. Use com parcimônia. */
  --color-gold-50:      #FDF6E3;
  --color-gold-100:     #F5DFA0;
  --color-gold-200:     #ECC668;
  --color-gold-300:     #D4A942;   /* ★ acento principal */
  --color-gold-400:     #C29230;
  --color-gold-500:     #B8892A;
  --color-gold-700:     #8A6218;
  --color-gold-900:     #4A3208;

  /* Cinza — escala neutra quente */
  --color-gray-50:      #F7F7F5;
  --color-gray-100:     #EBEBEA;
  --color-gray-200:     #D1D0CC;
  --color-gray-300:     #B4B3AE;
  --color-gray-400:     #8C8B87;
  --color-gray-500:     #6B6A66;
  --color-gray-600:     #4A4945;
  --color-gray-700:     #343431;
  --color-gray-800:     #252523;
  --color-gray-900:     #131311;

  /* Semânticas (usar sutil — nunca saturado) */
  --color-success-bg:   #EAF3DE;
  --color-success-text: #27500A;
  --color-success-dot:  #639922;

  --color-warning-bg:   #FDF6E3;
  --color-warning-text: #854F0B;
  --color-warning-dot:  #D4A942;

  --color-danger-bg:    #FCEBEB;
  --color-danger-text:  #791F1F;
  --color-danger-dot:   #E24B4A;

  --color-info-bg:      #E6F1FB;
  --color-info-text:    #185FA5;
  --color-info-dot:     #378ADD;

  /* Superfícies */
  --surface-primary:    #FFFFFF;
  --surface-secondary:  #F7F7F5;
  --surface-tertiary:   #EBEBEA;
  --surface-dark:       #0E0E0E;
  --surface-dark-raised:#1A1A18;

  /* Bordas */
  --border-subtle:      rgba(0, 0, 0, 0.08);
  --border-default:     rgba(0, 0, 0, 0.12);
  --border-medium:      rgba(0, 0, 0, 0.20);
  --border-strong:      rgba(0, 0, 0, 0.35);
  --border-gold:        #D4A942;

  /* ────────────────────────────────────────────────────────
     SEMÂNTICAS — foreground / background tokens
     Estes são os que componentes devem consumir.
     ──────────────────────────────────────────────────────── */
  --fg-primary:    var(--color-gray-900);
  --fg-secondary:  var(--color-gray-700);
  --fg-tertiary:   var(--color-gray-500);
  --fg-muted:      var(--color-gray-400);
  --fg-onDark:     var(--color-white);
  --fg-accent:     var(--color-gold-300);
  --fg-accentOnDark: var(--color-gold-200);

  --bg-page:       var(--surface-primary);
  --bg-subtle:     var(--surface-secondary);
  --bg-raised:     var(--surface-primary);
  --bg-inverse:    var(--surface-dark);

  /* ════════════════════════════════════════════════════════
     TYPOGRAPHY  —  three families with strict roles
     • DISPLAY (Jost / Futura) — wordmark, section eyebrows,
       headlines that need wide tracking & geometric calm.
     • SANS (Inter) — body copy, UI, forms, paragraphs.
     • MONO (JetBrains Mono) — process numbers, OAB,
       legal codes, metadata.
     ════════════════════════════════════════════════════════ */

  --font-sans:     'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display:  'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Tamanhos base */
  --text-xs:    10px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    18px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   56px;
  --text-5xl:   80px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.18em;
  --tracking-display:  0.22em;   /* uso clássico no wordmark CANERI */

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ════════════════════════════════════════════════════════
     SPACING / RADIUS / SHADOW / MOTION
     ════════════════════════════════════════════════════════ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:   0 2px 4px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
  --shadow-focus-gold: 0 0 0 3px rgba(212, 169, 66, 0.25);

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   250ms;

  /* ════════════════════════════════════════════════════════
     COMPONENT TOKENS
     ════════════════════════════════════════════════════════ */

  /* Botões */
  --btn-primary-bg:    var(--color-black);
  --btn-primary-text:  var(--color-white);
  --btn-primary-hover: #2A2A28;

  --btn-gold-bg:       var(--color-gold-300);
  --btn-gold-text:     var(--color-black);
  --btn-gold-hover:    var(--color-gold-400);

  /* Input */
  --input-bg:          var(--surface-primary);
  --input-border:      var(--color-gray-200);
  --input-focus:       var(--color-gold-300);
  --input-shadow-focus: var(--shadow-focus-gold);
  --input-height:      36px;
  --input-padding-x:   12px;
  --input-radius:      var(--radius-md);
  --input-font-size:   var(--text-base);

  /* Card */
  --card-bg:           var(--surface-primary);
  --card-border:       var(--border-subtle);
  --card-radius:       var(--radius-lg);
  --card-padding:      1rem 1.25rem;
  --card-accent:       var(--color-gold-300);

  /* Nav */
  --nav-bg:            var(--color-black);
  --nav-height:        52px;
  --nav-link-color:    var(--color-gray-400);
  --nav-link-active:   var(--color-white);
  --nav-indicator:     var(--color-gold-300);
}

/* ════════════════════════════════════════════════════════════
   SEMANTIC TYPE STYLES — apply these classes directly.
   Equivalentes a estilos de parágrafo de um editor.
   ════════════════════════════════════════════════════════════ */

/* Wordmark — exclusivo do logo / título de marca */
.t-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-primary);
}

/* Eyebrow / kicker — pequeno rótulo acima de títulos */
.t-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.t-eyebrow--gold { color: var(--color-gold-400); }

/* Display headlines — hero, capa */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

/* H1 / H2 / H3 — usados em seções, páginas */
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

/* Lead paragraph — primeiro parágrafo, intro */
.t-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

/* Body — corpo de texto padrão */
.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}
.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

/* Caption / meta — créditos, timestamps */
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--fg-tertiary);
}

/* Mono — números OAB, processos, código de identificação */
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-secondary);
}

/* Label — formulários */
.t-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
}

/* Link */
.t-link {
  color: var(--color-gold-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 169, 66, 0.35);
  transition: border-color var(--duration-normal) var(--ease-default);
}
.t-link:hover { border-bottom-color: var(--color-gold-400); }

/* Divider patterns recurring across the system */
.divider {
  height: 0.5px;
  background: var(--border-default);
  border: none;
  margin: var(--space-4) 0;
}
.divider--gold {
  height: 1px;
  background: var(--color-gold-300);
  border: none;
  margin: var(--space-4) 0;
}
/* Hairline gold — assinatura visual da marca */
.divider--hairline-gold {
  height: 1px;
  background: var(--color-gold-300);
  width: 32px;
  border: none;
}

/* ============================================================
   CANERI ADVOCACIA — Theme CSS
   Depends on: tokens.css
   ============================================================ */

/* ── BASE ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--surface-primary);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; margin: 0; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 500;
  border: none; cursor: pointer; text-decoration: none;
  transition: background var(--duration-normal) var(--ease-default),
              box-shadow  var(--duration-normal) var(--ease-default);
}
.btn:focus-visible { box-shadow: var(--shadow-focus-gold); outline: none; }
.btn--sm   { height: 28px; padding: 0 12px; font-size: 12px; border-radius: 6px; }
.btn--base { height: 36px; padding: 0 16px; font-size: 14px; border-radius: 8px; }
.btn--lg   { height: 44px; padding: 0 24px; font-size: 15px; border-radius: 8px; }
.btn--primary   { background: var(--color-black); color: var(--color-white); }
.btn--primary:hover { background: var(--btn-primary-hover); }
.btn--gold      { background: var(--color-gold-300); color: var(--color-black); font-weight: 600; }
.btn--gold:hover { background: var(--color-gold-400); }
.btn--ghost     { background: transparent; color: var(--color-black); border: 1px solid var(--color-gray-200); }
.btn--ghost-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); }

/* ── UTILITIES ─────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-tertiary);
}
.eyebrow--gold    { color: var(--color-gold-300); }
.eyebrow--on-dark { color: var(--color-gray-300); }

.hairline-gold {
  display: block; width: 32px; height: 1px;
  background: var(--color-gold-300); flex-shrink: 0;
}
.section-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

/* ── SITE HEADER ───────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--color-black); height: var(--nav-height);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header__inner {
  max-width: 1200px; margin-inline: auto; height: 100%;
  padding-inline: 32px; display: flex; align-items: center; gap: 32px;
}
.site-header__brand {
  display: flex; align-items: flex-end; gap: 8px;
  text-decoration: none; flex-shrink: 0;
}
.site-header__brand-name {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: 0.18em; color: #fff;
}
.site-header__brand-sub {
  font-family: var(--font-display); font-size: 8px;
  letter-spacing: 0.32em; color: var(--color-gray-400); padding-bottom: 3px;
}
.site-header__divider { width: 1px; height: 24px; background: rgba(255,255,255,0.18); flex-shrink: 0; }
.site-header__nav { display: flex; gap: 28px; height: 100%; align-items: stretch; }
.site-header__nav-link {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--color-gray-400); text-decoration: none;
  display: flex; align-items: center;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-normal), border-color var(--duration-normal);
}
.site-header__nav-link:hover,
.site-header__nav-link.is-active { color: #fff; }
.site-header__nav-link.is-active { border-bottom-color: var(--color-gold-300); }
.site-header__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.site-header__toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 4px; color: var(--color-gray-400);
}

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  background: var(--color-black); color: #fff;
  padding: 120px 32px 96px; overflow: hidden;
}

/* Centered variant (homepage redesign) */
.hero--centered { padding: 128px 32px 112px; }
.hero__inner--centered {
  max-width: 860px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__kicker--centered {
  display: flex; align-items: center; gap: 16px; margin-bottom: 32px;
}
.hero__headline--centered {
  font-family: var(--font-display); font-size: 80px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.0; margin: 0; color: #fff;
}
.hero__lead--centered {
  max-width: 560px; margin-top: 28px; text-align: center;
}
.hero__actions--centered { justify-content: center; margin-top: 40px; }
.hero__meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero__meta-item { font-family: var(--font-mono); font-size: 12px; color: var(--color-gray-500); }
.hero__meta-dot  { font-family: var(--font-mono); font-size: 12px; color: var(--color-gray-700); }

/* Original split layout (kept for reference) */
.hero__inner {
  max-width: 1200px; margin-inline: auto;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 64px; align-items: center;
}
.hero__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.hero__headline {
  font-family: var(--font-display); font-size: 72px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.05; margin: 0; color: #fff;
}
.hero__headline-accent { color: var(--color-gold-300); }
.hero__lead {
  font-family: var(--font-sans); font-size: 18px; line-height: 1.7;
  color: var(--color-gray-300); max-width: 540px; margin-top: 32px;
}
.hero__actions { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.hero__photo {
  background: linear-gradient(180deg, #1A1A18 0%, #0E0E0E 100%);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
  aspect-ratio: 4/5; display: flex; align-items: center;
  justify-content: center; position: relative;
}
.hero__photo-label {
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: 0.32em; color: var(--color-gray-600);
  text-transform: uppercase; position: absolute; top: 16px; left: 16px;
}
.hero__photo-footer {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1);
}
.hero__photo-oab { font-family: var(--font-mono); font-size: 10px; color: var(--color-gray-400); margin-bottom: 4px; }
.hero__photo-name { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.18em; color: #fff; }

/* ── AREAS ─────────────────────────────────────────────────── */
.areas { padding: 96px 32px; background: var(--surface-primary); }
.areas__inner { max-width: 1200px; margin-inline: auto; }
.areas__headline {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1; margin: 0;
  color: var(--color-black); max-width: 720px;
}
.areas__lead {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--color-gray-600); margin-top: 16px; max-width: 640px;
}
.areas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.area-card {
  background: var(--surface-primary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 24px 24px 28px;
}
.area-card--featured {
  border-left: 3px solid var(--color-gold-300);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.area-card__kicker { margin-bottom: 8px; }
.area-card__title {
  font-family: var(--font-sans); font-size: 20px; font-weight: 600;
  color: var(--color-black); margin: 12px 0 10px; line-height: 1.3;
}
.area-card__body { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--color-gray-600); margin: 0; }
.area-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--color-black); text-decoration: none; margin-top: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.2); padding-bottom: 2px;
}

/* ── SOBRE ─────────────────────────────────────────────────── */
.sobre { padding: 96px 32px; background: var(--surface-secondary); }
.sobre__inner {
  max-width: 1200px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 80px; align-items: flex-start;
}
.sobre__photo {
  background: var(--color-gray-800); aspect-ratio: 4/5;
  border-radius: 4px; position: relative; border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.sobre__photo img { width: 100%; height: 100%; object-fit: cover; }
.sobre__photo-label {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: 0.32em; color: var(--color-gray-400); text-transform: uppercase;
}
.sobre__photo-footer {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15);
}
.sobre__photo-name { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.18em; color: #fff; line-height: 1.3; }
.sobre__photo-oab { font-family: var(--font-mono); font-size: 11px; color: var(--color-gold-300); margin-top: 6px; }
.sobre__headline {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1; margin: 0; color: var(--color-black);
}
.sobre__body { font-family: var(--font-sans); font-size: 17px; line-height: 1.7; color: var(--color-gray-600); margin-top: 24px; }
.sobre__body + .sobre__body { margin-top: 16px; }
.sobre__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 48px; padding: 32px 0;
  border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1);
}
.sobre__stat-number { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--color-black); line-height: 1; }
.sobre__stat-label {
  font-family: var(--font-sans); font-size: 12px; color: var(--color-gray-400);
  margin-top: 8px; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ── PROCESSO ──────────────────────────────────────────────── */
.processo { padding: 96px 32px; background: var(--surface-primary); }
.processo__inner { max-width: 1200px; margin-inline: auto; }
.processo__headline {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1; margin: 0;
  color: var(--color-black); max-width: 720px;
}
.processo__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; }
.etapa { padding: 16px 24px 24px 0; border-top: 1px solid var(--color-black); }
.etapa:not(:last-child) { margin-right: 24px; }
.etapa__num { font-family: var(--font-mono); font-size: 12px; color: var(--color-gold-300); margin-bottom: 16px; }
.etapa__title { font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: var(--color-black); margin: 0 0 10px; }
.etapa__body { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--color-gray-600); margin: 0; }

/* ── BLOG SECTION ──────────────────────────────────────────── */
.blog-section { padding: 96px 32px; background: var(--surface-secondary); }
.blog-section__inner { max-width: 1200px; margin-inline: auto; }
.blog-section__header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 56px;
}
.blog-section__headline {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1; margin: 0;
  color: var(--color-black); max-width: 720px;
}
.blog-section__lead {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--color-gray-600); margin-top: 16px; max-width: 580px;
}
.blog-section__all-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--color-black); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid rgba(0,0,0,0.2); padding-bottom: 2px;
}
.blog-section__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; }

.post-featured {
  background: var(--color-black); color: #fff;
  border-radius: var(--radius-lg); padding: 40px 40px 36px;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 420px;
  text-decoration: none;
}
.post-featured__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.post-featured__cat {
  font-family: var(--font-display); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-300);
}
.post-featured__dot { width: 4px; height: 4px; border-radius: 99px; background: var(--color-gray-600); }
.post-featured__date,
.post-featured__read { font-family: var(--font-mono); font-size: 11px; color: var(--color-gray-400); }
.post-featured__title {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 16px; color: #fff;
}
.post-featured__excerpt { font-family: var(--font-sans); font-size: 15px; line-height: 1.7; color: var(--color-gray-300); margin: 0; }
.post-featured__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: #fff; text-decoration: none; margin-top: 32px; align-self: flex-start;
  border-bottom: 1px solid var(--color-gold-300); padding-bottom: 4px;
}

.post-list { display: flex; flex-direction: column; }
.post-list-item {
  display: block; text-decoration: none; color: inherit;
  padding: 24px 0; border-bottom: 1px solid var(--border-subtle);
}
.post-list-item:first-child { border-top: 1px solid var(--border-default); }
.post-list-item__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.post-list-item__cat {
  font-family: var(--font-display); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-500);
}
.post-list-item__dot { width: 3px; height: 3px; border-radius: 99px; background: var(--color-gray-400); }
.post-list-item__date,
.post-list-item__read { font-family: var(--font-mono); font-size: 11px; color: var(--color-gray-400); }
.post-list-item__title {
  font-family: var(--font-sans); font-size: 18px; font-weight: 600;
  color: var(--color-black); margin: 0 0 8px; line-height: 1.35;
}
.post-list-item__excerpt { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--color-gray-600); margin: 0; }

/* ── CONTACT ───────────────────────────────────────────────── */
.contact { padding: 96px 32px; background: var(--color-black); color: #fff; }
.contact__inner {
  max-width: 1200px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: flex-start;
}
.contact__headline {
  font-family: var(--font-display); font-size: 48px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.05; margin: 0; color: #fff;
}
.contact__lead {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--color-gray-300); margin-top: 24px; max-width: 460px;
}
.contact__info { margin-top: 40px; display: grid; gap: 16px; }
.contact__info-row { display: flex; gap: 16px; }
.contact__info-label {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-gray-400); min-width: 80px; padding-top: 1px;
}
.contact__info-value { font-family: var(--font-mono); font-size: 14px; color: #fff; }
.contact__info-value--sans { font-family: var(--font-sans); font-size: 14px; color: #fff; line-height: 1.6; }
.contact__info-sub { color: var(--color-gray-400); font-size: 12px; font-family: var(--font-sans); display: block; }

.contact-whatsapp { display: flex; align-items: center; justify-content: center; }
.contact-whatsapp__card {
  background: #1A1A18; padding: 40px 32px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 16px; width: 100%;
}
.contact-whatsapp__icon { width: 64px; height: 64px; flex-shrink: 0; }
.contact-whatsapp__title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: #fff; letter-spacing: -0.01em;
}
.contact-whatsapp__body {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.7;
  color: var(--color-gray-300); margin: 0; max-width: 320px;
}
.contact-whatsapp__btn { width: 100%; justify-content: center; max-width: 320px; margin-top: 8px; }
.contact-whatsapp__lgpd {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--color-gray-500); line-height: 1.6; max-width: 320px;
}

/* ── SITE FOOTER ───────────────────────────────────────────── */
.site-footer { background: #000; color: var(--color-gray-400); padding: 64px 32px 32px; }
.site-footer__inner { max-width: 1200px; margin-inline: auto; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 64px; }
.site-footer__brand { display: flex; align-items: flex-end; gap: 8px; }
.site-footer__brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.18em; color: #fff; }
.site-footer__brand-sub { font-family: var(--font-display); font-size: 9px; letter-spacing: 0.32em; color: var(--color-gray-400); padding-bottom: 4px; }
.site-footer__hairline { height: 1px; background: var(--color-gold-300); width: 32px; margin-top: 20px; }
.site-footer__tagline { font-family: var(--font-sans); font-size: 13px; color: var(--color-gray-400); margin-top: 20px; line-height: 1.7; max-width: 320px; }
.site-footer__col-title {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #fff; margin-bottom: 20px;
}
.site-footer__col-list { display: grid; gap: 10px; }
.site-footer__col-item { font-family: var(--font-sans); font-size: 13px; color: var(--color-gray-400); }
.site-footer__col-item a { text-decoration: none; color: inherit; transition: color var(--duration-normal); }
.site-footer__col-item a:hover { color: #fff; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08); margin-top: 56px; padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.site-footer__oab { font-family: var(--font-mono); font-size: 11px; color: var(--color-gray-600); }
.site-footer__disclaimer { font-family: var(--font-sans); font-size: 11px; color: var(--color-gray-600); max-width: 540px; text-align: right; }

/* ── BLOG SINGLE ───────────────────────────────────────────── */
.post-single { max-width: 720px; margin-inline: auto; padding: 64px 32px 120px; }
.post-single__cat {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-500);
}
.post-single__title {
  font-family: var(--font-display); font-size: 48px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1; margin: 16px 0 0; color: var(--color-black);
}
.post-single__meta {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 20px; padding-bottom: 32px; border-bottom: 1px solid var(--border-default);
}
.post-single__meta-item { font-family: var(--font-mono); font-size: 12px; color: var(--color-gray-400); }
.post-single__content { font-family: var(--font-sans); font-size: 17px; line-height: 1.8; color: var(--color-gray-700); margin-top: 40px; }
.post-single__content h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--color-black); margin-top: 48px; letter-spacing: -0.01em; }
.post-single__content h3 { font-family: var(--font-sans); font-size: 20px; font-weight: 600; color: var(--color-black); margin-top: 36px; }
.post-single__content p { margin-top: 0; margin-bottom: 24px; }
.post-single__content a { color: var(--color-gold-500); }
.post-single__content strong { color: var(--color-black); font-weight: 600; }
.post-single__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--color-gray-500); text-decoration: none; margin-bottom: 40px;
}
.post-single__back:hover { color: var(--color-black); }

/* ── ARCHIVE ───────────────────────────────────────────────── */
.archive { padding: 64px 32px 120px; }
.archive__inner { max-width: 1200px; margin-inline: auto; }
.archive__headline {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 48px; color: var(--color-black);
}
.archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.archive-card {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 24px; text-decoration: none; color: inherit; display: block;
  transition: box-shadow var(--duration-normal);
}
.archive-card:hover { box-shadow: var(--shadow-md); }
.archive-card__cat {
  font-family: var(--font-display); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-500);
}
.archive-card__title { font-family: var(--font-sans); font-size: 20px; font-weight: 600; color: var(--color-black); margin: 12px 0 10px; line-height: 1.3; }
.archive-card__excerpt { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--color-gray-600); margin: 0; }
.archive-card__meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-gray-400); margin-top: 16px; }

/* ── AREA CARD hover ───────────────────────────────────────── */
.area-card {
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow   var(--duration-normal) var(--ease-default);
}
.area-card:hover {
  border-color: rgba(212, 169, 66, 0.4);
  box-shadow: var(--shadow-sm);
}
.area-card--featured:hover { border-left-color: var(--color-gold-300); }

/* ── ETAPA number size ─────────────────────────────────────── */
.etapa__num { font-size: 20px; }

/* ── DEPOIMENTOS ───────────────────────────────────────────── */
.depoimentos { padding: 96px 32px; background: var(--surface-secondary); }
.depoimentos__inner { max-width: 1200px; margin-inline: auto; }
.depoimentos__headline {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1; margin: 0; color: var(--color-black);
}
.depoimentos__lead {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-tertiary);
  margin-top: 8px;
}
.depoimentos__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-top: 48px;
}
.depoimento-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.depoimento-card__stars { display: flex; gap: 3px; justify-content: center; }
.depoimento-card__texto {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.7;
  color: var(--fg-secondary); margin: 0; flex: 1; text-align: center;
}
.depoimento-card__texto p { margin: 0; }
.depoimento-card__footer {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.depoimento-card__nome {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--fg-primary);
}
.depoimento-card__fonte {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
  letter-spacing: 0.04em;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__inner           { grid-template-columns: 1fr; }
  .hero__photo           { display: none; }
  .sobre__inner          { grid-template-columns: 1fr; }
  .sobre__photo          { display: none; }
  .processo__grid        { grid-template-columns: repeat(2, 1fr); }
  .blog-section__grid    { grid-template-columns: 1fr; }
  .contact__inner        { grid-template-columns: 1fr; }
  .site-footer__grid     { grid-template-columns: 1fr 1fr; gap: 40px; }
  .archive__grid         { grid-template-columns: repeat(2, 1fr); }
  .depoimentos__grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero              { padding: 72px 20px 64px; }
  .hero--centered    { padding: 80px 20px 72px; }
  .hero__headline    { font-size: 48px; }
  .hero__headline--centered { font-size: 44px; }
  .depoimentos       { padding: 64px 20px; }
  .depoimentos__grid { grid-template-columns: 1fr; }
  .areas             { padding: 64px 20px; }
  .areas__grid       { grid-template-columns: 1fr; }
  .sobre             { padding: 64px 20px; }
  .processo          { padding: 64px 20px; }
  .processo__grid    { grid-template-columns: 1fr; }
  .blog-section      { padding: 64px 20px; }
  .contact           { padding: 64px 20px; }
  .site-footer       { padding: 48px 20px 24px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__disclaimer { text-align: left; }
  .site-header__nav  { display: none; }
  .site-header__toggle { display: block; }
  .site-header__actions .btn--ghost-dark { display: none; }
  .archive__grid     { grid-template-columns: 1fr; }
  .post-single       { padding: 40px 20px 80px; }
  .post-single__title{ font-size: 32px; }
  .post-featured     { padding: 28px 24px; }
  .post-featured__title { font-size: 24px; }
}

@media (max-width: 768px) {
  .site-header.nav-open .site-header__nav {
    display: flex; flex-direction: column;
    position: absolute; top: var(--nav-height); left: 0; right: 0;
    background: var(--color-black); padding: 16px 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08); gap: 0;
  }
  .site-header.nav-open .site-header__nav-link {
    height: 44px; border-bottom: 1px solid rgba(255,255,255,0.06);
  }
}