/* ─── PALETA DISTRIBUIDORA ÓPTICA ─────────────────────────── */
:root {
  /* ── Brand colors (del logo FST) ── */
  --brand:      #06A9AF;   /* Teal del logo — brand principal   */
  --brand-rgb:  6,169,175; /* Mismo valor en rgb, para usar con opacidad */
  --brand-dk:   #04787C;   /* Hover / estados activos           */
  --brand-lt:   #E3F6F6;   /* Fondos tintados muy suaves        */
  --accent:     #06C1C8;   /* Teal claro acento                 */
  --accent-dk:  #04989E;
  --dark-bg:    #0F1414;   /* Muy oscuro — secciones oscuras    */
  --dark-bg-lt: #1a2222;

  /* ── Neutros ── */
  --dark:      #111111;
  --gray-dk:   #333333;
  --mid:       #666666;
  --light:     #F5F9FA;
  --white:     #FFFFFF;
  --border:    #DCE7EA;

  /* ── Alias ── */
  --primary:    var(--brand);
  --primary-dk: var(--brand-dk);

  /* ── Tipografía ── */
  --sans:   'Inter', sans-serif;
  --tight:  'Inter Tight', sans-serif;
  --serif:  'Martel', serif;

  /* ── Espaciado ── */
  --radius:    6px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* ── Sombras ── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:    0 6px 24px rgba(0,0,0,0.10);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.15);
  --shadow-brand: 0 8px 32px rgba(11,79,108,0.30);

  /* ── Transición ── */
  --transition: 0.22s ease;
}