@media screen and (max-width: 1110px){
    /* Ocultação do menu desktop e botão whatsapp */
    header .menu-desktop, header .btn-whatsapp{
        display: none;
    }
    
    /* Responsivo hero-site */
    section.hero-site{
        min-height: 100vh; /* Alterado para min-height para evitar overflow */
        background-image: url('../imagens/realidadevirtual5.png');
        color: aliceblue;
        padding: 15px;
        position: relative;
    }
    
    .hero-site .botao-posicionado{
        display: none;
    }
    

    /* Responsivo Beneficios 1 */
    section.beneficios1{
        padding: 40px 20px;
        text-align: justify;
        position: relative;
        z-index: 1;
    }
    
    section.beneficios1 .interface h2{
        text-align: center;
        padding: 35px 0;
        font-size: 30px;
    }
    
    section.beneficios1 .interface h2 span{
        padding: 0 4px;
        border-radius: 4px;
        font-weight: 600;
    }
    
    .beneficios1 .itens-container {
        margin: 40px auto;
        max-width: 100%; /* Alterado para melhor responsividade */
        width: 100%; 
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px; /* Reduzido o gap para melhor caber em telas menores */
        margin-bottom: 40px;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 20px;
        padding: 30px; /* Reduzido o padding para melhor caber em telas menores */
        flex-direction: column;
        position: relative;
        z-index: 1;
    }
    
    .beneficios1 .itens-container:hover {
        transform: translateY(-6px);
        box-shadow: 4px 6px 30px rgba(0, 0, 0, 0.2);
    }
    
    .beneficios1 .icone-itens i {
        font-size: 80px; /* Reduzido para melhor caber em telas menores */
        margin-bottom: 20px;
        transition: transform 0.7s ease, filter 0.7s ease;
        display: flex;
    }

    .beneficios1 .itens-container:hover .icone-itens i {
        transform: rotate(360deg);
    }
    
    .itens-container .txt-itens h3{
        font-size: 1.5em; /* Reduzido para melhor caber em telas menores */
        line-height: 30px;
        margin-bottom: 15px;
        text-align: center; /* Centralizado para melhor visualização */
    }
    
    .itens-container .txt-itens h3 span{
        font-weight: 300;
    }
    
    .itens-container .txt-itens p{
        font-size: 1em;
        text-align: center; /* Centralizado para melhor visualização */
    }
    
    .cta {
        text-align: center;
    }
    
    .cta p {
        font-size: 1.1rem; /* Reduzido para melhor caber em telas menores */
        margin-bottom: 20px;
        padding: 20px;
    }
    
    .cta .destaque {
        padding: 0 4px;
        border-radius: 4px;
        font-weight: 600;
    }
    
    .btn-conexao {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px; /* Reduzido para melhor caber em telas menores */
        font-size: 1rem;
        font-weight: bold;
    }
    
    .btn-conexao i{
        font-size: 30px; /* Reduzido para melhor caber em telas menores */
    }
    
    .btn-conexao:hover {
        transform: scale(1.05);
    }
    
    /* Quero section responsivo */
    section.quero .flex {
        flex-direction: column-reverse;
    }
    
    section.quero{
        background-image: url('../imagens/realidadevirtual4.png');
        background-size: cover;
        height: 100vh;
        background-position: center;
        background-repeat: no-repeat;
        padding: 40px 20px; /* Adicionado padding para evitar conteúdo colado nas bordas */
    }
    
    .quero .txt-quero h2 {
        font-size: 28px; /* Reduzido para melhor caber em telas menores */
        line-height: 32px;
        text-align: center;
        margin-bottom: 15px; /* Adicionada margem para melhor espaçamento */
        padding-top: 30%;
    }
    
    .quero .txt-quero h2 span {
        font-size: 30px; /* Reduzido para melhor caber em telas menores */
        text-align: center;
        padding: 0; /* Removido padding excessivo */
        display: block; /* Garantir que fique em uma linha separada */
    }
    
    .quero .txt-quero p{
        font-size: 15px; /* Reduzido para melhor caber em telas menores */
        text-align: center; /* Alinhado ao centro para consistência */
    }
    
    .img-quero {
        display: none; /* Ocultado completamente ao invés de só a imagem */
    }

    /* Sou section responsivo */
    section.sou h2{
        font-size: 28px; /* Reduzido para melhor caber em telas menores */
        text-align: center; /* Garantir alinhamento centralizado */
        margin-bottom: 20px; /* Espaçamento adequado */
    }
    
    section.sou .flex-sou {
        justify-content: center; /* Centralizar boxes */
        flex-wrap: wrap; /* Permitir que as caixas se reorganizem em telas menores */
        gap: 20px; /* Espaçamento entre boxes */
    }
    
    section.sou .sou-box {
        padding: 20px 15px; /* Padding mais consistente */
        width: 100%; /* Ocupar largura total em telas muito pequenas */
        max-width: 210px; /* Limitar tamanho máximo */
        height: auto; /* Altura automática baseada no conteúdo */
        min-height: 220px; /* Altura mínima para consistência */
        text-align: center;
        position: relative;
        z-index: 1;
        margin: 0 auto 15px; /* Centralizar e adicionar margem inferior */
    }
    
    section.sou .sou-box h3{
        font-size: 18px;
        text-align: center;
        margin-bottom: 10px; /* Espaçamento adequado */
    }
    
    section.sou .cta{
        padding: 25px 0;
    }
    
    /* Background da seção contato-faq */
    .contato-faq{
        background-image: url('../imagens/realidadevirtual6.png');
        background-size: cover; /* Garantir que a imagem cubra toda a área */
        background-position: center; /* Centralizar a imagem */
        /* Tornando a imagem de fundo fixa para melhor experiência em iOS */
        background-attachment: scroll; /* 'fixed' pode causar problemas em iOS */
        
        /* Assegurando que a seção tenha altura suficiente */
        min-height: 300px; /* Ajuste conforme a necessidade do seu design */
        
        /* Para garantir que o conteúdo tenha espaço suficiente */
        padding: 40px 20px;
    }
    
    /* ESTILO DO MENU MOBILE */
    .btn-abrir-menu{
        display: block;
    }

    .btn-abrir-menu i{
        color: #fba314;
        font-size: 35px; /* Reduzido ligeiramente */
        padding: 0 20px;
    }
    
    .menu-mobile{
        background-color: #023992; /* Alterado para azul para maior contraste com o texto */
        height: 100vh;
        position: fixed;
        top: 0;
        right: -22%;
        z-index: 99999;
        width: 0;
        overflow: hidden;
        transition: .5s;
    }
    
    .menu-mobile.abrir-menu{
        width: 70%;
    }

    .menu-mobile.abrir-menu ~ .overlay-menu{
        display: block;
    }

    .menu-mobile .btn-fechar{
        padding: 20px 5%;
        text-align: right; /* Alinhar o botão à direita */
    }
    
    .menu-mobile .btn-fechar i{
        color: #fff; /* Alterado para branco para maior visibilidade */
        font-size: 30px;
    }
    
    .menu-mobile nav ul{
        text-align: right;
    }
    
    .menu-mobile nav ul li a{
        color: #fff; /* Alterado para branco para contraste com o fundo azul */
        font-size: 18px;
        font-weight: 400;
        padding: 15px 8%;
        display: block;
        text-decoration: none;
    }
    
    .menu-mobile nav ul li a i{
        font-size: 22px; /* Reduzido ligeiramente */
        color: #fba314; /* Alterado para amarelo para maior visibilidade */
        margin-left: 10px; /* Espaçamento entre o texto e o ícone */
    }
    
    .menu-mobile nav ul li a:hover{
        background-color: #fba314; /* Alterado para amarelo */
        color: #023992; /* Texto azul ao passar o mouse */
    }
    
    .menu-mobile nav ul li a:hover i{
        color: #023992; /* Ícone azul ao passar o mouse */
    }
    
    .overlay-menu{
        background-color: rgba(0, 0, 0, 0.7); /* Escurecido para maior contraste */
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 88888;
        display: none;
    } 
    
    .bottom-footer p{
        font-size: 0.9rem; /* Ligeiramente reduzido */
        text-align: center; /* Centralizado para melhor visualização */
        padding: 15px 0; /* Espaçamento adequado */
    }
}

