/* ==========================================================================
   [OMNI-NEXUS ABSOLUTE V.14.0] - RESPONSIVE OVERRIDE KERNEL
   ========================================================================== */

/* --------------------------------------------------------------------------
   [NÍVEL 0] - CORREÇÃO DESKTOP (min-width: 1025px)
   Objetivo: Forçar expansão PROPORCIONAL das Personas no Desktop.
-------------------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
    /* O Baralho agora abre metade para a esquerda, metade para a direita */
    #sessao-personas .deck-wrapper:hover .pos-1 { transform: translate(-140px, -20px) scale(1) !important; z-index: 10; border-color: var(--a7-brand) !important; }
    #sessao-personas .deck-wrapper:hover .pos-2 { transform: translate(-40px, 30px) scale(0.98) !important; z-index: 9; opacity: 1 !important; filter: blur(0) !important; }
    #sessao-personas .deck-wrapper:hover .pos-3 { transform: translate(60px, 80px) scale(0.96) !important; z-index: 8; opacity: 1 !important; filter: blur(0) !important; }
    #sessao-personas .deck-wrapper:hover .pos-4 { transform: translate(160px, 130px) scale(0.94) !important; z-index: 7; opacity: 1 !important; filter: blur(0) !important; }
}

/* --------------------------------------------------------------------------
   [NÍVEL 1] - PROTOCOLO TABLET E MOBILE GERAL (max-width: 1024px)
-------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    
    /* BLOQUEIO DE EIXO X (Aniquila a rolagem horizontal) */
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100% !important;
    }

    .container { padding: 0 24px !important; }

    /* NAVBAR COMPACTA */
    .navbar .container { gap: 16px; padding: 0 20px !important; }
    .navbar .logo { font-size: 16px !important; }
    .navbar .logo img { width: 30px !important; height: 35px !important; }
    
    .navbar .nav-link { font-size: 0 !important; padding: 8px !important; }
    .navbar .nav-link .material-symbols-rounded { font-size: 26px !important; margin: 0 !important; }
    .navbar .btn-nav-ghost { font-size: 11px !important; padding: 0 16px !important; height: 38px !important; }
    .navbar div[style*="gap: 32px"] { gap: 16px !important; }

    /* HERO GERAL */
    #sessao-hero .hero { padding-top: calc(var(--nav-height) + 40px) !important; padding-bottom: 80px !important; }
    #sessao-hero h1 { font-size: clamp(2.2rem, 6vw, 3rem) !important; letter-spacing: -1px !important;}
    #sessao-hero .smart-track-btn { width: 100% !important; max-width: 300px !important; justify-content: center !important; }
    #sessao-hero .slider-layer { width: calc(100% - 10px) !important; }
    #sessao-hero .track-icons { display: none !important; } 
    #sessao-hero .app-mockup-wrapper { display: none !important; }

    /* BENTO GRID */
    #sessao-bento { padding: 80px 0 !important; }
    #sessao-bento h2 { font-size: 2.2rem !important; }
    #sessao-bento .bento-grid { display: flex !important; flex-direction: column !important; gap: 20px !important; }
    #sessao-bento .bento-card { width: 100% !important; padding: 32px 24px !important; height: auto !important; min-height: 250px !important;}
    
    /* PERSONAS - RECONSTRUÇÃO DO BARALHO E ESPALHAMENTO 2x2 */
    #sessao-personas { padding: 80px 0 !important; }
    #sessao-personas .personas-grid { display: flex !important; flex-direction: column !important; gap: 60px !important; }
    #sessao-personas .personas-text h2 { font-size: 2.2rem !important; }
    
    #sessao-personas .persona-visual { 
        height: 480px !important; 
        margin-top: 10px !important;
        perspective: none !important; 
    }
    
    #sessao-personas .sm-mockup-card {
        left: 50% !important; top: 0 !important;
        margin-left: -170px !important; /* Metade de 340px garante centralização absoluta */
    }
    
    /* Posição Inicial: Eixo Y em escada perfeita e centralizada */
    #sessao-personas .pos-1 { transform: translate(0, 0) scale(0.9) !important; z-index: 10 !important; border-color: var(--a7-brand) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.8) !important;}
    #sessao-personas .pos-2 { transform: translate(0, 20px) scale(0.85) !important; z-index: 9 !important; opacity: 0.9 !important; filter: blur(1px) !important;}
    #sessao-personas .pos-3 { transform: translate(0, 40px) scale(0.80) !important; z-index: 8 !important; opacity: 0.7 !important; filter: blur(2px) !important;}
    #sessao-personas .pos-4 { transform: translate(0, 60px) scale(0.75) !important; z-index: 7 !important; opacity: 0.4 !important; filter: blur(3px) !important;}

    /* Hover Mobile: Expande em um Grid 2x2 proporcional e simétrico */
    #sessao-personas .deck-wrapper:hover .pos-1 { transform: translate(-35px, 0px) scale(0.85) !important; }
    #sessao-personas .deck-wrapper:hover .pos-2 { transform: translate(35px, 0px) scale(0.85) !important; opacity: 1 !important; filter: blur(0) !important; }
    #sessao-personas .deck-wrapper:hover .pos-3 { transform: translate(-35px, 120px) scale(0.85) !important; opacity: 1 !important; filter: blur(0) !important; }
    #sessao-personas .deck-wrapper:hover .pos-4 { transform: translate(35px, 120px) scale(0.85) !important; opacity: 1 !important; filter: blur(0) !important; }

    /* GALERIA & ESTEIRAS */
    #sessao-galeria { padding: 80px 0 !important; gap: 40px !important; }
    #sessao-galeria h2 { font-size: 2.2rem !important; }
    #sessao-galeria .marquee-wrapper { gap: 20px !important; mask-image: none !important; -webkit-mask-image: none !important; }
    #sessao-galeria .mockup-insta { width: 260px !important; }
    #sessao-galeria .mockup-browser { width: 320px !important; }
    
    /* MODAL SEMÂNTICO (CORREÇÃO DE LARGURA) */
    #nexus-gallery-modal { padding: 16px !important; align-items: center !important; }
    #nexus-gallery-modal .modal-content {
        max-height: 90vh !important; border-radius: 16px !important;
        display: flex !important; flex-direction: column !important;
        overflow-x: hidden !important; overflow-y: auto !important;
    }
    #nexus-gallery-modal .modal-body-wrapper {
        display: flex !important; flex-direction: column !important;
        padding: 24px !important; gap: 24px !important;
    }
    #nexus-gallery-modal .modal-capa-col { width: 100% !important; order: 1 !important; display: flex !important; justify-content: center !important; }
    #nexus-gallery-modal .modal-info-col { width: 100% !important; order: 2 !important; }
    #nexus-gallery-modal .modal-insta-card { max-width: 100% !important; width: 100% !important; margin: 0 auto !important; }
    #nexus-gallery-modal .caption-sim-area { min-height: auto !important; flex-grow: 0 !important;}
    #nexus-gallery-modal .caption-sim-body { padding: 16px !important; font-size: 13px !important; max-height: 250px !important; overflow-y: auto !important;}
    #nexus-gallery-modal .modal-close { top: 12px !important; right: 12px !important; background: rgba(0,0,0,0.8) !important; padding: 6px !important; border-radius: 50% !important; font-size: 20px !important; z-index: 100 !important; color: #fff !important; }
    
    /* SEGURANÇA */
    #sessao-seguranca { padding: 80px 0 !important; }
    #sessao-seguranca h2 { font-size: 2.2rem !important; }
    #sessao-seguranca .sec-grid { display: flex !important; flex-direction: column !important; gap: 40px !important; }
    #sessao-seguranca .sec-text, #sessao-seguranca .s-feat { align-items: center !important; text-align: center !important; }
    #sessao-seguranca .connection-diagram { max-width: 100% !important; padding: 24px !important; }
    #sessao-seguranca .sec-visual { min-height: 300px !important; transform: scale(0.95); }

    /* PRICING (CORREÇÃO DE BORDAS COLADAS - 90% RESPONSIVO) */
    #sessao-pricing { padding: 80px 0 !important; }
    #sessao-pricing h2 { font-size: 2.2rem !important; }
    
    #sessao-pricing .pricing-vault { 
        display: flex !important; flex-direction: column !important; 
        width: calc(100% - 32px) !important; /* Descola das bordas mantendo responsividade */
        margin: 0 auto !important; 
    }
    
    #sessao-pricing .modules-col { padding: 40px 24px !important; border-right: none !important; border-bottom: 1px solid #1A1A1A !important; }
    #sessao-pricing .modules-grid { display: flex !important; flex-direction: column !important; gap: 24px !important; }
    #sessao-pricing .price-col { padding: 40px 24px !important; align-items: center !important; }
    #sessao-pricing .price-value { font-size: 3.5rem !important; justify-content: center !important; flex-wrap: wrap !important; }
    #sessao-pricing .smart-track-btn { width: 100% !important; max-width: 320px !important; }
    #sessao-pricing .guarantee-box { max-width: 100% !important; }
