/* --- 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);
} 

/* --- 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);
}

/* --- 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);
}

/* --- Barras de desplazamiento suaves (global) --- */
.scroll-smooth,
.product-modal-body,
.product-modal-thumbs,
.product-modal-desc,
#cartItemsContainer {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.scroll-smooth::-webkit-scrollbar,
.product-modal-body::-webkit-scrollbar,
.product-modal-thumbs::-webkit-scrollbar,
.product-modal-desc::-webkit-scrollbar,
#cartItemsContainer::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scroll-smooth::-webkit-scrollbar-track,
.product-modal-body::-webkit-scrollbar-track,
.product-modal-thumbs::-webkit-scrollbar-track,
.product-modal-desc::-webkit-scrollbar-track,
#cartItemsContainer::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-smooth::-webkit-scrollbar-thumb,
.product-modal-body::-webkit-scrollbar-thumb,
.product-modal-thumbs::-webkit-scrollbar-thumb,
.product-modal-desc::-webkit-scrollbar-thumb,
#cartItemsContainer::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 10px;
}

.scroll-smooth::-webkit-scrollbar-thumb:hover,
.product-modal-body::-webkit-scrollbar-thumb:hover,
.product-modal-thumbs::-webkit-scrollbar-thumb:hover,
.product-modal-desc::-webkit-scrollbar-thumb:hover,
#cartItemsContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.28);
}

/* --- Modal de producto: scroll y altura --- */
.product-modal-dialog {
    max-height: 90vh;
}

.product-modal-content {
    background-color: var(--bg-cream);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.product-modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

/* --- Galería: miniaturas verticales a la izquierda + imagen principal + flechas --- */
.product-modal-images {
    min-height: 500px;
    height: 100%;
}

.product-gallery-layout {
    display: flex;
    flex-direction: row;
    gap: 12px;
    height: 100%;
    min-height: 480px;
}

.product-modal-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    max-height: 500px;
    padding-right: 4px;
}

.product-modal-main-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border-radius: 8px;
}

.product-modal-main-img {
    max-height: 500px;
    width: 100%;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.2s;
}

.product-modal-main-img:hover {
    transform: scale(1.02);
}

.product-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    z-index: 2;
}

.product-carousel-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.product-carousel-prev {
    left: 12px;
}

.product-carousel-next {
    right: 12px;
}

.product-modal-desc {
    max-height: 300px;
    overflow-y: auto;
}

/* Miniaturas verticales (estilo galería) */
.gallery-thumb {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    border-radius: 8px;
    display: block;
}

.gallery-thumb:hover {
    border-color: var(--primary-orange);
    opacity: 0.95;
}

.gallery-thumb.active {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 1px var(--primary-red);
}

/* Responsive: en móvil/tablet, miniaturas abajo en fila horizontal */
@media (max-width: 991.98px) {
    .product-gallery-layout {
        flex-direction: column;
        min-height: 220px;
    }

    .product-modal-thumbs {
        flex-direction: row;
        max-height: none;
        overflow-y: hidden;
        overflow-x: auto;
        padding-right: 0;
        padding-bottom: 4px;
        min-height: 72px;
    }

    .product-modal-main-wrap {
        min-height: 220px;
    }

    .product-modal-main-img {
        max-height: 260px;
    }

    .product-modal-dialog {
        max-height: 95vh;
    }

    .product-modal-content {
        max-height: 95vh;
    }

    .product-carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .product-carousel-prev {
        left: 8px;
    }

    .product-carousel-next {
        right: 8px;
    }

    .gallery-thumb {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
    }
}

/* --- 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;
}*/

/* --- CARRUSEL --- */
.banner-img {
    width: 100%;
    height: auto; /* La imagen móvil cuadrada/vertical dictará su propia altura */
}

