/* Cursor personalizado - WPCodeBox */                                                                                                                              
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999999999 !important;
}

/* Base */
.cursor-dot,
.cursor-ring {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dot (20% más pequeño) */
.cursor-dot {
    width: 19.2px;
    height: 19.2px;
    background-color: var(--cursor-color, #f4ca49);
    transform: translate(-50%, -50%);
    z-index: 9999999999 !important;
}

/* Ring (20% más pequeño) */
.cursor-ring {
    width: 64px;
    height: 64px;
    border: 8px solid var(--cursor-color, #f4ca49);
    transform: translate(-50%, -50%);
    z-index: 9999999999 !important;
}

/* Estado blend (hover general) */
.custom-cursor.blend {
    mix-blend-mode: difference;
}

.custom-cursor.blend .cursor-dot {
    transform: scale(1.25) translate(-50%, -50%);
}

.custom-cursor.blend .cursor-ring {
    width: 4px;
    height: 4px;
    border: 8px solid var(--cursor-color, #f4ca49);
    transform: translate(-50%, -50%);
}

/* Ocultar cursor nativo.
   🔒 Solo cuando el cursor sustituto YA EXISTE: la clase koa-cursor-on la pone cursor.js
   justo despues de inyectarlo. Sin esta condicion habia ~420 ms (medido el 8-sep-2026, y
   ya pasaba con WPCodeBox) en que el nativo estaba oculto y el sustituto aun no existia:
   la web se veia cargando SIN NINGUN cursor. */
html.koa-cursor-on * {
    cursor: none !important;
}

/* Ocultar en móviles */
@media (max-width: 768px) {
    .custom-cursor {
        display: none;
    }
    html.koa-cursor-on * {
        cursor: auto !important;
    }
}

.custom-cursor.no-blend { 
  mix-blend-mode: normal;  /* desactiva el difference */
}
.custom-cursor.no-blend .cursor-ring {
  width: 64px;
  height: 64px;
  border: 8px solid var(--cursor-color, #000);
}
.custom-cursor.no-blend .cursor-dot {
  transform: translate(-50%, -50%);
}