/* ============================================================
   REFINAMENTOS
   Camadas v3 a v22, na ordem original.
   Precisa carregar POR ÚLTIMO: são correções que vencem por cascata,
   não por especificidade. Reordenar este arquivo quebra o layout.
   ============================================================ */

/* ===== acréscimos v3, conformidade com a seção 7 ===== */
header.site.small .wrap{height:var(--altura-header-compacto)}
header.site.small .brand img{height:30px}
.hsearch{display:flex;align-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(234,232,225,.25);min-width:0;flex:1 1 200px;max-width:330px}
.hsearch input{flex:1;background:none;border:none;color:var(--white);font:inherit;font-size:15.5px;padding:10px 13px;min-width:0}
.hsearch input::placeholder{color:#8ba3b2}
.hsearch input:focus{outline:none}
.hsearch button{padding:10px 13px;color:var(--sand);display:grid;place-items:center}
.hsearch button:hover{color:var(--yellow)}
.social{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(234,232,225,.28);color:var(--cream);flex:none}
.social:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}

.wafloat{position:fixed;right:22px;bottom:22px;z-index:64;display:flex;align-items:center;gap:10px;background:var(--yellow);color:var(--navy);padding:14px 20px;font-weight:800;font-size:16.5px;box-shadow:0 16px 40px -18px rgba(0,0,0,.8)}
.wafloat:hover{background:var(--white)}
@media (max-width:860px){.wafloat{display:none}}

