/* 
    Mobile & Tablet Specific Styles - Adapta One
    Agência Taruga - www.agenciataruga.com
    Leandro Oliveira Nunes - leandro@agenciataruga.com
*/

/* Oculta flags mobile por padrão */
.mobile-only {
    display: none !important;
}

@media (max-width: 1024px) {

    /* Navbar & Menu */
    body .site-header .nav {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #fff;
        z-index: 999;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    body .site-header .nav .mobile-menu-logo {
        display: block;
        width: 200px;
        height: auto;
        margin-bottom: 40px;
    }

    body .site-header .nav.open {
        display: flex;
    }

    body .site-header .menu-toggle {
        display: block !important;
        z-index: 1000;
    }

    /* Hambúrguer Animation */
    body .site-header .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    body .site-header .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    body .site-header .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Visibilidade Condicional de Idiomas */
    body .desktop-only {
        display: none !important;
    }

    body .mobile-only {
        display: flex !important;
        gap: 15px !important;
        margin-top: 20px !important;
        padding-top: 20px !important;
        border-top: 1px solid #eee !important;
        width: 80% !important;
        justify-content: center !important;
    }

    body .mobile-only .lang-btn img {
        width: 35px !important;
        height: auto !important;
    }

    /* Hero Section */
    body .hero {
        padding-top: 100px !important;
        min-height: auto !important;
    }

    body .hero-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    body .hero-text h1 {
        font-size: 1.8rem !important;
    }

    body .hero-main-image {
        max-width: 400px !important;
        margin: 20px auto !important;
    }

    /* Sessão Sobre - Padding */
    body #sobre {
        padding-top: 40px !important;
    }

    /* Vídeo - Centralização Play */
    body .about-video-wrapper {
        min-height: 250px !important;
        position: relative !important;
        background: #000 !important;
        border-radius: 15px !important;
    }

    body .video-play-button {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }

    /* Slider Fix */
    body .platform-slider {
        position: relative !important;
        padding: 0 40px !important;
    }

    body .slider-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body .slider-arrow.prev {
        left: 0 !important;
    }

    body .slider-arrow.next {
        right: 0 !important;
        transform: translateY(-50%) rotate(180deg) !important;
    }

    /* Benefícios Fix - Removendo elementos que causam sobreposição */
    body .redBenefits {
        font-size: 1.5rem !important;
        text-align: center !important;
        z-index: 10 !important;
        position: relative !important;
    }

    body .redBenefits p {
        display: inline !important;
    }

    /* Esconde elementos decorativos que quebram o mobile/tablet */
    body .logo3,
    body .image4,
    body .image5,
    body .image6,
    body .background3,
    /* Faixa vermelha que atravessa o texto na plataforma */
    body .section-mark,
    body .hero-overlay-circle,
    body .benefits-side-art {
        display: none !important;
    }

    body .benefits-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px !important;
        background: #f9f9f9 !important;
        border-radius: 20px !important;
        margin-top: 20px !important;
    }

    body .benefits-list {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 15px !important;
    }

    body .benefit-item {
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 10px !important;
    }

    body .benefit-item img {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 1001px) {

    /* RESET GERAL DE FLUXO */
    body .hero-main-image {
        max-width: 700px !important;
    }

    body .hero-text {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    body .hero-text h1 {
        width: 100% !important;
    }

    /* SEÇÃO SOBRE - CORREÇÃO RADICAL (Imagem 1) */
    body #sobre .about-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        align-items: center !important;
    }

    body .about-text {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important;
        text-align: center !important;
    }

    body .about-text p {
        margin: 0 0 15px 0 !important;
        font-size: 1.15rem !important;
        line-height: 1.6 !important;
    }

    /* Ocultando diagrama complexo que quebra no mobile */
    body .about-diagram,
    body .icones,
    body .insumos,
    body .fornecedor,
    body .manufatura,
    body .consumidor,
    body .cliente,
    body .distribuicao {
        display: none !important;
        position: static !important;
        margin: 0 !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
    }

    body .about-banner {
        width: 100% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
        position: static !important;
        font-size: 1.1rem !important;
        padding: 15px !important;
        left: auto !important;
        line-height: 1.4 !important;
        display: block !important;
    }

    /* VÍDEO E SLIDER - CORREÇÃO DE FLUTUAÇÃO (Imagem 2) */
    body .video-section {
        margin: 40px 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    body .about-video-wrapper {
        min-height: auto !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }

    body .video-play-button {
        width: 80px !important;
        height: 80px !important;
        background: #fff !important;
        border: none !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }

    body .platform {
        margin-top: 40px !important;
    }

    /* BENEFÍCIOS - LIMPEZA TOTAL (Imagem 3) */
    body #beneficios .section-heading.left .redBenefits p {
        margin: 10px 0 0 0 !important;
        font-size: 1.8rem !important;
        /*display: block !important;*/
        text-align: center !important;
        width: 100% !important;
        position: static !important;
    }

    body #beneficios .logo3,
    body #beneficios .benefits-side-art,
    body #beneficios .image5 {
        display: none !important;
    }

    body .benefits-box {
        margin-top: 20px !important;
        padding: 20px !important;
        display: block !important;
        background: #f4f4f4 !important;
    }

    body .benefits-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    body .benefit-item {
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }

    /* EXPERTISE - QUEBRA DE TEXTO (Imagem 4) */
    body #expertise .section-heading {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
        margin-bottom: 30px !important;
    }

    body #expertise .section-heading h2 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 10px !important;
    }

    body #expertise .section-heading p {
        font-size: 1rem !important;
        margin: 0 !important;
        padding: 0 10px !important;
        line-height: 1.4 !important;
    }

    body #expertise .cards-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important;
    }

    body .service-card {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    body .service-card h3 {
        width: 100% !important;
        margin: 0 !important;
        padding: 40px 20px !important;
        font-size: 1.2rem !important;
        box-sizing: border-box !important;
    }

    body .service-card .card-body,
    body .service-card .card-body-primary,
    body .service-card .card-body-blue {
        padding: 20px !important;
        height: auto !important;
    }

    .platform-grid {
        margin-top: 60px;
    }
}

