/* OBJETARIA — CSS do header universal (submenu Serviços, menu do celular, cards de "O que fazemos"), gerado por tools/build.mjs a partir de tools/header/header.css. Não editar à mão. */
/* =========================================================
   OBJETARIA · HEADER UNIVERSAL (1.2.15) — fonte (escrita à mão)
   O tools/build.mjs prefixa cada seletor com body.obj-master:not(#obj):not(#obj) (o mesmo peso do CSS do master)
   e grava assets/css/objetaria-header.css. O plugin carrega este CSS em TODAS as páginas do master (Home, /projetos/,
   páginas de projeto, páginas de serviço): o header é um só. Tudo novo no prefixo .sv- (Serviços).
   ========================================================= */

/* ---------- submenu "Serviços" (referência: menu "Steel Fabrication") ----------
   "Serviços" continua sendo o link da seção O que fazemos (mesmo estilo dos outros itens); a seta ao lado abre o
   submenu (toque e teclado) e, com mouse, passar o cursor também abre. O painel nasce logo abaixo da linha laranja.
   A coluna do menu ocupa a altura do header para não haver vão entre o item e o painel (os itens continuam
   centrados: nada se move). */
body.obj-master:not(#obj):not(#obj) .header__inner > .nav{ align-self:stretch; }
body.obj-master:not(#obj):not(#obj) .sv-nav{ position:relative; display:flex; align-items:center; align-self:stretch; gap:3px; }
body.obj-master:not(#obj):not(#obj) .sv-nav__toggle{
  display:grid; place-items:center; flex:none;
  width:26px; height:26px; margin:0 -7px 0 0; padding:0;
  border:0; border-radius:3px; background:none; color:var(--on-dark); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--duration-micro) var(--ease-out);
}
body.obj-master:not(#obj):not(#obj) .sv-chevron{ display:block; width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform 300ms var(--ease-premium); }
body.obj-master:not(#obj):not(#obj) .sv-nav.is-open .sv-chevron{ transform:rotate(180deg); }
/* aberto: item e seta em laranja (como na referência) */
body.obj-master:not(#obj):not(#obj) .sv-nav.is-open > .sv-nav__link,body.obj-master:not(#obj):not(#obj) .sv-nav.is-open > .sv-nav__toggle{ color:var(--accent); }
/* seção ativa (Serviços numa página de serviço, Projetos em /projetos/): SEM marca visual no item do menu — nada de
   linha laranja fixa; o estado fica no aria-current (leitores de tela) e o sublinhado continua só no hover/foco.
   Dentro do submenu, o serviço da página segue em laranja. */
/* Painel: largura do conteúdo (o item mais longo, "Aço Inox & Soldagem", define a caixa) com o MESMO respiro dos dois
   lados (20 px, como os itens da referência). Cantos de cima quase retos (saem da linha do header) e de baixo suaves:
   caixa arquitetônica. Alinhado ao texto de "Serviços" (-20 px = o respiro). */
body.obj-master:not(#obj):not(#obj) .sv-nav__panel{
  position:absolute; top:calc(100% + 1px); left:-20px; z-index:40;
  width:max-content; padding:6px 0;
  background:var(--white); color:var(--ink);
  border-radius:1.5px 1.5px 6px 6px;
  box-shadow:0 14px 34px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.08);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 180ms var(--ease-out), transform 240ms var(--ease-premium), visibility 0s linear 240ms;
  --focus:var(--accent);
}
body.obj-master:not(#obj):not(#obj) .sv-nav.is-open .sv-nav__panel{
  opacity:1; visibility:visible; transform:none;
  transition:opacity 220ms var(--ease-out), transform 360ms var(--ease-premium), visibility 0s;
}
/* sem JS (o script ainda não marcou .is-ready): abre por hover e por foco */
body.obj-master:not(#obj):not(#obj) .sv-nav:not(.is-ready):hover .sv-nav__panel,body.obj-master:not(#obj):not(#obj) .sv-nav:not(.is-ready):focus-within .sv-nav__panel{ opacity:1; visibility:visible; transform:none; transition:none; }
body.obj-master:not(#obj):not(#obj) .sv-nav__list{ list-style:none; margin:0; padding:0; }
body.obj-master:not(#obj):not(#obj) .sv-nav__list li{ margin:0; padding:0; }
/* os itens ficam dentro de .nav: estas regras precisam vencer ".nav a" do master (cor branca, sublinhado animado) */
body.obj-master:not(#obj):not(#obj) .nav .sv-nav__panel .sv-nav__item{
  display:block; padding:10px 20px;
  font-family:var(--f-body); font-size:16px; font-weight:400; line-height:20px; letter-spacing:0;
  color:var(--ink); background:none; text-decoration:none; white-space:nowrap;
  transition:color 250ms var(--ease-out);
}
body.obj-master:not(#obj):not(#obj) .nav .sv-nav__panel .sv-nav__item:hover,body.obj-master:not(#obj):not(#obj) .nav .sv-nav__panel .sv-nav__item:focus-visible{ color:var(--accent); background:none; }
body.obj-master:not(#obj):not(#obj) .nav .sv-nav__panel .sv-nav__item.is-current{ color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .nav .sv-nav__panel .sv-nav__item:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
/* tablet estreito (561–640 px): a seta soma ~22 px ao menu, que no master já ocupava todo o header nessa faixa;
   os dois vãos entre os itens cedem 11 px cada e nada passa da largura da tela (o logo e o botão não mudam) */
@media (min-width:561px) and (max-width:640px){ body.obj-master:not(#obj):not(#obj) .header__inner > .nav{ gap:13px; } }
/* toque: área de 44 px na seta (a caixa visível continua 26 px) */
@media (hover:none){ body.obj-master:not(#obj):not(#obj) .sv-nav__toggle{ position:relative; } body.obj-master:not(#obj):not(#obj) .sv-nav__toggle::after{ content:""; position:absolute; inset:-9px; } }

/* ---------- header do celular (≤ 560 px) · 1.2.23 ----------
   Respiro lateral simétrico: a tinta do logo começa --mobile-header-edge depois do início da linha laranja e as barras
   do ☰ terminam --mobile-header-edge antes do fim dela (antes: 0,6 px à esquerda e 8,1 px à direita). ESTIMATED — CALIBRATE.
   Ícone ☰: o mesmo desenho (18 px, três barras), agora em pixels inteiros — barras de 2 px em 0 / 5 / 10 (vãos iguais de
   3 px); as barras de 1,5 px em 4,75 / 9,5 caíam entre pixels e a do meio/de baixo saía borrada ou mais clara que a de
   cima. O botão (44 × 44) começa em y 19,5 dentro do header de 75 px: o ½ px a mais põe as barras em y 36 / 41 / 46.
   O ✕ continua igual (mesmos ângulos e tempos do master), só centrado em 5 px. */
@media (max-width:560px){
  body.obj-master:not(#obj):not(#obj) .header__inner{ --mobile-header-edge:10px; }
  /* o PNG do logo (slot logo-header, em contain à esquerda) tem ~0,6 px de margem transparente nesse tamanho: descontada,
     a TINTA começa exatamente no edge (medido no preview: 20,64 → 30,0 com a linha em 20) */
  body.obj-master:not(#obj):not(#obj) .header__logo{ margin-left:calc(var(--mobile-header-edge) - var(--mobile-header-logo-ink, .6px)); }
  /* barras terminam em (fim da linha − edge): botão de 44 com o ícone de 18 centrado → 13 px de folga à direita do ícone */
  body.obj-master:not(#obj):not(#obj) .nav-toggle{ margin-right:calc(var(--mobile-header-edge) - 13px); }
  body.obj-master:not(#obj):not(#obj) .nav-toggle__bars{ height:12px; top:.5px; }   /* deslocamento de layout (não transform, que rasteriza com borda cinza) */
  body.obj-master:not(#obj):not(#obj) .nav-toggle__bars > span{ height:2px; }
  body.obj-master:not(#obj):not(#obj) .nav-toggle__bars > span:nth-child(2){ top:5px; }
  body.obj-master:not(#obj):not(#obj) .nav-toggle__bars > span:nth-child(3){ top:10px; }
  body.obj-master:not(#obj):not(#obj) .nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(1),
  body.obj-master:not(#obj):not(#obj) .nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(3){ top:5px; }
}

/* ---------- menu do celular (≤ 560 px): "Serviços" com a lista dos serviços ---------- */
body.obj-master:not(#obj):not(#obj) .sv-m__row{ display:flex; align-items:center; justify-content:space-between; }
body.obj-master:not(#obj):not(#obj) .sv-m__toggle{
  display:grid; place-items:center; flex:none;
  width:40.67px; height:40.67px; margin:0 -12px 0 0; padding:0;
  border:0; background:none; color:var(--ink); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body.obj-master:not(#obj):not(#obj) .sv-m.is-open .sv-chevron{ transform:rotate(180deg); }
body.obj-master:not(#obj):not(#obj) .sv-m__sub{ display:flex; flex-direction:column; margin:-3px 0 6px; padding:0 0 0 13px; border-left:1px solid var(--accent-soft); }
body.obj-master:not(#obj):not(#obj) .sv-m__sub[hidden]{ display:none; }
body.obj-master:not(#obj):not(#obj) .sv-m__item{
  display:flex; align-items:center; height:34px;
  font-size:13.25px; font-weight:400; line-height:1; text-decoration:none; color:#5C6068;
  transition:color var(--duration-hover) var(--ease-premium);
}
body.obj-master:not(#obj):not(#obj) .sv-m__item:hover,body.obj-master:not(#obj):not(#obj) .sv-m__item:focus-visible,body.obj-master:not(#obj):not(#obj) .sv-m__item.is-current{ color:var(--accent); }
body.obj-master:not(#obj):not(#obj) .sv-m__item.is-current{ font-weight:500; }

/* ---------- Home · cards de "O que fazemos" (destino das âncoras do submenu) ----------
   Ao chegar pelo menu, o card mostra o mesmo painel laranja do hover por alguns segundos; a margem deixa o card longe
   da borda da tela na rolagem. Fora da Home não há cards: estas regras não fazem nada. */
body.obj-master:not(#obj):not(#obj) .tile[data-sv-tile]{ scroll-margin-top:clamp(24px, 9vh, 96px); }
body.obj-master:not(#obj):not(#obj) .tile.is-sv-target .tile__panel{ transform:none; transition:transform var(--duration-panel) var(--ease-premium); }

/* ===== movimento reduzido: transições do master restauradas (gerado) ===== */
@media (prefers-reduced-motion:reduce){
body.obj-master:not(#obj):not(#obj) .sv-nav__toggle{ transition:color var(--duration-micro) var(--ease-out) !important; }
body.obj-master:not(#obj):not(#obj) .sv-chevron{ transition:transform 300ms var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .sv-nav__panel{ transition:opacity 180ms var(--ease-out), transform 240ms var(--ease-premium), visibility 0s linear 240ms !important; }
body.obj-master:not(#obj):not(#obj) .sv-nav.is-open .sv-nav__panel{ transition:opacity 220ms var(--ease-out), transform 360ms var(--ease-premium), visibility 0s !important; }
body.obj-master:not(#obj):not(#obj) .sv-nav:not(.is-ready):hover .sv-nav__panel,body.obj-master:not(#obj):not(#obj) .sv-nav:not(.is-ready):focus-within .sv-nav__panel{ transition:none !important; }
body.obj-master:not(#obj):not(#obj) .nav .sv-nav__panel .sv-nav__item{ transition:color 250ms var(--ease-out) !important; }
body.obj-master:not(#obj):not(#obj) .sv-m__item{ transition:color var(--duration-hover) var(--ease-premium) !important; }
body.obj-master:not(#obj):not(#obj) .tile.is-sv-target .tile__panel{ transition:transform var(--duration-panel) var(--ease-premium) !important; }
}