/* ============================================================
   DESARROLLO-APPS.CSS
   ============================================================ */

.app-card{
   background:var(--panel); 
   border:1px solid var(--panel-border); 
   border-radius:18px; 
   padding:28px; 
   display:flex; 
   gap:20px; 
   align-items:center;
}
.app-icon{
   overflow: hidden;
   width:64px; 
   height:64px; 
   border-radius:16px; 
   flex-shrink:0; 
   background:var(--grad); 
   display:flex; 
   align-items:center; 
   justify-content:center; 
   font-family:'Chakra Petch'; 
   font-weight:700; 
   color:#04211a; 
   font-size:1.3rem;
}

.app-icon img{
   width:100%;
   height:100%;
   object-fit:cover;
   object-position:center;
   display:block;
 }

.app-card h4{
   font-size:1.05rem; 
   margin-bottom:4px;
}
.app-card p{
   font-size:.82rem;
   color:var(--ink-dim); 
   margin-bottom:12px;
}
.app-actions{
   display:flex; 
   gap:10px; 
   flex-wrap:wrap;
}

.premium-box{
   margin-top:18px; 
   padding:16px; 
   border:1px dashed var(--line);
   border-radius:12px; 
   display:flex; 
   gap:12px; 
   align-items:center; 
   background:rgba(127,224,168,.04);
}
.premium-box .lock{
   width:38px;
   height:38px; 
   border-radius:10px; 
   background:rgba(79,184,201,.12); 
   display:flex; 
   align-items:center; 
   justify-content:center;
   color:var(--teal); 
   flex-shrink:0;
}
.premium-box p{
   font-size:.8rem; 
   color:var(--ink-dim); 
   line-height:1.4;
}
.premium-box strong{
   color:var(--ink);
}

/* ============================================================
   RESPONSIVE — desarrollo-apps.css
   ============================================================ */
@media (max-width:600px){
  .app-card{flex-direction:column; align-items:flex-start; text-align:left;}
  .premium-box{flex-direction:column; align-items:flex-start;}
}