/* ==============================================
styles.css for Ferre-Todo
==============================================
*/

/* --- Custom Properties (Theme Variables) --- */
:root {
    --primary-color: #0D47A1; /* A strong, corporate blue */
    --secondary-color: #1a1a1a;
    --text-color: #333;
    --bg-light: #f4f4f4; /* A light gray background */
    --bg-dark: #121212;
}

/* --- Base Body & Typography Styles --- */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.5px;
}

/* --- Base styles for light theme --- */
.bg-surface { background-color: #ffffff; }
.text-heading { color: var(--secondary-color); }
.text-body { color: var(--text-color); }
.border-custom { border-color: #e0e0e0; }
.menu-card { background-color: #ffffff; }

/* --- Dark Mode Styles --- */
.dark body { background-color: var(--bg-dark); color: var(--bg-light); }
.dark .bg-surface { background-color: #1e1e1e; }
.dark .text-heading { color: #ffffff; }
.dark .text-body { color: #cccccc; }
.dark .border-custom { border-color: #333333; }
.dark .menu-card { background-color: var(--secondary-color); }
.dark #whatsapp-form input, .dark #whatsapp-form select { color: white !important; background-color: #374151; }
.dark #whatsapp-form input::placeholder { color: #9ca3af; }

/* --- Component Styles --- */
#main-header { background-color: rgba(26, 26, 26, 0.5); backdrop-filter: blur(4px); }
#main-header.scrolled { background-color: var(--secondary-color); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
footer { background-color: var(--secondary-color); color: var(--bg-light); }
.hero-section { background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?q=80&w=2069&auto=format&fit=crop') no-repeat center center/cover; }
.filter-btn { transition: all 0.3s ease; }
.filter-btn.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(13, 71, 161, 0.4);
}

/* --- FIX: Clases para el color primario --- */
.bg-primary-color {
    background-color: var(--primary-color);
}
.text-primary-color {
    color: var(--primary-color);
}
.border-primary-color {
    border-color: var(--primary-color);
}

/* --- NEW: Out of Stock Styles --- */
.product-image-container {
    position: relative;
    overflow: hidden;
    height: 256px; /* 16rem or h-64 */
}
.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.out-of-stock-text {
    color: white;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem; /* text-4xl */
    letter-spacing: 2px;
    border: 2px solid white;
    padding: 0.5rem 1.5rem;
    transform: rotate(-10deg);
}

/* --- Animations --- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-down { animation: fadeInDown 1s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 1s ease-out 0.5s forwards; opacity: 0; }
@keyframes bounce-custom { 0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
.animate-bounce { animation: bounce-custom 1.5s infinite 1s; }