/* ========================================================================
   Cursor Personalizado (Cuadrado) - Estilos
   ======================================================================== */

/* Estilos del Cursor (Cuadrado Blanco) */
.curzr-square {
    box-sizing: border-box;
    position: fixed;
    top: -100px;
    left: -100px;
    z-index: 2147483647;

    /* Tamaño base */
    width: 20px;
    height: 20px;

    /* Estilo normal: Borde blanco, centro transparente */
    background-color: #fff0;
    border: 1.25px solid #ffffff;

    /* Cuadrado */
    border-radius: 0;

    /* La estela (el diamante blanco) */
    box-shadow: 0 -15px 0 -8px #ffffff;

    /* Transiciones suaves y elegantes */
    transition: opacity 200ms ease,
        border-color 500ms ease,
        background-color 500ms ease,
        transform 100ms ease,
        box-shadow 300ms ease,
        backdrop-filter 250ms ease;

    user-select: none;
    pointer-events: none;
    /* opacity y visibility iniciales están en critical.css */
}

.curzr-square.visible {
    opacity: 1;
}

/* Variante I-beam (cursor de texto) */
.curzr-square.ibeam {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: fixed;
    color: #ffffff;
    transition: background-color 500ms ease,
        border-color 500ms ease,
        box-shadow 300ms ease,
        color 500ms ease;
}

/* Líneas del I-beam */
.curzr-square.ibeam::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 2px;
    bottom: 2px;
    width: 0.5px;
    background: currentColor;
    transform: translateX(-50%);
    animation: fadeInIBeam 500ms ease forwards;
}

.curzr-square.ibeam::before {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    height: 0.5px;
    background: currentColor;
    box-shadow: 0 16px 0 0 currentColor;
    animation: fadeInIBeam 500ms ease forwards;
}

/* Cuando sale del modo I-beam */
.curzr-square:not(.ibeam)::after,
.curzr-square:not(.ibeam)::before {
    animation: fadeOutIBeam 500ms ease forwards;
}

/* Animaciones para el I-beam */
@keyframes fadeInIBeam {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutIBeam {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Ocultar cursor personalizado en móvil */
@media (max-width: 991px) {
    .curzr-square {
        display: none !important;
    }
}

/* NOTA: Estilos para ocultar cursor predeterminado están en critical.css */

/* Variante invertida para botones blancos */
.curzr-square.invert.hover {
    background-color: #000000;
    border-color: #000000;
}

.curzr-square.ibeam.invert {
    color: #000000;
}