/* ============================================================
   LAYOUT
   Barra do grupo, cabeçalho, herói, busca do herói e seções.
   ============================================================ */

/* ---------- barra utilitária ---------- */
/* Os dois vazios que o js/layout.js preenche NAO podem gerar caixa:
   `position:sticky` gruda dentro do pai, e um pai com a altura exata do
   cabecalho nao deixa percurso nenhum — o cabecalho sumia na rolagem.
   Com `display:contents` o div some do layout e quem passa a valer como
   pai do cabecalho e o proprio body.                                    */
#cabecalho,#rodape{display:contents}

/* A barra das frentes e a navegacao entre os quatro sites do grupo, entao
   na home ela fica fixa no alto e nao vai embora na rolagem. O padding no
   body devolve a altura que ela tira do fluxo ao ficar fixa.
   Dentro das paginas internas ela sai: la o visitante ja escolheu a frente
   e quem manda no topo e o menu do proprio catalogo. Quem tira e o go(),
   em js/navegacao.js, marcando o body.                                   */
.util{background:var(--navy-x);font-size:14.5px;letter-spacing:.04em;height:var(--altura-barra-grupo);
  position:fixed;top:0;left:0;right:0;z-index:61}
body{padding-top:var(--altura-barra-grupo)}
body.interna{padding-top:0}
body.interna .util{display:none}
body.interna header.site{top:0}
.util .wrap{display:flex;align-items:center;gap:22px;height:100%;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
.util .frentes{display:flex;gap:2px;margin-left:auto;height:100%}
.util .frentes a,.util .frentes .soon{display:flex;align-items:center;height:100%;padding:0 12px;color:#8ba3b2;border-bottom:2px solid transparent}
.util .frentes a:hover{color:var(--white)}
.util .frentes a.is{color:var(--white);border-bottom-color:var(--yellow);font-weight:700}
.util .tel{color:var(--cream);font-weight:600}

/* ---------- header ---------- */
header.site{position:sticky;top:var(--altura-barra-grupo);z-index:60;background:var(--navy);border-bottom:1px solid rgba(234,232,225,.13)}
header.site .wrap{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);height:var(--altura-header);padding-top:0;padding-bottom:0;flex-wrap:nowrap;transition:height .2s}
.brand img{height:38px;width:auto}
nav.main{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px);font-size:16.5px;font-weight:600;flex:0 0 auto;white-space:nowrap}
nav.main button{color:#c3d0d8;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;flex:none}
nav.main button:hover,nav.main button.on{color:var(--white);border-bottom-color:var(--yellow)}
.hactions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:1 1 auto;justify-content:flex-end;min-width:0}
.iconbtn{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(234,232,225,.28);color:var(--cream)}
.iconbtn:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--navy);overflow:hidden;padding:clamp(48px,6vw,84px) 0 0}
.hero .blade{position:absolute;inset:0;background:linear-gradient(140deg,transparent 0 52%,rgba(234,217,10,.14) 52% 56%,transparent 56%);pointer-events:none}
.hero .sym{right:-16%;top:-24%;width:min(920px,72vw)}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:var(--white)}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .lead{color:#c3d0d8;margin-top:26px}

/* busca herói */
.finder{margin-top:44px;background:var(--cream);color:var(--ink);box-shadow:0 40px 80px -50px #000}
.ftabs{display:flex;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ftab{flex:1;min-width:140px;padding:16px 20px;font-weight:800;font-size:16px;letter-spacing:.02em;color:var(--ink-2);border-bottom:4px solid transparent;text-align:left;transition:background .15s}
.ftab small{display:block;font-weight:500;font-size:14px;color:var(--ink-3);letter-spacing:0;margin-top:2px}
.ftab:hover{background:#e2e0d7}
.ftab.on{color:var(--navy);border-bottom-color:var(--yellow);background:var(--white)}
.fbody{padding:22px;background:var(--white)}
.fform{display:flex;gap:12px;flex-wrap:wrap}
.fform input,.fform select{flex:1;min-width:180px;font:inherit;font-size:18.5px;padding:15px 16px;border:2px solid var(--line);background-color:var(--white);color:var(--ink)}
.fform input:focus,.fform select:focus{outline:none;border-color:var(--navy)}
.fhint{margin-top:12px;font-size:15px;color:var(--ink-3)}
.fhint b{color:var(--navy);cursor:pointer;border-bottom:2px solid var(--yellow);font-weight:700}
.fchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.fchips button{border:1px solid var(--line);padding:7px 13px;font-size:15px;color:var(--ink-2);background:var(--white)}
.fchips button:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- seções ---------- */
.sec{padding:clamp(56px,7vw,110px) 0;position:relative;overflow:hidden}
.sec--cream{background:var(--cream);color:var(--ink)}
.sec--cream .lead{color:var(--ink-2)}
.sec--white{background:var(--white);color:var(--ink)}
.sec--white .lead{color:var(--ink-2)}
.sec--navy{background:var(--navy);color:var(--cream)}
.sec--navy .lead{color:#c3d0d8}
.sec--deep{background:var(--navy-d);color:var(--cream)}
.sec--yellow{background:var(--yellow);color:var(--navy)}
.sec--yellow .lead{color:#0d3a55}
.sechead{max-width:62ch;display:flex;flex-direction:column;gap:18px;margin-bottom:44px}

/* Frente do grupo ainda sem site: fica visivel, mas nao clicavel. */
.util .frentes .soon{color:#54707f;cursor:default;gap:7px}
.util .frentes .soon i{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:#54707f;padding:2px 5px;border-radius:2px;line-height:1}
/* Na fileira de tres a celula fica estreita demais para o nome e o selo
   lado a lado. Empilhados, cabem — e as tres celulas crescem juntas,
   porque o grid estica a linha inteira pela mais alta.               */
.dfrentes .soon{opacity:.5;cursor:default;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;line-height:1.15}
.dfrentes .soon i{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid currentColor;padding:2px 5px;border-radius:2px;line-height:1}

/* Cortina entre paginas. A de sempre (.wipe.go) cobre e descobre numa
   animacao so, o que serve para trocar de secao sem sair da pagina.
   Entre paginas o movimento precisa ser partido em dois: fecha aqui,
   e a pagina de destino abre com ela saindo.                          */
.wipe.entra{animation:wipeEntra .34s cubic-bezier(.72,0,.28,1) forwards}
.wipe.sai{animation:wipeSai .44s cubic-bezier(.72,0,.28,1) forwards}
@keyframes wipeEntra{from{transform:translateX(-110%)}to{transform:translateX(0)}}
@keyframes wipeSai{from{transform:translateX(0)}to{transform:translateX(110%)}}

/* Fita de progresso da rolagem, no topo da janela. Mesma ideia da do
   site da Osy Implementos, no amarelo daqui: fica acima da barra do
   grupo e some no comeco da pagina, onde nao informa nada.

   Quem anda com ela e o scaleX de um filho, e nao a largura: transform
   nao refaz layout, entao a fita acompanha a rolagem sem engasgar.
   z-index abaixo da cortina (95), para a troca de linha passar por cima. */
.progresso{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:94;
  pointer-events:none;opacity:0;transition:opacity .25s ease;
}
.progresso.ativa{opacity:1}
.progresso i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--yellow-d),var(--yellow));
}