/* AJUSTES DE ANCHO DE LA BARRA DE ARRIBA

   Va DESPUES de menu.css y de buscar.css: son correcciones que los pisan.

   EL PROBLEMA: al sumar "Insumos y repuestos" el menu no entraba en un
   renglon y los rotulos de dos palabras se partian ("Cómo / comprar",
   "Sobre / nosotros"), alineados a la izquierda. Partido y desalineado se lee
   como si fueran items distintos, no como un rotulo de dos palabras.

   LA SOLUCION va en tres partes, en este orden:

   1. Se saca la lupa. El buscador todavia no se usa y ocupa 38px al lado del
      idioma. Es lo mas barato de recuperar y no se pierde nada: el dia que se
      use se borra la primera regla de este archivo y vuelve.

   2. Se aprieta lo de los costados. El logo pierde el margen grande que tenia
      contra el menu y los controles de la derecha (idioma y cuenta) se juntan
      entre si. Todo ese aire suelto pasa a ser lugar para los rotulos.

   3. Recien ahi los rotulos se fuerzan a UNA sola linea (nowrap). Sin los dos
      pasos de arriba, nowrap solo habria empujado el menu contra el idioma.

   Y por si algun dia igual llegara a partirse (un rotulo nuevo mas largo, un
   zoom alto), queda el centrado como red: partido pero centrado se sigue
   leyendo como una sola cosa. */

/* 1 ---- fuera la lupa ---- */
.lupa{display:none !important}

/* 2 ---- menos aire a los costados ---- */
header .wrap.nav{padding-left:20px;padding-right:20px;gap:0}
header .brand{margin-right:26px;flex:none}
/* El idioma pegado a la cuenta: son dos iconos, no dos secciones. */
.lang{margin-right:0}

/* 3 ---- los rotulos, en un solo renglon ---- */
.nav ul{gap:21px;flex-wrap:nowrap}
.nav ul>li{flex:none}
.nav ul>li>a,.dtrig{white-space:nowrap;text-align:center;justify-content:center}

/* Franja intermedia: entre que el menu deja de entrar comodo y que aparece el
   burger (1000px), se achica la letra y el espacio en vez de partir renglones. */
@media(max-width:1240px){
  .nav ul{gap:15px}
  .nav ul>li>a,.dtrig{font-size:13.2px}
  header .brand{margin-right:18px}
}
@media(max-width:1090px){
  .nav ul{gap:11px}
  .nav ul>li>a,.dtrig{font-size:12.6px}
  /* La flechita de los desplegables se pega al texto. */
  .nav ul>li>a,.dtrig{gap:5px}
}

/* En celular manda el burger: la lista vuelve a ser vertical, a ancho
   completo y alineada a la izquierda, que es como se lee una lista. Todo lo
   de arriba se desarma aca. */
@media(max-width:1000px){
  .nav ul{flex-wrap:wrap;gap:0}
  .nav ul>li{flex:auto}
  .nav ul>li>a,.dtrig{white-space:normal;text-align:left;justify-content:flex-start;
    font-size:14px}
  header .wrap.nav{padding-left:16px;padding-right:16px}
  header .brand{margin-right:0}
}