/* 1. SISTEMA DE VARIABLES GLOBALES */
/* (Definir una vez, aplicar en todo el template) */

:root {
   /* ==================================
      MARCA (Brand)
      ================================== */
   --brand-name: "ZWAM";
   --brand-tagline: "Sistema Híbrido de Conversión";

   /* ==================================
      COLORES (Colors) - LIGHT THEME / SAAS PREMIUM
      ================================== */

   /* Color principal (botones, acentos) */
   --color-primary: #5C2791;
   --color-primary-dark: #4A1F75;
   --color-secondary: #5C2791;
   --color-accent: #06B6D4;

   /* Fondos suaves, chips, badges */
   --color-primary-light: #F3EAF9;
   --color-secondary-light: #F3EAF9;

   /* Texto base */
   --color-text: #0F172A;
   --color-muted: #475569;
   --color-soft: #64748B;

   /* Fondo principal */
   --color-bg: #FFFFFF;
   --color-surface: #F8FAFC;
   --color-surface-soft: #F1F5F9;

   /* Variables extra de feedback/UI */
   --color-success: #10B981;
   --color-success-bg: rgba(16, 185, 129, 0.1);
   --color-border: #E2E8F0;
   --color-white: #FFFFFF;

   /* ==================================
      TIPOGRAFÍA (Typography)
      ================================== */

   /* Titulares (fuente expresiva) */
   --font-display: 'Raleway', system-ui, -apple-system, sans-serif;

   /* Cuerpo de texto */
   --font-body: 'Raleway', system-ui, -apple-system, sans-serif;

   /* Tamaño del H1 */
   --font-size-hero: clamp(2.5rem, 5vw + 1rem, 4rem);

   /* Tamaño de H2s */
   --font-size-section: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);

   /* ==================================
      ESPACIADO Y FORMAS (Spacing & Radius)
      ================================== */

   /* Padding vertical entre secciones */
   --spacing-section: 6rem;
   --spacing-section-mobile: 4rem;

   /* Redondez de tarjetas y botones */
   --radius-card: 16px;
   --radius-btn: 12px;
   --radius-badge: 50px;

   /* Elevación y sombras suaves (SaaS style) */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
   --shadow-blur: 0 8px 32px rgba(92, 39, 145, 0.15);
}