/*
 * OPTIMIZACIÓN MÓVIL MEJORADA
 * Hace que el sitio se vea excelente en móvil sin necesidad de "modo computadora"
 */

/* ========== MÓVIL PORTRAIT (hasta 768px) ========== */
@media (max-width: 768px) {
    
    /* === VIEWPORT Y ZOOM === */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    /* === PAGE HEADER === */
    .page-header {
        padding: calc(70px + 2rem) 1rem 2rem 1rem !important;
        min-height: auto;
    }
    
    .page-title {
        font-size: 1.75rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    .page-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        opacity: 0.95;
    }
    
    .breadcrumb {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* === PACKAGES SECTION === */
    .packages-full, .extras-full {
        padding: 1.5rem 0 !important;
    }
    
    .packages-full .container,
    .extras-full .container {
        padding: 0 1rem !important;
    }
    
    /* === CONTROLES Y FILTROS === */
    .packages-controls {
        flex-direction: column !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .filter-options {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    .filter-btn {
        flex: 1 1 auto !important;
        min-width: calc(33.333% - 0.35rem) !important;
        padding: 0.65rem 0.75rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
    
    .filter-btn i {
        font-size: 0.9rem !important;
        margin-right: 0.35rem !important;
    }
    
    .sort-options {
        width: 100% !important;
    }
    
    .sort-select {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }
    
    /* === PACKAGES GRID === */
    .packages-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        margin-top: 1.5rem !important;
    }
    
    /* === PACKAGE CARDS === */
    .package-card {
        padding: 1.25rem !important;
        border-radius: 12px !important;
        max-width: 100% !important;
    }
    
    /* Imagen del paquete */
    .package-image {
        height: 200px !important;
        margin-bottom: 1rem !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .package-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Contenido del paquete */
    .package-content h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    .package-features {
        margin: 1rem 0 !important;
    }
    
    .package-features li {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.5rem !important;
        padding-left: 1.5rem !important;
    }
    
    .package-features li::before {
        left: 0 !important;
        top: 0.4rem !important;
    }
    
    /* Precio */
    .package-price {
        margin: 1.25rem 0 !important;
    }
    
    .package-price .label {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .package-price .amount {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .package-price .amount .currency {
        font-size: 1.5rem !important;
    }
    
    /* Botones */
    .select-package-btn,
    .add-extra-btn {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        border-radius: 8px !important;
        margin-top: 0.75rem !important;
    }
    
    .select-package-btn i,
    .add-extra-btn i {
        font-size: 1.1rem !important;
    }
    
    /* === EXTRAS === */
    .extras-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .extra-card {
        padding: 1.25rem !important;
    }
    
    .extra-card .extra-image {
        height: 180px !important;
    }
    
    .extra-card h3 {
        font-size: 1.15rem !important;
    }
    
    /* === BADGE Y ETIQUETAS === */
    .featured-badge,
    .popular-badge {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.75rem !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
    }
    
    /* === CART BADGE === */
    .cart-badge {
        min-width: 20px !important;
        height: 20px !important;
        font-size: 0.7rem !important;
        padding: 0 5px !important;
    }
    
    /* === LOADING INDICATOR === */
    .loading-indicator {
        padding: 3rem 1rem !important;
    }
    
    .loading-indicator p {
        font-size: 0.95rem !important;
        margin-top: 1rem !important;
    }
}

/* ========== MÓVIL PEQUEÑO (hasta 480px) ========== */
@media (max-width: 480px) {
    
    .page-title {
        font-size: 1.5rem !important;
    }
    
    .page-subtitle {
        font-size: 0.875rem !important;
    }
    
    .filter-btn {
        min-width: calc(50% - 0.25rem) !important;
        font-size: 0.8rem !important;
        padding: 0.6rem 0.5rem !important;
    }
    
    .package-image {
        height: 180px !important;
    }
    
    .package-content h3 {
        font-size: 1.15rem !important;
    }
    
    .package-features li {
        font-size: 0.85rem !important;
    }
    
    .package-price .amount {
        font-size: 1.75rem !important;
    }
    
    .select-package-btn,
    .add-extra-btn {
        font-size: 0.95rem !important;
        padding: 0.8rem 1.25rem !important;
    }
}

/* ========== MÓVIL HORIZONTAL (landscape) ========== */
@media (max-width: 768px) and (orientation: landscape) {
    
    .page-header {
        padding: calc(70px + 1.5rem) 1rem 1.5rem 1rem !important;
    }
    
    .packages-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .package-card {
        padding: 1rem !important;
    }
    
    .package-image {
        height: 150px !important;
    }
    
    .package-content h3 {
        font-size: 1.1rem !important;
    }
    
    .package-features li {
        font-size: 0.8rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    .package-price .amount {
        font-size: 1.5rem !important;
    }
    
    .select-package-btn {
        padding: 0.7rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* ========== TABLETS (768px - 1024px) ========== */
@media (min-width: 769px) and (max-width: 1024px) {
    
    .packages-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    .package-card {
        padding: 1.5rem !important;
    }
    
    .package-image {
        height: 220px !important;
    }
}

/* ========== MEJORAS GENERALES PARA TOUCH ========== */
@media (hover: none) and (pointer: coarse) {
    
    /* Aumentar área de toque */
    .filter-btn,
    .sort-select,
    .select-package-btn,
    .add-extra-btn,
    a,
    button {
        min-height: 44px !important;
    }
    
    /* Eliminar hover en dispositivos táctiles */
    .package-card:hover {
        transform: none !important;
    }
    
    /* Feedback táctil con active */
    .filter-btn:active,
    .select-package-btn:active,
    .add-extra-btn:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s ease !important;
    }
}