/* ESTILOS CUSTOMIZADOS E VARIÁVEIS DO PROJETO */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playball:wght@400&display=swap');
        
        :root {
            font-family: 'Inter', sans-serif;
            --color-lime: #84CC16; /* text-lime-500 */
        }

        /* Estilo para a fonte principal do título (simulando a fonte cursiva) */
        .title-font {
            font-family: 'Playball', cursive;
            font-size: clamp(3rem, 6vw, 4.5rem); /* Ajuste de tamanho responsivo */
            line-height: 1;
        }

        /* Classe para o fundo com vídeo em loop */
        .background-container {
            position: relative;
            overflow: hidden;
        }

        /* Vídeo de fundo */
        .background-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        /* Overlay escuro aplicado sobre o vídeo (40% preto) */
        .background-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0);
            z-index: 1;
        }

        /* Garante que o conteúdo principal fique acima do overlay */
        .main-content {
            position: relative;
            z-index: 2;
            padding-left: 0; /* Removido o padding fixo, pois o flexbox lida com o espaçamento */
        }
        
        /* Mobile home — layout fixo igual em todas as larguras (incl. iPhone SE 375px) */
        @media (max-width: 1023px) {
            body.page-index {
                overflow: hidden;
                height: 100vh;
                height: 100dvh;
            }

            body.page-index .lg\:flex {
                display: block;
                height: 100vh;
                height: 100dvh;
            }

            body.page-index main.index-mobile-home {
                position: fixed;
                inset: 0;
                width: 100%;
                width: 100vw;
                height: 100vh;
                height: 100dvh;
                min-height: 100dvh;
                max-height: 100dvh;
                padding: 0 !important;
                margin: 0 !important;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                z-index: 1;
            }

            body.page-index .background-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                min-height: 100%;
                object-fit: cover;
            }

            body.page-index .background-overlay {
                background-color: rgba(0, 0, 0, 0.25);
            }

            body.page-index .index-fab-login {
                position: fixed;
                z-index: 40;
                right: max(1rem, env(safe-area-inset-right, 1rem));
                bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                min-height: 48px;
                min-width: 48px;
                padding: 0.75rem 1.25rem;
                border-radius: 9999px;
                background: #65a30d;
                color: #fff;
                font-weight: 600;
                font-size: 0.875rem;
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
                border: none;
                cursor: pointer;
            }

            body.page-index .index-fab-login:active {
                background: #84cc16;
            }
        }
        
        /* Mobile: drawer via root-mobile.css + mobile-common.css */
        @media (max-width: 1024px) {
            .main-content:not(.index-mobile-home) {
                min-height: calc(100vh - 0px);
                padding-top: 3.5rem;
            }
            
            .background-video {
                height: 100vh;
            }
        }
        
        /* Botão Shimmer (efeito brilho em movimento) */
        .shimmer-button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            background: linear-gradient(110deg, rgba(255,255,255,0.06), rgba(255,255,255,0.22), rgba(255,255,255,0.06));
            background-size: 200% 100%;
            animation: shimmer 2s linear infinite;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.3);
        }
        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        /* Shine Border (efeito de borda brilhante animada) */
        .shine-border {
            position: relative;
        }
        .shine-border::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px; /* espessura da borda */
            background: conic-gradient(
                from 0deg,
                rgba(163, 230, 53, 0.2),
                rgba(59, 130, 246, 0.3),
                rgba(147, 51, 234, 0.3),
                rgba(244, 63, 94, 0.3),
                rgba(163, 230, 53, 0.2)
            );
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            animation: shine-rotate 4s linear infinite;
        }
        @keyframes shine-rotate {
            to { transform: rotate(1turn); }
        }

        /* Removido CSS de modal local — modal global controla estilos */

.background-container::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-image: url('assets/img/blackgraund.png');
                        background-size: cover;
                        background-position: center;
                        z-index: 0;
                    }