:root {
            --primary-color: #E7305E;
            --dark-bg: #2E2C2F;
            --light-bg: #F5F5F5;
        }
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            background: var(--dark-bg);
            color: #fff;
            min-height: 100vh;
            overflow-x: hidden;
        }
        /* Reactive Wallpaper */
        #wallpaper {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(circle at 50% 50%, var(light-bg) 0%, transparent 20%), var(--dark-bg);
            transition: background 0.3s;}
        .navbar.navbar-expand-lg {
            background: rgba(46, 44, 47, 0.7);
            backdrop-filter: blur(4px);
            box-shadow: 0 2px 12px rgba(0,0,0,0.12);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
       
        .content {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .navbar {
            background: rgba(46, 44, 47, 0.644);
        }
        .navbar-brand {
            color: var(--primary-color) !important;
            font-weight: bold;
            font-size: 1.5rem;
            letter-spacing: 2px;
        }
        .btn-primary {
            background-color: var(--primary-color);
            border: none;
        }
        .btn-primary:hover {
            background-color: #E7305E;
        }
        .card {
            background: rgba(46, 44, 47, 0.623);
            border: none;
            color: #fff;
            box-shadow: 0 4px 24px rgba(0,0,0,0.2);
        }
        .highlight {
            color: var(--primary-color);
            font-weight: bold;
        }
        footer {
            background: rgba(46,44,47,0.95);
            color: #aaa;
            text-align: center;
            padding: 1rem 0;
            margin-top: 2rem;
        }

        .hexagon-profile {
                        width: 165px;
                        height: 189x;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: transparent;
                    }
                    .hexagon-border {
                        width: 160px;
                        height: 189px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        clip-path: polygon(
                            50% 0%, 
                            93% 25%, 
                            93% 75%, 
                            50% 100%, 
                            7% 75%, 
                            7% 25%
                        );
                        background: var(--primary-color);
                        
                        box-shadow: 0 2px 12px rgba(0,0,0,0.12);
                        overflow: hidden;
                    }
                    .hex-img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                    }
                    /* Hexágono grande sin foto */
                    .hexagon-large {
                        width: 165px;
                        height: 189px;
                        clip-path: polygon(
                            50% 0%, 
                            93% 25%, 
                            93% 75%, 
                            50% 100%, 
                            7% 75%, 
                            7% 25%
                        );
                        background: var(--primary-color);
                        
                    }
                    
        .nav-btn {
            --btn-color: #E7305E;
            position: relative;
            color: var(--btn-color);
            font-weight: 500;
            border: none;
            background: transparent;
            z-index: 1;
            transition: transform 0.3s ease, color 0.3s ease;
            text-decoration: none;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 48px;
            padding: 0;
        }
        
        .nav-btn::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--btn-color);
            clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
            z-index: -2;
            transition: all 0.3s ease;
        }

        .nav-btn::after {
            content: '';
            position: absolute;
            top: 2px; left: 2px; right: 2px; bottom: 2px;
            background: rgba(46, 44, 47, 1);
            clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
            z-index: -1;
            transition: all 0.3s ease;
        }
        
        .nav-btn:hover {
            color: white !important;
            transform: translateY(-3px) scale(1.05);
        }
        
        .nav-btn:hover::after, .nav-btn.active::after {
            opacity: 0;
            visibility: hidden;
        }
        
        .nav-btn.active {
            color: white !important;
        }