.glass-panel {
        background: rgba(255, 253, 243, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .vertical-rl {
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }

    /* Cuando el modo oscuro está activo, aplicamos tu paleta personalizada */
html.dark body {
    background-color: #1C121E !important;
}

html.dark .glass-panel {
    background: rgba(38, 24, 42, 0.6); /* Color #26182A con transparencia */
    border: 1px solid #3A2A40;
}

html.dark h1, html.dark p, html.dark span:not(.material-symbols-outlined) {
    color: #EFE7EB !important;
}

/* El degradado de fondo también debe cambiar en modo oscuro */
html.dark .fixed.top-0 .bg-\[\#82368C\] { background-color: #2b1e30; opacity: 0.4; }
html.dark .fixed.top-0 .bg-\[\#7FDDFF\] { background-color: #1c121e; opacity: 0.4; }

#background-img {
    transition: opacity 0.5s ease-in-out;
}

/* --- ESTILOS MODO OSCURO PARA BOTONES DORADOS --- */

/* Fondo del botón CST, Blog y Consultas en modo oscuro */
html.dark .bg-dorado,
html.dark a[href="cst.html"],
html.dark a[aria-label="Blog"],
html.dark a[aria-label="Consultas"] {
    background-color: #8f6d32 !important;
    transition: all 0.3s ease;
}

/* Color de texto blanco para los botones dorados en modo oscuro */
html.dark a[href="cst.html"] span,
html.dark a[aria-label="Blog"],
html.dark a[aria-label="Consultas"] {
    color: #ffffff !important;
}

/* Ajuste específico para los iconos dentro de esos botones */
html.dark a[aria-label="Blog"] span,
html.dark a[aria-label="Consultas"] span,
html.dark a[href="cst.html"] .material-symbols-outlined {
    color: #ffffff !important;
}

/* Efecto Hover en modo oscuro para que no se pierda la interacción */
html.dark a[href="cst.html"]:hover,
html.dark a[aria-label="Blog"]:hover,
html.dark a[aria-label="Consultas"]:hover {
    background-color: #a67f3d !important; /* Un dorado ligeramente más claro para el hover */
}

:root {
    --base-font-size: 16px;
}
html {
    font-size: var(--base-font-size);
}
/* Forzamos a que los elementos hereden la escala si no lo hacen */
body, p, h1, span, a {
    font-size: 1rem; 
}

/* Animación de entrada para el menú */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out forwards;
}

/* Estilo para que el dropdown de idiomas se vea "limpio" */
.lang-dropdown a {
    text-decoration: none;
    letter-spacing: 0.05em;
}

/* Asegurar que el modo oscuro no dañe la visibilidad del menú blanco si así lo deseas */
html.dark .lang-dropdown {
    background-color: #ffffff; /* Mantenemos blanco para contraste o cámbialo a tu violeta oscuro */
}