/*
  ============================================================
  THEME.CSS — Paleta de colores y tipografías configurables
  ============================================================
  Este archivo es el UNICO lugar que hay que tocar para
  reutilizar esta misma landing page en otro proyecto/marca.
  Cambiando estas variables cambia toda la web (colores,
  degradados, tipografías) sin tocar styles.css ni el HTML.

  Sugerencia: duplicá este archivo (ej: theme-otramarca.css)
  y cambiá el <link> en index.html para tener varias paletas
  listas para usar.
  ============================================================
*/

:root {
  /* ---- Colores base ---- */
  --color-bg: #051620;          /* fondo principal (negro azulado) */
  --color-bg-alt: #0a2436;      /* fondo alterno para secciones */
  --color-surface: #0f2f45;     /* tarjetas / superficies elevadas */
  --color-border: rgba(80, 180, 224, 0.20);

  /* ---- Marca: azul marino (tomado del logo) ---- */
  --color-primary: #00457e;
  --color-primary-dark: #002c50;
  --color-primary-light: #3a83b8;

  /* ---- Marca: celeste (tomado del logo) ---- */
  --color-accent: #29a0d6;
  --color-accent-light: #7cd0f0;
  --color-accent-dark: #156d95;

  /* ---- Texto ---- */
  --color-text: #eef6fb;
  --color-text-muted: #9dc2d9;
  --color-text-soft: #5e88a3;

  /* ---- Degradados reutilizables ---- */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 60%, var(--color-primary-light));
  --gradient-accent: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent) 50%, var(--color-accent-light));
  --gradient-bg: radial-gradient(circle at 50% 0%, #123650 0%, var(--color-bg) 60%);

  /* ---- Tipografías ---- */
  --font-heading: 'Montserrat', 'Segoe UI', sans-serif; /* sans geométrica, estilo técnico/corporativo acorde al isotipo */
  --font-script: 'Montserrat', 'Segoe UI', sans-serif;  /* fuente de acento (antes cursiva); acá se aplica en peso extra bold, ver .script en styles.css */
  --font-body: 'Poppins', 'Segoe UI', sans-serif;

  /* ---- Otros ajustes globales ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-glow: 0 0 40px rgba(41, 160, 214, 0.35);
  --shadow-card: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}