/* ============================================================
   HUMIX MÓSTOLES — theme.css · Variante CELESTE
   Fondos light degradados · Acentos azul celeste predominantes
   ============================================================ */

:root {
  --accent:      #3d6faa;
  --accent2:     #6f98d3;
  --accent3:     #9dbbe5;
  --accent-soft: rgba(157,187,229,.2);
  --accent-glow: rgba(111,152,211,.35);
  --hero-bg1:    #f5f9ff;
  --hero-bg2:    #eef4fd;
  --section-alt: #f0f6ff;
}

/* Hero: degradado frío celeste */
.hero {
  background:
    radial-gradient(ellipse 65% 58% at 95% 3%,  rgba(157,187,229,.42), transparent),
    radial-gradient(ellipse 48% 52% at 3%  28%,  rgba(111,152,211,.24), transparent),
    radial-gradient(ellipse 38% 42% at 52% 96%,  rgba(157,187,229,.16), transparent),
    linear-gradient(180deg, var(--hero-bg1) 0%, var(--hero-bg2) 65%, #fff 100%);
}
.blob-a { background: rgba(157,187,229,.28); }
.blob-b { background: rgba(111,152,211,.2); }
.blob-c { background: rgba(157,187,229,.18); }
.orb-one { box-shadow: 0 0 56px rgba(111,152,211,.5); }
.orb-two { background: rgba(61,111,170,.45); }
.orb-three { background: rgba(157,187,229,.6); }

/* Cursor glow celeste */
.hx-cursor-glow {
  background: radial-gradient(circle, rgba(157,187,229,.28), transparent 66%);
}

/* Hero h1 em: celeste azul */
.hero h1 em, .sec-h2 em {
  background: linear-gradient(135deg, #2d5080, #3d6faa, #6f98d3, #9dbbe5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tags: tono celeste */
.kicker, .sec-tag {
  background: rgba(157,187,229,.2);
  border: 1px solid rgba(157,187,229,.45);
  color: #2d5080;
}
.sec-tag--gold {
  background: rgba(157,187,229,.18);
  border: 1px solid rgba(111,152,211,.42);
  color: #2d5080;
}

/* Problem section: celeste muy suave */
.problem-section {
  background: linear-gradient(160deg, #f0f6ff 0%, #eef4fd 100%);
}
.problem-list div {
  background: rgba(240,246,255,.9);
  border-left-color: var(--blue2);
}
.problem-list div:hover {
  background: rgba(157,187,229,.1);
  border-left-color: var(--blue);
}

/* Servicios: fondo celeste muy suave */
.leistungen-section {
  background: linear-gradient(180deg, #f0f6ff 0%, #fff 100%);
}

/* System section */
.system-section {
  background: linear-gradient(160deg, #fff 0%, #f0f6ff 100%);
}
.system-section::before {
  background: radial-gradient(ellipse 40% 50% at 5% 50%, rgba(157,187,229,.18), transparent);
}
.data-block {
  border-left-color: var(--blue2);
}
.data-block:hover { border-left-color: var(--blue); }
.data-block h3 { color: var(--blue3); }

/* Btn celeste como primario */
.btn-gold {
  background: linear-gradient(135deg, #c4d9f5, var(--blue), var(--blue2));
  color: #0a1828;
  border-color: rgba(157,187,229,.55);
  box-shadow: 0 14px 38px rgba(61,111,170,.22);
}
.btn-gold:hover {
  box-shadow: 0 22px 54px rgba(61,111,170,.35);
}
.btn-blue {
  background: linear-gradient(135deg, rgba(239,206,140,.3), var(--gold), var(--gold2));
  color: #1a1200;
  border-color: rgba(239,206,140,.55);
}

/* Zonas: hover celeste */
.zones span:hover {
  background: linear-gradient(135deg, rgba(157,187,229,.2), rgba(111,152,211,.1));
  border-color: rgba(157,187,229,.7);
  box-shadow: 0 12px 34px rgba(61,111,170,.2);
}

/* Pasos: acento celeste */
.step-num {
  background: linear-gradient(135deg, #c4d9f5, var(--blue), var(--blue2));
  color: #0a1828;
}

/* WA form button: celeste */
.hero-whatsapp-form button, .contact-whatsapp-form button {
  background: linear-gradient(135deg, #c4d9f5, var(--blue), var(--blue2));
  color: #0a1828;
  box-shadow: 0 14px 38px rgba(111,152,211,.35);
}

/* Progress bar celeste */
.hx-progress {
  background: linear-gradient(90deg, #6f98d3, #9dbbe5, #3d6faa);
}

/* Contact section kicker celeste */
.hx-contact-kicker {
  background: rgba(157,187,229,.22);
  color: #1e3a8a;
}

/* Contact title em celeste */
.hx-contact-title em {
  background: linear-gradient(135deg, #2d5080, #3d6faa, #6f98d3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Footer oscuro con tono azul */
.footer {
  background: linear-gradient(180deg, #091522 0%, #050c14 100%);
}