/* ALUMINAÇO — busca profunda + PLANO ÚNICO DOS BOTÕES FLUTUANTES
   ========================================================================= */

/* =========================================================================
   1) OS FLUTUANTES  —  um dono só, uma pilha só
   -------------------------------------------------------------------------
   O problema (visto no print da Locação em 390px): o WhatsApp flutuante fica
   fixo no canto e passa POR CIMA do botão "COTAR" dos cards. Cada float que a
   gente adiciona (agora a lupa) piora.

   Solução: os flutuantes param de ser elementos soltos e viram uma PILHA
   (.fabs). Um container, um canto, um espaçamento. E ela SOME quando a pessoa
   rola pra baixo (quem rola está lendo, não quer botão na frente) e VOLTA
   quando ela para ou sobe. Fim da colisão — sem remendo em cada página.
   ========================================================================= */
.fabs{
  position:fixed;right:16px;bottom:16px;z-index:70;
  display:flex;flex-direction:column-reverse;align-items:center;gap:12px;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s
}
body.bs-lock .fabs,body.mm-open .fabs{opacity:0;pointer-events:none}

/* >>> O "some ao rolar pra baixo" FOI REMOVIDO — e é honesto dizer por quê.
   Ele contradizia o pedido novo (a lupa PRECISA aparecer justamente ao rolar)
   e, olhando com calma, resolvia pouco: escondia o botão durante o gesto e o
   trazia de volta na hora em que a pessoa PARA pra ler — que é exatamente
   quando ela pode estar olhando o card coberto. Meio conserto é pior que
   nenhum, porque dá a sensação de resolvido.
   A colisão do COTAR está resolvida no locacao.css, na raiz: o último card
   ganha respiro e o card inteiro é clicável (o badge coberto não bloqueia
   nada). Ver .lc-grid{padding-bottom}. <<< */

.fab{
  position:relative;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:0;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .18s,filter .18s
}
.fab:hover{transform:scale(1.07)}
.fab:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.fab:active{transform:scale(.95)}

/* WhatsApp — o principal, maior */
.fab-wa{width:54px;height:54px;background:#25d366}
.fab-wa svg{width:29px;height:29px;fill:#fff}

/* =========================================================================
   LUPA MINIMIZADA — canto SUPERIOR DIREITO (Lauro, 17/07)
   -------------------------------------------------------------------------
   Saiu de baixo, de perto do WhatsApp. Dois ganhos:
     1. mata a colisão de flutuantes embaixo — não tem mais dois no mesmo canto;
     2. superior direito é onde a pessoa PROCURA busca, por convenção.
   Ela vive FORA da pilha .fabs (que agora só tem o WhatsApp).
   Só existe no estado minimizado; no topo quem manda é a barra grande.
   ========================================================================= */
.fab-bs{
  position:fixed;z-index:61;              /* acima do .bsbar-wrap(59), abaixo do header(60/200) */
  top:78px;right:16px;
  width:44px;height:44px;border-radius:50%;
  background:#17171b;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.34,1.56,.64,1),background .18s,border-color .18s;
  overflow:hidden                          /* segura o brilho dentro do círculo */
}
html.bs-mini .fab-bs{opacity:1;transform:scale(1);pointer-events:auto}
.fab-bs:hover{background:var(--red);border-color:var(--red);transform:scale(1.08)}
.fab-bs:active{transform:scale(.94)}
.fab-bs:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.fab-bs svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;position:relative;z-index:2}

/* ---- BRILHO INOX: um reflexo varrendo o metal escovado, a cada 5s ----
   Fala do negócio ("Metal de verdade"; inox é um dos setores) em vez de ser
   flash genérico. Tom frio/prateado na diagonal, ~1s de varredura.
   CUSTO: só transform (composited). Nada de animar background-position em
   loop, que repinta o tempo todo. E o ::before some da árvore de layout —
   zero CLS (o brilho é dentro do botão, não muda tamanho de nada). */
.fab-bs::before{
  content:"";position:absolute;z-index:1;
  top:-60%;left:-140%;width:60%;height:220%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(190,205,220,.10) 30%,
    rgba(226,236,245,.55) 50%,
    rgba(190,205,220,.10) 70%,
    transparent 100%);
  transform:rotate(22deg) translateX(0);
  pointer-events:none
}
html.bs-mini .fab-bs::before{animation:inox 5s ease-in-out infinite}
@keyframes inox{
  0%   {transform:rotate(22deg) translateX(0)}
  16%  {transform:rotate(22deg) translateX(420%)}   /* ~0.8s varrendo */
  100% {transform:rotate(22deg) translateX(420%)}   /* e descansa até fechar 5s */
}
/* aba escondida: para a animação. Animação rodando em aba de fundo é
   desperdício de bateria — e o navegador nem sempre suspende sozinho. */
