/* ─────────────────────────────────────────────────────────────
   Estilos propios de la página "services".

   Declarada en build/pages.php → 'styles'. Se carga DESPUÉS de
   styles.css, así que lo de aquí gana. Los tokens (--brand, --surface…)
   vienen de allí.
   ───────────────────────────────────────────────────────────── */

.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: 40px; }
.svc { display: flex; flex-direction: column; }
.svc-num {
  font-family: 'Big Shoulders', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 2px; color: var(--brand); opacity: .7;
}
.svc-icon { width: 54px; height: auto; margin: 14px 0 16px; }
.svc-title { font-size: 25px; }
.svc-body { color: var(--muted); font-size: 15px; }
/* El dato destacado cierra la tarjeta, separado por una línea fina. */
.svc-hl {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-family: 'Big Shoulders', sans-serif; font-size: 18px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand);
}

.about-shell { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; }
.about-media img { border-radius: var(--radius); border: 1px solid var(--line-soft); }

/* ── Para quién trabajamos ──────────────────────────────────── */
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip-list li {
  padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-family: 'Big Shoulders', sans-serif; font-size: 15px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text);
}

/* ── Aplicaciones ───────────────────────────────────────────── */
/* Las que tienen foto, en fichas; las que no, debajo como etiquetas
   (.chip-list, con .app-more para separarlas de la rejilla). */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 40px; }
.app {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s;
}
.app:hover { border-color: var(--line); }
.app img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.app-title { font-size: 17px; margin: 0; line-height: 1.15; padding: 14px 18px; }
.app-more { margin-top: 22px; }