/* ===== From blog.html ===== */

/* =========================================
           1. VARIÃVEIS, CORES E RESET
        ========================================= */
        :root {
            /* Cores Base Zinc */
            --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7;
            --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a;
            --zinc-600: #52525b; --zinc-800: #27272a; --zinc-900: #18181b;

            /* Cores de Destaque */
            --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-300: #c4b5fd; 
            --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed;
            --fuchsia-400: #e879f9; --fuchsia-500: #d946ef;
            --orange-400: #fb923c; --orange-500: #f97316;
            --sky-500: #0ea5e9; --blue-500: #3b82f6; --blue-600: #2563eb;
            --pink-500: #ec4899;
            
            --white: #ffffff; --black: #000000;
            --bg-color: #f8f9fa;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--bg-color); color: var(--zinc-900);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5;
        }
        ::selection { background-color: var(--violet-500); color: var(--white); }
        a { text-decoration: none; color: inherit; }
        button { border: none; background: none; font-family: inherit; cursor: pointer; }
        ul { list-style: none; }
        img, svg { max-width: 100%; display: block; }
        
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        @media (min-width: 768px) { .container { padding: 0 3rem; } }

        /* =========================================
           2. PRELOADER
        ========================================= */
        
        
        .iv-preloader-logo { width: 32px; height: 32px; background: linear-gradient(135deg, #8b5cf6, #ec4899); border-radius: 50%; position: relative; animation: iv-pulse 1.2s ease-in-out infinite; }
        .iv-preloader-logo::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, #8b5cf6, #ec4899, #8b5cf6); border-radius: 50%; opacity: 0.3; animation: iv-rotate 2s linear infinite; }
        @keyframes iv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
        @keyframes iv-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        
        /* =========================================
           3. BACKGROUND PARALLAX & CURSOR
        ========================================= */
        .designer-bg { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
        .designer-bg-mix { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.7; }
        .bg-orb-1 { position: absolute; top: 0; left: 0; width: 400px; height: 400px; background-color: rgba(167, 139, 250, 0.5); border-radius: 50%; filter: blur(100px); }
        .bg-orb-2 { position: absolute; top: 0; left: 0; width: 500px; height: 500px; background-color: rgba(232, 121, 249, 0.4); border-radius: 50%; filter: blur(140px); }
        @media (min-width: 768px) { .bg-orb-1 { width: 600px; height: 600px; } .bg-orb-2 { width: 800px; height: 800px; } }
        
        .designer-bg { --mouse-x: 0px; --mouse-y: 0px; }
        .parallax-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
        .parallax-layer-1 { transform: translate(calc(var(--mouse-x) * -0.2), calc(var(--mouse-y) * -0.2)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-2 { transform: translate(calc(var(--mouse-x) * 0.4), calc(var(--mouse-y) * 0.4)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-3 { transform: translate(calc(var(--mouse-x) * -0.6), calc(var(--mouse-y) * -0.6)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        
        @keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } }
        @keyframes float-medium { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(-15deg); } }
        @keyframes float-fast { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-40px) rotate(20deg); } }
        .shape-float-1 { animation: float-slow 8s ease-in-out infinite; }
        .shape-float-2 { animation: float-medium 6s ease-in-out infinite; }
        .shape-float-3 { animation: float-fast 10s ease-in-out infinite; }
        .pattern-dots { background-image: radial-gradient(rgba(0,0,0,0.1) 2px, transparent 2px); background-size: 30px 30px; opacity: 0.2; }

        @media (pointer: fine) {
            body, a, button, input, textarea, select, .cursor-pointer { cursor: none !important; }
            #cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background-color: var(--violet-500); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.15s ease-out, background-color 0.3s; }
            #cursor-outline { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1.5px solid rgba(139, 92, 246, 0.5); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s; }
            #cursor-outline.hover { width: 60px !important; height: 60px !important; background-color: rgba(139, 92, 246, 0.1) !important; border-color: rgba(217, 70, 239, 0.8) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; mix-blend-mode: normal !important; }
            #cursor-dot.hover { transform: translate(-50%, -50%) scale(0.5) !important; background-color: var(--fuchsia-500) !important; opacity: 1 !important; }
            #cursor-outline.hover-text { width: 100px; height: 100px; background-color: var(--white); border-color: transparent; mix-blend-mode: difference; z-index: 99998; }
            #cursor-dot.hover-text { opacity: 0; }
            .cursor-hidden { opacity: 0; }
        }

        /* =========================================
           4. SCROLL REVEAL & UTILITIES
        ========================================= */
        .reveal-element { opacity: 0; transform: translateY(3rem); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-element.is-visible { opacity: 1; transform: translateY(0); }
        .bg-clip-text { -webkit-background-clip: text; background-clip: text; color: transparent; }
        .gradient-text { background-image: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); }
        
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* =========================================
           5. HEADER, MENU OVERLAY & SIDEBARS
        ========================================= */
        .social-sidebar { display: none; position: fixed; bottom: 0; flex-direction: column; align-items: center; gap: 1.5rem; z-index: 40; padding-bottom: 2rem; }
        @media (min-width: 1024px) { .social-sidebar { display: flex; } }
        .social-sidebar.left { left: 2rem; }
        .social-sidebar.right { right: 2rem; }
        .social-sidebar a { color: var(--zinc-400); transition: all 0.3s; }
        .social-sidebar a:hover { color: var(--violet-600); transform: translateY(-4px); }
        .sidebar-line { width: 1px; height: 6rem; background-color: var(--zinc-300); margin-top: 0.5rem; }
        .email-vertical { writing-mode: vertical-rl; font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; }

        .site-header { position: fixed; top: 0; width: 100%; padding: 2rem 0; z-index: 50; transition: all 0.3s; pointer-events: none; }
        .site-header.z-60 { z-index: 60; }
        .header-inner { display: flex; justify-content: space-between; align-items: center; pointer-events: auto; padding: 0 1.5rem; width: 100%; max-width: 100vw; }
        @media (min-width: 768px) { .header-inner { padding: 0 3rem; } }
        @media (min-width: 1024px) { .header-inner { padding: 0 4rem; } }
        
        .header-actions { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 60; }
        .btn-menu { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--zinc-200); background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--zinc-900); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
        .btn-menu:hover { background: var(--white); border-color: var(--violet-500); }
        .btn-menu.is-active { background: var(--zinc-900); border-color: var(--zinc-900); color: var(--white); }
        
        .btn-primary { display: none; padding: 0.75rem 1.5rem; border-radius: 9999px; background: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); color: var(--white); font-size: 0.875rem; font-weight: 700; align-items: center; gap: 0.5rem; transition: all 0.3s; }
        @media (min-width: 640px) { .btn-primary { display: flex; } }
        .btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(139,92,246,0.4); }
        
        .header-logo { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; color: var(--zinc-900); position: relative; z-index: 60; transition: transform 0.3s; }
        @media (min-width: 768px) { .header-logo { font-size: 1.5rem; } }
        .header-logo:hover { transform: scale(1.05); }

        .menu-overlay { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6rem 0; opacity: 0; transform: translateY(-100%); transition: all 0.7s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
        .menu-overlay.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .menu-bg { position: absolute; inset: 0; background-color: var(--bg-color); z-index: -10; overflow: hidden; }
        .menu-hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: all 1s ease-out; }
        .menu-hover-img.is-active { opacity: 1; transform: scale(1); }
        .menu-orb { position: absolute; top: 0; left: 0; width: 600px; height: 600px; background-color: rgba(139,92,246,0.3); border-radius: 50%; filter: blur(100px); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
        .menu-glass { position: absolute; inset: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
        
        .menu-nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; }
        @media (min-width: 768px) { .menu-nav { gap: 2rem; font-size: 3.75rem; } }
        @media (min-width: 1024px) { .menu-nav { font-size: 4.5rem; } }
        .menu-link { color: var(--zinc-800); transition: all 0.3s; }
        .menu-link:hover { transform: scale(1.05); }
        .menu-link[data-target="home"]:hover { color: var(--violet-600); }
        .menu-link[data-target="portfolio"]:hover { color: var(--blue-500); }
        .menu-link[data-target="contatos"]:hover { color: var(--orange-500); }
        .menu-link[data-target="blog"]:hover { color: var(--sky-500); }
        
        .menu-social-area { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 3rem; }
        .menu-social-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-500); }
        .menu-social-list { display: flex; gap: 1rem; color: var(--zinc-600); }
        @media (min-width: 768px) { .menu-social-list { gap: 1.5rem; } }
        .social-btn { width: 3.5rem; height: 3.5rem; background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 50%; border: 1px solid var(--zinc-200); display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .social-btn:hover { color: var(--white); background: var(--violet-600); border-color: var(--violet-600); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(139,92,246,0.3); }

        /* =========================================
           6. SEÃ‡Ã•ES ESPECÃFICAS (BLOG)
        ========================================= */
        .section-py { padding-top: 6rem; padding-bottom: 6rem; }
        @media (min-width: 768px) { .section-py { padding-top: 8rem; padding-bottom: 8rem; } }
        
        .page-header { padding-top: 10rem; padding-bottom: 3rem; text-align: center; }
        @media (min-width: 768px) { .page-header { padding-top: 12rem; padding-bottom: 4rem; text-align: left; } }
        
        .label-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 1rem; display: block; }
        .section-title { font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 1.5rem; }
        @media (min-width: 768px) { .section-title { font-size: 4.5rem; } }
        .section-desc { font-size: 1.125rem; color: var(--zinc-500); max-width: 36rem; line-height: 1.6; margin: 0 auto; }
        @media (min-width: 768px) { .section-desc { font-size: 1.25rem; margin: 0; } }

        /* -- Grid do Blog -- */
        .blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        @media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
        @media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
        
        .blog-card { display: flex; flex-direction: column; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--zinc-100); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; height: 100%; }
        .blog-card:hover { transform: translateY(-8px); }
        
        /* Cores de Hover EspecÃ­ficas por CartÃ£o */
        .blog-card.hover-violet:hover { box-shadow: 0 25px 50px -12px rgba(139,92,246,0.25); border-color: var(--violet-200); }
        .blog-card.hover-violet:hover .blog-title { color: var(--violet-600); }
        .blog-card.hover-violet:hover .blog-link { color: var(--violet-600); }
        
        .blog-card.hover-sky:hover { box-shadow: 0 25px 50px -12px rgba(14,165,233,0.25); border-color: var(--sky-200); }
        .blog-card.hover-sky:hover .blog-title { color: var(--sky-500); }
        .blog-card.hover-sky:hover .blog-link { color: var(--sky-500); }

        .blog-card.hover-pink:hover { box-shadow: 0 25px 50px -12px rgba(236,72,153,0.25); border-color: var(--pink-200); }
        .blog-card.hover-pink:hover .blog-title { color: var(--pink-500); }
        .blog-card.hover-pink:hover .blog-link { color: var(--pink-500); }

        .blog-card.hover-orange:hover { box-shadow: 0 25px 50px -12px rgba(249,115,22,0.25); border-color: var(--orange-200); }
        .blog-card.hover-orange:hover .blog-title { color: var(--orange-500); }
        .blog-card.hover-orange:hover .blog-link { color: var(--orange-500); }

        .blog-img-wrap { width: 100%; height: 14rem; overflow: hidden; position: relative; }
        @media (min-width: 768px) { .blog-img-wrap { height: 16rem; } }
        .image-reveal-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .blog-card:hover .image-reveal-img { transform: scale(1.08); }
        
        .blog-tag { position: absolute; top: 1.25rem; left: 1.25rem; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .blog-tag.violet { color: var(--violet-600); }
        .blog-tag.sky { color: var(--sky-500); }
        .blog-tag.pink { color: var(--pink-500); }
        .blog-tag.orange { color: var(--orange-500); }

        .blog-content { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; }
        .blog-date { font-size: 0.75rem; color: var(--zinc-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
        .blog-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.3; margin-bottom: 1rem; color: var(--zinc-900); transition: color 0.3s; }
        .blog-excerpt { color: var(--zinc-500); font-size: 0.95rem; line-height: 1.6; margin-bottom: 2rem; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        
        .blog-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-900); transition: all 0.3s; margin-top: auto; }
        .blog-card:hover .blog-link svg { transform: translateX(4px); }

        .btn-load-more { padding: 1rem 2.5rem; border-radius: 9999px; border: 1px solid var(--zinc-200); background: rgba(255,255,255,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--zinc-800); font-weight: 700; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.75rem; transition: all 0.3s; margin: 4rem auto 0; }
        .btn-load-more:hover { border-color: var(--violet-500); color: var(--violet-600); background: var(--white); box-shadow: 0 10px 20px rgba(139,92,246,0.1); }

        /* -- CTA & Footer -- */
        .cta-section { text-align: center; border-top: 1px solid var(--zinc-100); background: rgba(255,255,255,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
        .cta-title { font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 2rem; line-height: 0.9; }
        @media (min-width: 768px) { .cta-title { font-size: 4.5rem; } }
        @media (min-width: 1024px) { .cta-title { font-size: 6rem; } }
        
        .footer { border-top: 1px solid var(--zinc-200); background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 3rem 0; position: relative; z-index: 10; }
        .footer-top { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; }
        @media (min-width: 768px) { .footer-top { flex-direction: row; justify-content: space-between; } }
        .footer-bottom { border-top: 1px solid var(--zinc-100); margin-top: 1.25rem; padding-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; justify-content: center; }
        @media (min-width: 640px) { .footer-bottom { flex-direction: row; gap: 2rem; } }

        /* =========================================
           7. ELEMENTOS FLUTUANTES (BTT & COOKIES)
        ========================================= */
        .iv-btt-btn { position: fixed; bottom: 28px; right: 24px; z-index: 9991; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(124, 58, 237, .40); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: all .35s ease; outline-offset: 3px; }
        .iv-btt-btn.iv-btt--visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .iv-btt-btn:hover { filter: brightness(1.12); transform: translateY(-3px) scale(1.07); box-shadow: 0 8px 28px rgba(124, 58, 237, .50); }
        @media (max-width: 639px) { .iv-btt-btn { bottom: 100px; } }

        .iv-cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(140%); opacity: 0; max-width: 860px; width: calc(100% - 32px); z-index: 9990; pointer-events: none; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
        .iv-cookie-banner.iv-cookie--visible { transform: translateX(-50%) translateY(0); opacity: 1; }
        .iv-cookie-inner { pointer-events: auto; display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10); }
        @media (max-width: 640px) { .iv-cookie-inner { flex-direction: column; align-items: flex-start; gap: 14px; } }
        .iv-cookie-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
        .iv-cookie-content { flex: 1; }
        .iv-cookie-title { font-size: .95rem; font-weight: 800; color: #18181b; margin-bottom: 4px; line-height: 1.3; }
        .iv-cookie-text { font-size: .82rem; color: #71717a; line-height: 1.6; }
        .iv-cookie-link { color: #7c3aed; font-weight: 600; margin-left: 4px; }
        .iv-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .iv-cookie-btn { padding: 9px 18px; border-radius: 9999px; font-size: .82rem; font-weight: 700; transition: all .2s; white-space: nowrap; }
        .iv-cookie-btn--accept { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; box-shadow: 0 2px 12px rgba(124, 58, 237, .35); }
        .iv-cookie-btn--decline { background: transparent; color: #52525b; border: 1.5px solid rgba(0,0,0,.12); }
        
        .hidden { display: none !important; }


/* ===== From blog.html ===== */

@media(min-width:640px){.sm-block{display:block !important;}}


/* ===== From contato.html ===== */

/* =========================================
           1. VARIÃVEIS, CORES E RESET
        ========================================= */
        :root {
            /* Cores Base Zinc */
            --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7;
            --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a;
            --zinc-600: #52525b; --zinc-800: #27272a; --zinc-900: #18181b;

            /* Cores de Destaque */
            --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-300: #c4b5fd; 
            --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed;
            --fuchsia-400: #e879f9; --fuchsia-500: #d946ef;
            --orange-400: #fb923c; --orange-500: #f97316;
            --sky-500: #0ea5e9; --blue-500: #3b82f6; --blue-600: #2563eb;
            
            --white: #ffffff; --black: #000000;
            --bg-color: #f8f9fa;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--bg-color); color: var(--zinc-900);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5;
        }
        ::selection { background-color: var(--violet-500); color: var(--white); }
        a { text-decoration: none; color: inherit; }
        button { border: none; background: none; font-family: inherit; cursor: pointer; }
        ul { list-style: none; }
        img, svg { max-width: 100%; display: block; }
        
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        @media (min-width: 768px) { .container { padding: 0 3rem; } }

        /* =========================================
           2. PRELOADER
        ========================================= */
        .iv-preloader { position: fixed; inset: 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); z-index: 999999; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease-out; }
        .iv-preloader.hide { opacity: 0; pointer-events: none; }
        .iv-preloader-logo { width: 32px; height: 32px; background: linear-gradient(135deg, #8b5cf6, #ec4899); border-radius: 50%; position: relative; animation: iv-pulse 1.2s ease-in-out infinite; }
        .iv-preloader-logo::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, #8b5cf6, #ec4899, #8b5cf6); border-radius: 50%; opacity: 0.3; animation: iv-rotate 2s linear infinite; }
        @keyframes iv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
        @keyframes iv-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        body:not(.iv-loaded) { visibility: hidden; }
        body.iv-loaded { visibility: visible; }

        /* =========================================
           3. BACKGROUND PARALLAX & CURSOR
        ========================================= */
        .designer-bg { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
        .designer-bg-mix { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.7; }
        .bg-orb-1 { position: absolute; top: 0; left: 0; width: 400px; height: 400px; background-color: rgba(167, 139, 250, 0.5); border-radius: 50%; filter: blur(100px); }
        .bg-orb-2 { position: absolute; top: 0; left: 0; width: 500px; height: 500px; background-color: rgba(232, 121, 249, 0.4); border-radius: 50%; filter: blur(140px); }
        @media (min-width: 768px) { .bg-orb-1 { width: 600px; height: 600px; } .bg-orb-2 { width: 800px; height: 800px; } }
        
        .designer-bg { --mouse-x: 0px; --mouse-y: 0px; }
        .parallax-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
        .parallax-layer-1 { transform: translate(calc(var(--mouse-x) * -0.2), calc(var(--mouse-y) * -0.2)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-2 { transform: translate(calc(var(--mouse-x) * 0.4), calc(var(--mouse-y) * 0.4)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-3 { transform: translate(calc(var(--mouse-x) * -0.6), calc(var(--mouse-y) * -0.6)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        
        @keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } }
        @keyframes float-medium { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(-15deg); } }
        @keyframes float-fast { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-40px) rotate(20deg); } }
        .shape-float-1 { animation: float-slow 8s ease-in-out infinite; }
        .shape-float-2 { animation: float-medium 6s ease-in-out infinite; }
        .shape-float-3 { animation: float-fast 10s ease-in-out infinite; }
        .pattern-dots { background-image: radial-gradient(rgba(0,0,0,0.1) 2px, transparent 2px); background-size: 30px 30px; opacity: 0.2; }

        @media (pointer: fine) {
            body, a, button, input, textarea, select, .cursor-pointer { cursor: none !important; }
            #cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background-color: var(--violet-500); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.15s ease-out, background-color 0.3s; }
            #cursor-outline { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1.5px solid rgba(139, 92, 246, 0.5); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s; }
            #cursor-outline.hover { width: 60px !important; height: 60px !important; background-color: rgba(139, 92, 246, 0.1) !important; border-color: rgba(217, 70, 239, 0.8) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; mix-blend-mode: normal !important; }
            #cursor-dot.hover { transform: translate(-50%, -50%) scale(0.5) !important; background-color: var(--fuchsia-500) !important; opacity: 1 !important; }
            #cursor-outline.hover-text { width: 100px; height: 100px; background-color: var(--white); border-color: transparent; mix-blend-mode: difference; z-index: 99998; }
            #cursor-dot.hover-text { opacity: 0; }
            .cursor-hidden { opacity: 0; }
        }

        /* =========================================
           4. SCROLL REVEAL & UTILITIES
        ========================================= */
        .reveal-element { opacity: 0; transform: translateY(3rem); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-element.is-visible { opacity: 1; transform: translateY(0); }
        .glass-panel { background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 30px rgba(0,0,0,0.05); }
        .bg-clip-text { -webkit-background-clip: text; background-clip: text; color: transparent; }
        .gradient-text { background-image: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); }
        
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* =========================================
           5. HEADER, MENU OVERLAY & SIDEBARS
        ========================================= */
        .social-sidebar { display: none; position: fixed; bottom: 0; flex-direction: column; align-items: center; gap: 1.5rem; z-index: 40; padding-bottom: 2rem; }
        @media (min-width: 1024px) { .social-sidebar { display: flex; } }
        .social-sidebar.left { left: 2rem; }
        .social-sidebar.right { right: 2rem; }
        .social-sidebar a { color: var(--zinc-400); transition: all 0.3s; }
        .social-sidebar a:hover { color: var(--violet-600); transform: translateY(-4px); }
        .sidebar-line { width: 1px; height: 6rem; background-color: var(--zinc-300); margin-top: 0.5rem; }
        .email-vertical { writing-mode: vertical-rl; font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; }

        .site-header { position: fixed; top: 0; width: 100%; padding: 2rem 0; z-index: 50; transition: all 0.3s; pointer-events: none; }
        .site-header.z-60 { z-index: 60; }
        .header-inner { display: flex; justify-content: space-between; align-items: center; pointer-events: auto; padding: 0 1.5rem; width: 100%; max-width: 100vw; }
        @media (min-width: 768px) { .header-inner { padding: 0 3rem; } }
        @media (min-width: 1024px) { .header-inner { padding: 0 4rem; } }
        
        .header-actions { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 60; }
        .btn-menu { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--zinc-200); background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--zinc-900); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
        .btn-menu:hover { background: var(--white); border-color: var(--violet-500); }
        .btn-menu.is-active { background: var(--zinc-900); border-color: var(--zinc-900); color: var(--white); }
        
        .btn-primary { display: none; padding: 0.75rem 1.5rem; border-radius: 9999px; background: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); color: var(--white); font-size: 0.875rem; font-weight: 700; align-items: center; gap: 0.5rem; transition: all 0.3s; }
        @media (min-width: 640px) { .btn-primary { display: flex; } }
        .btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(139,92,246,0.4); }
        
        .header-logo { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; color: var(--zinc-900); position: relative; z-index: 60; transition: transform 0.3s; }
        @media (min-width: 768px) { .header-logo { font-size: 1.5rem; } }
        .header-logo:hover { transform: scale(1.05); }

        .menu-overlay { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6rem 0; opacity: 0; transform: translateY(-100%); transition: all 0.7s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
        .menu-overlay.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .menu-bg { position: absolute; inset: 0; background-color: var(--bg-color); z-index: -10; overflow: hidden; }
        .menu-hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: all 1s ease-out; }
        .menu-hover-img.is-active { opacity: 1; transform: scale(1); }
        .menu-orb { position: absolute; top: 0; left: 0; width: 600px; height: 600px; background-color: rgba(139,92,246,0.3); border-radius: 50%; filter: blur(100px); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
        .menu-glass { position: absolute; inset: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
        
        .menu-nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; }
        @media (min-width: 768px) { .menu-nav { gap: 2rem; font-size: 3.75rem; } }
        @media (min-width: 1024px) { .menu-nav { font-size: 4.5rem; } }
        .menu-link { color: var(--zinc-800); transition: all 0.3s; }
        .menu-link:hover { transform: scale(1.05); }
        .menu-link[data-target="home"]:hover { color: var(--violet-600); }
        .menu-link[data-target="portfolio"]:hover { color: var(--blue-500); }
        .menu-link[data-target="contatos"]:hover { color: var(--orange-500); }
        .menu-link[data-target="blog"]:hover { color: var(--sky-500); }
        
        .menu-social-area { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 3rem; }
        .menu-social-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-500); }
        .menu-social-list { display: flex; gap: 1rem; color: var(--zinc-600); }
        @media (min-width: 768px) { .menu-social-list { gap: 1.5rem; } }
        .social-btn { width: 3.5rem; height: 3.5rem; background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 50%; border: 1px solid var(--zinc-200); display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .social-btn:hover { color: var(--white); background: var(--violet-600); border-color: var(--violet-600); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(139,92,246,0.3); }

        /* =========================================
           6. SEÃ‡Ã•ES ESPECÃFICAS (CONTATOS)
        ========================================= */
        .section-py { padding-top: 6rem; padding-bottom: 6rem; }
        @media (min-width: 768px) { .section-py { padding-top: 8rem; padding-bottom: 8rem; } }
        
        .page-header { padding-top: 10rem; padding-bottom: 3rem; text-align: center; }
        @media (min-width: 768px) { .page-header { padding-top: 12rem; padding-bottom: 4rem; text-align: left; } }
        
        .label-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 1rem; display: block; }
        .section-title { font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 1.5rem; }
        @media (min-width: 768px) { .section-title { font-size: 4.5rem; } }
        .section-desc { font-size: 1.125rem; color: var(--zinc-500); max-width: 36rem; line-height: 1.6; margin: 0 auto; }
        @media (min-width: 768px) { .section-desc { font-size: 1.25rem; margin: 0; } }

        /* -- Grid de Contato -- */
        .contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
        @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.3fr; gap: 4rem; } }

        /* -- Cards de InformaÃ§Ã£o -- */
        .contact-info-list { display: flex; flex-direction: column; gap: 1.5rem; }
        .contact-info-card { display: flex; align-items: flex-start; gap: 1.5rem; padding: 2rem; background: rgba(255,255,255,0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 1.5rem; border: 1px solid var(--zinc-200); transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
        .contact-info-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(139,92,246,0.1); border-color: var(--violet-300); }
        .contact-icon-box { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: linear-gradient(135deg, var(--violet-50), var(--white)); display: flex; align-items: center; justify-content: center; color: var(--violet-600); flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid rgba(139,92,246,0.1); }
        .contact-info-title { font-size: 1.25rem; font-weight: 800; color: var(--zinc-900); margin-bottom: 0.25rem; letter-spacing: -0.025em; }
        .contact-info-text { font-size: 1rem; color: var(--zinc-500); font-weight: 500; }
        .contact-info-link { color: var(--violet-600); font-weight: 700; transition: color 0.3s; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
        .contact-info-link:hover { color: var(--fuchsia-500); }

        /* -- FormulÃ¡rio Glassmorphism -- */
        .contact-form-box { background: rgba(255,255,255,0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 2rem; border: 1px solid var(--zinc-200); padding: 2.5rem 2rem; box-shadow: 0 20px 50px rgba(0,0,0,0.05); position: relative; overflow: hidden; }
        @media (min-width: 768px) { .contact-form-box { padding: 4rem; } }
        
        .form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
        @media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
        
        .form-group { margin-bottom: 1.5rem; }
        .form-label { display: block; font-size: 0.875rem; font-weight: 700; color: var(--zinc-800); margin-bottom: 0.5rem; letter-spacing: 0.025em; }
        .form-control { width: 100%; padding: 1.125rem 1.25rem; border-radius: 1rem; background: rgba(255,255,255,0.6); border: 1px solid var(--zinc-200); color: var(--zinc-900); font-family: inherit; font-size: 1rem; transition: all 0.3s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
        .form-control::placeholder { color: var(--zinc-400); }
        .form-control:focus { outline: none; border-color: var(--violet-500); background: var(--white); box-shadow: 0 0 0 4px rgba(139,92,246,0.15); }
        textarea.form-control { resize: vertical; min-height: 140px; }
        
        .btn-submit { width: 100%; padding: 1.25rem; border-radius: 9999px; background: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); color: var(--white); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.025em; display: flex; align-items: center; justify-content: center; gap: 0.75rem; transition: all 0.3s; border: none; box-shadow: 0 10px 20px rgba(139,92,246,0.2); cursor: pointer; }
        .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(139,92,246,0.4); }
        .btn-submit:active { transform: translateY(0); }

        /* -- Footer -- */
        .footer { border-top: 1px solid var(--zinc-200); background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 3rem 0; position: relative; z-index: 10; }
        .footer-top { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; }
        @media (min-width: 768px) { .footer-top { flex-direction: row; justify-content: space-between; } }
        .footer-bottom { border-top: 1px solid var(--zinc-100); margin-top: 1.25rem; padding-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; justify-content: center; }
        @media (min-width: 640px) { .footer-bottom { flex-direction: row; gap: 2rem; } }

        /* =========================================
           7. ELEMENTOS FLUTUANTES (BTT & COOKIES)
        ========================================= */
        .iv-btt-btn { position: fixed; bottom: 28px; right: 24px; z-index: 9991; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(124, 58, 237, .40); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: all .35s ease; outline-offset: 3px; }
        .iv-btt-btn.iv-btt--visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .iv-btt-btn:hover { filter: brightness(1.12); transform: translateY(-3px) scale(1.07); box-shadow: 0 8px 28px rgba(124, 58, 237, .50); }
        @media (max-width: 639px) { .iv-btt-btn { bottom: 100px; } }

        .iv-cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(140%); opacity: 0; max-width: 860px; width: calc(100% - 32px); z-index: 9990; pointer-events: none; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
        .iv-cookie-banner.iv-cookie--visible { transform: translateX(-50%) translateY(0); opacity: 1; }
        .iv-cookie-inner { pointer-events: auto; display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10); }
        @media (max-width: 640px) { .iv-cookie-inner { flex-direction: column; align-items: flex-start; gap: 14px; } }
        .iv-cookie-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
        .iv-cookie-content { flex: 1; }
        .iv-cookie-title { font-size: .95rem; font-weight: 800; color: #18181b; margin-bottom: 4px; line-height: 1.3; }
        .iv-cookie-text { font-size: .82rem; color: #71717a; line-height: 1.6; }
        .iv-cookie-link { color: #7c3aed; font-weight: 600; margin-left: 4px; }
        .iv-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .iv-cookie-btn { padding: 9px 18px; border-radius: 9999px; font-size: .82rem; font-weight: 700; transition: all .2s; white-space: nowrap; }
        .iv-cookie-btn--accept { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; box-shadow: 0 2px 12px rgba(124, 58, 237, .35); }
        .iv-cookie-btn--decline { background: transparent; color: #52525b; border: 1.5px solid rgba(0,0,0,.12); }
        
        .hidden { display: none !important; }


/* ===== From contato.html ===== */

@media(min-width:640px){.sm-block{display:block !important;}}


/* ===== From home.html ===== */

/* =========================================
           1. VARIÃVEIS, CORES E RESET
        ========================================= */
        :root {
            /* Cores Base Zinc */
            --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7;
            --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a;
            --zinc-600: #52525b; --zinc-800: #27272a; --zinc-900: #18181b;

            /* Cores de Destaque */
            --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed;
            --fuchsia-400: #e879f9; --fuchsia-500: #d946ef;
            --orange-400: #fb923c; --orange-500: #f97316;
            --sky-500: #0ea5e9; --blue-500: #3b82f6; --blue-600: #2563eb;
            
            --white: #ffffff; --black: #000000;
            --bg-color: #f8f9fa;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--bg-color); color: var(--zinc-900);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5;
        }
        ::selection { background-color: var(--violet-500); color: var(--white); }
        a { text-decoration: none; color: inherit; }
        button { border: none; background: none; font-family: inherit; cursor: pointer; }
        ul { list-style: none; }
        img, svg { max-width: 100%; display: block; }
        
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        @media (min-width: 768px) { .container { padding: 0 3rem; } }

        /* =========================================
           2. PRELOADER
        ========================================= */
        .iv-preloader { position: fixed; inset: 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); z-index: 999999; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease-out; }
        .iv-preloader.hide { opacity: 0; pointer-events: none; }
        .iv-preloader-logo { width: 32px; height: 32px; background: linear-gradient(135deg, #8b5cf6, #ec4899); border-radius: 50%; position: relative; animation: iv-pulse 1.2s ease-in-out infinite; }
        .iv-preloader-logo::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, #8b5cf6, #ec4899, #8b5cf6); border-radius: 50%; opacity: 0.3; animation: iv-rotate 2s linear infinite; }
        @keyframes iv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
        @keyframes iv-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        body:not(.iv-loaded) { visibility: hidden; }
        body.iv-loaded { visibility: visible; }

        /* =========================================
           3. BACKGROUND PARALLAX & CURSOR
        ========================================= */
        .designer-bg { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
        .designer-bg-mix { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.7; }
        .bg-orb-1 { position: absolute; top: 0; left: 0; width: 400px; height: 400px; background-color: rgba(167, 139, 250, 0.5); border-radius: 50%; filter: blur(100px); }
        .bg-orb-2 { position: absolute; top: 0; left: 0; width: 500px; height: 500px; background-color: rgba(232, 121, 249, 0.4); border-radius: 50%; filter: blur(140px); }
        @media (min-width: 768px) { .bg-orb-1 { width: 600px; height: 600px; } .bg-orb-2 { width: 800px; height: 800px; } }
        
        .designer-bg { --mouse-x: 0px; --mouse-y: 0px; }
        .parallax-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
        .parallax-layer-1 { transform: translate(calc(var(--mouse-x) * -0.2), calc(var(--mouse-y) * -0.2)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-2 { transform: translate(calc(var(--mouse-x) * 0.4), calc(var(--mouse-y) * 0.4)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-3 { transform: translate(calc(var(--mouse-x) * -0.6), calc(var(--mouse-y) * -0.6)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        
        @keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } }
        @keyframes float-medium { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(-15deg); } }
        @keyframes float-fast { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-40px) rotate(20deg); } }
        .shape-float-1 { animation: float-slow 8s ease-in-out infinite; }
        .shape-float-2 { animation: float-medium 6s ease-in-out infinite; }
        .shape-float-3 { animation: float-fast 10s ease-in-out infinite; }
        .pattern-dots { background-image: radial-gradient(rgba(0,0,0,0.1) 2px, transparent 2px); background-size: 30px 30px; opacity: 0.2; }

        @media (pointer: fine) {
            body, a, button, input, textarea, select, .cursor-pointer { cursor: none !important; }
            #cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background-color: var(--violet-500); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.15s ease-out, background-color 0.3s; }
            #cursor-outline { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1.5px solid rgba(139, 92, 246, 0.5); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s; }
            #cursor-outline.hover { width: 60px !important; height: 60px !important; background-color: rgba(139, 92, 246, 0.1) !important; border-color: rgba(217, 70, 239, 0.8) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; mix-blend-mode: normal !important; }
            #cursor-dot.hover { transform: translate(-50%, -50%) scale(0.5) !important; background-color: var(--fuchsia-500) !important; opacity: 1 !important; }
            #cursor-outline.hover-text { width: 100px; height: 100px; background-color: var(--white); border-color: transparent; mix-blend-mode: difference; z-index: 99998; }
            #cursor-dot.hover-text { opacity: 0; }
            .cursor-hidden { opacity: 0; }
        }

        /* =========================================
           4. SCROLL REVEAL & UTILITIES
        ========================================= */
        .reveal-element { opacity: 0; transform: translateY(3rem); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-element.is-visible { opacity: 1; transform: translateY(0); }
        .glass-panel { background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 30px rgba(0,0,0,0.05); }
        .bg-clip-text { -webkit-background-clip: text; background-clip: text; color: transparent; }
        .gradient-text { background-image: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); }
        
        /* Ocultar scrollbar */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* =========================================
           5. HEADER, MENU OVERLAY & SIDEBARS
        ========================================= */
        .social-sidebar { display: none; position: fixed; bottom: 0; flex-direction: column; align-items: center; gap: 1.5rem; z-index: 40; padding-bottom: 2rem; }
        @media (min-width: 1024px) { .social-sidebar { display: flex; } }
        .social-sidebar.left { left: 2rem; }
        .social-sidebar.right { right: 2rem; }
        .social-sidebar a { color: var(--zinc-400); transition: all 0.3s; }
        .social-sidebar a:hover { color: var(--violet-600); transform: translateY(-4px); }
        .sidebar-line { width: 1px; height: 6rem; background-color: var(--zinc-300); margin-top: 0.5rem; }
        .email-vertical { writing-mode: vertical-rl; font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; }

        .site-header { position: fixed; top: 0; width: 100%; padding: 2rem 0; z-index: 50; transition: all 0.3s; pointer-events: none; }
        .site-header.z-60 { z-index: 60; }
        .header-inner { display: flex; justify-content: space-between; align-items: center; pointer-events: auto; padding: 0 1.5rem; width: 100%; max-width: 100vw; }
        @media (min-width: 768px) { .header-inner { padding: 0 3rem; } }
        @media (min-width: 1024px) { .header-inner { padding: 0 4rem; } }
        
        .header-actions { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 60; }
        .btn-menu { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--zinc-200); background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--zinc-900); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
        .btn-menu:hover { background: var(--white); border-color: var(--violet-500); }
        .btn-menu.is-active { background: var(--zinc-900); border-color: var(--zinc-900); color: var(--white); }
        
        .btn-primary { display: none; padding: 0.75rem 1.5rem; border-radius: 9999px; background: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); color: var(--white); font-size: 0.875rem; font-weight: 700; align-items: center; gap: 0.5rem; transition: all 0.3s; }
        @media (min-width: 640px) { .btn-primary { display: flex; } }
        .btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(139,92,246,0.4); }
        
        .header-logo { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; color: var(--zinc-900); position: relative; z-index: 60; transition: transform 0.3s; }
        @media (min-width: 768px) { .header-logo { font-size: 1.5rem; } }
        .header-logo:hover { transform: scale(1.05); }

        .menu-overlay { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6rem 0; opacity: 0; transform: translateY(-100%); transition: all 0.7s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
        .menu-overlay.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .menu-bg { position: absolute; inset: 0; background-color: var(--bg-color); z-index: -10; overflow: hidden; }
        .menu-hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: all 1s ease-out; }
        .menu-hover-img.is-active { opacity: 1; transform: scale(1); }
        .menu-orb { position: absolute; top: 0; left: 0; width: 600px; height: 600px; background-color: rgba(139,92,246,0.3); border-radius: 50%; filter: blur(100px); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
        .menu-glass { position: absolute; inset: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
        
        .menu-nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; }
        @media (min-width: 768px) { .menu-nav { gap: 2rem; font-size: 3.75rem; } }
        @media (min-width: 1024px) { .menu-nav { font-size: 4.5rem; } }
        .menu-link { color: var(--zinc-800); transition: all 0.3s; }
        .menu-link:hover { transform: scale(1.05); }
        .menu-link[data-target="home"]:hover { color: var(--violet-600); }
        .menu-link[data-target="portfolio"]:hover { color: var(--blue-500); }
        .menu-link[data-target="contatos"]:hover { color: var(--orange-500); }
        .menu-link[data-target="blog"]:hover { color: var(--sky-500); }
        
        .menu-social-area { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 3rem; }
        .menu-social-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-500); }
        .menu-social-list { display: flex; gap: 1rem; color: var(--zinc-600); }
        @media (min-width: 768px) { .menu-social-list { gap: 1.5rem; } }
        .social-btn { width: 3.5rem; height: 3.5rem; background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 50%; border: 1px solid var(--zinc-200); display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .social-btn:hover { color: var(--white); background: var(--violet-600); border-color: var(--violet-600); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(139,92,246,0.3); }

        /* =========================================
           6. SEÃ‡Ã•ES ESPECÃFICAS
        ========================================= */
        .section-py { padding-top: 6rem; padding-bottom: 6rem; }
        @media (min-width: 768px) { .section-py { padding-top: 8rem; padding-bottom: 8rem; } }
        .label-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 1rem; display: block; }
        .section-title { font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1.1; }
        @media (min-width: 768px) { .section-title { font-size: 3.75rem; } }

        /* -- Hero -- */
        .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 8rem; padding-bottom: 3rem; }
        @media (min-width: 768px) { .hero { padding-top: 10rem; padding-bottom: 6rem; } }
        .hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: flex-end; position: relative; z-index: 30; }
        @media (min-width: 1024px) { .hero-grid { grid-template-columns: repeat(12, 1fr); } }
        .hero-img-card { width: 100%; height: 50vh; border-radius: 1.5rem; overflow: hidden; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.05); background: var(--white); }
        @media (min-width: 1024px) { .hero-img-card { grid-column: span 8; height: 70vh; } }
        .image-reveal-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
        .hero-img-card:hover .image-reveal-img { transform: scale(1.05); }
        .hero-text-area { display: flex; flex-direction: column; justify-content: flex-end; }
        @media (min-width: 1024px) { .hero-text-area { grid-column: span 4; padding-left: 2rem; } }
        .hero-title { font-size: 3rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 1.5rem; }
        @media (min-width: 768px) { .hero-title { font-size: 3.75rem; } }
        @media (min-width: 1024px) { .hero-title { font-size: 4.5rem; } }
        .hero-desc { color: var(--zinc-500); font-size: 1.125rem; font-weight: 500; line-height: 1.6; margin-bottom: 2rem; }
        @media (min-width: 768px) { .hero-desc { font-size: 1.25rem; } }
        
        .btn-outline { padding: 1rem 2rem; border-radius: 9999px; border: 1px solid var(--zinc-200); background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--zinc-800); font-weight: 700; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.75rem; transition: all 0.3s; }
        .btn-outline:hover { border-color: var(--violet-500); background: var(--white); }

        /* -- Manifesto -- */
        .manifesto-text { font-size: 1.5rem; font-weight: 300; line-height: 1.6; color: var(--zinc-800); }
        @media (min-width: 768px) { .manifesto-text { font-size: 2.25rem; } }
        @media (min-width: 1024px) { .manifesto-text { font-size: 3rem; } }

        /* -- Marcas -- */
        .marcas-section { border-top: 1px solid var(--zinc-200); border-bottom: 1px solid var(--zinc-200); }
        .marquee-container { width: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
        .marquee-track { display: flex; width: max-content; animation: scroll-x 40s linear infinite; }
        .marquee-track:hover { animation-play-state: paused; }
        .marquee-group { display: flex; gap: 4rem; align-items: center; flex-shrink: 0; padding-right: 4rem; }
        @media (min-width: 768px) { .marquee-group { gap: 6rem; padding-right: 6rem; } }
        @keyframes scroll-x { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .marca-item { font-size: 1.875rem; font-weight: 900; letter-spacing: -0.05em; color: var(--zinc-300); white-space: nowrap; padding: 0 1rem; transition: color 0.3s; cursor: pointer; }
        @media (min-width: 768px) { .marca-item { font-size: 2.25rem; } }
        .marca-item:hover { color: var(--zinc-900); }

        /* -- Bento Grid -- */
        .bento-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
        @media (min-width: 768px) { .bento-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
        @media (min-width: 1024px) { .bento-grid { grid-template-columns: repeat(3, 1fr); } }
        
        .bento-card { position: relative; width: 100%; height: 100%; min-height: 350px; border-radius: 1.5rem; overflow: hidden; cursor: pointer; }
        @media (min-width: 768px) { .bento-card { min-height: 400px; } }
        .bento-card.col-2 { grid-column: span 1; }
        @media (min-width: 1024px) { .bento-card.col-2 { grid-column: span 2; } }
        
        .bento-bg { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); z-index: 10; pointer-events: none; }
        .bento-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2rem; z-index: 20; }
        .bento-num { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-300); margin-bottom: 1rem; display: block; }
        .bento-title { color: var(--white); font-size: 1.875rem; font-weight: 900; letter-spacing: -0.05em; }
        @media (min-width: 768px) { .bento-title { font-size: 2.25rem; } }
        .bento-desc { color: var(--zinc-300); font-size: 0.875rem; margin-top: 0.5rem; max-width: 24rem; }

        /* -- Portfolio -- */
        .portfolio-card { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 1.5rem; overflow: hidden; display: block; }
        @media (min-width: 768px) { .portfolio-card { aspect-ratio: 21/9; border-radius: 1.5rem; } }
        .portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); opacity: 0; transition: opacity 0.5s; z-index: 10; }
        .portfolio-card:hover .portfolio-overlay { opacity: 1; }
        .portfolio-content { position: absolute; bottom: 0; left: 0; padding: 2rem; z-index: 20; transform: translateY(1rem); opacity: 0; transition: all 0.5s; }
        .portfolio-card:hover .portfolio-content { transform: translateY(0); opacity: 1; }
        .portfolio-tag { color: var(--violet-300); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
        .portfolio-title { color: var(--white); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.05em; margin-top: 0.25rem; }

        /* -- Metodologia -- */
        .metodo-section { background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--zinc-100); border-bottom: 1px solid var(--zinc-100); }
        .accordion-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
        @media (min-width: 1024px) { .accordion-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem; } }
        .accordion-item { border-bottom: 1px solid var(--zinc-200); }
        .accordion-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; text-align: left; transition: color 0.3s; }
        .accordion-btn:hover { color: var(--violet-600); }
        .accordion-title { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; }
        @media (min-width: 768px) { .accordion-title { font-size: 1.5rem; } }
        .accordion-content { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.5s cubic-bezier(0.16,1,0.3,1); }
        .accordion-content.is-open { max-height: 200px; opacity: 1; padding-bottom: 2rem; }
        .accordion-text { color: var(--zinc-500); }

        /* -- Planos -- */
        .pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        @media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
        .pricing-card { padding: 2rem; border-radius: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; transition: box-shadow 0.3s; }
        @media (min-width: 768px) { .pricing-card { padding: 2.5rem; } }
        .pricing-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
        .pricing-card.light { background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0,0,0,0.05); }
        .pricing-card.dark { background-color: var(--zinc-900); color: var(--white); position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
        .pricing-badge { position: absolute; top: 1.25rem; right: 1.25rem; background: linear-gradient(to right, var(--violet-500), var(--fuchsia-500)); color: var(--white); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.25rem 1rem; border-radius: 9999px; }
        .pricing-title { font-size: 1.875rem; font-weight: 900; letter-spacing: -0.05em; margin-top: 0.25rem; }
        .pricing-desc { font-size: 0.875rem; margin-top: 0.5rem; }
        .pricing-card.light .pricing-desc { color: var(--zinc-500); }
        .pricing-card.dark .pricing-desc { color: var(--zinc-400); }
        .pricing-features { margin-top: 1.5rem; font-size: 0.875rem; }
        .pricing-features li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
        .pricing-bullet { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
        .pricing-price { font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; }
        .pricing-price span { font-size: 0.875rem; font-weight: 500; letter-spacing: normal; }
        .btn-pricing-light { width: 100%; padding: 1rem; border-radius: 9999px; border: 1px solid var(--zinc-200); font-weight: 700; font-size: 0.875rem; transition: all 0.3s; margin-top: 1rem; }
        .btn-pricing-light:hover { background-color: var(--zinc-900); color: var(--white); border-color: var(--zinc-900); }
        .btn-pricing-dark { width: 100%; padding: 1rem; border-radius: 9999px; background: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); color: var(--white); font-weight: 700; font-size: 0.875rem; transition: all 0.3s; margin-top: 1rem; border: none; }
        .btn-pricing-dark:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(139,92,246,0.3); }

        /* -- Instagram & Blog -- */
        .grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        @media (min-width: 768px) { .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
        .grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
        
        .insta-card { position: relative; aspect-ratio: 1/1; border-radius: 1.5rem; overflow: hidden; background: var(--zinc-100); border: 1px solid var(--zinc-100); cursor: pointer; }
        .insta-overlay { position: absolute; inset: 0; background: rgba(124,58,237,0.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; gap: 1.5rem; color: var(--white); pointer-events: none; }
        .insta-card:hover .insta-overlay { opacity: 1; }
        .insta-stat { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.125rem; transform: translateY(1rem); transition: transform 0.5s; }
        .insta-card:hover .insta-stat { transform: translateY(0); }

        .blog-card { display: flex; flex-direction: column; background: var(--white); border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--zinc-100); box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: all 0.5s; cursor: pointer; height: 100%; }
        .blog-card:hover { box-shadow: 0 20px 40px rgba(139,92,246,0.15); }
        .blog-img-wrap { width: 100%; height: 16rem; overflow: hidden; position: relative; }
        @media (min-width: 768px) { .blog-img-wrap { height: 18rem; } }
        .blog-tag { position: absolute; top: 1.5rem; left: 1.5rem; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet-600); }
        .blog-content { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; }
        .blog-date { font-size: 0.75rem; color: var(--zinc-400); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
        .blog-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 1rem; transition: color 0.3s; }
        .blog-card:hover .blog-title { color: var(--violet-600); }
        .blog-excerpt { color: var(--zinc-500); font-size: 0.875rem; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; }
        .blog-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-900); transition: color 0.3s; margin-top: auto; }
        .blog-card:hover .blog-link { color: var(--violet-600); }

        /* -- CTA & Footer -- */
        .cta-section { text-align: center; }
        .cta-title { font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 2rem; line-height: 0.9; }
        @media (min-width: 768px) { .cta-title { font-size: 4.5rem; } }
        @media (min-width: 1024px) { .cta-title { font-size: 6rem; } }
        
        .footer { border-top: 1px solid var(--zinc-200); background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 3rem 0; position: relative; z-index: 10; }
        .footer-top { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; }
        @media (min-width: 768px) { .footer-top { flex-direction: row; justify-content: space-between; } }
        .footer-bottom { border-top: 1px solid var(--zinc-100); margin-top: 1.25rem; padding-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; justify-content: center; }
        @media (min-width: 640px) { .footer-bottom { flex-direction: row; gap: 2rem; } }

        /* =========================================
           7. ELEMENTOS FLUTUANTES (BTT & COOKIES)
        ========================================= */
        .iv-btt-btn { position: fixed; bottom: 28px; right: 24px; z-index: 9991; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(124, 58, 237, .40); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: all .35s ease; outline-offset: 3px; }
        .iv-btt-btn.iv-btt--visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .iv-btt-btn:hover { filter: brightness(1.12); transform: translateY(-3px) scale(1.07); box-shadow: 0 8px 28px rgba(124, 58, 237, .50); }
        @media (max-width: 639px) { .iv-btt-btn { bottom: 100px; } }

        .iv-cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(140%); opacity: 0; max-width: 860px; width: calc(100% - 32px); z-index: 9990; pointer-events: none; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
        .iv-cookie-banner.iv-cookie--visible { transform: translateX(-50%) translateY(0); opacity: 1; }
        .iv-cookie-inner { pointer-events: auto; display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10); }
        @media (max-width: 640px) { .iv-cookie-inner { flex-direction: column; align-items: flex-start; gap: 14px; } }
        .iv-cookie-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
        .iv-cookie-content { flex: 1; }
        .iv-cookie-title { font-size: .95rem; font-weight: 800; color: #18181b; margin-bottom: 4px; line-height: 1.3; }
        .iv-cookie-text { font-size: .82rem; color: #71717a; line-height: 1.6; }
        .iv-cookie-link { color: #7c3aed; font-weight: 600; margin-left: 4px; }
        .iv-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .iv-cookie-btn { padding: 9px 18px; border-radius: 9999px; font-size: .82rem; font-weight: 700; transition: all .2s; white-space: nowrap; }
        .iv-cookie-btn--accept { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; box-shadow: 0 2px 12px rgba(124, 58, 237, .35); }
        .iv-cookie-btn--decline { background: transparent; color: #52525b; border: 1.5px solid rgba(0,0,0,.12); }
        
        .hidden { display: none !important; }


/* ===== From home.html ===== */

@media(min-width:1024px){.lg-block{display:block !important;}}


/* ===== From home.html ===== */

@media(min-width:640px){.sm-block{display:block !important;}}


/* ===== From pagina de detalhes do portfolio.html ===== */

/* =========================================
           1. VARIÃVEIS, CORES E RESET
        ========================================= */
        :root {
            /* Cores Base Zinc */
            --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7;
            --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a;
            --zinc-600: #52525b; --zinc-800: #27272a; --zinc-900: #18181b;

            /* Cores de Destaque */
            --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-300: #c4b5fd; 
            --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed;
            --fuchsia-400: #e879f9; --fuchsia-500: #d946ef;
            --orange-400: #fb923c; --orange-500: #f97316;
            --sky-500: #0ea5e9; --blue-500: #3b82f6; --blue-600: #2563eb;
            --pink-500: #ec4899;
            
            --white: #ffffff; --black: #000000;
            --bg-color: #f8f9fa;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--bg-color); color: var(--zinc-900);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5;
        }
        ::selection { background-color: var(--violet-500); color: var(--white); }
        a { text-decoration: none; color: inherit; }
        button { border: none; background: none; font-family: inherit; cursor: pointer; }
        ul { list-style: none; }
        img, svg { max-width: 100%; display: block; }
        
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        @media (min-width: 768px) { .container { padding: 0 3rem; } }

        /* =========================================
           2. PRELOADER
        ========================================= */
        .iv-preloader { position: fixed; inset: 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); z-index: 999999; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease-out; }
        .iv-preloader.hide { opacity: 0; pointer-events: none; }
        .iv-preloader-logo { width: 32px; height: 32px; background: linear-gradient(135deg, #8b5cf6, #ec4899); border-radius: 50%; position: relative; animation: iv-pulse 1.2s ease-in-out infinite; }
        .iv-preloader-logo::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, #8b5cf6, #ec4899, #8b5cf6); border-radius: 50%; opacity: 0.3; animation: iv-rotate 2s linear infinite; }
        @keyframes iv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
        @keyframes iv-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        body:not(.iv-loaded) { visibility: hidden; }
        body.iv-loaded { visibility: visible; }

        /* =========================================
           3. BACKGROUND PARALLAX & CURSOR
        ========================================= */
        .designer-bg { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
        .designer-bg-mix { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.7; }
        .bg-orb-1 { position: absolute; top: 0; left: 0; width: 400px; height: 400px; background-color: rgba(167, 139, 250, 0.5); border-radius: 50%; filter: blur(100px); }
        .bg-orb-2 { position: absolute; top: 0; left: 0; width: 500px; height: 500px; background-color: rgba(232, 121, 249, 0.4); border-radius: 50%; filter: blur(140px); }
        @media (min-width: 768px) { .bg-orb-1 { width: 600px; height: 600px; } .bg-orb-2 { width: 800px; height: 800px; } }
        
        .designer-bg { --mouse-x: 0px; --mouse-y: 0px; }
        .parallax-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
        .parallax-layer-1 { transform: translate(calc(var(--mouse-x) * -0.2), calc(var(--mouse-y) * -0.2)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-2 { transform: translate(calc(var(--mouse-x) * 0.4), calc(var(--mouse-y) * 0.4)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-3 { transform: translate(calc(var(--mouse-x) * -0.6), calc(var(--mouse-y) * -0.6)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        
        @keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } }
        @keyframes float-medium { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(-15deg); } }
        @keyframes float-fast { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-40px) rotate(20deg); } }
        .shape-float-1 { animation: float-slow 8s ease-in-out infinite; }
        .shape-float-2 { animation: float-medium 6s ease-in-out infinite; }
        .shape-float-3 { animation: float-fast 10s ease-in-out infinite; }
        .pattern-dots { background-image: radial-gradient(rgba(0,0,0,0.1) 2px, transparent 2px); background-size: 30px 30px; opacity: 0.2; }

        @media (pointer: fine) {
            body, a, button, input, textarea, select, .cursor-pointer { cursor: none !important; }
            #cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background-color: var(--violet-500); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.15s ease-out, background-color 0.3s; }
            #cursor-outline { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1.5px solid rgba(139, 92, 246, 0.5); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s; }
            #cursor-outline.hover { width: 60px !important; height: 60px !important; background-color: rgba(139, 92, 246, 0.1) !important; border-color: rgba(217, 70, 239, 0.8) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; mix-blend-mode: normal !important; }
            #cursor-dot.hover { transform: translate(-50%, -50%) scale(0.5) !important; background-color: var(--fuchsia-500) !important; opacity: 1 !important; }
            #cursor-outline.hover-text { width: 100px; height: 100px; background-color: var(--white); border-color: transparent; mix-blend-mode: difference; z-index: 99998; }
            #cursor-dot.hover-text { opacity: 0; }
            .cursor-hidden { opacity: 0; }
        }

        /* =========================================
           4. SCROLL REVEAL & UTILITIES
        ========================================= */
        .reveal-element { opacity: 0; transform: translateY(3rem); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-element.is-visible { opacity: 1; transform: translateY(0); }
        .bg-clip-text { -webkit-background-clip: text; background-clip: text; color: transparent; }
        .gradient-text { background-image: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); }
        
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* =========================================
           5. HEADER, MENU OVERLAY & SIDEBARS
        ========================================= */
        .social-sidebar { display: none; position: fixed; bottom: 0; flex-direction: column; align-items: center; gap: 1.5rem; z-index: 40; padding-bottom: 2rem; }
        @media (min-width: 1024px) { .social-sidebar { display: flex; } }
        .social-sidebar.left { left: 2rem; }
        .social-sidebar.right { right: 2rem; }
        .social-sidebar a { color: var(--zinc-400); transition: all 0.3s; }
        .social-sidebar a:hover { color: var(--violet-600); transform: translateY(-4px); }
        .sidebar-line { width: 1px; height: 6rem; background-color: var(--zinc-300); margin-top: 0.5rem; }
        .email-vertical { writing-mode: vertical-rl; font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; }

        .site-header { position: fixed; top: 0; width: 100%; padding: 2rem 0; z-index: 50; transition: all 0.3s; pointer-events: none; }
        .site-header.z-60 { z-index: 60; }
        .site-header.scrolled { background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
        .header-inner { display: flex; justify-content: space-between; align-items: center; pointer-events: auto; padding: 0 1.5rem; width: 100%; max-width: 100vw; }
        @media (min-width: 768px) { .header-inner { padding: 0 3rem; } }
        @media (min-width: 1024px) { .header-inner { padding: 0 4rem; } }
        
        .header-actions { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 60; }
        .btn-menu { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--zinc-200); background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--zinc-900); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
        .btn-menu:hover { background: var(--white); border-color: var(--violet-500); }
        .btn-menu.is-active { background: var(--zinc-900); border-color: var(--zinc-900); color: var(--white); }
        
        .btn-primary { display: none; padding: 0.75rem 1.5rem; border-radius: 9999px; background: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); color: var(--white); font-size: 0.875rem; font-weight: 700; align-items: center; gap: 0.5rem; transition: all 0.3s; }
        @media (min-width: 640px) { .btn-primary { display: flex; } }
        .btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(139,92,246,0.4); }
        
        .header-logo { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; color: var(--zinc-900); position: relative; z-index: 60; transition: transform 0.3s; }
        @media (min-width: 768px) { .header-logo { font-size: 1.5rem; } }
        .header-logo:hover { transform: scale(1.05); }

        .menu-overlay { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6rem 0; opacity: 0; transform: translateY(-100%); transition: all 0.7s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
        .menu-overlay.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .menu-bg { position: absolute; inset: 0; background-color: var(--bg-color); z-index: -10; overflow: hidden; }
        .menu-hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: all 1s ease-out; }
        .menu-hover-img.is-active { opacity: 1; transform: scale(1); }
        .menu-orb { position: absolute; top: 0; left: 0; width: 600px; height: 600px; background-color: rgba(139,92,246,0.3); border-radius: 50%; filter: blur(100px); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
        .menu-glass { position: absolute; inset: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
        
        .menu-nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; }
        @media (min-width: 768px) { .menu-nav { gap: 2rem; font-size: 3.75rem; } }
        @media (min-width: 1024px) { .menu-nav { font-size: 4.5rem; } }
        .menu-link { color: var(--zinc-800); transition: all 0.3s; }
        .menu-link:hover { transform: scale(1.05); }
        
        .menu-social-area { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 3rem; }
        .menu-social-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-500); }
        .menu-social-list { display: flex; gap: 1rem; color: var(--zinc-600); }
        @media (min-width: 768px) { .menu-social-list { gap: 1.5rem; } }
        .social-btn { width: 3.5rem; height: 3.5rem; background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 50%; border: 1px solid var(--zinc-200); display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .social-btn:hover { color: var(--white); background: var(--violet-600); border-color: var(--violet-600); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(139,92,246,0.3); }

        /* =========================================
           6. SEÃ‡ÃƒO DE DETALHES DO PROJETO
        ========================================= */
        .section-py { padding-top: 6rem; padding-bottom: 6rem; }
        @media (min-width: 768px) { .section-py { padding-top: 8rem; padding-bottom: 8rem; } }
        
        /* BotÃ£o Voltar */
        .back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--zinc-500); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.3s; margin-top: 8rem; margin-bottom: 2rem; position: relative; z-index: 20; }
        .back-link:hover { color: var(--violet-600); }
        
        /* Header do Projeto (TÃ­tulo antes da Imagem) */
        .project-header-top { margin-bottom: 3rem; }
        .project-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 1.5rem; color: var(--zinc-900); }
        @media (min-width: 768px) { .project-title { font-size: 4rem; } }
        .project-intro { font-size: 1.125rem; color: var(--zinc-500); font-weight: 500; line-height: 1.6; max-width: 800px; }
        @media (min-width: 768px) { .project-intro { font-size: 1.25rem; } }

        /* Hero do Projeto (Imagem Grande) */
        .project-hero { position: relative; border-radius: 2rem; overflow: hidden; width: 100%; aspect-ratio: 16/9; margin-bottom: 4rem; z-index: 10; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }
        @media (min-width: 768px) { .project-hero { aspect-ratio: 21/9; } }
        .project-hero img { width: 100%; height: 100%; object-fit: cover; }
        
        /* Grelha de ConteÃºdo do Projeto */
        .project-container { position: relative; z-index: 20; max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
        @media (min-width: 1024px) { .project-container { grid-template-columns: 1fr 340px; gap: 4rem; } }

        /* Coluna Principal (Esquerda) */
        .project-main { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 2rem; border: 1px solid var(--zinc-100); padding: 3rem 2rem; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05); }
        @media (min-width: 768px) { .project-main { padding: 4rem; } }
        
        .project-content h2 { font-size: 1.5rem; font-weight: 800; color: var(--zinc-900); margin-top: 0; margin-bottom: 1rem; letter-spacing: -0.025em; display: flex; align-items: center; gap: 0.75rem; }
        .project-content h2:not(:first-child) { margin-top: 3rem; }
        .project-content h2::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--violet-500); }
        .project-content p { color: var(--zinc-700); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.5rem; font-weight: 400; }
        
        .project-gallery { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; }
        @media (min-width: 640px) { .project-gallery { grid-template-columns: repeat(2, 1fr); } }
        .project-gallery img { width: 100%; border-radius: 1rem; object-fit: cover; aspect-ratio: 4/3; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: transform 0.3s; cursor: pointer; }
        .project-gallery img:hover { transform: scale(1.03); }

        /* Barra Lateral Metadados (Direita) */
        .project-sidebar { position: sticky; top: 8rem; display: flex; flex-direction: column; gap: 1.5rem; }
        
        .meta-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 1.5rem; border: 1px solid var(--zinc-200); padding: 2rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05); }
        .meta-title { font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-900); margin-bottom: 1.5rem; border-bottom: 1px solid var(--zinc-200); padding-bottom: 1rem; }
        
        .meta-list { display: flex; flex-direction: column; gap: 1.25rem; }
        .meta-item-label { font-size: 0.75rem; color: var(--zinc-400); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.25rem; }
        .meta-item-value { font-size: 1rem; color: var(--zinc-800); font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.5rem; }
        
        .service-tag { background: var(--violet-50); color: var(--violet-600); font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 9999px; border: 1px solid rgba(139,92,246,0.2); }

        .btn-visit { width: 100%; padding: 1.125rem; border-radius: 1rem; background: var(--zinc-900); color: var(--white); font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s; margin-top: 2rem; }
        .btn-visit:hover { background: var(--violet-600); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(124,58,237,0.2); }

        /* -- CTA & Footer -- */
        .cta-section { text-align: center; margin-top: 6rem; border-top: 1px solid var(--zinc-100); background: rgba(255,255,255,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 6rem 1.5rem; }
        .cta-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 1.5rem; line-height: 1.1; }
        @media (min-width: 768px) { .cta-title { font-size: 4rem; } }
        
        .footer { border-top: 1px solid var(--zinc-200); background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 3rem 0; position: relative; z-index: 10; }
        .footer-top { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; }
        @media (min-width: 768px) { .footer-top { flex-direction: row; justify-content: space-between; } }
        .footer-bottom { border-top: 1px solid var(--zinc-100); margin-top: 1.25rem; padding-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; justify-content: center; }
        @media (min-width: 640px) { .footer-bottom { flex-direction: row; gap: 2rem; } }

        /* =========================================
           7. ELEMENTOS FLUTUANTES (BTT & COOKIES)
        ========================================= */
        .iv-btt-btn { position: fixed; bottom: 28px; right: 24px; z-index: 9991; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(124, 58, 237, .40); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: all .35s ease; outline-offset: 3px; }
        .iv-btt-btn.iv-btt--visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .iv-btt-btn:hover { filter: brightness(1.12); transform: translateY(-3px) scale(1.07); box-shadow: 0 8px 28px rgba(124, 58, 237, .50); }
        @media (max-width: 639px) { .iv-btt-btn { bottom: 100px; } }

        .iv-cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(140%); opacity: 0; max-width: 860px; width: calc(100% - 32px); z-index: 9990; pointer-events: none; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
        .iv-cookie-banner.iv-cookie--visible { transform: translateX(-50%) translateY(0); opacity: 1; }
        .iv-cookie-inner { pointer-events: auto; display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10); }
        @media (max-width: 640px) { .iv-cookie-inner { flex-direction: column; align-items: flex-start; gap: 14px; } }
        .iv-cookie-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
        .iv-cookie-content { flex: 1; }
        .iv-cookie-title { font-size: .95rem; font-weight: 800; color: #18181b; margin-bottom: 4px; line-height: 1.3; }
        .iv-cookie-text { font-size: .82rem; color: #71717a; line-height: 1.6; }
        .iv-cookie-link { color: #7c3aed; font-weight: 600; margin-left: 4px; }
        .iv-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .iv-cookie-btn { padding: 9px 18px; border-radius: 9999px; font-size: .82rem; font-weight: 700; transition: all .2s; white-space: nowrap; }
        .iv-cookie-btn--accept { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; box-shadow: 0 2px 12px rgba(124, 58, 237, .35); }
        .iv-cookie-btn--decline { background: transparent; color: #52525b; border: 1.5px solid rgba(0,0,0,.12); }
        
        .hidden { display: none !important; }


/* ===== From pagina de post.html ===== */

/* =========================================
           1. VARIÃVEIS, CORES E RESET
        ========================================= */
        :root {
            /* Cores Base Zinc */
            --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7;
            --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a;
            --zinc-600: #52525b; --zinc-800: #27272a; --zinc-900: #18181b;

            /* Cores de Destaque */
            --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-300: #c4b5fd; 
            --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed;
            --fuchsia-400: #e879f9; --fuchsia-500: #d946ef;
            --orange-400: #fb923c; --orange-500: #f97316;
            --sky-500: #0ea5e9; --blue-500: #3b82f6; --blue-600: #2563eb;
            --pink-500: #ec4899;
            
            --white: #ffffff; --black: #000000;
            --bg-color: #f8f9fa;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--bg-color); color: var(--zinc-900);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5;
        }
        ::selection { background-color: var(--violet-500); color: var(--white); }
        a { text-decoration: none; color: inherit; }
        button { border: none; background: none; font-family: inherit; cursor: pointer; }
        ul { list-style: none; }
        img, svg { max-width: 100%; display: block; }
        
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        @media (min-width: 768px) { .container { padding: 0 3rem; } }

        /* =========================================
           2. PRELOADER
        ========================================= */
        .iv-preloader { position: fixed; inset: 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); z-index: 999999; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease-out; }
        .iv-preloader.hide { opacity: 0; pointer-events: none; }
        .iv-preloader-logo { width: 32px; height: 32px; background: linear-gradient(135deg, #8b5cf6, #ec4899); border-radius: 50%; position: relative; animation: iv-pulse 1.2s ease-in-out infinite; }
        .iv-preloader-logo::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, #8b5cf6, #ec4899, #8b5cf6); border-radius: 50%; opacity: 0.3; animation: iv-rotate 2s linear infinite; }
        @keyframes iv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
        @keyframes iv-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        body:not(.iv-loaded) { visibility: hidden; }
        body.iv-loaded { visibility: visible; }

        /* =========================================
           3. BACKGROUND PARALLAX & CURSOR
        ========================================= */
        .designer-bg { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
        .designer-bg-mix { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.7; }
        .bg-orb-1 { position: absolute; top: 0; left: 0; width: 400px; height: 400px; background-color: rgba(167, 139, 250, 0.5); border-radius: 50%; filter: blur(100px); }
        .bg-orb-2 { position: absolute; top: 0; left: 0; width: 500px; height: 500px; background-color: rgba(232, 121, 249, 0.4); border-radius: 50%; filter: blur(140px); }
        @media (min-width: 768px) { .bg-orb-1 { width: 600px; height: 600px; } .bg-orb-2 { width: 800px; height: 800px; } }
        
        .designer-bg { --mouse-x: 0px; --mouse-y: 0px; }
        .parallax-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
        .parallax-layer-1 { transform: translate(calc(var(--mouse-x) * -0.2), calc(var(--mouse-y) * -0.2)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-2 { transform: translate(calc(var(--mouse-x) * 0.4), calc(var(--mouse-y) * 0.4)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-3 { transform: translate(calc(var(--mouse-x) * -0.6), calc(var(--mouse-y) * -0.6)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        
        @keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } }
        @keyframes float-medium { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(-15deg); } }
        @keyframes float-fast { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-40px) rotate(20deg); } }
        .shape-float-1 { animation: float-slow 8s ease-in-out infinite; }
        .shape-float-2 { animation: float-medium 6s ease-in-out infinite; }
        .shape-float-3 { animation: float-fast 10s ease-in-out infinite; }
        .pattern-dots { background-image: radial-gradient(rgba(0,0,0,0.1) 2px, transparent 2px); background-size: 30px 30px; opacity: 0.2; }

        @media (pointer: fine) {
            body, a, button, input, textarea, select, .cursor-pointer { cursor: none !important; }
            #cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background-color: var(--violet-500); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.15s ease-out, background-color 0.3s; }
            #cursor-outline { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1.5px solid rgba(139, 92, 246, 0.5); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s; }
            #cursor-outline.hover { width: 60px !important; height: 60px !important; background-color: rgba(139, 92, 246, 0.1) !important; border-color: rgba(217, 70, 239, 0.8) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; mix-blend-mode: normal !important; }
            #cursor-dot.hover { transform: translate(-50%, -50%) scale(0.5) !important; background-color: var(--fuchsia-500) !important; opacity: 1 !important; }
            #cursor-outline.hover-text { width: 100px; height: 100px; background-color: var(--white); border-color: transparent; mix-blend-mode: difference; z-index: 99998; }
            #cursor-dot.hover-text { opacity: 0; }
            .cursor-hidden { opacity: 0; }
        }

        /* =========================================
           4. SCROLL REVEAL & UTILITIES
        ========================================= */
        .reveal-element { opacity: 0; transform: translateY(3rem); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-element.is-visible { opacity: 1; transform: translateY(0); }
        .bg-clip-text { -webkit-background-clip: text; background-clip: text; color: transparent; }
        .gradient-text { background-image: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); }
        
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* =========================================
           5. HEADER, MENU OVERLAY & SIDEBARS
        ========================================= */
        .social-sidebar { display: none; position: fixed; bottom: 0; flex-direction: column; align-items: center; gap: 1.5rem; z-index: 40; padding-bottom: 2rem; }
        @media (min-width: 1024px) { .social-sidebar { display: flex; } }
        .social-sidebar.left { left: 2rem; }
        .social-sidebar.right { right: 2rem; }
        .social-sidebar a { color: var(--zinc-400); transition: all 0.3s; }
        .social-sidebar a:hover { color: var(--violet-600); transform: translateY(-4px); }
        .sidebar-line { width: 1px; height: 6rem; background-color: var(--zinc-300); margin-top: 0.5rem; }
        .email-vertical { writing-mode: vertical-rl; font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; }

        .site-header { position: fixed; top: 0; width: 100%; padding: 2rem 0; z-index: 50; transition: all 0.3s; pointer-events: none; }
        .site-header.z-60 { z-index: 60; }
        .site-header.scrolled { background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
        .header-inner { display: flex; justify-content: space-between; align-items: center; pointer-events: auto; padding: 0 1.5rem; width: 100%; max-width: 100vw; }
        @media (min-width: 768px) { .header-inner { padding: 0 3rem; } }
        @media (min-width: 1024px) { .header-inner { padding: 0 4rem; } }
        
        .header-actions { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 60; }
        .btn-menu { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--zinc-200); background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--zinc-900); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
        .btn-menu:hover { background: var(--white); border-color: var(--violet-500); }
        .btn-menu.is-active { background: var(--zinc-900); border-color: var(--zinc-900); color: var(--white); }
        
        .btn-primary { display: none; padding: 0.75rem 1.5rem; border-radius: 9999px; background: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); color: var(--white); font-size: 0.875rem; font-weight: 700; align-items: center; gap: 0.5rem; transition: all 0.3s; }
        @media (min-width: 640px) { .btn-primary { display: flex; } }
        .btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(139,92,246,0.4); }
        
        .header-logo { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; color: var(--zinc-900); position: relative; z-index: 60; transition: transform 0.3s; }
        @media (min-width: 768px) { .header-logo { font-size: 1.5rem; } }
        .header-logo:hover { transform: scale(1.05); }

        .menu-overlay { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6rem 0; opacity: 0; transform: translateY(-100%); transition: all 0.7s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
        .menu-overlay.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .menu-bg { position: absolute; inset: 0; background-color: var(--bg-color); z-index: -10; overflow: hidden; }
        .menu-hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: all 1s ease-out; }
        .menu-hover-img.is-active { opacity: 1; transform: scale(1); }
        .menu-orb { position: absolute; top: 0; left: 0; width: 600px; height: 600px; background-color: rgba(139,92,246,0.3); border-radius: 50%; filter: blur(100px); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
        .menu-glass { position: absolute; inset: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
        
        .menu-nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; }
        @media (min-width: 768px) { .menu-nav { gap: 2rem; font-size: 3.75rem; } }
        @media (min-width: 1024px) { .menu-nav { font-size: 4.5rem; } }
        .menu-link { color: var(--zinc-800); transition: all 0.3s; }
        .menu-link:hover { transform: scale(1.05); }
        
        .menu-social-area { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 3rem; }
        .menu-social-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-500); }
        .menu-social-list { display: flex; gap: 1rem; color: var(--zinc-600); }
        @media (min-width: 768px) { .menu-social-list { gap: 1.5rem; } }
        .social-btn { width: 3.5rem; height: 3.5rem; background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 50%; border: 1px solid var(--zinc-200); display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .social-btn:hover { color: var(--white); background: var(--violet-600); border-color: var(--violet-600); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(139,92,246,0.3); }

        /* =========================================
           6. SEÃ‡ÃƒO DE POST (SINGLE)
        ========================================= */
        .section-py { padding-top: 6rem; padding-bottom: 6rem; }
        @media (min-width: 768px) { .section-py { padding-top: 8rem; padding-bottom: 8rem; } }
        
        /* BotÃ£o Voltar */
        .back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--zinc-500); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.3s; margin-top: 8rem; margin-bottom: 2rem; position: relative; z-index: 20; }
        .back-link:hover { color: var(--violet-600); }
        
        /* Hero do Artigo */
        .post-hero { position: relative; border-radius: 2rem; overflow: hidden; width: 100%; aspect-ratio: 16/9; margin-bottom: -5rem; z-index: 10; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        @media (min-width: 768px) { .post-hero { aspect-ratio: 21/9; margin-bottom: -8rem; } }
        .post-hero img { width: 100%; height: 100%; object-fit: cover; }
        .post-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6)); pointer-events: none; }
        
        /* Container Principal do ConteÃºdo (Glassmorphism) */
        .post-container { position: relative; z-index: 20; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 2rem; border: 1px solid var(--zinc-100); padding: 3rem 1.5rem; max-width: 860px; margin: 0 auto; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1); }
        @media (min-width: 768px) { .post-container { padding: 4rem 5rem; } }

        /* Metadados e TÃ­tulo */
        .post-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
        .post-tag { background: var(--violet-100); color: var(--violet-600); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.375rem 1rem; border-radius: 9999px; }
        .post-date { font-size: 0.875rem; color: var(--zinc-500); font-weight: 600; }
        
        .post-title { font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 2rem; color: var(--zinc-900); }
        @media (min-width: 768px) { .post-title { font-size: 3.5rem; } }
        
        /* Tipografia do Artigo (Prose) */
        .post-content { color: var(--zinc-700); font-size: 1.125rem; line-height: 1.8; font-weight: 400; }
        .post-content p { margin-bottom: 1.75rem; }
        .post-content h2 { font-size: 1.875rem; font-weight: 800; color: var(--zinc-900); margin-top: 3.5rem; margin-bottom: 1.5rem; letter-spacing: -0.025em; line-height: 1.3; }
        .post-content h3 { font-size: 1.5rem; font-weight: 700; color: var(--zinc-900); margin-top: 2.5rem; margin-bottom: 1rem; }
        .post-content ul { margin-bottom: 1.75rem; padding-left: 1.5rem; }
        .post-content li { margin-bottom: 0.75rem; position: relative; list-style-type: none; }
        .post-content li::before { content: 'â€¢'; color: var(--violet-500); font-weight: bold; position: absolute; left: -1.25rem; font-size: 1.5rem; line-height: 1; top: -0.1rem; }
        .post-content strong { font-weight: 700; color: var(--zinc-900); }
        .post-content blockquote { border-left: 4px solid var(--violet-500); padding-left: 1.5rem; font-style: italic; font-size: 1.25rem; color: var(--zinc-800); margin: 2.5rem 0; background: linear-gradient(to right, var(--violet-50), transparent); padding: 1.5rem; border-radius: 0 1rem 1rem 0; }
        .post-content img { border-radius: 1rem; margin: 2.5rem 0; width: 100%; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }

        /* Partilha do Artigo */
        .post-share { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--zinc-200); }
        .share-text { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-500); }
        .share-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--zinc-200); display: flex; align-items: center; justify-content: center; color: var(--zinc-500); transition: all 0.3s; }
        .share-btn:hover { background: var(--violet-600); border-color: var(--violet-600); color: var(--white); transform: translateY(-3px); }

        /* -- CTA & Footer -- */
        .cta-section { text-align: center; margin-top: 4rem; border-top: 1px solid var(--zinc-100); background: rgba(255,255,255,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 6rem 1.5rem; }
        .cta-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 1.5rem; line-height: 1.1; }
        @media (min-width: 768px) { .cta-title { font-size: 4rem; } }
        
        .footer { border-top: 1px solid var(--zinc-200); background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 3rem 0; position: relative; z-index: 10; }
        .footer-top { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; }
        @media (min-width: 768px) { .footer-top { flex-direction: row; justify-content: space-between; } }
        .footer-bottom { border-top: 1px solid var(--zinc-100); margin-top: 1.25rem; padding-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; justify-content: center; }
        @media (min-width: 640px) { .footer-bottom { flex-direction: row; gap: 2rem; } }

        /* =========================================
           7. ELEMENTOS FLUTUANTES (BTT & COOKIES)
        ========================================= */
        .iv-btt-btn { position: fixed; bottom: 28px; right: 24px; z-index: 9991; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(124, 58, 237, .40); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: all .35s ease; outline-offset: 3px; }
        .iv-btt-btn.iv-btt--visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .iv-btt-btn:hover { filter: brightness(1.12); transform: translateY(-3px) scale(1.07); box-shadow: 0 8px 28px rgba(124, 58, 237, .50); }
        @media (max-width: 639px) { .iv-btt-btn { bottom: 100px; } }

        .iv-cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(140%); opacity: 0; max-width: 860px; width: calc(100% - 32px); z-index: 9990; pointer-events: none; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
        .iv-cookie-banner.iv-cookie--visible { transform: translateX(-50%) translateY(0); opacity: 1; }
        .iv-cookie-inner { pointer-events: auto; display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10); }
        @media (max-width: 640px) { .iv-cookie-inner { flex-direction: column; align-items: flex-start; gap: 14px; } }
        .iv-cookie-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
        .iv-cookie-content { flex: 1; }
        .iv-cookie-title { font-size: .95rem; font-weight: 800; color: #18181b; margin-bottom: 4px; line-height: 1.3; }
        .iv-cookie-text { font-size: .82rem; color: #71717a; line-height: 1.6; }
        .iv-cookie-link { color: #7c3aed; font-weight: 600; margin-left: 4px; }
        .iv-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .iv-cookie-btn { padding: 9px 18px; border-radius: 9999px; font-size: .82rem; font-weight: 700; transition: all .2s; white-space: nowrap; }
        .iv-cookie-btn--accept { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; box-shadow: 0 2px 12px rgba(124, 58, 237, .35); }
        .iv-cookie-btn--decline { background: transparent; color: #52525b; border: 1.5px solid rgba(0,0,0,.12); }
        
        .hidden { display: none !important; }


/* ===== From portfolio.html ===== */

/* =========================================
           1. VARIÃVEIS, CORES E RESET
        ========================================= */
        :root {
            /* Cores Base Zinc */
            --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7;
            --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a;
            --zinc-600: #52525b; --zinc-800: #27272a; --zinc-900: #18181b;

            /* Cores de Destaque */
            --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed;
            --fuchsia-400: #e879f9; --fuchsia-500: #d946ef;
            --orange-400: #fb923c; --orange-500: #f97316;
            --sky-500: #0ea5e9; --blue-500: #3b82f6; --blue-600: #2563eb;
            
            --white: #ffffff; --black: #000000;
            --bg-color: #f8f9fa;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--bg-color); color: var(--zinc-900);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5;
        }
        ::selection { background-color: var(--violet-500); color: var(--white); }
        a { text-decoration: none; color: inherit; }
        button { border: none; background: none; font-family: inherit; cursor: pointer; }
        ul { list-style: none; }
        img, svg { max-width: 100%; display: block; }
        
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        @media (min-width: 768px) { .container { padding: 0 3rem; } }

        /* =========================================
           2. PRELOADER
        ========================================= */
        .iv-preloader { position: fixed; inset: 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); z-index: 999999; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease-out; }
        .iv-preloader.hide { opacity: 0; pointer-events: none; }
        .iv-preloader-logo { width: 32px; height: 32px; background: linear-gradient(135deg, #8b5cf6, #ec4899); border-radius: 50%; position: relative; animation: iv-pulse 1.2s ease-in-out infinite; }
        .iv-preloader-logo::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, #8b5cf6, #ec4899, #8b5cf6); border-radius: 50%; opacity: 0.3; animation: iv-rotate 2s linear infinite; }
        @keyframes iv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
        @keyframes iv-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        body { visibility: visible !important; } /* Force visibility */


        /* =========================================
           3. BACKGROUND PARALLAX & CURSOR
        ========================================= */
        .designer-bg { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
        .designer-bg-mix { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.7; }
        .bg-orb-1 { position: absolute; top: 0; left: 0; width: 400px; height: 400px; background-color: rgba(167, 139, 250, 0.5); border-radius: 50%; filter: blur(100px); }
        .bg-orb-2 { position: absolute; top: 0; left: 0; width: 500px; height: 500px; background-color: rgba(232, 121, 249, 0.4); border-radius: 50%; filter: blur(140px); }
        @media (min-width: 768px) { .bg-orb-1 { width: 600px; height: 600px; } .bg-orb-2 { width: 800px; height: 800px; } }
        
        .designer-bg { --mouse-x: 0px; --mouse-y: 0px; }
        .parallax-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
        .parallax-layer-1 { transform: translate(calc(var(--mouse-x) * -0.2), calc(var(--mouse-y) * -0.2)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-2 { transform: translate(calc(var(--mouse-x) * 0.4), calc(var(--mouse-y) * 0.4)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        .parallax-layer-3 { transform: translate(calc(var(--mouse-x) * -0.6), calc(var(--mouse-y) * -0.6)); transition: transform 0.2s cubic-bezier(0.1, 0, 0.2, 1); }
        
        @keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } }
        @keyframes float-medium { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(-15deg); } }
        @keyframes float-fast { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-40px) rotate(20deg); } }
        .shape-float-1 { animation: float-slow 8s ease-in-out infinite; }
        .shape-float-2 { animation: float-medium 6s ease-in-out infinite; }
        .shape-float-3 { animation: float-fast 10s ease-in-out infinite; }
        .pattern-dots { background-image: radial-gradient(rgba(0,0,0,0.1) 2px, transparent 2px); background-size: 30px 30px; opacity: 0.2; }

        @media (pointer: fine) {
            body, a, button, input, textarea, select, .cursor-pointer { cursor: none !important; }
            #cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background-color: var(--violet-500); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.15s ease-out, background-color 0.3s; }
            #cursor-outline { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1.5px solid rgba(139, 92, 246, 0.5); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s; }
            #cursor-outline.hover { width: 60px !important; height: 60px !important; background-color: rgba(139, 92, 246, 0.1) !important; border-color: rgba(217, 70, 239, 0.8) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; mix-blend-mode: normal !important; }
            #cursor-dot.hover { transform: translate(-50%, -50%) scale(0.5) !important; background-color: var(--fuchsia-500) !important; opacity: 1 !important; }
            #cursor-outline.hover-text { width: 100px; height: 100px; background-color: var(--white); border-color: transparent; mix-blend-mode: difference; z-index: 99998; }
            #cursor-dot.hover-text { opacity: 0; }
            .cursor-hidden { opacity: 0; }
        }

        /* =========================================
           4. SCROLL REVEAL & UTILITIES
        ========================================= */
        .reveal-element { opacity: 0; transform: translateY(3rem); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-element.is-visible { opacity: 1; transform: translateY(0); }
        .glass-panel { background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 30px rgba(0,0,0,0.05); }
        .bg-clip-text { -webkit-background-clip: text; background-clip: text; color: transparent; }
        .gradient-text { background-image: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); }
        
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* =========================================
           5. HEADER, MENU OVERLAY & SIDEBARS
        ========================================= */
        .social-sidebar { display: none; position: fixed; bottom: 0; flex-direction: column; align-items: center; gap: 1.5rem; z-index: 40; padding-bottom: 2rem; }
        @media (min-width: 1024px) { .social-sidebar { display: flex; } }
        .social-sidebar.left { left: 2rem; }
        .social-sidebar.right { right: 2rem; }
        .social-sidebar a { color: var(--zinc-400); transition: all 0.3s; }
        .social-sidebar a:hover { color: var(--violet-600); transform: translateY(-4px); }
        .sidebar-line { width: 1px; height: 6rem; background-color: var(--zinc-300); margin-top: 0.5rem; }
        .email-vertical { writing-mode: vertical-rl; font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; }

        .site-header { position: fixed; top: 0; width: 100%; padding: 2rem 0; z-index: 50; transition: all 0.3s; pointer-events: none; }
        .site-header.z-60 { z-index: 60; }
        .header-inner { display: flex; justify-content: space-between; align-items: center; pointer-events: auto; padding: 0 1.5rem; width: 100%; max-width: 100vw; }
        @media (min-width: 768px) { .header-inner { padding: 0 3rem; } }
        @media (min-width: 1024px) { .header-inner { padding: 0 4rem; } }
        
        .header-actions { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 60; }
        .btn-menu { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--zinc-200); background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--zinc-900); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
        .btn-menu:hover { background: var(--white); border-color: var(--violet-500); }
        .btn-menu.is-active { background: var(--zinc-900); border-color: var(--zinc-900); color: var(--white); }
        
        .btn-primary { display: none; padding: 0.75rem 1.5rem; border-radius: 9999px; background: linear-gradient(to right, var(--violet-600), var(--fuchsia-500)); color: var(--white); font-size: 0.875rem; font-weight: 700; align-items: center; gap: 0.5rem; transition: all 0.3s; }
        @media (min-width: 640px) { .btn-primary { display: flex; } }
        .btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(139,92,246,0.4); }
        
        .header-logo { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; color: var(--zinc-900); position: relative; z-index: 60; transition: transform 0.3s; }
        @media (min-width: 768px) { .header-logo { font-size: 1.5rem; } }
        .header-logo:hover { transform: scale(1.05); }

        .menu-overlay { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6rem 0; opacity: 0; transform: translateY(-100%); transition: all 0.7s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
        .menu-overlay.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .menu-bg { position: absolute; inset: 0; background-color: var(--bg-color); z-index: -10; overflow: hidden; }
        .menu-hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: all 1s ease-out; }
        .menu-hover-img.is-active { opacity: 1; transform: scale(1); }
        .menu-orb { position: absolute; top: 0; left: 0; width: 600px; height: 600px; background-color: rgba(139,92,246,0.3); border-radius: 50%; filter: blur(100px); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
        .menu-glass { position: absolute; inset: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
        
        .menu-nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; }
        @media (min-width: 768px) { .menu-nav { gap: 2rem; font-size: 3.75rem; } }
        @media (min-width: 1024px) { .menu-nav { font-size: 4.5rem; } }
        .menu-link { color: var(--zinc-800); transition: all 0.3s; }
        .menu-link:hover { transform: scale(1.05); }
        .menu-link[data-target="home"]:hover { color: var(--violet-600); }
        .menu-link[data-target="portfolio"]:hover { color: var(--blue-500); }
        .menu-link[data-target="contatos"]:hover { color: var(--orange-500); }
        .menu-link[data-target="blog"]:hover { color: var(--sky-500); }
        
        .menu-social-area { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 3rem; }
        .menu-social-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zinc-500); }
        .menu-social-list { display: flex; gap: 1rem; color: var(--zinc-600); }
        @media (min-width: 768px) { .menu-social-list { gap: 1.5rem; } }
        .social-btn { width: 3.5rem; height: 3.5rem; background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 50%; border: 1px solid var(--zinc-200); display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .social-btn:hover { color: var(--white); background: var(--violet-600); border-color: var(--violet-600); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(139,92,246,0.3); }

        /* =========================================
           6. SEÃ‡Ã•ES ESPECÃFICAS (PORTFOLIO)
        ========================================= */
        .section-py { padding-top: 6rem; padding-bottom: 6rem; }
        @media (min-width: 768px) { .section-py { padding-top: 8rem; padding-bottom: 8rem; } }
        
        .page-header { padding-top: 10rem; padding-bottom: 3rem; text-align: center; }
        @media (min-width: 768px) { .page-header { padding-top: 12rem; padding-bottom: 4rem; text-align: left; } }
        
        .label-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 1rem; display: block; }
        .section-title { font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 1.5rem; }
        @media (min-width: 768px) { .section-title { font-size: 4.5rem; } }
        .section-desc { font-size: 1.125rem; color: var(--zinc-500); max-width: 36rem; line-height: 1.6; margin: 0 auto; }
        @media (min-width: 768px) { .section-desc { font-size: 1.25rem; margin: 0; } }

        /* -- Portfolio Grid Completa -- */
        .portfolio-grid-page { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        @media (min-width: 768px) { .portfolio-grid-page { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
        @media (min-width: 1024px) { .portfolio-grid-page { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

        .portfolio-card { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 1.5rem; overflow: hidden; display: block; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: box-shadow 0.3s; }

        .portfolio-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
        
        .image-reveal-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
        .portfolio-card:hover .image-reveal-img { transform: scale(1.05); }
        
        .portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2), transparent); opacity: 0; transition: opacity 0.5s; z-index: 10; }
        .portfolio-card:hover .portfolio-overlay { opacity: 1; }
        
        .portfolio-content { position: absolute; bottom: 0; left: 0; padding: 2rem; z-index: 20; transform: translateY(1.5rem); opacity: 0; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; }
        @media (min-width: 768px) { .portfolio-content { padding: 3rem; } }
        .portfolio-card:hover .portfolio-content { transform: translateY(0); opacity: 1; }
        
        .portfolio-tags { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
        .portfolio-tag { background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); color: var(--white); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.375rem 1rem; border-radius: 9999px; }
        
        .portfolio-title { color: var(--white); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 0.5rem; }
        .portfolio-desc-hover { color: var(--zinc-300); font-size: 0.875rem; max-width: 32rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

        /* -- CTA & Footer -- */
        .cta-section { text-align: center; border-top: 1px solid var(--zinc-100); background: rgba(255,255,255,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
        .cta-title { font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 2rem; line-height: 0.9; }
        @media (min-width: 768px) { .cta-title { font-size: 4.5rem; } }
        @media (min-width: 1024px) { .cta-title { font-size: 6rem; } }

        .footer { border-top: 1px solid var(--zinc-200); background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 3rem 0; position: relative; z-index: 10; }
        .footer-top { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; }
        @media (min-width: 768px) { .footer-top { flex-direction: row; justify-content: space-between; } }
        .footer-bottom { border-top: 1px solid var(--zinc-100); margin-top: 1.25rem; padding-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; justify-content: center; }
        @media (min-width: 640px) { .footer-bottom { flex-direction: row; gap: 2rem; } }

        /* =========================================
           7. ELEMENTOS FLUTUANTES (BTT & COOKIES)
        ========================================= */
        .iv-btt-btn { position: fixed; bottom: 28px; right: 24px; z-index: 9991; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(124, 58, 237, .40); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: all .35s ease; outline-offset: 3px; }
        .iv-btt-btn.iv-btt--visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .iv-btt-btn:hover { filter: brightness(1.12); transform: translateY(-3px) scale(1.07); box-shadow: 0 8px 28px rgba(124, 58, 237, .50); }
        @media (max-width: 639px) { .iv-btt-btn { bottom: 100px; } }

        .iv-cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(140%); opacity: 0; max-width: 860px; width: calc(100% - 32px); z-index: 9990; pointer-events: none; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
        .iv-cookie-banner.iv-cookie--visible { transform: translateX(-50%) translateY(0); opacity: 1; }
        .iv-cookie-inner { pointer-events: auto; display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10); }
        @media (max-width: 640px) { .iv-cookie-inner { flex-direction: column; align-items: flex-start; gap: 14px; } }
        .iv-cookie-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
        .iv-cookie-content { flex: 1; }
        .iv-cookie-title { font-size: .95rem; font-weight: 800; color: #18181b; margin-bottom: 4px; line-height: 1.3; }
        .iv-cookie-text { font-size: .82rem; color: #71717a; line-height: 1.6; }
        .iv-cookie-link { color: #7c3aed; font-weight: 600; margin-left: 4px; }
        .iv-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .iv-cookie-btn { padding: 9px 18px; border-radius: 9999px; font-size: .82rem; font-weight: 700; transition: all .2s; white-space: nowrap; }
        .iv-cookie-btn--accept { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; box-shadow: 0 2px 12px rgba(124, 58, 237, .35); }
        .iv-cookie-btn--decline { background: transparent; color: #52525b; border: 1.5px solid rgba(0,0,0,.12); }
        
        .hidden { display: none !important; }


        /* =========================================
           8. PÁGINAS DE POLÍTICA & LEGAL
        ========================================= */
        .policy-page-wrapper {
            min-height: 100vh;
            padding: 10rem 1.5rem 6rem;
            position: relative;
            z-index: 10;
        }
        @media (min-width: 768px) {
            .policy-page-wrapper {
                padding: 12rem 3rem 8rem;
            }
        }

        .policy-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .policy-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.2rem;
            color: var(--violet-600);
            background: var(--violet-50);
            border: 1px solid var(--violet-100);
            padding: 0.5rem 1.25rem;
            border-radius: 9999px;
            margin-bottom: 2rem;
        }

        .policy-title {
            font-size: 3rem;
            font-weight: 900;
            letter-spacing: -0.05em;
            color: var(--zinc-900);
            margin-bottom: 1rem;
            line-height: 1.1;
        }
        @media (min-width: 768px) {
            .policy-title {
                font-size: 4.5rem;
            }
        }

        .policy-meta {
            font-size: 0.875rem;
            color: var(--zinc-400);
            font-weight: 500;
            margin-bottom: 4rem;
        }

        .policy-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid var(--zinc-100);
            border-radius: 2rem;
            padding: 2.5rem;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
        }
        @media (min-width: 768px) {
            .policy-card {
                padding: 4rem;
            }
        }

        .policy-content {
            color: var(--zinc-600);
            line-height: 1.8;
        }

        .policy-content h2 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--zinc-900);
            letter-spacing: -0.02em;
            margin: 3rem 0 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--violet-50);
        }

        .policy-content p {
            margin-bottom: 1.25rem;
            font-size: 1rem;
        }

        .policy-content ul {
            margin-bottom: 2rem;
            list-style: none;
            padding: 0;
        }

        .policy-content li {
            position: relative;
            padding-left: 1.75rem;
            margin-bottom: 0.75rem;
            font-size: 1rem;
        }

        .policy-content li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.7rem;
            width: 8px;
            height: 2px;
            background: var(--violet-500);
            border-radius: 999px;
        }

        .policy-content a {
            color: var(--violet-600);
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 4px;
            transition: color 0.3s;
        }

        .policy-content a:hover {
            color: var(--violet-800);
        }

        .policy-highlight {
            background: linear-gradient(135deg, var(--violet-50) 0%, #ffffff 100%);
            border-left: 4px solid var(--violet-500);
            padding: 2rem;
            border-radius: 0 1.5rem 1.5rem 0;
            margin: 2.5rem 0;
            font-style: italic;
            color: var(--zinc-800);
        }

        .policy-footer {
            margin-top: 4rem;
            padding-top: 2.5rem;
            border-top: 1px solid var(--zinc-100);
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            color: var(--zinc-400);
            font-weight: 700;
            font-size: 0.875rem;
            transition: all 0.3s;
        }

        .btn-back:hover {
            color: var(--violet-600);
            transform: translateX(-5px);
        }

        .btn-back svg {
            transition: transform 0.3s;
        }

        .btn-back:hover svg {
            transform: scale(1.1);
        }