/* Fondo negro premium + textura luz */
body {
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 1) 40%), #000;
    color: #f8fafc;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}

/* Spotlight que sigue al ratón */
.spotlight {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 45%);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0.6;
    transition: transform 0.25s ease-out;
    transform: translate(-50%, -50%);
}

/* Glass */
.glass {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Para las tarjetas con borde suave */
.card-border {
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Animaciones de entrada */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Botón halo */
.btn-halo {
    position: relative;
    overflow: hidden;
}

.btn-halo::after {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.6s ease-out;
}

.btn-halo:hover::after {
    transform: translateX(120%);
}

/* Hero title shine */
.shine {
    background: linear-gradient(120deg, #fff, #9ca3af, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Línea sutil de división */
.divider {
    height: 1px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
}