.cookie{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--navy-x);border-top:3px solid var(--yellow);padding:18px 0}
.cookie .wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cookie p{font-size:16px;color:#c3d0d8;flex:1;min-width:260px}
.cookie.hide{display:none}

.news{background:var(--navy);border:1px solid rgba(234,232,225,.2);padding:24px}
.news h4{color:var(--yellow)}
.news p{font-size:15.5px;color:#9db3c0;margin:6px 0 14px}
.news form{display:flex;gap:8px;flex-wrap:wrap}
.news input{flex:1;min-width:150px;font:inherit;font-size:16px;padding:12px 14px;background:var(--navy-d);border:1px solid rgba(234,232,225,.25);color:var(--cream)}
.news input:focus{outline:none;border-color:var(--yellow)}
.news label{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:#8ba3b2;margin-top:12px;line-height:1.4}

.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.field label i{font-style:normal;color:#b3361f}
.field input,.field select,.field textarea{font:inherit;font-size:18.5px;padding:14px;border:2px solid var(--line);background-color:var(--white);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy)}
.field.wide{grid-column:1/-1}
.lgpd{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);margin-top:18px;max-width:70ch}
.lgpd a{border-bottom:2px solid var(--yellow);font-weight:700;color:var(--navy)}

.xsell{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px;background:rgba(234,232,225,.15);margin-top:26px}
.xs{background:var(--navy);padding:20px;text-align:left;position:relative;overflow:hidden}
.xs::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--yellow);transition:width .2s}
.xs:hover::after{width:100%}
.xs b{display:block;font-size:18.5px;font-weight:800;color:var(--white)}
.xs span{display:block;font-size:14.5px;color:#8ba3b2;margin-top:5px}

.selects{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.selects select,.selects input{font:inherit;font-size:17px;padding:13px 14px;background-color:var(--navy-d);border:1px solid rgba(234,232,225,.28);color:var(--cream);width:100%}
.selects select:focus,.selects input:focus{outline:none;border-color:var(--yellow)}
.selects .full{grid-column:1/-1}
@media (max-width:520px){.selects{grid-template-columns:1fr}}

.clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px;background:var(--line)}
.cli{background:var(--cream-l);height:92px;display:grid;place-items:center;font-size:14px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
/* O logotipo respira dentro da caixa em vez de encostar na borda,
   e mantém a proporção: contain, nunca cover — logo esticado é
   logo errado. */
.cli--logo{padding:14px 18px;overflow:hidden}
/* Teto em pixel pelo mesmo motivo do .bcard .blogo: max-height:100%
   não resolve contra a caixa e vale como `none`. Aqui a arte é 3:1
   e cabia por sorte da proporção — um logo mais quadrado que a OSY
   mande amanhã vazaria igual. */
.cli--logo img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain;display:block}

/* ===== v4: mega-menu, listas, avisos ===== */
#megawrap{position:relative;flex:none;white-space:nowrap}
#mega{position:absolute;top:calc(100% + 16px);left:-24px;z-index:70;background:var(--navy-d);border:1px solid rgba(234,232,225,.2);border-top:3px solid var(--yellow);padding:10px;display:none;grid-template-columns:repeat(2,minmax(230px,1fr));gap:2px;min-width:560px;box-shadow:0 30px 70px -30px #000}
#megawrap.open #mega{display:grid}
.mgitem{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:13px 15px;text-align:left;background:var(--navy);align-items:baseline}
.mgitem:hover{background:var(--navy-l)}
.mgn{font-size:12.5px;font-weight:800;color:var(--yellow);letter-spacing:.1em}
.mgitem b{font-size:16.5px;font-weight:700;color:var(--white)}
.mgq{grid-column:2;font-size:13px;color:#8ba3b2}
@media (max-width:1080px){#mega{min-width:auto;grid-template-columns:1fr;left:0}}

ul.biglist{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;background:rgba(234,232,225,.15);margin-top:10px}
ul.biglist li{background:var(--navy);padding:22px 24px;font-size:18px;color:#c3d0d8;position:relative;padding-left:44px}
ul.biglist li::before{content:"";position:absolute;left:24px;top:29px;width:10px;height:3px;background:var(--yellow)}

.warnbox{border-left:5px solid var(--yellow);background:rgba(234,217,10,.07);padding:20px 24px}
.warnbox b{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);font-weight:800;margin-bottom:8px}
.warnbox p{font-size:17px;color:#c3d0d8;max-width:80ch}

/* ===== v8: menu mobile ===== */
.burger{display:none;width:48px;height:48px;flex:none;border:1px solid rgba(234,232,225,.3);place-items:center;padding:0}
.burger span{display:block;width:22px;height:2.5px;background:var(--cream);margin:4.5px auto;transition:transform .25s,opacity .2s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.scrim{position:fixed;inset:0;background:rgba(4,18,27,.65);z-index:88;opacity:0;pointer-events:none;transition:opacity .28s}
.scrim.open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,90vw);background:var(--navy-d);
  z-index:90;transform:translateX(101%);transition:transform .3s cubic-bezier(.3,.8,.4,1);
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  border-left:3px solid var(--yellow);
}
.drawer.open{transform:none}
.dtop{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid rgba(234,232,225,.15);position:sticky;top:0;background:var(--navy-d);z-index:2}
.dtop img{height:32px;width:auto}
.dclose{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(234,232,225,.3);color:var(--cream);font-size:22px;line-height:1;flex:none}
.dclose:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}

.dsearch{padding:18px 22px;border-bottom:1px solid rgba(234,232,225,.15);display:flex;gap:8px}
.dsearch input{flex:1;min-width:0;font:inherit;font-size:17px;padding:14px;background:var(--navy);border:1px solid rgba(234,232,225,.3);color:var(--cream)}
.dsearch input:focus{outline:none;border-color:var(--yellow)}
.dsearch button{background:var(--yellow);color:var(--navy);padding:0 18px;font-weight:800;font-size:15px;flex:none}

.dnav{display:flex;flex-direction:column;padding:8px 0}
.dnav > button,.dacc > summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:17px 22px;font-size:19px;font-weight:700;color:var(--cream);text-align:left;
  border-bottom:1px solid rgba(234,232,225,.1);cursor:pointer;list-style:none;
}
.dnav > button:hover,.dacc > summary:hover{background:var(--navy);color:var(--white)}
.dacc > summary::-webkit-details-marker{display:none}
.dacc > summary::after{content:"+";font-size:24px;font-weight:400;color:var(--yellow);line-height:1}
.dacc[open] > summary::after{content:"–"}
.dacc[open] > summary{color:var(--yellow)}
.dsub{display:flex;flex-direction:column;background:var(--navy-x);padding:6px 0}
.dsub button{display:flex;gap:12px;align-items:baseline;padding:13px 22px 13px 30px;font-size:16.5px;color:#c3d0d8;text-align:left;width:100%}
.dsub button:hover{color:var(--white);background:var(--navy)}
.dsub button i{font-style:normal;font-size:12px;font-weight:800;color:var(--yellow);letter-spacing:.08em;flex:none}

.dfoot{margin-top:auto;padding:22px;display:flex;flex-direction:column;gap:14px;border-top:1px solid rgba(234,232,225,.15)}
.dfoot .btn{justify-content:center;font-size:17px}
.dfoot .tel{font-size:19px;font-weight:800;color:var(--yellow)}
.dfoot small{font-size:13.5px;color:#8ba3b2;line-height:1.5}
/* Os tres catalogos irmaos ocupam uma linha, na ordem em que o grupo os
   apresenta. O Grupo Osy e a casa dos tres, entao fica no card largo
   embaixo, e nao disputando espaco na fileira com eles.              */
.dfrentes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:4px}
.dfrentes button{padding:11px 8px;font-size:13px;font-weight:700;color:#9db3c0;border:1px solid rgba(234,232,225,.2);text-align:center}
.dfrentes .dgrupo{grid-column:1/-1;padding:13px 8px;margin-top:2px}
.dfrentes button.is{color:var(--navy);background:var(--yellow);border-color:var(--yellow)}

body.locked{overflow:hidden}

@media (max-width:860px){
  .burger{display:grid}
  .hactions{gap:8px}
}
@media (max-width:560px){
  .hactions > .btn{display:none}
  .d1{font-size:clamp(40px,10vw,64px)}
  .d2{font-size:clamp(30px,7.4vw,48px)}
  .d3{font-size:clamp(23px,5.6vw,32px)}
  .impact{font-size:clamp(25px,7vw,40px)}
  .lead{font-size:18.5px}
  body{font-size:18px}
  .sec{padding:44px 0}
  .prow{padding:15px 16px}
  .ftab{min-width:50%;padding:13px 15px}
  .btn{padding:14px 20px;font-size:16px}
  .btns{gap:10px}
  .btns .btn{flex:1;justify-content:center;min-width:0}
}
@media (max-width:400px){
  .d1{font-size:36px}
  .brand img{height:30px}
}


/* ===== v10: barra flutuante estilo pílula (mobile) ===== */
.appbar{
  display:none;position:fixed;left:14px;right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:66;align-items:center;gap:10px;
}
.abpill{
  display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0;
  background:var(--cream);color:var(--navy);
  border-radius:999px;padding:7px 20px 7px 7px;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);
}
.abpill:active{transform:scale(.98)}
.abmark{width:40px;height:40px;border-radius:50%;background:var(--navy);display:grid;place-items:center;flex:none}
.abmark svg{width:22px;height:auto;display:block}
.abpill b{font-size:16.5px;font-weight:750;letter-spacing:-.01em;white-space:nowrap}
.ablines{display:grid;gap:4px;flex:none;margin-left:2px}
.ablines i{display:block;width:19px;height:2.5px;background:var(--navy);border-radius:2px}

.abcirc{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);
}
.abcirc svg{width:23px;height:23px}
.abcirc.zap{background:var(--yellow);color:var(--navy);margin-left:auto}
.abcirc.find{background:var(--navy-d);color:var(--cream);border:1px solid rgba(234,232,225,.3)}
.abcirc:active{transform:scale(.94)}

@media (max-width:860px){
  .appbar{display:flex}
  body{padding-bottom:96px}
}
@media (max-width:380px){
  .abpill{padding-right:16px;gap:9px}
  .abpill b{font-size:15.5px}
  .abcirc{width:50px;height:50px}
}

/* ===== v10: correções ===== */
/* 1. logo não pode encolher, max-width:100% do reset estava esmagando a largura
      com a altura fixa em 38px, distorcendo a marca */
.brand{flex:0 0 auto}
.brand img{height:38px;width:auto;max-width:none;flex:none}
header.site.small .brand img{height:30px}

/* 2. estas duas precisam vir no fim da cascata: as regras base de .hsearch e
      .social são declaradas depois do bloco @media original e o venciam */
@media (max-width:1240px){ .social{display:none} }
@media (max-width:1140px){ .hsearch{display:none} }



/* ===== v11 ===== */

/* --- 1. transição ao entrar numa linha --- */
.wipe{
  position:fixed;inset:0;z-index:95;pointer-events:none;transform:translateX(-110%);
  background:linear-gradient(140deg,var(--yellow) 0 50%,var(--navy) 50% 100%);
}
.wipe.go{animation:wipe .78s cubic-bezier(.72,0,.28,1)}
@keyframes wipe{
  0%{transform:translateX(-110%)}
  42%{transform:translateX(0)}
  58%{transform:translateX(0)}
  100%{transform:translateX(110%)}
}
.ccard:active,.mgitem:active,.dsub button:active,.xs:active{transform:scale(.985)}
.ccard,.mgitem,.xs{transition:transform .12s,color .2s}

#v-cat .cathero .eyebrow,#v-cat .cathero h1,#v-cat .cathero .lead,#v-cat .cathero .btns{
  animation:heroIn .55s cubic-bezier(.2,.7,.3,1) both;
}
#v-cat .cathero h1{animation-delay:.06s}
#v-cat .cathero .lead{animation-delay:.12s}
#v-cat .cathero .btns{animation-delay:.18s}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* --- 2 e 3. rodapé reorganizado, com o símbolo de marca-d'água --- */
footer.site{position:relative;overflow:hidden}
.fsym{
  position:absolute;right:-6%;bottom:-58%;width:min(620px,52vw);
  color:var(--cream);opacity:.045;pointer-events:none;z-index:0;
}
.fsym svg{width:100%;height:auto;display:block}
footer.site .wrap{position:relative;z-index:1}
.fcols{display:grid;grid-template-columns:1.25fr 1.4fr .9fr 1.05fr;gap:clamp(26px,3.4vw,52px);align-items:start}
footer.site li button{
  text-align:left;padding:0;font:inherit;color:inherit;line-height:inherit;display:block;width:100%;
}
footer.site li button:hover{color:var(--white)}
.fprod{columns:2;column-gap:26px}
.fprod li{break-inside:avoid;margin-bottom:9px}
.fbrand p{max-width:34ch}

