/* app-app.css — página /aplicacion de Pinturas Especializadas: la app de escritorio y teléfono.
   Sólo se carga en esa página de esta instancia. Tokens semánticos: legible en claro y oscuro. */

.pa-page { padding-top: 34px; padding-bottom: 60px; }
.pa-hero { max-width: 72ch; margin-bottom: 30px; }
.pa-hero h1 { margin: 6px 0 14px; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.1; }
.pa-hero .lead { margin: 0 0 20px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.pa-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 0 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.pa-stats b { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }

.pa-descargas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; padding: 26px 0; border-top: 1px solid var(--line); }
.pa-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px 12px 12px 4px; background: var(--surface); }
.pa-card-kind { margin: 0; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pa-card h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.pa-card-meta { margin: 0; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.pa-card-nota { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.pa-card-cta { margin: 6px 0 0; }
.pa-card-cta .button { display: inline-block; }
.pa-card-hash { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .72rem; line-height: 1.5; word-break: break-all; }
.pa-card-hash code { font-size: .7rem; color: var(--ink); }

.pa-vacio { padding: 26px 0; border-top: 1px solid var(--line); }
.pa-vacio h2 { margin: 0 0 8px; font-size: 1.25rem; }
.pa-vacio p { max-width: 62ch; margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }

.pa-capturas { padding: 26px 0; border-top: 1px solid var(--line); }
.pa-capturas h2 { margin: 0 0 16px; font-size: 1.35rem; }
.pa-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.pa-shot { margin: 0; }
.pa-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pa-shot figcaption { margin-top: 8px; color: var(--muted); font-size: .82rem; line-height: 1.5; }

.pa-licencia, .pa-notas { padding: 26px 0; border-top: 1px solid var(--line); }
.pa-licencia h2, .pa-notas h2 { margin: 0 0 12px; font-size: 1.35rem; }
.pa-licencia p, .pa-notas li { max-width: 70ch; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.pa-licencia strong, .pa-notas strong { color: var(--ink); }
.pa-precio { margin: 14px 0; font-size: 1rem; color: var(--ink); }
.pa-precio strong { font-size: 1.2rem; }
.pa-nota { font-size: .84rem !important; }
.pa-notas ul { margin: 0; padding-left: 20px; }
.pa-notas li { margin-bottom: 8px; }
.pa-notas code { font-size: .82em; color: var(--ink); }

@media (max-width: 600px) {
    .pa-page { padding-top: 24px; }
    .pa-card { padding: 18px; }
    .pa-stats { gap: 4px 18px; }
    .pa-stats b { font-size: 1.25rem; }
}