html.bs-oculta .fab-bs::before{animation-play-state:paused}
/* hover/foco: o brilho sai de cena pra não competir com o vermelho */
.fab-bs:hover::before,.fab-bs:focus-visible::before{opacity:0}

@media(max-width:900px){
  /* 390px: o header do celular tem z-index 200 (precisa disso pro drawer) e
     termina em ~77px. Com top:70 a lupa ficava 7px POR BAIXO dele — medido, não
     achado. 86px deixa 9px de folga do header e continua longe do hambúrguer. */
  .fab-bs{top:86px;right:12px;width:42px;height:42px}
  .fab-bs svg{width:18px;height:18px}
}
/* quem pediu menos animação NÃO recebe pulso a cada 5s — isso é gatilho real
   pra parte das pessoas, não é preferência estética. */
@media(prefers-reduced-motion:reduce){
  html.bs-mini .fab-bs::before{animation:none}
  .fab-bs::before{display:none}
}

/* rótulo no hover — "aparece 'Pesquisar'" */
.fab-lb{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(6px);
  background:#17171b;border:1px solid var(--line);color:var(--ink);
  font:600 12.5px/1 var(--fhead);padding:8px 12px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:.18s;box-shadow:0 6px 18px rgba(0,0,0,.4)
}
.fab:hover .fab-lb,.fab:focus-visible .fab-lb{opacity:1;transform:translateY(-50%) translateX(0)}
@media(hover:none){.fab-lb{display:none}}   /* no celular não existe hover */

@media(max-width:900px){
  .fabs{right:12px;bottom:12px;gap:10px}
  .fab-wa{width:50px;height:50px}
  .fab-wa svg{width:27px;height:27px}
}

/* o float antigo, solto, sai de cena */
.wa-float{display:none !important}

/* =========================================================================
   2) A BUSCA
   ========================================================================= */
.bs{position:fixed;inset:0;z-index:120;display:none}
.bs.open{display:block}
body.bs-lock{overflow:hidden}
.bs-ov{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);animation:bsFade .18s}
@keyframes bsFade{from{opacity:0}to{opacity:1}}

