/* ==========================================================================
   Bradford Advogados — Design Tokens
   Fonte: Manual de marca v1.0 (Figma "Manual - Bradford", outubro 2026)
   Regra do cliente: a ÚNICA fonte é Avenir. Nunca usar outra família.
   ========================================================================== */

/* ---------- Fonte: Avenir ----------
   Avenir é fonte licenciada (Linotype). Enquanto os arquivos web não chegam,
   o @font-face usa a cópia local (macOS/iOS). Em Windows/Android cai no
   fallback — PENDENTE: pedir ao cliente os .woff2 licenciados e preencher os
   src abaixo com url('fonts/Avenir-Heavy.woff2') etc. */
@font-face { font-family: "Avenir"; font-weight: 900; font-style: normal; font-display: swap;
  src: local("Avenir-Heavy"), local("Avenir Heavy"); }
@font-face { font-family: "Avenir"; font-weight: 500; font-style: normal; font-display: swap;
  src: local("Avenir-Medium"), local("Avenir Medium"); }
@font-face { font-family: "Avenir"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Avenir-Roman"), local("Avenir Roman"); }
@font-face { font-family: "Avenir"; font-weight: 300; font-style: normal; font-display: swap;
  src: local("Avenir-Book"), local("Avenir Book"); }

:root {
  /* ---------- Cor: paleta original ---------- */
  --brd-petroleo-profundo: #004b53; /* RGB 0 75 83   — títulos, fundos escuros */
  --brd-petroleo:          #537d80; /* RGB 83 125 128 — numeração, rótulos */
  --brd-azul-destaque:     #5bc9ce; /* RGB 91 201 206 — destaques sobre fundo escuro */
  --brd-verde-cta:         #659da0; /* RGB 101 157 160 — botão */
  --brd-off-white:         #f4f1ec; /* RGB 244 241 236 — fundo de página */
  --brd-branco:            #ffffff;

  /* ---------- Cor: paleta suave ---------- */
  --brd-salvia:            #8ea8ab;
  --brd-painel:            #678889;
  --brd-salvia-escuro:     #587274;
  --brd-destaque-claro:    #b5d6d8;
  --brd-texto-escuro:      #263f41; /* texto corrido sobre fundo claro */

  /* Apoio (extraídos dos componentes do manual) */
  --brd-fundo-capa:        #00383e; /* topo do degradê da capa */
  --brd-borda-clara:       #e1e4e4;
  --brd-divisor:           #d6d4cc;

  /* ---------- Degradês ---------- */
  --brd-grad-fundo:   linear-gradient(90deg, #537d80, #004b53);   /* principal */
  --brd-grad-fundo-v: linear-gradient(180deg, #537d80, #004b53);  /* cards/molduras */
  --brd-grad-capa:    linear-gradient(180deg, #00383e, #004b53);  /* hero escuro */
  --brd-grad-suave:   linear-gradient(90deg, #708f91, #587274);
  --brd-grad-botao:   linear-gradient(90deg, #6b969a, #95c0c4);   /* paleta suave */

  /* ---------- Papéis semânticos (usar estes no código da LP) ---------- */
  --color-bg:            var(--brd-off-white);
  --color-bg-dark:       var(--brd-petroleo-profundo);
  --color-surface:       var(--brd-branco);
  --color-heading:       var(--brd-petroleo-profundo);
  --color-eyebrow:       var(--brd-petroleo);
  --color-text:          rgba(38, 63, 65, 0.85);   /* texto de apoio, fundo claro */
  --color-text-muted:    rgba(38, 63, 65, 0.75);
  --color-on-dark:       var(--brd-branco);
  --color-on-dark-text:  rgba(255, 255, 255, 0.88);
  --color-accent-on-dark: var(--brd-azul-destaque);
  --color-cta:           var(--brd-verde-cta);
  --color-border:        var(--brd-borda-clara);

  /* ---------- Tipografia ---------- */
  --font-brand: "Avenir", "Avenir Next", "Avenir Next LT Pro", sans-serif;

  --fw-heavy:  900; /* Avenir Heavy  — títulos e destaques */
  --fw-medium: 500; /* Avenir Medium — legendas, botões, caixa alta */
  --fw-roman:  400; /* Avenir Roman  — texto de apoio e corrido */
  --fw-book:   300; /* Avenir Book   — 1ª parte de títulos em contraste */

  /* Letter-spacing em em (manual: títulos −3%, apoio −1%, caixa alta +4%) */
  --ls-title:  -0.03em;
  --ls-body:   -0.01em;
  --ls-caps:    0.04em;
  --ls-number:  0.08em;

  --lh-title: 1;
  --lh-tight: 1.1;
  --lh-body:  1.4;   /* manual: entrelinha 120–135% p/ apoio; 140% p/ descrições */

  /* Escala (desktop → mobile via clamp). Manual: título 54–84px, apoio 32–36px,
     caixa alta 24–27px — medidas de peça 1920×1080; na web escalamos. */
  --fs-display: clamp(2.5rem, 1.2rem + 5.2vw, 5.25rem);  /* hero 40→84 */
  --fs-h1:      clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);  /* título de seção 36→72 */
  --fs-h2:      clamp(1.75rem, 1.2rem + 2vw, 2.875rem);  /* subtítulo 28→46 */
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); /* título de card 20→28 */
  --fs-lead:    clamp(1.125rem, 1rem + 0.5vw, 1.625rem); /* texto de apoio 18→26 */
  --fs-body:    1.125rem; /* 18 */
  --fs-small:   0.9375rem; /* 15 */
  --fs-caps:    clamp(0.8125rem, 0.75rem + 0.3vw, 1.125rem);
  --fs-button:  1.25rem;  /* 20,1 no manual */

  /* ---------- Raios ---------- */
  --radius-card:   28px;   /* cards/molduras do manual */
  --radius-frame:  48px;   /* moldura grande / painel de vidro */
  --radius-swatch: 20px;
  --radius-pill:   999px;  /* botão */

  /* ---------- Sombras ---------- */
  --shadow-card: 0 8px 24px rgba(0, 38, 43, 0.08);

  /* ---------- Espaço (base 8) ---------- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 120px;
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 120px);

  /* ---------- Elementos gráficos ---------- */
  --frame-border: 3px solid rgba(255, 255, 255, 0.9);
  --glass-fill: rgba(83, 125, 128, 0.16);   /* "preenchimento verde a 16%" */
  --glass-blur: 24px;
  --logo-min-width: 170px;                  /* tamanho mínimo do logo */
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-brand);
  font-weight: var(--fw-roman);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}
/* Garantia da regra "só Avenir": tudo herda a família da marca */
button, input, textarea, select { font-family: inherit; }

/* ==========================================================================
   Tipografia
   ========================================================================== */
.t-display, .t-h1, .t-h2, .t-h3 {
  margin: 0; font-weight: var(--fw-heavy); color: var(--color-heading);
  letter-spacing: var(--ls-title);
}
.t-display { font-size: var(--fs-display); line-height: .95; }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-title); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
.t-lead { font-size: var(--fs-lead); line-height: 1.35; font-weight: var(--fw-roman); }
.t-eyebrow { /* caixa alta em Medium */
  font-size: var(--fs-caps); font-weight: var(--fw-medium); line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-eyebrow);
}
.t-number { /* "01", "02"… */
  font-size: 1.625rem; font-weight: var(--fw-heavy); letter-spacing: var(--ls-number);
  color: var(--color-eyebrow);
}
.t-contrast-light { font-weight: var(--fw-book); } /* 1ª parte do título em contraste */

/* Variante sobre fundo escuro */
.on-dark { color: var(--color-on-dark-text); }
.on-dark .t-display, .on-dark .t-h1, .on-dark .t-h2, .on-dark .t-h3 { color: var(--color-on-dark); }
.on-dark .t-eyebrow { color: var(--color-accent-on-dark); }

/* ==========================================================================
   Superfícies
   ========================================================================== */
.bg-dark   { background: var(--brd-grad-capa); color: var(--color-on-dark-text); }
.bg-grad   { background: var(--brd-grad-fundo-v); color: var(--color-on-dark-text); }
.bg-petroleo { background: var(--brd-petroleo-profundo); color: var(--color-on-dark-text); }
.bg-salvia { background: var(--brd-salvia); }
.card {
  background: var(--color-surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: var(--space-6);
}

/* ==========================================================================
   Botão (CTA) — pílula verde #659DA0, texto Avenir Heavy branco + seta
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 17px 26px; border: 0; border-radius: var(--radius-pill);
  background: var(--color-cta); color: var(--brd-branco);
  font-family: var(--font-brand); font-weight: var(--fw-heavy);
  font-size: var(--fs-button); line-height: var(--lh-tight); letter-spacing: -0.03em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn::after {
  content: ""; width: 20px; height: 20px; flex: none;
  background: url("assets/seta.svg") center / contain no-repeat;
  transition: transform .2s ease;
}
.btn:hover { background: var(--brd-petroleo); box-shadow: var(--shadow-card); }
.btn:hover::after { transform: translateX(3px); }
.btn:focus-visible { outline: 3px solid var(--brd-azul-destaque); outline-offset: 3px; }
.btn--caps { text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--fw-medium); }

/* ==========================================================================
   Elementos gráficos do manual
   ========================================================================== */
/* Moldura: retângulo com borda branca arredondada (base de seções com foto) */
.frame {
  border: var(--frame-border); border-radius: var(--radius-frame);
}
/* Painel de vidro: efeito vidro, preenchimento verde 16%, raio 48 */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-frame);
}
/* Manchas decorativas atrás do vidro (azul destaque + sálvia/destaque claro) */
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.blob--azul  { background: var(--brd-azul-destaque); }
.blob--claro { background: var(--brd-destaque-claro); }

/* ==========================================================================
   Logo — só existe em branco; em fundo claro usar versão verde-petróleo
   ========================================================================== */
.logo { display: block; width: 240px; min-width: var(--logo-min-width); aspect-ratio: 2849 / 767; }
.logo--branco { background: url("assets/logo-bradford-branco.png") center / contain no-repeat; }
.logo--cor {
  background: var(--brd-petroleo-profundo);
  -webkit-mask: url("assets/logo-bradford-branco.png") center / contain no-repeat;
          mask: url("assets/logo-bradford-branco.png") center / contain no-repeat;
}
/* Área de proteção: espaço livre igual à altura das letras de BRADFORD */
.logo-safe { padding: 0.55em; }

/* Sombra/foco utilitários */
@media (prefers-reduced-motion: reduce) { .btn, .btn::after { transition: none; } }