/* ============================================CARD-CAPACITACION.CSSEstilos para las cards de capacitación============================================ *//* ============================================1. ESTRUCTURA GENERAL DE LA CARD============================================ */.capacitacion-card{position:relative;border:3px solid white;border-radius:12px;overflow:hidden;transition:all 0.3s ease;background:linear-gradient(to right top,#356d93,#356d93,#356d93,#356d93,#356d93,#396b91,#3d6990,#41678e,#48638a,#4e5f85,#535b80,#57577a);width:100%;max-width:350px;margin:0 auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}.capacitacion-card:hover{transform:translateY(-8px);box-shadow:0 12px 24px rgba(0,0,0,0.2) !important;cursor:pointer;}/* ============================================2. IMAGEN DE LA CARD============================================ */.capacitacion-card .card-img-top{height:200px;width:100%;object-fit:cover;}/* ============================================3. TÍTULO DE LA CARD============================================ */.capacitacion-card .card-title{color:var(--text-color);font-size:1.1rem;height:2.8rem;line-height:1.4rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}/* ============================================4. INFORMACIÓN DE LA CARD============================================ */.card-info{font-size:0.9rem;color:var(--text-color);}.card-info p{line-height:1.8;color:var(--text-color);}.card-info i{font-size:1rem;color:var(--text-color);}.card-info .text-muted{color:rgba(253,253,253,0.8) !important;}.card-info .fw-semibold{color:var(--text-color);}/* ============================================5. BADGE DE DESTACADO (ESTRELLA)============================================ */.badge-destacado{position:absolute;top:12px;right:12px;width:45px;height:45px;display:flex;align-items:center;justify-content:center;z-index:10;}.badge-destacado svg{width:28px;height:28px;fill:url(#starGradient);filter:drop-shadow(0 0 0 white)drop-shadow(1px 0 0 white)drop-shadow(-1px 0 0 white)drop-shadow(0 1px 0 white)drop-shadow(0 -1px 0 white)drop-shadow(1px 1px 0 white)drop-shadow(-1px -1px 0 white)drop-shadow(1px -1px 0 white)drop-shadow(-1px 1px 0 white);}/* ============================================6. BOTÓN "VER MÁS"============================================ */.capacitacion-card .btn-primary{background:linear-gradient(to right top,#534b66,#5b4567,#673d65,#73335e,#7e2752);border:2px solid white;font-weight:600;padding:0.6rem;transition:all 0.3s ease;}.capacitacion-card .btn-primary:hover{background:linear-gradient(to right top,#534b66,#5b4567,#673d65,#73335e,#7e2752);}/* ============================================7. RESPONSIVE DESIGN============================================ */@media (max-width:768px){.capacitacion-card{margin-bottom:1.5rem;}.badge-destacado{width:38px;height:38px;}.badge-destacado svg{width:24px;height:24px;}}/* ============================================8. ANIMACIONES============================================ */.capacitacion-card{animation:fadeInUp 0.5s ease-out;}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}/* ============================================9. ACCESIBILIDAD============================================ */.capacitacion-card:focus-within{outline:3px solid #667eea;outline-offset:3px;}