/* Mantém os estilos desktop originais e aprimora a responsividade */

/* Estilos Base (originais) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

body {
    background-color: #010a1a;
    color: white;
    overflow-x: hidden; /* Previne scroll horizontal em dispositivos móveis */
}

/* Media Queries para dispositivos móveis e tablets */

/* Tablets (768px a 1024px) */
@media (max-width: 1024px) {
    /* Navegação */
    .navbar {
        padding: 15px 20px;
        gap: 30px;
    }

    .nav-links {
        gap: 15px;
    }

    /* Hero Section */
    .hero {
        height: 500px;
        padding: 0 30px;
    }

    .hero-title {
        font-size: 22px;
    }

    .subtitle {
        font-size: 20px;
    }

    /* Seções Gerais */
    .platform-section, 
    .features-section, 
    .gestao-habilidades-section,
    .diferenciais-section,
    .integracao-section,
    .ai-learning-section,
    .melhor-edtech-section,
    .testimonials-section,
    .blog-section,
    .clients-section {
        padding: 1px 30px;
    }

    .edtech-top-section {
        padding: 0px 0px;
    }    

    .clients-logos {
        max-width: 300px;
    }

    .see-more-btn {
        margin-bottom: 20px;

    }
    /* Ajustes de layout */
    .gestao-habilidades-container,
    .features-section,
    .diferenciais-container,
    .integracao-container,
    .ai-learning-container,
    .edtech-top-content,
    .testimonial-cards {
        flex-direction: column;
        gap: 40px;
    }


    /* Tamanhos de imagem */
    .features-image img,
    .gestao-habilidades-image img,
    .diferenciais-image img,
    .integracao-image img,
    .ai-learning-image img,
    .melhor-edtech-image img {
        max-width: 90%;
        margin: 0 auto;
        display: block;
        height: 70%;
    }

    /* Ajustes específicos */
    .platform-features {
        margin-bottom: 50px;
        text-align: center;
    }

    .edtech-person-image {
        width: 100%;
        height: 20%;
        background-color: #000038;

    }

    .edtech-text-content {
        width: 100%;
        padding: 40px 30px;
    }

    .awards-strip {
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        padding: 20px;
        position: relative;
        margin-top: 0;
        margin-left: 0;
    }

    .award-logo {
        height: 40px;
    }

    .blog-slider {
        padding: 0 30px;
    }
    
    .blog-articles {
        gap: 15px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .message-field {
        grid-column: 1;
        grid-row: auto;
    }
    
    .footer-top, 
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .address-container {
        flex-direction: column;
        gap: 20px;
    }

    /* Ajustes de texto */
    .section-title,
    .feature-title,
    .gestao-habilidades-title,
    .diferenciais-title,
    .integracao-title,
    .ai-learning-title,
    .diferenca-title,
    .edtech-title,
    .blog-title,
    .clients-title,
    .testimonials-title,
    .sobre-title {
        font-size: 28px !important;
        margin-bottom: 20px;
        text-align: center;
        margin-top: 50px;
    }

    .ai-learning-content,
    .sobre-card-text {
        max-width: 100%;
        margin: 5% 5%;
    }

    .sobre-image {
        position: relative;
        margin-left: 0;
        margin-top: 30px;
        text-align: center;
    }

    .person-image {
        width: 80%;
        max-width: 400px;
        margin: 0 auto;
    }

    /* AI Learning */
    .ai-learning-image {
        max-width: 100%;
        margin: 0 auto;
        border-radius: 0px;
        background-color: #00ffff;
    }
    
    .diferenciais-content,
    .sobre-content  {
        padding-left: 0;
        text-align: center;
    }

    .feature-content h3 {
        font-size: 14px;
        text-align: center;
    }
     
}

/* Smartphones (até 767px) */
@media (max-width: 767px) {
    /* Navegação */
    .navbar {
        padding: 15px 10px;
        flex-direction: column;
        gap: 15px;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .nav-links a {
        font-size: 14px;
    }

    .contato-btn {
        padding: 6px 15px;
        font-size: 14px;
    }

    /* Hero Section */
    .hero {
        height: 400px;
        padding: 0 20px;
        text-align: center;
        background-image: url('/site/imagens/vitrine/Vitrine-Mobile.png');
    }

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

    .hero-title {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .subtitle {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .bannerbuttons {
        top: 95vh;
    }

    /* Seções Gerais */
    .platform-section, 
    .features-section, 
    .gestao-habilidades-section,
    .diferenciais-section,
    .integracao-section,
    .diferenca-section,
    .melhor-edtech-section,
    .testimonials-section,
    .blog-section,
    .clients-section,
    .sobre-section {
        padding: 1px 15px;
    }

    .ai-learning-section {
        padding: 1px 0px;
    }

    .edtech-top-section{
        padding: 0px 0px;
    }

    /* Tamanhos de texto */
    .section-title,
    .feature-title,
    .gestao-habilidades-title,
    .diferenciais-title,
    .integracao-title,
    .ai-learning-title,
    .diferenca-title,
    .edtech-title,
    .blog-title,
    .clients-title,
    .testimonials-title,
    .sobre-title {
        font-size: 28px;
        margin-bottom: 15px;
        text-align: center;
        margin-top: 50px;
    }

    .platform-description,
    .gestao-habilidades-description,
    .diferencial-description,
    .ai-feature-description,
    .edtech-description,
    .blog-description,
    .clients-description,
    .testimonials-description,
    .sobre-paragraph {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Estruturas de grid e flex */
    .category-menu {
        gap: 10px;
        flex-wrap: wrap;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-left: 7px;
    }

    .feature-item,
    .diferencial-item,
    .ai-feature {
        margin-bottom: 20px;
    }
    
    .ai-feature-title,
    .diferencial-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    /* Call to action */
    .call-to-action-1,
    .call-to-action-2,
    .call-to-action-3 {
        flex-direction: column;
        gap: 20px;
        padding: 30px 15px;
    }

    .cta-text,
    .cta-text-2,
    .cta-text-3 {
        font-size: 18px;
        text-align: center;
    }

    .cta-button-1,
    .cta-button-2,
    .cta-button-3,
    .agendar-btn,
    .reuniao-btn {
        padding: 10px 20px;
        font-size: 16px;
            
    }

    /* Blog section */
    .blog-articles {
        flex-direction: column;
        gap: 20px;
    }

    .article-title {
        font-size: 16px;
        min-height: auto;
    }

    .article-image {
        height: 180px;
    }

    /* Testimonials */
    .testimonial-card {
        max-width: 100%;
        padding: 20px;
        margin-bottom: 20px;
    }

    .testimonial-text {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Clients */
    .clients-section {
        height: auto;
        padding-bottom: 40px;
        padding: 1px 10px;
    }

    .client-logo {
        height: 28px;
        margin-bottom: 20px;
        margin-right: 15px;
    }

    /* Edtech Top Section */
    .edtech-person-image {
        height: 20%;
    }

    .edtech-text-content {
        padding: 30px 20px;
    }

    .awards-strip {
        width: 100%;
        position: relative;
        padding: 15px 10px;
        margin-top: 0;
        margin-left: 0;       
    }

    .award-logo {
        height: 25px;
    }

    /* Bottom Section */
    .bottom-section {
        padding: 150px 15px 100px;
    }

    .bottom-title {
        font-size: 18px;
    }

    /* Sobre Section */
    .sobre-card {
        border-radius: 20px;
    }
    
    .sobre-card-text {
        padding: 20px;
        max-width: 100%;
    }

    .sobre-paragraph-b {
        font-size: 16px;
    }

    /* Footer */
    .footer {
        padding: 30px 15px;
    }

    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .footer-nav a {
        font-size: 14px;
    }

    .social-link {
        width: 35px;
        height: 35px;
    }

    .privacy-link {
        font-size: 12px;
        margin-right: 10px;
    }
    
    /* WhatsApp Button */
    .whatsapp-btn {
        width: 50px;
        height: 50px;
    }

    .diferenciais-content,
    .sobre-content  {
        padding-left: 0;
        text-align: center;
    }    

    .feature-content h3 {
        font-size: 14px;
        text-align: center;
    }    
}

/* Ajustes específicos para smartphones pequenos */
@media (max-width: 480px) {
    /* Navegação */
    .navbar {
        padding: 10px 5px;
    }
    
    .nav-links {
        gap: 8px;
    }
    
    .nav-links a {
        font-size: 12px;
    }
    
    /* Hero Section */
    .hero {
        height: 350px;
        background-image: url('/site/imagens/vitrine/Vitrine-Mobile.png');
    }
    
    .hero-title {
        font-size: 16px;
    }
    
    .subtitle {
        font-size: 14px;
    }
    
    /* Tamanhos de texto */
    .section-title,
    .feature-title,
    .gestao-habilidades-title,
    .diferenciais-title,
    .integracao-title,
    .ai-learning-title,
    .diferenca-title,
    .edtech-title,
    .blog-title,
    .clients-title,
    .testimonials-title,
    .sobre-title {
        font-size: 24px;
        text-align: center;
        margin-top: 50px;
    }
    
    /* Spacing */
    .feature-item,
    .diferencial-item,
    .ai-feature {
        margin-bottom: 15px;
    }
    
    /* Testimonials */
    .testimonial-author {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .author-avatar {
        margin-bottom: 10px;
    }
    
    /* Awards Strip */
    .awards-strip {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        max-width: 100%;       
        position: relative; 
        margin-top: 0;
        margin-left: 0;        
    }
    
    /* Footer */
    .address-block p {
        font-size: 13px;
    }

    .diferenciais-content,
    .sobre-content  {
        padding-left: 0;
        text-align: center;
    }    
}

/* Ajustes específicos para partes do layout que precisam de atenção especial */
@media (max-width: 767px) {
    /* Fixar o problema de sobreposição em sobre-section */
    .sobre-section {
        position: relative;
    }
    
    .sobre-container {
        flex-direction: column;
    }
    
    .sobre-card {
        z-index: 1;
    }
    
    .sobre-image {
        position: relative;
        z-index: 2;
        margin: 20px auto;
        text-align: center;
    }
    
    /* Ajuste para diferenciais-image-circle */
    .diferenciais-image-circle {
        justify-content: center;
    }
    
    /* Remover decorações que causam problemas em mobile */
    .decoration-x,
    .decoration-arrows,
    .decoration-lines-bottom,
    .decoration-waves,
    .decoration-lines {
        display: none;
    }
    
    /* Ajustar integracao-section */
    .integracao-circle {
        display: none;
    }
    
    .laptop-image {
        transform: none;
        margin: 0 auto;
    }
    
    /* Ajustar logos de integração */
    .integration-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        max-width: 90%;
        margin: 0 auto;
    }
    
    .logo-card {
        height: 80px;
        padding: 15px;
    }

    .diferenciais-content,
    .sobre-content  {
        padding-left: 0;
        text-align: center;
    }    
}

/* Ajustes específicos para tamanhos médios (entre 768px e 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Navegação */
    .nav-links {
        gap: 20px;
    }
    
    /* Layouts em grid/flex */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-left: 7px;
    }
    
    /* Sobre section */
    .sobre-card-text {
        max-width: 60%;
    }
    
    .sobre-image {
        margin-left: 50%;
    }
    
    /* AI Learning */
    .ai-learning-image {
        max-width: 100%;
        margin: 0 auto;
        border-radius: 0px;
        background-color: #00ffff;
    }

    .diferenciais-content,
    .sobre-content  {
        padding-left: 0;
        text-align: center;
    }    
}

/* Ajustes para o WhatsApp button em todos dispositivos */
@media (max-width: 1024px) {
    .whatsapp-btn {
        bottom: 15px;
        right: 15px;
        z-index: 9999;
    }
}

/* Ajustar phone-input-group para todos dispositivos */
@media (max-width: 1024px) {
    .phone-input-group {
        margin-bottom: 40px !important;
    }
}

@media (max-width: 767px) {
    .phone-input-group {
        margin-bottom: 30px !important;
    }
}