@media screen and (max-width:900px){
    .hero-visual {
        flex-direction:column;
        align-items:flex-start;
        padding:36px
    }

    .hero-copy {
        max-width:100%;
    }

    .brand img {
        width:90px;
    }

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

    #sobre > div {
    grid-template-columns: 1fr;
    }
  
    #sobre .card {
    flex-direction: column;
    text-align: center;
    }

    #sobre .icon {
    margin-bottom: 8px;
    }

    .services {
        grid-template-columns:repeat(1,1fr);
    }
    .portfolio-grid {
        grid-template-columns:repeat(1,1fr);
    }   

    .nav-links {
        display: none;
        position:absolute;
        top:140px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--glass);
        backdrop-filter: blur(6px);
        padding: 12px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15,20,30,0.08);
        flex-direction: column;
        gap: 12px;
    }

    .nav-links.open {
        display: flex;
        flex-direction: column;
}

    .menu-btn {
        display:block;
    }

    #sobre > div {
        grid-template-columns: 1fr;
    }

    #contato > div {
        grid-template-columns: 1fr;
    }

    .page,.section {
        overflow: hidden;
        max-width: 100vw;
    }
}



@media screen and (max-width:600px){
    .mapa iframe {
        min-height: 260px;
    }
    .btn-container {
        grid-column: 1 / 2;
    }
}

/* ==== FORMULÁRIO RESPONSIVO ==== */
@media screen and (max-width: 768px) {
    #contato .card {
        padding: 16px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    #contato form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    #contato form input,
    #contato form textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 12px;
        border-radius: 10px;
        box-sizing: border-box;
        font-size: 15px;
    }

    #contato form textarea {
        min-height: 120px;
        resize: vertical;
    }

    #contato .btn-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #contato .btn-enviar {
        width: 100%;
        max-width: 260px;
    }
}

@media screen and (max-width:520px){
    .services {
        grid-template-columns:1fr
    }

    .portfolio-grid {
        grid-template-columns:1fr
    }

    form {
        grid-template-columns:1fr
    }
    .hero h1 {
        font-size:28px
    }
}

@media screen and (max-width:380px) {
    .muted {
        color: #6b7880;    
    }

    .center {
        display:flex;
        align-items: center;
        justify-content: center;
    }    
}