/* Estilos Minimalistas Personalizados */
        body {
            font-family: 'Raleway', sans-serif;
            -webkit-font-smoothing: antialiased;
            background-color: #f8fafc;
            /* Fondo general más claro */
        }

        .primary-bg {
            background-color: #6D28D9;
        }

        .secondary-bg {
            background-color: #A855F7;
        }

        .primary-text {
            color: #4C1D95;
        }

        .secondary-text {
            color: #EDE9FE;
        }

        .minimal-btn {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            transition-duration: 0.3s;
        }

        .minimal-btn-primary {
            background-color: white;
            color: #4C1D95;
        }

        .minimal-btn-primary:hover {
            background-color: #A855F7;
            color: white;
        }

        .minimal-btn-secondary {
            background-color: transparent;
            color: white;
            border: 1px solid white;
        }

        .minimal-btn-secondary:hover {
            background-color: white;
            color: #4C1D95;
        }

        .program-card,
        .news-card {
            background-color: white;
            border-radius: 0.25rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            overflow: hidden;
        }

        .program-card img,
        .news-card img {
            width: 100%;
            height: 12rem;
            object-fit: cover;
        }

        .program-card-content,
        .news-card-content {
            padding: 1rem;
        }

        /* Estilo del icono flotante de WhatsApp (con imagen) */
        #whatsapp-icon {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            transition: background-color 0.3s ease;
        }

        #whatsapp-icon:hover {
            background-color: #f0f0f0;
        }

        #whatsapp-icon img {
            width: 32px;
            height: 32px;
        }

        /* NUEVO ESTILO DEL REPRODUCTOR (Frosted Glass - Efecto Cristal) */
        .custom-player {
            width: 100%;
            max-width: 350px;
            /* Ancho similar pero más refinado */
            background-color: rgba(168, 85, 247, 0.2);
            /* Morado muy claro y transparente */
            backdrop-filter: blur(10px);
            /* Efecto de cristal */
            border: 1px solid rgba(168, 85, 247, 0.3);
            /* Borde sutil */
            border-radius: 1.25rem;
            /* Bordes suaves */
            padding: 1.2rem;
            /* Padding más compacto */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            /* Sombra suave */
            transition: all 0.3s ease;
        }

        .custom-player-controls {
            padding: 0.5rem;
            /* Padding más pequeño */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            /* Espacio entre elementos */
            width: 100%;
        }

        .custom-play-pause {
            background-color: rgba(255, 255, 255, 0.8);
            /* Blanco transparente */
            color: #6D28D9;
            /* Morado primario para el icono */
            width: 3rem;
            /* Tamaño del botón */
            height: 3rem;
            /* Tamaño del botón */
            border-radius: 50%;
            /* Botón completamente redondo */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            /* Tamaño del ícono */
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            /* Sombra más delicada */
            border: 1px solid rgba(109, 40, 217, 0.3);
            /* Borde suave */
            transition: all 0.2s ease;
        }

        .custom-play-pause:hover {
            background-color: rgba(255, 255, 255, 1);
            /* Blanco sólido al pasar el mouse */
            transform: scale(1.05);
            /* Ligero agrandamiento */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .custom-play-pause:active {
            transform: scale(0.95);
            /* Efecto de click */
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15);
        }

        .custom-volume-slider {
            width: 100px;
            /* Ancho del slider */
            appearance: none;
            -webkit-appearance: none;
            background: transparent;
            /* Fondo transparente para el slider en general */
            outline: none;
        }

        /* Estilos para el "track" del slider (la barra) para Webkit (Chrome, Safari, Edge) */
        .custom-volume-slider::-webkit-slider-runnable-track {
            height: 6px;
            background: white; /* Blanco puro para mayor visibilidad */
            border-radius: 3px;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
        }

        /* Estilos para el "thumb" del slider (el círculo que se mueve) para Webkit */
        .custom-volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px; /* Un poco más grande para mejor interacción */
            height: 18px; /* Un poco más grande para mejor interacción */
            border-radius: 50%;
            background: #6D28D9; /* Morado primario */
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            margin-top: -6.5px; /* Ajusta para centrar con el nuevo alto del track y thumb */
            cursor: grab;
        }

        /* Estilos para el "track" del slider para Firefox */
        .custom-volume-slider::-moz-range-track {
            height: 6px;
            background: white; /* Blanco puro */
            border-radius: 3px;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
        }

        /* Estilos para el "thumb" del slider para Firefox */
        .custom-volume-slider::-moz-range-thumb {
            width: 18px; /* Un poco más grande */
            height: 18px; /* Un poco más grande */
            border-radius: 50%;
            background: #6D28D9; /* Morado primario */
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            cursor: grab;
        }

        /* Estilos para el "track" del slider para IE/Edge (moderno, sin prefijo) */
        /* Puede que no sea estrictamente necesario en versiones muy recientes de Edge */
        .custom-volume-slider::-ms-track {
            height: 6px;
            background: transparent; /* Necesario para que el track personalizado se vea */
            border-color: transparent;
            color: transparent; /* Oculta el color predeterminado del track */
        }
        .custom-volume-slider::-ms-fill-lower {
            background: white; /* Color de la parte "llena" del track */
            border-radius: 3px;
        }
        .custom-volume-slider::-ms-fill-upper {
            background: white; /* Color de la parte "vacía" del track */
            border-radius: 3px;
        }

        /* Estilos para el "thumb" del slider para IE/Edge (moderno) */
        .custom-volume-slider::-ms-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #6D28D9;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            cursor: grab;
            margin-top: 0; /* No se necesita ajuste de margin-top en IE/Edge */
        }


        .custom-player p {
            text-align: center;
            color: #4C1D95;
            /* Morado oscuro para buen contraste */
            font-size: 0.85rem;
            /* Texto ligeramente más pequeño */
            font-weight: 600;
            margin-top: 0.6rem;
            transition: color 0.3s ease;
        }

        /* Estilo del formulario de contacto */
        .contact-form {
            width: 100%;
            max-width: 450px;
            /* Ancho máximo para el formulario */
            margin: 0 auto;
            /* Centra el formulario dentro de su contenedor flex */
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 0.5rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border: 1px solid #4C1D95;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .contact-form label {
            display: block;
            margin-bottom: 0.5rem;
            color: #4C1D95;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 0.5rem;
            margin-bottom: 1rem;
            border: 1px solid #A855F7;
            border-radius: 0.25rem;
            background: #EDE9FE;
            color: #4C1D95;
        }

        .contact-form textarea {
            height: 80px;
            resize: vertical;
        }

        .contact-form button {
            width: 100%;
            padding: 0.75rem;
            background-color: #6D28D9;
            color: white;
            border: none;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: auto;
        }

        .contact-form button:hover {
            background-color: #A855F7;
        }

        /* Estilo del selector de emojis */
        .emoji-picker {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* 3 columnas para emojis */
            gap: 0.5rem;
            margin-bottom: 1rem;
            width: 100%;
        }

        .emoji-btn {
            background-color: #6D28D9;
            color: white;
            border: none;
            border-radius: 0.25rem;
            padding: 0.3rem;
            font-size: 1rem;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s ease;
        }

        .emoji-btn:hover {
            background-color: #A855F7;
        }

        /* Estilos para el contenedor del Stream en Vivo (YouTube/Twitch) */
