/* =============================================
   GLOBAL — WEPY.AI
   Variables de color, espaciado, bordes,
   sombras y transiciones + reset CSS base.
   La tipografía vive en css/fonts/fonts.css.
   El responsive vive en css/responsive/breakpoints.css.
   ============================================= */


/* =============================================
   VARIABLES DEL SISTEMA DE DISEÑO
   ============================================= */
:root {
  /* ── Colores ─────────────────────────────── */
  --color-primary:      #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-text:         #111827;
  --color-text-muted:   #6B7280;
  --color-bg:           #FFFFFF;
  --color-border:       rgba(0, 0, 0, 0.08);

  /* ── Gradiente oficial de marca ─────────── */
  --gradient-brand: linear-gradient(90deg, #2563EB 0%, #22D3A3 100%);

  /* ── Acentos violeta / lila ──────────────── */
  --color-violet:    #7C3AED;
  --color-lilac:     #8B5CF6;
  --gradient-violet: linear-gradient(90deg, #7C3AED 0%, #8B5CF6 100%);

  /* ── Espaciado (base 8px) ───────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Bordes ─────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── Sombras ────────────────────────────── */
  --shadow-sm: 0 1px 3px  rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── Navbar ─────────────────────────────── */
  --navbar-height-mobile:  68px;
  --navbar-height-desktop: 68px;

  /* ── Transiciones ───────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;

  /* ── Contenedor ─────────────────────────── */
  --container-max: 1280px;
  --container-px:  1.5rem;
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}