/*
    Estilos específicos para el index
    Jakov Josias Vazquez Akiyama
    4BMPR
*/

/*Estilo para el título "Cursos" al pasar el cursor por encima*/
aside .desplegable:hover p{
    transform: scale(1.1); /*Efecto de aumento al pasar el mouse*/
}

/*Estilo para el contenedor de la imagen principal*/
.principal {
    margin: 25px auto;
    width: 90%; /* En móviles ocupará casi todo el ancho */
    max-width: 600px; /* En PC se detendrá en 600px */
    cursor: pointer;
}

/*Estilo para la imagen principal*/
.principal img{
    width: 100%; /*La imagen se ajusta al ancho del contenedor*/
    height: auto;
    transition: all 0.5s ease; /*Suaviza la animación de giro*/
}

/*Estilo para la imagen principal al pasar el cursor por encima del contenedor (evita errores causados por el movimiento de la imagen)*/
.principal:hover img{
    transform: rotateY(360deg) scale(1.1); /*Gira completamente la imagen de manera horizontal*/
}

/*Estilo para el contenedor inferior que agrupa los cursos*/
.cursos{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 40px 0 100px 0;
}

.cursos a{
    text-decoration: none; /*Elimina el subrayado de los enlaces*/
    color: black; /*Color del texto de los enlaces*/
}

/*Estilo para cada tarjeta de curso individual*/
.cursos div{
    cursor: pointer;
    transition: all 0.6s ease; /*Transición para el efecto de agrandado*/
}

/*Efecto de aumento al pasar el mouse sobre un curso*/
.cursos div:hover{
    transform: scale(1.1); /*Aumenta el tamaño de la tarjeta*/
}

/*Estilo para las imágenes de los cursos en la sección principal*/
.cursos div img{
    width: 90px; /*Tamaño grande para los iconos principales*/
    height: auto;
}

/*Estilo para los nombres de los cursos debajo de las imágenes*/
.cursos div p{
    margin-top: 10px; /*Separa el texto de la imagen*/
    font-weight: bold; /*Resalta el nombre en negrita*/
}

@media(max-width: 768px) {
    .cursos{
        flex-direction: column;
    }
    .cursos div img{
        width: 130px; /*Tamaño grande para los iconos principales*/
        height: auto;
    }
}