/* ------------------------------------------------ RESPONSIVO -------------------------------------------------------- */

@media (max-width: 992px) {
    .container,
    .container-nav {
        padding: 0 1.5rem;
    }

    h1 {
        font-size: 2.8rem;
    }

    h2 {
        font-size: 2.2rem;
    }
    .cards-nexus .drone-icon {
    width: 8vh;
    height: 8vh;
}
}

@media (max-width: 992px) {

    .cards-container {
        grid-template-columns: 1fr; /* Força 1 coluna */
        padding: 0 1.5rem; /* Adiciona espaçamento lateral */
    }
    .nav-links {
        display: none;
    }
    .menu-hamburguer {
        display: flex;
    }
    #nav-links-container {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(18, 18, 18, 0.98);
        backdrop-filter: blur(5px);
        justify-content: center;
        align-items: center;
    }
    #nav-links-container.ativo {
        display: flex;
    }
    #nav-links-container .nav-links {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    #hero h1 {
        font-size: 2.5rem;
    }
    #hero p {
        font-size: 1.1rem;
    }
    .servicos-container {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .servico-card {
        width: 80%;
        max-width: 400px;
        height: auto;
    }
    .dev-card img {
        width: 100%;
        height: auto;
    }
    .projeto-card .logo-bate-ponto {
        width: 100%;
        padding: 2rem;
    }
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .contato-info ul li {
        justify-content: center;
    }
    .cards-nexus .drone-icon {
    width: 8vh;
    height: 8vh;
}
}

@media (max-width: 576px) {
    .nav-links {
        flex-direction: column;
        gap: 1.5rem;
    }
    .nav-links li {
        margin: 0;
    }
    .nav-links .contact-button {
        padding: 0.8rem 1.5rem;
    }
    #hero {
        padding-top: 220px;
    }
    .cards-container {
        padding: 0 1rem;
    }
    form {
        padding: 0 1rem;
    }
    .cards-nexus .drone-icon {
    width: 7vh;
    height: 7vh;
}
}

@media (max-width: 992px) {
    .scroller {
        -webkit-mask: none;
        mask: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .scroller::-webkit-scrollbar {
        display: none;
    }
    .scroller {
        scrollbar-width: none;
    }
}

/* --- REGRAS PARA TELAS MÓVEIS (Até 768px) --- */
        @media (max-width: 992px) {

        .tech-description-box {
            /* Isto força o card a ter no máximo 90% da largura da tela.
            Como "margin-left" e "margin-right" já são "auto" na 
            regra principal, o card de 90% vai se centralizar, 
            criando margens de 5% em cada lado.
            */
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }
            
            #interactive-showcase {
            height: auto; /* Remove a altura fixa de 400vh */
            padding-top: 4rem; /* Mantém o padding da seção */
            padding-bottom: 2rem;
        }

        .showcase-sticky-wrapper {
            position: relative; /* Desativa o "sticky" */
            height: auto; /* Altura automática */
            overflow: visible;
        }

        /* Esconde o modelo 3D, os hotspots e o subtítulo no mobile */
        #interactive-showcase .showcase-stage,
        #interactive-showcase .subtitulo-showcase,
        .hotspot {
            display: none; /* Esconde todos os elementos da animação */
        }

        /* Estiliza os painéis de projeto como cards empilhados */
        .project-details-panel {
            position: relative; /* Tira do layout absoluto */
            opacity: 1; /* Garante que esteja visível */
            visibility: visible;
            transform: none; /* Reseta qualquer transformação */
            
            /* Reseta o posicionamento */
            top: auto;
            left: auto;
            right: auto;
            bottom: auto;

            /* Estilo de card */
            width: 90%;
            max-width: 450px;
            margin: 0 auto 2rem auto; /* Centraliza e adiciona margem inferior */
            padding: 1.5rem; 
        }

        /* Esconde o botão "Voltar" */
        .project-details-panel .close-details-btn {
            display: none;
        }

        /* Estiliza as logos dentro dos cards */
        .project-details-panel img {
            width: 100%;       
            height: auto;      
            max-width: 300px;  /* Limite para a logo */
            object-fit: contain;
            margin: 0 auto;
            display: block;
        }

        /* Remove regras de zoom desnecessárias */
        .showcase-stage.zoom-eniac,
        .showcase-stage.zoom-solumatch,
        .showcase-stage.zoom-bateponto {
            transform: none;
        }
        }

        /* --- CORREÇÃO PARA LAPTOPS PEQUENOS E TABLETS (SERVIÇOS) --- */