@media (min-width: 768px) {
    .banner-img {
        height: 450px; 
        object-fit: cover; 
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 767px) {
    .product-img-wrap {
        height: 180px; 
    }
    
    .product-item .p-4 {
        padding: 15px !important; 
    }

    .product-item h5 {
        font-size: 0.95rem; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Pone "..." si el título es muy largo */
    }

    .product-item h4 {
        font-size: 1.1rem; 
    }
    
    .btn-outline-dark {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
}

/* --- SERVICIOS --- */
.service-title {
    font-size: 1rem;
}
.service-text {
    font-size: 0.85rem;
    line-height: 1.2;
}

@media (max-width: 767px) {
    .service-title {
        font-size: 0.8rem; 
    }
    .service-text {
        font-size: 0.7rem; 
    }
    .fa-2x {
        font-size: 1.8em; 
    }
}

/* --- Ajustes responsivos del menú --- */
#navbarOffcanvas .nav-link {
    color: #ffffff !important;
    transition: color 0.2s ease-in-out;
}

/* 1. En Celulares (Aplica fondo oscuro y hover rojo) */
@media (max-width: 991.98px) {
    .panel-oscuro-movil {
        background-color: #1a1a1a !important;
        max-width: 75vw;
    }
    #navbarOffcanvas .nav-link:hover,
    #navbarOffcanvas .nav-link.active {
        color: var(--primary-red) !important;
    }
}

/* 2. En Computadora (Fondo rojo de la barra, hover amarillo) */
@media (min-width: 992px) {
    #navbarOffcanvas .nav-link:hover,
    #navbarOffcanvas .nav-link.active {
        color: var(--primary-yellow) !important; 
    }
}

/* --- CARRUSEL DE RESEÑAS MULTI-TARJETAS --- */
.review-card-wrapper {
    scroll-snap-align: center;
    min-width: 85%;            
    max-width: 85%;
    width: 85%;
}

@media (min-width: 768px) {
    .review-card-wrapper {
        scroll-snap-align: start; 
        min-width: calc(50% - 1rem); 
        max-width: calc(50% - 1rem);
        width: calc(50% - 1rem);
    }
}

@media (min-width: 992px) {
    .review-card-wrapper {
        min-width: calc(33.333% - 1rem); 
        max-width: calc(33.333% - 1rem);
        width: calc(33.333% - 1rem);
    }
}

#reviewsContainer {
    scroll-behavior: smooth; /* Esto hace que el deslizamiento no sea brusco */
}

/* --- Ocultar barra de scroll de las reseñas --- */
#reviewsContainer::-webkit-scrollbar {
    display: none !important; 
}

#reviewsContainer {
    -ms-overflow-style: none; 
    scrollbar-width: none;     
}

/* --- SCROLLBAR SÚTIL --- */
#detailGallery::-webkit-scrollbar {
    height: 4px; 
}

#detailGallery::-webkit-scrollbar-track {
    background: transparent; 
}

#detailGallery::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15); 
    border-radius: 10px; 
}

#detailGallery::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3); 
}

/* --- Etiqueta dinámica --- */
.badge-reserved {
    position: absolute;
    top: 15px;
    left: 0;
    color: white;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    z-index: 2;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    white-space: nowrap;
}

/* --- CLASES DE COLORES DINÁMICOS --- */
.badge-agotado {
    background-color: var(--primary-red);
}

.badge-stock {
    background-color: #28a745;
}

.badge-default {
    background-color: #e1c303; 
}

/* Responsive para celulares (abajo y centrado) */
@media (max-width: 767px) {
    .badge-reserved {
        top: auto;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%); 
        border-radius: 15px; 
        padding: 5px 20px;
        font-size: 0.7rem;
    }
}

/* --- Etiqueta Secundaria (Disponible para reserva) --- */
.badge-reserva-extra {
    position: absolute;
    top: 48px; 
    left: 0;
    background-color: var(--primary-black); 
    color: white;
    padding: 3px 10px;
    font-weight: 600;
    font-size: 0.6rem; 
    letter-spacing: 0.5px;
    z-index: 2;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    opacity: 0.85;
}

/* Ajustes responsivos para celulares (centrado y apilado) */
@media (max-width: 767px) {
    .badge-agotado {
        bottom: 24px !important; 
    }
    
    .badge-reserva-extra {
        top: auto;
        bottom: 6px; 
        left: 50%;
        transform: translateX(-50%);
        border-radius: 10px; 
        font-size: 0.55rem;
        padding: 3px 12px;
        white-space: nowrap; 
    }
}