/* Definición de variables CSS para colores y sombras (Nueva paleta de revista de moda) */
        :root {
            --color-bg-light: #1A1A1A; /* Fondo muy oscuro, casi negro */
            --color-text-dark: #F8F8F8; /* Texto muy claro para contraste */
            --color-accent-gold: #B8860B; /* Dorado como acento elegante */
            --color-secondary-gray: #BBBBBB; /* Gris más claro para textos secundarios en fondo oscuro */
            --color-border-subtle: #444444; /* Borde sutil oscuro */
            --color-shadow-soft: rgba(0, 0, 0, 0.4); /* Sombra más visible en fondo oscuro */
        }

        /* Estilos generales del cuerpo de la página */
        body {
            font-family: 'VT323', monospace; /* Fuente principal para el cuerpo cambiada a pixel */
            background-color: var(--color-bg-light); /* Fondo oscuro para ver el canvas y el contenido */
            color: var(--color-text-dark); /* Color de texto claro */
            overflow-x: hidden;
            position: relative;
        }

        /* Eliminar pseudo-elemento de cuadrícula de fondo */
        body::before {
            content: none;
        }

        /* Canvas de animación de fondo para toda la página */
        #animacionFondo {
            position: fixed; /* Fijo para cubrir toda la ventana */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Detrás de todo el contenido */
        }

        /* Clases para texto con acentos (adaptadas al nuevo estilo) */
        .text-accent-gold {
            color: var(--color-accent-gold);
        }

        .text-secondary-gray {
            color: var(--color-secondary-gray);
        }

        /* Estilos para botones (adaptados al nuevo estilo) */
        .btn-elegant {
            background-color: #333333; /* Fondo oscuro para el botón */
            border: 1px solid var(--color-accent-gold);
            color: var(--color-accent-gold);
            padding: 0.75rem 1.5rem;
            border-radius: 0.25rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px var(--color-shadow-soft);
            font-family: 'VT323', monospace; /* Aplicar fuente pixel al botón */
        }

        .btn-elegant:hover {
            background-color: var(--color-accent-gold);
            color: var(--color-bg-light); /* Texto oscuro sobre dorado en hover */
            box-shadow: 0 4px 10px var(--color-shadow-soft);
            transform: translateY(-1px);
        }

        /* Estilos para tarjetas de contenido (adaptadas al nuevo estilo) */
        .card-elegant {
            background-color: rgba(30, 30, 30, 0.9); /* Fondo semi-transparente más oscuro */
            border: 1px solid var(--color-border-subtle);
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px var(--color-shadow-soft);
            border-radius: 0.5rem;
        }

        .card-elegant:hover {
            border-color: var(--color-accent-gold);
            box-shadow: 0 6px 16px var(--color-shadow-soft);
            transform: translateY(-3px);
        }

        /* Estilos para la caja de mensaje (modal custom) */
        #cajaMensaje {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(30, 30, 30, 0.95); /* Fondo semi-transparente oscuro */
            border: 1px solid var(--color-accent-gold);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: 0 0 20px var(--color-shadow-soft);
            z-index: 1000;
            display: none;
            text-align: center;
            color: var(--color-text-dark);
            font-family: 'VT323', monospace; /* Aplicar fuente pixel al mensaje */
        }

        #cajaMensaje button {
            margin-top: 1rem;
            padding: 0.5rem 1.5rem;
            background-color: var(--color-accent-gold);
            color: #FFFFFF;
            border: none;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: background-color 0.3s;
            font-family: 'VT323', monospace; /* Aplicar fuente pixel al botón del mensaje */
        }

        #cajaMensaje button:hover {
            background-color: #A0780A; /* Tono más oscuro del dorado */
        }

        /* Estilos para el aside de perfil (CV) */
        #panelLateralPerfil {
            position: fixed;
            top: 0;
            height: 100%;
            background-color: rgba(30, 30, 30, 0.95); /* Fondo semi-transparente oscuro */
            border-left: 1px solid var(--color-border-subtle);
            box-shadow: -5px 0 15px var(--color-shadow-soft);
            z-index: 1001;
            transition: right 0.5s ease-out;
            padding: 2.5rem 2rem;
            overflow-y: auto; /* IMPORTANTE: Habilita el scroll para este aside */
            width: 100%;
            right: -100%;
            color: var(--color-text-dark);
            /* Ajustado padding-bottom para dejar más espacio al botón sticky */
            padding-bottom: 1.5rem; /* Reducido para que el botón esté más abajo, dejando espacio */
            font-family: 'VT323', monospace; /* Aplicar fuente pixel al panel */
        }

        #panelLateralPerfil.activo-aside {
            right: 0;
        }
        
        /* Estilos para el aside de nosotros, blog, servicios, tienda, equipo y contacto (Ahora con mayor ancho) */
        #panelLateralNosotros, #panelLateralBlog, #panelLateralServicios, #panelLateralTienda, #panelLateralEquipo, #panelLateralContacto, #panelLateralFAQ, #panelLateralPoliticas, #panelLateralTerminos, #panelLateralProyectos {
            position: fixed;
            top: 0;
            height: 100%; /* Asegura que el aside cubra toda la altura de la ventana */
            background-color: rgba(30, 30, 30, 0.97); /* Fondo más sólido oscuro */
            border-left: 1px solid var(--color-border-subtle);
            box-shadow: -5px 0 15px var(--color-shadow-soft);
            z-index: 1003; /* Aumentado para que esté sobre el menú */
            transition: right 0.5s ease-out;
            padding: 2.5rem 2rem;
            overflow-y: auto; /* IMPORTANTE: Habilita el scroll para estos asides */
            width: 100%;
            right: -100%;
            color: var(--color-text-dark);
            font-family: 'VT323', monospace; /* Aplicar fuente pixel al panel */
        }

        #panelLateralNosotros.activo-aside, #panelLateralBlog.activo-aside, #panelLateralServicios.activo-aside, #panelLateralTienda.activo-aside, #panelLateralEquipo.activo-aside, #panelLateralContacto.activo-aside, #panelLateralFAQ.activo-aside, #panelLateralPoliticas.activo-aside, #panelLateralTerminos.activo-aside, #panelLateralProyectos.activo-aside {
            right: 0;
        }

        /* Estilos para el botón de imagen de perfil */
        #botonImagenPerfil {
            /* Ahora w-16 h-16 para que sea del mismo tamaño que el logo */
            width: 64px; 
            height: 64px;
            border-radius: 50%;
            border: 2px solid var(--color-accent-gold);
            object-fit: cover;
            cursor: pointer;
            position: relative; /* Necesario para posicionar el pseudo-elemento */
            overflow: hidden;
            box-shadow: 0 2px 5px var(--color-shadow-soft);
            transition: all 0.3s ease;
        }

        #botonImagenPerfil:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 10px var(--color-shadow-soft);
        }

        /* Animación de pulsación para botonImagenPerfil y areaLogo */
        @keyframes animacion-pulso {
            0% {
                box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.7);
                transform: scale(1);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(184, 134, 11, 0);
                transform: scale(1.1);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(184, 134, 11, 0);
                transform: scale(1);
            }
        }

        .animacion-pulso {
            animation: animacion-pulso 1s infinite; /* Aplicar la animación de pulsación, ahora más rápida */
        }


        /* Estilos para la imagen de perfil dentro del aside */
        #imagenPerfilPanelLateral {
            width: 192px; /* Aumentado en un 60% (120 * 1.6 = 192) */
            height: 192px; /* Aumentado en un 60% */
            border-radius: 50%;
            border: 3px solid var(--color-accent-gold);
            box-shadow: 0 0 10px var(--color-shadow-soft);
            object-fit: cover;
        }

        /* Estilos para el botón de cerrar el aside */
        .botonCerrarAside {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--color-secondary-gray);
            font-size: 1.8rem;
            cursor: pointer;
            z-index: 1004; /* Aumentado para que esté sobre el aside y sea clicable */
            transition: all 0.3s ease;
        }
        .botonCerrarAside:hover {
            color: var(--color-accent-gold);
            transform: rotate(90deg);
        }
        
        /* Estilos para el contenedor del contenido principal del hero */
        .contenido-principal {
            position: relative;
            z-index: 20;
            padding: 20px; /* Reducido de 30px */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        /* Re-habilitar estilos de controles de canvas */
        .controles-lienzo {
            z-index: 30;
            background: rgba(30, 30, 30, 0.7); /* Fondo más oscuro para controles */
            padding: 12px;
            border-radius: 8px;
            border: 1px solid var(--color-accent-gold);
            box-shadow: 0 0 10px var(--color-shadow-soft);
            width: 100%;
            max-width: 300px;
            /* Modificación: Ajustar el margen superior para acercar a la sección de texto */
            margin-top: -5px; /* Ajustado para menor espacio */
            margin-left: auto;
            margin-right: auto;
            display: block; /* Asegurarse de que sea visible */
            font-family: 'VT323', monospace; /* Aplicar la fuente VT323 */
            font-size: 1.2rem;
        }
        
        .controles-lienzo button {
            background: transparent;
            border: 1px solid var(--color-accent-gold);
            color: var(--color-accent-gold);
            padding: 5px 10px;
            margin: 0 3px 5px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'VT323', monospace; /* Aplicar la fuente VT323 */
            font-size: 18px; /* Slightly larger for visibility */
        }
        
        .estadisticas {
            color: var(--color-text-dark); /* Color de texto claro para las estadísticas */
            font-size: 18px; /* Match button size */
            margin-top: 5px;
            text-align: center;
            font-family: 'VT323', monospace; /* Aplicar la fuente VT323 */
        }
        
        /* Mejoras responsive */
        @media (min-width: 768px) {
            #encabezado {
                padding: 1.5rem 3rem;
            }

            /* ANCHO UNIFICADO PARA TODOS LOS PANELES LATERALES - 75% */
            #panelLateralPerfil, #panelLateralNosotros, #panelLateralBlog, #panelLateralServicios, #panelLateralTienda, #panelLateralEquipo, #panelLateralContacto, #panelLateralFAQ, #panelLateralPoliticas, #panelLateralTerminos, #panelLateralProyectos {
                width: 75%; /* Ancho ampliado para todos los paneles laterales en escritorio */
                right: -75%;
                /* Ajuste para PC: reducir padding-bottom para que el botón esté más cerca del borde inferior */
                padding-bottom: 0.5rem; /* Ajustado para PC: reduce el padding para bajar el botón */
            }
            #panelLateralPerfil.activo-aside, #panelLateralNosotros.activo-aside, #panelLateralBlog.activo-aside, #panelLateralServicios.activo-aside, #panelLateralTienda.activo-aside, #panelLateralEquipo.activo-aside, #panelLateralContacto.activo-aside, #panelLateralFAQ.activo-aside, #panelLateralPoliticas.activo-aside, #panelLateralTerminos.activo-aside, #panelLateralProyectos.activo-aside {
                right: 0;
            }

            #panelLateralPerfil h3, #panelLateralNosotros h2, #panelLateralBlog h2, #panelLateralServicios h2, #panelLateralTienda h2, #panelLateralEquipo h2, #panelLateralContacto h2, #panelLateralFAQ h2, #panelLateralPoliticas h2, #panelLateralTerminos h2, #panelLateralProyectos h2 {
                font-size: 2rem;
            }
            #panelLateralPerfil p, #panelLateralNosotros p, #panelLateralBlog p, #panelLateralServicios p, #panelLateralTienda p, #panelLateralEquipo p, #panelLateralContacto p, #panelLateralFAQ p, #panelLateralPoliticas p, #panelLateralTerminos p, #panelLateralProyectos p {
                font-size: 1rem;
            }
            #panelLateralPerfil h4, #panelLateralNosotros h3, #panelLateralBlog h3, #panelLateralServicios h3, #panelLateralTienda h3, #panelLateralEquipo h3, #panelLateralContacto h3, #panelLateralFAQ h3, #panelLateralPoliticas h3, #panelLateralTerminos h3, #panelLateralProyectos h3 {
                font-size: 1.5rem;
            }
            #panelLateralPerfil ul li, #panelLateralNosotros ul li, #panelLateralBlog ul li, #panelLateralServicios .card-elegant, #panelLateralTienda .card-elegant, #panelLateralEquipo .card-elegant, #panelLateralContacto .card-elegant, #panelLateralFAQ .faq-item, #panelLateralPoliticas .politicas-contenido p, #panelLateralTerminos .terminos-contenido p, #panelLateralProyectos .card-elegant {
                font-size: 1rem;
            }

            .fila-controles {
                display: flex;
                justify-content: space-between;
            }
        }
        
        @media (max-width: 767px) {
            .contenido-principal h1 {
                font-size: 2rem !important;
            }
            .contenido-principal .titulo-principal {
                font-size: 3rem !important;
            }
            .contenido-principal .subtitulo-1 {
                font-size: 1.5rem !important;
            }
            .contenido-principal .subtitulo-2 {
                font-size: 1.2rem !important;
            }

            .fila-controles {
                display: flex;
                flex-direction: column; /* Apila los botones verticalmente */
                align-items: center;
            }
            .controles-lienzo button {
                width: 100%; /* Botones de ancho completo */
                margin-bottom: 8px;
            }

            /* Ajuste de padding-bottom para móvil si es necesario */
            #panelLateralPerfil, #panelLateralNosotros, #panelLateralBlog, #panelLateralServicios, #panelLateralTienda, #panelLateralEquipo, #panelLateralContacto, #panelLateralFAQ, #panelLateralPoliticas, #panelLateralTerminos, #panelLateralProyectos {
                padding-bottom: 0.5rem; /* Ajustado para móviles: reduce el padding para subir el botón */
            }
        }
        
        /* Animación para el título (más sutil) */
        @keyframes animacion-titulo {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        
        .animacion-titulo {
            animation: animacion-titulo 1.5s ease-out forwards;
            opacity: 0; /* Oculto inicialmente */
        }
        
        /* Mejora para el contenido del hero */
        .contenedor-texto-principal {
            background: rgba(30, 30, 30, 0.9); /* Fondo oscuro semi-transparente */
            padding: 20px; /* Reducido de 30px */
            border-radius: 10px;
            box-shadow: 0 8px 20px var(--color-shadow-soft);
            margin-bottom: 20px;
            border: 1px solid var(--color-border-subtle);
        }
        /* Reduce el margin-bottom del h1 dentro del contenedor-texto-principal */
        .contenedor-texto-principal h1 {
            margin-bottom: 1rem; /* Reduced from 1.5rem (mb-6) */
        }


        /* ===== MENÚ DESLIZANTE ===== */
        #menuDeslizante {
            position: fixed;
            top: 0;
            left: -300px;
            width: 300px;
            height: 100%;
            background-color: rgba(30, 30, 30, 0.95); /* Fondo semi-transparente oscuro */
            border-right: 1px solid var(--color-border-subtle);
            box-shadow: 5px 0 15px var(--color-shadow-soft);
            z-index: 1002;
            transition: left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            padding: 2rem 0;
            overflow-y: auto; /* IMPORTANTE: Habilita el scroll para el menú */
            color: var(--color-text-dark);
            font-family: 'VT323', monospace; /* Aplicar fuente pixel al menú */
        }

        #menuDeslizante.activo {
            left: 0;
        }

        #menuDeslizante ul {
            display: flex;
            flex-direction: column;
            padding: 1rem 0;
        }

        #menuDeslizante li {
            width: 100%;
            border-bottom: 1px solid var(--color-border-subtle);
            transition: all 0.3s ease;
        }

        #menuDeslizante li:hover {
            background-color: rgba(255, 255, 255, 0.03); /* Ligeramente más claro en hover */
        }

        #menuDeslizante a {
            display: flex;
            align-items: center;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            color: var(--color-text-dark);
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
            font-family: 'VT323', monospace; /* Aplicar fuente pixel a los enlaces del menú */
        }

        #menuDeslizante a:hover {
            color: var(--color-accent-gold);
            padding-left: 2.2rem;
        }

        #menuDeslizante a::before {
            content: "•"; /* Punto como viñeta elegante */
            position: absolute;
            left: 1.5rem;
            color: var(--color-accent-gold);
            opacity: 0;
            transition: all 0.3s ease;
            transform: translateX(-10px);
        }

        #menuDeslizante a:hover::before {
            opacity: 1;
            transform: translateX(0);
        }

        .icono-menu {
            margin-right: 15px;
            font-size: 1rem;
            color: var(--color-secondary-gray);
            min-width: 25px;
            text-align: center;
        }

        #botonCerrarMenu {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--color-secondary-gray);
            font-size: 1.8rem;
            cursor: pointer;
            z-index: 1003;
            transition: all 0.3s ease;
        }
        
        #botonCerrarMenu:hover {
            color: var(--color-accent-gold);
            transform: rotate(90deg);
        }

        .encabezado-menu {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid var(--color-border-subtle);
            margin-bottom: 1rem;
            text-align: center;
        }

        .encabezado-menu h2 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: var(--color-accent-gold);
            font-family: 'VT323', monospace; /* Mantener Playfair para títulos si se desea un contraste */
        }

        .encabezado-menu p {
            color: var(--color-secondary-gray);
            font-size: 0.9rem;
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
        }

        .pie-menu {
            padding: 1.5rem 2rem;
            margin-top: 2rem;
            border-top: 1px solid var(--color-border-subtle);
            text-align: center;
            font-size: 0.8rem;
            color: var(--color-secondary-gray);
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
        }

        .capa-superpuesta-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .capa-superpuesta-menu.visible {
            opacity: 1;
            visibility: visible;
        }

        /* Estilos para el panel lateral de perfil (CV) */
        #panelLateralPerfil h3, #panelLateralPerfil p, #panelLateralPerfil h4 {
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
            color: var(--color-text-dark);
        }
        #panelLateralPerfil h3 {
            color: var(--color-accent-gold);
            font-family: 'VT323', monospace; /* Mantener Playfair para títulos si se desea un contraste */
        }
        #panelLateralPerfil h4 {
            color: var(--color-accent-gold);
            font-family: 'VT323', monospace; /* Mantener Playfair para títulos si se desea un contraste */
        }
        
        /* Habilidades */
        .item-habilidad {
            margin-bottom: 1rem;
        }

        .barra-habilidad-fondo {
            background-color: var(--color-border-subtle);
            border-radius: 9999px; /* Tailwind's rounded-full */
            height: 0.625rem; /* Tailwind's h-2.5 */
            overflow: hidden; /* Ensure fill stays within bounds */
        }

        .barra-habilidad-relleno {
            background-color: var(--color-accent-gold);
            height: 100%;
            border-radius: 9999px; /* Tailwind's rounded-full */
            width: 0; /* Initial width for animation */
            transition: width 1s ease-out; /* Animation duration and easing */
        }


        /* Estilos para la sección de frases (adaptada al nuevo estilo) */
        /* Eliminamos los estilos directos de #frases-clave ya que el contenido se mueve al aside */

        /* Responsive para la sección de frases (ahora dentro del aside) */
        @media (min-width: 768px) {
            .frases-container ul {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .frases-container ul {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Estilos para el encabezado */
        #encabezado {
            background-color: #2a2a2a; /* Fondo oscuro del footer */
            backdrop-filter: none;
            box-shadow: 0 4px 10px var(--color-shadow-soft);
            border-radius: 0 0 1rem 1rem; /* Solo esquinas inferiores redondeadas */
            border: 1px solid var(--color-accent-gold); /* Borde para la animación */
            /* Modificación: Quitar el margen superior y añadir clases fixed */
            /* Se ha movido el p-4, mx-auto, w-x/y a un contenedor interno */
            animation: flashing-border 2s infinite alternate; /* Animación de borde parpadeante */
        }
        /* Animación del borde parpadeante */
        @keyframes flashing-border {
            0% {
                box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.7);
                border-color: rgba(184, 134, 11, 0.5);
            }
            50% {
                box-shadow: 0 0 15px 5px rgba(184, 134, 11, 1);
                border-color: rgba(184, 134, 11, 1);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.7);
                border-color: rgba(184, 134, 11, 0.5);
            }
        }

        #areaLogo {
            border: 2px solid var(--color-accent-gold);
            box-shadow: 0 0 8px var(--color-shadow-soft);
        }
        #areaLogo img {
            filter: grayscale(100%) brightness(0.8) sepia(1) hue-rotate(10deg) saturate(2); /* Efecto para que el logo se vea más "dorado" o elegante */
        }

        /* Estilos para el pie de página */
        #piePrincipal {
            background-color: #2a2a2a; /* Fondo oscuro elegante */
            color: #FFFFFF; /* Texto blanco */
            padding: 1rem 1.5rem; /* Reducido de 1.5rem a 1rem */
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem 1rem 0 0;
            text-align: left; /* Alineado a la izquierda */
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* Alinea los elementos al inicio (izquierda) */
            gap: 1.5rem;
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
            margin-top: 0;
        }

        /* Ajuste de padding para pantallas de escritorio (md y superiores) */
        @media (min-width: 768px) {
            #piePrincipal {
                padding: 1rem 1.5rem; /* Reduce el padding vertical para escritorio */
            }
        }

        #piePrincipal p {
            color: #E0E0E0; /* Gris claro para el texto general */
            font-size: 0.95rem;
            line-height: 1.5;
        }
        #piePrincipal p a {
            color: var(--color-accent-gold); /* Dorado para enlaces en footer */
            transition: color 0.3s ease;
        }
        #piePrincipal p a:hover {
            color: #FFD700; /* Dorado más brillante al pasar el ratón */
        }

        /* Contenedor principal de la burbuja flotante */
        .contenedor-burbuja-principal {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 999;
            display: flex;
            flex-direction: column-reverse; /* Las burbujas de iconos se apilan hacia arriba */
            align-items: flex-end;
            gap: 10px; /* Espacio entre el botón principal y los iconos expandidos */
        }

        /* Botón principal flotante */
        .boton-principal-flotante {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--color-accent-gold);
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            border: none;
            transition: all 0.3s ease;
            position: relative; /* Necesario para que el z-index funcione correctamente */
            z-index: 1000; /* Asegura que esté por encima de las burbujas sociales cuando están ocultas */
        }

        .boton-principal-flotante:hover {
            background-color: #A0780A;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .boton-principal-flotante svg {
            width: 32px;
            height: 32px;
        }

        /* Contenedor para los enlaces sociales individuales - inicialmente oculto */
        .enlaces-sociales-flotantes {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            /* Aumentar la duración de la transición para un cierre y apertura más suaves */
            transition: max-height 0.6s ease-in-out, opacity 0.6s ease-in-out;
        }

        .enlaces-sociales-flotantes.activo {
            max-height: 300px; /* Un valor lo suficientemente grande para contener todos los iconos */
            opacity: 1;
        }

        /* Iconos sociales individuales dentro de la burbuja flotante */
        .icono-social-flotante {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--color-accent-gold); /* Mismo color que el botón principal */
            color: #FFFFFF;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            /* Transición para un escalado y opacidad suaves, ahora manejado por JS para el delay */
            transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
            transform: scale(0); /* Estado inactivo por defecto */
            opacity: 0; /* Estado inactivo por defecto */
        }

        .enlaces-sociales-flotantes.activo .icono-social-flotante {
            transform: scale(1); /* Escala al 100% cuando está activo */
            opacity: 1; /* Opacidad completa cuando está activo */
            /* El transition-delay se aplica dinámicamente con JavaScript para el efecto escalonado */
        }


        .icono-social-flotante:hover {
            background-color: #A0780A;
            transform: scale(1.1); /* Ligeramente más grande al pasar el ratón */
            box-shadow: 0 4-x 12px rgba(0, 0, 0, 0.2);
        }
        
        /* NUEVO: Estilos para el panel de nosotros, blog, servicios, tienda, equipo y contacto */
        .nosotros-container, .blog-container, .servicios-container, .tienda-container, .equipo-container, .contacto-container, .faq-container, .politicas-container, .terminos-container, .proyectos-container {
            /* padding-bottom: 80px; YA SE HA MOVIDO ESTE ESTILO AL ASIDE PRINCIPAL */
            /* Se ha eliminado max-height para permitir que el aside se estire según el contenido y el padding */
            /* se ha añadido un min-height al aside para asegurar que cubra toda la ventana */
            overflow-y: auto; /* Mantener el scroll si el contenido es muy largo */
            padding-right: 10px; /* Mantener el padding para el scrollbar */
        }
        
        /* Estilos para la barra de desplazamiento del cuerpo principal */
        /* Aplica a todo el scrollbar del documento */
        ::-webkit-scrollbar {
            width: 12px; /* Ancho de la barra de desplazamiento vertical */
            height: 12px; /* Altura de la barra de desplazamiento horizontal */
        }

        /* Color de fondo de la pista de la barra de desplazamiento */
        ::-webkit-scrollbar-track {
            background: #4A4A4A; /* Un gris más claro para mejor visibilidad */
            border-radius: 10px;
        }

        /* Estilo del "pulgar" (la parte arrastrable de la barra de desplazamiento) */
        ::-webkit-scrollbar-thumb {
            background-color: #B8860B; /* Tu color dorado de acento para el pulgar */
            border-radius: 10px;
            border: 3px solid #666666; /* Un borde gris más claro para que el pulgar "flote" */
        }

        /* Estilo del pulgar al pasar el ratón por encima */
        ::-webkit-scrollbar-thumb:hover {
            background-color: #D4AF37; /* Un dorado un poco más claro al pasar el ratón */
        }

        /* Para las esquinas donde se encuentran las barras de desplazamiento (opcional) */
        ::-webkit-scrollbar-corner {
            background: #1A1A1A; /* Color del fondo de la esquina */
        }

        /* Estilos específicos para las barras de desplazamiento dentro de los asides */
        /* Esto sobreescribe los estilos generales para los asides */
        #menuDeslizante::-webkit-scrollbar,
        #panelLateralPerfil::-webkit-scrollbar,
        #panelLateralNosotros::-webkit-scrollbar, 
        #panelLateralBlog::-webkit-scrollbar, 
        #panelLateralServicios::-webkit-scrollbar, 
        #panelLateralTienda::-webkit-scrollbar, 
        #panelLateralEquipo::-webkit-scrollbar, 
        #panelLateralContacto::-webkit-scrollbar, 
        #panelLateralFAQ::-webkit-scrollbar, 
        #panelLateralPoliticas::-webkit-scrollbar, 
        #panelLateralTerminos::-webkit-scrollbar, 
        #panelLateralProyectos::-webkit-scrollbar,
        #blogModal .modal-content::-webkit-scrollbar /* Asegurarse de que el modal del blog también tenga su scrollbar estilizado */
        {
            width: 8px; /* Ancho más delgado para las barras de desplazamiento de los asides y el modal */
        }
        
        #menuDeslizante::-webkit-scrollbar-track,
        #panelLateralPerfil::-webkit-scrollbar-track,
        #panelLateralNosotros::-webkit-scrollbar-track, 
        #panelLateralBlog::-webkit-scrollbar-track, 
        #panelLateralTienda::-webkit-scrollbar-track, 
        #panelLateralServicios::-webkit-scrollbar-track, 
        #panelLateralEquipo::-webkit-scrollbar-track, 
        #panelLateralContacto::-webkit-scrollbar-track, 
        #panelLateralFAQ::-webkit-scrollbar-track, 
        #panelLateralPoliticas::-webkit-scrollbar-track, 
        #panelLateralTerminos::-webkit-scrollbar-track, 
        #panelLateralProyectos::-webkit-scrollbar-track,
        #blogModal .modal-content::-webkit-scrollbar-track
        {
            background: #3A3A3A; /* Fondo de scrollbar oscuro para asides y modal, más visible */
            border-radius: 4px;
        }
        
        #menuDeslizante::-webkit-scrollbar-thumb,
        #panelLateralPerfil::-webkit-scrollbar-thumb,
        #panelLateralNosotros::-webkit-scrollbar-thumb, 
        #panelLateralBlog::-webkit-scrollbar-thumb, 
        #panelLateralServicios::-webkit-scrollbar-thumb, 
        #panelLateralTienda::-webkit-scrollbar-thumb, 
        #panelLateralEquipo::-webkit-scrollbar-thumb, 
        #panelLateralContacto::-webkit-scrollbar-thumb, 
        #panelLateralFAQ::-webkit-scrollbar-thumb, 
        #panelLateralPoliticas::-webkit-scrollbar-thumb, 
        #panelLateralTerminos::-webkit-scrollbar-thumb, 
        #panelLateralProyectos::-webkit-scrollbar-thumb,
        #blogModal .modal-content::-webkit-scrollbar-thumb
        {
            background: var(--color-accent-gold); /* Pulgar dorado para asides y modal */
            border-radius: 4px;
            border: 2px solid #4A4A4A; /* Borde más delgado y visible para asides */
        }
        
        #menuDeslizante::-webkit-scrollbar-thumb:hover,
        #panelLateralPerfil::-webkit-scrollbar-thumb:hover,
        #panelLateralNosotros::-webkit-scrollbar-thumb:hover, 
        #panelLateralBlog::-webkit-scrollbar-thumb:hover, 
        #panelLateralServicios::-webkit-scrollbar-thumb:hover, 
        #panelLateralTienda::-webkit-scrollbar-thumb:hover, 
        #panelLateralEquipo::-webkit-scrollbar-thumb:hover, 
        #panelLateralContacto::-webkit-scrollbar-thumb:hover, 
        #panelLateralFAQ::-webkit-scrollbar-thumb:hover, 
        #panelLateralPoliticas::-webkit-scrollbar-thumb:hover, 
        #panelLateralTerminos::-webkit-scrollbar-thumb:hover,
        #panelLateralProyectos::-webkit-scrollbar-thumb:hover,
        #blogModal .modal-content::-webkit-scrollbar-thumb:hover
        {
            background: #A0780A; /* Dorado más oscuro al pasar el ratón para asides y modal */
        }

        /* Para navegadores Firefox (soporte limitado, pero buena práctica incluirlo) */
        /* Nota: Firefox no soporta el mismo nivel de personalización que WebKit */
        /* Aplica a todo el documento */
        * {
            scrollbar-width: thin; /* 'auto' | 'thin' | 'none' */
            scrollbar-color: var(--color-accent-gold) #4A4A4A; /* thumb color track color */
        }
        
        /* NUEVOS ESTILOS PARA SERVICIOS, TIENDA, EQUIPO y CONTACTO */
        .icono-servicio {
            background-color: rgba(184, 134, 11, 0.1);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            transition: all 0.3s ease;
        }
        
        .tarjeta-servicio:hover .icono-servicio {
            background-color: rgba(184, 134, 11, 0.2);
            transform: scale(1.1);
        }
        
        .tarjeta-servicio h3 {
            position: relative;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .tarjeta-servicio h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 2px;
            background-color: var(--color-accent-gold);
            transition: width 0.3s ease;
        }
        
        .tarjeta-servicio:hover h3::after {
            width: 80px;
        }

        /* Estilo para imágenes de producto en la tienda y proyectos */
        .imagen-producto, .imagen-proyecto {
            width: 100%;
            height: 250px; /* Altura fija para las imágenes */
            object-fit: cover;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            border: 1px solid var(--color-border-subtle);
        }

        /* Estilos para las tarjetas de miembro del equipo */
        .tarjeta-miembro-equipo {
            background-color: rgba(30, 30, 30, 0.9); /* Fondo oscuro */
            border: 1px solid var(--color-border-subtle);
            box-shadow: 0 4px 12px var(--color-shadow-soft);
            border-radius: 0.5rem;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
        }
        .tarjeta-miembro-equipo:hover {
            border-color: var(--color-accent-gold);
            box-shadow: 0 6px 16px var(--color-shadow-soft);
            transform: translateY(-3px);
        }
        .imagen-miembro-equipo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1rem;
            border: 2px solid var(--color-accent-gold);
            box-shadow: 0 2px 5px var(--color-shadow-soft);
        }
        .tarjeta-miembro-equipo h3 {
            font-family: 'VT323', monospace; /* Mantener Playfair para títulos si se desea un contraste */
            color: var(--color-accent-gold);
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }
        .tarjeta-miembro-equipo p {
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
            color: var(--color-secondary-gray);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        /* Estilos para el formulario de contacto */
        .formulario-contacto label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--color-text-dark);
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
        }

        .formulario-contacto input[type="text"],
        .formulario-contacto input[type="email"],
        .formulario-contacto textarea {
            width: 100%;
            padding: 0.75rem;
            margin-bottom: 1rem;
            border: 1px solid var(--color-border-subtle);
            border-radius: 0.25rem;
            background-color: #333333; /* Fondo oscuro para inputs */
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
            color: var(--color-text-dark);
        }
        .formulario-contacto input[type="text"]:focus,
        .formulario-contacto input[type="email"]:focus,
        .formulario-contacto textarea:focus {
            outline: none;
            border-color: var(--color-accent-gold);
            box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.2);
        }

        .formulario-contacto textarea {
            min-height: 120px;
            resize: vertical;
        }

        .formulario-contacto button[type="submit"] {
            width: 100%;
            background-color: var(--color-accent-gold);
            color: #FFFFFF;
            padding: 1rem;
            border: none;
            border-radius: 0.5rem;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: bold;
            transition: background-color 0.3s ease, transform 0.2s ease;
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
        }
        .formulario-contacto button[type="submit"]:hover {
            background-color: #A0780A;
            transform: translateY(-2px);
        }
        
        /* Botón de menú móvil */
        /* Eliminamos el estilo de z-index para este botón, ya que será eliminado del HTML */

        /* Estilos para el contenido de frases dentro del aside (anteriormente .frases-section) */
        .contenido-frases {
            background-color: #333333; /* Fondo oscuro sólido para la sección */
            border-radius: 0.75rem;
            padding: 3rem 1.5rem;
            margin-top: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 8px 25px var(--color-shadow-soft);
            border: 1px solid var(--color-border-subtle);
        }

        .contenido-frases h2 {
            font-size: 2.2rem;
            font-weight: bold;
            margin-bottom: 2rem;
            color: var(--color-text-dark);
            text-align: center;
            font-family: 'VT323', monospace; /* Mantener Playfair para títulos si se desea un contraste */
        }

        .contenido-frases ul {
            list-style: none;
            padding: 0;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.2rem; /* Espacio entre los elementos de la lista */
        }

        .contenido-frases li {
            background-color: rgba(40, 40, 40, 0.9); /* Fondo más claro semi-transparente para cada frase */
            padding: 1rem 1.5rem;
            border-radius: 0.4rem;
            border-left: 3px solid var(--color-accent-gold); /* Borde sutil dorado */
            box-shadow: 0 2px 8px var(--color-shadow-soft);
            font-size: 1rem;
            line-height: 1.6;
            color: var(--color-text-dark);
            position: relative;
            padding-left: 1.5rem; /* Eliminar espacio extra para el icono si no se usa */
            transition: all 0.2s ease-in-out;
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
        }
        .contenido-frases li:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px var(--color-shadow-soft);
            border-left-color: #A0780A; /* Tono más oscuro del dorado al pasar el ratón */
        }

        /* Estilos específicos para las entradas de blog (modificados para parecer tarjetas de tienda) */
        .entrada-blog {
            background-color: rgba(30, 30, 30, 0.9); /* Fondo semi-transparente más oscuro */
            border: 1px solid var(--color-border-subtle);
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px var(--color-shadow-soft);
            border-radius: 0.5rem;
            padding: 1.5rem; /* Reduced padding slightly to match product cards */
            text-align: center;
            cursor: pointer;
        }

        .entrada-blog:hover {
            border-color: var(--color-accent-gold);
            box-shadow: 0 6px 16px var(--color-shadow-soft);
            transform: translateY(-3px);
        }

        .entrada-blog img {
            width: 100%; /* Ensure image takes full width of its container */
            max-width: 100%; /* Ensures image doesn't overflow its container */
            /* Cambiado de altura fija a aspect-ratio para mantener la forma cuadrada */
            aspect-ratio: 1 / 1; /* Forzamos un aspecto cuadrado (1080x1080) */
            object-fit: cover; /* Covers the area, cropping if aspect ratio is different */
            display: block; /* Removes extra space below image */
            border-radius: 0.5rem;
            margin-bottom: 1rem; /* Reduced margin to match product cards */
            border: 1px solid var(--color-border-subtle);
        }

        .entrada-blog h3 {
            font-family: 'VT323', monospace; /* Mantener Playfair para títulos si se desea un contraste */
            color: var(--color-accent-gold);
            font-size: 1.5rem; /* Adjusted font size for blog titles to match product titles */
            margin-bottom: 0.5rem; /* Adjusted margin to match product titles */
        }

        .entrada-blog .blog-preview-text {
            display: none; /* Hide the preview text by default */
        }

        /* Responsive grid for blog entries */
        .blog-container .grid {
            grid-template-columns: 1fr; /* Default to single column on small screens */
            gap: 2rem; /* Consistent gap */
        }

        @media (min-width: 768px) {
            .blog-container .grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
            }
        }

        @media (min-width: 1024px) {
            .blog-container .grid {
                grid-template-columns: repeat(3, 1fr); /* 3 columns on large screens */
            }
        }

        /* Estilos para FAQ (details/summary) */
        .faq-item {
            text-align: left;
            margin-bottom: 1.5rem;
            border-left: 3px solid var(--color-accent-gold);
        }
        .faq-item details {
            cursor: pointer;
        }
        .faq-item summary {
            font-family: 'VT323', monospace; /* Mantener Playfair para títulos si se desea un contraste */
            font-size: 1.2rem;
            font-weight: 700;
            padding: 0.5rem 1rem;
            color: var(--color-text-dark);
            background-color: rgba(40, 40, 40, 0.7); /* Fondo oscuro */
            border-radius: 0.3rem;
            transition: background-color 0.2s ease;
        }
        .faq-item summary:hover {
            background-color: rgba(40, 40, 40, 0.9); /* Fondo más oscuro en hover */
        }
        .faq-item summary::marker {
            color: var(--color-accent-gold); /* Color del marcador */
        }
        .faq-item p {
            padding: 1rem;
            background-color: #333333; /* Fondo oscuro */
            border-top: 1px solid var(--color-border-subtle);
            border-radius: 0 0 0.3rem 0.3rem;
            font-size: 0.95rem;
            line-height: 1.5;
            color: var(--color-secondary-gray);
            font-family: 'VT323', monospace; /* Aplicar fuente pixel */
        }

        /* Estilos para el contenedor del botón sticky en los asides */
        .sticky-bottom-button-wrapper {
            position: sticky;
            bottom: 0; /* Asegura que el wrapper esté pegado al fondo del aside */
            left: 0;
            right: 0;
            padding: 20px 0; /* Ajustado a 20px de padding vertical */
            background-color: transparent; /* Fondo transparente */
            border-top: none; /* Sin borde superior */
            box-shadow: none; /* Sin sombra */
            z-index: 10;
            width: 100%;
            display: flex;
            justify-content: center;
            /* Añadido: Margen superior para empujar el botón hacia abajo desde el contenido */
            margin-top: 3rem; 
        }

        /* NEW: Styles for the social icons in the contact section */
        .contact-social-icons {
            display: flex;
            justify-content: center; /* Centra los iconos */
            gap: 15px; /* Espacio entre iconos */
            margin-top: 2rem;
            margin-bottom: 2rem; /* Espacio antes de la información de contacto */
            flex-wrap: wrap; /* Permite que los iconos se ajusten en pantallas pequeñas */
        }

        /* Re-utiliza .icono-social-flotante, pero ajusta su comportamiento para el layout estático */
        .contact-social-icons .icono-social-flotante {
            position: static; /* Anula el 'fixed' de la burbuja flotante */
            transform: scale(1); /* Asegura que estén siempre escalados a 1 */
            opacity: 1; /* Asegura que tienen opacidad completa */
            transition: background-color 0.3s ease, transform 0.2s ease; /* Transición más simple para el hover */
            /* Los estilos de tamaño, color, etc., ya se heredan de .icono-social-flotante */
        }

        /* Styles for the new Blog Modal */
        #blogModal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(30, 30, 30, 0.98); /* Very dark, almost opaque background */
            border: 1px solid var(--color-accent-gold);
            padding: 2.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 0 30px var(--color-shadow-soft);
            z-index: 2000; /* Higher than other modals/asides */
            display: none; /* Hidden by default */
            max-width: 90%;
            max-height: 90vh; /* Limits height to viewport height */
            overflow-y: auto; /* Enables scrolling for long content */
            color: var(--color-text-dark);
            text-align: center;
        }

        #blogModal .modal-content {
            padding: 1rem;
        }

        #blogModal img {
            max-width: 100%;
            height: auto;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid var(--color-border-subtle);
        }

        #blogModal h2 {
             font-family: 'VT323', monospace;
            color: var(--color-accent-gold);
            font-size: 2.2rem;
            margin-bottom: 1rem;
        }

        #blogModal p {
            font-family: 'VT323', monospace;
            font-size: 1rem;
            line-height: 1.6;
            text-align: left;
            margin-bottom: 1rem;
            color: var(--color-secondary-gray);
        }

        #blogModal .botonCerrarAside { /* Reusing the close button style */
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 2rem; /* Larger for better tap target */
            color: var(--color-secondary-gray);
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.3s ease, transform 0.3s ease;
            z-index: 2001;
        }
        #blogModal .botonCerrarAside:hover {
            color: var(--color-accent-gold);
            transform: rotate(90deg);
        }

        /* Responsive adjustments for blog modal */
        @media (min-width: 768px) {
            #blogModal {
                max-width: 70%;
            }
        }
        @media (min-width: 1024px) {
            #blogModal {
                max-width: 60%;
            }
        }