/* --- Variables de Color Pastel --- */
:root {
    --primary-yellow: #f9f3d1;
    --primary-orange: #f0bc21;
    --primary-footer: #9a2609;
    --primary-red: #cf331c;
    --text-dark: #333333;
    --bg-cream: #FFFDF5;
    --primary-black: #0c0302;
}

body {
    font-family: 'Fredoka', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-cream);
} 

/* --- FONDO MÁGICO UNIFICADO (NUEVAS ESTRELLAS CUTE) --- 
body {
    font-family: 'Fredoka', sans-serif;
    color: var(--text-dark);
    margin: 0;
    min-height: 100vh;
    background-color: var(--bg-cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath fill='%23eaddca' d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z'/%3E%3C/svg%3E");
    background-size: 50px 50px; /* Estrellas un poco más grandes 
    background-repeat: repeat;
    animation: magicStarFloat 40s linear infinite;
}

@keyframes magicStarFloat {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px; /* Se mueve 
    }
}
    */

/* --- Clases personalizadas utilitarias --- */
.bg-primary-pastel {
    background-color: var(--primary-orange) !important;
}

.bg-secondary-pastel {
    background-color: var(--primary-yellow) !important;
}

.text-primary-color {
    color: var(--primary-red) !important;
}

.text-secondary-color {
    color: var(--primary-orange) !important;
}

.bg-footer-color {
    background-color: var(--primary-footer) !important;
}

.text-primary-color-footer {
    color: var(--primary-orange) !important;
}

/* --- Navbar --- */
.navbar-brand h1 {
    font-weight: 600;
    letter-spacing: 1px;
}

.nav-link {
    font-weight: 500;
    transition: all 0.3s;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-red) !important;
}

/* --- Hero Section --- */
.hero-header {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background: linear-gradient(to bottom, var(--primary-yellow), #ffffff);
}

/* --- Botones Cute --- */
.btn-primary-custom {
    background-color: var(--primary-red);
    color: white;
    border: none;
    transition: transform 0.2s;
}

.btn-primary-custom:hover {
    background-color: var(--primary-orange);
    color: white;
    transform: scale(1.05);
}

/* --- Servicios --- */
.service-item {
    padding: 30px;
    transition: .5s;
    border: 2px solid transparent;
    background-color: #f9f5da !important;
    height: 100%;
}

.service-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .08);
    border-color: var(--primary-orange);
    background-color: white !important;
    transform: translateY(-10px);
}

.service-icon {
    width: 65px;
    height: 65px;
    background: var(--primary-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-10deg);
}

/* --- Tarjetas de Productos --- */
.product-item {
    border-radius: 20px;
    overflow: hidden;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #f0f0f0;
    background-color: #fffdf1 !important;
}

.product-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-orange);
}

.product-img-wrap {
    height: 250px;
    overflow: hidden;
    position: relative;
    background-color: #eee;
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Redes Sociales en Footer --- */
.btn-social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: white;
    border-color: white;
}

.btn-social:hover {
    background: var(--primary-orange);
    border-color: var(--primary-orange);
}

/* Cursor para indicar que se puede hacer zoom */
#modalImg {
    cursor: zoom-in;
    transition: transform 0.2s;
}

#modalImg:hover {
    transform: scale(1.02);
}

.gallery-thumb {
    width: 60px;
    height: 85px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.gallery-thumb:hover {
    transform: translateY(-3px);
    border-color: var(--primary-orange);
    opacity: 0.8;
}

/* --- Estilos para controles de cantidad en carrito --- */
.qty-btn {
    width: 25px;
    height: 25px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-weight: bold;
}

/* --- Etiqueta de Tipo (Tomo único, En emisión) --- */
.badge-cute {
    background-color: var(--primary-black) !important;
    /* Usa tu color Coral */
    color: white !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


/* --- Botón del Carrito Personalizado --- */
.btn-cute-outline {
    color: var(--primary-red);
    border: 2px solid var(--primary-red);
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-cute-outline:hover {
    background-color: var(--primary-red);
    color: white;
    border-color: var(--primary-red);
    transform: scale(1.05);
}

/* --- Título del Hero con letra Sour Gummy --- */
.hero-header h1 {
    font-family: 'Sour Gummy', sans-serif !important;
    font-weight: 700;
}

.letra-cute {
    font-family: 'Sour Gummy', sans-serif !important;
    font-weight: 700;
}

.btn-filter-custom {
    background-color: white;       
    color: #6c757d;                
    border: none;                  
    transition: all 0.3s ease;
    border-left: 1px solid #eee !important; 
}

.btn-filter-custom:hover, 
.btn-filter-custom:focus, 
.show > .btn-filter-custom.dropdown-toggle {
    background-color: var(--primary-yellow); 
    color: var(--text-dark);
}

/* --- Estilo del Menú Desplegable --- */
.dropdown-item {
    padding: 8px 15px;
    font-weight: 500;
    color: #555;
    transition: all 0.2s;
}

.dropdown-item:hover {
    background-color: var(--primary-yellow); /* Hover amarillo pastel */
    color: var(--primary-black);
    transform: translateX(5px); /* Pequeña animación de movimiento */
}

.dropdown-item:active {
    background-color: var(--primary-orange);
    color: white;
}

/* --- MASCOTA QUE CRUZA LA PANTALLA --- */
.welcome-mascot {
    position: fixed; 
    bottom: 20px;    
    left: -200px;   
    z-index: 9999;  
    width: 150px;    
    pointer-events: none; 
    
    /* La animación: dura 12 segundos, es suave y solo ocurre 1 vez */
    animation: walkAcross 12s linear forwards; 
}

.welcome-mascot img {
    width: 100%;
    height: auto;
    /* Efecto de rebote/flote interno */
    animation: bounce 0.8s ease-in-out infinite alternate;
}

@keyframes walkAcross {
    0% {
        left: -200px; 
    }
    10% {
        left: 20px; 
    }
    80% {
        left: 80%; 
        opacity: 1;
    }
    100% {
        left: 110%; 
        opacity: 0; 
    }
}

@keyframes bounce {
    from {
        transform: translateY(0) rotate(-5deg);
    }
    to {
        transform: translateY(-15px) rotate(5deg); 
    }
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .welcome-mascot {
        width: 100px; 
        bottom: 10px; 
    }
}

/* ESTILOS DEL BOTÓN DE MÚSICA */
#music-container {
    position: fixed;
    bottom: 20px;
    left: 20px; 
    z-index: 9999; 
}

#music-btn {
    background-color: var(--primary-footer); 
    color: white;
    border: none;
    border-radius: 50%; 
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#music-btn:hover {
    transform: scale(1.1); 
    background-color: #970500;
}

/* Animación opcional cuando suena la música */
#music-btn.playing {
    background-color: #fbe521; 
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(199, 177, 7, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(46, 213, 115, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0); }
}

.music-icon-img {
    width: 100%;  
    height: 100%;
    object-fit: contain;
    pointer-events: none; 
    animation: spin 4s linear infinite; /*Para que el muñeco gire */
}

/*#music-btn.playing {
   background-color: transparent; 
   box-shadow: none;
   animation: none;
}*/