/* Galería de apps. Se carga después de /styles.css y solo añade lo propio. */

.top nav a[aria-current="page"]{color:var(--ink);font-weight:600}

/* Hero con móvil dibujado */
.apps-hero{grid-template-columns:1.2fr .8fr}
.home-phone{position:relative;justify-self:center;width:100%;max-width:300px;padding:12px;border-radius:40px;background:var(--ink);box-shadow:6px 6px 0 rgba(17,20,24,.22);transform:rotate(3deg)}
.home-phone .photo-note{right:-30px;top:-58px}
.home-phone .screen{border-radius:30px;padding:14px 16px 16px;min-height:440px;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#fff7c7 0%,#ffe45c 55%,#ffd23f 100%)}
.statusbar{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink);padding:0 6px 14px}
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px}
.home-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;pointer-events:auto}
.home-grid img{width:58px;height:58px;border-radius:15px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);object-fit:cover}
.home-grid a{min-width:0}
.home-grid span{font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dock{margin-top:auto;display:flex;justify-content:space-around;padding:10px 12px;border-radius:22px;background:rgba(255,255,255,.55);border:1.5px solid rgba(17,20,24,.15)}
.dock span{width:40px;height:40px;border-radius:12px;background:rgba(17,20,24,.12)}
@media (max-width:800px){.apps-hero{grid-template-columns:1fr}.home-phone{max-width:260px;transform:rotate(2deg)}.home-phone .screen{min-height:380px;padding:14px 10px 16px}.home-grid{gap:16px 2px}.home-grid span{font-size:10px;letter-spacing:-.02em}}

/* Filtros */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters button{font:600 14px var(--text);padding:8px 16px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;transition:transform .12s}
.filters button:hover{transform:translateY(-1px)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* Tarjetas de app */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.app{display:flex;flex-direction:column;gap:14px;padding:22px;box-shadow:4px 4px 0 var(--ink);scroll-margin-top:90px;transition:transform .15s,box-shadow .15s}
.app:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.app[hidden]{display:none}
.app:target{outline:3px solid var(--accent);outline-offset:4px}
.app-head{display:flex;align-items:center;gap:14px}
.app-icon{width:72px;height:72px;border-radius:18px;border:1.5px solid var(--ink);background:var(--paper);object-fit:cover;flex:none}
.app h2{font-family:var(--display);font-size:24px;letter-spacing:-.03em;line-height:1.1}
.pill{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--hl);border:1.5px solid var(--ink)}
.pill.beta{background:#e6ecff}
.app>p{color:var(--body);font-size:15px;line-height:1.6;flex:1}
.plats{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.plats li{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:#f1f2ee;border:1px solid #e1e2dc}
.app-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.app-actions .btn{padding:10px 16px;font-size:14px}
.app-actions .link{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:1.5px solid currentColor;margin-left:4px}
.none{color:var(--muted);margin-top:16px}

@media (prefers-reduced-motion:reduce){.app,.filters button{transition:none}}