.live-stream-player-container {
    position: relative;
    width: 100%;
    /* Mantiene la relación de aspecto 16:9 (altura = 9/16 * ancho) */
    padding-bottom: 56.25%; /* (9 / 16) * 100% */
    height: 0;
    overflow: hidden;
    background-color: black; /* Fondo negro mientras carga el video */
    border-radius: 0.5rem; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.live-stream-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Asegura que no haya borde predeterminado */
}

/* Puedes añadir una media query si quieres un ancho máximo en pantallas grandes, similar al reproductor de audio */
@media (min-width: 1024px) { /* Para pantallas lg y superiores (Tailwind breakpoint) */
    .live-stream-player-container {
        max-width: 400px; /* O un tamaño máximo que se ajuste al reproductor de audio */
        margin: 0 auto; /* Centra el contenedor */
    }
}

        /* Estilo específico para los banners grandes de lado a lado */
        .large-banner-section {
            width: 100%;
            /* Ocupa todo el ancho disponible */
            padding: 2rem 0;
            /* Padding vertical, sin padding horizontal para que vaya de lado a lado */
            background-color: #f0f0f0;
            /* Un color de fondo para distinguirlo */
            text-align: center;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
            /* Sutil sombra interna */
            margin-top: 2rem;
            /* Espacio antes y después de la sección */
            margin-bottom: 2rem;
        }

        .large-banner-container {
            width: 100%;
            /* Contenedor interno para los ad-block que ocupa todo el ancho */
            max-width: 100%;
            /* Asegura que no se limite el ancho */
            padding: 0 1rem;
            /* Pequeño padding horizontal para que no toque los bordes de la ventana */
            margin: 0 auto;
            /* Centra el contenido */
            display: flex;
            flex-direction: column;
            gap: 1rem;
            /* Espacio entre los ad-block */
        }

      .large-banner-container .ad-block {
    height: 150px; /* Ejemplo de altura fija, puedes ajustarla */
    font-size: 1.5rem;
    border: 2px solid #A855F7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Asegura que no haya padding interno */
    overflow: hidden; /* Importante para recortar la imagen si es más grande */
}

        .large-banner-container .ad-block img {
    width: 100%; /* La imagen ocupará todo el ancho del ad-block */
    height: 100%; /* La imagen ocupará todo el alto del ad-block */
    object-fit: cover; /* Recorta la imagen para que cubra el área sin distorsión */
    display: block; /* Elimina cualquier espacio extra que pueda dejar el navegador */
}

