/* ============================================================
   Listo247 — Servicios (tarea 05)
   Bloques de servicio alternados (texto + ejemplo de conversación).
   Reutiliza componentes de design-system.css (.chat, .chip, .btn, .card).
   ============================================================ */

/* Cabecera de la página */
.svc-hero{text-align:center;padding-block:clamp(48px,8vw,96px)}
.svc-hero .lead{margin:18px auto 0;max-width:600px}

/* Migas de pan */
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--primary-deep)}
.breadcrumb [aria-current]{color:var(--ink);font-weight:600}

/* Bloque de servicio: dos columnas, se invierte en alternos */
.svc{scroll-margin-top:88px}
.svc__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;
}
.svc:nth-of-type(even) .svc__media{order:-1}
@media(max-width:860px){
  .svc__grid{grid-template-columns:1fr}
  .svc:nth-of-type(even) .svc__media{order:0}
}

.svc__icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:var(--primary-soft);color:var(--primary-deep);margin-bottom:18px;
}
.svc__icon svg{width:26px;height:26px}
.svc__body h2{margin-bottom:14px}
.svc__body p.lead{margin-bottom:20px}

/* Capacidades como resultados (lista con check) */
.svc__caps{display:grid;gap:10px;margin:0 0 24px;padding:0;list-style:none}
.svc__caps li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:.98rem}
.svc__caps svg{width:20px;height:20px;color:var(--primary);flex:0 0 auto;margin-top:2px}

.svc__media{display:flex;justify-content:center}
.svc__media .chat{width:100%;max-width:440px}

/* Nota (p. ej. Voz sin follow-ups) */
.svc__note{
  font-size:.9rem;color:var(--muted);background:var(--bg-soft);
  border:1px dashed var(--line);border-radius:12px;padding:12px 16px;margin-top:4px;
}
.svc__note b{color:var(--ink)}