/* newsletter em faixa própria, com espaço para respirar */
.fnews{
  margin-top:clamp(34px,4vw,54px);padding:clamp(22px,2.6vw,30px);
  background:var(--navy);border:1px solid rgba(234,232,225,.2);border-left:5px solid var(--yellow);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.1fr);gap:clamp(20px,3vw,44px);align-items:center;
}
.fnews h4{margin-bottom:8px}
.fnews > div p{font-size:15px;color:#9db3c0;max-width:46ch}
.fnews form{display:flex;gap:10px;flex-wrap:wrap}
.fnews input[type=email]{flex:1;min-width:180px;font:inherit;font-size:16px;padding:14px 16px;background:var(--navy-d);border:1px solid rgba(234,232,225,.28);color:var(--cream)}
.fnews input[type=email]:focus{outline:none;border-color:var(--yellow)}
.fnews .lg{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#8ba3b2;margin-top:12px;line-height:1.45;max-width:52ch}
.fnews .lg input{flex:none;margin-top:3px;width:17px;height:17px;accent-color:var(--yellow)}
@media (max-width:1080px){
  .fcols{grid-template-columns:1fr 1fr;gap:34px}
  .fnews{grid-template-columns:1fr;gap:18px}
}
@media (max-width:620px){
  .fcols{grid-template-columns:1fr}
  .fprod{columns:2}
  .fsym{width:80vw;right:-22%;bottom:-30%}
}

/* --- 4. barra flutuante também no desktop --- */
@media (min-width:861px){
  .appbar{
    display:flex;left:0;right:0;justify-content:center;
    bottom:calc(22px + env(safe-area-inset-bottom,0px));
  }
  .abpill{padding:8px 10px 8px 8px;gap:6px}
  .abpill b{display:none}
  .ablines{margin-left:8px;margin-right:8px}
  .abnav{display:flex;align-items:center;gap:4px}
  .abnav button{
    padding:11px 16px;border-radius:999px;font-size:15.5px;font-weight:650;color:var(--navy);
    white-space:nowrap;transition:background .16s;
  }
  .abnav button:hover{background:rgba(9,50,74,.09)}
  .abcirc.zap{margin-left:0}
}
.abnav{display:none}


/* pílula reestruturada: container claro com botão de menu + links */
.abpill{
  display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;
  background:var(--cream);color:var(--navy);
  border-radius:999px;padding:7px;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);
}
.abmenu{display:flex;align-items:center;gap:12px;padding:0 12px 0 0;color:var(--navy);border-radius:999px;flex:none}
.abmenu:active{transform:scale(.97)}
@media (min-width:861px){
  .abmenu{padding-right:4px}
  .abmenu b{display:none}
}


/* ===== v12 ===== */

/* --- correção: .abnav{display:none} vinha depois do @media e o vencia --- */
@media (max-width:860px){ .abnav{display:none!important} }

/* --- telas de catálogo em fundo claro: legibilidade e uso real da paleta --- */
#v-list,#v-ficha,#v-compare,#v-compat{background:var(--cream-l);color:var(--ink)}
#v-list .crumb,#v-ficha .crumb,#v-compare .crumb,#v-compat .crumb{
  background:var(--cream);color:var(--ink-2);border-bottom:1px solid var(--line);
}
#v-list .crumb b,#v-ficha .crumb b,#v-compare .crumb b,#v-compat .crumb b{color:var(--navy)}
#v-list .crumb button:hover,#v-ficha .crumb button:hover{color:var(--navy)}
#v-compat .sec--navy,#v-compare .sec--navy{background:transparent;color:var(--ink)}
#v-compat .lead,#v-compare .lead{color:var(--ink-2)}
#v-compat .eyebrow,#v-compare .eyebrow{color:var(--ink-3)}
#v-compat .d2,#v-compare .d2{color:var(--navy)}

