/* Zoom para el avatar de perfil (centrar letras y hacerlas grandes) */
        .profile-zoom-img {

            object-fit: cover;

            object-position: center;

            transform: scale(1.3);

        }

        
        * {

            font-family: 'Inter', sans-serif;

        }

        

        body {

            background-color: #000;

            color: #fff;

        }



        /* Custom Scrollbar */

        ::-webkit-scrollbar {

            width: 8px;

        }

        ::-webkit-scrollbar-track {

            background: #18181b; 

        }

        ::-webkit-scrollbar-thumb {

            background: #3f3f46; 

            border-radius: 4px;

        }

        ::-webkit-scrollbar-thumb:hover {

            background: #52525b; 

        }

        
        /* Avatar zoom: mantiene el círculo igual, pero la imagen interna tiene más zoom y se centra */
        .avatar-outer {
            position: relative;
            width: 55px; /* h-12 w-12 */
            height: 55px;
            border-radius: 9999px;
            overflow: hidden;
        }
        .avatar-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 96px; /* el doble del círculo */
            height: 96px;
            object-fit: cover;
            object-position: center;
            transform: translate(-50%, -50%) scale(1.18); /* sube o baja este valor para ajustar el zoom */
            pointer-events: none;
            user-select: none;
        }

        

        /* 3D Card Effect */

        .service-card {

            position: relative;

            transform-style: preserve-3d;

            transition: transform 0.3s ease;

        }

        

        .service-card::before {

            content: '';

            position: absolute;

            inset: 0;

            border-radius: 1.5rem;

            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.1), transparent 50%);

            opacity: 0;

            transition: opacity 0.3s ease;

            pointer-events: none;

        }

        

        .service-card:hover::before {

            opacity: 1;

        }

        

        /* Course Card Animations */

        .course-card {

            transition: all 0.3s ease;

        }

        

        .course-card:hover {

            transform: translateY(-8px);

            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

        }

        

        /* Navigation Styles */

        .nav-item {

            transition: all 0.2s ease;

            position: relative;

            overflow: hidden;

        }

        

        .nav-item:hover {

            background: rgba(255, 255, 255, 0.05);

            padding-left: 1.25rem; /* Slide effect */

        }

        

        .nav-item.active {

            background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(0,0,0,0) 100%);

            border-left: 3px solid #3b82f6;

            color: #fff;

        }

        

        /* Animations */

        .fade-in {

            animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        }

        

        @keyframes fadeIn {

            from { opacity: 0; transform: translateY(20px); }

            to { opacity: 1; transform: translateY(0); }

        }



        /* Trabajos / Gallery Styles */

        .gallery-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

            gap: 1.5rem;

        }



        .gallery-item {

            position: relative;
        }

        #whatsapp-float {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 60px;
            height: 60px;
            background-color: #25d366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,.25);
            z-index: 9999;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        #whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.28); }
        #whatsapp-float i { color: white; font-size: 24px; }


            border-radius: 1rem;

            overflow: hidden;

            aspect-ratio: 1 / 1;

            cursor: pointer;

            border: 1px solid rgba(255, 255, 255, 0.1);

            background-color: #18181b;

        }

        

        .gallery-image {

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);

        }

        

        .gallery-overlay {

            position: absolute;

            inset: 0;

            background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.2));

            opacity: 0;

            transition: all 0.3s ease;

            display: flex;

            flex-direction: column;

            justify-content: flex-end;

            padding: 1.5rem;

            transform: translateY(10px);

        }



        .gallery-item:hover .gallery-image {

            transform: scale(1.15);

        }



        .gallery-item:hover .gallery-overlay {

            opacity: 1;

            transform: translateY(0);

        }



        /* Lightbox */

        .lightbox {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.95);

            z-index: 2000;

            justify-content: center;

            align-items: center;

            backdrop-filter: blur(5px);

        }



        .lightbox-img {

            max-width: 90%;

            max-height: 90vh;

            border-radius: 0.5rem;

            box-shadow: 0 0 50px rgba(0,0,0,0.5);

            animation: zoomIn 0.3s ease;

        }



        @keyframes zoomIn {

            from { transform: scale(0.9); opacity: 0; }

            to { transform: scale(1); opacity: 1; }

        }



        /* Contact Section Improvements */

        .contact-input-group {

            position: relative;

            margin-bottom: 2rem;

        }



        .contact-input {

            background: transparent;

            border: none;

            border-bottom: 2px solid #3f3f46;

            width: 100%;

            padding: 0.75rem 0;

            color: white;

            font-size: 1rem;

            transition: all 0.3s ease;

        }



        .contact-input:focus {

            outline: none;

            border-color: #60a5fa;

        }



        .contact-label {

            position: absolute;

            top: 0.75rem;

            left: 0;

            color: #9ca3af;

            transition: all 0.3s ease;

            pointer-events: none;

        }



        .contact-input:focus ~ .contact-label,

        .contact-input:not(:placeholder-shown) ~ .contact-label {

            top: -1.25rem;

            font-size: 0.875rem;

            color: #60a5fa;

        }



        .contact-label-static {

            display: block;

            margin-bottom: 0.5rem;

            font-size: 0.875rem;

            color: #9ca3af;

            letter-spacing: 0.02em;

        }



        .contact-input-static {

            padding: 0.5rem 0;

        }



        /* Events Section */

        .event-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

            gap: 1.5rem;

        }



        .event-card {

            background: #0f0f13;

            border: 1px solid #27272a;

            border-radius: 1.5rem;

            overflow: hidden;

            box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);

            opacity: 0;

            transform: translateY(24px);

            animation: eventEnter 0.7s ease forwards;

            animation-delay: var(--delay, 0ms);

            transition: transform 0.3s ease, box-shadow 0.3s ease;

        }



        .event-card:hover {

            transform: translateY(-6px);

            box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);

        }



        .event-card.event-ended {

            filter: grayscale(1);

            opacity: 0.85;

        }



        .event-card.event-ended .event-media::after {

            background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.85));

        }



        .event-media {

            width: 100%;

            height: 200px;

            min-height: 180px;

            aspect-ratio: 16 / 9;

            position: relative;

            overflow: hidden;

        }

        .event-media picture {

            display: block;

            width: 100%;

            height: 100%;

            position: absolute;
            inset: 0;
        }

        .event-media img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            object-position: center;

            display: block;

        }

        .event-media::after {

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.75));

        }



        .event-body {

            padding: 1.5rem;

        }



        .event-meta {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 0.75rem;

            font-size: 0.8rem;

            color: #9ca3af;

            text-transform: uppercase;

            letter-spacing: 0.08em;

        }



        .event-status {

            padding: 0.3rem 0.7rem;

            border-radius: 999px;

            font-weight: 700;

            font-size: 0.7rem;

        }



        .event-status-live {

            background: rgba(59, 130, 246, 0.2);

            color: #93c5fd;

            border: 1px solid rgba(59, 130, 246, 0.4);

        }



        .event-status-ended {

            background: rgba(255, 255, 255, 0.08);

            color: #d4d4d8;

            border: 1px solid rgba(255, 255, 255, 0.18);

        }



        .event-title {

            font-size: 1.25rem;

            font-weight: 700;

            margin-bottom: 0.5rem;

        }



        .event-text {

            color: #9ca3af;

            font-size: 0.95rem;

            line-height: 1.5;

            margin-bottom: 1.25rem;

        }



        .event-actions {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 0.75rem;

        }



        .event-btn {

            background: #ffffff;

            color: #000000;

            border: none;

            border-radius: 999px;

            padding: 0.55rem 1.25rem;

            font-weight: 700;

            transition: transform 0.3s ease, background 0.3s ease;

        }



        .event-btn:hover {

            transform: translateY(-2px);

            background: #e5e7eb;

        }



        .event-btn-muted {

            background: rgba(255, 255, 255, 0.1);

            color: #d4d4d8;

        }



        .event-btn-muted:hover {

            transform: none;

            background: rgba(255, 255, 255, 0.1);

        }



        .event-place {

            color: #a1a1aa;

            font-size: 0.85rem;

        }



        .event-legend {

            display: flex;

            align-items: center;

            gap: 1rem;

            font-size: 0.75rem;

            color: #9ca3af;

            text-transform: uppercase;

            letter-spacing: 0.2em;

        }



        .event-legend-item {

            display: inline-flex;

            align-items: center;

            gap: 0.45rem;

        }



        .event-dot {

            width: 8px;

            height: 8px;

            border-radius: 999px;

        }



        .event-dot-live {

            background: #60a5fa;

            box-shadow: 0 0 10px rgba(96, 165, 250, 0.7);

        }



        .event-dot-ended {

            background: #a1a1aa;

        }



        @keyframes eventEnter {

            from { opacity: 0; transform: translateY(24px) scale(0.98); }

            to { opacity: 1; transform: translateY(0) scale(1); }

        }



        /* Social Icons Pulse */

        .social-icon-btn {

            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        }

        .social-icon-btn:hover {

            transform: translateY(-5px);

        }



        /* General UI Elements */

        .category-tab {

            transition: all 0.3s ease;

            cursor: pointer;

            position: relative;

            overflow: hidden;

        }

        

        .category-tab.active {

            background: #fff;

            color: #000;

            border-color: #fff;

            font-weight: 600;

        }

        

        .price-badge {

            animation: pulse 2s infinite;

        }

        

        @keyframes pulse {

            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }

            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }

            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }

        }

        

        .contact-button {

            background-color: rgb(8, 51, 68);

            transition: all 0.3s ease;

        }

        

        .contact-button:hover {

            background-color: rgb(13, 148, 136);

            transform: translateY(-2px);

        }

        

        /* Modal styles */

        .modal {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.8);

            backdrop-filter: blur(4px);

            z-index: 1000;

            align-items: center;

            justify-content: center;

        }

        

        .modal-content {

            background-color: #18181b;

            border: 1px solid #27272a;

            border-radius: 1.5rem;

            width: 90%;

            max-width: 500px;

            max-height: 90vh;

            overflow-y: auto;

            padding: 2rem;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);

        }



        .payment-tab.active {

            background: linear-gradient(to right, #2563eb, #06b6d4);

            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);

        }

        

        .payment-content { display: none; }

        .payment-content.active { display: block; animation: fadeIn 0.3s ease; }

        

        .verification-status { display: none; }

        .verification-success { background-color: rgba(6, 95, 70, 0.2); color: #34d399; border: 1px solid #059669; }

        .verification-error { background-color: rgba(127, 29, 29, 0.2); color: #f87171; border: 1px solid #dc2626; }

        .verification-processing { background-color: rgba(30, 58, 138, 0.2); color: #60a5fa; border: 1px solid #2563eb; }

        .sidebar-toggle-btn {
            position: fixed;
            top: 1rem;
            left: 1rem;
            z-index: 80;
            display: inline-flex;
            width: 2.75rem;
            height: 2.75rem;
            align-items: center;
            justify-content: center;
            border-radius: 0.85rem;
            border: 1px solid #3f3f46;
            background: rgba(24, 24, 27, 0.94);
            color: #ffffff;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(6px);
            transition: left 0.3s ease, background 0.2s ease, border-color 0.2s ease;
        }

        .sidebar-toggle-btn:hover {
            background: rgba(39, 39, 42, 0.95);
            border-color: #52525b;
        }

        /* Sidebar responsiveness */
        #app-sidebar {
            overflow: hidden;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .sidebar-nav {
            min-height: 0;
            overflow-y: auto;
            padding-right: 0.2rem;
        }

        #sidebar-footer {
            flex-shrink: 0;
        }

        body[data-sidebar-state='open'] #app-sidebar {
            transform: translateX(0);
        }

        body[data-sidebar-state='open'] .sidebar-toggle-btn {
            left: 188px;
        }

        #main-content {
            margin-left: 0;
            transition: margin-left 0.3s ease;
        }

        body[data-sidebar-state='open'] #sidebar-overlay {
            display: block;
        }

        @media (min-width: 1024px) {
            .sidebar-toggle-btn {
                top: 1.25rem;
            }

            #sidebar-overlay {
                display: none !important;
            }

            body[data-sidebar-state='open'] #main-content {
                margin-left: 220px;
            }
        }

        @media (max-width: 640px) {
            #app-sidebar {
                width: min(86vw, 220px);
                padding: 0.9rem;
                height: 100dvh;
                max-height: 100dvh;
                padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
                display: grid;
                grid-template-rows: auto minmax(0, 1fr) auto;
                gap: 0.6rem;
            }

            .sidebar-profile {
                margin-top: 0.25rem;
                margin-bottom: 0;
            }

            .sidebar-nav {
                margin-bottom: 0 !important;
                min-height: 0;
                overflow-y: auto;
            }

            #sidebar-footer {
                margin-top: 0 !important;
                padding-top: 0.75rem;
                padding-bottom: calc(0.95rem + env(safe-area-inset-bottom));
                background: linear-gradient(180deg, rgba(9, 9, 11, 0.1) 0%, rgba(9, 9, 11, 0.98) 35%);
            }

            #current-date {
                font-size: 0.68rem;
                padding: 0.55rem;
                margin-bottom: 0.55rem;
            }

            #sidebar-footer button {
                padding-top: 0.7rem;
                padding-bottom: 0.7rem;
                font-size: 0.68rem;
                white-space: nowrap;
            }

            .course-card {
                border-radius: 1.1rem;
            }

            .course-card .buy-button {
                padding-top: 0.85rem;
                padding-bottom: 0.85rem;
                font-size: 0.95rem;
            }
        }