/* ═══════════════════════════════════════════════════════════════════
   gid-site.css — SISTEMA VISUAL ÚNICO do site público do GID.
   Usado pela landing (views/site/index.ejs), pelas páginas de conteúdo
   (/plataforma, /solucoes, /seguranca-do-trabalho, /ferramentas), pelas
   páginas legais e pelo 404/500. Fonte única de: tokens (cor, espaço B2,
   raio, curva), estilos de texto nomeados (B1), base, botões, nav flutuante,
   menu móvel, busca, rodapé e revelação ao rolar. CSS específico de uma
   página fica na própria página; valor visual novo entra AQUI como token.
   Skill: landing-page-design (elayadesign). Extraído da landing v4 em 31/10/2026.
═══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   TOKENS (definidos UMA vez; nada abaixo usa valor avulso)
   Cor: papel de prancha, tinta, azul GID, amarelo de obra.
   Espaço: tabela B2. Raio: escala Tailwind. Movimento: curva única.
══════════════════════════════════════════════════════════════ */
/* Tokens: /css/gid-tokens.css (fonte única, carregada antes deste arquivo). */

/* ══════════ Estilos de texto nomeados (B1). Escala Tailwind. ══════════ */
.heading-1 { font-size: 60px; line-height: 60px; font-weight: 600; letter-spacing: -.02em; }
.heading-2 { font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -.02em; }
.heading-3 { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -.015em; }
.heading-4 { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; }
.heading-5 { font-size: 24px; line-height: 32px; font-weight: 600; }
.heading-6 { font-size: 20px; line-height: 28px; font-weight: 600; }
.title-1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.title-2 { font-size: 18px; line-height: 28px; font-weight: 500; }
.title-3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-4 { font-size: 14px; line-height: 20px; font-weight: 500; }
.title-5 { font-size: 12px; line-height: 16px; font-weight: 500; }
.body-1 { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-2 { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-3 { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-4 { font-size: 14px; line-height: 20px; font-weight: 600; }
.body-5 { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-6 { font-size: 14px; line-height: 20px; font-weight: 400; }
/* Body 7: texto de abertura (text-lg), próximo número do grupo, como manda a B1. */
.body-7 { font-size: 18px; line-height: 28px; font-weight: 400; }
.button-lg { font-size: 18px; line-height: 28px; font-weight: 600; }
.button-md { font-size: 16px; line-height: 24px; font-weight: 600; }
.button-sm { font-size: 14px; line-height: 20px; font-weight: 600; }
.button-xsm { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-1 { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption-2 { font-size: 14px; line-height: 20px; font-weight: 400; }
.caption-3 { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-4 { font-size: 12px; line-height: 16px; font-weight: 500; }
.caption-5 { font-size: 12px; line-height: 16px; font-weight: 400; }
/* Geist Mono só para dado e código (S-2240, NR-35, contagem). */
.dado { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rot { text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
h1, h2, h3, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* ══════════ Base ══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--e-900); }
body {
  font-family: var(--fonte); font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--tinta); background: var(--papel); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-style: normal;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
em, i, cite, address { font-style: normal; }
/* "bolder" do navegador vira 900 dentro de texto 600: peso fixo, teto bold (B1). */
b, strong { font-weight: 600; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 3px solid var(--gid); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--obra); color: var(--tinta); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--e-400); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--e-100); top: calc(-1 * var(--e-700)); z-index: 100; background: var(--tinta); color: var(--papel); padding: var(--e-75) var(--e-100); border-radius: var(--r-lg); }
.skip:focus { top: var(--e-100); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: 28px; height: 28px; }
.ico-xl { width: 40px; height: 40px; }
.ico .ch { fill: currentColor; stroke: none; }

/* Fita zebrada (acento de obra): padrão SVG, nunca gradiente. */
.fita { height: var(--e-100); background-color: var(--obra); background-image: var(--zebra); background-size: 28px 28px; }
.fita-peq { display: inline-block; width: var(--e-500); height: var(--e-75); border-radius: var(--r-sm); background-color: var(--obra); background-image: var(--zebra); background-size: 14px 14px; }

/* ══════════ Botões (B2: 8px x 12px; estados completos B9) ══════════ */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-75);
  padding: var(--e-75) var(--e-100); border-radius: var(--r-lg); border: 2px solid var(--tinta);
  white-space: nowrap; position: relative;
  transition: transform var(--t-layout) var(--curva), box-shadow var(--t-layout) var(--curva), background-color var(--t-cor) var(--curva), color var(--t-cor) var(--curva);
}
.bt .ico { transition: transform var(--t-layout) var(--curva); }
.bt:hover .ico-seta { transform: translateX(var(--e-50)); }
.bt:active { transform: translateY(1px) scale(.98); }
.bt-tinta { background: var(--tinta); color: var(--papel); box-shadow: var(--sombra-obra); }
.bt-tinta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--obra); }
.bt-obra { background: var(--obra); color: var(--tinta); box-shadow: var(--sombra-tinta); }
.bt-obra:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.bt-linha { background: transparent; color: var(--tinta); }
.bt-linha:hover { background: var(--tinta); color: var(--papel); }
.bt-grande { padding: var(--e-100) var(--e-300); }
.bt[disabled] { opacity: .6; cursor: progress; }
.link-seta { display: inline-flex; align-items: center; gap: var(--e-75); color: var(--gid-tx); }
.link-seta .ico { transition: transform var(--t-layout) var(--curva); }
.link-seta:hover .ico { transform: translateX(var(--e-50)); }
.link-seta:hover span { text-decoration: underline; text-underline-offset: 4px; }
.chip { display: inline-flex; align-items: center; gap: var(--e-50); padding: var(--e-25) var(--e-75); border-radius: var(--r-full); border: 1px solid var(--linha-2); color: var(--tinta-2); background: var(--branco); }
.chip-obra { background: var(--obra); border-color: var(--tinta); color: var(--tinta); }
kbd { font-family: var(--mono); padding: 0 var(--e-50); border: 1px solid var(--linha-2); border-radius: var(--r); background: var(--branco); color: var(--tinta-3); }

