:root {
    /* Esquema Claro */
    --light-bg: #f8f9fa; /* Branco suave */
    --light-surface: #ffffff; /* Branco puro */
    --brand-orange: #f97316; /* Laranja (mantido) */
    --text-dark: #212529; /* Cinza bem escuro (quase preto) */
    --text-muted-dark: #6c757d; /* Cinza médio */
    --border-color-light: rgba(0, 0, 0, 0.08); /* Cor da borda sutil */
    --shadow-color-light: rgba(0, 0, 0, 0.1); /* Cor da sombra */
    --gap: 1rem;
    
    /* Cor de Fundo do Modal */
    --modal-overlay: rgba(0, 0, 0, 0.9); /* Fundo bem escuro */
    /* Cor dos Botões de Ação */
    --action-buttons-bg: rgba(0, 0, 0, 0.4); 

    /* === NOVAS VARIÁVEIS PARA MODO ESCURO === */
    --dark-bg: #0a0a0a; /* Fundo mais escuro */
    --dark-surface: #141414; /* Superfície de cards/seções escura */
    --text-light: #f1f1f1; /* Texto claro */
    --text-muted-light: #a0a0a0; /* Texto claro suave */
    --border-color-dark: rgba(255, 255, 255, 0.08); /* Borda clara sutil */
    --shadow-color-dark: rgba(0, 0, 0, 0.7); /* Sombra mais intensa */
    
    /* Variaveis Ativas (Default: Light Mode) */
    --bg-color: var(--light-bg);
    --surface-color: var(--light-surface);
    --text-color: var(--text-dark);
    --text-muted-color: var(--text-muted-dark);
    --border-color: var(--border-color-light);
    --shadow-color: var(--shadow-color-light);
}

/* 💥 MODO ESCURO PRINCIPAL 💥 */
body.dark-mode {
    --bg-color: var(--dark-bg);
    --surface-color: var(--dark-surface);
    --text-color: var(--text-light);
    --text-muted-color: var(--text-muted-light);
    --border-color: var(--border-color-dark);
    --shadow-color: var(--shadow-color-dark);
    
    /* Sobrescreve o fundo do body e a cor do texto */
    background-color: var(--bg-color);
    color: var(--text-color); 
    
    /* Ajuste na grade sutil (mantendo a visibilidade baixa, mas com cor clara) */
    background-image: linear-gradient(to right, rgba(255,255,255,0.01) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.01) 1px, transparent 1px);
}

html { scroll-behavior: smooth; }

body {
    /* Fonte 'Inter' como padrão para textos corridos */
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color); /* Usando var ativa */
    background-image: linear-gradient(to right, rgba(0,0,0,0.01) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0,0,0,0.01) 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--text-color); /* Usando var ativa */
    overflow-x: hidden;
    transition: background-color 0.4s, color 0.4s;
}

/* Aplicando a fonte 'Playfair Display' nos títulos principais */
h2, 
h3,
.preloader-text,
#lightbox-details-title {
    font-family: 'Playfair Display', serif;
}

/* --- Preloader --- */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease-out, visibility 0.5s ease-out, background-color 0.4s; cursor: pointer; }
#preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-text { font-size: 2rem; font-weight: 900; color: var(--text-color); letter-spacing: 0.2em; animation: text-appear 1s cubic-bezier(0.19, 1, 0.22, 1) forwards; }

@keyframes text-appear {
    0% { filter: blur(12px); opacity: 0; }
    70%, 100% { filter: blur(0); opacity: 1; }
}

/* --- Main Content --- */
#main-content { opacity: 0; transition: opacity 0.6s ease-in; }
main { padding-top: 80px; }

/* --- Header --- */
#header { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border-bottom: 1px solid var(--border-color); 
    transition: background 0.4s, border-color 0.4s;
}
body.dark-mode #header {
    background: rgba(20, 20, 20, 0.85); /* Fundo escuro translúcido */
}
.nav-link { 
    color: var(--text-muted-color); 
    transition: color 0.3s; 
    font-family: 'Inter', sans-serif; 
} 

/* 💥 MUDANÇA: Aumentando a fonte do menu desktop */
#header .nav-link {
    font-size: 1.125rem; /* 18px (o padrão era 16px) */
}

/* CORREÇÃO AQUI: Aumentando a especificidade para garantir a cor laranja */
#header .nav-link:hover, 
#header .nav-link.active { 
    color: var(--brand-orange) !important; 
}

/* Aplicando a fonte 'Playfair Display' no logo */
#header a.page-link { 
    color: var(--text-color); 
    font-family: 'Playfair Display', serif; 
} 

/* --- ÍCONES SOCIAIS E BOTÃO DE TEMA --- */
#header a svg,
#footer a svg {
    display: block; 
    margin: 0 auto; 
}

