/* Spa Demo · marca FICTICIA (provisional)
   Paleta y tipografía propias, distintas de cualquier negocio real. Se usa en las pantallas del spa de la demo.
   La barra de la demo y el resto del repo usan la identidad de ElevaLab (assets/css/elevalab-tokens.css). */
:root {
  --spa-fondo: #eef3f0;
  --spa-superficie: #ffffff;
  --spa-primario: #2f5d50;
  --spa-primario-oscuro: #234638;
  --spa-acento: #8fc3b3;
  --spa-texto: #1d2a26;
  --spa-apagado: #4f625b;
  --spa-linea: #cfdcd5;
  --spa-fuente: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --spa-fuente-titulo: ui-serif, Georgia, Cambria, 'Times New Roman', serif;
}
.spa-lienzo { background: var(--spa-fondo); color: var(--spa-texto); font-family: var(--spa-fuente); border-radius: var(--radio); padding: 24px; }
.spa-lienzo h2, .spa-lienzo h3 { font-family: var(--spa-fuente-titulo); font-weight: 600; color: var(--spa-primario-oscuro); }
.spa-lienzo p { color: var(--spa-apagado); }
.spa-logo { display: block; width: min(260px, 100%); height: auto; margin-bottom: 16px; }
.spa-paleta { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.spa-muestra { border: 1px solid var(--spa-linea); border-radius: 10px; overflow: hidden; background: var(--spa-superficie); font-size: .82rem; }
.spa-muestra i { display: block; height: 44px; }
.spa-muestra span { display: block; padding: 6px 8px; color: var(--spa-texto); }
.spa-boton { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 22px; border-radius: 999px; border: 0; background: var(--spa-primario); color: #fff; font: inherit; font-weight: 600; }