/* =========================================
   1. TABLET & TELAS MÉDIAS (até 992px)
========================================= */
@media (max-width: 992px) {
    /* Globais */
    .hero-title {
        font-size: 3.5rem;
        letter-spacing: 0.4rem;
    }

    /* Home */
    .home-sobre-grid {
        grid-template-columns: 1fr;
    }
    .caixa-sobreposta {
        width: 90%;
    }
    .cards-solucoes {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sobre Nós */
    .valores-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================
   2. CELULAR / MOBILE (até 768px)
========================================= */
@media (max-width: 768px) {
    
    /* --- GLOBAIS --- */
    .section-title {
        font-size: 2.2rem;
    }

    /* --- HEADER & MENU MOBILE --- */
    .header .btn-whatsapp {
        display: none; 
    }

    /* Estilo do botão Hambúrguer */
    .mobile-menu-icon {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .mobile-menu-icon span {
        width: 28px;
        height: 3px;
        background-color: var(--color-dark-1);
        border-radius: 2px;
        transition: var(--transition-fast);
    }

    /* Animação do ícone Hambúrguer virando um "X" */
    .mobile-menu-icon.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .mobile-menu-icon.active span:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-icon.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Comportamento da gaveta do Menu Mobile */
    .nav {
        display: block;
        position: absolute;
        top: 80px;
        left: -100%;
        width: 100%;
        background-color: var(--color-white-2);
        box-shadow: 0 10px 10px rgba(0,0,0,0.05);
        transition: left 0.3s ease;
    }

    .nav.active {
        left: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 20px 0;
    }

    .nav-list li {
        text-align: center;
    }

    .nav-list a {
        display: block;
        padding: 15px;
        font-size: 1.2rem;
    }

    /* --- HOME --- */
    .hero-title {
        font-size: 2.5rem;
        letter-spacing: 0.2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        padding: 0 15px;
    }

    .cards-solucoes {
        grid-template-columns: 1fr;
    }

    /* --- SOBRE NÓS --- */
    .sobre-box {
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
    }
    
    .valores-grid {
        grid-template-columns: 1fr;
    }
    .instagram-feed { 
        flex-wrap: wrap; 
    }
    .insta-item { 
        flex: 0 0 50%; 
    }

    /* --- SERVIÇOS & CARROSSEL --- */
    .hero-servicos {
        min-height: 50vh;
    }
    
    .servico-item, 
    .servico-item.reverse {
        flex-direction: column;
        gap: 2rem;
    }
    
    .servico-texto h3 {
        font-size: 1.5rem;
    }

    .carrossel-slide { 
        width: 80%; 
    }
    .slide-prev { 
        transform: translateX(-20%) scale(0.85); 
        opacity: 0; 
        pointer-events: none; 
    }
    .slide-next { 
        transform: translateX(20%) scale(0.85); 
        opacity: 0; 
        pointer-events: none; 
    }
    .prev-btn { left: 0; }
    .next-btn { right: 0; }

    /* --- CONTATO --- */
    .contato-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contato-imagem-bottom {
        margin-top: 2rem;
    }

    .contato-imagem-bottom {
        margin-top: 2rem;
    }
    .contato-imagem-bottom img {
        width: 100%;
        height: 250px;
    }

    /* --- Por que escolher ALLBEC --- */
    .why-columns {
        flex-direction: column;
        gap: 2rem;
    }

    .follow-container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* --- FOOTER --- */
    .footer-grid {
        flex-direction: column;
        align-items: flex-start;
    }

    /* --- WHATSAPP FLUTUANTE --- */
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    
    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }

    /* Toast Mobile */
    .toast-container {
        top: 20px;
        right: 50%;
        transform: translateX(50%);
        width: 90%;
    }
    .toast {
        transform: translateY(-100%);
        text-align: center;
    }
    .toast.show {
        transform: translateY(0);
    }
}