@media (max-width: 992px) {
    
    /* ==================================================================== */
    /*                        HEADER Y NAVEGACIÓN                         */
    /* ==================================================================== */
    body {
        padding-top: 150px; /* Espacio para cabecera de 2 filas */
    }

    .segunda-barra {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 20px;
    }

    .barra-superior{
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.577);
        margin-bottom: -50px;
    }
    .logo {
        height: 60px;
    }
    .busqueda {
        order: 1; /* Manda la búsqueda a la siguiente línea */
        width: 100%;
        margin-top: 10px;
    }
    /* El contenedor de los iconos ahora se centra */
    .navegacion-tienda {
        order: 0; /* Asegura que se quede arriba */
    }

    /* ==================================================================== */
    /*                       contenedor de productos                       */
    /* ==================================================================== */
    .contenido-principal {
        padding: 2%;
        /* --- CAMBIO ---: El layout principal vuelve a ser de una columna */
        grid-template-columns: 1fr;
        row-gap: 30px; /* Puedes ajustar este valor a tu gusto */
        column-gap: 0;
        display: block;
    }
    .escaparate-productos {
        /* --- CAMBIO ---: Ya no necesita estar en una columna específica del grid */
        grid-column: auto;
        margin-top: 10px;
    }

    /* estilos del panel de filtrado */ 
    .panel-filtros {
        position: static;
        width: 100%;
        margin-top: 1%;
        box-shadow: 0 15px 15px rgba(0, 0, 0, 0.6); /* Sombra más sutil */
    }

    .opciones-filtro {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columnas para categorías */
        gap: 15px;
    }

    #contenedor-productos.vista-cuadricula {
        /* --- CAMBIO ---: 3 columnas para los productos */
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* ==================================================================== */
    /*      NUEVO: DISEÑO RESPONSIVO PARA VISTA DE LISTA (MÓVIL)         */
    /* ==================================================================== */


    .tarjeta-producto-lista {
        /* ¡CAMBIO CLAVE! La tarjeta ahora es un grid complejo */
        display: grid;
        grid-template-columns: 100px 1fr auto; /* Columna para imagen, info, y precio/botón */
        grid-template-rows: auto auto; /* Dos filas para organizar la info y el botón */
        gap: 0 15px; /* 0 de espacio vertical, 15px de espacio horizontal */
        padding: 12px;
        align-items: center; /* Centra todo verticalmente */
    }

    .imagen-producto-lista {
        width: 100px;
        height: 100px;
        grid-row: 1 / 3; /* La imagen ocupa las dos filas de alto */
        grid-column: 1 / 2;
    }

    .info-producto-lista {
        grid-row: 1 / 2; /* Ocupa la primera fila */
        grid-column: 2 / 3;
        align-self: center; /* Se centra en su celda */
        padding: 0;
    }
    
    .precio-accion-lista {
        grid-row: 1 / 2; /* El precio ocupa la primera fila, a la derecha */
        grid-column: 3 / 4;
        display: flex; /* Lo mantenemos flex para que se vea bien */
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
        width: 100%; 
    }

    .precio-accion-lista .precio {
        font-size: 1.4rem;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Ocultamos el botón del bloque de escritorio y la descripción */
    .precio-accion-lista .btn-add-to-cart,
    .info-producto-lista .descripcion-corta {
        display: none;
    }

    /* ¡NUEVO! Creamos una regla para el botón que se mostrará en móvil */
    .tarjeta-producto-lista .btn-add-to-cart {
        display: block; /* Aseguramos que el botón sea visible */
        grid-row: 2 / 3; /* Ocupa la SEGUNDA fila */
        grid-column: 2 / 4; /* Se expande desde la columna de info hasta el final */
        width: 60%; /* Ocupa todo el ancho de esas columnas */
        padding: 8px;
        margin-top: 10px;
        border-radius: 8px;
    }

    /* Ajustes de texto para que quepa mejor */
    .info-producto-lista .nombre-producto {
        font-size: 1.1rem;
        line-height: 1.2;
        margin: 0;
    }
    .detalles-extras-lista {
        font-size: 0.8rem;
        margin-top: 5px;
    }
}