/* =======================================================
   TEMA 4 — "Blue Wave" (Banco Mexicano)
   Glassmorphism con olas SVG y acento sky blue.
   Tipografía Source Sans Pro + Roboto, inspirada en Banca v6.
   ======================================================= */

:root {
  /* Paleta — fondo claro con olas azules y acento sky */
  --color-bg-deep:        #ffffff;
  --color-bg-mid:         #f1f7ff;
  --color-bg-panel:       #eaf3fd;

  --color-brand:          #2563eb;   /* azul fuerte */
  --color-brand-bright:   #0ea5e9;   /* azul medio */
  --color-accent:         #38bdf8;   /* sky accent */
  --color-accent-glow:    #7dd3fc;

  --color-text:           #0f172a;
  --color-text-muted:     #475569;
  --color-text-dim:       #94a3b8;

  --color-text-on-wave:   #ffffff;
  --color-text-on-wave-muted: rgba(255,255,255,0.80);

  --color-success:        #22c55e;
  --color-warning:        #f59e0b;
  --color-danger:         #ef4444;

  /* Glass (sobre foto/wave) */
  --glass-bg:             rgba(255, 255, 255, 0.10);
  --glass-bg-strong:      rgba(255, 255, 255, 0.28);
  --glass-border:         rgba(255, 255, 255, 0.20);
  --glass-border-strong:  rgba(56, 189, 248, 0.25);

  /* Gradientes de olas (azul cielo) */
  --grad-wave-1:          #38bdf8;
  --grad-wave-2:          #2563eb;
  --grad-wave-3:          #0ea5e9;
  --grad-wave-4:          #1d4ed8;

  --grad-accent:          linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  --grad-highlight:       linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #2563eb 100%);

  /* Tipografía */
  --font-family:          'Source Sans Pro', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:         'Source Sans Pro', 'Roboto', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;

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

  --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;

  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  --shadow-card:   0 32px 80px rgba(15, 23, 42, 0.20), inset 0 1px 0 rgba(255,255,255,0.15);
  --shadow-btn:    0 6px 20px rgba(14, 165, 233, 0.35);
  --glow-accent:   0 0 20px rgba(56, 189, 248, 0.45);
  --glow-strong:   0 0 40px rgba(56, 189, 248, 0.75);

  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 20px;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     600ms;

  --app-max-width: 480px;
  --app-min-width: 320px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ===== Layout web one-page ===== */
  --container-max:    1280px;
  --container-pad:    clamp(20px, 4vw, 56px);
  --section-pad-y:    clamp(64px, 10vw, 130px);
  --nav-height:       72px;
  --nav-height-sm:    60px;

  /* Tipografía fluida */
  --fs-hero:    clamp(2.5rem, 7vw, 5.5rem);
  --fs-display: clamp(2rem, 5vw, 3.5rem);
  --fs-title:   clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-body:    clamp(0.95rem, 1.05vw, 1.0625rem);
  --fs-lead:    clamp(1rem, 1.4vw, 1.25rem);
}