/* filtros */
.facets{background:var(--white);border:1px solid var(--line);padding:22px;gap:22px}
.fg h4{color:var(--navy);border-bottom:2px solid var(--yellow);padding-bottom:9px}
.fopt{color:var(--ink-2)}
.fopt:hover{color:var(--navy)}
.fopt .bx{border-color:var(--ink-3);background:var(--white)}
.fopt .n{color:var(--ink-3)}

/* cabeçalho de resultados */
.lhead{border-bottom:3px solid var(--yellow)}
.lhead b{color:var(--navy)}
.lhead select{background-color:var(--white);color:var(--ink);border:1px solid var(--line)}
.chip{border-color:var(--navy);color:var(--navy);background:var(--opal)}
.chip button{color:var(--navy)}
.chip.clear{background:transparent;border-color:var(--sand);color:var(--ink-2)}

/* linhas de produto */
.rows{background:transparent;gap:10px}
.prow{background:var(--white);border:1px solid var(--line);transition:border-color .16s,box-shadow .16s,transform .16s}
.prow:hover{background:var(--white);border-color:var(--navy);box-shadow:0 10px 26px -18px rgba(9,50,74,.85);transform:translateY(-1px)}
.prow .code{color:var(--navy)}
.prow .nm{color:var(--ink-2)}
.prow .sp span{border-color:var(--sand);color:var(--ink-2);background:var(--cream-l)}
.prow .sp span.hi{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.prow .thumb{background:var(--cream);border-color:var(--line)}
.prow .thumb::after{background:linear-gradient(140deg,transparent 0 50%,rgba(9,50,74,.10) 50% 100%)}
.empty{background:var(--white);border:1px solid var(--line);color:var(--ink-2)}
.empty b{color:var(--navy)}
.btn--out{border-color:var(--navy);color:var(--navy)}
.btn--out:hover{background:var(--navy);color:var(--cream)}

/* ficha */
#v-ficha .badges .b-l{border-color:var(--sand);color:var(--ink-2)}
#v-ficha h1,#v-ficha .d3{color:var(--navy)!important}
.codebig b{color:var(--navy)}
.skuline{color:var(--ink-3)}
.copybtn{border-color:var(--line);color:var(--ink-2);background:var(--white)}
.buybox{background:var(--navy);border-left-color:var(--yellow)}
.buybox small{color:#9db3c0}
h2.blk{color:var(--navy);border-bottom-color:var(--line);position:relative}
h2.blk::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;background:var(--yellow)}
.spectable td{border-bottom-color:var(--line)}
.spectable td:first-child{color:var(--ink-2)}
.spectable td:last-child{color:var(--navy)}
.spectable tr:nth-child(odd) td{background:var(--cream-l)}
.eqs{background:var(--line);gap:1px}
.eq{background:var(--white)}
.eq span{color:var(--ink-3)}
.eq b{color:var(--navy)}
#v-ficha .sec--deep{background:var(--navy)}
#v-ficha p[style*="9db3c0"]{color:var(--ink-2)!important}


/* buscador de compatibilidade */
.progress{background:var(--sand)}
.stepper{background:var(--line);gap:1px}
.st{background:var(--white)}
.st span{color:var(--ink-3)}
.st b{color:var(--navy)}
.st i{color:var(--teal)}
.opts{background:var(--line);gap:1px}
.opt{background:var(--white)}
.opt:hover:not(.na){background:var(--cream-l)}
.opt b{color:var(--navy)}
.opt small{color:var(--ink-3)}

/* --- filtros como painel inferior no mobile --- */
.filtbtn{display:none;align-items:center;gap:9px;background:var(--navy);color:var(--cream);font-weight:750;font-size:15.5px;padding:13px 20px;border-radius:999px}
.filtbtn span{background:var(--yellow);color:var(--navy);border-radius:999px;padding:1px 9px;font-size:13px;font-weight:800}
.fsheet-head,.fsheet-foot{display:none}

@media (max-width:1080px){
  .listwrap{grid-template-columns:1fr}
  .filtbtn{display:inline-flex}
  .facets{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:92;
    max-height:84vh;overflow-y:auto;overscroll-behavior:contain;
    border-radius:22px 22px 0 0;border:none;border-top:4px solid var(--yellow);
    transform:translateY(101%);transition:transform .3s cubic-bezier(.3,.8,.4,1);
    padding:0 20px 20px;gap:24px;box-shadow:0 -20px 50px -20px rgba(0,0,0,.5);
  }
  .facets.open{transform:none}
  .fsheet-head{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:sticky;top:0;background:var(--white);padding:18px 0 14px;
    border-bottom:1px solid var(--line);z-index:2;margin-bottom:4px;
  }
  .fsheet-head b{font-size:20px;font-weight:800;color:var(--navy)}
  .fsheet-head button{width:42px;height:42px;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;color:var(--ink-2)}
  .fsheet-foot{display:block;position:sticky;bottom:0;background:var(--white);padding:14px 0 4px;border-top:1px solid var(--line)}
  .fsheet-foot .btn{width:100%;justify-content:center}
  .fopt{padding:9px 0;font-size:16.5px}
  .fopt .bx{width:19px;height:19px}
}


/* ===== v13: correções de estouro e do painel de filtros ===== */

/* 1. estouro horizontal, filho de grid tem min-width:auto por padrão e
      não encolhe abaixo do próprio conteúdo, empurrando a coluna além da tela */
.listwrap{grid-template-columns:270px minmax(0,1fr)}
.sheet{grid-template-columns:minmax(0,1fr) 400px}
.listwrap > *,.sheet > *,.rows,.prow > *,.lhead > *,.cbgrid > *{min-width:0}
.lhead{min-width:0;row-gap:12px}
.lhead .srt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prow{overflow:hidden}
.prow .sp{min-width:0}

@media (max-width:1080px){
  .listwrap{grid-template-columns:minmax(0,1fr)}
  .sheet{grid-template-columns:minmax(0,1fr)}

  /* 2. o painel de filtros herdava flex-direction:row de uma regra anterior,
        jogando cabeçalho e rodapé para os lados em vez de empilhar */
  .facets{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  #facetlist{display:flex;flex-direction:column;gap:26px;width:100%;min-width:0}
  .fsheet-head,.fsheet-foot{width:100%;flex:none}
  .fg{min-width:0;width:100%}
}

/* 3. barra utilitária no celular: as quatro frentes no lugar do telefone */
/* O telefone e o endereco saem e ficam so as quatro frentes: e o que os
   outros sites do grupo fazem nesta largura, e a faixa passa a servir
   para trocar de frente em vez de repetir um contato que ja esta no
   menu e no botao de WhatsApp. 767px e o mesmo ponto de troca de la. */
@media (max-width:767px){
  .util .tel,
  .util .wrap > span:nth-child(2){display:none}
  .util .wrap{justify-content:center;padding-left:0;padding-right:0}
  /* Quatro rotulos em 360px e o limite: em vez de quebrar linha e dobrar
     a altura da faixa, a fileira rola de lado quando nao couber.      */
  .util .frentes{
    margin-left:auto;margin-right:auto;max-width:100%;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .util .frentes::-webkit-scrollbar{display:none}
  .util .frentes a,.util .frentes .soon{padding:0 10px;font-size:12px;letter-spacing:.02em}
  /* O selo "em breve" sozinho custa ~55px e era o que fazia a fileira
     estourar em 390px. Na faixa estreita a cor apagada ja diz que a
     frente nao esta no ar; o selo por extenso segue no menu, que tem
     espaco para ele.                                                 */
  .util .frentes .soon i{display:none}
}

/* 4. cabeçalho de resultados respira melhor no mobile */
@media (max-width:700px){
  .lhead{align-items:center}
  .lhead b{width:100%}
  .filtbtn{flex:1;justify-content:center}
  .lhead .srt{margin-left:0;flex:1;justify-content:flex-end}
  .lhead > span:nth-of-type(1){display:none}
}


/* ===== v14: botão de contorno por tipo de fundo ===== */

/* padrão, contorno claro, para as seções escuras */
.btn--out{background:none;color:var(--cream);border-color:rgba(234,232,225,.55)}
.btn--out:hover{background:var(--cream);color:var(--navy);border-color:var(--cream)}

/* superfícies claras do catálogo, contorno navy */
#v-list .btn--out,#v-compare .btn--out,#v-compat .btn--out{
  border-color:var(--navy);color:var(--navy);background:none;
}
#v-list .btn--out:hover,#v-compare .btn--out:hover,#v-compat .btn--out:hover{
  background:var(--navy);color:var(--cream);border-color:var(--navy);
}

/* a caixa de orçamento da ficha é escura, o contorno volta a ser claro */
#v-ficha .buybox .btn--out{border-color:rgba(234,232,225,.55);color:var(--cream);background:none}
#v-ficha .buybox .btn--out:hover{background:var(--cream);color:var(--navy);border-color:var(--cream)}

/* sobre fundo amarelo, contorno navy sólido */
.sec--yellow .btn--out{border-color:var(--navy);color:var(--navy)}
.sec--yellow .btn--out:hover{background:var(--navy);color:var(--yellow);border-color:var(--navy)}

/* no desktop a pílula já tem o WhatsApp, o botão solto vira redundância */
@media (min-width:861px){ .wafloat{display:none} }


/* ===== v15: reformatação estilo vitrine (ref. catálogo de implementos) =====
   Mesmas cores, mesma tipografia, mesmo conteúdo, só a formatação. */
.sec{padding:clamp(64px,7.5vw,120px) 0}
.sechead{margin-bottom:clamp(36px,4vw,56px)}
.cards{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(20px,2.4vw,32px);background:none}
.ccard{padding:0;min-height:0;gap:0;border:1px solid var(--line);transition:transform .18s,border-color .18s,box-shadow .18s}
.ccard::after{content:none}
.ccard:hover{border-color:var(--navy);box-shadow:0 16px 34px -22px rgba(9,50,74,.55);transform:translateY(-3px)}
.ccard .cbody{display:flex;flex-direction:column;gap:10px;padding:20px 22px 24px;flex:1;text-align:left}
.brands{gap:clamp(12px,1.4vw,18px);background:none}
.bcard{background:transparent;border:1px solid rgba(234,232,225,.22)}
.bcard:hover{background:var(--navy-l);border-color:var(--yellow)}
.pillars{gap:clamp(12px,1.4vw,18px);background:none}
.pil{background:var(--white);border:1px solid var(--line)}
.types{gap:clamp(12px,1.4vw,18px);background:none}
.type{border:1px solid var(--line)}
.montgrid{gap:12px;background:none}
.mont{border:1px solid var(--line)}
.frentes{gap:clamp(12px,1.4vw,18px)}
ul.biglist{gap:12px;background:none}
ul.biglist li{border:1px solid rgba(234,232,225,.18)}
.clientes{gap:14px;background:none}
.cli{border:1px solid var(--line)}
.xsell{gap:12px;background:none}
.xs{border:1px solid rgba(234,232,225,.22)}
.eqs{gap:10px;background:none}
.eq{border:1px solid var(--line)}
.opts{gap:10px;background:none}
.opt{border:1px solid var(--line)}
.stepper{gap:10px;background:none}
.st{border:1px solid var(--line)}
.rows{gap:12px}
.app th,.app td{padding-top:17px;padding-bottom:17px}

/* ===== v16: menos poluição, grades sem sobra, foto ===== */

/* 2 e 4. marcas: card com mais presença e grade que fecha a linha */
.brands{grid-template-columns:repeat(4,minmax(0,1fr))}
.bcard{position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;
  text-align:left;padding:26px 22px;min-height:126px;overflow:hidden;
  transition:border-color .18s,background .18s,transform .18s}
.bcard::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--yellow);transition:width .26s}
.bcard:hover{transform:translateY(-2px);border-color:rgba(234,217,10,.5)}
.bcard:hover::after{width:100%}
.bcard b{font-size:21px;letter-spacing:.05em}
.bcard span{margin-top:0;font-size:12.5px;letter-spacing:.14em}
.bcard.pend{grid-column:span 2;border-style:dashed}
@media (max-width:900px){.brands{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.brands{grid-template-columns:1fr}.bcard.pend{grid-column:auto}}

/* 3. pilares e demais grades: colunas exatas, sem célula órfã */
.pillars{grid-template-columns:repeat(4,minmax(0,1fr))}
.types{grid-template-columns:repeat(2,minmax(0,1fr))}
.montgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.clientes{grid-template-columns:repeat(6,minmax(0,1fr))}
.xsell{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.pillars,.xsell{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clientes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.types,.montgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pillars,.types,.montgrid,.xsell{grid-template-columns:1fr}
  .clientes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 5. botão do WhatsApp: pílula com ícone, em uma linha */
.btn--wa{border-radius:999px;white-space:nowrap;gap:9px;padding:12px 22px}
.btn--wa.btn--sm{padding:10px 18px;font-size:15.5px}

/* 6. blocos de texto mais compactos */
.pil p,.type p,ul.biglist li{line-height:1.45;text-wrap:pretty}
.prose p{line-height:1.5;text-wrap:pretty}
.lead{max-width:58ch;text-wrap:pretty}
.pil h3,.type h3{text-wrap:balance}

/* cabeçalho em duas colunas: título à esquerda, apoio à direita */
.sechead--split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,72px);align-items:end;max-width:none}
.sechead--split .lead{max-width:46ch;margin:0;padding-bottom:6px}
@media (max-width:900px){.sechead--split{grid-template-columns:1fr;align-items:start;gap:20px}}

/* 7 e 8. espaços de foto */
.hero--photo{position:relative;overflow:hidden}
.hero--photo{background:var(--navy-d);position:relative;overflow:hidden}
.hero--photo > .sym{display:none}
.hero--photo > .blade{display:none}
/* O fundo e o PRIMEIRO QUADRO do video, e nao uma foto
   parecida: ele aparece antes de o video comecar e some por
   baixo dele, sem troca visivel. Era um PNG de 1,8 MB — o
   WebP do mesmo quadro tem 49 KB, e carregava em toda visita
   mesmo quando o video entrava logo em seguida. */
.herophoto{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:url("../img/hero-cartaz.webp") center right/cover no-repeat}
/* O cartaz NAO precisa de desfoque proprio: ele e o atributo
   `poster` do proprio video, e o `filter` do elemento vale para
   o poster tambem. Uma camada a mais aqui so funcionava por
   acidente — `filter` cria contexto de empilhamento, e era isso
   que mantinha o video por cima dela. Tirar o filtro um dia
   inverteria a ordem e o video sumiria atras de uma imagem
   parada, sem erro nenhum.

   O fundo de `.herophoto` fica nitido de proposito: ele so
   aparece se o video nao carregar, e nesse caso nitido e
   melhor. */
.herophoto video{width:100%;height:100%;object-fit:cover;object-position:center right;display:block}
.herophoto .vmob{display:none}
@media (max-width:860px){
  .herophoto .vdesk{display:none}
  .herophoto .vmob{display:block;object-position:center center}
}
/* O VEU SOBRE O VIDEO, NO PADRAO DE IMPLEMENTOS

   Era um degrade horizontal so, que caia para 8% de opacidade
   na borda direita — ou seja, o video aparecia quase cru
   justamente atras do buscador. O video da abertura e um close
   fechado de oficina: cru, ele vira mancha, e o cartao em cima
   dele fica dificil de ler.

   Implementos resolveu isso ha tempos e a OSY aprovou: um veu
   VERTICAL que escurece de baixo para cima e nunca desce
   abaixo de 38%. O fundo vira textura, com profundidade, e o
   conteudo se le em qualquer ponto da tela.

   Aqui sao duas camadas, e nao uma. A vertical e a de
   Implementos, com os mesmos valores. A horizontal, mais suave
   que a de antes, fica porque o texto de Componentes mora a
   ESQUERDA sobre o video — em Implementos ele mora embaixo, e
   por isso la a vertical basta. */
.hero--photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(4,20,31,.92) 0%,rgba(4,20,31,.78) 30%,
                    rgba(4,20,31,.55) 58%,rgba(4,20,31,.38) 100%),
    linear-gradient(90deg,rgba(9,32,45,.62) 0 3%,rgba(9,32,45,.48) 34%,
                    rgba(9,32,45,.2) 66%,rgba(9,32,45,0) 100%)}