/* Para telas de exatamente 1110px - adicionado para cobrir esta lacuna */
@media screen and (width: 1110px) {
    /* Estilos específicos para telas de exatamente 1110px, se necessário */
    /* Isso evita problemas em telas dessa largura específica */
    .menu-mobile,
    .btn-abrir-menu {
        display: none;
    }
    
    .overlay-menu {
        display: none;
    }
}

/* Para telas maiores que 1110px */
@media screen and (min-width: 1111px) {
    /* Adicione aqui os estilos para todas as seções em telas grandes */
    .menu-mobile,
    .btn-abrir-menu {
        display: none !important;
    }
  
    .overlay-menu {
        display: none !important;
    }
    
    /* Definições específicas para desktop que complementam o CSS base */
    section.hero-site {
        background-size: cover;
        background-position: center;
    }
    
    .hero-site .botao-posicionado button {
        position: relative;
        /* Outros estilos para o botão em desktop */
    }
    
    .beneficios1 .itens-container {
        /* Configuração para layout horizontal em desktop */
        flex-direction: row;
    }
    
    /* Adicione estilos para outras seções conforme necessário */
}
/* Media query específico para dispositivos iOS (iPhone) */
@supports (-webkit-touch-callout: none) {
    .contato-faq {
        /* Correções específicas para iOS */
        background-attachment: scroll;
        
        /* URL alternativa usando caminho absoluto (se seu site estiver em produção) */
        background-image: url('../imagens/realidadevirtual6.png');
    }
}