#sessao-pricing .system-requirements {
        flex-direction: column; text-align: center !important; gap: 8px !important;
        width: calc(100% - 32px) !important; padding: 20px !important;
    }
    #sessao-pricing .system-requirements p { text-align: center !important; }

    
    /* FAQ - ACORDEON NATIVO (CORREÇÃO DE BORDAS COLADAS) */
    #sessao-faq { padding: 80px 0 !important; }
    #sessao-faq h2 { font-size: 2.2rem !important; }
    
    #sessao-faq .faq-vault { 
        padding: 20px !important; 
        width: calc(100% - 32px) !important; /* Descola das bordas */
        margin: 0 auto !important; 
        display: flex !important; flex-direction: column !important; 
    }
    
    #sessao-faq .faq-display { display: none !important; } 
    #sessao-faq .faq-list { gap: 12px !important; width: 100% !important; }
    #sessao-faq .faq-btn { border-radius: 12px !important; margin-bottom: 0 !important; padding: 18px 20px !important; }
    
    #sessao-faq .faq-btn.active { 
        border-bottom-left-radius: 0 !important; 
        border-bottom-right-radius: 0 !important; 
        background: var(--a7-brand-alpha-10) !important;
        border-color: var(--a7-brand) !important;
    }
    
    .mobile-accordion-content {
        display: flex !important;
        flex-direction: column !important;
        max-height: 0; overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
        background: #050505 !important;
        border: 1px solid var(--a7-brand) !important;
        border-top: none !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        padding: 0 20px !important;
        opacity: 0;
    }
    .mobile-accordion-content.active { padding: 24px 20px !important; opacity: 1; border-top: none !important;}
    .mobile-accordion-content .ans-icon { display: none !important; }
    .mobile-accordion-content h3 { font-size: 16px !important; margin-bottom: 12px !important; color: var(--a7-brand) !important; text-align: left !important;}
    .mobile-accordion-content p { font-size: 14px !important; line-height: 1.6 !important; text-align: left !important;}

    /* FOOTER MODAIS */
    .nx-footer { padding: 40px 0 !important; }
    .nx-brand-col { align-items: center !important; text-align: center !important; }
    .nx-footer-nav { flex-direction: column !important; gap: 16px !important; }
    .nx-footer-divider { display: none !important; }
    .nx-modal-box { width: 95% !important; margin: 0 auto !important; }
    .nx-term-content p { padding-left: 0 !important; }
    #sessao-hero p {max-width: 90%;}

}

/* --------------------------------------------------------------------------
   [NÍVEL 2] - PROTOCOLO SMARTPHONE PEQUENO (max-width: 480px)
-------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .container { padding: 0 16px !important; }
    h2 { font-size: 1.8rem !important; }
    #sessao-hero h1 { font-size: 2rem !important; }
    #sessao-personas .persona-visual { height: 460px !important; transform: scale(0.78) !important; }
    #sessao-pricing .price-value { font-size: 2.8rem !important; }
    .navbar .logo { font-size: 14px !important; }
    .navbar .btn-nav-ghost { font-size: 10px !important; padding: 0 12px !important; }
     #sessao-hero .d-2 {max-width: 90%;}
}