@media (max-width: 1050px) {
    
    /* Faz os cartões de serviço empilharem,
       igual ao layout de celular */
    .servicos-container {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .servico-card {
        width: 80%; /* Usa porcentagem em vez de vw */
        max-width: 400px;
        height: auto; /* Desliga a altura 'vh' */
    }

    .cards-nexus .drone-icon {
    width: 6.5vh;
    height: 6.5vh;
}
}

@media (max-height: 720px) {
    .cards-nexus .drone-icon {
    width: 9vh;
    height: 9vh;
}
}

/* ======================================================== */
/* FIX: AJUSTES PARA MODO PAISAGEM (CELULAR DEITADO)      */
/* ======================================================== */
@media (max-height: 500px) and (orientation: landscape) {

    /* Reduz o tamanho do título principal */
    #hero h1 {
        font-size: 2.2rem; /* Tamanho menor para caber na altura */
    }

    /* Ajusta a seção hero para não ocupar 100% da altura */
    #hero {
        min-height: auto; /* Remove o min-height de 100vh */
        padding-top: 8rem; /* Adiciona espaço do topo */
        padding-bottom: 8rem; /* Adiciona espaço embaixo */
    }

    /* Esconde o menu de desktop e força o hamburguer */
    /* 1. Esconde os links de desktop originais (se ainda não estiver) */
.nav-links {
    display: none;
}

.menu-hamburguer {
        display: flex;
    }

/* 2. Transforma o container em um overlay de tela cheia
      (copiado do seu @media (max-width: 768px))
      Ele começa escondido.
*/
#nav-links-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(5px);
    justify-content: center; /* Centraliza a lista <ul> */
    align-items: center;   /* Centraliza a lista <ul> */
}

/* 3. Quando .ativo é adicionado, o overlay aparece */
#nav-links-container.ativo {
    display: flex;
}

/* 4. Garante que os links DENTRO do overlay apareçam
      e fiquem em coluna
*/
#nav-links-container.ativo .nav-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

    .cards-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    #interactive-showcase {
    height: auto; /* Remove a altura fixa de 400vh */
    padding-top: 4rem; /* Mantém o padding da seção */
    padding-bottom: 2rem;
}

.showcase-sticky-wrapper {
    position: relative; /* Desativa o "sticky" */
    height: auto; /* Altura automática */
    overflow: visible;
}

/* Esconde o modelo 3D, os hotspots e o subtítulo */
#interactive-showcase .showcase-stage,
#interactive-showcase .subtitulo-showcase,
.hotspot {
    display: none; 
}

/* Estiliza os painéis de projeto como cards empilhados */
.project-details-panel {
    position: relative; 
    opacity: 1; 
    visibility: visible;
    transform: none; 
    
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;

    width: 90%;
    max-width: 450px;
    margin: 0 auto 2rem auto; 
    padding: 1.5rem; 
}

/* Esconde o botão "Voltar" */
.project-details-panel .close-details-btn {
    display: none;
}

/* Estiliza as logos dentro dos cards */
.project-details-panel img {
    width: 100%;       
    height: auto;      
    max-width: 300px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Remove regras de zoom desnecessárias */
.showcase-stage.zoom-eniac,
.showcase-stage.zoom-solumatch,
.showcase-stage.zoom-bateponto {
    transform: none;
}

.cards-nexus .drone-icon {
    width: 17vh;
    height: 17vh;
}

.tech-description-box {
    /* Abordagem forçada:
      Define a largura como 90% e as margens laterais como 5% cada.
      Isso substitui o 'margin-left: auto' e 'margin-right: auto'
      da regra base e força o espaçamento de 5% em cada lado.
    */
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

/* 1. Define o tamanho do logo */
#logo-7dev {
  width: 25vh; 
  height: auto;
}

.footer-content {
    /* Força o grid a ter apenas 1 coluna */
    grid-template-columns: 1fr;
    text-align: center;
}

.contato-info ul li {
    /* Centraliza os ícones e textos de contato */
    justify-content: center;
}
}