#header a[target="_blank"] { color: var(--text-muted-color); } 
#header a[target="_blank"]:hover { color: var(--brand-orange); }

.theme-switcher {
    color: var(--text-muted-color);
    transition: color 0.3s;
    cursor: pointer;
}
.theme-switcher:hover {
    color: var(--brand-orange);
}

/* 💥 NOVA REGRA: Corrigindo o botão do menu mobile */
#mobile-menu-button {
    color: var(--text-color);
    transition: color 0.3s;
}
#mobile-menu-button:hover {
    color: var(--brand-orange);
}
/* ---------------------------------------------------------------- */


/* * 💥 MUDANÇAS CRÍTICAS PARA LIGHTBOX FULL SCREEN FIXAÇÃO */
#lightbox { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: var(--modal-overlay); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    display: flex; align-items: center; justify-content: center; 
    z-index: 1000; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.4s ease, visibility 0.4s; 
    padding: 0; 
    pointer-events: none; 
}

#lightbox.active { 
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto; 
}

#lightbox-content { 
    display: block; 
    width: 100%; 
    height: 100%; 
    max-width: 100vw; 
    max-height: 100vh; 
    background-color: transparent; 
    border-radius: 0; 
    overflow: hidden; 
    box-shadow: none;
    transform: none; 
}

/* Container da Mídia (a imagem/vídeo em si) */
#lightbox-media-wrapper { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: transparent; 
    padding: 2rem; 
}
#lightbox-media-wrapper img,
#lightbox-media-wrapper iframe {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; 
}


/* Detalhes (Onde estão os botões de ação e o botão fechar) */
#lightbox-details { 
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20; 
    background-color: transparent; 
    padding: 0;
    overflow: hidden;
    pointer-events: none; 
}

/* Botão Fechar */
#lightbox-close { 
    position: fixed; 
    top: 1.5rem; 
    right: 1.5rem; 
    color: white; 
    background: rgba(0, 0, 0, 0.6); 
    padding: 0.5rem;
    border-radius: 50%;
    z-index: 30; 
    pointer-events: auto; 
    transition: color 0.3s, background 0.3s;
} 
#lightbox-close:hover { 
    color: var(--brand-orange); 
    background: rgba(0, 0, 0, 0.8);
}

/* Container de Ações (Onde estão Like/Share/Download/Doar) - FLUTUANDO ABAIXO DA IMAGEM */
#lightbox-actions { 
    position: absolute; 
    bottom: 2rem; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    gap: 1.5rem; 
    color: white; 
    margin-bottom: 0; 
    background-color: var(--action-buttons-bg); 
    backdrop-filter: blur(8px); 
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
    pointer-events: auto; 
} 
.lightbox-action { 
    color: white; 
    transition: color 0.3s, transform 0.3s; 
    display: flex;
    align-items: center;
}
.lightbox-action:hover { 
    color: var(--brand-orange); 
    transform: scale(1.1); 
}
#like-button { display: flex; align-items: center; gap: 0.5rem; }
#like-button.liked svg { color: rgb(239 68 68); fill: currentColor; }


/* Botões de Navegação (Dentro de #lightbox-media-wrapper) */
.lightbox-nav { 
    position: absolute; 
    top: 50%; 
    background: rgba(0, 0, 0, 0.4); 
    color: white; 
    padding: 1rem; 
    border-radius: 50%; 
    transform: translateY(-50%);
    opacity: 0.9;
    transition: opacity 0.3s, transform 0.3s, background 0.3s;
    z-index: 15;
}
.lightbox-nav:hover { 
    opacity: 1; 
    background: rgba(0, 0, 0, 0.6);
}
#lightbox-prev { left: 2rem; }
#lightbox-next { right: 2rem; }


/* --- Gallery Page Grid --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);
}
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}
 /* 💥 MUDANÇA: Grid de 2 colunas no mobile */
 @media (max-width: 640px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        gap: 0.5rem; /* Gap menor */
    }
}
/* 💥 NOVO: Voltando pra 1 coluna em telas BEM pequenas */
@media (max-width: 360px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}
.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: box-shadow 0.4s ease, background-color 0.4s;
    aspect-ratio: 4 / 5; 
    background-color: var(--surface-color); 
    box-shadow: 0 4px 10px var(--shadow-color); 
}
.gallery-card:hover { 
    box-shadow: 0 8px 20px var(--shadow-color); 
    z-index: 10;
}
.gallery-card img { 
    width: 100%;
    height: 100%;
    object-fit: cover; 
    cursor: pointer; 
    transition: transform 0.4s ease; 
}
.gallery-card:hover img { transform: scale(1.05); }
.card-title-overlay { 
    position: absolute; 
    bottom: 0; left: 0; right: 0; 
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); 
    color: white; 
    padding: 1.5rem 1rem 1rem; 
    opacity: 0; 
    transform: translateY(10px); 
    transition: opacity 0.4s ease, transform 0.4s ease; 
    font-weight: 500;
}
.gallery-card:hover .card-title-overlay { opacity: 1; transform: translateY(0); }

