/* ==========================================================================
   Visitapro — Design tokens
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — marca */
  --navy-900: #142943;
  --navy-800: #1e3a5c;
  --navy-700: #28496f;
  --blue-600: #2e86de;
  --blue-500: #3b93ea;
  --blue-400: #4fb0e8;
  --blue-50: #eaf4fd;

  /* Color — neutros */
  --white: #ffffff;
  --gray-50: #f7f9fb;
  --gray-100: #eef1f5;
  --gray-200: #e2e7ee;
  --gray-300: #cbd3de;
  --gray-500: #7c8aa0;
  --gray-700: #4b5568;
  --gray-900: #1c2431;

  /* Superficie / texto semánticos */
  --color-bg: var(--white);
  --color-bg-alt: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-700);
  --color-text-soft: var(--gray-500);
  --color-border: var(--gray-200);
  --color-accent: var(--blue-600);
  --color-accent-strong: var(--navy-800);

  /* Tipografía */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-md: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --text-lg: clamp(1.375rem, 1.3rem + 0.35vw, 1.625rem);
  --text-xl: clamp(1.75rem, 1.6rem + 0.7vw, 2.25rem);
  --text-2xl: clamp(2.25rem, 1.95rem + 1.4vw, 3.25rem);
  --text-3xl: clamp(2.75rem, 2.2rem + 2.5vw, 4.25rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Espaciado — escala base 8px */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  --section-padding-y: clamp(4rem, 3rem + 4vw, 8rem);

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 2.5rem);

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Sombras */
  --shadow-soft: 0 1px 2px rgba(20, 41, 67, 0.04), 0 12px 32px -8px rgba(20, 41, 67, 0.12);
  --shadow-lift: 0 2px 4px rgba(20, 41, 67, 0.05), 0 24px 48px -12px rgba(20, 41, 67, 0.18);
  --shadow-header: 0 1px 0 rgba(20, 41, 67, 0.06), 0 8px 24px -12px rgba(20, 41, 67, 0.08);

  /* Movimiento */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 450ms;
  --duration-slow: 700ms;

  --header-height: 100px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}