/* ============================================================
   CURSOR PERSONALIZADO
============================================================ */
.cursor-punto {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--color-acento);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
}

.cursor-anillo {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid var(--color-acento);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1),
              height 0.4s cubic-bezier(0.4,0,0.2,1),
              border-color 0.2s,
              opacity 0.3s;
  opacity: 0.6;
}

body:hover .cursor-anillo {
  opacity: 1;
}

.cursor-expandido .cursor-anillo {
  width: 56px;
  height: 56px;
  opacity: 0.4;
}

.cursor-expandido .cursor-punto {
  width: 12px;
  height: 12px;
}

/* ============================================================
   ANIMACIONES DE SCROLL REVEAL
============================================================ */
.revelar {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.revelar--desde-izquierda {
  transform: translateX(-40px);
}

.revelar--desde-derecha {
  transform: translateX(40px);
}

.revelar--desde-izquierda.revelar--visible,
.revelar--desde-derecha.revelar--visible {
  transform: translateX(0);
}

.retraso-1 { transition-delay: 0.1s; }
.retraso-2 { transition-delay: 0.2s; }
.retraso-3 { transition-delay: 0.3s; }
.retraso-4 { transition-delay: 0.4s; }
.retraso-5 { transition-delay: 0.5s; }

/* ============================================================
   PARALLAX
============================================================ */
.paralaje {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ============================================================
   EFECTO TEXTO TYPED
============================================================ */
.texto-tipeo::after {
  content: '|';
  color: var(--color-acento);
  animation: parpadearCursor 0.8s step-end infinite;
}

@keyframes parpadearCursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ============================================================
   LÍNEA DE PROGRESO DE SCROLL
============================================================ */
.barra-progreso {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  background: linear-gradient(to right, var(--color-acento), #8b5cf6);
  z-index: 1000;
  width: 0;
  transition: width 0.1s linear;
}

/* ============================================================
   PARTÍCULA DECORATIVA
============================================================ */
.particulas-fondo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.particula {
  position: absolute;
  border-radius: 50%;
  background: var(--color-acento);
  opacity: 0;
  animation: flotarParticula linear infinite;
}

@keyframes flotarParticula {
  0%   { opacity: 0; transform: translateY(100dvh) scale(0); }
  10%  { opacity: 0.06; }
  90%  { opacity: 0.06; }
  100% { opacity: 0; transform: translateY(-100px) scale(1.5); }
}

/* ============================================================
   ANIMACIONES GLOBALES
============================================================ */
@keyframes flotarBurbuja {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -40px) scale(1.05); }
  66%       { transform: translate(-20px, 20px) scale(0.97); }
}

@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.35); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0.12); }
}

@keyframes scrollLinea {
  0%, 100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  50%       { opacity: 0.4; }
}