:root {
         --primary: #2e7d32;
         --primary-light: #4caf50;
         --primary-dark: #1b5e20;
         --secondary: #ff9800;
         --light: #f9f9f9;
         --dark: #333;
         --gray: #757575;
         --light-gray: #f5f5f5;
         --border: #e0e0e0;
         --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         --transition: all 0.3s ease;
     }

     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }

     body {
         background-color: #f8f9fa;
         color: var(--dark);
         line-height: 1.6;
     }

     .container {
         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 20px;
     }

     /* Header */
     header {
         background-color: white;
         box-shadow: var(--shadow);
         position: sticky;
         top: 0;
         z-index: 1000;
     }

     .copyright {
         text-align: center;
         margin-top: 40px;
         padding-top: 20px;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         color: #aaa;
         font-size: 14px;
     }


     .header-content {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 15px 0;
     }

     .header-left {
         display: flex;
         align-items: center;
         gap: 20px;
     }

     /* Botón hamburguesa */
     .hamburger-btn {
         display: none;
         background: none;
         border: none;
         font-size: 1.5rem;
         color: #ff8b35;
         cursor: pointer;
         width: 40px;
         height: 40px;
         border-radius: 4px;
         transition: background-color 0.3s ease;
     }

     .hamburger-btn:hover {
         background-color: var(--light-gray);
     }

     .logo {

         align-items: center;

         flex-direction: column;
     }

     .logo i {
         color: #ff9b00;
         font-size: 2.2rem;
     }

     .logo-text h1 {
         font-size: 1.8rem;
         color: #ff9b00;
     }

     .logo-text p {
         font-size: 0.9rem;
         color: var(--gray);
     }

     /* Logo con imagen */


     .logo-img {
         height: 110px;
         width: auto;
         max-width: 200px;
         object-fit: contain;
         transition: var(--transition);
         border-radius: 100px;
     }

     .category-img {
         height: 110px;
         width: auto;
         max-width: 200px;
         object-fit: contain;
         transition: var(--transition);
         border-radius: 100px;
     }

     .cart-icon {
         position: relative;
         cursor: pointer;
     }

     .cart-icon i {
         font-size: 1.8rem;
         color: #ff8b35;
     }

     .cart-count {
         position: absolute;
         top: -8px;
         right: -8px;
         background-color: #70c539;
         color: white;
         border-radius: 50%;
         width: 22px;
         height: 22px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 0.8rem;
         font-weight: bold;
     }

     /* Hero Section */
     .hero {
         position: relative;
         color: white;
         text-align: center;
         height: 60vh;
         /* Opcional: para que ocupe toda la pantalla */
         min-height: 600px;
         /* Altura mínima */
         overflow: hidden;
     }


     .btn {
         display: inline-block;
         background-color: var(--secondary);
         color: white;
         padding: 12px 30px;
         border-radius: 4px;
         text-decoration: none;
         font-weight: 600;
         border: none;
         cursor: pointer;
         transition: var(--transition);
     }

     .btn:hover {
         background-color: #e68900;
         transform: translateY(-2px);
     }

     .btn-primary {
         background-color: var(--primary);
     }

     .btn-primary:hover {
         background-color: var(--primary-dark);
     }

     /* Categories */
     .section-title {
         text-align: center;
         margin: 60px 0 30px;
         color: var(--primary);
         position: relative;
     }

     .section-title::after {
         content: '';
         position: absolute;
         width: 80px;
         height: 4px;
         background-color: var(--secondary);
         bottom: -10px;
         left: 50%;
         transform: translateX(-50%);
     }

     .categories {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 15px;
         margin-bottom: 40px;
         flex-direction: column;

     }

     /* ============================================
   CATEGORÍAS MEJORADAS
   ============================================ */

     .categories-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 30px;
         flex-wrap: wrap;
         gap: 20px;
     }

     .categories-desktop {
         display: flex;
         gap: 15px;
         flex-wrap: wrap;
     }

     .category-btn {
         padding: 12px 25px;
         background-color: white;
         border: 2px solid var(--border);
         border-radius: 30px;
         cursor: pointer;
         font-weight: 600;
         transition: var(--transition);
         color: var(--dark);
         display: flex;
         align-items: center;
         gap: 10px;
         white-space: nowrap;
     }

     .category-btn .category-img {
         width: 30px;
         height: 30px;
         border-radius: 50%;
         object-fit: cover;
     }

     .category-btn.active,
     .category-btn:hover {
         background-color: #ff9800;
         color: white;
         border-color: #e75900;
     }


     /* Products Grid */
     .products-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         gap: 25px;
         margin-bottom: 60px;
     }

     .product-card {
         background-color: white;
         border-radius: 8px;
         overflow: hidden;
         box-shadow: var(--shadow);
         transition: var(--transition);
     }

     .product-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
     }

     .product-img {
         height: 180px;
         background-color: var(--light-gray);
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--primary);
         font-size: 4rem;
     }

     .product-info {
         padding: 20px;
     }

     .product-title {
         font-size: 1.2rem;
         margin-bottom: 8px;
         color: var(--dark);
     }

     .product-desc {
         color: var(--gray);
         font-size: 0.9rem;
         margin-bottom: 15px;
         line-height: 1.4;
         /* Solo esto */
     }


     /* Botón cerrar */
.close-menu {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(108, 99, 255, 0.2);
    border: 1px solid rgba(108, 99, 255, 0.4);
    color: var(--text);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    font-size: 1.2rem;
}

