/* ============================================
   EXPERIENCIA MÓVIL PREMIUM - POSADAS INFORMA
   Optimizaciones avanzadas para dispositivos móviles
   ============================================ */

/* ========== MEJORAS DE RENDIMIENTO MÓVIL ========== */

/* Smooth scrolling nativo */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Optimización de fuentes para móvil */
@media (max-width: 768px) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* ========== GESTOS Y TOUCH ========== */

/* Áreas táctiles mínimas de 44x44px (recomendación Apple) */
@media (max-width: 768px) {

    a,
    button,
    .nav-menu a,
    .article-item {
        min-height: 44px;
        min-width: 44px;
    }

    /* Feedback visual al tocar */
    a:active,
    button:active {
        opacity: 0.7;
        transform: scale(0.98);
    }

    /* Eliminar delay de 300ms en taps */
    a,
    button,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }
}

/* ========== NAVEGACIÓN MÓVIL MEJORADA ========== */

@media (max-width: 991px) {

    /* Header sticky optimizado */
    .pi-header {
        position: sticky;
        top: 0;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background-color: rgba(26, 26, 26, 0.95);
        transition: transform var(--pi-transition-base);
    }

    /* Ocultar header al hacer scroll down, mostrar al hacer scroll up */
    .pi-header.header-hidden {
        transform: translateY(-100%);
    }

    /* Menú hamburguesa mejorado */
    .menu-toggle {
        position: relative;
        z-index: var(--pi-z-sticky);
        padding: 12px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Animación suave del menú */
    /* Animación suave del menú - DESHABILITADO para usar estilos de posadasinforma.css */
    /* .nav-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s var(--pi-transition-cubic);
    }

    .nav-menu.active {
        max-height: 100vh;
    } */

    /* Overlay oscuro cuando el menú está abierto */
    .nav-menu.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        animation: fadeIn var(--pi-transition-base);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}

/* ========== TARJETAS DE ARTÍCULOS OPTIMIZADAS ========== */

@media (max-width: 768px) {
    .pi-article-item {
        /* Sombra más pronunciada en móvil para mejor separación */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        overflow: hidden;

        /* Optimización de rendering */
        will-change: transform;
        transform: translateZ(0);
    }

    /* Efecto de presión al tocar */
    .pi-article-item:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    /* Imágenes con aspect ratio fijo */
    .article-image {
        aspect-ratio: 16 / 9;
        height: auto;
        background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    }

    .article-image img {
        /* Prevenir layout shift */
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ========== TIPOGRAFÍA OPTIMIZADA PARA MÓVIL ========== */

@media (max-width: 768px) {

    /* Escala de tipografía fluida */
    .article-title {
        font-size: clamp(1rem, 4vw, 1.25rem);
        line-height: 1.3;
        letter-spacing: -0.02em;
    }

    .article-excerpt {
        font-size: clamp(0.875rem, 3.5vw, 1rem);
        line-height: 1.6;
    }

    /* Mejorar legibilidad en artículos */
    .pi-article-page .article-body {
        font-size: 1.0625rem;
        /* 17px - tamaño óptimo para lectura móvil */
        line-height: 1.7;
        letter-spacing: 0.01em;
    }

    .pi-article-page .article-body p {
        margin-bottom: 1.5em;
    }

    /* Títulos en artículos */
    .pi-article-page h2 {
        font-size: 1.5rem;
        margin-top: 2em;
        margin-bottom: 0.75em;
        line-height: 1.3;
    }

    .pi-article-page h3 {
        font-size: 1.25rem;
        margin-top: 1.75em;
        margin-bottom: 0.5em;
    }
}

/* ========== IMÁGENES RESPONSIVAS ========== */

@media (max-width: 768px) {

    /* Imágenes en contenido de artículos */
    .pi-article-page .article-body img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;
        margin: 1.5em 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Prevenir overflow horizontal */
    .pi-article-page .article-body {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* ========== PULL TO REFRESH INDICATOR ========== */

@media (max-width: 768px) {

    /* Indicador visual de pull to refresh */
    body::before {
        content: '';
        position: fixed;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--color-primary);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 9999;
    }

    body.pulling::before {
        top: 20px;
        opacity: 0.8;
    }
}

/* ========== BOTONES Y ACCIONES ========== */

@media (max-width: 768px) {

    /* Botones más grandes y táctiles */
    .btn-primary,
    .share-btn {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 1rem;
        border-radius: 24px;
        font-weight: 600;

        /* Feedback táctil */
        -webkit-tap-highlight-color: transparent;
    }

    .btn-primary:active,
    .share-btn:active {
        transform: scale(0.96);
    }

    /* Botones de compartir en grid */
    .share-buttons {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
}

/* ========== NAVEGACIÓN INFERIOR (BOTTOM NAV) ========== */

@media (max-width: 768px) {

    /* Barra de navegación inferior fija */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e0e0e0;
        padding: 8px 0 max(8px, env(safe-area-inset-bottom));
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }

    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 16px;
        color: #666;
        font-size: 0.75rem;
        font-weight: 500;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav a i {
        font-size: 1.25rem;
    }

    .mobile-bottom-nav a.active {
        color: var(--color-primary);
    }

    .mobile-bottom-nav a:active {
        transform: scale(0.9);
    }

    /* Agregar padding al contenido para compensar bottom nav */
    .pi-main-content {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

/* ========== SAFE AREAS (iPhone X+) ========== */

@media (max-width: 768px) {

    /* Respetar safe areas en dispositivos con notch */
    .pi-header {
        padding-top: env(safe-area-inset-top);
    }


}

/* ========== LOADING STATES ========== */

@media (max-width: 768px) {

    /* Skeleton loading para mejor UX */
    .article-skeleton {
        background: linear-gradient(90deg,
                #f0f0f0 25%,
                #e0e0e0 50%,
                #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s ease-in-out infinite;
    }

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

        100% {
            background-position: -200% 0;
        }
    }
}

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

@media (max-width: 768px) {

    /* Scroll suave con momentum */
    .pi-main-content,
    .nav-menu {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Prevenir bounce en iOS */
    body {
        overscroll-behavior-y: none;
    }
}


/* ========== ANIMACIONES DE ENTRADA ========== */

@media (max-width: 768px) {

    /* Fade in para artículos */
    .pi-article-item {
        animation: fadeInUp 0.4s ease-out backwards;
    }

    .pi-article-item:nth-child(1) {
        animation-delay: 0.05s;
    }

    .pi-article-item:nth-child(2) {
        animation-delay: 0.1s;
    }

    .pi-article-item:nth-child(3) {
        animation-delay: 0.15s;
    }

    .pi-article-item:nth-child(4) {
        animation-delay: 0.2s;
    }

    .pi-article-item:nth-child(5) {
        animation-delay: 0.25s;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ========== OPTIMIZACIÓN DE RENDIMIENTO ========== */

@media (max-width: 768px) {

    /* GPU acceleration para elementos animados */
    .pi-article-item,
    .nav-menu,
    .menu-toggle,
    .mobile-bottom-nav {
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    /* Reducir motion para usuarios que lo prefieran */
    @media (prefers-reduced-motion: reduce) {

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

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

@media (max-width: 768px) {

    /* Foco visible para navegación por teclado */
    a:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Contraste mejorado para texto */
    .article-meta {
        color: #555;
        font-weight: 500;
    }
}