.elementor-4876 .elementor-element.elementor-element-19b7bfb{--display:flex;}.elementor-4876 .elementor-element.elementor-element-ff9327d .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:18px;font-weight:700;line-height:1.4em;letter-spacing:0px;color:var( --e-global-color-secondary );}.woocommerce .elementor-4876 .elementor-element.elementor-element-4f9a1b4 .price{color:var( --e-global-color-accent );font-family:"Inter", Sans-serif;font-size:22px;font-weight:800;}.elementor-4876 .elementor-element.elementor-element-260fdfc .elementor-button{background-color:var( --e-global-color-primary );font-family:"Inter", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;line-height:1em;fill:var( --e-global-color-f2fe829 );color:var( --e-global-color-f2fe829 );border-radius:50px 50px 50px 50px;padding:16px 16px 16px 16px;}.elementor-4876 .elementor-element.elementor-element-260fdfc .elementor-button:hover, .elementor-4876 .elementor-element.elementor-element-260fdfc .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-308e809 );box-shadow:0px 0px 10px 0px rgba(109, 46.00000000000001, 142, 0.1);}.elementor-4876 .elementor-element.elementor-element-260fdfc .elementor-button:hover svg, .elementor-4876 .elementor-element.elementor-element-260fdfc .elementor-button:focus svg{fill:var( --e-global-color-308e809 );}@media(max-width:1024px){.elementor-4876 .elementor-element.elementor-element-ff9327d .elementor-heading-title{font-size:15px;}.elementor-4876 .elementor-element.elementor-element-260fdfc .elementor-button{font-size:14px;}}@media(max-width:767px){.elementor-4876 .elementor-element.elementor-element-ff9327d .elementor-heading-title{font-size:14px;}.elementor-4876 .elementor-element.elementor-element-260fdfc .elementor-button{font-size:13px;}}/* Start custom CSS for container, class: .elementor-element-19b7bfb *//* 
   =============================================
   ESTILO PREMIUM PARA LOOP ITEM (CURSOS)
   ============================================= 
*/

.course-card {
    background: var(--color-bg-alt, #ffffff);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 1px solid var(--color-border, #e5e7eb);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}

/* Efecto al pasar el mouse */
.course-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover, 0 20px 25px -5px rgba(0,0,0,0.1));
    border-color: var(--color-primary, #3b82f6);
}

/* Contenedor de Imagen */
.course-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.course-card:hover .course-image img {
    transform: scale(1.05);
}

/* Badge de "Más Vendido" o "Nuevo" */
.course-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 10;
    background: rgba(74, 14, 78, 0.85); /* Morado Berenjena */
    color: white;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Información del Curso */
.course-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Metadatos (Duración, Nivel) */
.course-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.meta-item {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted, #6b7280);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

.course-title {
    font-size: 17px;
    color: var(--color-text-main, #2C3038);
    margin-bottom: 8px;
    line-height: 1.4;
    font-weight: 700;
    flex: 1;
    transition: color 0.3s ease;
}

.course-card:hover .course-title {
    color: var(--color-primary, #3b82f6);
}

.course-instructor {
    font-size: 13px;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 20px;
}

.course-instructor span {
    font-weight: 600;
    color: var(--color-text-main, #2C3038);
}

/* Footer de la Tarjeta (Precio y CTA) */
.course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.course-price {
    color: var(--color-primary, #3b82f6);
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 22px;
    font-weight: 800;
}

/* Footer de la Tarjeta (Precio y CTA) */
.elementor-4876 .elementor-element.elementor-element-19b7bfb .course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

/* El botón 3D real para Elementor */
.elementor-4876 .elementor-element.elementor-element-19b7bfb .course-btn-cta .elementor-button {
    /* Degradado sutil */
    background: linear-gradient(180deg, #4F8CF6 0%, #2A61D6 100%);
    /* Sombra exterior para elevarlo y sombra interior blanca para el bisel 3D */
    box-shadow: 0 4px 6px rgba(42, 97, 214, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
    border: none;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Efecto al pasar el mouse sobre el botón */
.elementor-4876 .elementor-element.elementor-element-19b7bfb .course-btn-cta .elementor-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #5A95F7 0%, #326BE0 100%);
    box-shadow: 0 6px 12px rgba(42, 97, 214, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.course-card:hover .course-btn-cta {
    gap: 10px;
}/* End custom CSS */