/* =========================================
   RESPONSIVE DESIGN (Móviles y Tablets)
   ========================================= */

/* 1. TABLET & LAPTOPS PEQUEÑOS (Max 1200px) */
@media (max-width: 1200px) {
    
    :root {
        --padding-container: 4%;
    }

    /* PROYECTOS: Bajamos de 5 a 3 columnas */
    .grid-gallery, .projects-grid-full {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* WIP: Bajamos de 6 a 4 columnas */
    .wip-grid {
        column-count: 4;
    }
}

/* 2. TABLET VERTICAL (Max 1024px) */
@media (max-width: 1024px) {
    
    .page-title h1 { font-size: 3.5rem; }
    .section-header h2 { font-size: 3.5rem; }
    
    .intro-text h1 { font-size: 1.8rem; }
}

/* 3. MÓVILES (Max 768px) */
@media (max-width: 768px) {

    :root {
        --padding-container: 20px; /* Márgenes laterales seguros */
    }

    /* --- HEADER & MENÚ --- */
    .fixed-ui { padding: 20px; }
    .hero-logo { width: 180px; }
    
    /* Menú Lateral */
    .fullscreen-menu { width: 85%; }
    .fullscreen-menu a { font-size: 1.5rem; }
    .fullscreen-menu ul { padding-left: 30px; }

    /* --- SECCIONES GIGANTES --- */
    .section-header { padding: 80px 0 40px 0; }
    .section-header h2 { font-size: 2.8rem; }
    .page-title h1 { font-size: 2.5rem; }

    /* --- PARALLAX (RESET TOTAL EN MÓVIL) --- */
    /* Importante: Quitamos el movimiento y la sombra para que no rompa el diseño vertical */
    .parallax-wrapper {
        height: 300px; /* Altura fija */
        transform: none !important; /* Anula el movimiento del cuadro */
        box-shadow: none; /* Quita la sombra pesada */
        margin-bottom: 30px;
    }
    .parallax-img {
        height: 100%;
        top: 0;
        position: relative;
        transform: none !important; /* Anula el movimiento de la imagen */
    }

    /* --- GRILLAS MÓVILES --- */
    /* Proyectos: 1 Columna */
    .grid-gallery, .projects-grid-full {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* WIP: 2 Columnas (Estilo Pinterest) */
    .wip-grid {
        column-count: 2;
        column-gap: 10px;
    }

    /* --- LAYOUT GENERAL --- */
    .estudio-content, 
    .two-col-layout, 
    .contact-grid, 
    .footer-cols, 
    .footer-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    /* --- CONTACTO & MAPA --- */
    .contact-map {
        height: 300px;
        order: -1; /* Mapa arriba */
    }
    .contact-info { text-align: left; }

    /* --- INTRO NAV --- */
    .inline-nav {
        flex-direction: column;
        gap: 10px;
        border-bottom: none;
    }
    .inline-nav a {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    /* --- BOTONES FLOTANTES --- */
    .floating-buttons {
        bottom: 20px;
        right: 20px;
    }
    .btn-whatsapp { width: 45px; height: 45px; font-size: 1.5rem; }
    .btn-top { width: 35px; height: 35px; }
}

/* 4. MÓVILES PEQUEÑOS (Max 380px) */
@media (max-width: 380px) {
    .section-header h2 { font-size: 2rem; }
    .intro-text h1 { font-size: 1.2rem; }
}