/* ============================================================
   LA WEB EN COMPUTADORA

   Todo lo de acá vive dentro de un @media (min-width: 1024px), así que en el
   teléfono y en la tablet de pie este archivo no hace NADA: el celular se sigue
   viendo exactamente igual que antes.

   El problema que arregla: en una pantalla de computadora la barra de arriba
   (logo, chat, carrito) se estiraba de borde a borde —1416 px en una pantalla
   de 1440— mientras el contenido de la página quedaba en una columna centrada.
   Se veía como una app de celular abierta en grande. Ahora la barra tiene el
   mismo ancho máximo que el catálogo (1170 px) y queda centrada, igual en todas
   las páginas de la tienda, así que al pasar de una a otra no "salta".

   El acomodo de cada página (la ficha en dos columnas, el carrito con el
   resumen al lado, etc.) está en el <style> de esa página, junto al resto de
   su CSS, para que quien la edite lo vea ahí mismo.
   ============================================================ */
@media (min-width: 1024px) {
    /* `body > nav.navbar` además de `body > nav`: el rastreo le pone el ancho a
       su barra con la clase .navbar, que pesa más que un `nav` suelto. */
    body > nav,
    body > nav.navbar {
        width: calc(100% - 24px);
        max-width: 1170px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}