/* Backup específico para iPhone 11 e dispositivos similares */
@media screen and (device-width: 414px) and (device-height: 896px),
       screen and (device-width: 375px) and (device-height: 812px) {
    .contato-faq {
        /* Tentativa adicional com caminho diferente */
        background-image: url('../imagens/realidadevirtual6.png'), 
                          url('../imagens/realidadevirtual6.png'),
                          url('../imagens/realidadevirtual6.png');
        
        /* Garantindo que tenha um fallback sólido */
        background-color: #023992;
    }
}
/* Correções gerais para dispositivos Android com telas maiores */
@media screen and (min-width: 360px) and (max-width: 900px) {
    /* Configurações para telas típicas de Android de alta qualidade */
    html, body {
        -webkit-text-size-adjust: 100%; /* Evita ajuste automático de texto */
        overflow-x: hidden; /* Previne scroll horizontal */
        width: 100%;
    }
    
    /* Corrigir possíveis problemas de overflow */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Assegurar que imagens se ajustem corretamente */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Melhorar a visualização de texto */
    p, h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word; /* Evita texto ultrapassando os limites */
    }
}

/* Específico para devices de alta densidade como Note 11 Pro */
@media screen and (min-width: 390px) and (max-width: 500px) and (-webkit-device-pixel-ratio: 3), 
       screen and (min-width: 390px) and (max-width: 500px) and (device-pixel-ratio: 3) {
    
    /* Hero section fixes */
    section.hero-site {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px 20px; /* Mais espaço lateral */
    }
    
    .hero-site .botao-posicionado button {
        width: 80%; /* Relativo ao container pai */
        max-width: 250px; /* Limite máximo */
        margin: 20px auto; /* Centralizar melhor */
    }
    
    /* Beneficios section fixes */
    .beneficios1 .itens-container {
        width: 90%; /* Evitar contato com as bordas */
        margin: 30px auto;
        padding: 25px 20px;
        gap: 25px;
    }
    
    .beneficios1 .icone-itens i {
        align-self: center; /* Centralizar ícones */
    }
    
    /* Quero section fixes */
    section.quero {
        padding: 30px 20px;
        background-attachment: scroll !important; /* Importante para Android */
    }
    
    .quero .txt-quero h2 {
        line-height: 1.3;
        margin-bottom: 20px;
    }
    
    .quero .txt-quero p {
        line-height: 1.5;
        margin-bottom: 15px;
    }
    
    /* Sou section fixes */
    section.sou .sou-box {
        width: 85%; /* Mais estreito para evitar problemas de layout */
        max-width: 200px;
        padding: 20px 15px;
        margin: 10px auto;
    }
    
    /* Menu mobile fixes para Note 11 Pro */
    .menu-mobile {
        width: 0;
        transition: all 0.3s ease-in-out;
    }
    
    .menu-mobile.abrir-menu {
        width: 80%; /* Um pouco mais largo para telas maiores */
    }
    
    .menu-mobile nav ul li a {
        padding: 16px 8%;
        font-size: 16px; /* Ligeiramente menor */
    }
}

