:root {
    /* --- Base Variables (Default: Dark/Cinematográfico) --- */
    --bg-color: #000000;
    --text-color: #F8F8F8;
    /* Bone White */
    --accent-color: #D4AF37;
    /* Gold */
    --accent-secondary: #9CAF31;
    /* Golden Green */
    --card-bg: rgba(255, 255, 255, 0.05);
    /* Glassy default */
    --card-hover-border: var(--accent-color);
    --footer-bg: #0A0A0A;

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
}

/* --- Beige Theme Overrides --- */
[data-theme="beige"] {
    --bg-color: #F2E8D5;
    --text-color: #1B3022;
    /* Forest Green */
    --accent-color: #4F772D;
    /* Olive */
    --accent-secondary: #90A955;
    --card-bg: #FFFFFF;
    --card-hover-border: var(--accent-color);
    --footer-bg: #132218;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Navigation --- */
.navbar {
    padding: 2rem 0;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 100;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -5px;
    left: 0;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.btn-nav {
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--text-color);
    border-radius: 50px;
    transition: all 0.3s;
}

.btn-nav:hover {
    background: var(--text-color);
    color: var(--bg-color) !important;
}

/* Theme Switcher Button */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    background: var(--text-color);
    color: var(--bg-color);
}


/* --- Hero Section --- */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
}

/* Dark Theme specific Hero styles */
.hero-bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Slight darkness for text readability in dark mode */
    z-index: -1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* BEIGE MODE: Hide Fullscreen BG */
[data-theme="beige"] .hero-bg-media,
[data-theme="beige"] .hero-overlay {
    opacity: 0;
    pointer-events: none;
}

.hero-container {
    display: grid;
    /* Default Dark Mode: Overlapping text to right, effectively 1 column technically but styled to right */
    grid-template-columns: 1fr;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 10;
    transition: grid-template-columns 0.5s ease;
}

/* BEIGE MODE: Split Grid */
[data-theme="beige"] .hero-container {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.hero-text {
    /* BLACK MODE: Aligned to right, overlap feel */
    text-align: right;
    margin-left: auto;
    max-width: 600px;
    transition: text-align 0.5s ease, margin 0.5s ease;
}

/* BEIGE MODE: Aligned left */
[data-theme="beige"] .hero-text {
    text-align: left;
    margin-left: 0;
    max-width: 500px;
}

.hero-text h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    /* Shadow for dark mode readability */
}

[data-theme="beige"] .hero-text h1 {
    text-shadow: none;
    /* Clean for beige */
}

.hero-text em {
    font-style: italic;
    color: var(--accent-color);
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    color: var(--text-color);
    opacity: 0.9;
    display: inline-block;
    /* Helps with alignment transition */
}

.hero-cta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: flex-end;
    /* Right align for Black mode */
    transition: justify-content 0.5s ease;
}

[data-theme="beige"] .hero-cta {
    justify-content: flex-start;
    /* Left align for Beige mode */
}

.btn-primary {
    background-color: var(--accent-color);
    color: #fff;
    /* Always white text on accent button for contrast */
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
    /* Invert based on theme vars */
    transform: translateY(-2px);
}

.btn-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}


/* BEIGE MODE: Side Video wrapper */
.hero-video-wrapper {
    width: 600px;
    height: 600px;
    display: none;
    /* Hidden by default in Dark Mode */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-theme="beige"] .hero-video-wrapper {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}

.video-mask {
    width: 100%;
    height: 100%;
}

