/* Optimizations CSS - Mejoras de rendimiento y experiencia móvil */

/* ===== OPTIMIZACIONES DE RENDIMIENTO ===== */

/* Mejora el rendering de elementos con transform */
.scene,
.hero,
.pricing,
.testimonials,
.booking,
.gallery,
.footer {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimización para elementos animados */
.animate-fadeInUp,
.animate-fadeInDown,
.animate-fadeInLeft,
.animate-fadeInRight,
.animate-scaleIn,
.animate-bounceIn,
.animate-elasticIn {
    will-change: transform, opacity;
}

/* Optimización para elementos que cambian de posición */
.pricing__card,
.testimonial,
.gallery__item,
.btn {
    will-change: transform;
}

/* ===== MEJORAS PARA DISPOSITIVOS TÁCTILES ===== */

/* Área de toque más grande para botones en móviles */
@media (max-width: 768px) {
    .btn,
    .nav__link,
    .carousel__tab,
    .plan-label,
    .form-checkbox-label {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn--primary, .btn--secondary {
        min-height: 2.375rem;
    }
    
    /* Espaciado adicional para elementos interactivos */
    .nav__link {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .carousel__tab {
        padding: var(--spacing-sm);
    }
}

/* ===== OPTIMIZACIONES DE SCROLL ===== */

/* Scroll suave en dispositivos móviles */
.scene,
.page__container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Prevenir el bounce en iOS */
body {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

/* ===== OPTIMIZACIONES DE IMÁGENES ===== */

/* Lazy loading para imágenes */
img {
    loading: lazy;
}

/* Optimización para imágenes de hero */
.hero__img,
.testimonial__img,
.gallery__item img {
    object-fit: cover;
    object-position: center;
}

/* ===== MEJORAS DE ACCESIBILIDAD ===== */

/* Mejor contraste para elementos focuseables */
.btn:focus,
.nav__link:focus,
.form-input:focus,
.carousel__tab:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Indicadores de estado más claros */
.step--active,
.carousel__tab--active {
    position: relative;
}

.step--active::after,
.carousel__tab--active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--color-primary);
    border-radius: var(--border-radius-full);
}

/* ===== OPTIMIZACIONES ESPECÍFICAS PARA MÓVILES ===== */

@media (max-width: 768px) {
    /* Reducir animaciones en dispositivos de bajo rendimiento */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Optimizar el tamaño de fuente para móviles */
    .hero__title {
        font-size: clamp(var(--font-size-2xl), 8vw, var(--font-size-4xl));
    }
    
    .pricing__title,
    .testimonials__title,
    .gallery__title {
        font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-3xl));
    }
    
    /* Mejorar el espaciado en móviles */
    .scene {
        padding: clamp(var(--spacing-md), 4vw, var(--spacing-xl));
    }
    
    /* Optimizar el grid para móviles */
    .pricing__container,
    .testimonials__grid,
    .gallery__grid {
        gap: clamp(var(--spacing-md), 3vw, var(--spacing-xl));
    }
}

/* ===== OPTIMIZACIONES PARA PANTALLAS PEQUEÑAS ===== */

@media (max-width: 480px) {
    /* Reducir el padding en pantallas muy pequeñas */
    .scene {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    /* Optimizar tarjetas para pantallas pequeñas */
    .pricing__card,
    .testimonial,
    .booking-form {
        margin: 0 auto;
        max-width: 100%;
    }
    
    /* Mejorar la legibilidad en pantallas pequeñas */
    .hero__description,
    .pricing__subtitle,
    .testimonials__subtitle {
        font-size: var(--font-size-sm);
        line-height: 1.2;
    }
}

/* ===== OPTIMIZACIONES PARA PANTALLAS DE ALTA DENSIDAD ===== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Mejorar la calidad de las sombras en pantallas retina */
    .pricing__card,
    .testimonial,
    .booking-form,
    .btn {
        box-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.1),
            0 8px 16px rgba(0, 0, 0, 0.1);
    }
}

/* ===== OPTIMIZACIONES DE CARGA ===== */

/* Skeleton loading para contenido que se carga dinámicamente */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===== MEJORAS DE INTERACCIÓN ===== */

/* Feedback visual mejorado para elementos interactivos */
.btn,
.pricing__card,
.testimonial,
.carousel__tab {
    transition: 
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        background-color var(--transition-normal);
}

/* Estados de hover más suaves */
@media (hover: hover) {
    .btn:hover,
    .pricing__card:hover,
    .testimonial:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }
}

/* Estados de active para dispositivos táctiles */
@media (hover: none) {
    .btn:active,
    .pricing__card:active,
    .testimonial:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* ===== OPTIMIZACIONES DE MEMORIA ===== */

/* Limitar el número de elementos que pueden tener will-change activo */
.scene:not(.scene--active) * {
    will-change: auto;
}

/* Optimizar las transiciones para elementos fuera de la vista */
/*
.scene:not(.scene--active) .pricing__card,
.scene:not(.scene--active) .testimonial,
.scene:not(.scene--active) .gallery__item {
    transition: none;
}
*/

/* ===== MEJORAS PARA CONEXIONES LENTAS ===== */

/* Reducir animaciones en conexiones lentas */
@media (prefers-reduced-data: reduce) {
    .animate-fadeInUp,
    .animate-fadeInDown,
    .animate-fadeInLeft,
    .animate-fadeInRight,
    .animate-scaleIn,
    .animate-bounceIn,
    .animate-elasticIn {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ===== UTILIDADES RESPONSIVAS MEJORADAS ===== */

/* Contenedor fluido mejorado */
.container-fluid {
    width: 100%;
    padding: 0 clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
    margin: 0 auto;
}

/* Grid responsivo mejorado */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(var(--spacing-md), 3vw, var(--spacing-xl));
}

/* Espaciado fluido */
.spacing-fluid {
    margin: clamp(var(--spacing-md), 4vw, var(--spacing-2xl)) 0;
}

.spacing-fluid-small {
    margin: clamp(var(--spacing-sm), 2vw, var(--spacing-lg)) 0;
}