/* Correções específicas para bugs visuais em navegadores baseados em Chromium (como os da Samsung) */
@supports (-webkit-appearance:none) {
    /* Botões e outros elementos interativos */
    button, .btn-conexao, .botao-posicionado button {
        -webkit-appearance: none; /* Remover estilo padrão */
        appearance: none;
        border-radius: 12px; /* Reforçar cantos arredondados */
    }
    
    /* Ajuste para transições mais suaves */
    .beneficios1 .itens-container, 
    .beneficios1 .icone-itens i,
    .btn-conexao,
    .menu-mobile {
        -webkit-backface-visibility: hidden; /* Ajuda na performance das animações */
        backface-visibility: hidden;
    }
    
    /* Correção para imagens de background */
    section.hero-site,
    section.quero,
    .contato-faq {
        background-position: center center;
        background-size: cover;
        -webkit-background-size: cover;
        background-attachment: scroll !important; /* Crucial para Android */
    }
}

/* Fix específico para problemas de posicionamento em Note 11 Pro */
@media screen and (min-width: 390px) and (max-width: 500px) and (min-height: 800px) {
    /* Ajuste para o menu quando aberto */
    .menu-mobile.abrir-menu {
        padding-top: 40px; /* Mais espaço no topo para acomodar o notch/cutout */
    }
    
    /* Ajustes para cabeçalho ficando cortado */
    header {
        padding-top: env(safe-area-inset-top, 20px); /* Usar áreas seguras quando disponíveis */
    }
    
    /* Garantir que o conteúdo de dúvidas frequentes fique visível */
    .contato-faq {
        padding-bottom: env(safe-area-inset-bottom, 40px);
    }
}