@media (min-width: 993px) and (max-width: 1050px) {

    .cards-container {
        /* Força o grid a ter 2 colunas */
        grid-template-columns: repeat(2, 1fr);

        /* Adiciona um espaçamento lateral para não colar na borda */
        padding: 0 1.5rem; 
    }

}

@media (min-width: 769px) and (max-width: 992px) {

    /* Reseta o tamanho dos ícones do Nexus para o padrão (desktop) */
    .cards-nexus i {
        font-size: 40px;
    }
    .cards-nexus .drone-icon {
        width: 70px;
        height: 70px;
    }

}

@media (max-width: 1024px) {
    .cards-nexus .drone-icon {
    width: 70px;
    height: 70px;
}

    .hotspot[data-target="eniac"] {
        top: 16%;  /* <-- Novo valor (teste) */
        left: 32%; /* <-- Novo valor (teste) */
    }

    .hotspot[data-target="solumatch"] {
        top: 68%;  /* <-- Novo valor (teste) */
        left: 70%; /* <-- Novo valor (teste) */
    }

    .hotspot[data-target="bateponto"] {
        top: 105%; /* <-- Novo valor (teste) */
        left: 45%; /* <-- Novo valor (teste) */
    }

    /* ESTADOS DE ZOOM (Seus estilos originais - mantidos) */
    .showcase-stage.zoom-eniac {
        transform: scale(3) translate(19%, 40%);
    }
    .showcase-stage.zoom-solumatch {
        transform: scale(3) translate(-15%, -5%);
    }
    .showcase-stage.zoom-bateponto {
        transform: scale(3.5) translate(7%, -37%);
    }
}

@media (max-width: 1024px) {
    
    .hotspot[data-target="eniac"] {
        top: 23%;  /* <-- Novo valor (teste) */
        left: 45%; /* <-- Novo valor (teste) */
    }

    .hotspot[data-target="solumatch"] {
        top: 68%;  /* <-- Novo valor (teste) */
        left: 67%; /* <-- Novo valor (teste) */
    }

    .hotspot[data-target="bateponto"] {
        top: 105%; /* <-- Novo valor (teste) */
        left: 50%; /* <-- Novo valor (teste) */
    }

    /* ESTADOS DE ZOOM (Seus estilos originais - mantidos) */
    .showcase-stage.zoom-eniac {
        transform: scale(3) translate(7%, 40%);
    }
    .showcase-stage.zoom-solumatch {
        transform: scale(3) translate(-15%, -5%);
    }
    .showcase-stage.zoom-bateponto {
        transform: scale(3.5) translate(1%, -45%);
    }
}

@media (min-width: 1051px) and (max-width: 1200px) {

    .cards-container {
        /* Força o grid a ter 2 colunas */
        grid-template-columns: repeat(2, 1fr);

        /* Adiciona um espaçamento lateral para não colar na borda */
        padding: 0 1.5rem; 
    }
    .cards-nexus .drone-icon {
    width: 75px;
    height: 75px;
}

.hotspot[data-target="eniac"] {
        top: 21%;  /* <-- Novo valor (teste) */
        left: 44%; /* <-- Novo valor (teste) */
    }

    .hotspot[data-target="solumatch"] {
        top: 68%;  /* <-- Novo valor (teste) */
        left: 65%; /* <-- Novo valor (teste) */
    }

    .hotspot[data-target="bateponto"] {
        top: 105%; /* <-- Novo valor (teste) */
        left: 50%; /* <-- Novo valor (teste) */
    }
}