body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
/* Desabilitar seleção de texto */
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none;    /* Firefox */
-ms-user-select: none;     /* IE/Edge */
user-select: none;         /* Padrão */
}
    
        /* Impede que o conteúdo "transborde" horizontalmente, evitando a aparição de uma barra de scroll horizontal indesejada. */
        html, body {
            overflow-x: hidden;
        }
        /* Estilos base para o corpo da página. */
        body {
                    /* --- ADIÇÃO 1: CÓDIGO PARA ESCONDER E FAZER FADE-IN --- */
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
            /* -------------------------------------------------------- */

            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* --- ADIÇÃO 2: CLASSE PARA REVELAR O CORPO DA PÁGINA --- */
        body.ready {
            opacity: 1;
        }
        /* Estilos para todos os títulos (h1, h2, h3). */
        h1, h2, h3 {
            font-weight: 800; /* Extra-bold */
            color: #0f172a;
            letter-spacing: -0.025em; /* Ligeiro ajuste no espaçamento entre letras. */
        }
        /* Estilos para parágrafos (p) e itens de lista (li). */
        p, li {
            font-size: 1.125rem; /* 18px */
            line-height: 1.8; /* Aumenta o espaçamento entre linhas para melhor legibilidade. */
            color: #334155;
        }
        /* Estilo para o texto em negrito. */
        strong {
            font-weight: 700; /* bold */
            color: #f8fafc;
        }
        /* Classe personalizada para adicionar uma sombra suave a ícones. Usa 'filter: drop-shadow' que contorna a forma do ícone, ao contrário do 'box-shadow' que cria uma sombra retangular. */
        .icon-shadow {
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }
        /* Estilo específico para parágrafos dentro do rodapé. */
        footer p {
            font-size: initial; /* Redefine o tamanho para o padrão. */
            line-height: initial; /* Redefine a altura da linha para o padrão. */
        }
        /* Define uma animação chamada 'soft-flash'. */
        @keyframes soft-flash {
            /* No início (0%) e no fim (100%), a cor do texto é cinzenta. */
            0%, 100% { color: #334155; } /* slate-700 */
            /* A meio da animação (50%), a cor do texto muda para vermelho. */
            50% { color: #dc2626; } /* red-600 */
        }
        /* Classe que pode ser aplicada a qualquer elemento para que ele execute a animação 'soft-flash' de forma infinita, com uma duração de 2.5 segundos por ciclo. */
        .animate-soft-flash {
            animation: soft-flash 2.5s infinite;
        }