/* ============================================
   CostaCX — Cursor mancha orgánica
   backdrop-filter: invert(1) → inversión real de colores
   Negro → Blanco · Blanco → Negro · Amarillo → Azul
   Administrable: activar/desactivar desde config.php
   ============================================ */

body.blob-active { cursor: none; }

/* ── Blob principal ── */
.blob-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}

.blob-cursor::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: invert(1);
  -webkit-backdrop-filter: invert(1);
  border-radius: 42% 58% 63% 37% / 45% 55% 45% 55%;
  animation: blob-morph 6s ease-in-out infinite;
}

/* ── Franjas CMYK sutiles ── */
.blob-fringe {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}

.blob-fringe::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 42% 58% 63% 37% / 45% 55% 45% 55%;
  animation: blob-morph 6s ease-in-out infinite;
}

.blob-fringe-c::before { background: rgba(0, 188, 212, 0.08); }
.blob-fringe-m::before { background: rgba(233, 30, 99, 0.08); }
.blob-fringe-y::before { background: rgba(255, 196, 0, 0.08); }

/* ── Animación forma orgánica ── */
@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 45% 55% 45% 55%; }
  25%      { border-radius: 63% 37% 42% 58% / 55% 42% 58% 45%; }
  50%      { border-radius: 50% 50% 35% 65% / 60% 40% 60% 40%; }
  75%      { border-radius: 38% 62% 55% 45% / 42% 58% 42% 58%; }
}

/* ── Punto cursor ── */
.dot-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--yellow, #f5d300);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10000;
  mix-blend-mode: difference;
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
  .blob-cursor::before,
  .blob-fringe::before { animation: none; }
}

@media (hover: none) {
  body.blob-active { cursor: auto; }
  .dot-cursor,
  .blob-cursor,
  .blob-fringe { display: none; }
}