/* --- CONFIGURACIÓN GENERAL --- */
        :root {
            --gold: #d4a017;
            --dark-card: rgba(25, 25, 25, 0.95);
            --transition: 0.6s cubic-bezier(0.2, 1, 0.3, 1);
        }

        .main-container {
            max-width: 1100px;
            margin: 0 auto;
            font-family: 'Segoe UI', Arial, sans-serif;
            padding: 20px;
        }

        /* --- ACORDEÓN DE CATEGORÍAS --- */
        .main-container .options {
            display: flex;
            flex-direction: row;
            height: 400px;
            gap: 15px;
            margin-bottom: 50px;
        }

        .main-container .option {
            position: relative;
            flex: 0.5;
            min-width: 70px;
            border-radius: 20px;
            cursor: pointer;
            overflow: hidden;
            transition: flex var(--transition);
            background-size: cover;
            background-position: center;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .main-container .option.active {
            flex: 5;
            cursor: default;
        }

        .main-container .shadow {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 70%);
        }

        .main-container .label {
            display: flex;
            position: absolute;
            bottom: 20px;
            left: 15px;
            right: 15px;
            align-items: center;
        }

        .main-container .icone {
            min-width: 45px;
            height: 45px;
            background: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: black;
            font-size: 1.2rem;
            z-index: 2;
        }

        .main-container .info {
            margin-left: 15px;
            opacity: 0;
            transition: opacity 0.4s;
            white-space: nowrap;
        }

        .main-container .option.active .info {
            opacity: 1;
        }

        .main-container .info .main { color: var(--gold); font-weight: bold; font-size: 1.3rem; }

        /* --- SECCIONES DE CONTENIDO (ABAJO) --- */
        .main-container .category-content {
            display: none; /* Oculto por defecto */
            animation: slideUp 0.6s ease forwards;
        }

        .main-container .category-content.active-content {
            display: block; /* Solo se muestra el activo */
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .main-container .row {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-bottom: 40px;
        }

        .main-container .row-reverse { flex-direction: row-reverse; }

        .main-container .image-container { flex: 1; }
        
        /* Ajuste de anchos solicitado */
        .main-container .hero-row .image-container { flex: 1.8; } 
        .main-container .hero-row .text-content { flex: 1; }

        .main-container .image-container img {
            width: 100%;
            height: 350px;
            object-fit: cover;
            border-radius: 15px;
            display: block;
        }

        /* Estilos para filas extra compactas */
        .main-container .extra-row {
            gap: 20px;
            flex-direction: row-reverse;
        }

        .main-container .extra-row .small-image {
            flex: 0.9;
        }

        .main-container .extra-row .small-image img {
            height: 280px;
        }

        .main-container .extra-row .card-dark {
            flex: 0.9;
            padding: 20px;
        }


        .main-container .title-gold {
            color: var(--gold);
            font-family: serif;
            font-size: 2.2rem;
            margin-bottom: 15px;
        }

        .main-container .card-dark {
            background: var(--dark-card);
            padding: 25px;
            border-radius: 15px;
            line-height: 1.6;
            color: #ddd;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        /* Responsivo */
        /* Móviles pequeños */
        @media (max-width: 480px) {
            .main-container {
                padding: 10px;
            }
            .main-container .options {
                height: 300px;
                flex-direction: column;
                gap: 10px;
                margin-bottom: 30px;
            }
            .main-container .row, .main-container .row-reverse {
                flex-direction: column;
                text-align: center;
                gap: 15px;
                margin-bottom: 20px;
            }
            .main-container .image-container img {
                height: 200px;
            }
            .main-container .extra-row .small-image img {
                height: 180px;
            }
            .main-container .title-gold {
                font-size: 1.8rem;
            }
            .main-container .card-dark {
                padding: 15px;
            }
        }

        /* Móviles y tablets pequeños */
        @media (min-width: 481px) and (max-width: 768px) {
            .main-container {
                padding: 15px;
            }
            .main-container .options {
                height: 350px;
                flex-direction: column;
                gap: 15px;
                margin-bottom: 40px;
            }
            .main-container .row, .main-container .row-reverse {
                flex-direction: column;
                text-align: center;
                gap: 20px;
                margin-bottom: 30px;
            }
            .main-container .image-container img {
                height: 250px;
            }
            .main-container .extra-row .small-image img {
                height: 220px;
            }
            .main-container .title-gold {
                font-size: 2.0rem;
            }
            .main-container .card-dark {
                padding: 20px;
            }
        }

        /* Tablets */
        @media (min-width: 769px) and (max-width: 1024px) {
            .main-container {
                padding: 20px;
            }
            .main-container .options {
                height: 400px;
                flex-direction: row;
                gap: 20px;
                margin-bottom: 50px;
            }
            .main-container .row, .main-container .row-reverse {
                gap: 25px;
                margin-bottom: 35px;
            }
            .main-container .image-container img {
                height: 300px;
            }
            .main-container .extra-row .small-image img {
                height: 250px;
            }
            .main-container .title-gold {
                font-size: 2.2rem;
            }
        }

        /* Desktops */
        @media (min-width: 1025px) and (max-width: 1199px) {
            .main-container {
                padding: 25px;
            }
            .main-container .options {
                height: 450px;
                gap: 25px;
                margin-bottom: 60px;
            }
            .main-container .row, .main-container .row-reverse {
                gap: 35px;
                margin-bottom: 45px;
            }
            .main-container .image-container img {
                height: 380px;
            }
            .main-container .extra-row .small-image img {
                height: 300px;
            }
            .main-container .title-gold {
                font-size: 2.3rem;
            }
        }

        /* Desktops grandes */
        @media (min-width: 1200px) {
            .main-container {
                padding: 30px;
            }
            .main-container .options {
                height: 500px;
                gap: 30px;
                margin-bottom: 70px;
            }
            .main-container .row, .main-container .row-reverse {
                gap: 40px;
                margin-bottom: 50px;
            }
            .main-container .image-container img {
                height: 420px;
            }
            .main-container .extra-row .small-image img {
                height: 320px;
            }
            .main-container .title-gold {
                font-size: 2.5rem;
            }
        }