/* ============================================================================
   overrides.css — ajustes visuales del MENÚ (header del sitio)
   ============================================================================

   QUÉ ES ESTO
   Esta hoja se carga DESPUÉS de todas las demás, así que lo que se escriba
   aquí manda sobre el estilo de la página. Sirve para ajustar el menú sin
   tocar las plantillas y sin saber Tailwind: es CSS normal.

   Guía completa, paso a paso: GUIA-MENU-CSS.md (en la raíz del proyecto).

   ----------------------------------------------------------------------------
   LAS 2 REGLAS. No son burocracia: cada una evita un problema concreto.
   ----------------------------------------------------------------------------

   1) Selecciona por el # de la lista de abajo. NUNCA por clases sueltas.

        BIEN   #site-nav { gap: 24px; }
        MAL    .gap-2   { gap: 24px; }

      Las clases tipo `.gap-2`, `.flex` o `.px-4` están compartidas por TODA la
      web: cambiarlas aquí mueve pantallas que ni siquiera estás viendo.

   2) Toda regla va dentro de un bloque de ancho (los tres de más abajo).

      Una regla suelta aplica a los tres diseños, incluido el celular, donde el
      menú es completamente distinto. Escribirla dentro del bloque correcto es
      lo que evita arreglar el escritorio y romper el móvil.

   ----------------------------------------------------------------------------
   NOMBRES QUE PUEDES USAR (todos existen en la página; hay un test que lo fija)
   ----------------------------------------------------------------------------

     #site-header       El menú completo (las dos filas juntas).
     #header-row-1      Fila de arriba: logo · buscador · contacto.
     #header-logo       El logo (el enlace que lo envuelve).
     #header-row-2      Fila de abajo en tableta/móvil (contacto + buscador).
                        En escritorio no existe como fila: sus hijos suben a la
                        de arriba.
     #header-search-wrap  La caja del buscador.
     #header-search       El campo de texto del buscador.
     #site-nav          La barra de enlaces (Inicio, Búsqueda inteligente,
                        Comprar autos…). Solo existe en escritorio, y hoy es
                        UNA sola fila repartida de extremo a extremo (antes
                        había un segundo grupo, #site-nav-right, que ya no
                        existe).
     #nav-drawer        El panel que se abre con el botón ☰ (tableta y móvil).

   Para llegar a los enlaces de dentro se combina, por ejemplo:

        #site-nav a      { ... }   /* todos los enlaces del menú   */
        #site-nav a i    { ... }   /* los iconos de esos enlaces   */
        #site-nav a span { ... }   /* el texto de esos enlaces     */

   ¿Necesitas apuntar a algo que no está en la lista? Pídelo y se le agrega un
   nombre. Es un cambio de un minuto y es mejor que buscarle la vuelta.

   ----------------------------------------------------------------------------
   NO HACE FALTA `!important`. Si algo no se aplica, casi siempre es que la
   regla quedó fuera de su bloque de ancho, o que el nombre está mal escrito.
   Avisa antes de agregarlo: en esta web `!important` congela la propiedad en
   los tres diseños a la vez y rompe el celular en silencio.
   ==========================================================================*/


/* ==========================================================================
   ESCRITORIO — 1280px o más
   Aquí el menú son dos filas: logo+buscador arriba, enlaces abajo.
   ========================================================================== */
@media (min-width: 1280px) {

  /* Escribe aquí. Ejemplo (borrar):
  #site-nav {
    gap: 24px;
  }
  */

}


/* ==========================================================================
   TABLETA — de 768px a 1279px
   Los enlaces NO se ven: viven dentro del panel ☰ (#nav-drawer).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {

  /* Escribe aquí. */

}


/* ==========================================================================
   MÓVIL — menos de 768px
   Ojo: el chat vive debajo del menú. Cada píxel que crece el menú se lo quita
   a la conversación.
   ========================================================================== */
@media (max-width: 767px) {

  /* Escribe aquí. */

}