/* =========================================================
   360 PATCH MOBILE (COMPATÍVEL COM TEMPLATE EXISTENTE)
   - NÃO mexe em .container, h1/h2 globais, img globais
   - Só corrige componentes específicos do seu layout
   Cole no FINAL do CSS para ter prioridade.
   ========================================================= */

/* ---------- Base mobile geral ---------- */
@media (max-width: 768px) {

    /* Logo responsivo (não depende do .container) */
    .res-log img {
        width: 55%;
        max-width: 220px;
        height: auto;
    }

    /* Centraliza bloco planning sem quebrar grid */
    .planning-make {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }

    .planning-make i,
    .planning-make img {
        margin-right: 0 !important;
    }

    /* Hero: evitar margin-top em % que “pula” conforme altura */
    .hero-section h2 {
        font-size: clamp(34px, 8vw, 60px);
        line-height: 1.05;
        margin-top: 0;
        /* evita conflito com template */
    }

    /* Ajuste de texto que costuma estourar em mobile */
    .information-data a {
        font-size: 20px;
        line-height: 1.2;
    }

    /* Barra de progresso mais legível */
    .progress-bar__skill,
    .progress-bar__value {
        font-size: 12px;
        letter-spacing: 0;
        font-weight: 600;
    }

    /* Cards/Box sem borda excessiva (mantém teu ajuste) */
    .team-flex {
        padding: 16px;
        border: none;
    }

    .contato360 .contato-p-360 {
        border: none !important;
    }

    /* Links longos não estourarem */
    .what-we-provide.address h2 a {
        font-size: 16px;
        word-break: break-word;
    }
}

/* ---------- 576px e abaixo (mobile comum) ---------- */
@media (max-width: 576px) {

    /* Hero um pouco menor para não quebrar */
    .hero-section h2 {
        font-size: clamp(32px, 9vw, 48px);
    }

    /* Team slider sem distorcer imagem */
    .team-slider.owl-carousel .owl-item img {
        height: auto !important;
        width: 100% !important;
        object-fit: cover;
    }

    /* Ajuste de espaçamentos pontuais (evita “apertar” demais) */
    .portfolio-360 {
        margin-bottom: 24px;
    }
}

/* ---------- 480px e abaixo (mobile pequeno) ---------- */
@media (max-width: 480px) {

    /* Logo menor ainda */
    .res-log img {
        width: 60%;
        max-width: 200px;
    }

    /* Botões com área de toque boa */
    .sec-btn,
    .btn,
    button {
        min-height: 44px;
    }

    /* Evita títulos quebrando em 2 linhas ruins */
    .hero-section h2 {
        letter-spacing: -0.5px;
        margin-top: 90px
    }

    .img1-360 {
        display: none;
    }

    .marca-Alle {
        width: 90%;
    }
}

/* ---------- 410px e abaixo (muito pequeno) ---------- */
@media (max-width: 410px) {
    .information-data a {
        font-size: 18px;
    }

    .hero-section h2 {
        font-size: clamp(30px, 10vw, 42px);
        margin-top: 20%;
    }

    .img1-360 {
        display: none;
    }

    .marca-Alle {
        width: 90%;
    }
}

/* ---------- Segurança iOS (zoom em input) ---------- */
input,
select,
textarea {
    font-size: 16px;
}