body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Header sticky 64px — offset para que anchors con scroll-to no queden
   tapados por el header. Aplica a todos los <section id="..."> destino. */
section[id] { scroll-margin-top: 80px; }

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Initial state: hidden before IntersectionObserver adds .fade-in-up.
   Without this los elementos aparecian visibles y luego saltaban al
   opacity:0 del @keyframes — el "flash" reportado en el audit. */
.anim-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
}
.fade-in-up {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Accesibilidad: usuarios con reduced-motion no disparan el observer,
   por lo tanto nunca se les aplica .fade-in-up — los mostramos de
   una vez para que no queden invisibles. */
@media (prefers-reduced-motion: reduce) {
    .anim-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Card hover */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px -12px rgba(0,0,0,0.12);
}
.dark .hover-lift:hover {
    box-shadow: 0 12px 40px -12px rgba(0,0,0,0.4);
}

/* Stat counter */
.stat-item { transition: transform 0.3s ease; }
.stat-item:hover { transform: translateY(-2px); }

/* Subtle grid bg for hero */
.hero-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(33,138,203,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33,138,203,0.04) 1px, transparent 1px);
    background-size: 64px 64px;
}
.dark .hero-grid::before {
    background-image:
        linear-gradient(rgba(33,138,203,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33,138,203,0.06) 1px, transparent 1px);
}

/* Timeline */
.impl-step {
    position: relative;
    padding-left: 3rem;
}
.impl-step::before {
    content: '';
    position: absolute;
    left: 1.125rem;
    top: 2.5rem;
    bottom: -1.5rem;
    width: 2px;
    background: #218acb;
}
.dark .impl-step::before {
    background: rgba(33,138,203,0.4);
}
.impl-step:last-child::before {
    display: none;
}
.impl-dot {
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #218acb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Pricing popular */
.pricing-popular {
    position: relative;
    border: 2px solid #218acb;
}
.pricing-popular::before {
    content: 'Recomendado';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #218acb;
    color: white;
    padding: 4px 16px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}