/* ====================================
   MOBILE FIX - Proyectos Viviendas
   Mejoras específicas para imágenes en móvil
   ==================================== */

@media (max-width: 768px) {
    /* Asegurar que el container no cause overflow */
    .proyectos-section {
        overflow-x: hidden;
    }
    
    /* Grid de proyectos en móvil */
    .proyectos-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-sm);
    }
    
    /* Imágenes del proyecto card */
    .proyecto-image {
        height: 250px;
        width: 100%;
    }
    
    .proyecto-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    /* Modal en móvil */
    .modal-detail {
        width: 100%;
        height: 100%;
        max-width: 100%;
        border-radius: 0;
    }
    
    /* Timeline gallery móvil */
    .timeline-gallery {
        padding: var(--spacing-md);
        width: 100%;
        overflow-x: hidden;
    }
    
    .timeline-phase {
        width: 100%;
        margin-bottom: var(--spacing-2xl);
    }
    
    /* Phase images en móvil */
    .phase-images {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md);
        margin-left: 0 !important;
        width: 100%;
    }
    
    .phase-image {
        height: 220px;
        width: 100%;
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    
    .phase-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }
    
    .phase-image-caption {
        font-size: var(--text-sm);
        padding: var(--spacing-sm);
    }
}

@media (max-width: 576px) {
    /* Container más estrecho */
    .proyectos-section .container {
        padding: 0 var(--spacing-xs);
    }
    
    /* Grid de proyectos */
    .proyectos-grid {
        gap: var(--spacing-lg);
    }
    
    /* Proyecto card móvil */
    .proyecto-card {
        border-radius: var(--radius-xl);
    }
    
    .proyecto-image {
        height: 200px;
    }
    
    /* Timeline móvil pequeño */
    .timeline-gallery {
        padding: var(--spacing-sm);
    }
    
    .phase-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .phase-number {
        width: 40px;
        height: 40px;
        font-size: var(--text-lg);
    }
    
    .phase-info h3 {
        font-size: var(--text-lg);
    }
    
    .phase-date {
        font-size: var(--text-xs);
    }
    
    .phase-description {
        margin-left: 0;
        font-size: var(--text-sm);
        line-height: 1.6;
    }
    
    /* Imágenes pequeñas en móvil */
    .phase-images {
        gap: var(--spacing-sm) !important;
    }
    
    .phase-image {
        height: 180px;
    }
    
    .phase-image-caption {
        font-size: var(--text-xs);
        padding: var(--spacing-xs);
    }
}

@media (max-width: 414px) {
    /* Google Pixel y dispositivos similares */
    .proyecto-image {
        height: 180px;
    }
    
    .phase-image {
        height: 160px;
    }
    
    .phase-info h3 {
        font-size: var(--text-base);
    }
}

@media (max-width: 375px) {
    /* iPhone SE y dispositivos muy pequeños */
    .proyecto-image {
        height: 160px;
    }
    
    .phase-image {
        height: 140px;
    }
    
    .timeline-gallery {
        padding: var(--spacing-xs);
    }
}