/* ============================================================
   FORJARIA · VOLTZ — sistema visual compartilhado
   Usinagem · Caldeiraria · Estruturas — Joinville/SC
   ============================================================ */

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
body { background:#15181c; }
::selection { background:#ff5a1f; color:#15181c; }

/* Safe-areas (notch / barra do polegar) */
header { padding-top: env(safe-area-inset-top, 0); }

.kicker { letter-spacing:.32em; text-transform:uppercase; }

/* Texto de CONTEÚDO discreto que precisa passar WCAG AA. Usa chrome (#9aa6b1):
   ~5.9:1 sobre steel e ~6.8:1 sobre graphite — passa AA inclusive nos page-headers
   em steel-plate (onde smoke #868f99 ficava ~4.6:1, no limite). */
.muted-aa { color:#9aa6b1; }

/* Tipografia de LEITURA no mobile: parágrafos, fichas (dd), itens de FAQ e
   passos do processo com piso de 15px. Rótulos/kickers (uppercase tracking,
   text-[12px], .kicker) permanecem menores de propósito. */
@media (max-width: 640px){
  p.text-sm,
  dd.text-sm,
  .faq p,
  .proc-line p,
  .spec-row dd { font-size: 0.9375rem; line-height: 1.55; }
}
.cond-tight { letter-spacing:-.01em; line-height:.92; }

/* Hachura diagonal de canteiro/sinalização industrial */
.hazard {
  background-image: repeating-linear-gradient(
    45deg, #ff5a1f 0 14px, #15181c 14px 28px
  );
}
.hazard-thin {
  background-image: repeating-linear-gradient(
    -45deg, #3a434c 0 6px, transparent 6px 12px
  );
}

/* Textura sutil de placa de aço */
.steel-plate {
  background-color:#1d2228;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Scrim real para o bloco com foto */
.scrim {
  background:
    linear-gradient(90deg, rgba(15,16,18,.96) 0%, rgba(15,16,18,.82) 42%, rgba(15,16,18,.35) 100%);
}
@media (max-width: 768px){
  .scrim {
    background:
      linear-gradient(180deg, rgba(15,16,18,.6) 0%, rgba(15,16,18,.88) 55%, rgba(15,16,18,.96) 100%);
  }
}

/* Filete de acento */
.rule-safety { height:3px; background:#ff5a1f; }

/* Reveal no scroll (fail-safe: começa visível se JS quebrar) */
.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity:1; transform:none; }

.focusable:focus-visible { outline:3px solid #ff5a1f; outline-offset:3px; }

/* ---- Micro-animações com propósito (transição de estado, GPU-only) ---- */
/* feedback: botões-âncora cheios (CTA laranja) */
.bg-safety { transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.bg-safety:hover { box-shadow: 0 6px 20px -6px rgba(255,90,31,.5); transform: translateY(-1px); }
.bg-safety:active { transform: translateY(0) scale(.98); }

/* estado: cards de placa de aço ganham realce ao toque/hover */
article.steel-plate, .grid > .steel-plate, .grid > .bg-graphite {
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
article.steel-plate:hover,
a.group:hover article.steel-plate { box-shadow: 0 10px 30px -12px rgba(0,0,0,.7); }

/* feedback: linhas de setor/lista clicáveis no toque */
a.group:active { background: rgba(255,90,31,.06); }

/* brand: header sticky compacta e ganha sombra ao rolar */
header { transition: box-shadow .3s ease, background-color .3s ease; }
header.scrolled { box-shadow: 0 8px 24px -12px rgba(0,0,0,.85); background-color: rgba(21,24,28,.97); }

/* transição: menu mobile desliza (max-height + opacity) E sai do fluxo de foco
   ao fechar via visibility:hidden — links NÃO ficam focáveis por teclado/leitor
   quando recolhido, mas a animação de fechar continua acontecendo (visibility
   é transicionável, ao contrário de display:none que cortaria a transição). */
#mobileMenu { overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; border-top-color: transparent;
  transition: max-height .3s cubic-bezier(.2,.7,.2,1), opacity .22s ease, visibility 0s linear .3s, border-color .3s ease; }
#mobileMenu.open { max-height: 600px; opacity: 1; visibility: visible; border-top-color: #2a3138;
  transition: max-height .3s cubic-bezier(.2,.7,.2,1), opacity .22s ease, visibility 0s linear 0s, border-color .3s ease; }
/* fail-safe sem JS: navegação inline (md+) some o menu via Tailwind;
   no mobile sem JS o menu fica recolhido, mas a logo/CTA do header
   permanecem e os links existem no rodapé — conteúdo nunca preso. */

/* feedback: chevron do FAQ <details> gira ao abrir */
.faq summary { cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform .25s ease; }
.faq[open] summary .chev { transform: rotate(180deg); }
.faq summary:focus-visible { outline: 3px solid #ff5a1f; outline-offset: 3px; }

/* Número de seção monumental */
.megafig { font-variant-numeric: tabular-nums; line-height:.8; }

/* Linha de processo */
.proc-line::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,#ff5a1f, #3a434c);
}

.link-hover { position:relative; }
.link-hover::after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:#ff5a1f; transition:width .3s ease; }
.link-hover:hover::after, .link-hover:focus-visible::after { width:100%; }

/* Item ativo do nav — estado, não decoração */
.nav-active { color:#eef1f4; }
.nav-active::after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:#ff5a1f; }
.nav-active-mobile { color:#eef1f4; border-left:3px solid #ff5a1f; padding-left:.75rem; }

/* ============================================================
   DETALHE-ASSINATURA — "Régua de cota" (dimension caliper)
   Linha de tolerância de desenho técnico: extremidades em
   seta + cota viva. Aparece como faixa de medição entre blocos.
   ============================================================ */
.cota {
  display:flex; align-items:center; gap:0; width:100%;
  color:#9aa6b1; user-select:none;
}
.cota .tick { width:2px; height:14px; background:#ff5a1f; flex:0 0 auto; }
.cota .span {
  flex:1 1 auto; height:1px; min-width:18px; background:#3a434c; position:relative;
}
.cota .span::before,
.cota .span::after {
  content:''; position:absolute; top:50%; width:7px; height:7px;
  border-top:1px solid #3a434c; border-right:1px solid #3a434c;
}
.cota .span::before { left:0;  transform:translateY(-50%) rotate(-135deg); }
.cota .span::after  { right:0; transform:translateY(-50%) rotate(45deg); }
.cota .val {
  flex:0 0 auto; padding:0 .85rem; font-family:'Oswald',sans-serif;
  font-weight:600; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:#9aa6b1; white-space:nowrap;
}

/* brand: a cota "se mede" ao entrar na tela — os spans crescem de 0 → largura */
.js .cota.in .span { animation: cota-extend .6s cubic-bezier(.2,.7,.2,1) both; }
.js .cota.in .span:nth-of-type(2){ animation-delay:.05s; }
.js .cota.in .span:nth-of-type(3){ animation-delay:.12s; }
.js .cota.in .span:nth-of-type(4){ animation-delay:.19s; }
@keyframes cota-extend { from { transform:scaleX(0); transform-origin:left; } to { transform:scaleX(1); } }

/* Mobile: a régua de cota empilha em 1 coluna legível (não esmaga) */
@media (max-width: 640px){
  .cota { display:grid; grid-template-columns:1fr; gap:.55rem; }
  .cota .tick { display:none; }
  .cota .val {
    padding:0; display:flex; align-items:center; gap:.6rem; font-size:.72rem;
  }
  .cota .val::before {
    content:''; width:14px; height:2px; background:#ff5a1f; flex:0 0 auto;
  }
  .cota .span { display:none; }
}

/* Ficha técnica — par chave/valor pontilhado (folha de processo) */
.spec-row { display:flex; align-items:baseline; gap:.75rem; }
.spec-row .dots { flex:1 1 auto; min-width:14px; border-bottom:1px dotted #3a434c; transform:translateY(-3px); }

/* Mobile: a ficha técnica empilha chave acima do valor (não esmaga o pontilhado) */
@media (max-width: 520px){
  .spec-row { flex-direction:column; align-items:stretch; gap:.2rem; }
  .spec-row .dots { display:none; }
  .spec-row dd { text-align:left !important; }
  .spec-row dt { color:#eef1f4; }
}

/* Tolerância — caixa de cota com sinal ± */
.tol-badge {
  font-family:'Oswald',sans-serif; font-variant-numeric:tabular-nums;
}

/* WhatsApp float — respeita safe-area e não cobre CTA no mobile */
.wa-float { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0)); right: calc(1.25rem + env(safe-area-inset-right, 0)); transition: transform .18s ease, box-shadow .2s ease; }

/* Folga no mobile para o FAB do WhatsApp (≈56px + recuo) não encostar/cobrir
   os links do rodapé nem o CTA da última seção. Some no desktop (md+). */
@media (max-width: 767px){
  .footer-fab-safe { padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0)); }
  .cta-fab-safe { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0)); }
}
.wa-float:hover { transform: translateY(-2px) scale(1.04); }
.wa-float:active { transform: scale(.95); }

/* ============================================================
   prefers-reduced-motion: zera/reduz TODA animação não essencial
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .js .cota.in .span { animation: none !important; transform: none !important; }
  /* mantém o corte de visibilidade (a11y do menu) mas sem animar */
  #mobileMenu { transition: visibility 0s linear .001ms !important; }
  #mobileMenu.open { transition: visibility 0s linear 0s !important; }
  .bg-safety:hover, .wa-float:hover, article.steel-plate:hover { transform: none !important; }
}