:root {
    --primary-color: #000000;
    --secondary-color: #D42426;
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --text-color: #1a1a1a;
    --text-muted: #64748b;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --border-color: #e2e8f0;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

ul {
    list-style: none;
}

/* Navigation */
.main-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1.2rem 0;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 2rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-color);
}

.nav-links a:hover {
    color: var(--text-muted);
}

/* Hide price in product cards as requested */
.card-price {
    display: none !important;
}

/* If we want to show 'Descárgala GRATIS' we can re-enable it with a specific class if needed,
   but user asked to 'quitar los precios'.
   If they want 'Descárgala GRATIS' text to remain, we should not hide .card-price if it contains text.
   But .card-price usually contains the number.
   Wait, I previously changed the JS to output 'Descárgala GRATIS' instead of the number.
   If the user now says "quitar los precio", maybe they don't want to see that text either on the grid?
   I will hide it. */
.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    text-align: center;
    letter-spacing: -0.5px;
}

.user-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
}

.icon-btn {
    font-size: 1.1rem;
    color: var(--text-color);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 220px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0;
    z-index: 1001;
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.2s ease;
}

.dropdown-content a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text-color);
}

.dropdown-content a:hover {
    background: #f8fafc;
}

/* Main Content */
#main-content {
    flex: 1;
    width: 100%;
}

/* Hero Section */
.hero {
    position: relative;
    height: 60vh;
    width: 100%;
    /* Use a local image if available, or a high-quality fallback */
    background-image: url('sectores/moda imagenes/moda.png');
    background-size: cover;
    background-position: top center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 4rem;
    margin-bottom: 0;
    /* Remove margin to flow into next section */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: left;
    color: white;
    max-width: 900px;
    padding: 0 2rem;
    margin-top: 10rem;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Sections */
.section-container {
    max-width: 1400px;
    margin: 4rem auto 6rem;
    padding: 0 2rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 3rem;
    color: var(--text-color);
    text-align: left;
}

.section-title.centered {
    text-align: center;
}

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

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

.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}

/* Cards */
.card {
    background: transparent;
    border: none;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.card-image-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    margin-bottom: 1rem;
    background-color: #f1f5f9;
    /* Placeholder color */
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
    /* Remove inline-block spacing */
}

/* Home Page Specific Product Cards (Hide Price) */
.home-product-card .card-price {
    display: none;
}

/* Specific styling for smaller sector circles */
.sector-card .card-image-container {
    aspect-ratio: 1/1;
    border-radius: 50%;
    width: 100%;
    margin: 0 auto 0.5rem;
    max-width: 150px;
    /* Limit size */
}

.sector-card .card-title {
    font-size: 0.9rem;
    text-transform: capitalize;
}

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

.card-content {
    padding: 0.5rem 0;
}

.card-title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    color: var(--text-color);
}

.card-price {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Banner Section */
.banner-section {
    position: relative;
    height: 500px;
    width: 100%;
    background-size: cover;
    background-position: center;
    margin: 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-text {
    position: relative;
    z-index: 1;
    color: white;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    text-align: center;
    max-width: 900px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 0 1rem;
}

/* Filter Buttons */
.filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(212, 175, 55, 0.05);
}

.filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Footer */
footer {
    background: #ffffff;
    padding: 6rem 2rem 2rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
    margin-bottom: 6rem;
}

.footer-section h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

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

.footer-section a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-section a:hover {
    color: var(--text-color);
}

.footer-big-text {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 10vw;
    line-height: 1;
    color: var(--text-color);
    margin-bottom: 2rem;
    opacity: 0.9;
    letter-spacing: -2px;
}

.footer-bottom {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* Buttons */
.cta-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    display: inline-block;
}

.app-btn-success {
    background-color: #25D366 !important;
    /* WhatsApp Green / Commercial Green */
    color: white !important;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-outline {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary-color);
    border-radius: 0.25rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

/* Product Customizer */
.customizer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.preview-area {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: #f1f5f9;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    /* Smooth transition for resizing */
}

/* Format Modifiers */
.preview-area.format-reel {
    aspect-ratio: 9/16;
    max-width: 360px;
}

.preview-area.format-youtube {
    aspect-ratio: 16/9;
    max-width: 100%;
}

.preview-area.format-post {
    aspect-ratio: 1/1;
    max-width: 500px;
}

/* Default Fallback */
.preview-area:not([class*="format-"]) {
    aspect-ratio: 9/16;
    max-width: 360px;
}


.preview-image-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.draggable {
    pointer-events: auto;
    position: absolute;
    cursor: move;
    user-select: none;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    padding: 5px;
    transition: border 0.2s ease;
}

.draggable:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

.preview-text-title {
    color: white;
    font-family: var(--font-heading);
    font-size: 2rem;
    text-align: center;
    width: 100%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.preview-text-subtitle {
    color: white;
    font-family: var(--font-body);
    font-size: 1.2rem;
    text-align: center;
    width: 100%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.controls-area {
    background: #ffffff;
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    position: sticky;
    top: 6rem;
    /* Sticky when scrolling */
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Responsive */
@media (max-width: 1024px) {
    .nav-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .logo {
        order: 1;
        margin-bottom: 0.5rem;
    }

    .user-actions {
        order: 2;
        width: 100%;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .nav-links {
        order: 3;
        display: flex;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
        gap: 1.5rem;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    /* Hide scrollbar for cleaner look */
    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .customizer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .controls-area {
        position: static;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 0.5rem 0;
    }

    .hero {
        padding-left: 1.5rem;
        /* Reduce padding on mobile */
        justify-content: center;
        /* Center content on mobile */
        text-align: center;
        background-position: center;
    }

    .hero-content {
        margin-top: 0;
        /* Reset margin */
        padding: 0 1rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        /* Stack single column on mobile */
    }

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns on mobile as requested */
    }

    .footer-content.grid-4 {
        grid-template-columns: 1fr;
        /* Stack footer on mobile */
        text-align: center;
    }

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

    /* Sector Cards smaller on mobile 3-col */
    .sector-card .card-image-container {
        width: 70px;
        height: 70px;
    }

    .card-title {
        font-size: 0.9rem;
    }

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

    .footer-big-text {
        font-size: 15vw;
    }
}

/* Cookie Consent Banner */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    /* Hidden by default, shown via JS */
    border-top: 1px solid var(--border-color);
}

#cookie-banner .cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#cookie-banner p {
    font-size: 0.9rem;
    color: var(--text-color);
    margin: 0;
    flex: 1;
    min-width: 300px;
}

#cookie-banner .cookie-actions {
    display: flex;
    gap: 0.5rem;
}

#cookie-banner .btn-accept {
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

#cookie-banner .btn-accept:hover {
    opacity: 0.9;
}

/* Watermark Overlay */
.watermark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Allow interaction with elements below */
    z-index: 50;
    /* Ensure it is on top of everything in the preview */
    overflow: hidden;
    opacity: 0.3;
}

.watermark-pattern {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 4rem;
    transform: rotate(-30deg);
}

.watermark-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    user-select: none;
}