/* ... (todos los estilos generales de la tarjeta van aquí) ... */
.course-card-widget-pro {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    max-width: 360px;
    margin: 20px auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card-widget-pro:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

/* ... (estilos de la imagen y contenido) ... */
.card-image-container-pro { position: relative; }
.card-image-container-pro .course-image { width: 100%; height: 220px; object-fit: cover; display: block; }
.card-image-container-pro .price-tag { position: absolute; top: 15px; left: 15px; background-color: rgba(255, 255, 255, 0.9); color: #1a202c; padding: 5px 12px; border-radius: 20px; font-size: 14px; font-weight: 600; backdrop-filter: blur(5px); }
.card-image-container-pro .author-avatar { position: absolute; bottom: -20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.card-content-pro { padding: 30px 25px 25px 25px; }
.card-content-pro .course-title { font-size: 22px; font-weight: 700; color: #8F8F8F; margin: 0 0 15px 0; line-height: 1.3; }
.card-meta-pro { display: flex; align-items: center; gap: 20px; margin-bottom: 15px; font-size: 14px; color: #718096; }
.card-meta-pro .meta-item { display: flex; align-items: center; gap: 8px; }
.card-meta-pro .icon { width: 18px; height: 18px; stroke-width: 2; }
.card-meta-pro .category-tag { margin-left: auto; background-color: #fee2e2; color: #ef4444; padding: 4px 12px; border-radius: 20px; font-weight: 500; }
.card-content-pro .course-description { font-size: 15px; color: #4a5568; line-height: 1.6; margin: 0 0 25px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --- BOTÓN --- */
/* Aquí están los estilos que le dan la apariencia al botón */
.card-content-pro .cta-button {
    display: block;
    width: 100%;
    background-color: #30C23E; /* Color rojo */
    color: #fff;
    text-align: center;
    padding: 14px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.card-content-pro .cta-button:hover {
    background-color: #2BAD49; /* Un rojo más oscuro al pasar el cursor */
    transform: scale(1.03); /* Un pequeño efecto de crecimiento */
}

/* estilos del widget tarjetas de beneficios*/

.feature-widget {
  text-align: left;
  max-width: 260px;
  font-family: 'Poppins', sans-serif;
  color: #444;
}

.icon-box {
  width: 70px;
  height: 70px;
  background: #A8E6F1; /* azul claro tipo el de la imagen */
  border-radius: 50% 30% 40% 50%; /* forma irregular orgánica */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.icon-box img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.feature-widget h3 {
  font-size: 1.2rem;
  color: #111;
  margin: 0 0 8px;
  font-weight: 600;
}

.feature-widget p {
  font-size: 14px;
  color: #6b6680;
  line-height: 1.6;
  margin: 0;
}