/* ============================================================
   Rapp Advogados — tokens de marca (design system do site da marca, tokens/colors.css)
   Paleta fechada de nove cores e duas fontes hospedadas no próprio site (CSP font-src 'self').
   ============================================================ */

/* Fontes variáveis (OFL) em WOFF2, só latim pt-BR (82 KB no total); acentos da Cormorant reposicionados e algarismos alinhados (26/10/2026). */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Paleta base --- */
  --rapp-navy-900: #1d3350;
  --rapp-navy-700: #254061;
  --rapp-orange-500: #f26824;
  --rapp-orange-400: #f79646;
  --rapp-peach-300: #fabaa1;
  --rapp-cream-50: #fbf9f5;
  --rapp-white: #ffffff;
  --rapp-taupe-600: #8a6f5e;
  --rapp-slate-600: #4a5568;

  /* --- Neutros do quadro aprovado (sand); o erro de campo é navy-900 com filete laranja (quadro) --- */
  --rapp-sand-100: #efeae0;
  --rapp-sand-300: #d9d2c6;

  /* --- Superfícies --- */
  --surface-page: var(--rapp-cream-50);
  --surface-card: var(--rapp-white);
  --surface-dark: var(--rapp-navy-900);
  --surface-dark-card: var(--rapp-navy-700);

  /* --- Texto --- */
  --text-heading: var(--rapp-navy-900);
  --text-body: var(--rapp-slate-600);
  --text-eyebrow: var(--rapp-slate-600);
  --text-on-dark: var(--rapp-cream-50);
  --text-on-dark-muted: rgba(251, 249, 245, 0.78);

  /* --- Acento e bordas --- */
  --accent: var(--rapp-orange-500);
  --border-light: var(--rapp-sand-300);
  --border-field: rgba(37, 64, 97, 0.6); /* 3,4:1: WCAG 1.4.11 (decisão D-2 do quadro) */
  --border-on-dark-strong: rgba(251, 249, 245, 0.3);

  /* --- Tipografia --- */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --text-hero: clamp(40px, 5.6vw, 76px);
  --text-h2: clamp(30px, 3.2vw, 44px);

  /* --- Layout --- */
  --section-pad-y: 72px;
  --section-pad-x: 64px;
  --content-max: 1360px;
  --header-h: 88px;
  --header-h-rolado: 72px;

  /* --- Logo (vetor 1055 x 380): 48 px de altura no cabeçalho, 40 px ao rolar, 36 px no celular --- */
  --logo-h: 48px;
  --logo-h-rolado: 40px;
  --logo-h-celular: 36px;
  --logo-rodape-h: 56px;

  /* --- Forma --- */
  --radius-sharp: 2px;
  --radius-pill: 99px;
  --shadow-modal: 0 24px 80px rgba(29, 51, 80, 0.35);

  /* --- Movimento --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 0.8s;
  --dur-hover: 0.3s;
}

@media (max-width: 720px) {
  :root {
    --section-pad-x: 24px;
    --section-pad-y: 48px;
    --header-h: 68px;
    --header-h-rolado: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-reveal: 0.01s;
    --dur-hover: 0.01s;
  }
}

/* Altura única dos topos com vídeo (R-22: a mesma em todas as páginas com vídeo), por faixa de largura: a do maior
   conteúdo entre essas páginas, medido em 26/10/2026 (1440: 587 · 1080: 555 · 390: 475 · 320: 549), com folga. */
:root { --hero-altura: 600px; }
@media (max-width: 1080px) { :root { --hero-altura: 568px; } }
@media (max-width: 720px) { :root { --hero-altura: 492px; } }
@media (max-width: 389px) { :root { --hero-altura: 564px; } }

/* Cabeçalho do quadro ADV-A: logo à esquerda; menu e botão "Contato" juntos à direita. No celular, só o logo e o
   menu (o WhatsApp é o botão flutuante). Rótulos do formulário em caixa alta com "(obrigatório)" (ADV-E). */
.cabecalho-interno { grid-template-columns: auto 1fr auto; }
.menu { justify-self: end; }
@media (max-width: 960px) {
  .cabecalho-interno { grid-template-columns: 1fr auto; }
  .cta-celular { display: none !important; }
}
.campo label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.campo label .obrig { font-weight: 600; }
/* Janela "Contato" (ADV-E): os três campos lado a lado no desktop. */
/* Varredura B6 (27/10/2026): o telefone tem o rótulo mais longo; com a coluna dele mais larga, os três rótulos cabem numa
   linha e os campos ficam na mesma altura. Abaixo de 960 px os campos empilham (antes o rótulo quebrava em tablet). */
.modal:has(.form-linha) { width: min(880px, calc(100vw - 32px)); }
.campos-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 0 12px; }
@media (max-width: 960px) { .campos-linha { grid-template-columns: 1fr; } }

/* Véu do topo com vídeo: 75% (pedido do Gabriel, 27/10/2026; cream sobre branco por baixo ainda dá ~5,5:1). */
:root { --veu-hero: 0.75; }