/* Importar fuente Inter si no carga por CDN */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* --- TEMA POR DEFECTO: MORADO & GRIS --- */
    /* Definimos los colores en formato RGB para permitir opacidades en Tailwind */
    
    /* MORADOS (Originales de la marca) */
    --c-purple-400: 167 139 250; /* #a78bfa */
    --c-purple-500: 139 92 246;  /* #8b5cf6 (Principal) */
    --c-purple-600: 124 58 237;  /* #7c3aed */
    --c-purple-800: 91 33 182;   /* #5b21b6 */
    --c-purple-900: 76 29 149;   /* #4c1d95 */
    
    /* GRISES / PLATAS (Sustituyen al azul secundario) */
    --c-cyan-400: 212 212 216;    /* #d4d4d8 (Zinc 300) - Gris claro brillante */
    --c-cyan-500: 161 161 170;    /* #a1a1aa (Zinc 400) - Gris medio */
}

/* --- TEMA ALTERNATIVO: ROSA & AZUL (Se activa con la clase .theme-pink) --- */
body.theme-pink {
    /* ROSAS (Sustituyen a la variable 'purple' original) */
    --c-purple-400: 255 102 217; /* #ff66d9 */
    --c-purple-500: 255 51 204;  /* #ff33cc (Rosa Neón Principal) */
    --c-purple-600: 230 0 179;   /* #e600b3 */
    --c-purple-800: 153 0 119;   /* #990077 */
    --c-purple-900: 102 0 77;    /* #66004d */

    /* AZULES (Sustituyen a la variable 'cyan' original) */
    --c-cyan-400: 51 102 255;    /* #3366ff (Azul Eléctrico) */
    --c-cyan-500: 0 68 204;      /* #0044cc */
}

body {
    font-family: 'Inter', sans-serif;
    /* Transición suave de colores al cambiar de tema */
    transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

/* Asegurar que todos los elementos hereden la transición de color */
div, span, a, button, h1, h2, h3, p, i, section, header, footer {
    transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

/* Efectos de la animación de fondo */
@keyframes pulse-light {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.animate-pulse-light {
    animation: pulse-light 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

/* --- ANIMACIÓN LOGO HEADER (Giro 360) --- */
header a img {
    /* Transición suave para el giro */
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

header a:hover img {
    transform: rotate(360deg);
}

/* Clases de utilidad para animaciones al hacer scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- CORRECCIÓN DEL MENÚ MÓVIL --- */
/* Los estilos base deben estar en el ID, no en la clase .mobile-menu-closed */
#mobile-menu {
    position: fixed;
    inset: 0; /* top:0, right:0, bottom:0, left:0 */
    z-index: 60; /* Mayor que el header (z-50) para cubrirlo */
    background-color: rgba(11, 17, 32, 0.98); /* Fondo oscuro casi opaco */
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Clases de estado (solo controlan la posición) */
.mobile-menu-closed {
    transform: translateX(100%);
}

.mobile-menu-open {
    transform: translateX(0);
}

/* Botón Volver Arriba */
#back-to-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: rgb(var(--c-purple-500));
    color: white;
    padding: 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: all 0.3s ease;
    z-index: 40;
    border: none;
    cursor: pointer;
}

#back-to-top-btn:hover {
    background-color: rgb(var(--c-purple-600));
    transform: translateY(-2px);
}

#back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Botón Cambiar Tema */
#theme-toggle-btn {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    /* Usamos el color secundario (Azul en tema 1, Gris en tema 2) */
    background-color: rgb(var(--c-cyan-400) / 0.1);
    color: rgb(var(--c-cyan-400));
    border: 1px solid rgb(var(--c-cyan-400) / 0.3);
    padding: 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 40;
    cursor: pointer;
    transition: all 0.3s ease;
}

#theme-toggle-btn:hover {
    background-color: rgb(var(--c-cyan-400));
    color: white; /* El texto se vuelve blanco al hacer hover */
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 0 15px rgb(var(--c-cyan-400) / 0.5);
}

/* Ajuste de selección de texto */
::selection {
    background-color: rgb(var(--c-purple-500));
    color: white;
}