:root {
            --color-primary: #3b82f6;
            --color-secondary: #8b5cf6;
            --color-accent: #10b981;
            --color-dark: #0f172a;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #0f172a;
            color: #e2e8f0;
            scroll-behavior: smooth;
        }
        
        
        
        @keyframes pulse {
            0% { transform: translate(0, 0); }
            50% { transform: translate(50px, 50px); }
            100% { transform: translate(0, 0); }
        }
        
        /* Estilo para el sombrero del logo */
        .menu-hat-icon {
            height: 1.7rem;
    width: auto;
    transform: rotate(-15deg);
    position: absolute;
    top: -0.7rem;
    left: -0.6rem;
    z-index: 10;
            filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
        }
        
        .title-hat-icon {
            height: 5.5rem;
            width: auto;
            transform: rotate(-15deg);
            position: absolute;
            top: -2.5rem;
            left: -1.6rem;
            z-index: 10;
            filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
        }
        
        .footer-hat-icon {
            height: 1.7rem;
            width: auto;
            transform: rotate(-15deg);
            position: absolute;
            top: -0.7rem;
            left: -0.6rem;
            z-index: 10;
        }
        
        /* Texto gradiente */
        .gradient-text {
            background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline;
        }
        
        /* Efecto hover para cards */
        .feature-card {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        .feature-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
            z-index: 1;
            pointer-events: none;
        }
        
        /* Efecto glow para elementos destacados */
        .glow-box {
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
        }
        
        .glow-box:hover {
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.5);
        }
        
        /* Animación para CTA buttons */
        .cta-button {
            position: relative;
            overflow: hidden;
        }
        
        .cta-button::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(255, 255, 255, 0) 45%,
                rgba(255, 255, 255, 0.1) 50%,
                rgba(255, 255, 255, 0) 55%
            );
            transform: rotate(30deg);
            animation: shine 3s infinite;
        }
        
        @keyframes shine {
            0% { transform: translateX(-100%) rotate(30deg); }
            100% { transform: translateX(100%) rotate(30deg); }
        }
        
        /* Efecto de máquina de escribir */
        .typewriter {
            border-right: 3px solid var(--color-primary);
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
            animation: blink-caret 0.75s step-end infinite;
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--color-primary) }
        }
        
        /* Menú desplegable */
        .profile-dropdown {
            display: none;
            position: absolute;
            right: 0;
            background: #1f2937;
            border-radius: 0.375rem;
            padding: 0.5rem;
            min-width: 120px;
            z-index: 50;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
        }
        
        .profile-container:hover .profile-dropdown {
            display: block;
            animation: fadeIn 0.2s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Contenedor de logo con sombrero */
        .title-container {
            position: relative;
            display: inline-block;
        }
        
        .menu-logo-container {
            position: relative;
            display: inline-block;
        }


                   /* Ajustes para móviles */
@media (max-width: 768px) {
    .title-hat-icon {
        height: 3em;
        top: -1.3em;
        left: -0.6em;
    }
}