/* News Section (Estilos MÍNIMOS para la tarjeta de noticias para asegurar funcionalidad y aspecto base) */
        .news-card {
            background-color: white; /* Fondo de la tarjeta */
            border-radius: 0.5rem; /* Bordes redondeados */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
            overflow: hidden; /* Importante para que la imagen no se salga */
            transition: transform 0.2s ease-in-out; /* Animación al pasar el mouse */
            display: flex; /* Para que el contenido interno se distribuya */
            flex-direction: column; /* Elementos internos en columna */
            height: 100%; /* Asegura que todas las tarjetas en la cuadrícula tengan la misma altura */
        }

        .news-card:hover {
            transform: translateY(-5px); /* Efecto al pasar el mouse */
        }

        .news-card img {
            width: 100%; /* La imagen ocupa todo el ancho de la tarjeta */
            height: 200px; /* Altura fija para la imagen de la noticia */
            object-fit: cover; /* Recorta la imagen para cubrir el área sin distorsión */
            display: block; /* Elimina espacio extra debajo de la imagen */
        }

        .news-card-content {
            padding: 1.5rem; /* Espaciado interno del contenido */
            flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Distribuye el espacio entre los elementos del contenido */
        }

        .news-card h3 {
            font-size: 1.25rem; /* text-xl */
            font-weight: bold; /* font-bold */
            color: #4C1D95; /* primary-text */
            margin-bottom: 0.5rem; /* mb-2 */
        }

        .news-card p {
            color: #4B5563; /* text-gray-700 */
            font-size: 0.875rem; /* text-sm */
            margin-bottom: 1rem; /* Espacio antes del botón/enlace */
        }

        .news-card a {
            color: #8B5CF6; /* text-purple-700 */
            transition: color 0.2s ease;
            text-align: right; /* Alinea el "Leer más" a la derecha */
            display: block; /* Para que el text-align funcione */
        }

        .news-card a:hover {
            color: #6D28D9; /* hover:text-purple-900 */
        }

        /* Media query para asegurar que los banners grandes se muestren correctamente en pantallas pequeñas */
        @media (max-width: 767px) {
            .large-banner-section {
                padding: 1.5rem 0;
            }

            .large-banner-container .ad-block {
                min-height: 100px;
                font-size: 1.2rem;
            }
        }
        /* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente oscuro */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que esté por encima de todo */
    opacity: 0; /* Lo hacemos invisible por defecto */
    visibility: hidden; /* Oculto completamente por defecto */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición suave */
}

.modal-overlay.active {
    opacity: 1; /* Visible */
    visibility: visible; /* Activo */
}

.modal-content {
    background-color: #FFFFFF !important; /* Fuerza el color blanco opaco */
    opacity: 1 !important; /* Fuerza que el modal sea completamente opaco */
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0); /* Posición final */
}

.close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #333;
    transition: color 0.2s ease;
}

.close-button:hover {
    color: #6D28D9; /* Color de tu primary-bg */
}

.modal-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 0.3rem;
    margin-bottom: 1.5rem;
}

.modal-title {
    font-size: 2.25rem; /* similar a text-4xl */
    font-weight: bold; /* font-bold */
    color: #4C1D95; /* primary-text */
    margin-bottom: 1rem;
}

.modal-description {
    font-size: 1.125rem; /* similar a text-lg */
    color: #4B5563; /* text-gray-700 */
    line-height: 1.6;
}