/* ==============================
           RESET & BASE
        ============================== */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html {
            height: 100%;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        body {
            font-family: var(--font-main);
            background-color: var(--bg);
            color: var(--text);
            overflow: hidden;
            height: 100dvh;
            transition: background-color 0.4s var(--ease-standard), color 0.4s var(--ease-standard);
            line-height: 1.5;
        }
        /* Classe base para os elementos que serão animados */
            .anim-fade-in {
                opacity: 0; /* Mantém o elemento oculto até a animação iniciar */
                animation-name: fadeInUp;
                animation-duration: 0.8s; /* Duração da transição */
                animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); /* Curva de velocidade suave */
                animation-fill-mode: forwards; /* Garante que o elemento permaneça visível após o término */
            }

            /* Definição da animação: desliza 20px para cima enquanto ganha opacidade */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

/* Skip to content for accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    background: var(--primary);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-weight: 600;
            font-size: var(--text-sm);
            z-index: 99999;
            transition: top 0.2s ease;
        }
        .skip-link:focus {
            top: var(--space-md);
        }

        /* Focus visible for accessibility */
        :focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }

        button:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }