/* Importando fontes: Montserrat e Cinzel */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Cinzel:wght@400;600;700&display=swap');

/* Configurações Globais */
body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Cinzel', serif;
}

/* Fundo com efeito de Holofote (Spotlight) */
.spotlight-bg {
    background: radial-gradient(circle at center, #ffffff 0%, #dbeafe 45%, #eff6ff 100%);
}

.cursor-pointer {
    cursor: pointer;
}

/* Animações */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* --- ESTILO DO POPUP (MODAL) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: none; /* Escondido por padrão */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: white;
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 20px;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #64748b;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.close-modal:hover { color: #ef4444; }

/* Tabela Química do Modal */
.chemical-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.chemical-table tr { border-bottom: 1px solid #e2e8f0; }
.chemical-table td { padding: 6px 0; color: #475569; }
.chemical-table td:last-child { text-align: right; font-weight: 600; color: #0f172a; }

/* Scrollbar personalizada */
.modal-content::-webkit-scrollbar { width: 6px; }
.modal-content::-webkit-scrollbar-track { background: #f1f5f9; }
.modal-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }