/* ==========================================================================
   Sistema de diseño centralizado para VertiSur
   Todas las propiedades visuales se administran desde aquí mediante tokens.
   ========================================================================== */
:root {
  /* Paleta base (VertiSur). Se reemplaza al cambiar data-theme. */
  --color-brand-900: #0b1b2b;
  --color-brand-800: #0f263d;
  --color-brand-700: #1f3f5b;
  --color-brand-600: #13304b;
  --color-brand-500: #17486d;
  --color-accent-500: #f5c400;
  --color-accent-400: #ffd94d;

  /* Neutros y textos */
  --color-surface-900: #040a12;
  --color-surface-800: #060e18;
  --color-surface-700: #0a1727;
  --color-surface-600: #0b1b2b;
  --color-surface-500: #0f263d;
  --color-text-primary: #f7f9fc;
  --color-text-secondary: #c6cdd9;
  --color-text-contrast: #0b0b0b;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(245, 196, 0, 0.35);
  --color-overlay-strong: rgba(0, 0, 0, 0.65);
  --color-overlay-soft: rgba(255, 255, 255, 0.04);
  --color-overlay-faint: rgba(255, 255, 255, 0.02);
  --color-overlay-highlight: rgba(245, 196, 0, 0.08);
  --color-overlay-accent-soft: rgba(245, 196, 0, 0.05);
  --color-overlay-brand-strong: rgba(31, 63, 91, 0.45);
  --color-surface-accent: rgba(15, 38, 61, 0.6);
  --color-surface-alt: rgba(11, 27, 43, 0.7);
  --color-surface-deep: rgba(11, 27, 43, 0.8);
  --color-surface-accent-strong: rgba(31, 63, 91, 0.6);
  --color-surface-gradient-soft: rgba(31, 63, 91, 0.6);
  --color-surface-gradient-strong: rgba(11, 27, 43, 0.8);
  --color-badge: rgba(245, 196, 0, 0.12);
  --border-contrast: 1px solid rgba(255, 255, 255, 0.12);
  --outline-accent: 2px solid rgba(245, 196, 0, 0.5);
  --outline-accent-soft: 2px solid rgba(245, 196, 0, 0.4);
  --color-border-accent: rgba(245, 196, 0, 0.4);

  /* Tipografías */
  --font-heading: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Logo global */
  --logo-width: 140px;
  --logo-height: 100px;
  --logo-gap: var(--space-3);

  /* Escala tipográfica */
  --fs-900: clamp(32px, 4vw, 48px);
  --fs-800: clamp(26px, 3vw, 36px);
  --fs-700: clamp(20px, 2vw, 24px);
  --fs-650: clamp(18px, 2.2vw, 22px);
  --fs-600: 18px;
  --fs-500: 16px;
  --fs-400: 14px;
  --fs-300: 12px;
  --lh-tight: 1.2;
  --lh-regular: 1.5;
  --lh-comfortable: 1.7;

  /* Escala de espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radios y bordes */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-base: 1px solid var(--color-border);

  /* Sombras */
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.18);
  --shadow-strong: 0 18px 48px rgba(0, 0, 0, 0.25);
  --shadow-accent: 0 14px 30px rgba(245, 196, 0, 0.35);
  --shadow-accent-strong: 0 18px 34px rgba(245, 196, 0, 0.42);

  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;

  /* Capas y dimensiones */
  --z-sticky: 10;
  --z-overlay: 100;
  --content-max-width: 1200px;
  --section-padding: clamp(48px, 6vw, 96px);
  --gap-lg: clamp(20px, 3vw, 32px);

  /* Gradientes y fondos */
  --gradient-body: radial-gradient(circle at 10% 20%, rgba(245, 196, 0, 0.07), transparent 30%),
    radial-gradient(circle at 80% 0, rgba(31, 63, 91, 0.35), transparent 32%),
    linear-gradient(145deg, var(--color-brand-600, #0b1b2b) 0%, var(--color-surface-800) 60%, var(--color-surface-900) 100%);
  --gradient-header: linear-gradient(120deg, rgba(27, 59, 89, 0.92), rgba(31, 63, 91, 0.88));
  --gradient-hero-card: linear-gradient(150deg, rgba(31, 63, 91, 0.75), rgba(11, 27, 43, 0.9));
  --gradient-cta: linear-gradient(120deg, var(--color-brand-500, #0f263d), #0a1727 60%, #08121f 100%);
  --gradient-secondary-card: linear-gradient(160deg, rgba(31, 63, 91, 0.7), rgba(11, 27, 43, 0.9));
  --gradient-contact: linear-gradient(140deg, rgba(31, 63, 91, 0.65), rgba(10, 23, 39, 0.9));

  /* Breakpoints */
  --bp-medium: 960px;
  --bp-small: 640px;
}

:root[data-theme="corporativo-profesional"] {
  --color-brand-900: #0f172a;
  --color-brand-800: #16213a;
  --color-brand-700: #1e2f4d;
  --color-brand-600: #243b5a;
  --color-brand-500: #2d4b6b;
  --color-accent-500: #14b8a6;
  --color-accent-400: #5eead4;
  --color-surface-900: #0a0f1a;
  --color-surface-800: #111827;
  --color-surface-700: #162033;
  --color-surface-600: #1d2a40;
  --color-surface-500: #23314a;
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-contrast: #0b1120;
  --color-border: rgba(94, 234, 212, 0.18);
  --color-border-strong: rgba(20, 184, 166, 0.35);
  --color-overlay-highlight: rgba(20, 184, 166, 0.12);
  --color-overlay-accent-soft: rgba(20, 184, 166, 0.08);
  --color-overlay-brand-strong: rgba(30, 47, 77, 0.45);
  --color-surface-accent: rgba(36, 59, 90, 0.65);
  --color-surface-alt: rgba(15, 23, 42, 0.75);
  --color-surface-deep: rgba(15, 23, 42, 0.85);
  --color-surface-accent-strong: rgba(30, 47, 77, 0.6);
  --color-surface-gradient-soft: rgba(30, 47, 77, 0.6);
  --color-surface-gradient-strong: rgba(15, 23, 42, 0.85);
  --color-badge: rgba(20, 184, 166, 0.12);
  --border-contrast: 1px solid rgba(248, 250, 252, 0.15);
  --outline-accent: 2px solid rgba(20, 184, 166, 0.45);
  --outline-accent-soft: 2px solid rgba(20, 184, 166, 0.3);
  --color-border-accent: rgba(20, 184, 166, 0.4);
  --gradient-body: radial-gradient(circle at 12% 20%, rgba(20, 184, 166, 0.12), transparent 34%),
    radial-gradient(circle at 80% 12%, rgba(45, 75, 107, 0.45), transparent 32%),
    linear-gradient(150deg, var(--color-brand-600) 0%, var(--color-surface-800) 60%, var(--color-surface-900) 100%);
  --gradient-header: linear-gradient(120deg, rgba(17, 24, 39, 0.94), rgba(30, 47, 77, 0.88));
  --gradient-hero-card: linear-gradient(150deg, rgba(30, 47, 77, 0.75), rgba(10, 15, 26, 0.92));
  --gradient-cta: linear-gradient(120deg, var(--color-brand-500), #111827 60%, #0a0f1a 100%);
  --gradient-secondary-card: linear-gradient(160deg, rgba(30, 47, 77, 0.7), rgba(10, 15, 26, 0.9));
  --gradient-contact: linear-gradient(140deg, rgba(36, 59, 90, 0.65), rgba(14, 20, 35, 0.9));
}

:root[data-theme="tecnico-industrial"] {
  --color-brand-900: #1a1c1f;
  --color-brand-800: #23262b;
  --color-brand-700: #2c3138;
  --color-brand-600: #353b44;
  --color-brand-500: #3f4650;
  --color-accent-500: #f97316;
  --color-accent-400: #fdba74;
  --color-surface-900: #0f1115;
  --color-surface-800: #15181d;
  --color-surface-700: #1c2026;
  --color-surface-600: #232830;
  --color-surface-500: #2b313a;
  --color-text-primary: #f8fafc;
  --color-text-secondary: #d1d5db;
  --color-text-contrast: #111318;
  --color-border: rgba(253, 186, 116, 0.2);
  --color-border-strong: rgba(249, 115, 22, 0.45);
  --color-overlay-highlight: rgba(249, 115, 22, 0.15);
  --color-overlay-accent-soft: rgba(249, 115, 22, 0.1);
  --color-overlay-brand-strong: rgba(35, 38, 43, 0.55);
  --color-surface-accent: rgba(53, 59, 68, 0.65);
  --color-surface-alt: rgba(26, 28, 31, 0.75);
  --color-surface-deep: rgba(26, 28, 31, 0.85);
  --color-surface-accent-strong: rgba(44, 49, 56, 0.6);
  --color-surface-gradient-soft: rgba(44, 49, 56, 0.6);
  --color-surface-gradient-strong: rgba(26, 28, 31, 0.85);
  --color-badge: rgba(249, 115, 22, 0.16);
  --border-contrast: 1px solid rgba(248, 250, 252, 0.18);
  --outline-accent: 2px solid rgba(249, 115, 22, 0.5);
  --outline-accent-soft: 2px solid rgba(249, 115, 22, 0.35);
  --color-border-accent: rgba(249, 115, 22, 0.45);
  --gradient-body: radial-gradient(circle at 20% 20%, rgba(249, 115, 22, 0.1), transparent 36%),
    radial-gradient(circle at 80% 15%, rgba(63, 70, 80, 0.45), transparent 32%),
    linear-gradient(160deg, var(--color-brand-600) 0%, var(--color-surface-800) 65%, var(--color-surface-900) 100%);
  --gradient-header: linear-gradient(130deg, rgba(26, 28, 31, 0.95), rgba(44, 49, 56, 0.9));
  --gradient-hero-card: linear-gradient(145deg, rgba(44, 49, 56, 0.75), rgba(15, 17, 21, 0.92));
  --gradient-cta: linear-gradient(120deg, var(--color-brand-500), #1c2026 60%, #0f1115 100%);
  --gradient-secondary-card: linear-gradient(160deg, rgba(44, 49, 56, 0.75), rgba(15, 17, 21, 0.9));
  --gradient-contact: linear-gradient(140deg, rgba(53, 59, 68, 0.65), rgba(17, 19, 24, 0.9));
}

:root[data-theme="visual-comercial"] {
  --color-brand-900: #2b0a3d;
  --color-brand-800: #3b0f4f;
  --color-brand-700: #4e1468;
  --color-brand-600: #5f1b7f;
  --color-brand-500: #6d2293;
  --color-accent-500: #f43f5e;
  --color-accent-400: #fb7185;
  --color-surface-900: #120716;
  --color-surface-800: #1a0b23;
  --color-surface-700: #231131;
  --color-surface-600: #2e173d;
  --color-surface-500: #381c4b;
  --color-text-primary: #fdf2f8;
  --color-text-secondary: #fbcfe8;
  --color-text-contrast: #2b0a3d;
  --color-border: rgba(251, 113, 133, 0.22);
  --color-border-strong: rgba(244, 63, 94, 0.45);
  --color-overlay-highlight: rgba(244, 63, 94, 0.15);
  --color-overlay-accent-soft: rgba(244, 63, 94, 0.1);
  --color-overlay-brand-strong: rgba(78, 20, 104, 0.5);
  --color-surface-accent: rgba(95, 27, 127, 0.65);
  --color-surface-alt: rgba(43, 10, 61, 0.75);
  --color-surface-deep: rgba(43, 10, 61, 0.85);
  --color-surface-accent-strong: rgba(78, 20, 104, 0.6);
  --color-surface-gradient-soft: rgba(78, 20, 104, 0.6);
  --color-surface-gradient-strong: rgba(43, 10, 61, 0.85);
  --color-badge: rgba(244, 63, 94, 0.18);
  --border-contrast: 1px solid rgba(253, 242, 248, 0.16);
  --outline-accent: 2px solid rgba(244, 63, 94, 0.5);
  --outline-accent-soft: 2px solid rgba(244, 63, 94, 0.35);
  --color-border-accent: rgba(244, 63, 94, 0.4);
  --gradient-body: radial-gradient(circle at 18% 25%, rgba(244, 63, 94, 0.15), transparent 36%),
    radial-gradient(circle at 80% 10%, rgba(109, 34, 147, 0.5), transparent 34%),
    linear-gradient(150deg, var(--color-brand-600) 0%, var(--color-surface-800) 60%, var(--color-surface-900) 100%);
  --gradient-header: linear-gradient(130deg, rgba(59, 15, 79, 0.9), rgba(78, 20, 104, 0.88));
  --gradient-hero-card: linear-gradient(150deg, rgba(109, 34, 147, 0.78), rgba(18, 7, 22, 0.92));
  --gradient-cta: linear-gradient(120deg, var(--color-brand-500), #1a0b23 60%, #120716 100%);
  --gradient-secondary-card: linear-gradient(160deg, rgba(78, 20, 104, 0.75), rgba(18, 7, 22, 0.9));
  --gradient-contact: linear-gradient(140deg, rgba(95, 27, 127, 0.65), rgba(21, 9, 26, 0.9));
}

:root[data-theme="minimalista-premium"] {
  --color-brand-900: #f5f2eb;
  --color-brand-800: #eee9df;
  --color-brand-700: #e7e1d6;
  --color-brand-600: #dfd7c8;
  --color-brand-500: #d6cbb9;
  --color-accent-500: #cb7246;
  --color-accent-400: #d8b556;
  --color-surface-900: #ffffff;
  --color-surface-800: #f7f5f0;
  --color-surface-700: #efeae0;
  --color-surface-600: #e7e0d4;
  --color-surface-500: #ddd4c6;
  --color-text-primary: #1c1917;
  --color-text-secondary: #57534e;
  --color-text-contrast: #1c1917;
  --color-border: rgba(28, 25, 23, 0.12);
  --color-border-strong: rgba(181, 139, 42, 0.35);
  --color-overlay-highlight: rgba(181, 88, 42, 0.16);
  --color-overlay-accent-soft: rgba(181, 139, 42, 0.1);
  --color-overlay-brand-strong: rgba(87, 83, 78, 0.2);
  --color-surface-accent: rgba(231, 224, 212, 0.7);
  --color-surface-alt: rgba(247, 245, 240, 0.9);
  --color-surface-deep: rgba(239, 234, 224, 0.95);
  --color-surface-accent-strong: rgba(223, 215, 200, 0.8);
  --color-surface-gradient-soft: rgba(239, 234, 224, 0.85);
  --color-surface-gradient-strong: rgba(231, 224, 212, 0.95);
  --color-badge: rgba(181, 139, 42, 0.14);
  --border-contrast: 1px solid rgba(28, 25, 23, 0.18);
  --outline-accent: 2px solid rgba(181, 139, 42, 0.5);
  --outline-accent-soft: 2px solid rgba(181, 139, 42, 0.35);
  --color-border-accent: rgba(181, 139, 42, 0.4);
  --shadow-soft: 0 8px 18px rgba(28, 25, 23, 0.08);
  --shadow-strong: 0 12px 24px rgba(28, 25, 23, 0.12);
  --shadow-accent: 0 10px 20px rgba(181, 139, 42, 0.2);
  --shadow-accent-strong: 0 12px 24px rgba(181, 139, 42, 0.28);
  --gradient-body: radial-gradient(circle at 18% 20%, rgba(181, 139, 42, 0.12), transparent 38%),
    radial-gradient(circle at 80% 10%, rgba(223, 215, 200, 0.5), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f7f5f0 55%, #efeae0 100%);
  --gradient-header: linear-gradient(90deg, rgba(247, 245, 240, 0.95), rgba(239, 234, 224, 0.9));
  --gradient-hero-card: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(239, 234, 224, 0.95));
  --gradient-cta: linear-gradient(180deg, rgba(247, 245, 240, 0.95), rgba(239, 234, 224, 0.95));
  --gradient-secondary-card: linear-gradient(180deg, rgba(247, 245, 240, 0.95), rgba(231, 224, 212, 0.95));
  --gradient-contact: linear-gradient(180deg, rgba(247, 245, 240, 0.95), rgba(223, 215, 200, 0.95));
}

:root[data-theme="informativo-confianza"] {
  --color-brand-900: #0b2540;
  --color-brand-800: #12314f;
  --color-brand-700: #1a3f5f;
  --color-brand-600: #214b70;
  --color-brand-500: #295884;
  --color-accent-500: #60a5fa;
  --color-accent-400: #93c5fd;
  --color-surface-900: #071626;
  --color-surface-800: #0d1e30;
  --color-surface-700: #12263b;
  --color-surface-600: #172f47;
  --color-surface-500: #1d3853;
  --color-text-primary: #f8fbff;
  --color-text-secondary: #c7d7ea;
  --color-text-contrast: #0b2540;
  --color-border: rgba(147, 197, 253, 0.22);
  --color-border-strong: rgba(96, 165, 250, 0.45);
  --color-overlay-highlight: rgba(96, 165, 250, 0.15);
  --color-overlay-accent-soft: rgba(96, 165, 250, 0.1);
  --color-overlay-brand-strong: rgba(26, 63, 95, 0.5);
  --color-surface-accent: rgba(33, 75, 112, 0.65);
  --color-surface-alt: rgba(11, 37, 64, 0.75);
  --color-surface-deep: rgba(11, 37, 64, 0.85);
  --color-surface-accent-strong: rgba(26, 63, 95, 0.6);
  --color-surface-gradient-soft: rgba(26, 63, 95, 0.6);
  --color-surface-gradient-strong: rgba(11, 37, 64, 0.85);
  --color-badge: rgba(96, 165, 250, 0.16);
  --border-contrast: 1px solid rgba(248, 251, 255, 0.16);
  --outline-accent: 2px solid rgba(96, 165, 250, 0.5);
  --outline-accent-soft: 2px solid rgba(96, 165, 250, 0.35);
  --color-border-accent: rgba(96, 165, 250, 0.4);
  --gradient-body: radial-gradient(circle at 12% 20%, rgba(96, 165, 250, 0.12), transparent 36%),
    radial-gradient(circle at 80% 15%, rgba(41, 88, 132, 0.45), transparent 34%),
    linear-gradient(150deg, var(--color-brand-600) 0%, var(--color-surface-800) 60%, var(--color-surface-900) 100%);
  --gradient-header: linear-gradient(120deg, rgba(13, 30, 48, 0.92), rgba(26, 63, 95, 0.88));
  --gradient-hero-card: linear-gradient(150deg, rgba(26, 63, 95, 0.75), rgba(7, 22, 38, 0.9));
  --gradient-cta: linear-gradient(120deg, var(--color-brand-500), #0d1e30 60%, #071626 100%);
  --gradient-secondary-card: linear-gradient(160deg, rgba(26, 63, 95, 0.7), rgba(7, 22, 38, 0.9));
  --gradient-contact: linear-gradient(140deg, rgba(33, 75, 112, 0.65), rgba(11, 26, 44, 0.9));
}

/* --------------------------------------------------------------------------
   Guía corta de uso de tokens
   - Botones primarios: usar color de fondo var(--color-accent-500) con texto var(--color-text-contrast),
     borde-radio var(--radius-md) y sombra var(--shadow-accent).
   - Tarjetas y secciones: superficies con var(--color-surface-500) o gradientes como var(--gradient-hero-card),
     bordes con var(--border-base) y sombra var(--shadow-strong).
   - Encabezados y navegación: tipografía var(--font-heading), tamaños de escala var(--fs-900 a --fs-600),
     y espaciar con la escala var(--space-3) a var(--space-8).
   -------------------------------------------------------------------------- */