/* Estilos Globais e Personalizados */

body {
    font-family: 'Inter', sans-serif;
}

/* Estilos para o Carrossel (Embla) */
.embla__slide {
    position: relative;
}

/* Estilos para os Dots do Carrossel */
.embla__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem; /* mt-6 */
}
.embla__dot {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.375rem;
    border-radius: 9999px;
    background-color: #FCD34D; /* Cor base: amber-300 */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}
.embla__dot--is-selected {
    background-color: #F59E0B; /* Cor selecionada: amber-500 */
    transform: scale(1.2);
}

/* Estilos para animação de Fade-in on Scroll */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px); /* Começa ligeiramente abaixo da posição final */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Otimização para animações */
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para o FAQ Accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}
.cookie-banner.is-visible {
    transform: translateY(0);
}

/* Estilos para o Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFBEB; /* Cor base: amber-50 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #FDE68A; /* Cor da borda: amber-200 */
    border-top-color: #F59E0B; /* Cor do topo: amber-600 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/*
  Personalização da cor do texto dos artigos no modo escuro.
  A classe .prose-invert define as cores para o modo escuro,
  e aqui estamos sobrescrevendo a cor do corpo do texto e dos títulos.
*/
.dark .prose-invert {
    --tw-prose-body: #F5F5F5; /* Cor do parágrafo (whitesmoke) */
    --tw-prose-headings: #F5F5F5; /* Cor dos títulos (h1, h2, etc.) */
    --tw-prose-lead: #F5F5F5;
    --tw-prose-bold: #F5F5F5;
}