/* ══════════ Cabeçalho de seção ══════════ */
.sec { padding: var(--e-900) 0; position: relative; }
.sec-cab { max-width: 760px; margin-bottom: var(--e-700); }
.sec-cab .rot { display: inline-flex; align-items: center; gap: var(--e-75); margin-bottom: var(--e-200); }
.sec-cab h2 { margin-bottom: var(--e-200); }
.sec-cab p { color: var(--tinta-2); }
.sec-cab.centro { margin-left: auto; margin-right: auto; text-align: center; }

/* ══════════ NAV flutuante (B7) ══════════ */
.nav-casca { position: fixed; top: var(--e-200); left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 0 var(--e-200); pointer-events: none; }
.nav {
  pointer-events: auto; display: flex; align-items: center; gap: var(--e-200);
  padding: var(--e-75) var(--e-75) var(--e-75) var(--e-200); border-radius: var(--r-full);
  background: rgba(251, 250, 247, .72); border: 1px solid var(--linha);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 8px 32px rgba(14, 26, 38, .08);
  transition: box-shadow var(--t-cor) var(--curva), background-color var(--t-cor) var(--curva);
}
.nav.rolou { background: rgba(251, 250, 247, .9); box-shadow: 0 12px 40px rgba(14, 26, 38, .14); }
.logo { display: flex; align-items: center; gap: var(--e-75); }
.logo img { width: 28px; height: 28px; }
.nav-links { display: flex; align-items: center; gap: var(--e-25); }
.nav-links a { padding: var(--e-75) var(--e-100); border-radius: var(--r-full); color: var(--tinta-2); transition: background-color var(--t-cor) var(--curva), color var(--t-cor) var(--curva); }
.nav-links a:hover { background: rgba(14, 26, 38, .06); color: var(--tinta); }
.nav-links a[aria-current="true"] { background: var(--tinta); color: var(--papel); }
.nav-acoes { display: flex; align-items: center; gap: var(--e-75); }
.nav-busca { display: inline-flex; align-items: center; gap: var(--e-75); padding: var(--e-75) var(--e-100); border-radius: var(--r-full); border: 1px solid var(--linha-2); color: var(--tinta-3); background: var(--branco); transition: border-color var(--t-cor) var(--curva), color var(--t-cor) var(--curva); }
.nav-busca:hover { border-color: var(--tinta); color: var(--tinta); }
.nav-busca .ico { width: 16px; height: 16px; }
.nav-entrar { padding: var(--e-75) var(--e-100); border-radius: var(--r-full); transition: background-color var(--t-cor) var(--curva); }
.nav-entrar:hover { background: rgba(14, 26, 38, .06); }
.nav .bt { border-radius: var(--r-full); }
/* Ícone do menu: duas linhas que viram X (transform na curva base). */
.alterna { display: none; width: var(--e-500); height: var(--e-500); border-radius: var(--r-full); background: var(--tinta); position: relative; }
.alterna span { position: absolute; left: var(--e-100); right: var(--e-100); height: 2px; background: var(--papel); border-radius: var(--r-sm); transition: transform var(--t-layout) var(--curva); }
.alterna span:nth-child(1) { top: 15px; } .alterna span:nth-child(2) { top: 23px; }
.alterna[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.alterna[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
/* Menu móvel: painel de altura cheia, links em cascata (60 ms, total <= 400 ms). */
.menu-m {
  position: fixed; inset: 0; z-index: 55; padding: 112px var(--e-300) var(--e-400);
  background: rgba(243, 241, 236, .94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  display: flex; flex-direction: column; gap: var(--e-300); overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity var(--t-cor) var(--curva), visibility 0s linear var(--t-cor);
}
.menu-m.aberto { opacity: 1; visibility: visible; transition: opacity var(--t-cor) var(--curva); }
.menu-m ul { display: grid; gap: var(--e-50); }
.menu-m li { opacity: 0; transform: translateY(var(--e-300)); transition: opacity var(--t-layout) var(--curva), transform var(--t-layout) var(--curva); transition-delay: var(--d, 0ms); }
.menu-m.aberto li { opacity: 1; transform: none; }
.menu-m a.item { display: flex; align-items: center; justify-content: space-between; padding: var(--e-100) 0; border-bottom: 1px solid var(--linha); }

/* ══════════ Busca (atalho "/" ou Ctrl+K) ══════════ */
.busca { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: var(--e-900) var(--e-200) var(--e-200); }
.busca[hidden] { display: none; }
.busca-fundo { position: absolute; inset: 0; background: rgba(14, 26, 38, .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t-cor) var(--curva); }
.busca-caixa {
  position: relative; width: 100%; max-width: 680px; max-height: calc(100vh - 160px); display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--linha-2); border-radius: var(--r-2xl); box-shadow: 0 32px 80px rgba(14, 26, 38, .24);
  opacity: 0; transform: translateY(var(--e-200)) scale(.98); transition: opacity var(--t-cor) var(--curva), transform var(--t-layout) var(--curva);
}
.busca.aberta .busca-fundo { opacity: 1; }
.busca.aberta .busca-caixa { opacity: 1; transform: none; }
.busca-campo { display: flex; align-items: center; gap: var(--e-100); padding: var(--e-200); border-bottom: 1px solid var(--linha); }
.busca-campo input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; }
.busca-campo input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.busca-lista { overflow-y: auto; padding: var(--e-75); }
.busca-grupo { padding: var(--e-100) var(--e-100) var(--e-50); }
.busca-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-100); align-items: center; padding: var(--e-75) var(--e-100); border-radius: var(--r-lg); transition: background-color var(--t-cor) var(--curva); }
.busca-item[aria-selected="true"], .busca-item:hover { background: var(--papel-2); }
.busca-item .ico { color: var(--gid-tx); }
.busca-item small { display: block; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-item > span:nth-child(2) { min-width: 0; }
.busca-vazio { padding: var(--e-300); display: grid; gap: var(--e-200); justify-items: start; color: var(--tinta-2); }
.busca-vazio .sugs { display: flex; flex-wrap: wrap; gap: var(--e-75); }
.busca-vazio .sugs button { padding: var(--e-50) var(--e-100); border: 1px solid var(--linha-2); border-radius: var(--r-full); background: var(--papel); transition: border-color var(--t-cor) var(--curva); }
.busca-vazio .sugs button:hover { border-color: var(--tinta); }
.busca-rodape { display: flex; gap: var(--e-200); flex-wrap: wrap; padding: var(--e-100) var(--e-200); border-top: 1px solid var(--linha); color: var(--tinta-3); }
/* Esqueleto: blocos chapados que pulsam em opacidade (sem gradiente, sem spinner). */
.esq { display: block; border-radius: var(--r-lg); background: var(--papel-2); animation: pulsa 1.2s var(--curva) infinite alternate; }
.esq-linha { display: grid; grid-template-columns: 20px 1fr; gap: var(--e-100); padding: var(--e-75) var(--e-100); }
@keyframes pulsa { from { opacity: 1; } to { opacity: .45; } }

/* ══════════ Rodapé ══════════ */
.rodape { background: var(--escuro); color: var(--claro-tx-2); padding: var(--e-800) 0 var(--e-400); }
.rodape-g { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--e-400); }
.rodape .logo { color: var(--claro-tx); margin-bottom: var(--e-200); }
.rodape h5 { color: var(--obra); margin-bottom: var(--e-200); }
.rodape li { margin-bottom: var(--e-75); }
.rodape a { transition: color var(--t-cor) var(--curva); }
.rodape a:hover { color: var(--claro-tx); text-decoration: underline; text-underline-offset: 3px; }
.rodape-b { margin-top: var(--e-600); padding-top: var(--e-300); border-top: 1px solid var(--claro-linha); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e-100); }