.close-menu:hover {
    background: var(--accent);
    color: rgb(136, 129, 129);
    transform: rotate(90deg);
}

     .product-footer {
         
         justify-content: space-between;
         align-items: center;
     }

     .product-price {
         font-size: 1.4rem;
         font-weight: 700;
         color: var(--primary);
     }

     .add-to-cart {
         background-color: var(--primary-light);
         color: white;
         border: none;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: var(--transition);
     }

     .add-to-cart:hover {
         background-color: var(--primary);
     }

     /* Cart Sidebar */
     .cart-sidebar {
         position: fixed;
         top: 0;
         right: -400px;
         width: 380px;
         height: 100vh;
         background-color: white;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
         z-index: 2000;
         transition: right 0.4s ease;
         display: flex;
         flex-direction: column;
     }

     .cart-sidebar.active {
         right: 0;
     }

     .cart-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 20px;
         border-bottom: 1px solid var(--border);
     }

     .cart-header h3 {
         color: var(--primary);
         font-size: 1.5rem;
     }

     .close-cart {
         background: none;
         border: none;
         font-size: 1.5rem;
         color: var(--gray);
         cursor: pointer;
     }

     .cart-items {
         
         padding: 20px;
         overflow-y: auto;
     }

     .cart-item {
         display: flex;
         align-items: center;
         padding: 15px 0;
         border-bottom: 1px solid var(--border);
     }

     .cart-item-img {
         width: 60px;
         height: 60px;
         background-color: var(--light-gray);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-right: 15px;
         color: var(--primary);
         font-size: 1.8rem;
     }

     .cart-item-info {
         flex: 1;
     }

     .cart-item-title {
         font-weight: 600;
         margin-bottom: 5px;
     }

     .cart-item-price {
         color: var(--primary);
         font-weight: 600;
     }

     .cart-item-actions {
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .cart-item-quantity {
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .quantity-btn {
         background-color: var(--light-gray);
         border: none;
         width: 28px;
         height: 28px;
         border-radius: 4px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
     }

     .quantity-value {
         min-width: 30px;
         text-align: center;
     }

     .remove-item {
         color: #f44336;
         background: none;
         border: none;
         cursor: pointer;
         font-size: 1.2rem;
     }

     .cart-footer {
         padding: 20px;
         border-top: 1px solid var(--border);
     }

     .cart-total {
         display: flex;
         justify-content: space-between;
         margin-bottom: 20px;
         font-size: 1.3rem;
         font-weight: 700;
         color: var(--primary);
     }

     .cart-empty {
         text-align: center;
         padding: 40px 20px;
         color: var(--gray);
     }

     .cart-empty i {
         font-size: 3rem;
         margin-bottom: 15px;
         color: var(--light-gray);
     }

     /* Checkout Form */
     .checkout-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.7);
         z-index: 3000;
         display: none;
         align-items: center;
         justify-content: center;
     }

     .checkout-overlay.active {
         display: flex;
     }

     .checkout-form {
         background-color: white;
         width: 90%;
         max-width: 700px;
         max-height: 90vh;
         overflow-y: auto;
         border-radius: 8px;
         padding: 30px;
     }

     .form-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 25px;
     }

     .form-header h3 {
         color: var(--primary);
         font-size: 1.8rem;
     }

     .close-form {
         background: none;
         border: none;
         font-size: 1.5rem;
         color: var(--gray);
         cursor: pointer;
     }

     .form-group {
         margin-bottom: 20px;
     }

     .form-row {
         display: flex;
         gap: 20px;
     }

     .form-row .form-group {
         flex: 1;
     }

     .form-label {
         display: block;
         margin-bottom: 8px;
         font-weight: 600;
         color: var(--dark);
     }

     .form-input,
     .form-select,
     .form-textarea {
         width: 100%;
         padding: 12px 15px;
         border: 1px solid var(--border);
         border-radius: 4px;
         font-size: 1rem;
     }

     .form-textarea {
         resize: vertical;
         min-height: 100px;
     }

     .payment-options {
         display: flex;
         flex-wrap: wrap;
         gap: 15px;
         margin-top: 10px;
     }

     .payment-option {
         flex: 1;
         min-width: 150px;
     }

     .payment-option input {
         display: none;
     }

     .payment-option label {
         display: block;
         padding: 15px;
         background-color: var(--light-gray);
         border-radius: 4px;
         text-align: center;
         cursor: pointer;
         transition: var(--transition);
     }

     .payment-option input:checked+label {
         background-color: var(--primary-light);
         color: white;
     }

     .form-actions {
         display: flex;
         justify-content: space-between;
         margin-top: 30px;
     }

     /* Footer */
     footer {
         background-color: #1e1e1e;
         color: white;
         padding: 50px 0 20px;
         margin-top: 60px;
     }

     .footer-content {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 40px;
         margin-bottom: 40px;
     }

     .footer-section h4 {
         font-size: 1.3rem;
         margin-bottom: 20px;
         position: relative;
         padding-bottom: 10px;
     }

     .footer-section h4::after {
         content: '';
         position: absolute;
         width: 50px;
         height: 3px;
         background-color: var(--secondary);
         bottom: 0;
         left: 0;
     }

     .footer-section p,
     .footer-section a {
         color: #ddd;
         margin-bottom: 10px;
         display: block;
         text-decoration: none;
         transition: var(--transition);
     }

     .footer-section a:hover {
         color: var(--secondary);
         padding-left: 5px;
     }

     .social-icons {
         display: flex;
         gap: 15px;
         margin-top: 20px;
     }

     .social-icons a {
         width: 40px;
         height: 40px;
         background-color: rgba(255, 255, 255, 0.1);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .copyright {
         text-align: center;
         padding-top: 20px;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         color: #aaa;
         font-size: 0.9rem;
     }

     /* Overlay for cart and checkout */
     .overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         z-index: 1500;
         display: none;
     }

     .overlay.active {
         display: block;
     }

     /* Responsive */
     @media (max-width: 768px) {
         .hero h2 {
             font-size: 2.2rem;
         }

         .form-row {
             flex-direction: column;
             gap: 0;
         }

         .cart-sidebar {
             width: 100%;
             right: -100%;
         }

         .products-grid {
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         }


     }

     @media (max-width: 576px) {

         .hero {
             min-height: 350px;
         }

         .products-grid {
             grid-template-columns: 1fr;
         }

         .categories {
             justify-content: flex-start;
             overflow-x: auto;
             padding-bottom: 10px;
         }

         .category-btn {
             white-space: nowrap;
         }
     }


     /* Estilos para productos sin precio */
     .product-no-price {
         background-color: #fff8e1;
         border: 2px dashed #ffc107;
     }

     .product-no-price .product-price {
         color: #ff9800;
         font-weight: 600;
         font-style: italic;
     }

     /* Estilos para productos con precio a consultar en el carrito */
     .cart-item-no-price {
         background-color: #fff8e1;
     }

     .cart-item-no-price .cart-item-price {
         color: #ff9800;
         font-style: italic;
     }

     /* Estilo para botón de agregar productos sin precio */
     .add-to-cart-no-price {
         background-color: #ff9800;
     }

     .add-to-cart-no-price:hover {
         background-color: #f57c00;
     }

     /* Estilo para total con productos a consultar */
     .cart-total-consult {
         color: #ff9800;
         font-style: italic;
     }

     /* Aviso de tienda cerrada */
     #storeClosedAlert {
         background-color: #ff9800;
         color: white;
         padding: 15px 0;
         text-align: center;
         position: sticky;
         top: 0;
         z-index: 999;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         animation: slideDown 0.5s ease;
     }

     @keyframes slideDown {
         from {
             transform: translateY(-100%);
             opacity: 0;
         }

         to {
             transform: translateY(0);
             opacity: 1;
         }
     }

     .alert-content {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 20px;
         flex-wrap: wrap;
     }

     .alert-content i {
         font-size: 2rem;
     }

     .alert-text h3 {
         margin: 0;
         font-size: 1.3rem;
     }

     .alert-text p {
         margin: 5px 0 0 0;
         font-size: 1rem;
     }

     /* Cuando la tienda está cerrada */
     .store-closed .hero .btn,
     .store-closed .add-to-cart,
     .store-closed #checkoutBtn,
     .store-closed .category-btn:not(.active) {
         opacity: 0.5;
         cursor: not-allowed;
         pointer-events: none;
     }

     .store-closed .category-btn.active {
         background-color: #666;
         border-color: #666;
     }

     /* Aviso de tienda cerrada */
     #storeClosedAlert {
         background-color: #ff9800;
         color: white;
         padding: 15px 0;
         text-align: center;
         position: sticky;
         top: 0;
         z-index: 999;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         animation: slideDown 0.5s ease;
     }

     @keyframes slideDown {
         from {
             transform: translateY(-100%);
             opacity: 0;
         }

         to {
             transform: translateY(0);
             opacity: 1;
         }
     }

     .alert-content {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 20px;
         flex-wrap: wrap;
     }

     .alert-content i {
         font-size: 2rem;
     }

     .alert-text h3 {
         margin: 0;
         font-size: 1.3rem;
     }

     .alert-text p {
         margin: 5px 0 0 0;
         font-size: 1rem;
     }

     /* Cuando la tienda está cerrada */
     .store-closed .hero .btn,
     .store-closed .add-to-cart,
     .store-closed #checkoutBtn,
     .store-closed .category-btn:not(.active) {
         opacity: 0.5;
         cursor: not-allowed;
         pointer-events: none;
     }

     .store-closed .category-btn.active {
         background-color: #666;
         border-color: #666;
     }

     /* ============================================
   MODAL DE TIENDA CERRADA
   ============================================ */

     .store-modal-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;

         z-index: 4000;
         display: flex;
         align-items: center;
         justify-content: center;
         animation: fadeIn 0.5s ease;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     .store-modal {
         background: white;
         border-radius: 16px;
         width: 90%;
         max-width: 500px;
         overflow: hidden;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
         animation: slideUp 0.5s ease;
         transform-origin: center;
     }

     @keyframes slideUp {
         from {
             transform: translateY(30px) scale(0.9);
             opacity: 0;
         }

         to {
             transform: translateY(0) scale(1);
             opacity: 1;
         }
     }

     .store-modal-header {
         background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
         padding: 30px 20px;
         text-align: center;
         color: white;
     }

     .store-modal-icon {
         font-size: 3rem;
         margin-bottom: 15px;
         color: rgba(255, 255, 255, 0.9);
         animation: pulse 2s infinite;
     }

     @keyframes pulse {
         0% {
             transform: scale(1);
         }

         50% {
             transform: scale(1.1);
         }

         100% {
             transform: scale(1);
         }
     }

     .store-modal-title {
         font-size: 1.8rem;
         margin: 0;
         font-weight: 700;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     }

     .store-modal-body {
         padding: 40px 30px;
         text-align: center;
     }

     .store-modal-content {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 20px;
     }

     .store-modal-main-icon {
         font-size: 4rem;
         color: #ff9800;
         margin-bottom: 10px;
         animation: rotate 10s linear infinite;
     }

     @keyframes rotate {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     .store-modal-message {
         font-size: 1.2rem;
         line-height: 1.6;
         color: #333;
         margin: 0;
         font-weight: 500;
     }

     .store-modal-info {
         background-color: #fff8e1;
         border-left: 4px solid #ffc107;
         padding: 15px;
         border-radius: 8px;
         margin-top: 20px;
         display: flex;
         align-items: center;
         gap: 10px;
         width: 100%;
     }

     .store-modal-info i {
         color: #ff9800;
         font-size: 1.2rem;
         flex-shrink: 0;
     }

     .store-modal-info span {
         color: #5d4037;
         font-size: 0.95rem;
         text-align: left;
         line-height: 1.5;
     }

     .store-modal-footer {
         background-color: #f5f5f5;
         padding: 20px;
         border-top: 1px solid #eee;
         text-align: center;
     }

     .store-modal-note {
         color: #666;
         font-size: 0.9rem;
         margin: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
     }

     .store-modal-note i {
         color: #2196f3;
         animation: spin 2s linear infinite;
     }

     @keyframes spin {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     /* Efecto de desenfoque para el fondo cuando el modal está activo */
     body.store-closed {
         overflow: hidden;
     }

     body.store-closed::before {
         content: '';
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.7);
         backdrop-filter: blur(5px);
         z-index: 3999;
         animation: fadeIn 0.5s ease;
     }

     /* Cuando la tienda está cerrada */
     body.store-closed .hero,
     body.store-closed #categorias,
     body.store-closed footer {
         filter: blur(3px);
         pointer-events: none;
         user-select: none;
     }

     body.store-closed .cart-sidebar,
     body.store-closed .checkout-overlay {
         display: none !important;
     }

     /* Deshabilitar interacciones cuando la tienda está cerrada */
     body.store-closed .hero .btn,
     body.store-closed .add-to-cart,
     body.store-closed #checkoutBtn,
     body.store-closed .category-btn,
     body.store-closed #cartIcon {
         pointer-events: none;
     }

     /* Responsive */
     @media (max-width: 768px) {
         .store-modal {
             width: 95%;
             margin: 20px;
         }

         .store-modal-header {
             padding: 25px 15px;
         }

         .store-modal-title {
             font-size: 1.5rem;
         }

         .store-modal-body {
             padding: 30px 20px;
         }

         .store-modal-main-icon {
             font-size: 3rem;
         }

         .store-modal-message {
             font-size: 1.1rem;
         }

         .store-modal-info {
             padding: 12px;
         }

         .store-modal-info span {
             font-size: 0.9rem;
         }
     }

     @media (max-width: 480px) {
         .store-modal {
             border-radius: 12px;
         }

         .store-modal-header {
             padding: 20px 15px;
         }

         .store-modal-icon {
             font-size: 2.5rem;
         }

         .store-modal-title {
             font-size: 1.3rem;
         }

         .store-modal-body {
             padding: 25px 15px;
         }

         .store-modal-main-icon {
             font-size: 2.5rem;
         }

         .store-modal-message {
             font-size: 1rem;
         }

         .store-modal-note {
             flex-direction: column;
             gap: 5px;
             font-size: 0.85rem;
         }
     }


     /* ============================================
   CARRUSEL DE IMÁGENES - HERO
   ============================================ */

     .slider-container {
         position: relative;
         width: 100%;
         height: 100%;
         overflow: hidden;
         border-radius: 0;
     }

     .slides {
         position: relative;
         width: 100%;
         height: 100%;
     }

     .slide {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.8s ease, visibility 0.8s;
     }

     .slide.active {
         opacity: 1;
         visibility: visible;
         z-index: 1;
     }

     .slide-content {
         width: 100%;
         height: 100%;
         background-size: cover !important;
         background-position: center !important;
         background-repeat: no-repeat !important;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         color: white;

     }

     /* Controles del carrusel */
     .slider-btn {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         background: rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(10px);
         border: 2px solid rgba(255, 255, 255, 0.3);
         color: white;
         width: 50px;
         height: 50px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         z-index: 10;
         transition: all 0.3s ease;
         font-size: 1.2rem;
     }

     .slider-btn:hover {
         background: rgba(255, 255, 255, 0.3);
         border-color: rgba(255, 255, 255, 0.5);
         transform: translateY(-50%) scale(1.1);
     }

     .prev-btn {
         left: 20px;
     }

     .next-btn {
         right: 20px;
     }

     /* Indicadores de puntos */
     .slider-indicators {
         position: absolute;
         bottom: 30px;
         left: 50%;
         transform: translateX(-50%);
         display: flex;
         gap: 12px;
         z-index: 10;
     }

     .indicator {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.5);
         cursor: pointer;
         transition: all 0.3s ease;
         border: 2px solid transparent;
     }

     .indicator.active {
         background: var(--secondary);
         transform: scale(1.2);
         border-color: white;
     }

     .indicator:hover {
         background: rgba(255, 255, 255, 0.8);
     }

     /* Animación de entrada para el contenido */
     .slide-content .container {
         animation: slideUp 0.8s ease 0.3s both;
     }

     @keyframes slideUp {
         from {
             opacity: 0;
             transform: translateY(30px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     /* Responsive para el carrusel */
     @media (max-width: 768px) {
         .slider-btn {
             width: 40px;
             height: 40px;
             font-size: 1rem;
         }

         .prev-btn {
             left: 10px;
         }

         .next-btn {
             right: 10px;
         }

         .slider-indicators {
             bottom: 20px;
         }

         .indicator {
             width: 10px;
             height: 10px;
         }

         .slide-content {
             padding: 60px 40px;
         }
     }

     @media (max-width: 576px) {
         .slider-btn {
             width: 36px;
             height: 36px;
         }

         .slide-content h2 {
             font-size: 2rem;
         }

         .slide-content p {
             font-size: 1rem;
         }
     }





     /* ============================================
   DARK MODE SYSTEM
   ============================================ */

     /* Variables para light mode (por defecto) */
     :root {
         --primary: #ed5411;
         --primary-light: #f35f24;
         --primary-dark: #d77f45;
         --secondary: #ffb74d;
         --secondary: #ff9800;
         --light: #f9f9f9;
         --dark: #333;
         --gray: #757575;
         --light-gray: #f5f5f5;
         --border: #e0e0e0;
         --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         --shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.3);
         --transition: all 0.3s ease;

         /* Backgrounds */
         --bg-primary: #ffffff;
         --bg-secondary: #f8f9fa;
         --bg-card: #ffffff;

         /* Text colors */
         --text-primary: #333333;
         --text-secondary: #757575;
         --text-light: #ffffff;

         /* Borders */
         --border-light: #e0e0e0;
         --border-dark: #424242;
     }

     /* Variables para dark mode */
     body.dark-mode {
         --primary: #ed5411;
         --primary-light: #f35f24;
         --primary-dark: #d77f45;
         --secondary: #ffb74d;
         --secondary: #ffb74d;
         --light: #121212;
         --dark: #f5f5f5;
         --gray: #b0b0b0;
         --light-gray: #1e1e1e;
         --border: #424242;
         --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

         /* Backgrounds */
         --bg-primary: #121212;
         --bg-secondary: #1e1e1e;
         --bg-card: #1e1e1e;

         /* Text colors */
         --text-primary: #f5f5f5;
         --text-secondary: #b0b0b0;

         /* Borders */
         --border-light: #424242;
     }

     /* Aplicar variables a elementos */
     body {
         background-color: var(--bg-primary);
         color: var(--text-primary);
         transition: background-color 0.3s ease, color 0.3s ease;
     }

     /* Header en dark mode */
     body.dark-mode header {
         background-color: var(--bg-card);
         border-bottom: 1px solid var(--border);
     }

     /* Product cards en dark mode */
     body.dark-mode .product-card {
         background-color: var(--bg-card);
         border: 1px solid var(--border);
     }

     body.dark-mode .product-info {
         background-color: var(--bg-card);
     }

     body.dark-mode .product-title {
         color: var(--text-primary);
     }

     body.dark-mode .product-desc {
         color: var(--text-secondary);
     }

     body.dark-mode .product-img {
         background-color: var(--bg-secondary);
     }

     /* Categories en dark mode */
     body.dark-mode .category-btn {
         background-color: var(--bg-card);
         border-color: var(--border);
         color: var(--text-primary);
     }

     body.dark-mode .category-btn.active,
     body.dark-mode .category-btn:hover {
         background-color: #ff9800;
         border-color: #e75900;
     }

     /* Cart sidebar en dark mode */
     body.dark-mode .cart-sidebar {
         background-color: var(--bg-card);
         border-left: 1px solid var(--border);
     }

     body.dark-mode .cart-header {
         border-bottom-color: var(--border);
     }

     body.dark-mode .cart-item {
         border-bottom-color: var(--border);
     }

     body.dark-mode .cart-item-img {
         background-color: var(--bg-secondary);
     }

     body.dark-mode .cart-footer {
         border-top-color: var(--border);
     }

     /* Checkout form en dark mode */
     body.dark-mode .checkout-form {
         background-color: var(--bg-card);
     }

     body.dark-mode .form-input,
     body.dark-mode .form-select,
     body.dark-mode .form-textarea {
         background-color: var(--bg-secondary);
         border-color: var(--border);
         color: var(--text-primary);
     }

     body.dark-mode .payment-option label {

         color: var(--text-primary);
     }

     body.dark-mode .quantity-btn {
         background-color: var(--primary-light);
     }

     /* Footer en dark mode */
     body.dark-mode footer {
         background-color: var(--bg-secondary);
         color: var(--text-primary);
     }

     body.dark-mode .footer-section p,
     body.dark-mode .footer-section a {
         color: var(--text-secondary);
     }

     body.dark-mode .social-icons a {
         background-color: var(--bg-card);
     }

     body.dark-mode .footer-section a:hover {
         color: var(--secondary);
         padding-left: 5px;
     }

     /* Modal de tienda cerrada en dark mode */
     body.dark-mode .store-modal {
         background-color: var(--bg-card);
         color: var(--text-primary);
     }

     body.dark-mode .store-modal-message {
         color: var(--text-primary);
     }

     body.dark-mode .store-modal-info {
         background-color: var(--bg-secondary);
         color: var(--text-secondary);
     }

     body.dark-mode .store-modal-footer {
         background-color: var(--bg-secondary);
         border-top-color: var(--border);
     }

     /* Carrusel en dark mode */
     body.dark-mode .slider-btn {
         background: rgba(0, 0, 0, 0.5);
         border-color: rgba(255, 255, 255, 0.2);
     }

     body.dark-mode .indicator {
         background: rgba(255, 255, 255, 0.3);
     }

     /* ============================================
   DARK MODE TOGGLE UI
   ============================================ */

     .header-right {
         display: flex;
         align-items: center;
         gap: 20px;
     }

     .dark-mode-toggle {
         position: relative;
         width: 60px;
         height: 30px;
         background-color: var(--light-gray);
         border-radius: 30px;
         cursor: pointer;
         transition: var(--transition);
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 10px;
         border: 2px solid var(--border);
     }

     .dark-mode-toggle i {
         font-size: 14px;
         z-index: 2;
         transition: var(--transition);
     }

     .dark-mode-toggle .fa-sun {
         color: #ff9800;
     }

     .dark-mode-toggle .fa-moon {
         color: #2196f3;
     }

     .toggle-slider {
         position: absolute;
         left: 4px;
         top: 50%;
         transform: translateY(-50%);
         width: 22px;
         height: 22px;
         background-color: white;
         border-radius: 50%;
         transition: transform 0.3s ease;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         z-index: 1;
     }

     body.dark-mode .dark-mode-toggle {
         background-color: #8e633800;
         border-color: #c7723d;
     }

     body.dark-mode .toggle-slider {
         transform: translate(26px, -50%);
         background-color: #5ec11d;
     }

     body.dark-mode .dark-mode-toggle .fa-sun {
         color: rgba(255, 255, 255, 0.5);
     }

     body.dark-mode .dark-mode-toggle .fa-moon {
         color: white;
     }

     /* Notificación de cambio de tema */
     .dark-mode-notification {
         position: fixed;
         bottom: 20px;
         right: 20px;
         background-color: var(--primary);
         color: white;
         padding: 12px 20px;
         border-radius: 8px;
         display: flex;
         align-items: center;
         gap: 10px;
         box-shadow: var(--shadow);
         z-index: 4000;
         transform: translateY(100px);
         opacity: 0;
         transition: transform 0.3s ease, opacity 0.3s ease;
     }

     .dark-mode-notification.show {
         transform: translateY(0);
         opacity: 1;
     }

     .dark-mode-notification i {
         font-size: 1.2rem;
     }

     /* ============================================
   MEJORAS ESPECÍFICAS PARA DARK MODE
   ============================================ */

     /* Mejorar contraste de texto */
     body.dark-mode .section-title {
         color: var(--primary-light);
     }

     body.dark-mode .cart-header h3 {
         color: var(--primary-light);
     }

     body.dark-mode .form-header h3 {
         color: var(--primary-light);
     }

     body.dark-mode .footer-section h4 {
         color: var(--text-primary);
     }

     /* Ajustar sombras para dark mode */
     body.dark-mode .product-card {
         box-shadow: var(--shadow-dark);
     }

     body.dark-mode .cart-sidebar {
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.4);
     }

     /* Ajustar overlay */
     body.dark-mode .overlay {
         background-color: rgba(0, 0, 0, 0.7);
     }

     body.dark-mode .checkout-overlay {
         background-color: rgba(0, 0, 0, 0.8);
     }

     /* Ajustar scrollbar para dark mode */
     body.dark-mode ::-webkit-scrollbar {
         width: 10px;
     }

     body.dark-mode ::-webkit-scrollbar-track {
         background: var(--bg-secondary);
     }

     body.dark-mode ::-webkit-scrollbar-thumb {
         background: var(--primary-dark);
         border-radius: 5px;
     }

     body.dark-mode ::-webkit-scrollbar-thumb:hover {
         background: var(--primary);
     }

     /* ============================================
   RESPONSIVE PARA DARK MODE TOGGLE
   ============================================ */

     @media (max-width: 768px) {
         .header-right {
             gap: 15px;
         }

         .dark-mode-toggle {
             width: 50px;
             height: 26px;
         }

         .toggle-slider {
             width: 18px;
             height: 18px;
         }

         body.dark-mode .toggle-slider {
             transform: translate(20px, -50%);
         }
     }

     @media (max-width: 576px) {
         .header-right {
             gap: 12px;
         }

         .dark-mode-toggle {
             width: 50px;
             height: 26px;
         }

         .dark-mode-toggle i {
             font-size: 12px;
         }

         .toggle-slider {
             width: 18px;
             height: 18px;
         }

         body.dark-mode .toggle-slider {
             transform: translate(20px, -50%);
         }
     }

     /* ============================================
   TRANSICIONES SUAVES PARA ELEMENTOS CRÍTICOS
   ============================================ */

     .product-card,
     .category-btn,
     .cart-sidebar,
     .checkout-form,
     .store-modal,
     footer,
     .slider-btn {
         transition: background-color 0.3s ease,
             border-color 0.3s ease,
             color 0.3s ease,
             transform 0.3s ease;
     }

     /* Transición específica para imágenes del carrusel */
     .slide-content {
         transition: background-image 0.5s ease;
     }


     .offer-badge {
         position: absolute;
         top: 10px;
         right: 10px;
         background-color: #ff9800;
         color: white;
         padding: 4px 8px;
         border-radius: 4px;
         font-size: 0.8rem;
         font-weight: bold;
         z-index: 2;
     }

     .product-card {
         position: relative;
         /* ... otros estilos existentes ... */
     }


     /* Agrega al style.css */

     .quantity-input-group {
         margin-bottom: 15px;
     }

     .quantity-input-group label {
         display: block;
         margin-bottom: 8px;
         font-weight: 500;
         color: #555;
     }

     .quantity-input-group input {
         width: 100%;
         padding: 10px;
         border: 1px solid #ddd;
         border-radius: 6px;
         font-size: 1rem;
     }

     .quantity-input-group input:focus {
         outline: none;
         border-color: #4caf50;
     }

     .cart-item-details {
         margin: 5px 0;
         font-size: 0.9rem;
         color: #666;
     }

     .cart-item-quantity-display {
         background: #f5f5f5;
         padding: 2px 8px;
         border-radius: 4px;
         font-size: 0.85rem;
     }

     /* Estilos para el input de cantidad con unidad */
     .quantity-with-unit {
         display: flex;
         align-items: center;
         margin-bottom: 15px;
     }

     .quantity-with-unit input {
         flex: 1;
         padding: 10px;
         border: 1px solid #ddd;
         border-radius: 6px 0 0 6px;
         border-right: none;
     }

     .quantity-with-unit .unit-display {
         padding: 10px 15px;
         background: #f5f5f5;
         border: 1px solid #ddd;
         border-radius: 0 6px 6px 0;
         color: #555;
         min-width: 100px;
         text-align: center;
     }

     .quantity-examples {
         font-size: 0.85rem;
         color: #666;
         margin-top: 5px;
         font-style: italic;
     }


     /* Agrega al archivo style.css */

     /* Estilos para imágenes en el carrito */
     .cart-item-img img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 8px;
     }

     /* Asegurar que el contenedor de la imagen mantenga su aspecto */
     .cart-item-img {
         width: 60px;
         height: 60px;
         background-color: var(--light-gray);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-right: 15px;
         overflow: hidden;
         /* Importante para que la imagen no se salga */
     }

     /* Estilo para cuando no hay imagen */
     .cart-item-img span {
         color: var(--primary);
         font-size: 1.8rem;
     }

     /* Mejora responsive para imágenes del carrito */
     @media (max-width: 768px) {
         .cart-item-img {
             width: 50px;
             height: 50px;
             min-width: 50px;
         }

         .cart-item-img span {
             font-size: 1.5rem;
         }
     }

     /* Para el modo oscuro */
     body.dark-mode .cart-item-img {
         background-color: var(--bg-secondary);
     }

     body.dark-mode .cart-item-img span {
         color: var(--primary-light);
     }

     /* Agrega al style.css */
     .item-select {
         background-color: white;
         border: 2px solid #e0e0e0;
         transition: all 0.3s ease;
     }

     .item-select:focus {
         border-color: var(--primary);
         box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
     }

     .item-quantity {
         margin-top: 10px;
     }

     /* Estilo para items en el carrito */
     .cart-item-option {
         font-size: 0.9rem;
         color: var(--primary);
         background: rgba(46, 125, 50, 0.1);
         padding: 4px 8px;
         border-radius: 4px;
         margin-left: 5px;
         display: inline-block;
     }


     /* Agrega al final de style.css */
     .item-select {
         background-color: white;
         border: 2px solid #e0e0e0;
         transition: all 0.3s ease;
         font-size: 1rem;
     }

     .item-select:focus {
         border-color: var(--primary);
         box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
         outline: none;
     }

     .item-quantity {
         margin-top: 10px;
         transition: all 0.3s ease;
     }

     /* Estilo para items en el carrito */
     .cart-item-option {
         font-size: 0.9rem;
         color: var(--primary);
         background: rgba(46, 125, 50, 0.1);
         padding: 4px 8px;
         border-radius: 4px;
         margin-left: 5px;
         display: inline-block;
     }

     /* Para modo oscuro */
     body.dark-mode .item-select {
         background-color: var(--bg-secondary);
         border-color: var(--border);
         color: var(--text-primary);
     }

     body.dark-mode .item-select:focus {
         border-color: var(--primary-light);
     }

     /* Mejorar aspecto del select */
     .item-select option {
         padding: 10px;
         font-size: 1rem;
     }

     /* ============================================
   ESTILOS PARA DESCRIPCIÓN CON "VER MÁS"
   ============================================ */

     .product-desc {
         color: var(--gray);
         font-size: 0.9rem;
         margin-bottom: 5px;
         line-height: 1.5;
         position: relative;
         transition: max-height 0.3s ease;
     }

     /* Estado truncado (colapsado) */
     .product-desc.truncated {
         max-height: 4.5em;
         /* Aproximadamente 3 líneas */
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         text-overflow: ellipsis;
     }

     /* Estado expandido */
     .product-desc:not(.truncated) {
         max-height: none;
         overflow: visible;
         display: block;
         -webkit-line-clamp: unset;
     }

     .read-more-btn {
         background: none;
         border: none;
         color: var(--primary);
         cursor: pointer;
         font-size: 0.85rem;
         padding: 5px 0;
         margin: 5px 0 10px 0;
         display: flex;
         align-items: center;
         gap: 5px;
         font-weight: 600;
         transition: color 0.3s ease;
     }

     .read-more-btn:hover {
         color: var(--primary-dark);
     }

     body.dark-mode .read-more-btn {
         color: var(--primary-light);
     }

     body.dark-mode .read-more-btn:hover {
         color: var(--secondary);
     }

     .read-more-btn i {
         font-size: 0.8rem;
         transition: transform 0.3s ease;
     }

     .read-more-btn.expanded i {
         transform: rotate(180deg);
     }

     /* Ajuste para el contenedor de la descripción */
     .description-container {
         margin-bottom: 10px;
     }

     .read-more-container {
         margin: 0 0 10px 0;
     }


     /* ============================================
   ESTILOS PARA ÍTEMS DE PRODUCTO CON MÚLTIPLES OPCIONES
   ============================================ */

     .product-items-container {
         margin-bottom: 20px;
     }

     .product-item-option {
         border: 1px solid var(--border);
         border-radius: 8px;
         padding: 12px;
         margin-bottom: 10px;
         background: rgba(46, 125, 50, 0.05);
         transition: all 0.3s ease;
     }

     .product-item-option:hover {
         border-color: var(--primary);
         background: rgba(46, 125, 50, 0.08);
     }

     .item-quantity-input {
         width: 50px;
         height: 30px;
         border: 1px solid var(--border);
         border-left: none;
         border-right: none;
         text-align: center;
         font-size: 0.9rem;
         background: white;
     }

     .item-quantity-input:focus {
         outline: none;
         border-color: var(--primary);
     }

     .item-quantity-btn {
         background: var(--light-gray);
         border: 1px solid var(--border);
         width: 30px;
         height: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.2s ease;
     }

     .item-quantity-btn:hover {
         background: var(--border);
     }

     .item-quantity-btn.minus {
         border-radius: 4px 0 0 4px;
     }

     .item-quantity-btn.plus {
         border-radius: 0 4px 4px 0;
     }

     .add-item-btn {
         background: var(--primary);
         color: white;
         border: none;
         padding: 6px 12px;
         border-radius: 4px;
         cursor: pointer;
         font-size: 0.9rem;
         transition: background 0.3s ease;
         white-space: nowrap;
     }

     .add-item-btn:hover {
         background: var(--primary-dark);
     }

     .add-all-items-btn {
         background: var(--secondary);
         color: white;
         border: none;
         padding: 10px 20px;
         border-radius: 4px;
         cursor: pointer;
         font-weight: 500;
         transition: background 0.3s ease;
     }

     .add-all-items-btn:hover {
         background: #e68900;
     }

     /* Para modo oscuro */
     body.dark-mode .product-item-option {
         background: rgba(76, 175, 80, 0.08);
         border-color: var(--border-dark);
     }

     body.dark-mode .item-quantity-input {
         background: var(--bg-secondary);
         color: var(--text-primary);
         border-color: var(--border-dark);
     }

     body.dark-mode .item-quantity-btn {
         background: var(--bg-secondary);
         border-color: var(--border-dark);
         color: var(--text-primary);
     }

     body.dark-mode .product-item-option:hover {
         border-color: var(--primary-light);
         background: rgba(76, 175, 80, 0.12);
     }



     /* ============================================
   MENÚ MÓVIL
   ============================================ */

     .mobile-menu-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         z-index: 1990;
         display: none;
     }

     .mobile-menu-overlay.active {
         display: block;
     }

     .mobile-menu {
         position: fixed;
         top: 0;
         left: -300px;
         width: 280px;
         height: 100%;
         background-color: white;
         z-index: 2000;
         transition: left 0.3s ease;
         display: flex;
         flex-direction: column;
         box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
     }

     .mobile-menu.active {
         left: 0;
     }

     .mobile-menu-header {
         padding: 20px;
         border-bottom: 1px solid var(--border);
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .mobile-menu-header h3 {
         color: var(--primary);
         margin: 0;
         font-size: 1.3rem;
     }

     .close-menu {
         background: none;
         border: none;
         font-size: 1.2rem;
         color: var(--gray);
         cursor: pointer;
         width: 30px;
         height: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 4px;
         transition: background-color 0.3s ease;
     }

     .close-menu:hover {
         background-color: var(--light-gray);
     }

     .mobile-categories {
         flex: 1;
         padding: 20px;
         overflow-y: auto;
     }

     .mobile-category-btn {
         display: flex;
         align-items: center;
         gap: 15px;
         width: 100%;
         padding: 15px;
         background: none;
         border: none;
         border-radius: 8px;
         cursor: pointer;
         transition: background-color 0.3s ease;
         margin-bottom: 10px;
         text-align: left;
         color: var(--dark);
         font-weight: 500;
     }

     .mobile-category-btn:hover {
         background-color: var(--light-gray);
     }

     .mobile-category-btn.active {
         background-color: var(--primary);
         color: white;
     }

     .mobile-category-img {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         object-fit: cover;
     }


     /* ============================================
   INFORMACIÓN DE PRODUCTOS
   ============================================ */

     .products-info {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 25px;
         padding: 15px;
         background-color: white;
         border-radius: 8px;
         box-shadow: var(--shadow);
         flex-wrap: wrap;
         gap: 15px;
     }

     .products-count {
         font-size: 1rem;
         color: var(--gray);
         font-weight: 500;
         margin: 0;
     }

     .products-sort {
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .products-sort label {
         font-weight: 500;
         color: var(--dark);
     }

     .sort-select {
         padding: 8px 12px;
         border: 1px solid var(--border);
         border-radius: 4px;
         background-color: white;
         color: var(--dark);
         font-size: 0.9rem;
         cursor: pointer;
         transition: border-color 0.3s ease;
     }

     .sort-select:focus {
         outline: none;
         border-color: var(--primary);
     }


     /* ============================================
   MEJORAS EN PAGINACIÓN
   ============================================ */

     .pagination-container {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 15px;
         margin: 40px 0;
         padding: 20px;
         background-color: white;
         border-radius: 8px;
         box-shadow: var(--shadow);
         transition: all 0.3s ease;
     }

     .pagination-container:hover {
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
     }

     .pagination-btn {
         padding: 12px 24px;
         background-color: var(--primary);
         color: white;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-weight: 600;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         gap: 8px;
         min-width: 120px;
         justify-content: center;
         box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
     }

     .pagination-btn:hover:not(:disabled) {
         background-color: var(--primary-dark);
         transform: translateY(-2px);
         box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
     }

     .pagination-btn:active:not(:disabled) {
         transform: translateY(0);
     }

     .pagination-btn:disabled {
         background-color: var(--light-gray);
         color: var(--gray);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
     }

     .page-numbers {
         display: flex;
         gap: 5px;
     }

     .page-number {
         width: 42px;
         height: 42px;
         display: flex;
         align-items: center;
         justify-content: center;
         border: 2px solid var(--border);
         border-radius: 4px;
         background-color: white;
         color: var(--dark);
         cursor: pointer;
         font-weight: 600;
         transition: all 0.3s ease;
         font-size: 0.95rem;
     }

     .page-number:hover:not(.active):not(.disabled) {
         background-color: var(--light-gray);
         border-color: var(--primary-light);
         transform: translateY(-2px);
     }

     /* RESALTADO DE PÁGINA ACTUAL */
     .page-number.active {
         background-color: var(--primary);
         color: white;
         border-color: var(--primary);
         transform: scale(1.05);
         box-shadow: 0 4px 8px rgb(85 237 7 / 85%);
     }

     .page-number.active:hover {
         background-color: var(--primary-dark);
         border-color: var(--primary-dark);
     }

     .page-number.disabled {
         color: var(--gray);
         cursor: not-allowed;
         background-color: var(--light-gray);
         opacity: 0.6;
     }

     .page-dots {
         width: 42px;
         height: 42px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--gray);
         font-weight: 600;
     }

     /* ============================================
   MEJORAS EN CARGA DE PRODUCTOS
   ============================================ */

     .products-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         gap: 25px;
         margin-bottom: 60px;
         transition: opacity 0.3s ease;
     }

     /* ============================================
   ESTILOS PARA INDICADOR DE CARGA
   ============================================ */

     .loading-indicator {
         grid-column: 1 / -1;
         text-align: center;
         padding: 40px;
         animation: fadeIn 0.5s ease;
     }

     .loading-indicator i {
         font-size: 2rem;
         color: var(--primary);
         animation: spin 1s linear infinite;
     }

     @keyframes spin {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     /* ============================================
   RESPONSIVE PARA PAGINACIÓN
   ============================================ */

     @media (max-width: 768px) {
         .pagination-container {
             flex-wrap: wrap;
             padding: 15px;
             gap: 10px;
         }

         .pagination-btn {
             min-width: 100px;
             font-size: 0.9rem;
             padding: 10px 15px;
             order: 1;
         }

         .page-numbers {
             order: 2;
             width: 100%;
             justify-content: center;
             margin: 10px 0;
         }

         .page-number {
             width: 36px;
             height: 36px;
             font-size: 0.9rem;
         }

         .page-dots {
             width: 36px;
             height: 36px;
         }
     }

     @media (max-width: 480px) {
         .page-number {
             width: 32px;
             height: 32px;
             font-size: 0.8rem;
         }

         .pagination-btn {
             min-width: 90px;
             font-size: 0.8rem;
             padding: 8px 12px;
         }
     }

     /* ============================================
   RESPONSIVE DESIGN
   ============================================ */

     @media (max-width: 768px) {

         /* Header responsive */
         .hamburger-btn {
             display: block;
         }

         .categories-desktop {
             display: none;
         }

         .categories-header {
             justify-content: center;
         }

         .section-title {
             text-align: center;
             width: 100%;
         }

         /* Products info responsive */
         .products-info {
             flex-direction: column;
             align-items: stretch;
             text-align: center;
         }

         .products-sort {
             justify-content: center;
         }

         /* Pagination responsive */
         .pagination-container {
             flex-wrap: wrap;
             padding: 15px;
         }

         .pagination-btn {
             min-width: 100px;
             font-size: 0.9rem;
             padding: 8px 15px;
         }

         .page-number {
             width: 35px;
             height: 35px;
             font-size: 0.9rem;
         }

         /* Cart icon adjustments */
         .cart-icon i {
             font-size: 1.5rem;
         }

         .cart-count {
             width: 18px;
             height: 18px;
             font-size: 0.7rem;
         }
     }

     @media (max-width: 480px) {
         .products-grid {
             grid-template-columns: repeat(2, minmax(0, 2fr));
             /* Se mantienen 2 columnas incluso en pantallas muy pequeñas */
             gap: 10px;
         }

         .logo-img {
             height: 80px;
         }

         .logo-text p {
             font-size: 0.8rem;
         }

         .pagination-container {
             gap: 10px;
         }

         .pagination-btn {
             min-width: 80px;
             font-size: 0.8rem;
             padding: 6px 12px;
         }

         .page-number {
             width: 30px;
             height: 30px;
             font-size: 0.8rem;
         }

         .products-count {
             font-size: 0.9rem;
         }
     }

     @media (min-width: 769px) {

         .mobile-menu,
         .mobile-menu-overlay {
             display: none !important;
         }
     }

     /* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

     body.dark-mode .mobile-menu {
         background-color: var(--bg-card);
         color: var(--text-primary);
     }

     body.dark-mode .mobile-category-btn {
         color: var(--text-primary);
     }

     body.dark-mode .mobile-category-btn:hover {
         background-color: var(--bg-secondary);
     }

     body.dark-mode .mobile-category-btn.active {
         background-color: var(--primary);
         color: white;
     }

     body.dark-mode .products-info {
         background-color: var(--bg-card);
         color: var(--text-primary);
     }

     body.dark-mode .products-count {
         color: var(--text-secondary);
     }

     body.dark-mode .sort-select {
         background-color: var(--bg-secondary);
         color: var(--text-primary);
         border-color: var(--border);
     }

     body.dark-mode .pagination-container {
         background-color: var(--bg-card);
     }

     body.dark-mode .page-number {
         background-color: var(--bg-secondary);
         color: var(--text-primary);
         border-color: var(--border);
     }

     body.dark-mode .page-number:hover:not(.active):not(.disabled) {
         background-color: var(--bg-card);
         border-color: var(--primary);
     }

     body.dark-mode .pagination-btn:disabled {
         background-color: var(--bg-secondary);
         color: var(--text-secondary);
     }

     /* ============================================
   BUSCADOR EN HEADER - PROFESIONAL
   ============================================ */

     .header-search-container {
         flex: 1;
         max-width: 500px;
         margin: 0 20px;
         position: relative;
     }

     .header-search-wrapper {
         position: relative;
         display: flex;
         align-items: center;
     }

     .header-search-input {
         width: 100%;
         padding: 12px 45px 12px 20px;
         border: 2px solid var(--border);
         border-radius: 30px;
         font-size: 0.95rem;
         background-color: white;
         color: var(--dark);
         transition: all 0.3s ease;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     }

     .header-search-input:focus {
         outline: none;
         border-color: var(--primary);
         box-shadow: 0 2px 12px rgba(46, 125, 50, 0.15);
     }

     .header-search-btn {
         position: absolute;
         right: 10px;
         top: 50%;
         transform: translateY(-50%);
         background: none;
         border: none;
         color: #ff894e;
         font-size: 1.1rem;
         cursor: pointer;
         padding: 5px;
         transition: color 0.3s ease;
     }

     .header-search-btn:hover {
         color: #b63d00c5;
     }

     .header-search-clear {
         position: absolute;
         right: 40px;
         top: 50%;
         transform: translateY(-50%);
         background: none;
         border: none;
         color: var(--gray);
         font-size: 0.9rem;
         cursor: pointer;
         padding: 5px;
         opacity: 0;
         visibility: hidden;
         transition: all 0.3s ease;
     }

     .header-search-clear.visible {
         opacity: 1;
         visibility: visible;
     }

     .header-search-clear:hover {
         color: #f44336;
     }

     /* Resultados de búsqueda en header */
     .header-search-results {
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background: white;
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
         margin-top: 10px;
         z-index: 1000;
         max-height: 450px;
         overflow-y: auto;
         display: none;
         border: 1px solid var(--border);
         animation: slideDown 0.3s ease;
     }

     @keyframes slideDown {
         from {
             opacity: 0;
             transform: translateY(-10px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     .header-search-results.active {
         display: block;
     }

     .search-result-item {
         padding: 15px 20px;
         border-bottom: 1px solid var(--border);
         cursor: pointer;
         transition: background-color 0.2s ease;
         display: flex;
         align-items: center;
         gap: 15px;
     }

     .search-result-item:hover {
         background-color: rgba(46, 125, 50, 0.05);
     }

     .search-result-item:last-child {
         border-bottom: none;
     }

     .search-result-image {
         width: 50px;
         height: 50px;
         border-radius: 8px;
         object-fit: cover;
         flex-shrink: 0;
     }

     .search-result-info {
         flex: 1;
     }

     .search-result-name {
         font-weight: 600;
         color: var(--dark);
         margin-bottom: 4px;
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .search-result-category {
         font-size: 0.8rem;
         color: white;
         background: var(--primary);
         padding: 2px 8px;
         border-radius: 12px;
         display: inline-block;
     }

     .search-result-offer {
         background: #ff9800 !important;
     }

     .search-result-price {
         color: var(--primary);
         font-weight: 600;
         font-size: 1rem;
         margin-top: 2px;
     }

     .search-result-desc {
         color: var(--gray);
         font-size: 0.85rem;
         margin-top: 3px;
         line-height: 1.4;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
     }

     .search-no-results {
         padding: 30px 20px;
         text-align: center;
         color: var(--gray);
     }

     .search-no-results i {
         font-size: 2.5rem;
         margin-bottom: 10px;
         color: var(--light-gray);
     }

     .search-stats {
         padding: 15px 20px;
         border-top: 1px solid var(--border);
         color: var(--gray);
         font-size: 0.85rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .search-view-all {
         background: none;
         border: none;
         color: var(--primary);
         font-weight: 600;
         cursor: pointer;
         padding: 5px 10px;
         border-radius: 4px;
         transition: background-color 0.2s ease;
     }

     .search-view-all:hover {
         background-color: rgba(46, 125, 50, 0.1);
     }

     /* Buscador en menú móvil */
     .mobile-search-wrapper {
         position: relative;
     }

     .mobile-search-input {
         width: 100%;
         padding: 12px 45px 12px 15px;
         border: 2px solid var(--border);
         border-radius: 25px;
         font-size: 1rem;
         background-color: white;
     }

     .mobile-search-btn {
         position: absolute;
         right: 10px;
         top: 50%;
         transform: translateY(-50%);
         background: none;
         border: none;
         color: var(--primary);
         font-size: 1.1rem;
     }

     /* Responsive para buscador en header */
     @media (max-width: 992px) {
         html {
             font-size: 20px;
             /* Valor normal suele ser 16px */
         }

         .products-grid {
             grid-template-columns: repeat(2, 1fr) !important;
             gap: 15px;
             /* Reducir espacio entre productos */
         }

         .logo-img {
             height: 70px;
             /* Antes 110px */
         }

         .product-img {
             height: 140px;
             /* Antes 180px */
             font-size: 3rem;
         }

         .product-info {
             padding: 15px;
         }

         .product-title {
             font-size: 1.1rem;
             margin-bottom: 5px;
         }

         .product-desc {
             font-size: 0.85rem;
             margin-bottom: 10px;
         }

         .product-price {
             font-size: 1.2rem;
         }

         .add-to-cart {
             width: 36px;
             height: 36px;
             font-size: 0.9rem;
         }


         .header-search-container {
             margin: 10px 0 5px;
         }

         .header-search-input {
             padding: 8px 40px 8px 15px;
             font-size: 0.9rem;
         }

         .header-right {
             gap: 10px;
         }

         .cart-icon i {
             font-size: 1.5rem;
         }

         .cart-count {
             width: 18px;
             height: 18px;
             font-size: 0.7rem;
         }

         .header-content {
             flex-wrap: wrap;
         }

         .header-search-input {
             padding: 10px 40px 10px 15px;
         }

         .category-btn {
             padding: 8px 16px;
             font-size: 0.9rem;
         }

         .category-btn .category-img {
             width: 24px;
             height: 24px;
         }

         .container {
             padding: 0 17px;
         }

         .section-title {
             margin: 40px 0 25px;
             font-size: 1.8rem;
         }

         .hero {
             min-height: 450px;
         }
     }

     @media (max-width: 768px) {
         html {
             font-size: 13px;
         }

         .header-search-results {
             position: fixed;
             top: 70px;
             left: 20px;
             right: 20px;
             max-height: 60vh;
         }

         .logo-img {
             height: 60px;
         }

         .product-img {
             height: 120px;
         }

         .product-info {
             padding: 12px;
         }

         .product-title {
             font-size: 1rem;
         }

         .product-price {
             font-size: 1.1rem;
         }

         .header-search-input {
             padding: 7px 35px 7px 12px;
             font-size: 0.85rem;
         }

         .hero {
             min-height: 400px;
         }

         .slide-content h2 {
             font-size: 1.8rem;
         }

         .slide-content p {
             font-size: 1rem;
         }

         .btn {
             padding: 10px 24px;
         }
     }

     @media (max-width: 576px) {
         html {
             font-size: 12px;
         }

         .product-img {
             height: 100px;
         }

         .product-info {
             padding: 10px;
         }

         .product-title {
             font-size: 0.95rem;
         }

         .product-desc {
             font-size: 0.8rem;
             -webkit-line-clamp: 2;
             /* Limitar descripción a 2 líneas */
         }

         .product-price {
             font-size: 1rem;
         }

         .add-to-cart {
             width: 32px;
             height: 32px;
         }


         .header-search-input {
             font-size: 0.9rem;
             padding: 8px 35px 8px 15px;
         }

         .search-result-item {
             padding: 12px 15px;
         }

         .section-title {
             font-size: 1.6rem;
             margin: 30px 0 20px;
         }

         .btn {
             padding: 8px 20px;
             font-size: 0.9rem;
         }

     }

     /* Modo oscuro para buscador */
     body.dark-mode .header-search-input {
         background-color: var(--bg-card);
         border-color: var(--border);
         color: var(--text-primary);
     }

     body.dark-mode .header-search-results {
         background-color: var(--bg-card);
         border-color: var(--border);
     }

     body.dark-mode .search-result-item:hover {
         background-color: rgba(76, 175, 80, 0.1);
     }

     body.dark-mode .mobile-search-input {
         background-color: var(--bg-card);
         border-color: var(--border);
         color: var(--text-primary);
     }


     /* ============================================
   ESTILOS MEJORADOS PARA CARRITO VACÍO
   ============================================ */

     .cart-empty {
         text-align: center;
         padding: 40px 20px;
         color: var(--gray);
         display: flex;
         align-items: center;
         justify-content: center;
         min-height: 400px;
         width: 100%;
     }

     .empty-cart-content {
         max-width: 400px;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 25px;
         animation: fadeIn 0.5s ease;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     .empty-cart-icon {
         width: 100px;
         height: 100px;
         background: linear-gradient(135deg, var(--light-gray) 0%, #e8f5e9 100%);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 10px;
         border: 3px dashed var(--border);
         animation: bounce 2s infinite;
     }

     @keyframes bounce {

         0%,
         100% {
             transform: translateY(0);
         }

         50% {
             transform: translateY(-10px);
         }
     }

     .empty-cart-icon i {
         font-size: 3.5rem;
         color: var(--primary);
         opacity: 0.8;
     }

     .empty-cart-text {
         text-align: center;
     }

     .empty-cart-text h3 {
         color: var(--primary);
         font-size: 1.8rem;
         margin-bottom: 10px;
         font-weight: 700;
     }

     .empty-cart-text p {
         color: var(--gray);
         font-size: 1.1rem;
         margin: 0;
     }

     .empty-cart-suggestions {
         background: rgba(46, 125, 50, 0.05);
         border-radius: 12px;
         padding: 20px;
         width: 100%;
         text-align: left;
         border: 1px solid rgba(46, 125, 50, 0.1);
     }

     .empty-cart-suggestions>p {
         color: var(--primary);
         font-weight: 600;
         margin-bottom: 15px;
         display: flex;
         align-items: center;
         gap: 8px;
         font-size: 1.1rem;
     }

     .empty-cart-suggestions>p i {
         color: #ff9800;
     }

     .suggestion-items {
         display: flex;
         flex-direction: column;
         gap: 12px;
     }

     .suggestion-item {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 8px 0;
         border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
     }

     .suggestion-item:last-child {
         border-bottom: none;
     }

     .suggestion-item i {
         color: var(--primary);
         font-size: 1rem;
         width: 24px;
         height: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: rgba(46, 125, 50, 0.1);
         border-radius: 50%;
     }

     .suggestion-item span {
         color: var(--dark);
         font-size: 0.95rem;
         line-height: 1.4;
     }

     .cart-empty .btn {
         width: 100%;
         padding: 15px;
         font-size: 1.1rem;
         font-weight: 600;
         border-radius: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         transition: all 0.3s ease;
         box-shadow: 0 4px 15px rgba(46, 125, 50, 0.2);
         margin-top: 10px;
     }

     .cart-empty .btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(46, 125, 50, 0.3);
     }

     .cart-empty .btn i {
         font-size: 1.2rem;
     }

     /* ============================================
   MODE DARK ADJUSTMENTS
   ============================================ */

     body.dark-mode .empty-cart-icon {
         background: linear-gradient(135deg, #1e1e1e 0%, #2e3c2e 100%);
         border-color: var(--border-dark);
     }

     body.dark-mode .empty-cart-icon i {
         color: var(--primary-light);
     }

     body.dark-mode .empty-cart-text h3 {
         color: var(--primary-light);
     }

     body.dark-mode .empty-cart-text p {
         color: var(--text-secondary);
     }

     body.dark-mode .empty-cart-suggestions {
         background: rgba(76, 175, 80, 0.08);
         border-color: rgba(76, 175, 80, 0.15);
     }

     body.dark-mode .empty-cart-suggestions>p {
         color: var(--primary-light);
     }

     body.dark-mode .suggestion-item span {
         color: var(--text-primary);
     }

     body.dark-mode .suggestion-item i {
         color: var(--primary-light);
         background: rgba(76, 175, 80, 0.15);
     }

     /* ============================================
   RESPONSIVE DESIGN
   ============================================ */

     @media (max-width: 768px) {
         .cart-empty {
             min-height: 300px;
             padding: 30px 15px;
         }

         .empty-cart-content {
             gap: 20px;
         }

         .empty-cart-icon {
             width: 80px;
             height: 80px;
         }

         .empty-cart-icon i {
             font-size: 2.8rem;
         }

         .empty-cart-text h3 {
             font-size: 1.5rem;
         }

         .empty-cart-text p {
             font-size: 1rem;
         }

         .empty-cart-suggestions {
             padding: 15px;
         }

         .suggestion-item {
             padding: 6px 0;
         }

         .suggestion-item span {
             font-size: 0.9rem;
         }

         .cart-empty .btn {
             padding: 12px;
             font-size: 1rem;
         }
     }

     @media (max-width: 480px) {
         .empty-cart-icon {
             width: 70px;
             height: 70px;
         }

         .empty-cart-icon i {
             font-size: 2.5rem;
         }

         .empty-cart-text h3 {
             font-size: 1.3rem;
         }

         .empty-cart-text p {
             font-size: 0.95rem;
         }

         .empty-cart-suggestions {
             padding: 12px;
         }

         .suggestion-item {
             gap: 8px;
         }

         .suggestion-item i {
             font-size: 0.9rem;
             width: 20px;
             height: 20px;
         }

         .suggestion-item span {
             font-size: 0.85rem;
         }
     }