/* Código de teste para verificar o tipo de dispositivo (para debugging) */
.device-test::after {
    content: "Note 11 Pro / Android detectado";
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 9999;
}
/* Estilos gerais para dispositivos Xiaomi */
@media screen and (max-width: 1110px) {
    /* Forçar renderização de hardware para melhor performance */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* Prevenir comportamentos estranhos em elementos com transformações */
    * {
        transform-style: preserve-3d;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* Específico para Xiaomi Note 11 Pro e modelos similares */
@media screen and (min-width: 390px) and (max-width: 500px) and (min-resolution: 2dppx) {
    /* Performance para elementos animados */
    .beneficios1 .itens-container:hover,
    .btn-conexao:hover,
    .menu-mobile.abrir-menu {
        will-change: transform, opacity;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Correção para problema de "salto" em elementos com hover */
    .beneficios1 .itens-container {
        transform: translate3d(0, 0, 0);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .beneficios1 .itens-container:hover {
        transform: translate3d(0, -6px, 0);
    }

    /* Correção para seções com imagens de fundo */
    section.hero-site,
    section.quero,
    .contato-faq {
        /* Forçar uso de hardware acceleration para imagens de fundo */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        z-index: 1;
        
        /* Modo alternativo de background para MIUI browsers */
        background-attachment: scroll !important;
        -webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        background-size: 100% auto;
        background-position: center top;
    }
    
    /* Correções para botões no MIUI */
    button, 
    .btn-conexao, 
    .botao-posicionado button {
        -webkit-tap-highlight-color: transparent; /* Remover highlight no toque */
        outline: none;
        overflow: hidden; /* Corrigir problema com animações em botões */
    }
    
    /* Corrigir problema com menu móvel */
    .menu-mobile {
        /* Forçar hardware acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition: width 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition: width 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
}

/* Específico para resolução do Xiaomi Note 11 Pro */
@media screen and (width: 1080px) and (height: 2400px),  /* Note 11 Pro padrão */
       screen and (width: 1200px) and (height: 2640px),  /* Note 11 Pro+ ou variantes */
       screen and (width: 1080px) and (height: 2340px) { /* Outras variantes comuns */
    
    /* Correções para notch/punch-hole da câmera */
    header {
        padding-top: constant(safe-area-inset-top, 40px); /* iOS antigo */
        padding-top: env(safe-area-inset-top, 40px); /* iOS moderno e Android recente */
    }
    
    /* Corrigir problema com altura em telas altas */
    section.hero-site {
        height: calc(100vh - 60px); /* Subtrair altura do header */
        min-height: 500px; /* Altura mínima para evitar problemas */
    }
    
    /* Correção específica para MIUI dark mode */
    @media (prefers-color-scheme: dark) {
        body {
            color-scheme: light; /* Forçar esquema claro mesmo no modo escuro do MIUI */
        }
    }
}

/* Hack específico para problemas de renderização em navegadores MIUI */
@supports (-webkit-overflow-scrolling: touch) {
    /* Este bloco atingirá principalmente navegadores mobile WebKit, incluindo MIUI */
    
    /* Corrigir problemas de rolagem */
    html, body {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
    }
    
    /* Corrigir problemas com fontes */
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    /* Corrigir problema com a animação de rotação dos ícones */
    .beneficios1 .icone-itens i {
        transition: transform 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    
    /* Evitar problemas com cacheamento agressivo de imagens */
    section.hero-site,
    section.quero,
    .contato-faq {
        background-image: url('../imagens/realidadevirtual5.png'),
                          url('../imagens/realidadevirtual5.png');/* Hack para forçar recarregamento */
    }
}

/* ==== CORREÇÕES PARA ALINHAMENTO NO XIAOMI NOTE 11 PRO ==== */

/* Correções específicas para elementos que ficam desalinhados */
@media screen and (max-width: 500px) {
    /* Seção Benefícios ajustada para Xiaomi */
    section.beneficios1 .interface h2 {
        font-size: 26px; /* Ligeiramente menor */
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    /* Corrigir problema com elementos centralizados */
    .beneficios1 .itens-container {
        width: 90%; /* Um pouco menos que 100% para evitar overflow */
        padding: 30px 15px; /* Padding horizontal menor */
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Corrigir alinhamento dos textos */
    .itens-container .txt-itens h3,
    .itens-container .txt-itens p {
        text-align: center !important; /* Forçar centralização para MIUI */
        width: 100%;
    }
    
    /* Melhorar visualização dos ícones */
    .beneficios1 .icone-itens {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    /* Correção para a seção CTA */
    .cta {
        width: 90%;
        margin: 0 auto;
    }
}
/* Correções específicas para a seção "sou" no Xiaomi Note 11 Pro */
@media screen and (min-width: 390px) and (max-width: 500px) and (min-resolution: 2dppx) {
    /* Fix principal para a seção "Ja sou cliente" */
    section.sou {
        padding: 30px 15px;
        overflow: hidden; /* Prevenir overflow horizontal */
        width: 100%;
    }
    
    section.sou h2 {
        font-size: 26px;
        line-height: 1.3;
        text-align: center;
        margin-bottom: 25px;
        width: 100%;
    }
    
    /* Corrigindo o container flex */
    section.sou .flex-sou {
        display: flex;
        flex-direction: column; /* Força layout vertical em dispositivos pequenos */
        align-items: center;
        width: 100%;
        margin: 0 auto;
        gap: 20px;
    }
    
    /* Corrigindo as caixas individuais */
    section.sou .sou-box {
        width: 90%;
        max-width: 280px; /* Aumentado para comportar melhor o conteúdo */
        min-height: 200px; /* Altura mínima ajustada */
        margin: 0 auto 15px;
        padding: 25px 15px;
        
        /* Correções para renderização no MIUI */
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform;
        
        /* Melhorar aparência */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    section.sou .sou-box h3 {
        font-size: 18px;
        line-height: 1.4;
        text-align: center;
        width: 100%;
        margin-bottom: 15px;
    }
    
    section.sou .sou-box p {
        text-align: center;
        font-size: 15px;
        line-height: 1.5;
        width: 100%;
    }
    
    /* Correções para o CTA dentro da seção */
    section.sou .cta {
        width: 90%;
        margin: 30px auto 20px;
        padding: 0;
    }
    
    /* Correção para os botões */
    section.sou .btn-conexao {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 200px;
        max-width: 90%;
        margin: 10px auto;
        padding: 12px 24px;
        
        /* Correções para MIUI */
        -webkit-tap-highlight-color: transparent;
        transform: translateZ(0);
    }
}