body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6; 
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .category-card-hover:hover {
            transform: translateY(-5px) scale(1.03);
            box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.1), 0 5px 8px -2px rgba(0, 0, 0, 0.05);
        }
        .modal {
            display: none; 
            position: fixed; 
            z-index: 100; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.5); 
        }
        .modal-content {
            background-color: #fefefe;
            margin: 10% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 80%; 
            max-width: 500px;
            border-radius: 0.5rem;
        }
        
        .star-rating [data-lucide="star"] {}
         .star-rating [data-lucide="star"].empty-star { 
            color: #9ca3af; 
        }
        .star-rating .lucide-star {}
         .star-rating .lucide-star.empty { 
            fill: none;
            color: #9ca3af;
        }

        #addReviewStars [data-lucide="star"] { 
            color: #9ca3af; 
            cursor: pointer;
            transition: color 0.2s; 
        }
        #addReviewStars [data-lucide="star"]:hover {
            color: #facc15; 
        }
        #addReviewStars [data-lucide="star"].selected {
            color: #eab308; 
        }
        #addReviewStars [data-lucide="star"] > svg {
            stroke: currentColor; 
            fill: none;           
            transition: fill 0.2s; 
        }
        #addReviewStars [data-lucide="star"]:hover > svg {
            fill: #facc15; 
        }
        #addReviewStars [data-lucide="star"].selected > svg {
            fill: #eab308; 
        }

        .whatsapp-button {
            background-color: #25D366;
            color: white;
        }
        .whatsapp-button:hover {
            background-color: #1DAE52;
        }
        .reviews-container::-webkit-scrollbar { width: 8px; }
        .reviews-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
        .reviews-container::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
        .reviews-container::-webkit-scrollbar-thumb:hover { background: #555; }
   
        .modal-image-container {
            display: none; /* Oculto por defecto */
            position: fixed; /* Se queda fijo aunque hagas scroll */
            z-index: 1000; /* Se pone por encima de todo lo demás */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85); /* Fondo negro semi-transparente */
            align-items: center;
            justify-content: center;
        }

        .modal-image-content {
            max-width: 80%;
            max-height: 85%;
            border-radius: 8px;
        }

        .close-modal {
            position: absolute;
            top: 20px;
            right: 35px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close-modal:hover {
            color: #bbb;
        }
          
        header {
        border-bottom: 1px solid #e5e7eb; /* Esto crea una línea gris suave */
        padding-bottom: 2rem;             /* Esto añade el espacio (equivale a pb-8 de Tailwind) */
        }
        header h1 {
            font-family: 'Raleway', sans-serif; /* Añade el estilo de texto al título*/
        }