/* ==========================================================================
   variables.css — Design tokens de Z-System
   Valores extraidos de la auditoria del sitio original (Wavo 2.3.4 + Elementor)
   ========================================================================== */

:root {
  /* ---------- Color: superficies ---------- */
  --color-bg: #0b0b0b;
  --color-bg-alt: #101010;
  --color-surface: #151515;
  --color-surface-hover: #1c1c1c;
  --color-overlay: rgba(6, 6, 6, 0.94);

  /* ---------- Color: texto ---------- */
  --color-heading: #ffffff;
  --color-text: #f8f8f8;
  --color-muted: #a6a6a6;
  --color-muted-strong: #c9c9c9;

  /* ---------- Color: bordes ---------- */
  --color-border: rgba(255, 255, 255, 0.21);
  --color-border-soft: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.38);

  /* ---------- Color: acento (WhatsApp / CTA) ---------- */
  --color-accent: #25d366;
  --color-accent-hover: #20c85d;
  --color-accent-deep: #128c7e;
  --color-on-accent: #06180d;

  /* ---------- Color: foco accesible ---------- */
  --color-focus: #7fd8ff;

  /* ---------- Tipografia ---------- */
  --font-base: "Ubuntu", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Escala mobile-first (crece en responsive.css) */
  --fs-eyebrow: 0.75rem;      /* 12px -> 13px en desktop */
  --fs-body: 1rem;            /* 16px */
  --fs-body-sm: 0.9375rem;    /* 15px */
  --fs-h1: 2rem;              /* 32px -> 64px desktop */
  --fs-h2: 1.875rem;          /* 30px -> 38px desktop (valor original) */
  --fs-h3: 1.375rem;          /* 22px -> 25px desktop */
  --fs-h4: 1.125rem;          /* 18px */
  --fs-display: 10vw;         /* outline "Contactanos": 10vw -> 8vw -> 5vw */

  --lh-tight: 1.2;
  --lh-heading: 1.4;          /* line-height original de los h2 */
  --lh-body: 1.8;
  --lh-loose: 2;              /* parrafos largos del original */

  --ls-eyebrow: 3px;          /* letter-spacing original de los eyebrow */
  --ls-tight: -0.01em;

  /* ---------- Espaciado (escala de 4px) ---------- */
  --sp-2xs: 0.25rem;
  --sp-xs: 0.5rem;
  --sp-sm: 0.75rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;

  --section-padding-block: 4rem;
  --container-max: 1240px;
  --container-narrow: 860px;
  --container-gutter: 1.25rem;

  /* ---------- Layout ---------- */
  --header-height: 72px;
  --eyebrow-rule-width: 44px; /* 70px en desktop, como el original */
  --gap-grid: 1.25rem;

  /* ---------- Radios (valores del original) ---------- */
  --radius-sm: 8px;
  --radius-md: 15px;  /* tarjetas / logos de clientes */
  --radius-lg: 24px;
  --radius-xl: 30px;  /* imagenes destacadas */
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 10px 30px rgba(37, 211, 102, 0.25);

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(0.3, 0, 0.7, 1); /* misma curva que el original */
  --dur-fast: 0.2s;
  --dur-base: 0.35s;
  --dur-slow: 0.7s; /* transition-duration de los logos de clientes */

  /* ---------- Capas ---------- */
  --z-base: 1;
  --z-header: 100;
  --z-nav-panel: 110;
  --z-modal: 200;
}

/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}