/* ════════════════════════════════════════════════════════════
   TOKENS DE DISEÑO — INVIERTE FÁCIL 360 (IF360)
   Versión: 1.0 · Mayo 2026
   ════════════════════════════════════════════════════════════ */

:root {
  --if-bg-primary:     #060D18;
  --if-bg-container:   #0B1828;
  --if-bg-emphasis:    #071D30;
  --if-bg-card:        #162E4A;

  --if-brand-blue:     #29B6F6;
  --if-accent-teal:    #26C6DA;
  --if-accent-purple:  #7E57C2;
  --if-accent-orange:  #FFA726;
  --if-accent-green:   #4CAF50;
  --if-accent-gold:    #FFD54F;
  --if-accent-yellow:  #FFD700;

  --if-text-primary:   #FFFFFF;
  --if-text-secondary: #B0BEC5;
  --if-text-muted:     #607D8B;

  --if-medal-gold:     #D4AF37;
  --if-medal-silver:   #B0C0CC;
  --if-medal-bronze:   #CD7F32;

  --if-font-web:       'Inter', 'Calibri', 'Trebuchet MS', sans-serif;

  --if-size-hero:      clamp(40px, 6vw, 60px);
  --if-size-featured:  clamp(28px, 4vw, 46px);
  --if-size-data:      clamp(24px, 3.5vw, 36px);
  --if-size-h1:        clamp(22px, 3vw, 30px);
  --if-size-h2:        clamp(20px, 2.5vw, 26px);
  --if-size-h3:        19px;
  --if-size-label:     13px;
  --if-size-body:      16px;
  --if-size-small:     14px;
  --if-size-footer:    12px;

  --if-weight-bold:    700;
  --if-weight-semibold:600;
  --if-weight-regular: 400;

  --if-space-1:   4px;
  --if-space-2:   8px;
  --if-space-3:   16px;
  --if-space-4:   24px;
  --if-space-5:   32px;
  --if-space-6:   48px;
  --if-space-7:   64px;
  --if-space-8:   80px;
  --if-space-9:   96px;
  --if-space-10:  120px;

  --if-radius:         4px;
  --if-border:         1px solid rgba(41, 182, 246, 0.25);
  --if-border-strong:  1px solid rgba(41, 182, 246, 0.6);
  --if-divider:        2px solid #29B6F6;

  --if-logo-width:     180px;
  --if-transition:     0.2s ease;

  --if-container-max:  1200px;
  --if-container-wide: 1400px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--if-font-web);
  font-size: var(--if-size-body);
  font-weight: var(--if-weight-regular);
  color: var(--if-text-primary);
  background: var(--if-bg-primary);
  line-height: 1.6;
}