html { scroll-behavior: smooth; }

/* Asegurar que todo el contenido est¨¦ por encima del fondo nube */
header, section, footer {
  position: relative;
  z-index: 10;
}

/* ===== Fondo global (nube de riesgos) ===== */
#bg-risk-cloud{
  position: fixed;
  inset: 0;
  z-index: 0;            /* siempre al fondo */
  pointer-events: none;
  overflow: hidden;
}

.risk-icon{
  position: absolute;
  opacity: 0.05;
  user-select: none;
  will-change: transform;
  animation-name: floatCloud;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes floatCloud{
  from { transform: translateY(120vh) translateX(0) rotate(0deg); }
  to   { transform: translateY(-20vh) translateX(120px) rotate(360deg); }
}

/* Desactiva nube en m¨®viles (performance) */
@media (max-width: 768px){
  #bg-risk-cloud{ display:none; }
}

/* ===== Hero ===== */
.section { padding: 64px 0; }
.section-hero { padding: 0; }

/* Botones / UI */
.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .2s ease, background .2s ease;
}
.icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  background: #00F5D4;
  color: #050A14;
  transition: transform .2s ease, filter .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  transition: transform .2s ease, background .2s ease;
}
.btn-ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }

.chip{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* Cards */
.proj-card{
  display:block;
  border-radius: 18px;
  background: rgba(11,18,36,.70);
  border: 1px solid rgba(255,255,255,.10);
  padding: 16px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.proj-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,245,212,.35);
  background: rgba(11,18,36,.90);
}
.proj-badge{
  display:inline-block;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,245,212,.12);
  border: 1px solid rgba(0,245,212,.20);
  color: #BFFCF3;
  font-weight: 900;
}
.proj-title{ margin-top: 10px; font-weight: 900; font-size: 16px; }
.proj-desc{ margin-top: 6px; color: rgba(255,255,255,.70); font-size: 13px; }

.svc-card, .xp-card{
  border-radius: 18px;
  background: rgba(11,18,36,.65);
  border: 1px solid rgba(255,255,255,.10);
  padding: 16px;
}
.svc-title, .xp-title{ font-weight: 900; }
.svc-desc, .xp-desc{ margin-top: 6px; color: rgba(255,255,255,.70); font-size: 13px; }
.xp-kicker{ color: rgba(0,245,212,.85); font-weight: 900; font-size: 12px; margin-bottom: 6px; }