/* --- ESTILOS BASE --- */
        body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f8f9fa; margin: 0; padding-bottom: 60px; color: #333; }
        .main-container-s { max-width: 800px; margin: 0 auto; padding: 20px; }

        .main-container-l { max-width: 1200px; margin: 0 auto; padding: 20px; }

        /* --- ESTILOS DE LA CABECERA DE CATEGORÍA --- */
        .categoria-section { margin-bottom: 60px; }
        
        .cat-header { margin-bottom: 20px; padding-left: 10px; border-left: 5px solid #609BBF; }
        
        .cat-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 5px; }
        
        .cat-title { font-size: 28px; font-weight: 800; margin: 0; color: #2d3436; }
        
        .cat-badge { 
            background: #2d3436; color: #fff; 
            padding: 4px 12px; border-radius: 20px; 
            font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
        }

        .cat-desc { font-size: 16px; color: #636e72; margin: 8px 0 0 0; max-width: 800px; line-height: 1.5; }

        /* --- ESTILOS DEL SWIPER Y TARJETAS (Igual que antes pero refinado) --- */
        .swiper { width: 100%; padding: 10px 5px 40px 5px !important; }

        .curso-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
            height: 100%;
            display: flex; flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .curso-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.12); }

        .imagen-wrapper { position: relative; height: 170px; overflow: hidden; }
        .imagen-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
        .curso-card:hover .imagen-wrapper img { transform: scale(1.05); }
        
        .status-badge {
            position: absolute; top: 12px; right: 12px;
            padding: 5px 10px; border-radius: 8px; 
            font-size: 11px; font-weight: 800; color: white;
            backdrop-filter: blur(4px);
        }
        .bg-free { background: rgba(40, 167, 69, 0.9); }
        .bg-premium { background: rgba(0, 0, 0, 0.7); }

        .card-content { padding: 18px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .card-content h3 { margin: 0 0 6px 0; font-size: 17px; font-weight: 700; color: #2d3436; line-height: 1.3; }
        .lesson-count { color: #b2bec3; font-size: 13px; font-weight: 500; margin-bottom: 15px; display: flex; align-items: center; gap: 5px; }
        
        .btn {
            display: block; width: 100%; text-align: center;
            padding: 10px 0; border-radius: 10px; 
            text-decoration: none; font-size: 14px; font-weight: 700;
            transition: all 0.2s;
        }
        .btn-primary { background: #609BBF; color: white; box-shadow: 0 4px 6px rgba(255, 107, 107, 0.2); }
        .btn-primary:hover { background: #609BBF; box-shadow: 0 6px 12px rgba(255, 107, 107, 0.3); }
        
        .btn-secondary { background: #f1f2f6; color: #57606f; }
        .btn-secondary:hover { background: #dfe4ea; color: #2f3542; }

        /* Flechas Swiper */
        .swiper-button-next, .swiper-button-prev { color: #609BBF; background: rgba(255,255,255,0.8); width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .swiper-button-next:after, .swiper-button-prev:after { font-size: 18px; font-weight: bold; }
        .swiper-pagination-bullet-active { background: #609BBF; }


        /* --- CABECERA DEL CURSO --- */
        .hero-course {
            background: white; border-radius: 16px; overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08); margin-bottom: 40px; 
        }
        .hero-image { width: 100%; height: 300px !important; object-fit: cover; object-position: bottom;}
        .hero-content { padding: 30px; }
        .back-link { display: inline-block; margin-bottom: 15px; color: #636e72; text-decoration: none; font-weight: 600; font-size: 14px; }
        .back-link:hover { color: #609BBF; }
        
        h1 { margin: 0 0 10px 0; font-size: 32px; color: #2d3436; }
        p.desc { font-size: 18px; color: #636e72; line-height: 1.6; }

        /* --- LISTA DE CHALLENGES --- */
        .challenge-list { list-style: none; padding: 0; margin: 0; }
        
        .challenge-item {
            display: flex; align-items: center; gap: 20px;
            background: white; padding: 15px; margin-bottom: 15px;
            border-radius: 12px; border: 1px solid #eee;
            transition: all 0.2s; cursor: pointer;
        }
        .challenge-item:hover { 
            transform: translateX(5px); border-color: #609BBF; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .play-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 45px;          /* Tamaño generoso */
            height: 45px;         /* Cuadrado perfecto */
            background-color: #609BBF; /* Color PRIMARIO de tu marca (cámbialo al tuyo) */
            color: white;         /* Flecha blanca */
            border-radius: 50%;   /* Lo convierte en círculo */
            font-size: 20px;
            padding-left: 4px;    /* Pequeño ajuste óptico para centrar el triángulo */
            box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Sombra para dar relieve (elevación) */
            flex-shrink: 0;       /* Evita que se aplaste si el texto es largo */
            margin-right: 15px;   /* Separación del texto */
            transition: transform 0.2s;
        }
        .challenge-info { flex-grow: 1; }
        .challenge-title { font-weight: 700; color: #2d3436; margin: 0 0 4px 0; }
        .challenge-meta { font-size: 13px; color: #b2bec3; }
        
        /* --- MODAL VIDEO --- */
        .modal-overlay {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.9); z-index: 1000;
            justify-content: center; align-items: center;
        }
        .modal-content {
            width: 90%; max-width: 900px; position: relative;
            background: black; border-radius: 12px; overflow: hidden;
        }
        .close-btn {
            position: absolute; top: 15px; right: 20px; color: white;
            font-size: 30px; cursor: pointer; z-index: 20;
            background: rgba(0,0,0,0.5); width: 40px; height: 40px;
            text-align: center; line-height: 40px; border-radius: 50%;
        }

        /* --- CORTINA DE BLOQUEO --- */
        .cortina-premium {
            display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.85); z-index: 10;
            flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center;
        }
        .btn-app {
            background: #609BBF; color: white; padding: 12px 25px; 
            border-radius: 30px; text-decoration: none; font-weight: bold; margin-top: 15px;
            display: inline-block;
        }

/* --- MODAL VIDEO (Estilo Cine CORREGIDO) --- */
        .modal-overlay {
            display: none; 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.9); 
            z-index: 1000;
            justify-content: center; align-items: center;
        }

        .modal-content {
            /* Ancho: 95% en móvil, pero máximo 800px en PC */
            width: 95%; 
            max-width: 800px; 
            
            /* Alto: Nunca más alto que el 90% de la pantalla */
            max-height: 90vh;
            overflow-y: auto; /* Si el contenido es muy largo, permite scroll interno */
            
            position: relative;
            background: black; 
            border-radius: 12px; 
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }

        /* Ajuste específico para el reproductor de video */
        #cinePlayer {
            width: 100%;
            /* El video nunca ocupará más del 70% de la altura de la pantalla */
            max-height: 70vh; 
            background: black;
        }

        .close-btn {
            position: absolute; top: 10px; right: 10px; color: white;
            font-size: 24px; cursor: pointer; z-index: 100;
            background: rgba(255, 255, 255, 0.2); 
            width: 32px; height: 32px;
            text-align: center; line-height: 32px; border-radius: 50%;
            transition: background 0.3s;
        }
        .close-btn:hover { background: rgba(255, 60, 60, 0.8); }

        /* --- CORTINA DE BLOQUEO (Ajustada) --- */
        .cortina-premium {
            display: none; 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.9); 
            z-index: 10;
            flex-direction: column; justify-content: center; align-items: center; 
            color: white; text-align: center;
            padding: 20px; box-sizing: border-box; /* Evita que el texto toque los bordes */
        }