/* Ajustes finos para Mobile real */
@media (max-width: 768px) {
    body .hero-text h1 {
        font-size: 1.5rem !important;
    }

    body .site-header .brand-image {
        width: 150px !important;
    }
}

@media (max-width: 1001px) {
    .platform-text {
        margin-top: 0
    }
}

@media screen and (max-width: 763px) {

    /* 4. Seção Contato: NUCLEAR RESET */
    #contato {
        padding: 50px 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        background-size: cover !important;
    }

    #contato .contact-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        width: 100% !important;
        position: static !important;
        margin-top: 0;
        margin-bottom: 0;
    }

    #contato div,
    #contato form,
    #contato p {
        position: static !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    #contato .contact-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 15px !important;
    }

    #contato .contact-form input,
    #contato .contact-form textarea {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #fff !important;
        padding: 15px !important;
        border-radius: 8px !important;
    }

    #contato .btn-full {
        height: 55px !important;
        background: var(--red) !important;
        margin-top: 10px !important;
        align-self: center !important;
        /* Centraliza no flex column */
        margin-inline: auto !important;
        min-width: 200px !important;
        /* Tamanho mínimo para não ficar muito pequeno */
    }


    #contato .logo5 {
        width: 130px !important;
        margin: 15px auto 10px !important;
        display: block !important;
    }

    #contato .contact-tag {
        font-size: 0.75rem !important;
        text-align: center !important;
        max-width: 260px !important;
        margin: 0 auto 20px !important;
        line-height: 1.3 !important;
    }

    /* Redimensionando Links de Contato */
    #contato .contact-links {
        gap: 6px !important;
        align-items: center !important;
        margin-bottom: 15px !important;
    }

    #contato .contact-links p,
    #contato .contact-links a {
        font-size: 0.95rem !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    #contato .contact-links span {
        font-size: 1rem !important;
    }

    /* Redimensionando Ícones Sociais Exagerados */
    #contato .socials {
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 15px !important;
    }

    #contato .socials a img {
        width: 28px !important;
        height: auto !important;
    }
}

/* 
   Ajustes Críticos de Responsividade (iPhone 13/14/15 Pro & Similares)
   Reset Total de Transbordo e Sobreposição
*/
@media screen and (max-width: 450px) {

    /* 1. Header & Navbar: Reset Total */
    header.site-header .nav-h1-replacement,
    header.site-header span[data-i18n="nav_h1"],
    header.site-header .brand span {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    header.site-header .nav-wrapper {
        min-height: 70px !important;
        justify-content: center !important;
        padding: 0 15px !important;
    }

    header.site-header .brand-image {
        width: 120px !important;
        height: auto !important;
    }

    /* 2. Seção Plataforma: Mata Transbordo e Imagens de Fundo */
    #plataforma {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        padding: 40px 0 !important;
        margin: 0 !important;
        position: relative !important;
        background: #fff !important;
        /* Limpa fundos vindo de imagens */
    }

    #plataforma .image4,
    #plataforma .background3,
    #plataforma>img {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }

    #plataforma .platform-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 20px !important;
    }

    #plataforma .platform-slider,
    #plataforma .slider-frame,
    #plataforma .slide-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 15px !important;
        position: static !important;
        display: block !important;
    }

    #plataforma .slide {
        display: none !important;
    }

    #plataforma .slide.active {
        display: block !important;
    }


    #plataforma .slider-arrow {
        display: none !important;
    }

    /* 3. Seção Expertise: Cards */
    #expertise .service-card {
        width: 100% !important;
        margin: 15px 0 !important;
        float: none !important;
    }

    #expertise .service-card ul li {
        width: 100% !important;
        margin-left: 0 !important;
        white-space: normal !important;
    }


    /* Esconder elementos que voam */
    .section-mark-selo,
    .section-mark-contact,
    .desktop-only-selo,
    .section-mark {
        display: none !important;
    }

    .mobile-only-selo {
        display: block !important;
        margin: 0 auto 20px !important;
        margin-top: 20px;
        max-width: 200px !important;
        /* Tamanho solicitado pelo usuário */
        height: auto !important;
        width: auto !important;
        /* Permite que o max-width controle */
        padding-top: 30px;
    }




    body #beneficios .section-heading.left .redBenefits p {
        font-size: 1.5rem !important;
    }

    .section-heading h2,
    .section-heading.left h2 {
        text-align: center;
    }
}