.bs-box{
  position:relative;width:min(720px,94vw);margin:min(9vh,80px) auto 0;
  background:#101013;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);overflow:hidden;
  display:flex;flex-direction:column;max-height:82vh;animation:bsIn .2s ease-out
}
@keyframes bsIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.bs-top{display:flex;align-items:center;gap:12px;padding:16px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.bs-lupa{width:20px;height:20px;flex:0 0 auto;stroke:var(--steel);fill:none;stroke-width:2;stroke-linecap:round}
.bs-in{
  flex:1;min-width:0;background:none;border:0;color:var(--ink);
  font:500 16px/1.3 var(--fbody);padding:8px 0;outline:none
}
.bs-in::placeholder{color:var(--steel)}
.bs-in::-webkit-search-cancel-button{filter:invert(.6)}
.bs-x{
  flex:0 0 auto;width:36px;height:36px;border:1px solid var(--line);background:#17171b;
  color:var(--muted);border-radius:9px;font:300 22px/1 var(--fbody);cursor:pointer;transition:.15s
}
.bs-x:hover{border-color:var(--red);color:var(--red)}
.bs-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.bs-res{overflow-y:auto;overscroll-behavior:contain;padding:8px;flex:1;-webkit-overflow-scrolling:touch}
.bs-n{padding:8px 10px 10px;font:600 11.5px/1 var(--fhead);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

.bs-i{
  display:flex;flex-direction:column;gap:5px;padding:11px 12px;border-radius:10px;
  text-decoration:none;color:inherit;transition:background .12s;min-height:44px
}
.bs-i:hover,.bs-i:focus-visible{background:#17171b;outline:none}
.bs-t{font:600 14.5px/1.35 var(--fbody);color:var(--ink)}
.bs-t mark{background:color-mix(in srgb,var(--red) 34%,transparent);color:#fff;border-radius:3px;padding:0 2px}
.bs-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bs-m i{font-style:normal;font:500 11.5px/1 var(--fbody);color:var(--steel)}
.bs-m .bs-c{margin-left:auto;opacity:.7}
.bs-o{font:800 9.5px/1 var(--fhead);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:5px}
.bs-o.sf{background:color-mix(in srgb,var(--red) 20%,transparent);color:#ff6b63}
.bs-o.sl{background:rgba(37,211,102,.18);color:#4ade80}
.bs-o.sq{background:rgba(96,165,250,.18);color:#93c5fd}

.bs-dica{padding:30px 20px 34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.bs-dica b{font:700 16px/1.3 var(--fhead);color:var(--alu)}
.bs-dica span{font:500 13.5px/1.6 var(--fbody);color:var(--steel);max-width:420px}

/* ---- MOBILE: a busca vira tela cheia (é de onde vem a maioria) ---- */
@media(max-width:900px){
  .bs-box{
    width:100%;margin:0;max-height:100dvh;height:100dvh;border-radius:0;border:0;
    animation:bsUp .22s ease-out
  }
  @keyframes bsUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
  .bs-top{padding:14px 12px}
  .bs-in{font-size:16px}          /* 16px trava o zoom automático do iOS */
  .bs-t{font-size:14px}
  .bs-res{padding:6px}
}
@media(prefers-reduced-motion:reduce){
  .fabs,.fab,.fab-lb,.bs-box,.bs-ov{transition:none;animation:none}
}

/* =========================================================================
   3) BARRA DE BUSCA — visível, centralizada, logo abaixo do menu
   -------------------------------------------------------------------------
   Trocou a lupa flutuante (Lauro, 17/07). E é melhor mesmo: busca escondida
   atrás de um ícone quase não é usada; barra à mostra é. É por isso que todo
   e-commerce grande tem a barra no topo, não um ícone.
   O .bsbar é um <button> que abre o mesmo modal — assim a inteligência toda
   (multi-palavra, sinônimos, selo de origem) continua valendo.
   ========================================================================= */
.bsbar-wrap{
  position:fixed;top:66px;left:0;right:0;z-index:59;
  display:flex;justify-content:center;padding:10px min(4vw,40px);
  background:linear-gradient(#0a0a0b 62%,rgba(10,10,11,0));
  pointer-events:none
}
.bsbar{
  pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  width:min(520px,100%);            /* média: nem colada na borda, nem minúscula */
  justify-content:center;
  padding:11px 18px;min-height:44px;border-radius:100px;
  cursor:pointer;font:600 14px/1 var(--fbody);
  /* VERMELHO ESCURO DA MARCA COM TRANSPARÊNCIA (Lauro, 17/07).
     O #141417 anterior dava 1.08:1 contra o fundo — preto no preto, medido.
     E o texto em --steel dava 3.09:1, REPROVANDO o WCAG AA (exige 4.5:1):
     estava ilegível, não só apagado.
     Aqui: color-mix do --red da marca (não um vermelho novo) escurecido e com
     alpha — dá pra ver o hero atravessando, como ele pediu. */
  background:color-mix(in srgb, var(--red) 26%, rgba(24,6,5,.86));
  /* A BORDA é quem carrega o contraste (WCAG 1.4.11: 3:1 no contorno).
     O fill escuro sozinho nunca passaria: vermelho escuro sobre fundo escuro
     empata em luminância — medi, dá 1.3-1.6:1 em qualquer alpha. */
  border:1.5px solid var(--red);
  color:#ffe9e7;                       /* branco-quente: 8.6:1 no pior caso */
  transition:.18s;
  /* anel escuro externo: sobre o HERO (que é foto e varia de pixel a pixel) a
     borda vermelha sozinha cai pra 2.6:1. O anel garante a separação onde o
     fundo clareia. Os dois juntos: o contorno nunca some. */
  box-shadow:0 0 0 3px rgba(0,0,0,.45), 0 6px 22px rgba(0,0,0,.5)
}
.bsbar svg{stroke:#ffe9e7}
.bsbar:hover{
  background:color-mix(in srgb, var(--red) 42%, rgba(24,6,5,.9));
  color:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.45), 0 6px 26px rgba(226,35,26,.35)
}
.bsbar:hover svg{stroke:#fff}
.bsbar:focus-visible{outline:3px solid #ffe9e7;outline-offset:3px}
.bsbar:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.bsbar svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke-width:2;stroke-linecap:round}
.bsbar span{font-weight:500}

/* o conteúdo desce pra caber a barra (ela é fixa, igual o header) */
body{padding-top:58px}

@media(max-width:900px){
  .bsbar-wrap{top:60px;padding:8px 12px}
  .bsbar{width:100%;padding:10px 16px;font-size:14px}
  body{padding-top:54px}
}
/* drawer/busca abertos: a barra sai da frente */
body.mm-open .bsbar-wrap,body.bs-lock .bsbar-wrap{opacity:0;pointer-events:none}

/* ---- O MORPH: barra grande (topo) <-> lupa mínima (rolando) ----
   ZERO CLS: a barra e a pilha são fixed (fora do fluxo) e o padding-top do
   <body> é o MESMO nos dois estados. Nada empurra o conteúdo. */
.bsbar-wrap{transition:opacity .24s ease,transform .24s cubic-bezier(.4,0,.2,1)}
.bsbar{transition:.18s,width .24s ease,transform .24s cubic-bezier(.4,0,.2,1)}
html.bs-mini .bsbar-wrap{
  opacity:0;transform:translateY(-14px) scale(.94);pointer-events:none
}
/* quem desligou animação: troca seca, sem transição */
html.bs-semanim .bsbar-wrap,html.bs-semanim .bsbar,html.bs-semanim .fab-bs{transition:none}

/* =========================================================================
   4) LOGO — o sufixo vermelho gira nos setores (trocadilho de marca, do dono)
   -------------------------------------------------------------------------
   O texto muda de largura a cada 2,6s ("AÇO" -> "PINTURA ELETROSTÁTICA").
   Sem reserva, o logo cresce e encolhe e empurra o que estiver do lado — no
   celular, o hambúrguer. Reservar a largura do MAIOR estado resolve: o espaço
   já está lá, nada se mexe. Mesmo remédio que matou o CLS da vitrine.
   ========================================================================= */
.logo-txt{display:inline-flex;align-items:baseline;white-space:nowrap}
.logo-rot{
  display:inline-block;white-space:nowrap;
  min-width:9.2ch;                 /* "PINTURA ELETROSTÁTICA" cabe; "AÇO" não encolhe */
  transition:opacity .28s ease,transform .28s ease
}
@media(max-width:900px){
  /* 390px: header apertado. O logo não pode empurrar o hambúrguer, então o
     texto encolhe e a reserva acompanha. */
  .hdr .logo{font-size:15px;min-width:0}
  .logo-rot{min-width:8ch;font-size:12px}
  .logo-txt{overflow:hidden}
}
@media(max-width:400px){.logo-rot{min-width:6.5ch;font-size:10.5px}}