.hero--photo > .wrap{position:relative;z-index:3}
@media (max-width:860px){
  .herophoto{background:url("../img/hero-cartaz-celular.webp") center center/cover no-repeat}
  .hero--photo::after{background:linear-gradient(180deg,rgba(9,32,45,.8) 0 55%,rgba(9,32,45,.66) 100%)}
}


/* ===== v18: mega-menu Produtos mais limpo ===== */
#mega{padding:14px 12px 12px;gap:0 8px;min-width:600px;
  background:var(--navy-d);border:1px solid rgba(234,232,225,.16);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.75)}
.mgitem{background:transparent;grid-template-columns:26px 1fr;gap:2px 14px;
  padding:12px 14px;border-radius:3px;position:relative;
  transition:background .16s}
.mgitem::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;background:rgba(234,232,225,.09)}
.mgitem:nth-last-child(-n+2)::after{display:none}
.mgitem:hover{background:rgba(234,232,225,.07)}
.mgitem:hover::after{opacity:0}
.mgn{font-size:11.5px;letter-spacing:.08em;color:rgba(234,217,10,.85);align-self:center}
.mgitem b{font-size:15.5px;letter-spacing:0}
.mgq{font-size:12px;color:#6f8ea1;letter-spacing:.01em}
@media (max-width:1080px){.mgitem:nth-last-child(-n+2)::after{display:block}
  .mgitem:last-child::after{display:none}}

/* ===== v19: hero de categoria alinhado ao topo ===== */
.cathero .wrap{align-items:start}
@media (min-width:1081px){.cathero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,64px)}}
.cathero .wrap > div:first-child{align-self:center}
.cathero .eyebrow{margin-top:2px}
.cathero .lead{max-width:52ch;margin-top:0}
.cathero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cathero .btns .btn{flex:0 0 auto}
.cathero .blade{background:linear-gradient(140deg,transparent 0 61%,rgba(234,217,10,.07) 61% 63.5%,transparent 63.5%)}
@media (max-width:1080px){.cathero .wrap > div:first-child{align-self:start}}

