/* =========================================================================
   Fluidez mobile — site-generico
   Escopo: aplica-se apenas em telas <= 991.98px, sem alterar o desktop
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

a.btn, .wpp-btn, .accordion-button, .navbar-toggler {
    touch-action: manipulation;
}

/* Trava contra rolagem horizontal acidental (clip preserva position: sticky/fixed) */
html { overflow-x: clip; }

@media (max-width: 991.98px) {

    /* ---- Cabeçalho fixo e compacto ao rolar ---- */
    #masthead.is-scrolled {
        position: fixed;
        top: 0; left: 0;
        background: rgba(10,10,10,.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 6px 20px rgba(0,0,0,.25);
    }
    #masthead { transition: background .25s ease, box-shadow .25s ease; }
    #masthead.is-scrolled .navbar { margin-bottom: 0; padding-top: .4rem; padding-bottom: .4rem; }
    #masthead.is-scrolled .brand-text { font-size: 1.2rem; }

    /* compensa o cabeçalho fixo ao navegar por âncora (nav do menu) */
    #servicos, #fck, #vantagens, #aplicacoes, #faq, #diferenciais {
        scroll-margin-top: 78px;
    }

    /* ---- Banner: reserva espaço para o cabeçalho sobreposto ----
       O header usa position:absolute e fica por cima do banner. Como o conteúdo
       é alto no celular, a centralização vertical o empurrava para trás do menu. */
    #hero-generico .trido-hero-section {
        align-items: flex-start !important;
        /* --header-h é medido em tempo real pelo mobile-fluid.js.
           O fallback de 64px cobre o caso de o JS não rodar. */
        padding-top: calc(var(--header-h, 64px) + 56px);
        padding-bottom: 48px;
    }
    /* topo mais escuro: garante contraste do logo sobre o céu claro da foto.
       top/left fixam o overlay na borda da seção — sem isso ele começaria
       abaixo do padding-top, deixando uma faixa clara atrás do menu. */
    #hero-generico .trido-hero-overlay {
        top: 0; left: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 26%, rgba(0,0,0,.52) 60%, rgba(0,0,0,.78) 100%);
    }
    .hero-mini { gap: 16px 24px; margin-top: 26px; }
    .hero-mini .n { font-size: 1.45rem; }

    /* menu mobile: alvos de toque maiores e mais respiro */
    .navbar-collapse .nav-link { padding-top: .7rem; padding-bottom: .7rem; font-size: 1rem; }
    .navbar-collapse .nav-item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.08); }
    .navbar-collapse .nav-item.ms-lg-2 { border-bottom: none; margin-top: .5rem; }
    .navbar-collapse .nav-item.ms-lg-2 .wpp-btn { display: block; width: 100%; text-align: center; }

    /* ---- Carrossel horizontal com scroll-snap (produtos / aplicações) ---- */
    .mobile-carousel {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        gap: 14px;
        margin: 0 -12px;
        padding: 6px 12px 22px;
        scrollbar-width: none;
    }
    .mobile-carousel::-webkit-scrollbar { display: none; }
    .mobile-carousel > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        padding-left: 0;
        padding-right: 0;
        scroll-snap-align: start;
    }
    .mobile-carousel .svc-card,
    .mobile-carousel .rounded-xl { height: 100%; }

    .swipe-hint {
        font-size: .78rem; color: #8a8a8a; margin: -8px 0 16px;
        display: flex; align-items: center; gap: 6px;
    }
    .swipe-hint svg { width: 14px; height: 14px; animation: swipeX 1.6s ease-in-out infinite; }
    @keyframes swipeX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

    /* ---- Barra de ação fixa no rodapé (substitui o botão flutuante) ---- */
    .footer-orcamento { display: none; }

    .mobile-cta-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        background: #fff;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 24px rgba(0,0,0,.14);
        border-top: 1px solid #eee;
        transform: translateY(100%);
        transition: transform .3s ease;
    }
    .mobile-cta-bar.visible { transform: translateY(0); }
    .mobile-cta-bar .btn {
        width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
        font-size: 1rem; padding: .85rem 1rem;
    }
    body { padding-bottom: 74px; }

    /* ---- Feedback tátil ---- */
    .svc-card, .adv-card, .rounded-xl, .btn { transition: transform .15s ease; }
    .svc-card:active, .adv-card:active, .rounded-xl:active { transform: scale(.98); }
    .btn:active { transform: scale(.96); }

    /* ---- Entrada suave dos blocos ao rolar ---- */
    .reveal-init { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
    .reveal-init.in-view { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
    .mobile-carousel > [class*="col-"] { flex-basis: 84%; max-width: 84%; }
}

/* trava de segurança: a barra fixa nunca aparece em telas grandes */
@media (min-width: 992px) {
    .mobile-cta-bar { display: none !important; }
    body { padding-bottom: 0 !important; }
}