/* Custom styles para fontes e cores */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #111827; /* bg-gray-900 */
            color: #d1d5db; /* text-gray-300 */
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
        }
        .text-gold {
            color: #D4AF37; /* Um tom de dourado mais vibrante */
        }
        .bg-gold {
            background-color: #D4AF37;
        }
        .border-gold {
            border-color: #D4AF37;
        }
        .hover\:bg-gold-dark:hover {
            background-color: #b89b3c;
        }
        .section-bg {
            background-color: #1f2937; /* bg-gray-800 */
        }
        /* Video wrapper that preserves the video's original aspect ratio */
        .video-wrap {
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
            border-radius: 0.75rem;
            box-shadow: 0 18px 40px rgba(2,6,23,0.6);
            background: #000;
            display: block;
        }
        .video-wrap video {
            width: 100%;
            height: auto; /* preserve intrinsic aspect ratio */
            display: block;
            object-fit: contain;
            border-radius: 0.75rem;
        }
        /* Play overlay centered on video */
        .video-wrap { position: relative; }
        .video-play-overlay {
            position: absolute;
            inset: 0; /* top:0; right:0; bottom:0; left:0 */
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none; /* allow click through except button */
        }
        .video-play-overlay button {
            pointer-events: auto;
            background: rgba(0,0,0,0.56);
            border: 2px solid rgba(212,175,55,0.14);
            color: #fff;
            width: 84px;
            height: 84px;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 30px rgba(2,6,23,0.6);
            transition: transform 180ms ease, background 180ms ease, opacity 180ms ease;
            font-size: 0;
        }
        .video-play-overlay button:focus { outline: 3px solid rgba(212,175,55,0.18); }
        .video-play-overlay button:hover { transform: scale(1.05); }
        .video-play-icon {
            width: 34px; height: 34px; display: block; fill: currentColor;
        }
        /* Gradient background for the Extrajudicial section */
        #extrajudicial.section-bg {
            background-image: linear-gradient(135deg, rgba(17,24,39,0.92) 0%, rgba(31,41,55,0.85) 40%, rgba(28,20,12,0.06) 100%);
            background-blend-mode: overlay;
            background-size: cover;
            background-position: center;
        }
        /* Patterned background for FAQ: subtle diagonal stripes + soft dots */
        #faq.section-bg {
            background-image: 
                linear-gradient(135deg, rgba(17,24,39,0.96) 0%, rgba(31,41,55,0.94) 100%),
                repeating-linear-gradient(45deg, rgba(212,175,55,0.03) 0 2px, rgba(212,175,55,0.00) 2px 10px),
                radial-gradient(circle at 10% 10%, rgba(212,175,55,0.02), rgba(212,175,55,0) 10%);
            background-blend-mode: overlay, normal, normal;
            background-size: cover, 12px 12px, 200px 200px;
            background-position: center, 0 0, 20% 10%;
        }
        /* Background da seção de atuação com overlay (removido do inline style) */
        .atuacao-bg {
            background-image: linear-gradient(rgba(17,24,39,0.65), rgba(17,24,39,0.65)), url('estatua-da-justica.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        /* Skip link (a11y) */
        .skip-link {
            position: absolute;
            left: -999px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
        .skip-link:focus {
            left: 1rem;
            top: 1rem;
            width: auto;
            height: auto;
            background: #111827;
            color: #fff;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            z-index: 60;
        }
        /* Efeito de revelação no scroll */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
            will-change: opacity, transform;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
            animation: fadeIn 1.1s cubic-bezier(0.4,0,0.2,1);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* Advantage cards: subtle lift on hover and reveal scaling */
        .adv-card {
            transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease, background-color 200ms ease;
            will-change: transform, box-shadow;
        }
        .adv-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 18px 40px rgba(2,6,23,0.45);
        }
        .adv-card.visible {
            transform: translateY(0) scale(1);
        }
        /* Accessibility helper (visually hidden) */
        .sr-only {
            position: absolute !important;
            width: 1px; height: 1px;
            padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
            white-space: nowrap; border: 0;
        }
        /* Hero container & arrow (animated chevron) */
        .hero {
            position: relative;
        }
        .hero-arrow {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 2.25rem;
            color: #D4AF37;
            text-decoration: none;
            z-index: 30;
            display: inline-block;
            padding: 0.25rem;
        }
    .hero-arrow svg {
            width: 44px;
            height: 44px;
            display: block;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transform-origin: center;
            animation: hero-bob 1.6s ease-in-out infinite;
            transition: transform 220ms ease, opacity 220ms ease;
        }
            /* Marquee (esteira) dentro da hero */
            .hero-marquee {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 170px; /* sits just above arrow on desktop, overridden via media queries */
                width: min(88%, 1100px);
                z-index: 28;
                pointer-events: auto;
                display: flex;
                justify-content: center;
            }
            .marquee-mask {
                width: 100%;
                overflow: hidden;
                border-radius: 9999px;
                backdrop-filter: blur(4px);
                background: linear-gradient(180deg, rgba(17,24,39,0.28), rgba(17,24,39,0.12));
                border: 1px solid rgba(255,255,255,0.04);
                padding: 6px 12px;
            }
            .marquee {
                display: inline-flex;
                align-items: center;
                gap: 18px;
                white-space: nowrap;
                will-change: transform;
                animation: marquee-scroll 20s linear infinite;
                font-weight: 600;
                color: rgba(255,255,255,0.95);
                font-size: 0.95rem;
            }
            .marquee:focus,
            .marquee:hover {
                animation-play-state: paused; /* pause on hover/focus for accessibility */
                outline: none;
            }
            .marquee-item {
                display: inline-block;
                padding: 6px 10px;
                border-radius: 6px;
                background: linear-gradient(90deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
                color: #fff;
            }
            .marquee-sep {
                color: rgba(212,175,55,0.9);
                font-weight: 700;
                opacity: 0.9;
            }
            @keyframes marquee-scroll {
                0% { transform: translateX(0); }
                100% { transform: translateX(-50%); }
            }
            /* Gradient mask on the left and right to create transparency fade at ends */
            .marquee-mask {
                position: relative;
            }
            .marquee-mask::before,
            .marquee-mask::after {
                content: '';
                position: absolute;
                top: 0; bottom: 0;
                width: 10%;
                pointer-events: none;
                z-index: 30;
            }
            .marquee-mask::before {
                left: 0;
                background: linear-gradient(90deg, rgba(17,24,39,1) 0%, rgba(17,24,39,0) 100%);
            }
            .marquee-mask::after {
                right: 0;
                background: linear-gradient(270deg, rgba(17,24,39,1) 0%, rgba(17,24,39,0) 100%);
            }
            /* Responsive adjustments */
            @media (max-width: 1024px) {
                .hero-marquee { bottom: 140px; }
                .marquee { font-size: 0.92rem; }
            }
            @media (max-width: 640px) {
                .hero-marquee { bottom: 88px; width: min(94%, 640px); }
                .marquee { animation-duration: 14s; font-size: 0.9rem; gap: 12px; }
                .marquee-mask::before, .marquee-mask::after { width: 14%; }
            }
        /* Material Icons sizing to match existing SVG icons */
        .material-icons {
            font-size: 2.5rem; /* 40px to match .h-10 */
            display: inline-block;
            vertical-align: middle;
            line-height: 1;
            color: inherit;
        }
        .hero-arrow:focus svg,
        .hero-arrow:hover svg {
            transform: translateY(6px) scale(1.06);
            opacity: 0.98;
        }
        @keyframes hero-bob {
            0% { transform: translateY(0); }
            50% { transform: translateY(8px); }
            100% { transform: translateY(0); }
        }
        @media (min-width: 768px) {
            /* Place arrow ~100px above the bottom of the hero for tablet+ */
            .hero-arrow { bottom: 100px; }
        }
        @media (min-width: 1024px) {
            /* Keep same ~100px distance on wide desktops */
            .hero-arrow { bottom: 100px; }
        }
        @media (max-width: 640px) {
            .hero-arrow { bottom: 2rem; }
        }
        /* Hover & micro-interactions */
        .nav-link {
            position: relative;
            color: inherit;
            transition: color 200ms ease;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            height: 2px;
            width: 0;
            background: #D4AF37;
            transition: width 220ms ease;
        }
        .nav-link:hover::after,
        .nav-link:focus::after {
            width: 100%;
        }
        .card-hover {
            transition: transform 360ms cubic-bezier(.2,.9,.2,1), box-shadow 360ms ease, border-color 360ms ease;
            will-change: transform, box-shadow;
        }
        .card-hover:hover,
        .card-hover:focus {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 18px 30px rgba(2,6,23,0.6);
            border-color: rgba(212,175,55,0.12);
        }
        .card-hover svg {
            transition: transform 360ms ease, color 360ms ease, fill 360ms ease;
        }
        .card-hover:hover svg {
            transform: translateY(-4px) scale(1.06);
            color: #D4AF37;
            fill: currentColor;
        }
        .cta {
            transition: transform 180ms ease, box-shadow 180ms ease;
        }
        .cta:hover,
        .cta:focus {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.25);
        }
        .fab-cta {
            transition: transform 180ms ease, box-shadow 180ms ease;
        }
        .fab-cta:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 14px 30px rgba(0,0,0,0.3);
        }
        /* FAQ accordion styles */
        .faq-section {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
        .faq-grid {
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            display: grid;
            gap: 1rem;
        }
        .faq-item {
            background: rgba(17,24,39,0.35);
            border: 1px solid rgba(212,175,55,0.06);
            padding: 1rem;
            border-radius: 0.5rem;
        }
        .faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: transparent;
            border: none;
            color: #e5e7eb;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            cursor: pointer;
        }
        .faq-question:focus {
            outline: 3px solid rgba(212,175,55,0.12);
            outline-offset: 2px;
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 320ms ease;
            color: #d1d5db;
            padding-top: 0.5rem;
        }
        .faq-item.open .faq-answer {
            max-height: 1000px; /* fallback for browsers without inline style set */
        }
        .faq-chevron {
            transition: transform 260ms ease;
            margin-left: 1rem;
            color: #D4AF37;
        }
        .faq-item.open .faq-chevron { transform: rotate(45deg); }
        /* Pulsing green glow for WhatsApp */
        @keyframes whatsapp-pulse {
            0% {
                box-shadow: 0 6px 20px rgba(37,211,102,0.06), 0 0 0 rgba(37,211,102,0.0);
                filter: drop-shadow(0 0 0 rgba(37,211,102,0));
            }
            50% {
                box-shadow: 0 12px 40px rgba(37,211,102,0.18), 0 0 18px rgba(37,211,102,0.28);
                filter: drop-shadow(0 0 12px rgba(37,211,102,0.6));
            }
            100% {
                box-shadow: 0 6px 20px rgba(37,211,102,0.06), 0 0 0 rgba(37,211,102,0.0);
                filter: drop-shadow(0 0 0 rgba(37,211,102,0));
            }
        }
        .whatsapp-fab {
            animation: whatsapp-pulse 2s ease-in-out infinite;
        }
        /* Slightly stronger glow on hover/focus */
        .whatsapp-fab:hover,
        .whatsapp-fab:focus {
            animation-duration: 1.6s;
            box-shadow: 0 18px 50px rgba(37,211,102,0.22), 0 0 24px rgba(37,211,102,0.36);
        }
        .whatsapp-icon {
            display: block;
            color: white;
        }
        /* Animated hamburger for mobile */
        .hamburger {
            width: 36px;
            height: 28px;
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            padding: 4px;
        }
        .hamburger-line {
            display: block;
            width: 100%;
            height: 3px;
            background: currentColor;
            border-radius: 2px;
            transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
            transform-origin: center;
        }
        .hamburger.open .hamburger-line:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }
        .hamburger.open .hamburger-line:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        .hamburger.open .hamburger-line:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }
        /* Focus styles */
        :focus-visible {
            outline: 3px solid rgba(212,175,55,0.18);
            outline-offset: 3px;
        }