/* ========================================
   Estilos del Módulo de Curso "Música"
   (TU CÓDIGO ORIGINAL - SIN CAMBIOS)
   ======================================== */

/* 1. Contenedor Principal (El wrapper de 2 columnas) */
.musicaContenedorPrincipal {
    max-width: 1200px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    display: flex;
    flex-wrap: wrap; /* Importante para que se apilen en móviles */
    background-color: #f9faff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}

.musicaContenedorColumn {
    flex-direction: column;            
}


/* 2. Clase Base para AMBAS columnas */
.musicaColumnaBase {
    flex: 1; /* Permite que ambas crezcan y ocupen el espacio */
    min-width: 320px; /* Punto de quiebre para responsive */
    box-sizing: border-box;
    display: flex;
    padding: 40px; /* Padding base (la de texto lo sobreescribe) */
}

/* 3. Modificador para la Columna de Texto */
.musicaColumnaTexto {
    padding: 40px 50px 10px 50px; /* Sobreescribe el padding base */
    flex-direction: column;
    justify-content: center;
}

/* 4. Modificador para la Columna de Video */
.musicaColumnaVideo {
    background: linear-gradient(135deg, #5e35b1, #311b92);
    position: relative;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* 5. Estilos de Texto dentro de la Columna Izquierda */
.musicaTituloPrincipal {
    font-size: 44px;
    color: #1e293b;
    margin: 0 0 20px 0;
    line-height: 1.2;
    font-weight: 700;
}

.musicaDescripcion {
    font-size: 16px;
    color: #475569;
    margin: 0 0 25px 0;
    line-height: 1.6;
}

.musicaAutor {
    font-size: 17px;
    color: #333;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

.musicaAutorNombre {
    color: #6d28d9;
    font-weight: 700; /* Añadido para mantener el énfasis */
}


/* 6. Estilos del Reproductor de Video (Columna Derecha) */
.musicaVideoWrapper {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16/9; /* Clave para video responsive */
    background-color: #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    overflow: hidden; /* Asegura que el iframe no se desborde */
}

.musicaVideoIframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}       
       
/* ========================================
   Estilos del Módulo "Música" (Bloque Lección)
   (TU CÓDIGO ORIGINAL - SIN CAMBIOS)
   ======================================== */

/* 1. Contenedor Principal (El wrapper de 1 columna) */
.musicaContenedorLeccion {
    max-width: 1200px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    background-color: #f9faff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    padding: 40px;
    box-sizing: border-box;
}

/* 2. Encabezado y Título de la Lección */
.musicaEncabezadoLeccion {
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.musicaLeccionTitulo {
    font-size: 44px;
    color: #000;
    margin: 0 0 20px 0;
    line-height: 1.2;
    font-weight: bold!important;
}

.musicaLeccionTituloSpan {
    color: #6b17e2;
}

/* 3. Contenido de Texto y Autor */
.musicaLeccionContenido {
    /* Esta clase envuelve el texto, puedes añadirle estilos si lo necesitas */
}

.musicaTextoBase {
    margin-bottom: 15px;
    /* Hereda el font-size y color del .musicaContenedorLeccion */
    line-height: 1.6; /* Añadido para consistencia */
}

/* --- CLASE REUTILIZADA --- */
.musicaAutor {
    font-size: 17px;
    color: #333;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

/* --- CLASE REUTILIZADA --- */
.musicaAutorNombre {
    color: #6d28d9;
    font-weight: 700;
}


/* 4. Bloque Interior de Videos (Gradiente) */
.musicaSeccionVideos {
    margin: 20px 2em;
    font-family: Arial, sans-serif;
    background: linear-gradient(140deg, #6d28d9, #090323);
    border-radius: 20px;
    overflow: hidden;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: inset 0 10px 15px -5px rgba(0,0,0,0.25), 0 10px 30px rgba(0,0,0,0.1);
}

.musicaSeccionVideosLayout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.musicaSeccionVideosLayout p {
    color: rgba(255,255,255,0.7);
    max-width: 60%;
    margin: 1em 0;
    font-weight: 200;

}

.musicaSeccionVideosLayout .musicaVideoTitulo,
.musicaSeccionVideosLayout .leccion-duracion,
.musicaSeccionVideosLayout .musicaVideoWrapperGrande,
.musicaSeccionVideosLayout p {
    /* Le decimos a todos los hijos que su ancho máximo es 640px */
    max-width: 640px !important; 
    
    /* Le decimos que ocupen el 100% de ese ancho (para que no se encojan) */
    width: 100%;
    
    /* Forzamos que el texto interno esté a la izquierda */
    text-align: left;
    
    /* Buena práctica para que el padding no rompa el ancho */
    box-sizing: border-box; 
}


.musicaSeccionVideosLayout p::before {
    content: "▶";        /* El símbolo que quieres añadir */
    margin-right: 0.5em;
}

.leccion-duracion::before {
    content: "◕"!important;        /* El símbolo que quieres añadir */
    margin-right: 0.5em;    
    
}

/* 5. Títulos de los Videos Internos */
.musicaVideoTitulo {
    font-size: 2.3em;
    color: #ffffff;
    margin: 1.3em 0 0.5em 0;
    line-height: 1.2;
    font-weight: bold!important;
    text-align: left;
    max-width: 640px;
}

.musicaVideoTituloSpan {
    color: #52cadd;
}

/* 6. Contenedor del Video (NUEVO) */
.musicaVideoWrapperGrande {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 640px;
    aspect-ratio: 16/9;
    background-color: #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    overflow: hidden;
/* --- ¡NUEVO! --- */
  /* Necesario para posicionar la capa gris interna */
  position: relative; 
  
  /* --- TRANSICIÓN --- */
  /* Quitamos 'transform', solo animamos la sombra */
  transition: box-shadow 0.3s ease;
}

/* 1. LA CAPA DE VIÑETA (inicialmente invisible) */
.musicaVideoWrapperGrande::before {
  content: ''; 
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* --- ¡AQUÍ ESTÁ LA MAGIA! --- */
  /* Definimos el degradado:
     - 'circle' -> forma circular.
     - 'rgba(42, 42, 42, 0) 20%' -> En el centro (hasta el 20% del radio) 
       es transparente (usando tu gris de fondo #2a2a2a, que es rgb(42,42,42)).
     - 'rgba(42, 42, 42, 0.8) 100%' -> En los bordes (100%) 
       será tu gris con 80% de opacidad. */
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100%);
  
  /* --- CAMBIO EN LA TRANSICIÓN --- */
  /* Hacemos la capa invisible por defecto */
  opacity: 0; 
  /* Le decimos que anime su opacidad suavemente */
  transition: opacity 0.3s ease;
  
  /* Permite hacer clic 'a través' de la capa */
  pointer-events: none;
}

/* 2. ESTADO :HOVER (Contenedor) */


/* 3. ESTADO :HOVER (Capa) */
.musicaVideoWrapperGrande:hover::before {
  /* Hacemos la capa de viñeta visible */
  opacity: 1; 
}
/* --- CLASE REUTILIZADA --- */
.musicaVideoIframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}


/* ========================================
   Estilos del Módulo "Examen Final" (NUEVO)
   ======================================== */

/* 1. Modificador del Contenedor Principal */
/* Se usa junto a .musicaContenedorPrincipal */
.examen-dark {
    background: linear-gradient(130deg, transparent, #341c9466);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 2. Padding específico del módulo Examen */
/* Sobreescribe .musicaColumnaTexto para un padding uniforme de 50px */
.examen-dark .musicaColumnaTexto {
    padding: 50px;
}
/* El span dentro del título */
.examen-dark .musicaTituloPrincipal span {
    color: #64C0D7;
}

.examen-dark .musicaDescripcion {
    margin-bottom: 30px; /* Como estaba en tu style="" */
}

/* 4. Nuevas Clases para Botones */
.examenBotonesWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.examenBoton {
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none; /* Buena práctica para <a> */
    display: inline-block; /* Buena práctica para <a> */
    text-align: center;
    border: none; /* Estado base */
}

.examenBoton-primario {
    background-color: #ffffff;
    color: #4c1d95;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.examenBoton-secundario {
    background-color:rgba(255,255,255,255.0.4);
    color: #4c1d95;
    border: 2px solid #ffffff;
}

/* ========================================
   Efectos Hover para Botones (NUEVO)
   ======================================== */

/* 1. El "motor" de la animación (añadido a la clase base) */
.examenBoton {
    /* ... tus estilos existentes ... */
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none; 
    display: inline-block; 
    text-align: center;
    border: none;
    
    /* --- AÑADIDO --- */
    /* Anima TODOS los cambios (transform, color, etc.) 
       durante 0.3 segundos con una curva "ease". */
    transition: all 0.3s ease;
}

/* 2. Efecto Hover para el Botón Primario (Efecto "lift") */
.examenBoton-primario:hover {
    transform: translateY(-2px); /* Mueve el botón 2px hacia arriba */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15); /* Aumenta la sombra */
}

/* 3. Efecto Hover para el Botón Secundario (Efecto "fill") */
.examenBoton-secundario:hover {
    background-color: #ffffff; /* Se rellena de blanco */
    color: #1f1e26; /* El texto toma el color del fondo oscuro */
}


/* ========================================
   Media Queries para Responsividad (ACTUALIZADAS)
   ======================================== */

/* * Breakpoint 1: Tablets y Móviles ( < 850px )
 * Se apilan las columnas y se ajustan los paddings/títulos.
 */
@media (max-width: 850px) {
    
    .musicaVideoTitulo,
    .musicaSeccionVideosLayout p {
    max-width: 100%!important;
    }
    
    .musicaContenedorPrincipal {
        background-color: transparent!important;
        box-shadow: none!important;
    }

    /* Hacemos que AMBOS contenedores ocupen casi todo el ancho */
    .musicaContenidoPrincipal, /* Esta clase estaba en tu MQ, la mantengo */
    .musicaContenedorLeccion {
        margin: 20px 15px;
    }

    /* Ajustamos paddings del Contenedor de Lección */
    .musicaContenedorLeccion,
    .musicaSeccionVideos {
        padding-left: 30px;
        padding-right: 30px;
        margin-left: 0!Important;
        margin-right: 0!Important;    
    }

    /* * [ACTUALIZADO]
     * Reducimos el padding en las columnas de 2-col
     * Añadimos ".examen-dark .musicaColumnaTexto" para que también responda.
     */
    .musicaColumnaTexto,
    .examen-dark .musicaColumnaTexto {
        padding: 40px 30px;
    }

    .musicaColumnaVideo {
        min-height: 350px;
    }

    /* ESTANDARIZACIÓN DE TÍTULOS (Bajamos de 44px a 34px) */
    .musicaTituloPrincipal {
        font-size: 34px;  
    }
    
    /* REGLAS MÁS ESPECÍFICAS para el bloque 2 */
    .musicaContenedorLeccion .musicaLeccionTitulo,
    .musicaSeccionVideos .musicaVideoTitulo {
        font-size: 34px !important; /* Añadimos !important por si acaso */
    }
}


/* * Breakpoint 2: Móviles Pequeños ( < 420px )
 * Refinamiento final de paddings y fuentes.
 */
@media (max-width: 420px) {

    /* * [ACTUALIZADO]
     * ESTANDARIZACIÓN DE PADDINGS (Todos a 20px laterales)
     * Añadimos ".examen-dark .musicaColumnaTexto"
     */
    .musicaColumnaTexto,
    .examen-dark .musicaColumnaTexto,
    .musicaColumnaVideo,
    .musicaContenedorLeccion,
    .musicaSeccionVideos {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* * [ACTUALIZADO]
     * Mantenemos padding vertical en los bloques que lo necesitan
     * Añadimos ".examen-dark .musicaColumnaTexto"
     */
    .musicaColumnaTexto,
    .examen-dark .musicaColumnaTexto {
         padding-top: 30px;
         padding-bottom: 30px;
    }
    
    .musicaColumnaVideo {
         padding-top: 30px;
         padding-bottom: 30px;
    }

    .musicaContenedorLeccion,
    .musicaSeccionVideos {
         padding-top: 30px;
         padding-bottom: 30px;
    }


    /* ESTANDARIZACIÓN DE TÍTULOS (Bajamos a 28px) */
    .musicaTituloPrincipal {
        font-size: 28px;
    }

    /* REGLAS MÁS ESPECÍFICAS para el bloque 2 */
    .musicaContenedorLeccion .musicaLeccionTitulo,
    .musicaSeccionVideos .musicaVideoTitulo {
        font-size: 28px !important; /* Añadimos !important por si acaso */
    }

    /* ESTANDARIZACIÓN DE TEXTO (Todo a 15px) */
    .musicaDescripcion,
    .musicaAutor,
    .musicaContenedorLeccion .musicaTextoBase { /* Regla más específica */
        font-size: 15px;  
    }
}