/* --- Filter buttons --- */
.filter-btn { 
    background-color: transparent; 
    border: 1px solid var(--text-muted-color); 
    color: var(--text-muted-color); 
    transition: all 0.3s ease; 
    padding: 0.375rem 1rem; 
    border-radius: 9999px; 
    font-size: 0.875rem; 
}
.filter-btn:hover {
    background-color: var(--brand-orange); 
    border-color: var(--brand-orange); 
    color: white; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}
.filter-btn.active { 
    background-color: var(--brand-orange); 
    border-color: var(--brand-orange); 
    color: white; 
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

/* --- Mobile Menu --- */
#mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(248, 249, 250, 0.95); backdrop-filter: blur(10px); z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
body.dark-mode #mobile-menu { background: rgba(10, 10, 10, 0.95); }
#mobile-menu.active { transform: translateY(0); }
#mobile-menu .nav-link { font-size: 1.5rem; color: var(--text-color); } 
#mobile-menu .nav-link.active { color: var(--brand-orange); }
#mobile-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--text-color); }
/* 💥 NOVA REGRA: Ajustando cor dos ícones sociais no menu mobile */
#mobile-menu a[target="_blank"]:hover { color: var(--brand-orange); }
#mobile-menu a[target="_blank"] svg { color: var(--text-muted-color); }

/* --- Scroll to top button --- */
#scroll-to-top { position: fixed; bottom: 2rem; right: 2rem; background: var(--brand-orange); color: white; border-radius: 50%; padding: 0.75rem; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s; z-index: 500; }
#scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* --- Footer --- */
#footer { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border-top: 1px solid var(--border-color); 
    transition: background 0.4s, border-color 0.4s;
}
body.dark-mode #footer {
    background: rgba(20, 20, 20, 0.85); 
}
#footer p, #footer a { color: var(--text-muted-color); } 
#footer a:hover { color: var(--brand-orange); }

/* Ajustes finos para tema claro/escuro */
#donate .bg-dark-surface { background-color: var(--surface-color); box-shadow: 0 4px 10px var(--shadow-color);}
#donate .border-gray-800 { border-color: var(--border-color); }
#donate .text-gray-300 { color: var(--text-muted-color); }
#about-me .text-gray-400 { color: var(--text-muted-color); }
#donate svg { color: var(--brand-orange); }

/* AJUSTE EXTRA (FORÇANDO TAMANHO DOS ÍCONES) */
.lightbox-action i[data-lucide] {
    width: 1.5rem !important;
    height: 1.5rem !important;
    display: block !important;
}

/* * *** NOVO BLOCO DE MUDANÇA *** * Ajustes de responsividade para o Lightbox em telas pequenas
*/
@media (max-width: 640px) {
    #lightbox-media-wrapper { 
        padding: 0.5rem; /* Menos padding na tela pequena */
    }
    
    #lightbox-actions {
        bottom: 1rem; /* Mais perto da borda */
        padding: 0.5rem 1rem; /* Padding menor */
        gap: 1rem; /* Espaço menor entre botões */
    }

    .lightbox-nav {
        padding: 0.5rem; /* Botão menor */
    }
    #lightbox-prev { left: 0.5rem; }
    #lightbox-next { right: 0.5rem; }

    #lightbox-close {
        top: 1rem;
        right: 1rem;
        background: rgba(0, 0, 0, 0.7); /* Um pouco mais escuro p/ garantir */
    }
    
    /* Reduz o tamanho dos ícones SVG dentro das ações no mobile */
    .lightbox-action svg {
        width: 1.25rem; /* 20px */
        height: 1.25rem; /* 20px */
    }
    
    #like-button span {
        font-size: 0.875rem; /* Texto do like menor */
    }
    
    /* 💥 NOVO BLOCO: Ajustes de Títulos e Espaçamento Mobile */
    .text-5xl {
        font-size: 2.25rem; /* Reduz de 3rem (48px) para 2.25rem (36px) */
        line-height: 2.5rem;
    }
    
    main section {
        /* Reduz o padding vertical das seções (original era py-20, ou 5rem) */
        padding-top: 3.5rem; /* 56px */
        padding-bottom: 3.5rem; /* 56px */
    }
    
    .text-lg {
         font-size: 1rem; /* Reduz subtítulos de 1.125rem para 1rem */
    }

    /* 💥 MUDANÇA AQUI: Ajuste do Preloader para mobile */
    .preloader-text {
        font-size: 1.5rem; /* 24px */
        letter-spacing: 0.15em;
        text-align: center;
        padding: 0 1rem; /* Evita que o texto cole nas bordas */
    }
}