/* 
 * style.css 
 * Estilos complementares que aumentam a suavidade e a usabilidade
 * da página onde as classes nativas do Tailwind não alcançam diretamente.
 */

/* Ativa o comportamento de rolagem suave de forma nativa e em toda a página */
html {
    scroll-behavior: smooth;
}

/* 
 * Melhor renderização de fontes, ajusta as bordas serrilhadas no macOS 
 * e melhora também a legibilidade geral das fontes em fundos claros
 */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Fundo `#FFFFFF` e texto `#1A1A1A` estão configurados no tailwind extend (index.html) */
}

/* Definição de uma leve animação de entrada (fade int com subida) para carregar os elementos com mais sofisticação */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplica o fade-in para as seções na tag 'main' */
main>section {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 
 * Cascade de tempo para o efeito: com as variáveis fixas o efeito cascata 
 * carrega suavemente o conteúdo sem fatigar os olhos 
 */
main>section:nth-child(1) {
    animation-delay: 0.1s;
}

main>section:nth-child(2) {
    animation-delay: 0.2s;
}

main>section:nth-child(3) {
    animation-delay: 0.3s;
}

main>section:nth-child(4) {
    animation-delay: 0.4s;
}

main>section:nth-child(5) {
    animation-delay: 0.5s;
}

main>section:nth-child(6) {
    animation-delay: 0.6s;
}

main>section:nth-child(7) {
    animation-delay: 0.7s;
}

img {
    border-radius: 30px;
}

p,
li {
    text-align: justify;
}

p.text-sm.text-gray-500.mt-6,
p.text-gray-600.mb-8.max-w-lg.mx-auto,
h2, h3,
footer p {
    text-align: center;
}