/* ══════════ Revelar ao rolar (B7: 32px, 700ms, uma vez) ══════════ */
.js .rv { opacity: 0; transform: translateY(var(--e-400)); transition: opacity var(--t-revela) var(--curva), transform var(--t-revela) var(--curva); }
.js .rv.vis { opacity: 1; transform: none; }


/* ══════════ Responsivo do que é compartilhado ══════════ */
@media (max-width: 1180px) {
  .nav-links a { padding: var(--e-75); }
  .nav-busca span { display: none; }
}
@media (max-width: 1100px) {
  .heading-1 { font-size: 48px; line-height: 48px; }
  .heading-2 { font-size: 36px; line-height: 40px; }
  .rodape-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape-g > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .nav-links, .nav-entrar, .nav .bt { display: none; }
  .alterna { display: inline-block; }
  .nav { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--e-200); }
  .heading-1 { font-size: 36px; line-height: 40px; }
  .heading-2 { font-size: 30px; line-height: 36px; }
  .heading-3 { font-size: 30px; line-height: 36px; }
  .heading-4 { font-size: 24px; line-height: 32px; }
  .body-7 { font-size: 16px; line-height: 24px; }
  .sec-cab { margin-bottom: var(--e-500); }
  .rodape-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .busca { padding: var(--e-200) var(--e-75) var(--e-75); }
  .busca-caixa { max-height: calc(100vh - 32px); }
  .busca-rodape { display: none; }
  .nav-busca kbd { display: none; }
  .sec { padding: var(--e-700) 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rv { transform: none; }
  .menu-m li { transform: none; }
}