/* Tablet And Smartphone (768px e abaixo) */
@media (max-width: 760px) {
    /* Menu Hamburger - Escondido em desktop */
    img, video, iframe, object, embed {
        max-width: 100%;
        height: auto;
      }
      
      /* Container principal para garantir que não haja rolagem horizontal */
      main {
        width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
      }
      
      /* Garantir que elementos com largura fixa não causem overflow */
      #BANNER1, #QUEM_SOMOS, #section_avaliacoes, #formulario_contato, #section_profissionais {
        max-width: 100%;
        box-sizing: border-box;
      }
      
      /* Corrigir possíveis margens negativas */
      * {
        margin-left: 0;
        margin-right: 0;
      }
    .menu-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 30px;
        cursor: pointer;
        position: absolute;
        /* top: 30%; */
        left: 20px;
        z-index: 1001;
    }
    .linha {
        width: 100%;
        height: 4px;
        background-color: #063643;
        border-radius: 10px;
        transition: all 0.3s;
    }
    /* Overlay para quando o menu está aberto */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    .menu-aberto .overlay {
        display: block;
    }
    /* CABEÇALHO */
    #meio {
        flex-direction: column;
        width: 90%;
        /* Logo centralizado em mobile */
        justify-content: center;
        position: relative;
    }
    #cabeçalho {
        width: 100%;
        position: relative;
        /* height: 15%; */
        margin-top: 30px;
        height: 80px;
        padding: 10px 0;
    }
    /* Modificar a logo para versão mobile */
    #cabeçalho img {
        content: url("Imagens/logo_mobile_cabecalho.png");        
        width: 45%;
        max-width: 210px;
        min-width: 200px;
        padding-right: 40px;
        /* width: 100px; */
        height: auto;
        margin: 0 auto;
        display: block;
    }    
    /* Esconder botões normais */
    .buttons {
        display: none;
    } 
    main {
        margin-top: -1%;
    }
    /* BANNER 1 */
    #BANNER1 {
        width: 100%;
        height: 40vw;
        background-color: transparent;
        border: none;
        box-shadow: none;
        min-height: 200px; /* Garante altura mínima em telas pequenas */
    }
    /* Adicionamos a elipse apenas na versão tablet e menores */
    #BANNER1::before {
        content: '';
        position: absolute;
        width: 90%;
        height: 120%;
        background: linear-gradient(104.5deg, rgba(195, 236, 248, 0.2) 4.89%, rgba(15, 99, 122, 0.2) 97.81%);
        border-radius: 50%;
        z-index: -1;
        transform: rotate(-20deg);
    }
    #Dogs {
        width: 75%;
        height: auto;
        bottom: 20%;
        right: 10%;
    }
    #wave {
        display: none;
    }
    #textoBRANCA {
        display: none;
    }
    #text_respon {
        display: flex;   

        width: 55%;
        margin-right: auto;
        margin-bottom: auto;

        text-align: left;
        font-family: 'Inter';
        font-weight: 700;
        font-size: 1.5em;
        line-height: 100%;
        letter-spacing: 0%;
        color: #063643;
    }
    #bottonBRANCA {
        top: 80%;
        width: 60%;
        font-size: 18px;
        left: 20%;
        height: 40px;
        /* padding: 10px; */
    }
    /* CAMPANHAS */
    #BANNER2 {
        display: none;
    }
    /* QUEM SOMOS */
    #QUEM_SOMOS {
        height: 350px;
        width: 100%;
        text-align: center;
    } 
    #logo2 {
        display: none;
    }
    #titleQUEM {
        display: none;
    }
    #textQUEM {
        display: none;
    }
    #QUEM_SOMOS_RESPON {
        display: flex;
        text-align: center;
        flex-direction: column;
    }
    #titleQUEM_RESPON {
        color:#063643;
        position: relative;
        width: 100%;
        font-family: "Poppins";
        font-weight: 700;
        font-size: 1.5em;
        margin: 0 auto;
        margin-top: 5%;
        text-align: center;
    }
    #logo_semdata {
        position: relative;
        width: 20%;
        max-width: 150px;
        min-width: 120px;
        height: auto;
        margin: 15px auto;
    }

    #textQUEM_RESPON {
        color:#063643;
        position: relative;
        width: 90%;
        margin: 0 auto;
        font-family: "Open Sans";
        font-weight: 400;
        /* font-size: 3vw; */
        font-size: 0.9em;
        line-height: 160%;
        letter-spacing: 2%;
    }
    #GRIFADO {
        color:#063643;
        position: relative;
        width: 95%;
        margin: 20px auto 0;
        font-family: "Open Sans";
        font-weight: 700;
        font-size: 15px;
        /* font-size: 3.2vw; */
        line-height: 160%;
        letter-spacing: 2%;
    }
    /* SERVIÇOS */
    #servico1, #servico2 {
        display: none;
    }
    #servico_RESPON {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 400px;
        padding: 20px 0;
        background-color: #63B3C9;
        background-image: url(Imagens/fundo-animais-icons\ 3.png);
    }
    #title_servico_RESPON {
        position: relative;
        width: 80%;
        margin: 10px auto;
        text-align: center;
        font-family: 'Inter';
        font-weight: 700;
        font-size: 1.5em;
        color: #063643;
    }
    #text_servico_RESPON {
        color:#063643;
        position: relative;
        width: 80%;
        margin: 15px auto;
        text-align: center;
        font-family: 'Open Sans';
        font-weight: 400;
        font-size: 1em;
        line-height: 140%;
        letter-spacing: 2%;
    }
    #botton_serv_RESPON {
        position: relative;
        width: 40%;
        min-width: 240px;
        margin: 20px auto;
        /* padding: 10px; */
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        border-radius: 4px;
        font-family: "Poppins";
        font-weight: 700;
        font-size: 120%;
    }

    #botton_serv_RESPON:hover{
        background: #003843;
    }

    #botton_serv_RESPON a {
        text-decoration: none;
        color: #063643;
        display: block;
        width: 100%;
        font-size: clamp(16px,68%,35px);
        padding: 15px 0;
        text-align: center;
    }

    #botton_serv_RESPON a:hover{
        color: #F0F9F9;
    }

    #gato_RESPON {
        position: relative;
        width: 20%;
        height: auto;
        margin: 0 auto;
        margin-top: 20px;
    }
    /* PROFISSIONAIS */
    #section_profissionais {
        background-color: #E2F5FA;
        position: relative;
        width: 83vw;
        margin-top: 0;
        padding: 20px 0;
        border: none;
        box-shadow: none; 
    }
    /* TITULO DE NOSSOS PROFISSIONAIS */
    #titulo_profissionais {
        position: relative;
        width: 100%;
        text-align: center;
        margin: 20px auto;
        font-size: 1.5em;
    }
    #nossos_profissionais {
        background-color: white; 
        margin-top: 10%;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    .div_medicos {
        position: relative;
        margin: 20px auto;
        width: 40%;
    }
    /* AVALIAÇÕES */
    #section_avaliacoes {
        position: relative;
        width: 100%;
        background-color: #E2F5FA;
        margin-right: auto;
    }
    #texto_avaliacoes {
        margin-left: 0;
        width: 100%;
        text-align: center;
        font-size: 1.5em;
    }
    .controle-inferior {
        right: 0;
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .foto {
        width: 20%;
        height: auto;
        object-fit: cover;
        border-radius: 50%;
        align-self: center;
    }

    #botao-proximo{
        width: 40px;
        height: 40px;
        background-image: url("Imagens/arrow-Carrosel.png");
        background-repeat: no-repeat;
        margin-left: 23px;
    }
    #botao_next-avaliacao {
        display: none;
    }
    #botao_prev-avaliacao:hover{
        background-color: #E2F5FA;        
    }
    #botao_prev-avaliacao:active{
        background-color: #E2F5FA;
    }
    #botao_next-avaliacao:hover{
        background-color: #E2F5FA;
    }
    #botao_next-avaliacao:active{
        background-color: #E2F5FA;
    }
    #botao-anterior {
        width: 40px;
        height: 40px;
        background-image: url("Imagens/arrow-Carrosel-prev.png");
        background-repeat: no-repeat;
        margin-right: 23px;
    }
    #botao_prev-avaliacao {
        display: none;
    }
    #div_branca {
        width: 40px;
        height: 30px;
        margin-right: 23px;
    }
    #div_azul {
        width: 40px;
        height: 30px;
        margin-left: 23px;
    }

    /* FORMULÁRIO */
    #secao_contato {
        flex-direction: column;
        background-color: white;
        width: 96%;
        margin-top: 10%;
    }
    #title_contato {
        position: relative;
        width: 100%;
        text-align: center;
        font-size: 1.7em;
        margin-top: 5%;
    }
    #formulario_contato {
        flex-direction: column;
        height: auto;
        border: none;
        box-shadow: none; 
        background: transparent;
    }
    #div_contato {
        display: none;
    }
    #div_formulario {
        width: 95%;
        height: auto;
        border: none;
        box-shadow: none; 
    }
    .campo_formulario {
        height: auto;
    }
    #imagem_mapa {
        display: none;
    }
    #botao_enviar {
        position: relative;
        width: 30%;
        min-width: 180px;
        height: 10%;
        margin: 20px auto;
        left: auto;
    }
    #texto_enviar {
        position: relative;
        left: auto;
        text-align: center;
        width: 100%;
    }
    #logos_RESPON {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        margin-bottom: 40px;
    }
    #logos_RESPON img {
        width: 90%;
        height: auto;
    }
    /* RODAPÉ */
    #logo_rodape, #rodape_contatos {
        display: none;
    }
    #footer {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 20px 0;
        text-align: left;
        background-color: #FFFFFF;
        gap: 5%;
    }
    
    #rodape_institucional,
    #rodape_servicos {
        width: 38%;
        min-width: 150px; /* evita colapsar demais */
    }
}

