/* ================================================
   DESIGN TOKENS — Escuela Universal de Transformación
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&display=swap');

@font-face {
  font-family: 'Zenitha Classic';
  src: url('../assets/fonts/Zenitha Classic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colores ---- */
  --clr-primary:        #6B3FA0;
  --clr-primary-soft:   #9B6FCC;
  --clr-primary-dark:   #4A2870;
  --clr-primary-pale:   #EDE5F7;

  --clr-bg:             #FDFAF6;
  --clr-bg-alt:         #F5F0EB;
  --clr-bg-lavender:    #F2EEF7;
  --clr-white:          #FFFFFF;

  --clr-text:           #2C2C2C;
  --clr-text-soft:      #6B6B6B;
  --clr-text-light:     #9A9A9A;

  --clr-border:         #E8E0F0;
  --clr-border-soft:    #F0EBF8;

  --clr-footer-bg:      #2C1A3E;
  --clr-footer-text:    #C9AEED;
  --clr-footer-muted:   #7A6390;

  --clr-success:        #25D366;

  /* ---- Tipografía ---- */
  --font-serif:   'Poppins', sans-serif;
  --font-sans:    'Poppins', sans-serif;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   2rem;      /* 32px */
  --text-3xl:   2.5rem;    /* 40px */
  --text-4xl:   3.25rem;   /* 52px */
  --text-5xl:   4rem;      /* 64px */

  /* ---- Espaciado ---- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  --section-py:    96px;
  --section-py-sm: 64px;
  --container:     1200px;
  --container-sm:  860px;

  /* ---- Bordes ---- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-card:  12px;
  --radius-pill:  999px;

  /* ---- Sombras ---- */
  --shadow-card:    0 2px 16px rgba(107, 63, 160, 0.08);
  --shadow-hover:   0 8px 32px rgba(107, 63, 160, 0.18);
  --shadow-header:  0 1px 0 var(--clr-border);
  --shadow-btn:     0 4px 12px rgba(107, 63, 160, 0.25);

  /* ---- Transiciones ---- */
  --transition:     200ms ease;
  --transition-md:  300ms ease;
}