@media (max-width: 900px) {

    .navbar {
        flex-wrap: wrap;
    }

    .nav-menu {
        order: 3;
        width: 100%;

        overflow-x: auto;
    }

    .search-form {
        margin-left: auto;
    }

    .search-form input {
        width: 160px;
    }

    .hero {
        min-height: 500px;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .genre-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .navbar {
        padding: 15px;
        gap: 15px;
    }

    .nav-menu {
        gap: 18px;
        font-size: 14px;
    }

    .search-form {
        width: 100%;
    }

    .search-form input {
        width: 100%;
    }

    .hero {
        min-height: 500px;
        padding: 40px 20px;
    }

    .content-section,
    .genres {
        padding-left: 15px;
        padding-right: 15px;
    }

    .movie-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .genre-grid {
        grid-template-columns: 1fr 1fr;
    }
}
/* =========================================================
   NAVEGACIÓN - LOGIN RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    .nav-actions {
        margin-left: auto;
    }

    .nav-login-link {
        min-height: 40px;
        padding: 0 13px;
    }
}

@media (max-width: 600px) {
    .nav-actions {
        order: 2;
        width: 100%;
        margin-left: 0;
        gap: 8px;
    }

    .nav-actions .search-form {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .nav-actions .search-form input {
        width: 100%;
        min-width: 0;
    }

    .nav-login-link {
        min-height: 42px;
        padding: 0 12px;
        font-size: 13px;
    }
}

/* =========================================================
   BÚSQUEDA EN VIVO - RESPONSIVE
========================================================= */

@media (max-width: 600px) {
    .live-search-results {
        left: 0;
        right: auto;
        width: min(100%, 430px);
        max-height: 58vh;
    }

    .live-search-item {
        min-height: 70px;
    }

    .live-search-poster {
        width: 44px;
        height: 59px;
        flex-basis: 44px;
    }
}