.hero-video {
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* --- Social Proof Ticker --- */
.social-proof-ticker {
    background: rgba(255, 255, 255, 0.05);
    /* Slight glass for dark */
    padding: 1rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="beige"] .social-proof-ticker {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(0, 0, 0, 0.05);
}

.ticker-content {
    display: flex;
    gap: 3rem;
    justify-content: center;
    white-space: nowrap;
    animation: scroll 30s linear infinite;
}

.ticker-content span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--accent-color);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* --- Categories --- */
.categories-section {
    padding: 6rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.header-line {
    width: 60px;
    height: 3px;
    background-color: var(--accent-color);
    margin: 0 auto;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.category-card {
    background: var(--card-bg);
    padding: 3rem 2rem;
    text-align: center;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Dark mode needs text alignment reset since container doesnt inherit text-align:right from hero but just in case */
.category-card {
    text-align: center;
}

.category-card:hover {
    border-color: var(--card-hover-border);
    transform: translateY(-5px);
}

.cat-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.category-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.category-card p {
    opacity: 0.8;
    font-size: 0.9rem;
}


/* --- Products --- */
.products-section {
    padding: 4rem 0 8rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.product-card {
    background: transparent;
}

.card-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    aspect-ratio: 3/4;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .card-image img {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .card-overlay {
    opacity: 1;
}

.btn-icon {
    background: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #1B3022;
    /* Always dark icon inside white circle */
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-icon:hover {
    transform: scale(1.1);
}

.card-info h3 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
}

.price {
    color: var(--accent-color);
    font-weight: 500;
}

.center-btn {
    text-align: center;
}

.btn-outline {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: 1px solid var(--text-color);
    border-radius: 8px;
    font-weight: 500;
}

.btn-outline:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

/* --- Footer --- */
.footer {
    background-color: var(--footer-bg);
    color: var(--text-color);
    padding: 5rem 0 2rem;
    transition: background-color 0.5s ease;
}

/* Force white text in Footer for both modes if preferable, or adapt. 
   Currently adapted via variables. Beige mode footer is dark green, text white.
   Dark mode footer is almost black, text white (bone). Matches variables. */

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-brand h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.footer-brand p {
    opacity: 0.7;
    max-width: 300px;
}

.footer h4 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--accent-color);
}

.footer ul {
    list-style: none;
}

.footer ul li {
    margin-bottom: 0.8rem;
}

.footer ul li a {
    opacity: 0.8;
}

.footer ul li a:hover {
    opacity: 1;
    color: var(--accent-color);
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-icons a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-icons a:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.6;
    font-size: 0.9rem;
}

/* Smartizable Branding Badge CSS */
.smartizable-branding {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    text-decoration: none;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 6px 15px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.smartizable-branding:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.smartizable-branding .s-initial {
    font-family: 'Brush Script MT', cursive;
    font-size: 16px;
    font-weight: bold;
    margin-right: 1px;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.smartizable-branding .smart-text {
    background: linear-gradient(90deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.smartizable-branding:hover .smart-text {
    opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 968px) {
    .container {
        padding: 0 1.5rem;
    }

    /* Hero adjustments */
    .hero-container,
    [data-theme="beige"] .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-text,
    [data-theme="beige"] .hero-text {
        text-align: center;
        margin: 0 auto;
        order: 2;
        /* Text below media on mobile/tablet */
    }

    .hero-text h1 {
        font-size: 3.5rem;
    }

    .hero-cta,
    [data-theme="beige"] .hero-cta {
        justify-content: center;
    }

    /* Beige: Ensure video is visible on top on mobile */
    [data-theme="beige"] .hero-video-wrapper {
        order: 1;
        margin: 0 auto;
        width: 80%;
        height: auto;
        aspect-ratio: 1;
    }

    /* Grids: 4 -> 2 columns */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Keep 3 for tablet if possible, or 1 */
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .footer-brand p {
        margin: 0 auto;
    }

    .social-icons {
        justify-content: center;
    }
}

@media (max-width: 768px) {

    /* Navbar: Mobile Menu Logic */
    .nav-links {
        position: fixed;
        right: -100%;
        top: 0;
        height: 100vh;
        background-color: var(--bg-color);
        /* Matches theme */
        flex-direction: column;
        justify-content: center;
        width: 80%;
        max-width: 300px;
        transition: right 0.4s ease;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        z-index: 999;
    }

    /* Class added by JS to open menu */
    .nav-links.nav-active {
        right: 0;
    }

    .mobile-menu-btn {
        display: block;
        z-index: 1000;
        /* Above the menu layer */
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }

    .hero-text h1 {
        font-size: 2.8rem;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    /* Make video section tighter on small screens */
    [data-theme="beige"] .hero-video-wrapper {
        width: 100%;
    }

    .ticker-content span {
        font-size: 0.8rem;
        gap: 0.3rem;
    }

    .theme-toggle-btn {
        margin-top: 1rem;
        /* Spacing in vertical menu */
    }
}