/* =============================================================
   MAILO TECHNOLOGIES — Design tokens (copy-paste ready)
   Reflejan el brandbook oficial Mailo + el diseño de la landing.
   ============================================================= */

:root {

  /* ===== Colores · brandbook ===== */
  --color-navy:        #19284C;
  --color-navy-700:    #2A3A6E;
  --color-navy-500:    #4A5A8C;
  --color-navy-300:    #8B95B5;
  --color-navy-100:    #E2E5EF;
  --color-navy-50:     #F0F2F8;

  --color-orange:      #E55919;
  --color-orange-600:  #C84812;
  --color-orange-100:  #FFE1D0;
  --color-orange-50:   #FFF1E8;

  --color-bg:          #F2F2F2;   /* fondo general */
  --color-paper:       #FFFFFF;   /* cards */
  --color-footer-bg:   #0B0F1F;   /* footer ultra-dark */

  /* ===== Texto ===== */
  --color-ink:         #19284C;
  --color-ink-muted:   #5A6680;
  --color-ink-faint:   #5C6883;

  /* ===== Colores de producto (tomados de los manuales de cada marca) =====
     Mailo manda la estructura: fondos, titulares, navegación y CTA.
     El color de producto solo identifica: iconos, chips, diagramas y paneles. */
  --color-giz:         #00A5CD;   /* Gizmedic · rellenos y gráficos */
  --color-giz-dark:    #0B5C7A;   /* Gizmedic · texto sobre claro */
  --color-giz-light:   #76C7F2;   /* Gizmedic · texto sobre navy */
  --color-giz-soft:    #E8F6FF;   /* Gizmedic · tinte */

  --color-gom:         #8BBE3A;   /* Gomedisys · rellenos y gráficos */
  --color-gom-dark:    #3B5703;   /* Gomedisys · texto sobre claro */
  --color-gom-light:   #A8D46A;   /* Gomedisys · texto sobre navy */
  --color-gom-soft:    #EEF7DF;   /* Gomedisys · tinte */

  --color-coral:       #E85D4A;   /* alerta */
  --color-amber:       #E8A521;   /* warning */

  /* ===== Líneas ===== */
  --color-line:        #E4E7EE;
  --color-line-strong: #C9CFDB;

  /* ===== Tipografía ===== */
  --font-sans:  'Raleway', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* ===== Spacing (multiplos de 4) ===== */
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ===== Radius ===== */
  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  24px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ===== Sombras ===== */
  --shadow-sm:   0 2px 8px rgba(25, 40, 76, 0.04);
  --shadow-md:   0 12px 28px rgba(25, 40, 76, 0.10);
  --shadow-lg:   0 24px 60px rgba(25, 40, 76, 0.18);
  --shadow-cta:  0 10px 30px rgba(229, 89, 25, 0.25);

  /* ===== Motion ===== */
  --duration:   200ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== Containers ===== */
  --container:       1320px;
  --container-narrow: 1100px;
}

/* ===== Base reset opcional ===== */
html, body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-orange); color: #fff; }