// Estilos adicionales para la página de detalle de servicio.
const css = `
.back { color: var(--navy); font-weight: 700; }
.deta-box { display: grid; gap: 26px; margin-top: 30px; }
.det {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: grid;
  grid-template-columns: 220px 1fr; min-height: 170px;
}
.det-visual {
  display: flex; align-items: center; justify-content: center; font-size: 74px;
  background: linear-gradient(135deg, #eaf4f8, #dff0f6);
}
.det-body { padding: 22px 26px; }
.det-body h3 { margin: 0 0 8px; color: var(--navy); font-size: 20px; }
.det-body p { margin: 0 0 12px; color: var(--muted); }
.det-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.det-tags span { background: #eef5f8; color: var(--navy); border-radius: 16px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.cond { background: #fff8e1; border: 1px solid #f1c40f; border-radius: var(--radius); padding: 20px 24px; margin-top: 26px; }
.cond h3 { margin: 0 0 10px; color: #6b5600; }
.cond ul { margin: 0; padding-left: 20px; color: #7a6508; }

@media (max-width: 640px) { .det { grid-template-columns: 1fr; } .det-visual { font-size: 56px; padding: 20px; } }