/*
 * Restofy Pro - Características
 * Clases custom con prefijo .ui-
 */

/* Número editorial gigante detrás del título de cada categoría */
.ui-features-number {
    font-size: 7rem; /* ui-size:decor */
    line-height: 1;
    letter-spacing: -0.04em;
}

@media (min-width: 640px) {
    .ui-features-number {
        font-size: 9rem; /* ui-size:decor */
    }
}

/* Buscador pegado al header: gana fondo con blur cuando sale del hero */
.js-features-search-bar.is-stuck {
    background: rgba(249, 250, 251, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.dark .js-features-search-bar.is-stuck {
    background: rgba(26, 26, 30, 0.85);
    border-bottom-color: rgba(55, 65, 81, 0.5);
}

/* Scroll suave para los atajos y anclas de categoría */
html {
    scroll-behavior: smooth;
}

/* Atajos: halo que sigue al cursor (las coordenadas las setea el JS en --ui-x / --ui-y) */
.ui-features-shortcut::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px circle at var(--ui-x, 50%) var(--ui-y, 50%), rgba(255, 69, 0, 0.10), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ui-features-shortcut:hover::before {
    opacity: 1;
}

/* Carrusel de atajos en móvil: sin barra de scroll visible */
.js-features-shortcuts {
    scrollbar-width: none;
}

.js-features-shortcuts::-webkit-scrollbar {
    display: none;
}

/* Botón volver arriba: oculto hasta pasar el hero (lo marca el JS con is-visible) */
.ui-features-top {
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
}

.ui-features-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}