/* Tipografía personalizada para títulos */
        h1, h2, h3, .neon-text, .font-anton {
            font-family: 'Anton', sans-serif;
            letter-spacing: 1px;
        }
        
        /* Tipografía para el cuerpo de texto */
        body, p, li, span, button, a {
            font-family: 'Inter', sans-serif;
        }

        /* Estilos de Neón */
        .neon-text {
            color: #fbbf24; /* amber-400 */
            text-shadow: 0 0 5px #f59e0b, 0 0 10px #f59e0b, 0 0 20px #ef4444;
        }
        .neon-border {
            border-color: #fbbf24;
            box-shadow: 0 0 8px #f59e0b;
        }
        .neon-button {
            transition: all 0.3s ease;
        }
        .neon-button:hover {
            box-shadow: 0 0 10px #f59e0b, 0 0 20px #f59e0b, 0 0 40px #f59e0b;
            transform: translateY(-2px);
        }

        /* NUEVA CLASE: Aplica el brillo solo cuando se hace hover */
        .hover-neon-text {
            /* Por defecto, sin brillo. La transición se aplica en Tailwind. */
            text-shadow: none; 
        }

        .hover-neon-text:hover {
            color: #fbbf24; 
            text-shadow: 0 0 5px #f59e0b, 0 0 10px #f59e0b, 0 0 20px #ef4444;
        }

        /* Estilo para el Borde con Degradado Neón */
        .neon-border-gradient {
            /* 1. Define el grosor del "borde" */
            border: 3px solid transparent; 
            border-radius: 0.5rem; /* Coincide con el rounded-lg de Tailwind */

            /* 2. Aplica el degradado como fondo */
            background: linear-gradient(to right, #f59e0b, #fbbf24) border-box; 

            /* 3. CLAVE: Recorta el fondo para que solo se vea en el área del borde */
            background-clip: padding-box, border-box;

            /* 4. Shadow amplio para el efecto Neón (Glow) */
            box-shadow: 0 0 10px #f59e0b, /* Sombra interior suave */
                        0 0 20px rgba(251, 191, 36, 0.7); /* Sombra exterior amplia y brillante */
            
            position: relative; 
            z-index: 1;
        }

        /* Estilos de la Pizarra de Eventos (Mobile-First) */
        #events-board {
            min-height: 200px;
            white-space: pre-wrap;
            text-align: left;
            padding: 1rem; /* Padding reducido para móvil */
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.8rem; /* Fuente más pequeña para que quepa en <500px */
            /* La animación de máquina de escribir se ajusta automáticamente a este tamaño */
        }
        
        /* Ajuste de Pizarra para pantallas medianas/grandes */
        @media (min-width: 500px) {
            #events-board {
                padding: 1.5rem;
                font-size: 1.1rem; /* Vuelve al tamaño normal */
            }
        }


        /* Estilos del Carrusel (Mobile-First) */
        .carousel {
        display: flex; 
        transition: transform 0.3s ease-in-out; 
        }
        .carousel::-webkit-scrollbar {
        display: none;
        }
        .carousel-item {
        flex: 0 0 100%;
        height: 300px; /* Altura más compacta para móvil */
        position: relative;
        }
        .carousel-item img {
        width: 100%;
        height: 100%;       
        object-fit: contain;  /* Usa 'contain' para que la imagen completa quepa sin cortarse */
        display: block;
        border-radius: 0.5rem; 
        }

        /* Dots */
        #carousel-dots button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #aaa;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s;
        }
        #carousel-dots button.active {
        background-color: #f59e0b; /* amber-500 */
        }

        /* Ajuste de Carrusel para pantallas medianas/grandes (desktop) */
        @media (min-width: 768px) {
             .carousel-item {
                height: 550px; /* Vuelve a la altura deseada en desktop */
             }
        }

        /* Estilos de fondo de la pizarra */
        .chalkboard {
        background: #111 url('https://www.transparenttextures.com/patterns/blackboard.png') repeat;
        border-radius: 12px;
        }

        #events-board {
        text-shadow: 0 0 4px rgba(255, 191, 0, 0.6);
        }