/* ==========================================================================
   BLOCO ÚNICO DE ESTILOS RESPONSIVOS PARA MOBILE E TABLET
   ========================================================================== */

/* Correção para evitar rolagem horizontal em todas as telas */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

@media (max-width: 1024px) {
    /* --- AJUSTES GERAIS --- */
    .section-header h2 {
        font-size: 2rem;
    }

    .hero-section {
        padding-top: 10rem;
        min-height: auto;
        height: auto;
        align-items: flex-start;
        width: 100% !important;
        overflow: hidden !important;
    }

    .hero-content {
        width: 100%;
        padding: 2rem;
        text-align: center;
        margin-top: 1rem;
        background-color: rgba(44, 62, 80, 0.5);
    }

    .hero-content h2 {
        font-size: 2.2rem;
        line-height: 1.3;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- HEADER --- */
    .header {
        padding: 0.5rem 0 !important;
        z-index: 1050 !important; /* Garante que o header fique acima do menu */
        width: 100% !important;
    }

    .header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 70px !important; /* Altura fixa para consistência */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .header .logo img {
        height: 50px !important;
    }

    .header-cta {
        display: flex !important;
        align-items: center !important;
        gap: 2rem !important; /* Aumentado para 2rem para dar mais espaço entre os botões */
    }

    .header-cta .btn-primary {
        display: none !important; /* Esconde o botão "Agendar" no mobile */
    }
    
    .header-cta .btn-login {
        padding: 0.6rem 1rem !important;
        font-size: 0.8rem !important;
        margin-right: 1rem !important; /* Aumentado para 1rem para dar mais espaço entre o botão e o menu hambúrguer */
    }

    /* --- BOTÃO HAMBÚRGUER (MENU TOGGLE) --- */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 18px !important; /* Reduzido para 18px */
        height: 14px !important; /* Reduzido para 14px */
        z-index: 1051 !important; /* Acima do header e do menu */
        position: relative !important;
    }

    .mobile-menu-toggle .bar {
        display: block !important;
        width: 100% !important;
        height: 2px !important; /* Barra mais fina */
        background-color: var(--azul-profissional) !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }

    /* Animação para o "X" quando o menu está aberto - Ajustada para o novo tamanho */
    body.mobile-menu-open .mobile-menu-toggle .bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }
    body.mobile-menu-open .mobile-menu-toggle .bar:nth-child(2) {
        opacity: 0 !important;
    }
    body.mobile-menu-open .mobile-menu-toggle .bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    /* --- PAINEL DO MENU LATERAL --- */
    .main-menu {
        position: fixed !important;
        top: 86px !important; /* Altura do header (70px) + um pequeno espaço */
        left: -110% !important; /* Começa totalmente fora da tela */
        width: 75% !important; /* Mais estreito para minimalismo */
        max-width: 280px !important; /* Reduzido para minimalismo */
        height: auto !important; /* Altura automática - remove o espaço em branco */
        max-height: calc(100vh - 86px) !important; /* Altura máxima para não ultrapassar a tela */
        background-color: var(--branco) !important;
        z-index: 1040 !important; /* Abaixo do header */
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08) !important; /* Sombra mais sutil */
        transition: left 0.35s cubic-bezier(0.23, 1, 0.32, 1) !important;
        overflow-y: auto !important;
        padding: 0.5rem 0 !important; /* Padding minimalista */
        transform: none !important; /* Reseta transformações anteriores */
        flex-direction: column !important;
        display: flex !important;
    }

    .main-menu.active {
        left: 0 !important; /* Desliza para dentro da tela */
    }

    body.mobile-menu-open {
        overflow: hidden !important; /* Trava o scroll do corpo da página */
    }

    /* --- ITENS DO MENU LATERAL --- */
    .main-menu ul {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important; /* Remove margens */
        padding: 0 !important; /* Remove padding */
        display: flex !important;
    }

    .main-menu li {
        margin: 0 !important;
        width: 100% !important;
        border-bottom: 1px solid #f8f9fa !important; /* Linha mais sutil */
    }
    
    .main-menu li:hover {
        background-color: #f8f9fa !important; /* Hover sutil */
    }
    
    .main-menu a:hover {
        color: var(--laranja-suave) !important; /* Cor de hover mais elegante */
        background-color: rgba(243, 156, 18, 0.05) !important; /* Fundo hover muito sutil */
    }
    
    .main-menu li:last-child {
        border-bottom: none !important;
    }

    .main-menu a {
        display: block !important;
        padding: 0.75rem 1.2rem !important; /* Padding reduzido */
        width: 100% !important;
        font-weight: 400 !important; /* Peso mais leve para minimalismo */
        font-size: 0.9rem !important; /* Texto menor */
        color: var(--azul-profissional) !important;
        transition: color 0.2s ease, background-color 0.2s ease !important;
    }
    
    .main-menu a::after {
        display: none !important; /* Remove o sublinhado animado no mobile */
    }

    /* --- SUBMENUS NO MOBILE --- */
    .main-menu .has-submenu > a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .main-menu .has-submenu > a i {
        font-size: 0.7rem !important; /* Ícone menor */
        transition: transform 0.3s ease !important;
        color: #6c757d !important; /* Cor mais sutil */
    }
    
    .main-menu .has-submenu.active > a i {
        transform: rotate(180deg) !important;
    }

    .main-menu .submenu {
        position: static !important;
        display: none !important; /* Escondido por padrão */
        width: 100% !important;
        background-color: #fdfdfd !important; /* Fundo ainda mais sutil */
        box-shadow: none !important;
        border-radius: 0 !important;
        border-top: 1px solid #f0f0f0 !important;
        padding: 0.25rem 0 !important; /* Padding ainda mais reduzido */
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 0 !important; /* Remove margens */
    }

    .main-menu .has-submenu.active .submenu {
        display: block !important; /* Mostra o submenu quando o pai está ativo */
    }
    
    .main-menu .submenu li {
        border: none !important;
        margin: 0 !important;
    }

    .main-menu .submenu a {
        font-size: 0.8rem !important; /* Ainda menor para subitens */
        font-weight: 300 !important; /* Ainda mais leve */
        padding: 0.6rem 2rem !important; /* Padding reduzido */
        color: #6c757d !important; /* Cor mais sutil */
    }

    /* --- OCULTAR BREADCRUMBS EM TODAS AS PÁGINAS --- */
    .breadcrumbs-container {
        display: none !important;
    }

    /* --- CARROSSEL DEPOIMENTOS --- */
    /* CSS removido - implementação agora está no styles.css otimizado */

    /* --- CORREÇÕES PARA EVITAR ROLAGEM HORIZONTAL --- */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    .hero-image-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .services-cards, 
    .about-mission-vision-values,
    .steps-timeline,
    .testimonials-carousel-wrapper,
    .blog-cards,
    .footer-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* --- AJUSTES DO FOOTER PARA TODAS AS PÁGINAS --- */
    .footer-content {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colunas em telas médias */
        gap: 2rem !important;
    }

    .footer-column {
        width: 100% !important;
        text-align: left !important; /* Garantir alinhamento à esquerda em todas as páginas */
    }

    /* Ajuste de fonte para evitar texto cortado */
    .footer-column p, 
    .footer-column li, 
    .footer-column a, 
    .contact-info li {
        font-size: 0.9rem !important;
        word-break: break-word !important;
    }

    .footer-column h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.8rem !important;
    }

    /* Garantir que o footer do blog tenha o mesmo estilo */
    .footer .container,
    .footer .footer-content,
    .footer .footer-column {
        box-sizing: border-box !important;
    }

    .footer .social-icons {
        justify-content: flex-start !important;
    }

    .footer .contact-info li {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .footer-bottom .container {
        flex-direction: row !important;
        justify-content: space-between !important;
        text-align: left !important;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: row !important;
    }

    .footer-bottom {
        flex-direction: row !important;
        text-align: left !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    /* Garantir que elementos não causem rolagem horizontal */
    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Breakpoint específico para Samsung Galaxy S8+ e dispositivos similares (360px-414px) */
@media (max-width: 414px) and (min-width: 360px) {
    .hero-content h2 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
        -moz-hyphens: none !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .hero-content h2 span {
        word-break: keep-all !important;
        display: inline !important;
    }
    
    .hero-content {
        padding: 2rem 0.5rem !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Reduzir ainda mais o tamanho da fonte no footer */
    .footer-column p, 
    .footer-column li, 
    .footer-column a, 
    .contact-info li {
        font-size: 0.8rem !important;
    }

    .footer-column h3 {
        font-size: 1rem !important;
    }

    /* Manter o layout de 2 colunas mesmo em telas muito pequenas */
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Ajustar o tamanho do email para evitar corte */
    .contact-info li i {
        font-size: 0.8rem !important;
        width: 15px !important;
        margin-right: 5px !important;
    }

    .footer-bottom {
        font-size: 0.75rem !important;
    }

    .footer-links a {
        margin-left: 0.5rem !important;
    }
}