/* ==========================================================================
   DESIGN SYSTEM 2 — MODO OSCURO
   Landing page / producto. Archivo independiente del claro.
   Tipografía, espaciado, radios y layout se mantienen iguales al claro;
   solo cambian los tokens de color y el tratamiento de elevación/sombras.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     COLOR — Fondo base: azul marino muy oscuro (derivado de #14387F)
     ------------------------------------------------------------------ */
  --color-bg:            #0a1526;
  --color-bg-subtle:     #0d1c33;   /* secciones alternas */
  --color-bg-inverted:   #eef2fa;   /* para bloques "invertidos" sobre el oscuro */

  /* Superficies elevadas: más claras que el fondo + borde sutil */
  --color-surface:       #132340;
  --color-surface-hover: #17294a;
  --color-border:        #22355c;
  --color-border-strong: #2f4470;

  /* Texto */
  --color-text:          #eef2fa;
  --color-text-muted:    #a9b7d1;
  --color-text-inverted: #0a1526;

  /* Primario — aclarado respecto al claro (#14387F) para contraste en fondo oscuro */
  --color-primary-100: #d9e2f4;
  --color-primary-200: #b3c5e9;
  --color-primary-300: #85a2d8;
  --color-primary-400: #6f95cf;   /* base interactiva: links, iconos, outline */
  --color-primary-500: #4a76b8;
  --color-primary-600: #2f5aa8;   /* hover de elementos interactivos */
  --color-primary-700: #4f84ee;   /* color de marca original, usado en fondos/degradados */
  --color-primary-800: #0c214d;
  --color-primary-900: #081633;

  --color-link:       var(--color-primary-400);
  --color-link-hover: var(--color-primary-300);

  /* Acento — suavizado respecto al claro (#E4AC3D) para reducir fatiga visual */
  --color-accent-300: #f3d38f;
  --color-accent-400: #ecc06a;
  --color-accent-500: #e0b563;   /* base de acento en oscuro (más suave que #E4AC3D) */
  --color-accent-600: #c99a49;
  --color-accent-700: #a67d38;

  /* Estados semánticos — versiones claras sobre fondos oscuros translúcidos */
  --color-success:    #4ecb9c;
  --color-success-bg: #123a2e;
  --color-warning:    #e8b95c;
  --color-warning-bg: #3a2c10;
  --color-error:      #e2705c;
  --color-error-bg:   #3a1712;
  --color-info:       var(--color-primary-400);
  --color-info-bg:    #16264a;

  /* ------------------------------------------------------------------
     TIPOGRAFÍA — igual que el modo claro (Urbanist, base 18px, títulos bold)
     ------------------------------------------------------------------ */
  --font-family-heading: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --font-family-body:    "Urbanist", "Segoe UI", system-ui, sans-serif;
  --font-family-mono:    "IBM Plex Mono", Consolas, monospace;

  --font-size-xs:   0.778rem;  /* 14px */
  --font-size-sm:   0.889rem;  /* 16px */
  --font-size-base: 1.125rem;  /* 18px */
  --font-size-md:   1.25rem;   /* 20px */
  --font-size-lg:   1.5rem;    /* 24px */
  --font-size-xl:   1.875rem;  /* 30px */
  --font-size-2xl:  2.375rem;  /* 38px */
  --font-size-3xl:  3.125rem;  /* 50px */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-heading:  var(--font-weight-bold);

  --line-height-tight:  1.2;
  --line-height-normal: 1.55;
  --line-height-loose:  1.75;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-wide:  0.04em;

  /* ------------------------------------------------------------------
     ESPACIADO — igual que el modo claro
     ------------------------------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ------------------------------------------------------------------
     LAYOUT — igual que el modo claro (contenedor 1440px)
     ------------------------------------------------------------------ */
  --container-max-width: 1440px;
  --container-padding:   var(--space-5);

  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  --grid-columns: 12;
  --grid-gap:     var(--space-5);

  /* ------------------------------------------------------------------
     BORDES — igual que el modo claro (4-8px)
     ------------------------------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  --border-width-sm: 1px;
  --border-width-md: 2px;

  /* ------------------------------------------------------------------
     SOMBRAS — reducidas al mínimo (la elevación la da la superficie + borde)
     ------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6);

  /* ------------------------------------------------------------------
     TRANSICIONES — igual que el modo claro
     ------------------------------------------------------------------ */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;
  --easing-standard:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------------
     Z-INDEX — igual que el modo claro
     ------------------------------------------------------------------ */
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-modal:    1200;
  --z-toast:    1300;
  --z-tooltip:  1400;

  /* ------------------------------------------------------------------
     HERO — degradado del fondo oscuro hacia el azul de marca
     ------------------------------------------------------------------ */
  --gradient-hero: linear-gradient(135deg, var(--color-bg) 0%, var(--color-primary-700) 100%);
}

/* ==========================================================================
   RESET BÁSICO + ESTILOS BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ==========================================================================
   COMPONENTES BASE
   ========================================================================== */

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  border: var(--border-width-sm) solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.btn:active { transform: translateY(1px); }

/* CTA principal: relleno con acento suavizado, texto oscuro para contraste */
.btn-primary {
  background: var(--color-accent-500);
  color: var(--color-text-inverted);
}
.btn-primary:hover { background: var(--color-accent-400); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-hover); }

.btn-outline {
  background: transparent;
  color: var(--color-primary-400);
  border-color: var(--color-primary-400);
}
.btn-outline:hover { background: rgba(111, 149, 207, 0.1); }

/* Cards — superficie más clara que el fondo + borde sutil */
.card {
  background: var(--color-surface);
  border: var(--border-width-sm) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), border-color var(--transition-base);
}
.card:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}

/* Inputs */
.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  font-family: var(--font-family-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width-sm) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(111, 149, 207, 0.25);
}

/* Badges / etiquetas de estado */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error   { background: var(--color-error-bg);   color: var(--color-error); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }

/* Sección hero — degradado del fondo oscuro al azul de marca */
.hero {
  background: var(--gradient-hero);
  color: var(--color-text);
  padding: var(--space-16) 0;
  border-bottom: var(--border-width-sm) solid var(--color-border);
}
.hero p { color: var(--color-text-muted); }