:root {
        --color-primario: #200769;
        --color-secundario: #F4B328;
        --color-accento: #3cd3e7;
        --color-texto: #333;
        --color-texto-claro: #fff;
        --color-fondo: #f9f9f9;
        --color-fondo-secundario: #ecf0f1;
        --color-borde: #ddd;
        
        --espaciado-grande: 2rem;
        --espaciado-medio: 1rem;
        --espaciado-pequeno: 0.5rem;
    }
    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    .malla-curricular-container {
        width: 100vw;
        padding: 30px 50px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        position: relative;
    }
    .malla-curricular-container::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('../img/logo2.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.07;
        z-index: 1;
        pointer-events: none;
    }
    
    .malla-curricular-container h2 {
        text-align: center;
        color: var(--color-primario);
        margin-bottom: var(--espaciado-grande);
        padding-bottom: var(--espaciado-pequeno);
        border-bottom: 2px solid var(--color-secundario);
    }
    
    .semestres-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--espaciado-medio);
    }
    
    .semestre {
        background-color: var(--color-fondo-secundario);
        border-radius: 8px;
        padding: var(--espaciado-medio);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .semestre h3 {
        text-align: center;
        color: var(--color-primario);
        margin-bottom: var(--espaciado-medio);
        padding-bottom: var(--espaciado-pequeno);
        border-bottom: 1px solid var(--color-borde);
    }
    
    .materia {
        background-color: var(--color-texto-claro);
        border: 1px solid var(--color-borde);
        border-radius: 5px;
        padding: var(--espaciado-pequeno);
        margin-bottom: var(--espaciado-pequeno);
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        width: 100%;
    }
    
    .materia:hover {
        background-color: var(--color-secundario);
        color: var(--color-texto-claro);
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .materia.highlight {
        background-color: var(--color-accento);
        color: var(--color-texto-claro);
        font-weight: bold;
    }
    
    .materia.requisito {
        background-color: #f8e45c;
        color: var(--color-texto);
        font-weight: bold;
    }
    
    /* Flechas de requisitos (opcional) */
    .materia::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid var(--color-secundario);
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .materia:hover::after {
        opacity: 1;
    }
    
    /* Responsive */
    @media (max-width: 1024px) {
        .semestres-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    
    @media (max-width: 768px) {
        .semestres-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 480px) {
        .semestres-grid {
            grid-template-columns: 1fr;
        }
    }