body {
    font-family: 'Poppins', sans-serif;
}

/* Custom colors inspired by the brand */
.bg-brand-red { background-color: #CC8B4B; }
.text-brand-red { color: #d82529; }
.border-brand-red { border-color: #E4B276; }
.focus\:ring-brand-red:focus { --tw-ring-color: #d82529; }
.focus\:border-brand-red:focus { --tw-border-opacity: 1; border-color: #d82529; }
.bg-brand-yellow { background-color: #CD9E52; }
.text-brand-yellow { color: #CD9E52; }
.border-brand-yellow { border-color: #F8E3CA; }
.bg-footer-custom { background-color: #CD9E52; }

/* Carousel styles */
.carousel-container {
    overflow: hidden;
    position: relative;
}
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
}

/* Category Carousel Specific Styles */
#category-carousel-container {
    scroll-behavior: smooth;
}
#category-carousel-container::-webkit-scrollbar {
    display: none;
}
#category-carousel-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#categoryPrevBtn:disabled,
#categoryNextBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Active province style */
#province-menu li.active {
    background-color: #d82529;
    color: white;
    font-weight: 600;
}

/* Scroll Animation Styles */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ESTILOS NUEVOS: Custom Scrollbar para la lista de comercios --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #CD9E52; /* Brand yellow */
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #d82529; /* Brand red */
}

/* --- HERO SLIDER ANIMATIONS (KEN BURNS EFFECT) --- */
@keyframes subtle-zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.hero-slide {
    /* 20s para que sea muy sutil y lento */
    animation: subtle-zoom 20s infinite alternate; 
    /* Will-change mejora el rendimiento en algunos navegadores */
    will-change: transform, opacity;
}