/* ===== v20: acertos de mobile ===== */
@media (max-width:860px){
  /* hero: altura sob controle, vídeo vertical */
  .hero--photo{padding-top:44px;padding-bottom:52px}
  .hero--photo .d1{font-size:clamp(34px,10vw,44px)}
  .hero--photo .lead{font-size:16.5px}

  /* tabela de aplicações: rola na horizontal sem empurrar a página */
  .app{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-collapse:separate}
  .app thead,.app tbody,.app tr{display:table;width:100%;table-layout:fixed}
  .app th,.app td{padding-left:12px;padding-right:12px;font-size:14px;word-break:break-word}

  /* símbolos decorativos não podem estourar a largura */
  .fsym,.sym{overflow:hidden;max-width:100%}
  footer.site,.hero,.cathero,.sec{overflow-x:hidden}

  /* alvos de toque */
  .btn{min-height:46px}
  .fopt,.mgitem,.st,.opt{min-height:44px}
}
@media (max-width:520px){
  .stepper{grid-template-columns:1fr}
  .clientes{grid-template-columns:1fr}
}

/* ===== v21: home formatada para mobile ===== */
@media (max-width:860px){
  :root{--px:20px}
  .sec{padding:clamp(44px,9vw,64px) 0}
  .sechead{margin-bottom:28px}
  .d1{font-size:clamp(38px,11vw,54px);line-height:.96;letter-spacing:-.035em}
  .d2{font-size:clamp(30px,8.4vw,42px);line-height:1.04;letter-spacing:-.028em}
  .d3{font-size:clamp(23px,6vw,29px)}
  .impact{font-size:clamp(28px,8vw,40px);max-width:none}
  .lead{font-size:17px;line-height:1.55;max-width:none}
  .eyebrow{font-size:12px;letter-spacing:.18em}
  .eyebrow::before{width:22px;height:2px}

  /* hero */
  .hero--photo{padding:36px 0 40px}
  .hero--photo .wrap > .lead{margin-top:16px}
  .hero--photo .btns{margin-top:24px !important;gap:10px}
  .hero--photo .btns .btn{flex:1 1 100%;justify-content:center}

  /* buscador: abas roláveis, sem quebra de linha */
  .finder{margin-top:32px}
  .ftabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ftabs::-webkit-scrollbar{display:none}
  .ftab{flex:0 0 auto;min-width:0;padding:13px 16px;font-size:14.5px;white-space:nowrap}
  .ftab small{font-size:12px;white-space:nowrap}

  /* catálogo: card horizontal, foto menor */
  .cards{gap:12px}
  .ccard{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:stretch}
  .ccard .cbody{padding:14px 16px;gap:6px;justify-content:center}
  .ccard .cbody h3{font-size:18px}
  .ccard .cbody p{font-size:13.5px}
  .ccard .cbody .go{font-size:13px}

  /* marcas */
  .sechead--split{gap:16px}
  .brands{gap:8px}
  .bcard{min-height:0;padding:16px 18px;flex-direction:row;align-items:center;
    justify-content:space-between;gap:12px}

  /* A PLACA TEM MEDIDA FIXA AQUI.

     No celular o cartao vira uma fileira, e sem largura propria
     a placa encolhia ate o tamanho do logotipo: a de Takarada
     ficava larga e baixa, a de Casappa estreita e alta, e a
     coluna inteira parecia desalinhada. Com medida fixa todas
     as placas sao a mesma caixa, e o que muda dentro dela e so
     a arte. */
  .bcard .blogo{width:104px;height:64px;flex:none;margin:0;
    padding:8px 10px;align-self:center}
  .bcard .blogo img{width:100%;height:100%}
  .bcard .blogo-cunha{width:22px;height:22px}
  /* O nome volta a se alinhar ao topo da placa, nao a base dela. */
  .bcard > b{align-self:center}
  .bcard b{font-size:17px}
  .bcard span{font-size:11px;text-align:right;color:#8ba3b2}
  .bcard.pend{justify-content:flex-start}

  /* compatibilidade */
  .compat-band .cbcard{padding:20px 18px}
  .compat-band .selects{gap:10px}
  .compat-band select,.compat-band input{font-size:16px}

  /* pilares */
  .pillars{gap:10px}
  .pil{padding:22px 20px}
  .pil b{font-size:28px;margin-bottom:10px}
  .pil h3{font-size:18.5px}
  .pil p{font-size:15px}

  /* clientes */
  .clientes{gap:8px}
  .cli{height:72px;font-size:12px}

  /* grupo */
  .frentes{gap:8px}
  .fr{padding:20px 18px}

  /* chamada final */
  .sec--yellow .wrap[style]{gap:24px}
  .sec--yellow .btn--dark{width:100%;justify-content:center}
}
@media (max-width:520px){
  .ccard{grid-template-columns:96px minmax(0,1fr)}
  .cli{height:64px}
}

/* ===== v22: 3 abas visíveis, divisória do 214, seletores estilizados ===== */
/* seletores nativos com seta própria, em todo o site */
select{-webkit-appearance:none;appearance:none;border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:7px 7px,7px 7px;background-repeat:no-repeat;
  background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 13px) calc(50% - 2px);
  padding-right:44px !important;cursor:pointer}
