/* =========================================================================
   Barra de webs
   Tira estrecha encima de la cabecera con los iconos de las otras tiendas.
   ========================================================================= */
.barrawebs{
  width:100%;
  overflow:hidden;
  max-height:200px;                 /* de sobra: solo esta para poder animar */
  transition:max-height .25s ease;
  /* Que el navegador no intente "sujetar" la pagina cuando la barra se abre o
     se cierra: si lo hace, mueve el scroll y la barra se pelea consigo misma. */
  overflow-anchor:none;
}
/* Se esconde con max-height y no con un margen negativo fijo: asi da igual
   que la barra sea de una linea o de dos, siempre se cierra del todo. */
.barrawebs--oculta{ max-height:0; }

.barrawebs__tira{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  flex-wrap:wrap;
  min-height:34px;
  padding:0 8px;
}

.barrawebs__web{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:6px;
  text-decoration:none;
  opacity:.55;
  transition:opacity .15s ease, background .15s ease;
}
/* El color del recuadro lo elige rui en el back office y llega en la variable
   --bw-marca. El rgba de detras es solo el apano por si faltara. */
.barrawebs__web:hover,
.barrawebs__web:focus-visible{
  opacity:1;
  background:rgba(255,255,255,.12);
  background:var(--bw-marca, rgba(255,255,255,.12));
}
.barrawebs__web:focus-visible{ outline:2px solid #fff; outline-offset:-2px; }

.barrawebs__web img{
  max-width:20px;
  max-height:20px;
  display:block;
  filter:grayscale(1) brightness(2.2);
}
.barrawebs__web:hover img,
.barrawebs__web--actual img{ filter:none; }

.barrawebs__web span{
  font:700 11px/1 Inter,system-ui,sans-serif;
  letter-spacing:.06em;
  color:#fff;
  text-transform:uppercase;
}

/* La web en la que estas: destacada y sin transparencia */
.barrawebs__web--actual{
  opacity:1;
  background:rgba(255,255,255,.16);
  background:var(--bw-marca, rgba(255,255,255,.16));
}

@media (max-width:767.98px){
  .barrawebs--solo-pc{ display:none; }
}