:root{
  --cyan: #00eaff;
  --purple: #7b2bff;
  --teal: #00ff88;
  --danger1: #ff3b3b;
  --danger2: #ff7b00;
  --bg-1: #0b0022;
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.08);
  --fw-heading: 'Orbitron', sans-serif;
  --fw-ui: 'Inter', sans-serif;
}

/* reset mínimo (si no lo pones en reset.css) */
*{margin:0;padding:0;box-sizing:border-box;user-select:none}

/* body y fondo */
body{
  font-family: var(--fw-ui);
  color: #fff;
  background:
    linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.90)),
    url("../img/particles.webp") center/cover no-repeat fixed,
    linear-gradient(135deg,#0c0026,#1a0045);
  background-color: #0b0022;   /* fallback si la imagen/gradiente no carga */
  scroll-behavior:smooth;
  animation: moveParticles 160s linear infinite;
  position: relative;
  min-height:100%;
}

/* grid futurista */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(0,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,0.06) 1px, transparent 1px);
  background-size:80px 80px;
  z-index:0;
  animation: gridMove 40s linear infinite;
}

/* animaciones globales */
@keyframes moveParticles{
  0%{ background-position: center, 0 0, center; }
  100%{ background-position: center, 800px 500px, center; }
}
@keyframes gridMove{ 0%{transform:translateY(0)} 100%{transform:translateY(80px)} }

/* ===== REVEAL ANIMATION ===== */

.reveal{
    opacity:0;
    transform:translateY(36px);
    transition:
        opacity  .75s cubic-bezier(.25,.46,.45,.94),
        transform .75s cubic-bezier(.25,.46,.45,.94);
    will-change:opacity,transform;
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

/* ── Separador sutil entre secciones ── */
section {
    border-top: 1px solid rgba(0, 234, 255, 0.05);
}

/* ── H2 gradiente global — fallback para cualquier sección ── */
section h2 {
    background: linear-gradient(90deg, #00eaff, #7b2bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}