.fform select{background-color:var(--white)}
.selects select{background-color:var(--navy-d)}
select option{background:var(--white);color:var(--ink)}
.selects select option{background:var(--navy-d);color:var(--cream)}
select:hover{border-color:var(--navy)}
.selects select:hover{border-color:rgba(234,217,10,.55)}

@media (max-width:860px){
  /* as três abas sempre visíveis, uma ao lado da outra */
  .ftabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .ftab{padding:12px 8px 11px;font-size:13px;text-align:center;white-space:normal;
    line-height:1.2;border-bottom-width:3px}
  .ftab small{font-size:10.5px;line-height:1.25;margin-top:4px;white-space:normal}
}

/* ============================================================
   A NAVBAR SOBRE O HEROI
   ------------------------------------------------------------
   Transparente enquanto se esta no heroi, com cor a partir do
   momento em que ele sai. E o mesmo comportamento do site do
   Grupo, e o motivo e o mesmo: a barra opaca corta a abertura
   em duas e rouba altura da unica imagem que o visitante ve
   antes de decidir se fica.

   QUEM DECIDE E `body.no-heroi`, posta pelo js/navegacao.js — e
   o nome quer dizer "no heroi", e nao "sem heroi". Ela so
   existe na home: nas outras paginas a barra fica opaca desde
   o inicio, que e o que se quer, porque la embaixo dela ha
   texto e nao imagem.

   O DEGRADE NAO E ENFEITE. Sobre um video, mesmo com o veu, o
   contraste do menu muda a cada quadro. A faixa escura no topo
   garante que o menu se leia sem depender do que esta
   passando atras dele.

   VALE NO CELULAR TAMBEM. A primeira versao ficou so no
   desktop porque no celular a chamada subia para tras do
   logotipo — e o motivo nao era falta de espaco, era uma regra
   de celular em css/home.css sobrescrevendo o recuo do heroi.
   Corrigido la, a barra flutua nas duas larguras, com o
   logotipo de um lado e o menu do outro.
   ============================================================ */
