/* variables.css */
:root {

  /* === COLORES === */
  --color-primary:        #E8523A;
  --color-primary-dark:   #C93F28;
  --color-primary-light:  #EC6050;

  --color-dark:           #111111;
  --color-dark-alt:       #1A1A1A;
  --color-dark-soft:      #222222;

  --color-light:          #F5F5F5;
  --color-white:          #FFFFFF;

  --color-text-main:      #FFFFFF;
  --color-text-muted:     rgba(255, 255, 255, 0.65);
  --color-text-dark:      #111111;

  --color-border:         rgba(255, 255, 255, 0.12);

  /* === TIPOGRAFÍA === */
  --font-primary:         'Raleway', Arial, sans-serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.375rem;   /* 22px */
  --fs-xl:    1.75rem;    /* 28px */
  --fs-2xl:   2.25rem;    /* 36px */
  --fs-3xl:   3rem;       /* 48px */
  --fs-4xl:   4rem;       /* 64px */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* === ESPACIADO === */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  8rem;

  /* === LAYOUT === */
  --container-max:  1200px;
  --container-pad:  1.5rem;

  /* === BORDES === */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* === SOMBRAS === */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.15);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.35);
  --shadow-primary: 0 4px 24px rgba(232, 82, 58, 0.45);

  /* === WHATSAPP NEON === */
  --color-wa:           #25D366;
  --color-wa-dark:      #1ab354;
  --color-wa-neon:      #39FF8F;
  --shadow-wa-neon:     0 0 8px #39FF8F, 0 0 24px #25D366, 0 4px 24px rgba(37,211,102,0.55);
  --shadow-wa-neon-hover: 0 0 16px #39FF8F, 0 0 48px #25D366, 0 6px 32px rgba(37,211,102,0.75);

  /* === LOGO NEON === */
  --shadow-logo-neon:   0 0 10px #39FF8F, 0 0 30px rgba(57,255,143,0.4);

  /* === TRANSICIONES === */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* === TEXTURA === */
  --texture-url: url('../assets/img/texture.jpg');
}