/* Swinger Party — sistema de diseño «fiesta privada de neón con Piñita» (Fase 18, parte D).
 * Aquí viven las tipografías autoalojadas y las variables de color/medida. Todo el CSS nuevo las usa SIEMPRE con valor de reserva:
 *   color: var(--sp-text, #F6F1FA);
 * (así una tele con un Chromium muy antiguo, o un fallo al cargar esta hoja, sigue viéndose bien).
 * Compatibilidad con Chromium ~60: sin gap en flexbox, sin inset, aspect-ratio ni min()/max()/clamp() sin plan B. */

@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/bricolage-600.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/bricolage-800.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/dm-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/dm-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Pacifico'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/pacifico-400.woff2') format('woff2'); }   /* SOLO el logotipo «Swinger Party» */

:root {
  /* fondo y texto */
  --sp-bg: #0F0A1C;
  --sp-bg-glow: #3A1260;
  --sp-text: #F6F1FA;
  --sp-text-2: #CDBFE6;
  --sp-text-3: #E3D9FF;
  /* colores de acción y de contexto */
  --sp-magenta: #FF3D8B;     /* acción principal */
  --sp-violet: #8B5CFF;      /* secundario */
  --sp-gold: #FFC94D;
  --sp-turquoise: #3DE0C8;   /* Paso y preguntas */
  --sp-orange: #FF8A3D;
  --sp-red: #FF3D4F;
  --sp-green: #4EE08F;
  --sp-cell-free: #6F6788;
  /* tarjetas y botones */
  --sp-card-bg: rgba(255, 255, 255, 0.04);
  --sp-card-radius: 20px;
  --sp-btn-h: 46px;          /* 58px en tele */
  --sp-btn-grad: linear-gradient(135deg, #FF3D8B 0%, #FF7A45 100%);
  /* tipografías */
  --sp-font-title: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --sp-font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sp-font-logo: 'Pacifico', 'Brush Script MT', cursive;
}
html.tv-mode { --sp-btn-h: 58px; }