/**
 * Estilos globales para optimización móvil
 * Smooth scroll behavior CSS puro
 */

/* Respetar preferencias de accesibilidad: deshabilitar animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Optimización de enlaces con anclas para smooth scroll */
a[href^="#"] {
    text-decoration: none;
    transition: color 0.3s ease;
}

a[href^="#"]:hover {
    color: #f47b8a;
}

/* Asegurar que los elementos con ID tengan espacio para el scroll */
:target {
    scroll-margin-top: 100px;
    /* Ajustar según altura del header sticky */
}

/* Optimización de performance para móviles */
@media (max-width: 768px) {

    /* Reducir complejidad visual en móviles */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Smooth scroll con CSS puro (sin JavaScript) */
    html {
        scroll-behavior: smooth;
    }

    /* Mejorar performance de scroll */
    body {
        -webkit-overflow-scrolling: touch;
    }
}