/* ===== VCL — ícones no lugar dos emojis + logo sem o quadrado de foco (03/08) ===== */

/* O SVG herda a cor e o tamanho de onde estava o emoji (1em), então cada lugar
   mantém a proporção que já tinha: selo pequeno, card grande, etapa média. */
.vcl-ico{
  width:1em; height:1em;
  display:inline-block; vertical-align:-.14em;
  flex:none;
}
.vcl-icowrap{ display:inline-flex; align-items:center; gap:.5em; }
/* quando o emoji era o único conteúdo (cards de transporte, serviços, etapas),
   o wrapper não deve criar espaço extra */
.vcl-icowrap:empty{ display:none }

/* nos círculos/quadrados coloridos o ícone respira melhor um pouco menor */
.w-16 > .vcl-icowrap .vcl-ico,
.w-14 > .vcl-icowrap .vcl-ico{ width:.86em; height:.86em }

/* ---- logo VCL: tirar o quadrado que aparecia ao clicar ----
   Mantém o contorno para quem navega por teclado (:focus-visible), que é o
   comportamento acessível — some só o quadrado do clique de mouse/toque. */
nav button, nav a, .vcl-brandwrap button, .vcl-brandwrap a{
  -webkit-tap-highlight-color:transparent;
}
nav button:focus:not(:focus-visible),
nav a:focus:not(:focus-visible),
.vcl-brandwrap button:focus:not(:focus-visible),
.vcl-brandwrap a:focus:not(:focus-visible){
  outline:none !important;
  box-shadow:none !important;
}
/* o botão da logo é só a imagem: nunca precisa de moldura */
.vcl-brandwrap button, nav button:has(> img), nav button:has(.brand-logo){
  outline:none !important; box-shadow:none !important; border:0 !important;
}