/* --- CONFIGURAÇÃO DE VARIÁVEIS DE TEMA (PALETA REFINADA) --- */
:root {
    /* TEMA CLARO: Fundo branco puro, superfícies em cinza claro para contraste */
    --color-bg: #ffffff;
    --color-surface: #f9fafb;
    /* um cinza muito sutil para cards e seções */
    --color-border: #e5e7eb;
    /* borda suave */
    --color-text-base: #111827;
    /* texto principal quase preto */
    --color-text-muted: #6b7280;
    /* texto secundário */
    --color-header-bg: rgba(255, 255, 255, 0.75);
    --color-prose-body: #374151;
    --color-prose-headings: #111827;
    --color-aurora-1: rgba(167, 139, 250, 0.5);
    --color-aurora-2: rgba(244, 114, 182, 0.4);
}

html.dark {
    /* TEMA ESCURO: Fundo cinza escuro (mais confortável que preto), superfícies um tom acima */
    --color-bg: #18181b;
    /* cinza-zinco 900, mais suave que preto */
    --color-surface: #27272a;
    /* cinza-zinco 800 para cards e seções */
    --color-border: #3f3f46;
    /* borda sutil no escuro */
    --color-text-base: #f4f4f5;
    /* texto principal quase branco */
    --color-text-muted: #a1a1aa;
    /* texto secundário com bom contraste */
    --color-header-bg: rgba(24, 24, 27, 0.75);
    --color-prose-body: #d4d4d8;
    --color-prose-headings: #ffffff;
    --color-aurora-1: rgba(99, 102, 241, 0.4);
    --color-aurora-2: rgba(192, 132, 252, 0.3);
}

/* --- ESTILOS GLOBAIS --- */
body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    background-color: var(--color-bg);
    color: var(--color-text-base);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* --- NOVAS CLASSES DE UTILIDADE (MUITO IMPORTANTE) --- */
/* Use estas classes no seu HTML para aplicar as cores do tema de forma consistente */
.bg-surface {
    background-color: var(--color-surface);
}

.border-base {
    border-color: var(--color-border);
}

:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

.gradient-text {
    background-image: linear-gradient(to right, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glass-header {
    background-color: var(--color-header-bg);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.3s ease-in-out;
}

.header-scrolled .glass-header {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.aurora-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    overflow: hidden;
}

.aurora-bg::before,
.aurora-bg::after {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    background-image: radial-gradient(circle, var(--color-aurora-1) 0%, rgba(0, 0, 0, 0) 60%);
    border-radius: 50%;
    filter: blur(100px);
    animation: move-aurora 20s infinite linear;
    will-change: transform;
}

.aurora-bg::after {
    background-image: radial-gradient(circle, var(--color-aurora-2) 0%, rgba(0, 0, 0, 0) 60%);
    top: 50%;
    left: 50%;
    animation-delay: -10s;
}

@keyframes move-aurora {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1.2);
    }

    50% {
        transform: translate(-20%, -80%) rotate(180deg) scale(1.5);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1.2);
    }
}

.fade-in-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: opacity, transform;
}

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

/* ESTILOS DO CARROSSEL (SWIPER.JS) - CORRIGIDO */
.screenshots-carousel {
    /* Adiciona uma perspectiva para o efeito 3D funcionar corretamente */
    perspective: 1500px;
    padding-top: 2rem;
    padding-bottom: 4rem;
    position: relative; /* Necessário para posicionar os botões */
}

.screenshots-carousel .swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 360px; /* Largura fixa para os slides */
    height: 640px; /* Altura fixa para os slides */
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.4; /* Deixa os slides laterais mais apagados */
    transform: scale(0.8); /* Deixa os slides laterais menores */
}

/* Slide ativo (o do centro) fica totalmente visível e em tamanho normal */
.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem; /* 24px */
    border: 1px solid var(--color-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Oculta o efeito de sombra padrão do coverflow que pode ser indesejado */
.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
    background-image: none !important;
}


/* --- Estilos da Navegação e Paginação --- */
.swiper-button-next,
.swiper-button-prev {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    color: var(--color-text-base);
    transition: all 0.2s ease-in-out;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.1);
    background-color: var(--color-bg);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 900;
}

.swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: var(--color-text-muted);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.swiper-pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background-color: #8b5cf6; /* Cor roxa para destaque */
    opacity: 1;
}

/* Cores para o Tema Escuro */
html.dark .swiper-button-next,
html.dark .swiper-button-prev {
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    /* Cor clara para o ícone */
}

html.dark .swiper-button-next:hover,
html.dark .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

html.dark .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5);
    /* Cor clara para a paginação */
}


.swiper-pagination-bullet-active {
    background-color: #a78bfa;
    width: 24px;
    border-radius: 5px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1rem !important;
    font-weight: 900;
}

/* ESTILOS PARA CONTEÚDO (PROSE) */
.prose {
    color: var(--color-prose-body);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: var(--color-prose-headings);
}

.prose a {
    color: #8b5cf6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.prose a:hover {
    color: #a78bfa;
}