/* =========================================================
   And Apps · estilos propios
   ========================================================= */

html { -webkit-text-size-adjust: 100%; }

[x-cloak] { display: none !important; }

/* --- Navegación --- */
#site-nav.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 6px 24px -12px rgba(15, 23, 42, 0.15);
}

.nav-link.is-active { color: #2563EB; }

/* --- Fondo de rejilla --- */
.bg-grid {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* --- Blobs animados --- */
.blob { animation: blob 16s ease-in-out infinite; }
.blob-delay { animation-delay: -6s; }

@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(24px, -28px) scale(1.08); }
    66%      { transform: translate(-18px, 18px) scale(0.94); }
}

/* --- Imagen flotante del hero --- */
.float-slow { animation: float 7s ease-in-out infinite; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* --- Marquee de tecnologías --- */
.marquee {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2.5rem;
    padding-right: 2.5rem;
    width: max-content;
    animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item { white-space: nowrap; }
.marquee-dot { color: #cbd5e1; }

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --- Lenis (scroll suave) --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Accesibilidad: reducir movimiento --- */
@media (prefers-reduced-motion: reduce) {
    .blob,
    .float-slow,
    .marquee-track { animation: none !important; }
}

/* --- Revelado al entrar en pantalla (seguro: el contenido nunca queda oculto) --- */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

[data-animate].is-in,
[data-animate-group].is-in > * {
    animation: revealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate].is-in,
    [data-animate-group].is-in > * { animation: none; }
}