/* =========================================
   1. UTILIDADES VISUALES (EFECTOS)
   ========================================= */

/* Recorte estilo industrial para el Header (El ángulo amarillo) */
.industrial-clip {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}

/* Patrón de líneas diagonales sutiles (Marca de agua) */
.pattern-overlay {
    background-image: repeating-linear-gradient(
        45deg, 
        rgba(0,0,0,0.05) 0px, 
        rgba(0,0,0,0.05) 2px, 
        transparent 2px, 
        transparent 10px
    );
}

/* Fondo de cuadrícula técnica (Usado en secciones como Workshop) */
.bg-grid {
    background-image: radial-gradient(#333 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Sombra resplandeciente para textos o cajas */
.shadow-glow {
    box-shadow: 0 0 20px rgba(255, 205, 17, 0.2);
}

/* =========================================
   2. SCROLLBARS (Barras de Desplazamiento)
   ========================================= */

/* Ocultar barra de scroll (Para carruseles de Reels/Shorts) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Barra de scroll personalizada (Estilo Industrial - Usada en Checkout) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #1a1a1a;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #FFCD11; /* Se pone amarilla al pasar el mouse */
}

/* =========================================
   3. COMPONENTES INTERACTIVOS
   ========================================= */

/* Botón de Play (Efecto Hover en Podcast/Videos) */
.play-btn {
    transition: all 0.3s ease;
}

/* Cuando pasas el mouse sobre el contenedor padre (.group), el botón cambia */
.group:hover .play-btn {
    transform: scale(1.1);
    background-color: #FFCD11;
    color: #101010;
    border-color: #FFCD11;
}

/* Efecto de brillo en texto */
.text-glow:hover {
    text-shadow: 0 0 10px rgba(255, 205, 17, 0.5);
}

/* =========================================
   4. ANIMACIONES
   ========================================= */

/* Animación de entrada suave (Fade In) - Usada en Pago Exitoso */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Animación de pulso suave (para indicadores de "En Vivo" o notificaciones) */
@keyframes softPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-soft-pulse {
    animation: softPulse 2s infinite;
}

/* =========================================
   CLASES UTILITARIAS (Movidas desde HTML)
   ========================================= */

/* Recorte en diagonal para elementos industriales */
.industrial-clip { 
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); 
}

/* Patrón de líneas diagonales sutiles */
.pattern-overlay { 
    background-image: repeating-linear-gradient(
        45deg, 
        rgba(0,0,0,0.05) 0px, 
        rgba(0,0,0,0.05) 2px, 
        transparent 2px, 
        transparent 10px
    ); 
}

/* Sombra amarilla para el texto del Hero */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Paleta de colores solicitada */
.bg-custom-blue { background-color: #313192; }
.text-custom-blue { color: #313192; }
.border-custom-blue { border-color: #313192; }

/* Contenedor principal con fondo blanco */
.podcast-main-content {
    background-color: #ffffff;
    color: #1a1a1a; /* Texto oscuro para legibilidad sobre blanco */
}

/* Tarjetas de episodios con armonía azul/blanco */
.episode-card {
    background: #ffffff;
    border-left: 5px solid #313192;
    box-shadow: 0 10px 25px rgba(49, 49, 146, 0.1);
    transition: all 0.3s ease;
}

.episode-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(49, 49, 146, 0.2);
}

/* Efecto para logos de patrocinadores (blanco y negro con hover a color) */
.sponsor-logo {
    filter: grayscale(2%);
    transition: all 0.3s ease;
    opacity: 0.8;
}

.logo-box:hover .sponsor-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}