/* ════════════════════════════════════════════════
   VARIABLES — CEA FÉNIX
   Design tokens centralizados
════════════════════════════════════════════════ */
:root {
  /* Marca */
  --primary:       #2e9ff5;
  --primary-dark:  #1a7fd4;
  --secondary:     #f59e0b;
  --accent:        #1e40af;

  /* Fondo y superficie */
  --bg:            #f1f5f9;
  --bg-section:    #ffffff;
  --surface:       rgba(255,255,255,0.85);

  /* Texto */
  --text:          #0f172a;
  --text-light:    #64748b;
  --gray:          #475569;
  --dark:          #0f172a;
  --title:         #0f172a;
  --white:         #ffffff;

  /* Bordes y sombras */
  --border:        #e2e8f0;
  --shadow:        0 4px 20px rgba(0,0,0,.07);
  --shadow-md:     0 8px 30px rgba(0,0,0,.10);
  --shadow-lg:     0 16px 48px rgba(0,0,0,.14);

  /* Blur */
  --blur:          10px;

  /* Tipografía escalable */
  --font:          clamp(1.8rem, 3.5vw, 2.5rem);

  /* Cursos colores */
  --course-a2:     linear-gradient(135deg, #f59e0b, #fbbf24);
  --course-c1:     linear-gradient(135deg, #2563eb, #60a5fa);
  --course-b1:     linear-gradient(135deg, #059669, #34d399);
  --course-other:  linear-gradient(135deg, #64748b, #94a3b8);
}

html { scroll-behavior: smooth; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }