:root {
            --primary-dark: #1a2a3a;
            --accent-red: #e74c3c;
            --bg-light: #f4f6f8;
            --border-color: #eee;
        }

        .course-page { 
            padding: 40px 20px;
             background: #fff; 
            }
        
        .hero-course { 
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url('../../assets/brigadista-contra-incendios.jpg');

            background-size: cover; 
            background-position: center;
            color: white; 
            padding: 60px 20px; 
            border-radius: 8px; 
            margin-bottom: 40px; 
            border-left: 10px solid var(--accent-red);
        }
        .hero-course h1 { font-size: 2.5rem; margin-bottom: 15px; line-height: 1.2; }
        .tag-sincronico { background: var(--accent-red); color: #fff; padding: 5px 15px; border-radius: 4px; font-weight: bold; font-size: 0.8rem; text-transform: uppercase; }
        
        .grid-container { display: grid; grid-template-columns: 1fr 350px; gap: 40px; }
        
        .section-card { margin-bottom: 40px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
        .section-card h2 { color: var(--primary-dark); margin-bottom: 20px; font-size: 1.6rem; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--accent-red); padding-bottom: 5px; width: fit-content; }
        
        .description-box { line-height: 1.6; color: #444; margin-bottom: 30px; }
        .description-box p { margin-bottom: 15px; }

        .cronograma-section { margin-bottom: 20px; }
        .cronograma-list { list-style: disc; list-style-position: inside; padding: 0; margin: 0; display: grid; gap: 6px; }
        .cronograma-list li { padding: 4px 0 4px 18px; color: var(--primary-dark); font-size: 0.95rem; line-height: 1.5; }

        .highlights-list { background: #fff8f7; border: 1px solid #ffe4e1; padding: 20px; border-radius: 8px; margin: 20px 0; }
        .highlights-list ul { list-style: none; padding: 0; }
        .highlights-list li { margin-bottom: 10px; position: relative; padding-left: 25px; }
        .highlights-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-red); font-weight: bold; }

        .temario-clase { background: #f9f9f9; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color); }
        .temario-clase h4 { color: var(--accent-red); margin-bottom: 12px; border-bottom: 1px solid #ddd; padding-bottom: 5px; font-size: 1.1rem; }
        .temario-clase ul { list-style: none; padding-left: 0; }
        .temario-clase ul li { padding: 6px 0; position: relative; padding-left: 20px; font-size: 0.95rem; line-height: 1.4; }
        .temario-clase ul li::before { content: '■'; position: absolute; left: 0; color: var(--primary-dark); font-size: 0.7rem; top: 8px; }

        .sidebar-info { background: var(--bg-light); padding: 25px; border-radius: 8px; position: sticky; top: 100px; border: 1px solid #e0e0e0; }
        .info-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ddd; font-size: 0.95rem; }
        .info-row strong { color: var(--primary-dark); }
        
        .inscription-box { margin-top: 25px; text-align: center; }
        .btn-payment { background: #009ee3; color: white; padding: 12px; border-radius: 5px; display: block; margin-top: 10px; font-weight: bold; text-decoration: none; transition: opacity 0.3s; }
        .btn-payment:hover { opacity: 0.9; }
        .btn-primary { background: #25d366; color: white; padding: 12px; border-radius: 5px; display: block; font-weight: bold; text-decoration: none; }

        .note-box { background: #fff3cd; border: 1px solid #ffeeba; padding: 15px; border-radius: 8px; font-size: 0.85rem; margin-top: 20px; color: #856404; }

        .eval-box { background: #e3f2fd; padding: 25px; border-radius: 8px; border-left: 6px solid #1976d2; }
        .qr-mock { width: 80px; height: 80px; background: #eee; position: absolute; bottom: 20px; right: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; border: 1px solid #ccc; }

        @media (max-width: 992px) { 
        .grid-container { 
            display: grid; /* Asegura que mantenga el comportamiento de grid */
            grid-template-columns: 1fr; 
        } 
        
        .sidebar-info { 
            position: static; 
        } 

        /* Nuevas reglas para invertir el orden en mobile */
        .main-content {
            order: 2; /* Pasa a estar en segundo lugar */
        }

        .sidebar {
            order: 1; /* Sube al primer lugar */
        }
}