header.site{transition:background .3s ease,border-color .3s ease}
body.no-heroi header.site{background:transparent;border-bottom-color:transparent}

  /* O DEGRADE NAO PODE TERMINAR NA BORDA DA BARRA.

     Na primeira versao ele era o `background` do proprio
     header, e por isso acabava de estalo na altura dela: ficava
     uma emenda horizontal na largura toda da tela, escuro em
     cima e claro embaixo — uma linha que parecia defeito, e
     era.

     Aqui ele mora num pseudo que desce 70px alem da barra e so
     entao chega a zero. O olho nao acha onde ele termina. */
body.no-heroi header.site::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:-70px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(9,32,45,.58) 0%,rgba(9,32,45,.34) 42%,rgba(9,32,45,0) 100%)}

/* A busca e o botao de icone tem fundo proprio; sobre o video
   eles ficariam como duas caixas soltas. Aqui perdem o corpo e
   ficam so com o contorno, como o resto da barra. */
body.no-heroi header.site .hsearch{background:rgba(9,32,45,.34)}

/* ============================================================
   A FAIXA DE CLIENTES EM CARROSSEL

   Eram dez logotipos numa grade de duas fileiras, e a segunda
   ficava pela metade — seis em cima, quatro embaixo e dois vãos
   vazios ao lado. Em carrossel a fileira é sempre cheia, e a
   faixa passa a ocupar a altura de uma linha só.

   COMO O LOOP FECHA SEM SALTO: a lista é desenhada DUAS VEZES,
   lado a lado, e a animação corre até -50% — exatamente o fim da
   primeira cópia. Nesse instante o que está na tela é a segunda
   cópia, idêntica, e voltar a 0 não muda um pixel. Sem a
   duplicata, o fim da lista deixaria um vão antes de recomeçar.

   A duplicata leva `aria-hidden` no HTML: para quem usa leitor
   de tela, são dez clientes, não vinte.

   PAUSA NO HOVER porque a faixa é prova social — quem parou o
   mouse ali está tentando ler um nome, e um logo que foge é um
   nome que não se lê.

   `prefers-reduced-motion` desliga o movimento e devolve a grade
   de antes. Movimento infinito é gatilho para quem tem distúrbio
   vestibular, e a informação não depende da animação.
   ============================================================ */
.clientes-faixa{overflow:hidden;position:relative}

/* `width:max-content` para a trilha medir as duas cópias inteiras
   em vez de se encolher no contêiner — sem isto o translateX de
   -50% andaria metade de uma largura errada. */
.clientes-trilha{display:flex;width:max-content;animation:clientes-rolar 46s linear infinite}
.clientes-trilha:hover,.clientes-trilha:focus-within{animation-play-state:paused}

/* Vence as media queries que dão colunas à grade: duas classes
   contra uma, e por especificidade — não por ordem no arquivo. */
.clientes-trilha .clientes{display:flex;grid-template-columns:none;background:none;gap:0}
.clientes-trilha .cli{flex:0 0 172px;width:172px;border:0;margin-right:2px}

@keyframes clientes-rolar{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* As bordas esmaecem para o logo não ser cortado em seco ao
   entrar e sair. Sobre o branco da seção, que é onde a faixa
   mora nas duas páginas. */
.clientes-faixa::before,.clientes-faixa::after{
  content:"";position:absolute;top:0;bottom:0;width:64px;z-index:1;pointer-events:none}
.clientes-faixa::before{left:0;background:linear-gradient(90deg,var(--white),transparent)}
.clientes-faixa::after{right:0;background:linear-gradient(270deg,var(--white),transparent)}

@media (prefers-reduced-motion:reduce){
  .clientes-trilha{animation:none;width:100%;flex-wrap:wrap}
  .clientes-trilha .clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:2px;background:var(--line);width:100%}
  .clientes-trilha .cli{flex:auto;width:auto;margin-right:0}
  /* A segunda cópia só existe para o loop; parado, ela seria a
     lista repetida na tela. */
  .clientes-trilha [aria-hidden="true"]{display:none}
  .clientes-faixa::before,.clientes-faixa::after{display:none}
}

@media (max-width:640px){
  .clientes-trilha .cli{flex-basis:132px;width:132px}
  .clientes-faixa::before,.clientes-faixa::after{width:32px}
}