#logo_mobile_cabecalho{
    display: none;
}

/* Smartphones (425px e menores) */
@media (max-width: 375px) {
    /* CABEÇALHO */
    #cabeçalho{
        height:80px;
    }

    #cabeçalho img{
        width: 150px;
    }


    #logo_mobile_cabecalho{
        width: 100px;
        height: 44px;
    }
    
    /* BANNER 1 */
    #BANNER1 {
        height: 40vw; /* Maior altura relativa */
        min-height: 200px;
    }
    
    #Dogs {
        width: 90%;
        min-width: 300px;
        padding-left: 50px;
        /* bottom: 10%; */
    }
    
    #textoBRANCA {
        font-size: clamp(15px,10vw,20px); /* Fonte ligeiramente menor */
        line-height: 1.3;
    }
    
    #bottonBRANCA {
        width: 60%; /* Botão maior */
    }
    
    /* QUEM SOMOS */
    #QUEM_SOMOS {
        height: 400px; /* Mais espaço */
    }
    
    #logo_semdata {
        width: 35%; /* Logo maior */
    }
    
    #textQUEM_RESPON {
        width: 85%; /* Texto mais largo */
    }
    
    #GRIFADO {
        width: 85%;
    }
    
    /* SERVIÇOS */
    #servico_RESPON {
        height: 450px; /* Mais espaço */
    }
    
    #title_servico_RESPON {
        width: 90%; /* Título mais largo */
    }
    
    #text_servico_RESPON {
        width: 90%;
    }
    
    #botton_serv_RESPON {
        width: 60%; /* Botão maior */
    }
    
    #gato_RESPON {
        width: 30%; /* Imagem maior */
        margin-top: 10px;
    }
    
    /* PROFISSIONAIS */
    .div_medicos {
        width: 80%; /* Um médico por linha */
    }
    
    /* AVALIAÇÕES */
    .foto {
        width: 15%;
    }
    .avaliacao {
        width: 100%;
    }
    .FIVESTAR {
        width: 30%;
    }
    .texto {
        width: 95%;
    }
    
    /* FORMULÁRIO */
    #title_contato {
        font-size: 2em; /* Fonte menor */
    }
    #nome{
        height: 100%;
    }
    .campo_formulario {
        left: 5%; /* Menos margem */
    }
    
    #botao_enviar {
        width: 50%; /* Botão maior */
    }
    
    #logos_RESPON img {
        width: 90%; /* Ícones menores */
    }
    
    /* RODAPÉ */
    #footer {
        height: auto; /* Altura automática */
        padding-bottom: 30px;
    }
    
    #rodape_institucional, #rodape_servicos {
        width: 80%; /* Mais largos */
        margin: 10px auto;
        text-align: center;
        display: block;
    }
    
    .titulo_info {
        margin-top: 15px;
    }
}