/* =========================================
    DISEÑO DEL CATÁLOGO DE CURSOS (Estilo Udemy)
   ========================================= */

.cursos-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px auto;
}

.curso-card {
    background-color: #ffffff; /* Tarjeta blanca para resaltar */
    width: 340px;
    border-radius: 15px; /* Bordes redondeados */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: left;
    transition: transform 0.3s ease;
}

.curso-card:hover {
    transform: translateY(-10px); /* Efecto de saltar al pasar el mouse */
}

/* La parte de la imagen y el precio */
.curso-imagen {
    position: relative; /* Clave para poder poner el precio encima */
    height: 200px;
    background-color: rgb(128, 0, 255);
}

.curso-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para que la imagen no se deforme */
}

.precio-etiqueta {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: rgb(128, 0, 255); /* Verde como tu referencia */
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.1rem;
}

/* La información de la tarjeta (Textos) */
.curso-info {
    padding: 25px;
}

.estrellas {
    color: #ffc107; /* Amarillo de las estrellas */
    font-size: 14px;
    margin-bottom: 10px;
}

.puntaje {
    color: #333;
    font-weight: bold;
    margin-left: 5px;
}

.resenas {
    color: #888;
    margin-left: 5px;
}

.curso-card h3 {
    color: #1a1a1a; /* Letra oscura para leerse en fondo blanco */
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.4;
    min-height: 50px; /* Mantiene la altura igual aunque el título sea corto */
}

.tipo-acceso {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #777;
    border-top: 1px solid #000000;
    padding-top: 15px;
    margin-bottom: 20px;
}

.tipo-acceso strong {
    color: #333;
}

/* EL BOTÓN MORADO */
.btn-anadir {
    display: block;
    text-align: center;
    background-color: rgb(128, 0, 255); /* Color naranja/amarillo de tu foto */
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.btn-anadir:hover {
    background-color: #aa00ff; /* Se pone más oscuro al pasar el ratón */
}

/* Estilos para que tu logo se vea perfecto en la barra */
.logo-img {
    height: 100px; /* Puedes subir o bajar este número 
    si lo quieres más grande o más chico */
    width: auto; /* Esto evita que tu logo se estire o se deforme */
    margin: 1px;
    padding: 1px;
    transition: transform 0.3s ease; /* Le da un efecto suave */
}

/* Opcional: Un pequeño efecto para que el logo crezca un poquito al pasar el mouse */
.logo-img:hover {
    transform: scale(1.05);
}

/* ALINEACIÓN EXACTA DEL LOGO Y EL TEXTO (Uno al lado del otro) */
.logo-link {
    display: flex;
    flex-direction: row; /* ¡Esta es la regla de oro! Obliga a que estén en la misma línea horizontal */
    align-items: center; /* Los centra perfectamente de arriba hacia abajo */
    gap: 50px; /* Es el espacio de separación entre el pajarito y el texto */
    text-decoration: none;
}

.logo-img {
    height: 132px; /* Le subí un poco el tamaño para que el logo se vea imponente como en tu foto */
    width: auto;
    display: block;
}

.logo-texto {
    font-size: 50px;
    font-weight: bold;
    color: rgb(128, 0, 255);
    white-space: nowrap; /* ¡Clave! Esto prohíbe que el texto se caiga al renglón de abajo */
}