/* ============================================================
   border-gradiente — Gradient border diagonal reutilizable
   Uso: agrega la clase "border-gradiente" a cualquier
   contenedor con position:relative y border-radius definido.
   El ::before hereda el border-radius automáticamente.
   ============================================================ */

.border-gradiente {
    position: relative;
}

.border-gradiente::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.03) 38%,
        rgba(255, 255, 255, 0.03) 62%,
        rgba(255, 255, 255, 0.20) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.2s;
}

/* En hover el borde vira a morado para acompañar el glow */
.border-gradiente:hover::before {
    background: linear-gradient(135deg,
        rgba(173, 81, 255, 0.80) 0%,
        rgba(173, 81, 255, 0.10) 38%,
        rgba(173, 81, 255, 0.10) 62%,
        rgba(173, 81, 255, 0.60) 100%
    );
}

/* Modificador: sin cambio en hover (para contenedores estáticos) */
.border-gradiente--static::before,
.border-gradiente--static:hover::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.03) 38%,
        rgba(255, 255, 255, 0.03) 62%,
        rgba(255, 255, 255, 0.20) 100%
    );
}