:root {
  /* Colores principales del logo Belingo */
  --brand-light-blue: #70cde0;  /* Be / texto principal */
  --brand-medium-blue: #4299de; /* burbuja azul */
  --brand-mint:        #7bcbbd; /* burbuja verde */

  /* Paleta derivada */
  --custom-teal:       var(--brand-medium-blue);  /* color principal UI */
  --custom-teal-dark:  #2f7fc4;                  /* medium-blue oscurecido */
  --custom-teal-light: var(--brand-light-blue);  /* acento claro */

  --custom-gray-dark:   #222;
  --custom-gray-medium: #444;
  --custom-gray-light:  #d0d7de;

  --custom-bg-light:    #f5fafc;
  --custom-white:       #ffffff;

  --custom-shadow-light:  rgba(0,0,0,0.04);
  --custom-shadow-medium: rgba(0,0,0,0.25);

  --custom-bg-card:   rgba(255,255,255,0.96);
  --custom-bg-step:   #e9f7fb;   /* claro, en familia con #70cde0 */
  --custom-bg-circle: #d3f0f4;   /* para avatares / iconos */
}

/* Utility classes */
.custom-teal {
  color: var(--custom-teal) !important;
}
.custom-teal-bg { 
  background: var(--custom-teal) !important; 
  color: var(--custom-white) !important; 
  border: none !important; 
}
.custom-teal-border {
  border-color: var(--custom-teal) !important;
}

/* Hero highlights usando la paleta del logo */
.hero-highlight { 
  color: var(--custom-teal-light) !important;      /* #70cde0 */
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(112, 205, 224, 0.4);
}

.hero-highlight-secondary { 
  color: var(--custom-teal) !important;           /* #62aade */
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(98, 170, 222, 0.4);
}