style.css

Estilos Generales:

• *: Selecciona todos los elementos y les establece un margen y un relleno de 0.
• body: Establece el color de fondo, la fuente y la altura mínima para el cuerpo del documento.
• main: Establece un margen inferior para el elemento principal.

Barra de Navegación (Navbar):

• .navbar-light .navbar-nav .nav-link: Estilos para los enlaces de navegación.
• .navbar: Estilos para la barra de navegación.
• .bg-light: Estilos para el fondo de elementos con la clase bg-light.
• .btn-outline-danger: Estilos para los botones con la clase btn-outline-danger.
• .navbar-light .navbar-toggler: Estilos para el botón de navegación en vistas pequeñas.
• .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover: Estilos para los enlaces de navegación al enfocar o pasar el ratón por encima.

Botones de Navegación (Navbar Buttons):

• .btn-j: Estilos para los botones con la clase btn-j.
• **.btn-j:focus:after, .btn-j:hover:after y .btn-j:after: Estilos para efectos visuales en los botones.

Banner Gigante (Similar a un Carrusel):

• .imagenCarrusel: Estilos para el contenedor del carrusel.
• .marquee: Estilos para el efecto de desplazamiento en el carrusel.
• .slide: Estilos para cada diapositiva del carrusel.
• .slide img: Estilos para las imágenes en cada diapositiva.
• @keyframes slide-x: Animación para el desplazamiento de las diapositivas.

Medios de Comunicación (Media Queries):

• @media (max-width: 769px): Estilos específicos para dispositivos con un ancho máximo de 769px.
• .carrousel-button:hover: Estilos para botones dentro del carrusel al pasar el ratón por encima.

Checkbox:

• .container: Estilos para el contenedor de los checkbox.
• input[type="checkbox"]: Estilos para los checkbox.

Formulario de Filtro por Categoría:

• #div-formulario: Estilos para el formulario de filtrado.
• #div-formulario label: Estilos para las etiquetas dentro del formulario.
• input[type="checkbox"]:checked: Estilos para los checkbox cuando están seleccionados.

Búsqueda:

• **.search y #inputSearch: Estilos para la barra de búsqueda y su campo de entrada.

Espacio para las Cartas:

• #cartas: Estilos para el contenedor de las cartas.

Carta (Card):

• .container_card: Estilos para el contenedor de las cartas.
• .item: Estilos para cada elemento dentro del contenedor.
• .card: Estilos para las cartas individuales.
• .card-img-top: Estilos para la imagen en la parte superior de la carta.
• .card-body: Estilos para el cuerpo de la carta.
• .card-text: Estilos para el texto dentro de la carta.
• .card-price: Estilos para la sección de precios en la carta.
• .add-cart: Estilos para el botón de agregar al carrito.
• .item:hover: Estilos para las cartas al pasar el ratón por encima.

Pie de Página (Footer):

• footer: Estilos para el pie de página.
• #cohort-msg: Estilos para un mensaje específico en el pie de página.
• .fixed-bottom: Estilos para elementos fijados en la parte inferior.
• #div-msg: Estilos para un mensaje específico en el pie de página.

Página de Contacto:

• #formulario: Estilos para el formulario en la página de contacto.

Página de Estadísticas:

• #stats-table: Estilos para la tabla de estadísticas.
• table.blueTable: Estilos generales para una tabla con la clase blueTable.
• .italic: Estilos para texto en cursiva.

Carrusel en la Página Principal:

• .slider: Estilos para el contenedor del carrusel.
• .slider ul: Estilos para la lista no ordenada dentro del carrusel.
• .slider li: Estilos para los elementos de la lista.
• .slider img: Estilos para las imágenes dentro del carrusel.
• @keyframes cambio: Animación para el cambio de imágenes en el carrusel.

Carrito de Compras:

• #siete: Estilos para el contenedor del carrito de compras.
• .container-cart-products: Estilos para el contenedor de productos en el carrito.
• .cardCarrito: Estilos para la tarjeta de cada producto en el carrito.
• .titulo-producto-carrito: Estilos para el título del producto en el carrito.
• .precio-producto-carrito: Estilos para el precio del producto en el carrito.
• .cantidad-producto-carrito: Estilos para la cantidad del producto en el carrito.
• .cart-total: Estilos para el total del carrito.
• .pagar: Estilos para el botón de pagar.
• .total-pagar: Estilos para el total a pagar.
• .selector-cantidad: Estilos para el selector de cantidad.
• .cantidad: Estilos para la cantidad del producto.
• .carrito-item-cantidad: Estilos para el contenedor de la cantidad del producto.
• .btn-eliminar: Estilos para el botón de eliminar.
• .totalSocio: Estilos para el total para socios.
• .carritoDos: Estilos para el segundo contenedor en el carrito.
• .fa-plus, .fa-minus: Estilos para los iconos de más y menos.
• .total h1: Estilos para el título del total.
• .datosTDC: Estilos para los datos de la tarjeta de crédito.
• input[type="text"], input[type="email"], input[type="tel"], input[type="documento"], textarea, input[type="number"], input[type=password]: Estilos para diferentes tipos de campos de entrada.
• .subtotal: Estilos para el subtotal. -- .totalPago: Estilos para el total de pago.
• .facturaCorreo: Estilos para la factura enviada por correo.
• button: Estilos generales para los botones.
• #content: Estilos específicos para un contenido con el id content.
• .facturaCorreo: Estilos para el correo de factura.
• .modal: Estilos para una ventana modal.
• .modal-content: Estilos para el contenido de una ventana modal.
• .modal-content p: Estilos para los párrafos dentro del contenido modal.
• #Carrito: Estilos para el ícono del carrito.
• .close:hover, .close:focus: Estilos para el botón de cerrar al pasar el ratón por encima o enfocarlo.

Respuesta de Diseño (Media Queries):

• @media screen and (max-width: 689px): Estilos específicos para dispositivos con un ancho máximo de 689px, que ajustan la apariencia de varios componentes para adaptarse a pantallas más pequeñas.

Modal de la Tarjeta:

• .seis: Estilos para un contenedor con la clase seis.
• .ditailsContainer: Estilos para el contenedor de detalles.
• .detallesDos: Estilos para el contenedor que tiene dos detalles.
• .detalle-Producto: Estilos para el detalle del producto.
• .img-product: Estilos para la imagen del producto.
• .t-detalle h1: Estilos para el título en los detalles.
• .detalles-arrayProducto: Estilos para el contenedor que tiene un arreglo de detalles del producto.
• .lista-detalles: Estilos para la lista de detalles.
• .precioProducto: Estilos para el precio del producto en el modal.
• button: Estilos para los botones en general.
• button:hover: Estilos para los botones al pasar el ratón por encima.

Observaciones:

El archivo CSS proporcionado es bastante extenso y cubre estilos para una amplia variedad de componentes en una página web. Esto incluye la barra de navegación, botones, carrusel, carrito de compras, modales, tarjetas, y más. Los estilos están organizados de manera lógica y hacen uso de media queries para garantizar una experiencia de usuario adecuada en diferentes tamaños de pantalla. Además, hay un uso extensivo de clases y IDs específicos para estilizar componentes individuales, lo que proporciona una gran flexibilidad y personalización en el diseño.