/* ==========================================================================
   APPS LISTADO - CARKING - ESTILO PLAY STORE COHERENTE CON TURBO OBD
   ========================================================================== */

.hero-custom {
    height: 60px;
    background: linear-gradient(135deg, #0b1c3d 0%, #1f3c88 100%);
}

.apps-hero{
  background:#fff;
  padding:56px 20px 24px;
  font-family:'Poppins', sans-serif;
  text-align:center;
  border-bottom:1px solid #e8eaed;
}
.apps-hero-container{ max-width:1100px; margin:0 auto; }

.section-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#f0fdf4; border:1px solid #dcfce7;
  padding:6px 14px; border-radius:100px;
  font-size:12px; font-weight:700; letter-spacing:0.8px;
  color:#15803d; margin-bottom:18px;
}
.section-badge-dot{
  width:8px; height:8px; background:#00E676; border-radius:50%;
  box-shadow:0 0 0 4px rgba(0,230,118,0.2);
}

.apps-hero h1{
  font-size:52px; line-height:1.05; font-weight:800;
  letter-spacing:-2px; color:#111; margin:0 0 12px;
}
.apps-hero h1 span{
  background:linear-gradient(135deg,#0b1c3d 0%, #1f3c88 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.apps-hero p{
  font-size:18px; color:#666; max-width:600px; margin:0 auto 28px; line-height:1.5;
}

.apps-filter-bar{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:8px;
}
.filter-pill{
  padding:10px 18px; border-radius:100px; border:1px solid #e8eaed;
  background:#fff; font-family:'Poppins'; font-size:13px; font-weight:600;
  color:#5f6368; cursor:pointer; transition:all 0.2s ease;
}
.filter-pill:hover{ border-color:#111; color:#111; }
.filter-pill.active{
  background:#111; color:#fff; border-color:#111;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

/* GRID */
.apps-list-section{
  background:#fafafa; padding:32px 20px 80px;
  font-family:'Poppins', sans-serif;
}
.apps-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}

.app-card{
  background:#fff; border:1px solid #e8eaed; border-radius:20px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
  text-align:left;
}
.app-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,0.08);
  border-color:#d2d6dc;
}

.app-card-top{
  padding:18px 18px 0 18px; display:flex; justify-content:space-between; align-items:flex-start;
}
.app-card-icon{
  width:68px; height:68px; border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.12); object-fit:cover;
}
.placeholder-icon{
  width:68px; height:68px; border-radius:16px; background:#f8f9fa;
  display:flex; align-items:center; justify-content:center; font-size:32px;
  border:1px dashed #dadce0;
}
.app-card-badge{
  font-size:10px; font-weight:800; letter-spacing:0.6px;
  padding:5px 10px; border-radius:100px;
}
.app-card-badge.free{ background:#e6fcf0; color:#0a7a3a; border:1px solid #c3f0d3; }
.app-card-badge.soon{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; }

.app-card-body{ padding:16px 18px 16px; flex:1; }
.app-card-title{ font-size:18px; font-weight:700; color:#202124; margin:0 0 2px; line-height:1.2; }
.app-card-dev{ font-size:12px; color:#01875f; font-weight:500; margin-bottom:10px; }

.app-card-stats{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:#5f6368; margin-bottom:10px;
}
.app-card-stats b{ color:#202124; }
.app-card-stats .dot{ opacity:0.5; }

.app-card-desc{
  font-size:13.5px; line-height:1.5; color:#4a4e51; margin:0 0 14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:40px;
}

.app-card-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.app-card-tags span{
  font-size:11px; font-weight:600; padding:5px 10px; border-radius:100px;
  background:#f1f3f4; color:#5f6368;
}

.app-card-footer{
  padding:14px 18px 18px; display:flex; gap:10px;
  border-top:1px solid #f1f3f4; margin-top:auto;
}
.btn-card-primary{
  flex:1; background:#111; color:#fff; text-decoration:none;
  padding:11px 16px; border-radius:10px; font-size:13px; font-weight:700;
  text-align:center; transition:all 0.2s; border:1px solid #111;
}
.btn-card-primary:hover{ background:#222; transform:translateY(-1px); }
.btn-card-secondary{
  flex:1; background:#00E676; color:#0a0a0a; text-decoration:none;
  padding:11px 16px; border-radius:10px; font-size:13px; font-weight:800;
  text-align:center; transition:all 0.2s;
}
.btn-card-secondary:hover{ background:#00d06d; transform:translateY(-1px); }

.btn-card-primary.disabled, .btn-card-secondary.disabled{
  opacity:0.5; cursor:not-allowed; pointer-events:none;
}
.app-card.coming-soon{ opacity:0.85; }

.apps-trust{
  max-width:1100px; margin:28px auto 0;
  background:#fff; border:1px solid #e8eaed; border-radius:12px;
  padding:12px; text-align:center; font-size:12px; color:#5f6368; font-weight:600;
}

/* Responsive */
@media(max-width:1024px){
  .apps-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:640px){
  .apps-hero h1{ font-size:34px; letter-spacing:-1px; }
  .apps-hero p{ font-size:15px; }
  .apps-grid{ grid-template-columns:1fr; gap:16px; }
  .apps-list-section{ padding:20px 14px 80px; }
}