/* ═══════════════════════════════════════════
   Responsive Mobile — MASTER OVERRIDE
   Prioridade sobre CSS async (nodes, project_card, decorative_elements, about)
   ═══════════════════════════════════════════ */

        /* ── Tablets / Process + Team (992px) ── */
        @media (max-width: 992px) {
            /* PROCESSO — forçar layout de coluna única */
            .process__core-wrapper { display: none !important; }
            .process__timeline {
                gap: 2.5rem !important;
                padding: 3rem 1rem !important;
                max-width: 100% !important;
            }
            .process__axis {
                left: 1rem !important;
                width: 20px !important;
                transform: none !important;
            }
            .process__axis-line--left { left: 0 !important; }
            .process__axis-line--right { display: none !important; }
            
            .process__node {
                width: 100% !important;
                padding-left: 4rem !important;
                padding-right: 0 !important;
                align-self: flex-start !important;
                text-align: left !important;
            }
            .process__node--left,
            .process__node--right {
                width: 100% !important;
                align-self: flex-start !important;
                text-align: left !important;
            }
            .process__node--left .process__connector, 
            .process__node--right .process__connector {
                left: 1rem !important;
                right: auto !important;
                width: 3rem !important;
                background: linear-gradient(to right, transparent, rgba(255,255,255,0.1)) !important;
            }
            .process__node--left .process__connector::after, 
            .process__node--right .process__connector::after {
                left: -6px !important;
                right: auto !important;
                transform: translate(0, -50%) !important;
            }
            .process__node--left:hover .process__connector::after,
            .process__node--right:hover .process__connector::after {
                transform: translate(0, -50%) scale(1.3) !important;
            }
            .process__node--left .process__bg-num,
            .process__node--right .process__bg-num {
                right: 5% !important;
                left: auto !important;
                font-size: clamp(6rem, 18vw, 10rem) !important;
            }
            .process__node--left .process__meta,
            .process__node--right .process__meta {
                justify-content: flex-start !important;
            }
            .process__card {
                padding: 2rem 1.5rem !important;
            }
            .process__step-desc {
                word-break: normal !important;
                overflow-wrap: break-word !important;
                white-space: normal !important;
            }

            /* TEAM — forçar layout de coluna única */
            .team__header {
                grid-template-columns: 1fr !important;
                gap: 1.2rem !important;
            }
            .team__desc { 
                text-align: left !important; 
                max-width: 100% !important; 
            }
            .team__stage {
                grid-template-columns: 1fr !important;
                min-height: auto !important;
            }
            .team__portrait-col { 
                order: 1 !important; 
                padding: 0 !important;
            }
            .team__content-col {
                order: 2 !important;
                border-left: none !important;
                border-top: 1px solid rgba(255,255,255,0.04) !important;
                padding-left: 0 !important;
                padding-top: 2rem !important;
            }
            .team__content-col::before { display: none !important; }
            .team__content-area { min-height: auto !important; }
            .team__member-info { text-align: center !important; }
            .team__quote { 
                border-left: none !important; 
                padding-left: 0 !important; 
                text-align: center !important; 
            }
            .team__meta { justify-content: center !important; }
            .team__nav { justify-content: center !important; }
            .team__portrait-frame { max-width: 320px !important; margin: 0 auto !important; }
            .team__deco-line, .team__deco-circle { display: none !important; }
        }

        /* ── Small phones — Process (480px) ── */
        @media (max-width: 480px) {
            .process__timeline {
                padding: 2rem 0.5rem !important;
            }
            .process__node { padding-left: 3rem !important; }
            .process__axis { left: 0.5rem !important; }
            .process__node--left .process__connector, 
            .process__node--right .process__connector {
                left: 0.5rem !important;
                width: 2.5rem !important;
            }
            .process__card { padding: 1.5rem 1.2rem !important; }
            .process__cross { display: none !important; }
            .process__step-title { font-size: 1.3rem !important; }
            .process__step-desc { font-size: 0.88rem !important; }
            .process__bg-num { display: none !important; }
        }

        /* ── Main mobile breakpoint (768px) ── */
        @media (max-width: 768px) {
            /* GLOBAL */
            .section { padding: 4rem 0 !important; }
            .section-title { font-size: clamp(2.2rem, 8vw, 3rem) !important; }
            .section-label { justify-content: flex-start !important; margin-bottom: 2rem !important; }

            /* NAV */
            .nav__links { display: none !important; }
            .nav__cta { display: none !important; }
            .nav__toggle { display: block !important; }
            .nav__inner { padding: 0 1.5rem !important; }

            /* ═══════════════════════════════════════
               HERO — Texto acima da cabeça / Botões abaixo
               ═══════════════════════════════════════ */
            .hero { 
                align-items: stretch !important; 
                min-height: 100vh !important; 
                min-height: 100dvh !important;
                padding: 0 !important;
            }
            .hero__content { 
                width: 100% !important; 
                height: 100vh !important;
                height: 100dvh !important;
                display: flex !important; 
                flex-direction: column !important; 
                align-items: center !important; 
                text-align: center !important;
                padding: 90px 1.5rem 1.5rem !important;
                justify-content: flex-start !important;
                box-sizing: border-box !important;
                margin: 0 !important;
            }
            .hero__label { 
                justify-content: center !important; 
                margin-bottom: 0.6rem !important;
                margin-top: 3.5rem !important;
                order: 1 !important;
                flex-shrink: 0 !important;
            }
            .hero__title { 
                font-size: clamp(2.2rem, 9vw, 3.2rem) !important; 
                margin-bottom: 0.5rem !important; 
                line-height: 1.05 !important;
                text-align: center !important;
                order: 2 !important;
                flex-shrink: 0 !important;
            }
            .hero__subtitle { 
                display: none !important;
            }
            .hero__ctas { 
                justify-content: center !important; 
                flex-direction: column !important; 
                width: 100% !important; 
                max-width: 300px !important;
                gap: 0.5rem !important; 
                margin: auto auto 0 auto !important;
                order: 4 !important;
                position: relative !important;
                z-index: 20 !important;
                flex-shrink: 0 !important;
            }
            .hero__ctas .btn-primary, 
            .hero__ctas .btn-ghost, 
            .hero__ctas .cta__btn-custom { 
                width: 100% !important; 
                justify-content: center !important; 
                padding: 10px 24px !important;
                min-height: 44px !important;
                font-size: 0.82rem !important;
            }
            .hero__ctas .cta__btn-custom .inner {
                font-size: 0.85rem !important;
            }
            .hero__ctas .btn-ghost {
                padding: 9px 22px !important;
                font-size: 0.8rem !important;
            }
            .hero__scroll { 
                bottom: 0.3rem !important; 
                z-index: 21 !important;
            }
            .hero__figure { 
                bottom: -2% !important;
                z-index: 5 !important;
            }
            .hero__figure img { 
                height: 70vh !important; 
                filter: contrast(1) brightness(1) !important; 
            }
            /* Overlays não bloqueiam botões */
            .hero__overlay-radial,
            .hero__overlay-bottom,
            .hero__vignette {
                z-index: 8 !important;
                pointer-events: none !important;
            }
            .hero__tag { display: none !important; }
            .hero__corner { display: none !important; }
            /* Beams — mais visíveis no mobile */
            .beams { 
                opacity: 0.25 !important;
            }
            /* Orbs — mais brilhantes e maiores no mobile */
            .hero__orb--a {
                width: 350px !important;
                height: 350px !important;
                background: radial-gradient(circle, rgba(201, 210, 218, 0.09) 0%, transparent 60%) !important;
                animation: orbDrift 10s ease-in-out infinite alternate !important;
            }
            .hero__orb--b {
                width: 280px !important;
                height: 280px !important;
                background: radial-gradient(circle, rgba(111, 118, 125, 0.1) 0%, transparent 60%) !important;
                animation: orbDrift 14s ease-in-out infinite alternate-reverse !important;
            }
            .hero__orb--c {
                width: 200px !important;
                height: 200px !important;
                background: radial-gradient(circle, rgba(201, 210, 218, 0.07) 0%, transparent 60%) !important;
                animation: orbDrift 18s ease-in-out infinite alternate !important;
            }
            /* Halo — maior e mais pulsante */
            .hero__halo {
                width: clamp(300px, 70vw, 500px) !important;
                height: clamp(300px, 70vw, 500px) !important;
                opacity: 0.7 !important;
            }
            /* Shimmer face — sutil brilho */
            .hero__shimmer {
                opacity: 0.15 !important;
            }
            /* Partículas / estrelas no fundo */
            .hero::before {
                content: '' !important;
                position: absolute !important;
                inset: 0 !important;
                z-index: 1 !important;
                pointer-events: none !important;
                background-image: 
                    radial-gradient(1px 1px at 15% 25%, rgba(201,210,218,0.7) 1px, transparent 0),
                    radial-gradient(1.5px 1.5px at 35% 55%, rgba(201,210,218,0.5) 1px, transparent 0),
                    radial-gradient(1px 1px at 55% 15%, rgba(201,210,218,0.6) 1px, transparent 0),
                    radial-gradient(2px 2px at 75% 70%, rgba(201,210,218,0.4) 1px, transparent 0),
                    radial-gradient(1px 1px at 85% 35%, rgba(201,210,218,0.8) 1px, transparent 0),
                    radial-gradient(1.5px 1.5px at 25% 80%, rgba(201,210,218,0.5) 1px, transparent 0),
                    radial-gradient(1px 1px at 65% 45%, rgba(201,210,218,0.6) 1px, transparent 0),
                    radial-gradient(2px 2px at 45% 90%, rgba(201,210,218,0.3) 1px, transparent 0),
                    radial-gradient(1px 1px at 90% 85%, rgba(201,210,218,0.7) 1px, transparent 0),
                    radial-gradient(1.5px 1.5px at 10% 60%, rgba(201,210,218,0.4) 1px, transparent 0) !important;
                background-size: 300px 300px !important;
                animation: heroStarsDrift 80s linear infinite !important;
                opacity: 0.5 !important;
            }

            /* ═══════════════════════════════════════
               SERVICES
               ═══════════════════════════════════════ */
            .services-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; margin-top: 2rem !important; }
            .flashlight-card { padding: 2rem !important; }
            .serv-card__title { font-size: 1.5rem !important; }

            /* ═══════════════════════════════════════
               PROJECTS / PORTFOLIO — Centralizado
               ═══════════════════════════════════════ */
            .projects { padding: 4rem 0 3rem !important; }
            .projects__header { margin-bottom: 2.5rem !important; }
            .projects__header-inner { 
                flex-direction: column !important; 
                align-items: center !important; 
                text-align: center !important;
                gap: 1.2rem !important; 
            }
            .projects__badge {
                margin-left: auto !important;
                margin-right: auto !important;
            }
            .projects__title {
                font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
                text-align: center !important;
            }
            .projects__desc {
                max-width: 100% !important;
                font-size: 0.9rem !important;
                text-align: center !important;
            }
            .projects__counter { 
                flex-direction: column !important; 
                align-items: flex-start !important; 
                gap: 1rem !important; 
                padding-top: 2rem !important; 
            }
            .project-card { width: clamp(260px, 80vw, 320px) !important; }
            .projects__row--top {
                animation-duration: 30s !important;
            }
            .projects__row--bottom {
                animation-duration: 35s !important;
            }
            
            /* ═══════════════════════════════════════
               PROCESSO — Layout mobile
               ═══════════════════════════════════════ */
            .process { padding: 4rem 0 !important; overflow: hidden !important; }
            .process__container { padding: 0 1rem !important; }
            .process__header { 
                text-align: center !important; 
                margin-bottom: 2.5rem !important; 
            }
            .process__title {
                font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
            }
            .process__desc {
                margin: 0 auto !important;
                max-width: 100% !important;
                font-size: 0.9rem !important;
            }
            .process__label {
                font-size: 0.65rem !important;
                padding: 0.5rem 1.2rem !important;
            }

            /* ═══════════════════════════════════════
               TEAM / ESPECIALISTAS — Layout mobile
               ═══════════════════════════════════════ */
            .team { padding: 4rem 0 !important; overflow: hidden !important; }
            .team__container { padding: 0 1.25rem !important; }
            .team__header { 
                grid-template-columns: 1fr !important; 
                gap: 1.2rem !important; 
                margin-bottom: 2.5rem !important;
                padding-bottom: 2rem !important;
            }
            .team__header::after {
                width: 80px !important;
            }
            .team__title {
                font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
            }
            .team__desc {
                max-width: 100% !important;
                font-size: 0.9rem !important;
                line-height: 1.7 !important;
                text-align: left !important;
            }
            .team__stage { 
                grid-template-columns: 1fr !important; 
                min-height: auto !important; 
            }
            .team__portrait-col { 
                padding: 0 !important; 
                order: 1 !important;
            }
            .team__portrait-frame { 
                max-width: 280px !important; 
                margin: 0 auto !important; 
            }
            .team__content-col { 
                padding: 2rem 0 0 0 !important; 
                border-left: none !important; 
                border-top: 1px solid rgba(255,255,255,0.04) !important; 
                margin-top: 1.5rem !important;
                order: 2 !important;
            }
            .team__content-col::before { 
                display: none !important;
            }
            .team__content-area {
                min-height: auto !important;
            }
            .team__member-info { 
                position: static !important; 
                transform: none !important; 
                display: none !important; 
                margin-bottom: 1.5rem !important; 
                width: 100% !important;
                text-align: center !important;
            }
            .team__member-info.is-active { 
                display: block !important; 
                opacity: 1 !important; 
                transform: none !important; 
            }
            .team__quote { 
                font-size: clamp(1rem, 4.2vw, 1.2rem) !important; 
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-bottom: 1.5rem !important;
                border-left: none !important;
                text-align: center !important;
            }
            .team__member-number { 
                font-size: 3rem !important; 
                margin-bottom: -0.5rem !important;
                text-align: center !important;
            }
            .team__meta {
                justify-content: center !important;
            }
            .team__nav { 
                position: static !important; 
                flex-wrap: wrap !important; 
                justify-content: center !important; 
                gap: 0.8rem !important; 
                margin-top: 1.5rem !important;
                order: 3 !important;
            }
            .team__nav-counter {
                font-size: 0.85rem !important;
            }
            .team__thumbs { 
                justify-content: center !important; 
                width: 100% !important;
                gap: 0.5rem !important;
            }
            .team__thumb {
                width: 40px !important;
                height: 48px !important;
            }
            .team__frame-corner { display: none !important; }

            /* ═══════════════════════════════════════
               CTA FINAL
               ═══════════════════════════════════════ */
            .cta { padding: 4rem 0 !important; }
            .cta__title { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; }
            .cta__content-matte { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; }
            .cta__desc { font-size: 0.9rem !important; }
            .cta__actions { flex-direction: column !important; width: 100% !important; }
            .cta__actions .cta__btn-custom { width: 100% !important; justify-content: center !important; }
            .cta__footer-note { font-size: 0.75rem !important; }
            .cta__footer-note::before, .cta__footer-note::after { display: none !important; }
        }

        /* ── Extra small phones (390px and below) ── */
        @media (max-width: 390px) {
            .hero__title {
                font-size: clamp(2.2rem, 9.5vw, 3rem) !important;
            }
            .hero__subtitle { 
                font-size: 0.85rem !important;
            }
            .hero__figure img {
                height: 60vh !important;
            }
            .hero__label {
                font-size: 0.55rem !important;
            }

            .projects__title {
                font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
            }
            .project-card { width: clamp(240px, 85vw, 300px) !important; }

            .process__header {
                margin-bottom: 2rem !important;
            }
            .process__node { padding-left: 2.8rem !important; }
            .process__axis { left: 0.5rem !important; }

            .team__portrait-frame {
                max-width: 240px !important;
            }
            .team__quote {
                font-size: 0.92rem !important;
            }
            .team__thumb {
                width: 34px !important;
                height: 42px !important;
            }
        }

        /* ═══════════════════════════════════════════
   FINAL POLISH PASS (GLOBAL REFINEMENTS)
   ═══════════════════════════════════════════ */
        
        /* 1. Animated Film Grain (Cinematic Texture) */
        .noise {
            opacity: 0.04;
            mix-blend-mode: soft-light;
            animation: filmGrain 0.6s steps(2) infinite;
            will-change: transform;
        }

        @keyframes filmGrain {
            0%, 100% { transform: translate(0, 0); }
            10% { transform: translate(-5px, -5px); }
            30% { transform: translate(5px, -5px); }
            50% { transform: translate(-5px, 5px); }
            70% { transform: translate(5px, 5px); }
            90% { transform: translate(-3px, -3px); }
        }

        /* 2. Global Ambient Breathing Glow (Post-processing) */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at 70% 20%, rgba(201, 210, 218, 0.015) 0%, transparent 50%),
                        radial-gradient(circle at 30% 80%, rgba(180, 155, 100, 0.01) 0%, transparent 40%);
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: screen;
            animation: ambientBreathe 12s ease-in-out infinite alternate;
        }

        @keyframes ambientBreathe {
            0% { opacity: 0.5; transform: scale(1); }
            100% { opacity: 1; transform: scale(1.1); }
        }

        /* 3. Global Edge Lighting & Glassmorphism Transitions */
        a, button, .process__card, .team__card, .projects__card, .flashlight-card {
            transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
        }

        /* Elevating Card Hover State */
        .process__card:hover, .team__card:hover, .projects__card:hover, .flashlight-card:hover {
            border-color: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 20px rgba(201, 210, 218, 0.02) !important;
            transform: translateY(-4px) !important;
        }

        /* 4. Text Polish */
        .text-muted, p {
            letter-spacing: 0.01em;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }
        
        h1, h2, h3 {
            text-shadow: 0 10px 30px rgba(0,0,0,0.4); 
            letter-spacing: -0.02em;
        }
        
        /* 5. Smooth Sections Borders */
        section {
            border-top: none !important;
            border-bottom: none !important;
            position: relative;
        }

        section::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(201, 210, 218, 0.05) 50%, transparent 100%);
            z-index: 10;
            pointer-events: none;
        }